WEBVTT

00:00:01.220 --> 00:00:02.597
讓我們開始寫程式吧

00:00:02.597 --> 00:00:05.165
首先我們先瞭解最基本的東西：圖形

00:00:05.165 --> 00:00:06.464
不要擔心，很快地

00:00:06.464 --> 00:00:08.126
你的圖形將會在螢幕上奔馳

00:00:08.126 --> 00:00:11.038
有著七彩顏色，還有各式各樣其他酷炫程式

00:00:11.038 --> 00:00:12.772
跟著我們一起來吧！

00:00:12.772 --> 00:00:14.606
我們就從長方形開始

00:00:14.606 --> 00:00:16.496
輸入rect代表長方形

00:00:16.496 --> 00:00:18.990
再來一個 ( ，然後四個數字10, 20, 100, 200

00:00:18.990 --> 00:00:20.964
等會我將會解釋這些是什麽意思

00:00:20.964 --> 00:00:23.938
之後 )，最後，我們就寫一個 ;

00:00:23.938 --> 00:00:25.495
看，太神奇了，一個長方形！

00:00:25.495 --> 00:00:27.563
那真有趣，讓我們再做一次

00:00:27.763 --> 00:00:29.551
我們這次可以試用不同的數字

00:00:30.021 --> 00:00:31.571
或許用大一點的數字 (300, 240

00:00:32.181 --> 00:00:34.031
接著後面用小一點的數字 10, 20)

00:00:34.031 --> 00:00:36.041
嘿，看，另外一個長方形！

00:00:36.041 --> 00:00:39.256
事實上，如果我們試把第一個數字改小一點

00:00:39.256 --> 00:00:40.571
它便會開始移動

00:00:40.751 --> 00:00:43.782
而如果把最後一個數字先改大一點再來改小一點

00:00:43.782 --> 00:00:46.276
它就會跟著變大然後縮小

00:00:46.276 --> 00:00:47.510
多有趣！

00:00:47.510 --> 00:00:50.545
所以，你可能在猜這樣的魔法是怎麼做到的？

00:00:51.245 --> 00:00:52.756
記著你的電腦

00:00:52.756 --> 00:00:55.507
就像隻聰明又聽話的狗

00:00:55.507 --> 00:00:59.778
你可以使一隻狗去坐、停、甚至翻滾

00:00:59.778 --> 00:01:01.503
你要做的只是給一個指令

00:01:02.023 --> 00:01:05.282
在寫程式的時候，你會如何使你的電腦狗坐下？

00:01:05.742 --> 00:01:08.024
要做到那的話

00:01:08.024 --> 00:01:11.255
你要寫下指令名稱，如「坐下」

00:01:11.255 --> 00:01:13.271
在你要在後面接上 ()

00:01:13.271 --> 00:01:15.267
來告訴電腦去服從那指令

00:01:15.267 --> 00:01:17.764
然後你在最後寫上 ; 告訴電腦

00:01:17.764 --> 00:01:19.521
「是的，這指令結束了」

00:01:19.521 --> 00:01:21.829
之後你的電腦狗便會坐下來

00:01:22.219 --> 00:01:25.264
當然，你在可汗學院上用的電腦不是一隻狗

00:01:25.264 --> 00:01:27.254
所以它不懂如何坐下或是翻滾

00:01:27.254 --> 00:01:30.261
但是當你告訴它rect ，它就知道如何畫一個長方形

00:01:30.261 --> 00:01:32.058
還頗神奇的，是吧？

00:01:32.298 --> 00:01:34.344
接下來這一行我們就來畫一個長方形

00:01:34.344 --> 00:01:37.161
寫下指令rect，這是名稱

00:01:37.161 --> 00:01:39.754
接著放入 ( 和 )

00:01:39.754 --> 00:01:41.017
表示「照著那做」

00:01:41.017 --> 00:01:43.041
然後我們在最後面放上 ;

00:01:43.501 --> 00:01:46.566
那便是你電腦達成特殊功能，rect，的過程

00:01:47.216 --> 00:01:49.737
好，現在回到我們的rect

00:01:49.737 --> 00:01:53.502
我們有了指令名稱還有那些括弧

00:01:53.502 --> 00:01:55.770
那這些可怕的數字呢？

00:01:56.250 --> 00:01:59.249
其實電腦知道的不夠多

