1
00:00:01,220 --> 00:00:02,597
讓我們開始寫程式吧

2
00:00:02,597 --> 00:00:05,165
首先我們先瞭解最基本的東西：圖形

3
00:00:05,165 --> 00:00:06,464
不要擔心，很快地

4
00:00:06,464 --> 00:00:08,126
你的圖形將會在螢幕上奔馳

5
00:00:08,126 --> 00:00:11,038
有著七彩顏色，還有各式各樣其他酷炫程式

6
00:00:11,038 --> 00:00:12,772
跟著我們一起來吧！

7
00:00:12,772 --> 00:00:14,606
我們就從長方形開始

8
00:00:14,606 --> 00:00:16,496
輸入rect代表長方形

9
00:00:16,496 --> 00:00:18,990
再來一個 ( ，然後四個數字10, 20, 100, 200

10
00:00:18,990 --> 00:00:20,964
等會我將會解釋這些是什麽意思

11
00:00:20,964 --> 00:00:23,938
之後 )，最後，我們就寫一個 ;

12
00:00:23,938 --> 00:00:25,495
看，太神奇了，一個長方形！

13
00:00:25,495 --> 00:00:27,563
那真有趣，讓我們再做一次

14
00:00:27,763 --> 00:00:29,551
我們這次可以試用不同的數字

15
00:00:30,021 --> 00:00:31,571
或許用大一點的數字 (300, 240

16
00:00:32,181 --> 00:00:34,031
接著後面用小一點的數字 10, 20)

17
00:00:34,031 --> 00:00:36,041
嘿，看，另外一個長方形！

18
00:00:36,041 --> 00:00:39,256
事實上，如果我們試把第一個數字改小一點

19
00:00:39,256 --> 00:00:40,571
它便會開始移動

20
00:00:40,751 --> 00:00:43,782
而如果把最後一個數字先改大一點再來改小一點

21
00:00:43,782 --> 00:00:46,276
它就會跟著變大然後縮小

22
00:00:46,276 --> 00:00:47,510
多有趣！

23
00:00:47,510 --> 00:00:50,545
所以，你可能在猜這樣的魔法是怎麼做到的？

24
00:00:51,245 --> 00:00:52,756
記著你的電腦

25
00:00:52,756 --> 00:00:55,507
就像隻聰明又聽話的狗

26
00:00:55,507 --> 00:00:59,778
你可以使一隻狗去坐、停、甚至翻滾

27
00:00:59,778 --> 00:01:01,503
你要做的只是給一個指令

28
00:01:02,023 --> 00:01:05,282
在寫程式的時候，你會如何使你的電腦狗坐下？

29
00:01:05,742 --> 00:01:08,024
要做到那的話

30
00:01:08,024 --> 00:01:11,255
你要寫下指令名稱，如「坐下」

31
00:01:11,255 --> 00:01:13,271
在你要在後面接上 ()

32
00:01:13,271 --> 00:01:15,267
來告訴電腦去服從那指令

33
00:01:15,267 --> 00:01:17,764
然後你在最後寫上 ; 告訴電腦

34
00:01:17,764 --> 00:01:19,521
「是的，這指令結束了」

35
00:01:19,521 --> 00:01:21,829
之後你的電腦狗便會坐下來

36
00:01:22,219 --> 00:01:25,264
當然，你在可汗學院上用的電腦不是一隻狗

37
00:01:25,264 --> 00:01:27,254
所以它不懂如何坐下或是翻滾

38
00:01:27,254 --> 00:01:30,261
但是當你告訴它rect ，它就知道如何畫一個長方形

39
00:01:30,261 --> 00:01:32,058
還頗神奇的，是吧？

40
00:01:32,298 --> 00:01:34,344
接下來這一行我們就來畫一個長方形

41
00:01:34,344 --> 00:01:37,161
寫下指令rect，這是名稱

42
00:01:37,161 --> 00:01:39,754
接著放入 ( 和 )

43
00:01:39,754 --> 00:01:41,017
表示「照著那做」

44
00:01:41,017 --> 00:01:43,041
然後我們在最後面放上 ;

45
00:01:43,501 --> 00:01:46,566
那便是你電腦達成特殊功能，rect，的過程

46
00:01:47,216 --> 00:01:49,737
好，現在回到我們的rect

47
00:01:49,737 --> 00:01:53,502
我們有了指令名稱還有那些括弧

48
00:01:53,502 --> 00:01:55,770
那這些可怕的數字呢？

49
00:01:56,250 --> 00:01:59,249
其實電腦知道的不夠多

50
00:01:59,249 --> 00:02:02,248
如果你只跟它說rect

