WEBVTT

00:00:01.120 --> 00:00:04.703
現在讓我們談談這段時間
你們一直在使用的東西：

00:00:04.703 --> 00:00:05.760
函數

00:00:05.760 --> 00:00:09.746
每當你使用指令時，像是
rect() 或 fill() 或 text()

00:00:09.746 --> 00:00:11.585
你就在召喚函數

00:00:11.585 --> 00:00:14.839
而那些函數依照你的指令去繪圖

00:00:14.839 --> 00:00:16.320
函數到底是什麼？

00:00:16.320 --> 00:00:19.870
它是一連串我們集合起來
並給予名稱的程式碼

00:00:19.870 --> 00:00:23.768
因為我們想能夠多次地
重複使用哪一點功能

00:00:23.768 --> 00:00:26.322
想一想 rect()
rect() 做的是什麼？

00:00:26.322 --> 00:00:28.612
它畫出四條線，對吧？

00:00:28.612 --> 00:00:31.513
我們也可用 line() 函數
做出相同的，是吧？

00:00:31.513 --> 00:00:34.044
而我們也能得到一個貌似矩形的繪圖

00:00:34.044 --> 00:00:36.113
但是我們發現

00:00:36.113 --> 00:00:39.357
我們也想能夠多次繪畫矩形

00:00:39.357 --> 00:00:43.050
如果每次都要計算怎麼
從一個角落畫直線到另一個角落

00:00:43.050 --> 00:00:45.493
再從一個角落到另一個角落
就會變得很惱人

00:00:45.493 --> 00:00:48.083
與其那樣
我們不如寫一個 rect() 函數

00:00:48.083 --> 00:00:50.673
而該函數做的正正就是這

00:00:50.673 --> 00:00:54.565
跟那四行編碼做的一模一樣
只是所需的碼少很多

00:00:54.975 --> 00:00:56.975
那還蠻酷的

00:00:56.975 --> 00:01:02.271
而 rect() 是其中一個在可汗學院
所有學習課程中都可使用的函數

00:01:02.271 --> 00:01:07.719
但是，你也可以在你的程式裏
寫自己的函數

00:01:07.719 --> 00:01:10.479
例如：我們設計一個程式

00:01:10.479 --> 00:01:13.979
讓我們能多次繪製溫斯頓

00:01:13.979 --> 00:01:16.802
說不定說個有關他的生命故事

00:01:16.802 --> 00:01:20.155
然後展示出他人生裏的
每個年齡階段

00:01:20.155 --> 00:01:24.245
所以我們的溫斯頓繪製碼是可能是這樣：

00:01:24.245 --> 00:01:26.995
我們有 faceX 和 faceY 變數

00:01:26.995 --> 00:01:28.555
來儲存臉的中心位置

00:01:28.555 --> 00:01:30.257
然後我們畫上眼和嘴

00:01:30.257 --> 00:01:32.597
相對著那些變數

00:01:32.597 --> 00:01:34.717
現在程式可以看到編碼

00:01:34.717 --> 00:01:37.687
它不是在任何函數中
所以會直接執行

00:01:37.687 --> 00:01:39.905
而且只執行一次

00:01:39.905 --> 00:01:43.467
好的，把它變成一個函數

00:01:43.467 --> 00:01:47.554
這一步很似我們宣告變數的步驟

00:01:47.554 --> 00:01:49.136
因為其實那正是我們在做的

00:01:49.136 --> 00:01:52.055
所以我們寫 var drawWinston

00:01:52.055 --> 00:01:54.340
幫它取個好名字，高描述性

00:01:54.340 --> 00:01:55.711
然後一個 =


00:01:55.711 --> 00:01:59.131
但在這，我們不寫一個數字或一個字串

00:01:59.131 --> 00:02:02.904
而直接寫 function 
確定你拼對

00:02:02.904 --> 00:02:06.053
之後一個空白括號 ()

00:02:06.053 --> 00:02:08.183
然後一個開花括號 {

00:02:08.183 --> 00:02:09.723
再一個關花括號 }

00:02:09.723 --> 00:02:11.261
和最後的分號 ;

00:02:11.261 --> 00:02:15.395
很好，我們需要做的是
將我們想要的所有東西

00:02:15.395 --> 00:02:18.772
放進函數的開和關花括號之間

00:02:18.772 --> 00:02:21.651
我們就把所有編碼放進去

00:02:21.651 --> 00:02:25.713
放它進我們的函數裏 
排好內縮，然後

00:02:25.713 --> 00:02:26.703
噔噔！

00:02:26.703 --> 00:02:28.783
現在我們有的便是這變數

00:02:28.783 --> 00:02:30.337
它存着一個函數