00:01:59.249 --> 00:02:02.248
如果你只跟它說rect

00:02:02.248 --> 00:02:05.249
想更深入瞭解，試想想我給你一張白紙

00:02:05.249 --> 00:02:07.254
然後我說我想你畫一個長方形

00:02:07.254 --> 00:02:09.329
完全地照我所想的畫出來

00:02:09.989 --> 00:02:11.233
除非你能跟我心靈感應

00:02:11.233 --> 00:02:13.287
不然你應該會有一堆問題

00:02:14.507 --> 00:02:15.756
第一，你可能會想：

00:02:15.756 --> 00:02:19.075
你想我在哪裡畫這個長方形？

00:02:19.255 --> 00:02:21.278
那我便會說：

00:02:21.278 --> 00:02:22.527
不如這樣吧，

00:02:22.527 --> 00:02:25.796
這張白紙的左邊

00:02:25.796 --> 00:02:27.046
我們稱之為零

00:02:27.046 --> 00:02:29.815
而白紙的右邊就是400

00:02:30.035 --> 00:02:33.011
之後我給你一個數字，例如100

00:02:33.011 --> 00:02:36.235
這樣你就知道長方形應該畫在那裏，大概

00:02:36.235 --> 00:02:37.309
大致的位置

00:02:37.309 --> 00:02:39.967
但那只會滿足你部分的疑惑，你會繼續想：

00:02:39.967 --> 00:02:43.165
好，現在我知道長方形橫幅的位置，但是它多高和多低呢？

00:02:43.515 --> 00:02:47.010
那我就給你另外一個數字，假設200好了

00:02:47.010 --> 00:02:49.750
我會說：這是紙的最上，這是0

00:02:49.750 --> 00:02:52.646
然後又假設，底部是400

00:02:52.646 --> 00:02:53.744
你就會想：

00:02:53.744 --> 00:02:56.802
200，那就在正中間

00:02:57.402 --> 00:02:59.758
完美，因為現在你知道了，便會說：

00:02:59.758 --> 00:03:02.504
太棒了，我把你的長方形畫在這裏

00:03:02.504 --> 00:03:05.580
因為這裡是向右100，向下200的地方

00:03:06.490 --> 00:03:09.056
但那還是不夠，你還會繼續問哪些問題？

00:03:09.496 --> 00:03:12.268
沒錯，你在想 ：這個長方形要多大？

00:03:12.268 --> 00:03:17.008
那我便會說：這樣吧，寬150？

00:03:17.008 --> 00:03:20.969
你會想：這裡是100，而這裏是400

00:03:20.969 --> 00:03:25.310
如果我們想要它寬150，那就大概在這裏？

00:03:25.530 --> 00:03:28.821
你繼續想著：太好了，寬150，大約在這

00:03:29.341 --> 00:03:31.238
你接著會說：這個長方形要多高？

00:03:31.238 --> 00:03:33.468
我會說：不用太高，高50好嗎？

00:03:33.718 --> 00:03:37.296
你會說：好，50的話，大概差不多這麼高？

00:03:37.506 --> 00:03:39.019
然後你會說：超棒！

00:03:39.019 --> 00:03:40.812
我完全知道你想要的長方形在哪個位置

00:03:40.812 --> 00:03:41.902
也清楚知道它該是什麼樣子

00:03:42.992 --> 00:03:44.082
我現在就把它畫下來

00:03:45.232 --> 00:03:47.562
畫一個長方形還真多工作，不是嗎？

00:03:47.982 --> 00:03:50.265
目的是讓你瞭解那四個數字的作用--

00:03:50.265 --> 00:03:53.547
記得之前說過的向右100，向下200，

00:03:54.457 --> 00:03:57.532
寬150，然後高50--

00:03:57.822 --> 00:03:59.755
現在我們能一致認同

00:03:59.755 --> 00:04:01.548
這個長方形該是什麼樣子了

00:04:02.008 --> 00:04:04.252
電腦工作的方式也是這樣

00:04:04.252 --> 00:04:06.755
你只要寫下指令名稱，像我們之前講過的

00:04:06.755 --> 00:04:09.744
寫下 ( 還有那四個數字

00:04:09.744 --> 00:04:14.020
100, 200, 150 和 50

00:04:14.020 --> 00:04:16.006
) 以及最後的 ;

00:04:16.226 --> 00:04:19.303
然後它便會在正確的位置畫出我們想要的長方形

