函式基礎

函式簡介

• 一個包裝好的程式區塊，可重複呼叫使用。

​

• Javascript 中最重要的部分。

函式運作流程

函式內部的程式區塊

functionName()

函式外部的程式�

functionName();

1. 呼叫：函式開始運作

3. 回傳：函式結束運作

2. 函式執行中

return; 此命令結束函式執行

函式運作流程：參數

函式內部的程式區塊

functionName(number)

函式外部的程式�

functionName(100);

1. 呼叫：將參數 100 存放在 number 中

3. 回傳：函式結束運作

2. 函式執行中，可使用 number

return; 此命令結束函式執行

函式運作流程：回傳值

函式內部的程式區塊

functionName(number)

函式外部的程式�

functionName(100);

1. 呼叫：將參數 100 存放在 number 中

3. 回傳：函式結束運作，同時將資料 5 回傳

2. 函式執行中，可使用 number

return 5; 此命令可攜帶回傳值

內建函式

• 系統事先幫我們寫好的函式，在程式中可以直接取用。��alert("Hello"); // 警告視窗�prompt("Enter a number",""); // 輸入視窗�parseInt("100"); // 可將資料轉換為整數型態

自訂函式：設計

• 設計自己的函式，可應對各種程式需求。��function square(n1){� var result=n1*n1;� alert(result);� return;�}�建立一個自訂函式的語法如下：�function 函式名稱(參數名稱列表){� 函式內的程式區塊� return; 命令結束函式運作�}

自訂函式：使用

• 與使用內建函式一樣。�function square(n1){� var result=n1*n1;� alert(result);� return;�}��square(10);�先寫函式的名稱，以取得函式。再加上 () 進行呼叫。若需要參數，則在括號中放入資料。�

自訂函式：更多例子

• 沒有參數的自訂函式。��function sayHi(){� alert("Hello");� return;�}��sayHi();

自訂函式：更多例子

• 多個參數的自訂函式。��function add(n1,n2){� alert(n1+n2);� return;�}��add(10,100);�設計/使用多個參數時，參數中間以逗號隔開

自訂函式：更多例子

• 帶有回傳值的自訂函式。��function add(n1,n2){� return n1*n2;�}��var result=add(10,2)*10;�函式執行結束後，回傳數字相乘的結果，可在函式外部繼續進行處理。

函式的設計與使用

• 函式的設計：我們做了一台電風扇，電風扇是做好了沒錯，但是沒有運轉。

​

• 函式的使用：把做好的電風扇拿出來，插上電，按下開關，電風扇才會開始轉動。

函式運作流程：函式內部、外部

alert("說明開始");�…….�…….�alert("底下出現一個函式的設計");��function add(n1,n2){

var result=n1+n2;� return result;�}��…….�var x=prompt("輸入數字","");�var y=prompt("輸入數字","");��var output=add(x,y);��alert(output);

1.

2.

3. 函式呼叫

4. 函式執行

5. 函式回傳

6.

練習目標

• 將計算機程式，包裝成一個函式，只需要呼叫 calculate() 就可執行一次計算機功能。

​

• 將計算質數的程式，包裝成一個函式，只需要呼叫 checkPrime(10557) 就可以知道 10557 是不是質數。

函式的設計：另一種寫法

• 函式的設計有另一種寫法。��function add(n1,n2){� return n1+n2;�}�以下是另一種寫法，藍色部分為函式本體，紅色部份只是名稱。�var add=function(n1,n2){� return n1+n2;�};��

函式是一種資料

• 與數字、字串、布林值相同，是一種資料。��var number=3; // 數字資料 3�var string="Hello"; // 字串資料 Hello�var boolean=true; // 布林資料 true�var fun=function(n1,n2){ // 函式資料，自訂的程式區塊� return n1+n2;�};

函式是一種資料

• 請參考以下程式��var add=function(n1,n2){� return n1+n2;�}�add(5,10); // 變數 add 中裝的資料是一個函式�var test=add; // 將 add 的資料轉交給 test�test(5,10); // 變數 test 中裝的資料是與 add 相同的函式

資料型態：再談一次

• 不同的資料型態，能做的事情就不同。��var x=3;�x(); // 錯誤，數字不能呼叫�x="Hello";�x*3; // 無意義的運算，字串不能做乘法�x=function(){alert("Hello");};�x+3; // 無意義的運算，函式不能做加法�x(); // 正確，函式可進行呼叫�

變數的使用範圍 - Scope

• 使用 var 宣告變數：只有函式區塊能定義 scope 範圍。

​

• 使用 let 宣告變數：任何程式區塊都能定義 scope 範圍。

​

• 宣告在內部範圍的變數不能被外部程式使用。

練習目標

• 透過課堂練習程式，確認理解以上概念。