我的好朋友溫斯頓會在這協助我們完成這程式

我知道他看起來已經好的不可思議

但我想稍微改一下他眼睛的大小

這是我畫他眼睛的位置

你可以看見我們設定填色接著畫兩個橢圓形

若我想縮小這橢圓形，我可以改變寬度

然後我也希望它是個圓形

所以我要把高度改成和寬度相同的值

我希望兩隻眼睛的大小一樣

所以得修改這隻眼睛的寬度和高度

糟糕，現在眼睛有一點過小，
所以我必須把它們改回原來大小

如果可以只改一個值就同時改變眼睛大小

那豈不是太棒了？

而這就是變數可以幫得上忙的地方

變數就像一個名字或為別的東西預留位置

我喜歡把變數想成一個有名字的大桶子

你可以把任何你想的東西放進桶子裡

但名字保持不變

我們稱桶子裡的東西為變數的值

讓我們開始真正地來寫一個變數

就從這裡開始

你所要做的就是寫入var，代表變數

空格，接著是變數的名字

它應該描述那變數所儲存的數值

所以我要把這一個叫做eyeSize，眼睛大小

你可以隨意給它任何你想要的名字

但在字與字之間不可以有任何空格

當然，別忘了寫分號

現在我已經寫了一個叫做eyeSize的變數

因為它將儲存溫斯頓眼睛的大小

但到目前為止，這個變數還沒有值

要給它一個值，我們只要寫入eyeSize

然後一個等號，接著20，分號

好了，看到那等號嗎？

忘了你的數學老師教你的那些

那個等號不是指「相等」，而是「指派」

這表示我們將數值20賦予變數eyeSize

換句話說，我們要把數字20

放進叫做eyeSize的桶子裡

記得在數學課中，你如何描述像是

x = 3，而3 = x嗎?

且它們全都表示相同的意思
因為它們相等？

但，這裡你不可以這麼寫

在等號左邊的東西

永遠是變數

而在等號右邊的東西永遠是值

那個你賦予變數的值

一個好方法幫助你記住哪邊該放什麼

是當你寫程式的同時大聲唸給自己聽

就像每個厲害的程式設計師所做的

當你敲一個等號，別說「等於」，改說「得到」

於是就變成，eyeSize得到20

而現在，無論何時我在我的程式中使用eyeSize

電腦將會像「噢對，那是一個變數」

「我知道它真正代表的是這個數值20」

看看這個－我只要複製它

然後將這四個數字改成

我的新變數eyeSize

你瞧！

溫斯頓的雙眼現在多麼渾圓而且大小一樣

而若我想改變雙眼的值

或雙眼的大小

我就可以只改變這一個變數的值

真是太神奇了！

最後幾點說明

至今我們寫了一個新變數叫做eyeSize

且這裡我們給它一個數值33

實際上我們只需一個步驟就可以全部完成

第一步，寫入var eyeSize

第二步，得到33

若我刪除這兩行

你可以看到一切都還是正常運作

此外，記住電腦從上到下依序讀取你的程式碼

所以它知道在下面的eyeSize代表甚麼

是因為我們已經在上面這裡定義它

如果相反地我把它放在下方這裡

那麼一旦我們執行到這行程式碼，電腦會

「eyeSize到底是什麼？
我不知道它是啥」

事實上，這裡我們收到錯誤訊息
說eyeSize尚未被定義

也許你會想說

「有啊，我有定義它啊，就在這裡！」

但電腦沒這麼聰明，它不知道

所以讓我們把它移回最上方

而且你必須時時確認

在你使用變數之前先定義它

現在你已經了解變數了！耶！