00:04:20.623 --> 00:04:22.263
如果我們對自己誠實一點

00:04:22.263 --> 00:04:24.223
那長方形其實不正在我們想要的位置

00:04:24.223 --> 00:04:25.583
它不在我們畫出來的位置上，對吧？

00:04:25.763 --> 00:04:27.488
所以說我們的數字有些不準確

00:04:27.488 --> 00:04:31.273
就說我們想電腦畫出一個跟我們畫的一摸一樣的

00:04:31.273 --> 00:04:33.780
我們把它移右一下

00:04:34.220 --> 00:04:37.254
上下移動一下

00:04:37.714 --> 00:04:42.008
瘦一些，再矮一些

00:04:42.758 --> 00:04:46.024
現在這個長方形便跟我們畫的一摸一樣了

00:04:46.024 --> 00:04:48.771
因為我們明白這些數字的意義

00:04:48.771 --> 00:04:51.828
我們可以把它改到我們想要的

00:04:52.748 --> 00:04:54.767
現在讓我們試畫出另外一個長方形

00:04:54.767 --> 00:04:56.472
寫程式最精彩的地方在於

00:04:56.472 --> 00:04:58.757
我們現在可以把長方形畫在任何位置了

00:04:59.817 --> 00:05:02.157
讓我們把長方形畫在最上的上方角

00:05:02.157 --> 00:05:03.387
一直往上到那裏？

00:05:03.987 --> 00:05:05.558
先想想那位置會在哪？

00:05:06.018 --> 00:05:09.502
我猜應該是向右0，上下也是0

00:05:09.502 --> 00:05:13.255
或許比較小，比如説寬50

00:05:13.255 --> 00:05:16.268
可能高10，像個小小的長方形

00:05:16.998 --> 00:05:18.266
那我們直接開始

00:05:18.266 --> 00:05:19.276
先輸入rect

00:05:19.276 --> 00:05:21.546
將這些參數用 , , , 分開

00:05:22.756 --> 00:05:25.518
目前我們會說：嗯，酷

00:05:25.748 --> 00:05:28.551
喔，但其實不太酷，因為有錯誤通知

00:05:28.551 --> 00:05:31.392
提醒我們 ：喔不，你好像少了一個 )

00:05:31.392 --> 00:05:32.748
嗯，沒錯，我們的確忘了

00:05:32.748 --> 00:05:34.828
所以，我們把它放回去，現在看起來不錯，對吧？

00:05:34.828 --> 00:05:36.998
不，因為現在我們又有另外一個錯誤通知

00:05:36.998 --> 00:05:38.447
提醒我們忘記了最後的分號

00:05:38.447 --> 00:05:40.866
這也是對的，我們可以點選 「Show Me Where」

00:05:40.866 --> 00:05:42.616
它會指出我們剛寫的那行指令

00:05:42.616 --> 00:05:43.535
然後我們就會想起來：

00:05:43.535 --> 00:05:46.474
喔對，分號就像在句子最後面的句號一樣

00:05:46.474 --> 00:05:48.523
用來終止指令，我們忘了！

00:05:48.523 --> 00:05:52.024
但我們可以加它回去，問題不大，整體看起來非常好

00:05:52.254 --> 00:05:55.295
看，一個小小的長方形，跟我們想要的一樣

00:05:55.745 --> 00:05:58.498
和之前相同，我們可以把他變大

00:05:58.718 --> 00:06:00.230
可以將它四處移動

00:06:00.510 --> 00:06:03.262
可以把它放在任何我們想要的地方

00:06:03.262 --> 00:06:06.265
你現在知道rect運作的細節了

00:06:06.505 --> 00:06:08.706
我們講過這些數字的意義

00:06:08.706 --> 00:06:12.040
指令名稱和括弧是永遠必要的

00:06:12.040 --> 00:06:14.964
用逗號分開數字，分號放在最後

00:06:15.484 --> 00:06:16.482
看起來好像很多

00:06:16.482 --> 00:06:19.170
但你可以直接嘗試，找找寫程式的感覺

00:06:19.260 --> 00:06:21.499
下一次，我們將學習更多有關圖形繪畫的技巧

00:06:21.499 --> 00:06:23.261
然後我們繼續會學更多有趣的東西

00:06:23.261 --> 00:06:26.342
像是添加色彩或是讓它們在螢幕上飛舞