51
00:02:02,248 --> 00:02:05,249
想更深入瞭解，試想想我給你一張白紙

52
00:02:05,249 --> 00:02:07,254
然後我說我想你畫一個長方形

53
00:02:07,254 --> 00:02:09,329
完全地照我所想的畫出來

54
00:02:09,989 --> 00:02:11,233
除非你能跟我心靈感應

55
00:02:11,233 --> 00:02:13,287
不然你應該會有一堆問題

56
00:02:14,507 --> 00:02:15,756
第一，你可能會想：

57
00:02:15,756 --> 00:02:19,075
你想我在哪裡畫這個長方形？

58
00:02:19,255 --> 00:02:21,278
那我便會說：

59
00:02:21,278 --> 00:02:22,527
不如這樣吧，

60
00:02:22,527 --> 00:02:25,796
這張白紙的左邊

61
00:02:25,796 --> 00:02:27,046
我們稱之為零

62
00:02:27,046 --> 00:02:29,815
而白紙的右邊就是400

63
00:02:30,035 --> 00:02:33,011
之後我給你一個數字，例如100

64
00:02:33,011 --> 00:02:36,235
這樣你就知道長方形應該畫在那裏，大概

65
00:02:36,235 --> 00:02:37,309
大致的位置

66
00:02:37,309 --> 00:02:39,967
但那只會滿足你部分的疑惑，你會繼續想：

67
00:02:39,967 --> 00:02:43,165
好，現在我知道長方形橫幅的位置，但是它多高和多低呢？

68
00:02:43,515 --> 00:02:47,010
那我就給你另外一個數字，假設200好了

69
00:02:47,010 --> 00:02:49,750
我會說：這是紙的最上，這是0

70
00:02:49,750 --> 00:02:52,646
然後又假設，底部是400

71
00:02:52,646 --> 00:02:53,744
你就會想：

72
00:02:53,744 --> 00:02:56,802
200，那就在正中間

73
00:02:57,402 --> 00:02:59,758
完美，因為現在你知道了，便會說：

74
00:02:59,758 --> 00:03:02,504
太棒了，我把你的長方形畫在這裏

75
00:03:02,504 --> 00:03:05,580
因為這裡是向右100，向下200的地方

76
00:03:06,490 --> 00:03:09,056
但那還是不夠，你還會繼續問哪些問題？

77
00:03:09,496 --> 00:03:12,268
沒錯，你在想 ：這個長方形要多大？

78
00:03:12,268 --> 00:03:17,008
那我便會說：這樣吧，寬150？

79
00:03:17,008 --> 00:03:20,969
你會想：這裡是100，而這裏是400

80
00:03:20,969 --> 00:03:25,310
如果我們想要它寬150，那就大概在這裏？

81
00:03:25,530 --> 00:03:28,821
你繼續想著：太好了，寬150，大約在這

82
00:03:29,341 --> 00:03:31,238
你接著會說：這個長方形要多高？

83
00:03:31,238 --> 00:03:33,468
我會說：不用太高，高50好嗎？

84
00:03:33,718 --> 00:03:37,296
你會說：好，50的話，大概差不多這麼高？

85
00:03:37,506 --> 00:03:39,019
然後你會說：超棒！

86
00:03:39,019 --> 00:03:40,812
我完全知道你想要的長方形在哪個位置

87
00:03:40,812 --> 00:03:41,902
也清楚知道它該是什麼樣子

88
00:03:42,992 --> 00:03:44,082
我現在就把它畫下來

89
00:03:45,232 --> 00:03:47,562
畫一個長方形還真多工作，不是嗎？

90
00:03:47,982 --> 00:03:50,265
目的是讓你瞭解那四個數字的作用--

91
00:03:50,265 --> 00:03:53,547
記得之前說過的向右100，向下200，

92
00:03:54,457 --> 00:03:57,532
寬150，然後高50--

93
00:03:57,822 --> 00:03:59,755
現在我們能一致認同

94
00:03:59,755 --> 00:04:01,548
這個長方形該是什麼樣子了

95
00:04:02,008 --> 00:04:04,252
電腦工作的方式也是這樣

96
00:04:04,252 --> 00:04:06,755
你只要寫下指令名稱，像我們之前講過的

97
00:04:06,755 --> 00:04:09,744
寫下 ( 還有那四個數字

98
00:04:09,744 --> 00:04:14,020
100, 200, 150 和 50

99
00:04:14,020 --> 00:04:16,006
) 以及最後的 ;

100
00:04:16,226 --> 00:04:19,303
然後它便會在正確的位置畫出我們想要的長方形

