< Return to Video

繪圖入門（已修改）

  • 0:01 - 0:03
    讓我們開始寫程式吧
  • 0:03 - 0:05
    首先我們先瞭解最基本的東西：圖形
  • 0:05 - 0:06
    不要擔心，很快地
  • 0:06 - 0:08
    你的圖形將會在螢幕上奔馳
  • 0:08 - 0:11
    有著七彩顏色，還有各式各樣其他酷炫程式
  • 0:11 - 0:13
    跟著我們一起來吧！
  • 0:13 - 0:15
    我們就從長方形開始
  • 0:15 - 0:16
    輸入rect代表長方形
  • 0:16 - 0:19
    再來一個 ( ，然後四個數字10, 20, 100, 200
  • 0:19 - 0:21
    等會我將會解釋這些是什麽意思
  • 0:21 - 0:24
    之後 )，最後，我們就寫一個 ;
  • 0:24 - 0:25
    看，太神奇了，一個長方形！
  • 0:25 - 0:28
    那真有趣，讓我們再做一次
  • 0:28 - 0:30
    我們這次可以試用不同的數字
  • 0:30 - 0:32
    或許用大一點的數字 (300, 240
  • 0:32 - 0:34
    接著後面用小一點的數字 10, 20)
  • 0:34 - 0:36
    嘿，看，另外一個長方形！
  • 0:36 - 0:39
    事實上，如果我們試把第一個數字改小一點
  • 0:39 - 0:41
    它便會開始移動
  • 0:41 - 0:44
    而如果把最後一個數字先改大一點再來改小一點
  • 0:44 - 0:46
    它就會跟著變大然後縮小
  • 0:46 - 0:48
    多有趣！
  • 0:48 - 0:51
    所以，你可能在猜這樣的魔法是怎麼做到的？
  • 0:51 - 0:53
    記著你的電腦
  • 0:53 - 0:56
    就像隻聰明又聽話的狗
  • 0:56 - 1:00
    你可以使一隻狗去坐、停、甚至翻滾
  • 1:00 - 1:02
    你要做的只是給一個指令
  • 1:02 - 1:05
    在寫程式的時候，你會如何使你的電腦狗坐下？
  • 1:06 - 1:08
    要做到那的話
  • 1:08 - 1:11
    你要寫下指令名稱，如「坐下」
  • 1:11 - 1:13
    在你要在後面接上 ()
  • 1:13 - 1:15
    來告訴電腦去服從那指令
  • 1:15 - 1:18
    然後你在最後寫上 ; 告訴電腦
  • 1:18 - 1:20
    「是的，這指令結束了」
  • 1:20 - 1:22
    之後你的電腦狗便會坐下來
  • 1:22 - 1:25
    當然，你在可汗學院上用的電腦不是一隻狗
  • 1:25 - 1:27
    所以它不懂如何坐下或是翻滾
  • 1:27 - 1:30
    但是當你告訴它rect ，它就知道如何畫一個長方形
  • 1:30 - 1:32
    還頗神奇的，是吧？
  • 1:32 - 1:34
    接下來這一行我們就來畫一個長方形
  • 1:34 - 1:37
    寫下指令rect，這是名稱
  • 1:37 - 1:40
    接著放入 ( 和 )
  • 1:40 - 1:41
    表示「照著那做」
  • 1:41 - 1:43
    然後我們在最後面放上 ;
  • 1:44 - 1:47
    那便是你電腦達成特殊功能，rect，的過程
  • 1:47 - 1:50
    好，現在回到我們的rect
  • 1:50 - 1:54
    我們有了指令名稱還有那些括弧
  • 1:54 - 1:56
    那這些可怕的數字呢？
  • 1:56 - 1:59
    其實電腦知道的不夠多
  • 1:59 - 2:02
    如果你只跟它說rect
  • 2:02 - 2:05
    想更深入瞭解，試想想我給你一張白紙
  • 2:05 - 2:07
    然後我說我想你畫一個長方形
  • 2:07 - 2:09
    完全地照我所想的畫出來
  • 2:10 - 2:11
    除非你能跟我心靈感應
  • 2:11 - 2:13
    不然你應該會有一堆問題
  • 2:15 - 2:16
    第一，你可能會想：
  • 2:16 - 2:19
    你想我在哪裡畫這個長方形？
  • 2:19 - 2:21
    那我便會說：
  • 2:21 - 2:23
    不如這樣吧，
  • 2:23 - 2:26
    這張白紙的左邊
  • 2:26 - 2:27
    我們稱之為零
  • 2:27 - 2:30
    而白紙的右邊就是400
  • 2:30 - 2:33
    之後我給你一個數字，例如100
  • 2:33 - 2:36
    這樣你就知道長方形應該畫在那裏，大概
  • 2:36 - 2:37
    大致的位置
  • 2:37 - 2:40
    但那只會滿足你部分的疑惑，你會繼續想：
  • 2:40 - 2:43
    好，現在我知道長方形橫幅的位置，但是它多高和多低呢？
  • 2:44 - 2:47
    那我就給你另外一個數字，假設200好了
  • 2:47 - 2:50
    我會說：這是紙的最上，這是0
  • 2:50 - 2:53
    然後又假設，底部是400
  • 2:53 - 2:54
    你就會想：
  • 2:54 - 2:57
    200，那就在正中間
  • 2:57 - 3:00
    完美，因為現在你知道了，便會說：
  • 3:00 - 3:03
    太棒了，我把你的長方形畫在這裏
  • 3:03 - 3:06
    因為這裡是向右100，向下200的地方
  • 3:06 - 3:09
    但那還是不夠，你還會繼續問哪些問題？
  • 3:09 - 3:12
    沒錯，你在想 ：這個長方形要多大？
  • 3:12 - 3:17
    那我便會說：這樣吧，寬150？
  • 3:17 - 3:21
    你會想：這裡是100，而這裏是400
  • 3:21 - 3:25
    如果我們想要它寬150，那就大概在這裏？
  • 3:26 - 3:29
    你繼續想著：太好了，寬150，大約在這
  • 3:29 - 3:31
    你接著會說：這個長方形要多高？
  • 3:31 - 3:33
    我會說：不用太高，高50好嗎？
  • 3:34 - 3:37
    你會說：好，50的話，大概差不多這麼高？
  • 3:38 - 3:39
    然後你會說：超棒！
  • 3:39 - 3:41
    我完全知道你想要的長方形在哪個位置
  • 3:41 - 3:42
    也清楚知道它該是什麼樣子
  • 3:43 - 3:44
    我現在就把它畫下來
  • 3:45 - 3:48
    畫一個長方形還真多工作，不是嗎？
  • 3:48 - 3:50
    目的是讓你瞭解那四個數字的作用--
  • 3:50 - 3:54
    記得之前說過的向右100，向下200，
  • 3:54 - 3:58
    寬150，然後高50--
  • 3:58 - 4:00
    現在我們能一致認同
  • 4:00 - 4:02
    這個長方形該是什麼樣子了
  • 4:02 - 4:04
    電腦工作的方式也是這樣
  • 4:04 - 4:07
    你只要寫下指令名稱，像我們之前講過的
  • 4:07 - 4:10
    寫下 ( 還有那四個數字
  • 4:10 - 4:14
    100, 200, 150 和 50
  • 4:14 - 4:16
    ) 以及最後的 ;
  • 4:16 - 4:19
    然後它便會在正確的位置畫出我們想要的長方形
  • 4:21 - 4:22
    如果我們對自己誠實一點
  • 4:22 - 4:24
    那長方形其實不正在我們想要的位置
  • 4:24 - 4:26
    它不在我們畫出來的位置上，對吧？
  • 4:26 - 4:27
    所以說我們的數字有些不準確
  • 4:27 - 4:31
    就說我們想電腦畫出一個跟我們畫的一摸一樣的
  • 4:31 - 4:34
    我們把它移右一下
  • 4:34 - 4:37
    上下移動一下
  • 4:38 - 4:42
    瘦一些，再矮一些
  • 4:43 - 4:46
    現在這個長方形便跟我們畫的一摸一樣了
  • 4:46 - 4:49
    因為我們明白這些數字的意義
  • 4:49 - 4:52
    我們可以把它改到我們想要的
  • 4:53 - 4:55
    現在讓我們試畫出另外一個長方形
  • 4:55 - 4:56
    寫程式最精彩的地方在於
  • 4:56 - 4:59
    我們現在可以把長方形畫在任何位置了
  • 5:00 - 5:02
    讓我們把長方形畫在最上的上方角
  • 5:02 - 5:03
    一直往上到那裏？
  • 5:04 - 5:06
    先想想那位置會在哪？
  • 5:06 - 5:10
    我猜應該是向右0，上下也是0
  • 5:10 - 5:13
    或許比較小，比如説寬50
  • 5:13 - 5:16
    可能高10，像個小小的長方形
  • 5:17 - 5:18
    那我們直接開始
  • 5:18 - 5:19
    先輸入rect
  • 5:19 - 5:22
    將這些參數用 , , , 分開
  • 5:23 - 5:26
    目前我們會說：嗯，酷
  • 5:26 - 5:29
    喔，但其實不太酷，因為有錯誤通知
  • 5:29 - 5:31
    提醒我們 ：喔不，你好像少了一個 )
  • 5:31 - 5:33
    嗯，沒錯，我們的確忘了
  • 5:33 - 5:35
    所以，我們把它放回去，現在看起來不錯，對吧？
  • 5:35 - 5:37
    不，因為現在我們又有另外一個錯誤通知
  • 5:37 - 5:38
    提醒我們忘記了最後的分號
  • 5:38 - 5:41
    這也是對的，我們可以點選 「Show Me Where」
  • 5:41 - 5:43
    它會指出我們剛寫的那行指令
  • 5:43 - 5:44
    然後我們就會想起來：
  • 5:44 - 5:46
    喔對，分號就像在句子最後面的句號一樣
  • 5:46 - 5:49
    用來終止指令，我們忘了！
  • 5:49 - 5:52
    但我們可以加它回去，問題不大，整體看起來非常好
  • 5:52 - 5:55
    看，一個小小的長方形，跟我們想要的一樣
  • 5:56 - 5:58
    和之前相同，我們可以把他變大
  • 5:59 - 6:00
    可以將它四處移動
  • 6:01 - 6:03
    可以把它放在任何我們想要的地方
  • 6:03 - 6:06
    你現在知道rect運作的細節了
  • 6:07 - 6:09
    我們講過這些數字的意義
  • 6:09 - 6:12
    指令名稱和括弧是永遠必要的
  • 6:12 - 6:15
    用逗號分開數字，分號放在最後
  • 6:15 - 6:16
    看起來好像很多
  • 6:16 - 6:19
    但你可以直接嘗試，找找寫程式的感覺
  • 6:19 - 6:21
    下一次，我們將學習更多有關圖形繪畫的技巧
  • 6:21 - 6:23
    然後我們繼續會學更多有趣的東西
  • 6:23 - 6:26
    像是添加色彩或是讓它們在螢幕上飛舞
Title:
繪圖入門（已修改）
Description:

這只是一個互動程式設計指導的畫面快照，為協助字幕和翻譯編輯而準備的。看我們其他的指導影片會比較好：https://www.khanacademy.org/cs/programming/
more » « less
Video Language:
English
Duration:
06:27

Chinese, Traditional subtitles

Revisions

Our website uses cookies for analysis purposes.