有鑒於一直寫理論方面的學習方式好像效果不太好
（前面寫錯的部分搞不好被各位 IT 大大在內心鞭之數十驅之別院了囧rz），
因此邊做邊學，日後文章可能練習與理論穿插（我很懷疑我還能不能睡覺...）
如果內容有誤還請不吝指正>_<

今天做的是猜數字的遊戲，輸入一個數字來猜猜我的吧～
網址請點我

以下記錄做法

html：
放個輸入框讓使用者輸入字串，這裡是字串喔！即使輸入的是數字，依然是字串。
按鈕跟字串各給他們一個 id

<input type="text" id="textfield" placeholder="輸入你的數字！">
<input type="button" id="btn" value="猜猜看">

JavaScript：
首先設定三個變數，我分別設定了最小值、正確答案以及最大值

var correctNum = 24;
var biggestNum = 100;
var smallestNum = 0;

當頁面讀取完畢後就執行 guessIt() 函式

window.onload = guessIt;

按下按鈕後執行猜猜看的函式。
guessIt() 函式抓取 #btn 的 onclick 事件 --> 執行判斷解答的函式
什麼是getElementById ？

function guessIt() {
document.getElementById('btn').onclick = function(evt) {
guessAnswer();
}
}

輸入數字後按下按鈕，就開始判斷輸入的字串囉！
宣告變數 textNum 抓取 input.textfield 的值後，再將 textNum 值轉成數字。
上面有提到，輸入的即使是數字，但他仍是字串。
什麼是 parseInt() ？
它可以把字串轉成整數，從範例來看只要前面沒有字串，都可以轉成整數
另外一個長得很像的函式叫做 parseFloat(); 則是可以轉成小數點兒
然後判斷輸入字串時的各種場景...一堆 if else 有點頭暈
除了小於等於大於以外，還要判斷輸入字為非字串的處理方式，
在這裏我利用轉不成數字就出現 NaN 特性，條件設定為非數字 (!textToInt) 通通顯示這項訊息 alert('這是什麼？可以吃嗎？Ψ(￣∀￣)Ψ');

function guessAnswer() {
        var textNum = document.getElementById('textfield').value;
        var textToInt = parseInt(textNum);

        // 小於正確數字
        if (textToInt < correctNum) {
            alert('oops! 正確數字小於 ' + biggestNum + ' 大於 ' + textToInt + ' !');
        // 等於正確數字
        } else if (textToInt == correctNum) {
            alert('yes! 正確數字就是 ' + correctNum + ' !');
        // 大於正確數字
        } else if (textToInt > correctNum) {
            alert('oops! 正確數字小於 ' + textToInt + ' 大於 ' + smallestNum + ' !');
        // 非數字
        } else if (!textToInt) {
            alert('這是什麼？可以吃嗎？Ψ(￣∀￣)Ψ');
        }

    }

以上同步發表於 http://azzurro.blog.aznc.cc/learn_javascript_12/