iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0
Modern Web

想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧系列 第 10

[想試試看JavaScript ] 函式

函式 (Function)

函式也稱做函數。
函式可以將一行或多行程式碼指令包裝起來,當我需要使用這些指令時,只要呼叫函式,就可以執行這些指令。
也就是說,當我發現我常用到一段程式碼的話,我只要把它寫進函式,需要的時後馬上就可以使用,而不用每次使用,再重複寫很長的程式碼。

內建函式

內建函式就是,一開始電腦或瀏覽器就建立好的函式,我們不需要在自己設計,可以直接使用。
例如

// alert(想顯示的文字)
alert("Hello"); // 跳出警告視窗,顯示 Hello

我每次只要想使用跳出警告視窗這個功能,只要

自訂函式

除了使用別人設計好的函式,我們還可以建立自己的函式。

設計函式 (Defining functions)

語法如下:

function 自訂的函式名稱(){
     // 想要執行的程式碼
}

這裡面分別寫了三樣東西

  1. 函式的宣告與函式名稱
  2. 參數,寫在 ()
  3. 定義函式的功能,寫在 {}

自訂的函式名稱,可以自己決定
範例:

function type(){
    console.log("Hello");
}

我決定函式叫做 type
要執行的程式碼是 console.log("Hello");

這樣就設計完函式了

呼叫函式 (Calling functions)

那麼我想要使用函式,我可以呼叫函式,就可以將我設計好的函式,拿出來使用。
呼叫的語法如下:

函式名稱()

範例:

type(); // 執行 type 函式定義的程式碼,也就是console.log("Hello")

呼叫函式就會執行console.log("Hello"),所以瀏覽器就會印出 Hello
我想要多執行幾次,我就重複呼叫就可以了

type(); // 印出 Hello
type(); // Hello

函式包括三樣東西

  1. 函式的宣告與名稱
  2. 參數
  3. 定義要執行的內容
    我們已經會了1.跟3.
    想要讓函式變得有趣、有彈性更能運用的話。
    就要使用2.也就是參數

參數

參數可以將想進行運算的資料帶進函式裡面,聽起來有點複雜
我們先了解如何定義參數
要如何定義參數呢?
語法如下:

function 函式名稱(參數){
    // 要執行的程式碼
}

參數的名稱可以自訂
範例:

function type(word){
    console.log(word);
}

這樣就定義好參數,我自訂參數的名稱叫做 word
我只有寫 console.log(word),代表要印出參數 word ,並沒有寫死要印出什麼
會印出什麼資料,是在呼叫函式的時決定

function type(word){ // "Hello Word" 被傳到 word
    console.log(word);
}
type("Hello World"); // 呼叫 type 函式,印出 Hello World

type()小括弧裡面的資料,會被傳遞函式 type 裡面,接著console.log(word),就會印出"Hello Word"

那麼我們也可以重複呼叫,並且傳其他的資料進去

function type(word){   //     2.接收到參數,將參數傳進大括弧裡
    console.log(word); //     3.將參數替換成,我呼叫時傳進來的資料。
}
type("Hello");  // 印出 Hello 1.呼叫函式,將參數傳入
type("World");  // World

那運行的流程會式這樣的
1.呼叫 type() 函式,將 "Hello" 作為參數傳進去函式
2.小括弧裡的參數 word 接收到資料,將資料傳進大括號
3.將大括回內的參數 word 替換成"Hello"


上一篇
[想試試看JavaScript ] for迴圈
下一篇
[想試試看JavaScript ] 函式 回傳值
系列文
想試試寫程式的感覺,就用 JavaScript 來寫寫看網頁吧30

尚未有邦友留言

立即登入留言