WEBVTT

00:00:01.083 --> 00:00:03.846
我的好朋友溫斯頓會在這協助我們完成這程式

00:00:03.846 --> 00:00:06.424
我知道他看起來已經好的不可思議

00:00:06.424 --> 00:00:08.911
但我想稍微改一下他眼睛的大小

00:00:08.911 --> 00:00:10.784
這是我畫他眼睛的位置

00:00:10.784 --> 00:00:13.343
你可以看見我們設定填色接著畫兩個橢圓形

00:00:13.343 --> 00:00:16.833
若我想縮小這橢圓形，我可以改變寬度

00:00:16.833 --> 00:00:18.011
然後我也希望它是個圓形

00:00:18.011 --> 00:00:20.284
所以我要把高度改成和寬度相同的值

00:00:20.284 --> 00:00:22.955
我希望兩隻眼睛的大小一樣

00:00:22.955 --> 00:00:25.381
所以得修改這隻眼睛的寬度和高度

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

00:00:28.707 --> 00:00:30.839
如果可以只改一個值就同時改變眼睛大小

00:00:30.839 --> 00:00:32.656
那豈不是太棒了？

00:00:32.877 --> 00:00:36.191
而這就是變數可以幫得上忙的地方

00:00:37.232 --> 00:00:40.848
變數就像一個名字或為別的東西預留位置

00:00:41.303 --> 00:00:44.523
我喜歡把變數想成一個有名字的大桶子

00:00:44.566 --> 00:00:46.295
你可以把任何你想的東西放進桶子裡

00:00:46.295 --> 00:00:47.588
但名字保持不變

00:00:47.747 --> 00:00:51.937
我們稱桶子裡的東西為變數的值

00:00:53.702 --> 00:00:55.745
讓我們開始真正地來寫一個變數

00:00:55.745 --> 00:00:57.564
就從這裡開始

00:00:57.564 --> 00:01:00.333
你所要做的就是寫入var，代表變數

00:01:00.333 --> 00:01:02.477
空格，接著是變數的名字

00:01:02.477 --> 00:01:04.465
它應該描述那變數所儲存的數值

00:01:04.465 --> 00:01:06.007
所以我要把這一個叫做eyeSize，眼睛大小

00:01:06.007 --> 00:01:07.997
你可以隨意給它任何你想要的名字

00:01:07.997 --> 00:01:10.043
但在字與字之間不可以有任何空格

00:01:10.043 --> 00:01:11.974
當然，別忘了寫分號

00:01:12.248 --> 00:01:14.447
現在我已經寫了一個叫做eyeSize的變數

00:01:14.447 --> 00:01:16.936
因為它將儲存溫斯頓眼睛的大小

00:01:16.936 --> 00:01:19.511
但到目前為止，這個變數還沒有值

00:01:19.846 --> 00:01:22.642
要給它一個值，我們只要寫入eyeSize

00:01:22.642 --> 00:01:27.186
然後一個等號，接著20，分號

00:01:27.611 --> 00:01:29.370
好了，看到那等號嗎？

00:01:29.370 --> 00:01:31.763
忘了你的數學老師教你的那些

00:01:31.763 --> 00:01:35.086
那個等號不是指「相等」，而是「指派」

00:01:35.391 --> 00:01:41.264
這表示我們將數值20賦予變數eyeSize

00:01:42.014 --> 00:01:43.716
換句話說，我們要把數字20

00:01:43.716 --> 00:01:45.576
放進叫做eyeSize的桶子裡

00:01:45.728 --> 00:01:48.438
記得在數學課中，你如何描述像是

00:01:48.438 --> 00:01:51.818
x = 3，而3 = x嗎?

00:01:51.818 --> 00:01:54.457
且它們全都表示相同的意思
因為它們相等？

00:01:54.457 --> 00:01:56.377
但，這裡你不可以這麼寫

00:01:56.377 --> 00:01:58.443
在等號左邊的東西

00:01:58.443 --> 00:01:59.985
永遠是變數

00:01:59.985 --> 00:02:03.397
而在等號右邊的東西永遠是值

00:02:03.397 --> 00:02:05.331
那個你賦予變數的值

00:02:05.501 --> 00:02:08.080
一個好方法幫助你記住哪邊該放什麼

00:02:08.080 --> 00:02:09.980
是當你寫程式的同時大聲唸給自己聽

00:02:09.980 --> 00:02:11.491
就像每個厲害的程式設計師所做的

00:02:11.491 --> 00:02:15.290
當你敲一個等號，別說「等於」，改說「得到」

00:02:15.290 --> 00:02:18.587
於是就變成，eyeSize得到20

00:02:19.619 --> 00:02:22.049
而現在，無論何時我在我的程式中使用eyeSize

00:02:22.049 --> 00:02:24.780
電腦將會像「噢對，那是一個變數」

00:02:24.780 --> 00:02:27.871
「我知道它真正代表的是這個數值20」

00:02:28.312 --> 00:02:31.131
看看這個－我只要複製它

00:02:31.419 --> 00:02:34.405
然後將這四個數字改成

00:02:34.785 --> 00:02:37.058
我的新變數eyeSize

00:02:38.255 --> 00:02:39.614
你瞧！

00:02:39.614 --> 00:02:43.920
溫斯頓的雙眼現在多麼渾圓而且大小一樣

00:02:43.920 --> 00:02:46.591
而若我想改變雙眼的值

00:02:46.591 --> 00:02:47.730
或雙眼的大小

00:02:47.730 --> 00:02:50.547
我就可以只改變這一個變數的值

00:02:51.002 --> 00:02:53.045
真是太神奇了！

00:02:54.309 --> 00:02:55.667
最後幾點說明

00:02:55.667 --> 00:02:58.512
至今我們寫了一個新變數叫做eyeSize

00:02:58.512 --> 00:03:01.037
且這裡我們給它一個數值33

00:03:01.037 --> 00:03:02.855
實際上我們只需一個步驟就可以全部完成

00:03:02.855 --> 00:03:05.927
第一步，寫入var eyeSize

00:03:05.927 --> 00:03:08.717
第二步，得到33

00:03:08.717 --> 00:03:10.825
若我刪除這兩行

00:03:10.825 --> 00:03:12.626
你可以看到一切都還是正常運作

00:03:13.449 --> 00:03:16.761
此外，記住電腦從上到下依序讀取你的程式碼

00:03:16.761 --> 00:03:19.188
所以它知道在下面的eyeSize代表甚麼

00:03:19.188 --> 00:03:21.668
是因為我們已經在上面這裡定義它

00:03:21.668 --> 00:03:24.309
如果相反地我把它放在下方這裡

00:03:25.021 --> 00:03:28.446
那麼一旦我們執行到這行程式碼，電腦會

00:03:28.446 --> 00:03:30.989
「eyeSize到底是什麼？
我不知道它是啥」

00:03:30.989 --> 00:03:34.002
事實上，這裡我們收到錯誤訊息
說eyeSize尚未被定義

00:03:34.002 --> 00:03:35.570
也許你會想說

00:03:35.570 --> 00:03:37.481
「有啊，我有定義它啊，就在這裡！」

00:03:37.481 --> 00:03:39.584
但電腦沒這麼聰明，它不知道

00:03:40.406 --> 00:03:42.636
所以讓我們把它移回最上方

00:03:44.029 --> 00:03:45.549
而且你必須時時確認

00:03:45.549 --> 00:03:48.259
在你使用變數之前先定義它

00:03:49.137 --> 00:03:51.911
現在你已經了解變數了！耶！