00:02:30.337 --> 00:02:34.113
也就是說我們給了
這編碼區塊一個標籤

00:02:34.113 --> 00:02:36.616
以便我們於任何時間告訴我們的程式：

00:02:36.616 --> 00:02:40.816
嘿！找出那個有標籤的
編碼區塊然後執行它！

00:02:40.816 --> 00:02:43.524
我們正令這編碼變得可再用

00:02:43.524 --> 00:02:46.394
但注意，我們現在沒有任何溫斯頓！

00:02:46.394 --> 00:02:48.999
我們丟了溫斯頓！
他跑了去哪裡？

00:02:48.999 --> 00:02:52.920
好的，當我們放這於函數裏

00:02:52.920 --> 00:02:55.630
我們便告訴了程式：
嘿，這裡有一堆程式碼

00:02:55.630 --> 00:02:57.840
我想稍後能夠執行

00:02:57.840 --> 00:03:00.579
但只當我叫你去執行時才動手

00:03:00.579 --> 00:03:03.769
我們需告訴它去執行程式碼

00:03:03.769 --> 00:03:06.364
就是指我們需召喚函數

00:03:06.364 --> 00:03:09.464
就如我們執行ellipse() 和 
rect() 和 line() 時一樣

00:03:09.464 --> 00:03:13.718
我們寫下函數名稱 
drawWinston

00:03:13.718 --> 00:03:16.037
隨後接上一個括號 ()

00:03:16.037 --> 00:03:18.397
當然還有分號 ;

00:03:18.397 --> 00:03:19.259
噔噔！

00:03:19.259 --> 00:03:20.911
我們有個溫斯頓了！

00:03:20.911 --> 00:03:23.830
好，我覺得它很酷
但你可能不覺它很酷

00:03:23.830 --> 00:03:28.578
因為我們做的一切
就是程式做它之前就會做的

00:03:28.578 --> 00:03:29.948
有點好笑吧？

00:03:29.948 --> 00:03:32.661
函數的用意就在於重複使用

00:03:32.661 --> 00:03:34.598
現在就來試試

00:03:34.598 --> 00:03:37.588
我們可以復製貼上這函數召喚

00:03:37.588 --> 00:03:40.894
噔噔！噔噔！
一遍又一遍地

00:03:40.894 --> 00:03:44.304
嗯，但看起來好像一樣

00:03:44.304 --> 00:03:45.862
喔，成功了

00:03:46.402 --> 00:03:48.082
它繪出了許多溫斯頓

00:03:48.082 --> 00:03:50.965
但問題是它們全在同一個地方

00:03:50.965 --> 00:03:53.895
如果我們有X光眼的話
就是可以看穿畫布

00:03:53.895 --> 00:03:55.552
看見三個溫斯頓

00:03:56.402 --> 00:04:00.352
但我沒有X光眼 
(我不知道你)

00:04:00.352 --> 00:04:03.164
但是，我們可以對函數
做一些小小的改變

00:04:03.164 --> 00:04:04.585
讓它現身

00:04:04.585 --> 00:04:08.752
你看 faceX 和 faceY 
它們永遠都是202 和 208

00:04:08.752 --> 00:04:11.661
我們可利用
函數 random() 來改變這

00:04:11.661 --> 00:04:14.491
要不 random() 從 50 到 350

00:04:14.491 --> 00:04:16.764
它便會隨機產生一個
於那兩數之間的數字

00:04:16.764 --> 00:04:18.943
我們可以在這做一樣的

00:04:18.943 --> 00:04:21.503
所以每當這函式被召喚時

00:04:21.503 --> 00:04:23.423
它便會產生這新的隨機數

00:04:23.423 --> 00:04:26.689
如果我們按 restart
我們便可得到隨機溫斯頓

00:04:26.689 --> 00:04:28.423
太厲害了！

00:04:29.863 --> 00:04:31.472
好，我覺得這很酷因爲


00:04:31.472 --> 00:04:34.717
如果我們沒有擺它在函式裏
原本該需要一大堆編碼來寫這

00:04:34.717 --> 00:04:37.328
本來會有三倍的程式碼

00:04:38.358 --> 00:04:40.779
不過目前仍然不是它用處的極致

00:04:40.779 --> 00:04:43.425
因爲我們大概不想要隨機溫斯頓

00:04:43.425 --> 00:04:46.904
我們也許想能夠放將溫斯頓
在螢幕上一個固定的地方

00:04:46.904 --> 00:04:47.900
所以請密切留意

00:04:47.900 --> 00:04:51.531
因爲我們將講解
如何傳遞參數給函數

00:04:51.531 --> 00:04:54.380
而你便能學會做那