101
00:04:20,623 --> 00:04:22,263
如果我們對自己誠實一點

102
00:04:22,263 --> 00:04:24,223
那長方形其實不正在我們想要的位置

103
00:04:24,223 --> 00:04:25,583
它不在我們畫出來的位置上，對吧？

104
00:04:25,763 --> 00:04:27,488
所以說我們的數字有些不準確

105
00:04:27,488 --> 00:04:31,273
就說我們想電腦畫出一個跟我們畫的一摸一樣的

106
00:04:31,273 --> 00:04:33,780
我們把它移右一下

107
00:04:34,220 --> 00:04:37,254
上下移動一下

108
00:04:37,714 --> 00:04:42,008
瘦一些，再矮一些

109
00:04:42,758 --> 00:04:46,024
現在這個長方形便跟我們畫的一摸一樣了

110
00:04:46,024 --> 00:04:48,771
因為我們明白這些數字的意義

111
00:04:48,771 --> 00:04:51,828
我們可以把它改到我們想要的

112
00:04:52,748 --> 00:04:54,767
現在讓我們試畫出另外一個長方形

113
00:04:54,767 --> 00:04:56,472
寫程式最精彩的地方在於

114
00:04:56,472 --> 00:04:58,757
我們現在可以把長方形畫在任何位置了

115
00:04:59,817 --> 00:05:02,157
讓我們把長方形畫在最上的上方角

116
00:05:02,157 --> 00:05:03,387
一直往上到那裏？

117
00:05:03,987 --> 00:05:05,558
先想想那位置會在哪？

118
00:05:06,018 --> 00:05:09,502
我猜應該是向右0，上下也是0

119
00:05:09,502 --> 00:05:13,255
或許比較小，比如説寬50

120
00:05:13,255 --> 00:05:16,268
可能高10，像個小小的長方形

121
00:05:16,998 --> 00:05:18,266
那我們直接開始

122
00:05:18,266 --> 00:05:19,276
先輸入rect

123
00:05:19,276 --> 00:05:21,546
將這些參數用 , , , 分開

124
00:05:22,756 --> 00:05:25,518
目前我們會說：嗯，酷

125
00:05:25,748 --> 00:05:28,551
喔，但其實不太酷，因為有錯誤通知

126
00:05:28,551 --> 00:05:31,392
提醒我們 ：喔不，你好像少了一個 )

127
00:05:31,392 --> 00:05:32,748
嗯，沒錯，我們的確忘了

128
00:05:32,748 --> 00:05:34,828
所以，我們把它放回去，現在看起來不錯，對吧？

129
00:05:34,828 --> 00:05:36,998
不，因為現在我們又有另外一個錯誤通知

130
00:05:36,998 --> 00:05:38,447
提醒我們忘記了最後的分號

131
00:05:38,447 --> 00:05:40,866
這也是對的，我們可以點選 「Show Me Where」

132
00:05:40,866 --> 00:05:42,616
它會指出我們剛寫的那行指令

133
00:05:42,616 --> 00:05:43,535
然後我們就會想起來：

134
00:05:43,535 --> 00:05:46,474
喔對，分號就像在句子最後面的句號一樣

135
00:05:46,474 --> 00:05:48,523
用來終止指令，我們忘了！

136
00:05:48,523 --> 00:05:52,024
但我們可以加它回去，問題不大，整體看起來非常好

137
00:05:52,254 --> 00:05:55,295
看，一個小小的長方形，跟我們想要的一樣

138
00:05:55,745 --> 00:05:58,498
和之前相同，我們可以把他變大

139
00:05:58,718 --> 00:06:00,230
可以將它四處移動

140
00:06:00,510 --> 00:06:03,262
可以把它放在任何我們想要的地方

141
00:06:03,262 --> 00:06:06,265
你現在知道rect運作的細節了

142
00:06:06,505 --> 00:06:08,706
我們講過這些數字的意義

143
00:06:08,706 --> 00:06:12,040
指令名稱和括弧是永遠必要的

144
00:06:12,040 --> 00:06:14,964
用逗號分開數字，分號放在最後

145
00:06:15,484 --> 00:06:16,482
看起來好像很多

146
00:06:16,482 --> 00:06:19,170
但你可以直接嘗試，找找寫程式的感覺

147
00:06:19,260 --> 00:06:21,499
下一次，我們將學習更多有關圖形繪畫的技巧

148
00:06:21,499 --> 00:06:23,261
然後我們繼續會學更多有趣的東西

149
00:06:23,261 --> 00:06:26,342
像是添加色彩或是讓它們在螢幕上飛舞