Javascript初學者課程(13)-函式中的參數

Javascript初學者課程(13)-函式中的參數
Javascript初學者課程(13)-函式中的參數

本日的JavaScript教學就是要教你使用函式中的參數的應用哦!

函式中的參數

JavaScript 中的函式(function),是可以導入參數(parameters),可以讓函式有更多的應用。

在定義JavaScript函式參數中,參數(parameters)的名稱寫在函式名稱後方的小括號內。語法如下所示:

function函式名稱(參數1, 參數2, 參數3) {
  //這裡寫上要執行的代碼
}

所有的參數都必須要被命名,並且是以半形逗號來隔開所有不同名稱的參數哦。

使用參數

定義完參數之後,你就可以在函式內使用它了。

舉例來說,下列是一個名為「sayHello」的函式,該函式使用一個名為「name」的參數。當宣告「sayHello」函式時,就在小括號中寫入該參數的值,也就是引數(arguments)。

See the Pen JavaScript13-functionParameters by Tedutw (@Tedutw) on CodePen.

您可以定義一個函式,然後給予不同的參數值(引數)。承上例,套用不同引數的例子如下:

See the Pen JavaScript13-functionParameters by Tedutw (@Tedutw) on CodePen.

 

 

 

 

推薦文章:
Javascript初學者課程(14)-在函式中使用多重參數

Javascript初學者課程(1)-如何在網頁中嵌入?

Javascript初學者課程(2)-變數教學

Javascript初學者課程(3)-資料類型應用

前端工程師必學的CSS小貼士:常見邊框屬性解釋

關於人工智慧滿天飛的未來,這五部電影有說法?(上)

美國NASDAQ上市公司、外商IT教育培訓企業

鄰居們都驚呆了!我只上六個月Java課程就變成Java工程師了

從無到有 挑戰14小時取得Google證照

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

2天考取Google Ads證照!新手廣告投放攻略

Javascript初學者課程(12)-使用者定義函式

Javascript初學者課程(12)-使用者定義函式
Javascript初學者課程(12)-使用者定義函式

本日的JavaScript教學就是要教你使用者定義函式的應用哦!

JavaScript 函式

前端工程師而言,「JavaScript 函式」是由多個 JavaScript 代碼組合成的區塊,被用來執行特定的功能。
使用函式的主要有兩項優點:

  1. 可重複使用同組代碼:代碼一但被定義後,就可以多次重複使用。
  2. 相同的代碼,配合不同的引數(arguments)就會產生不同的結果。

定義函式

如果要定義函式,JavaScript 的寫法是使用「function」字眼,後面接上「name(函式名稱)」及一對小括號「()」和大括號「{}」。要執行的代碼,則寫在大括號「{}」中。如下方所示:

function name() {   
  //這裡寫上要執行的代碼
}

例如,今天我們要定義一個函式,取名為「hello」,定義其功能為輸出「Hi,there」。其寫法如下例所示:

function name(hello) {   
  document.write("Hi there");
}

宣告函式

函式經由上述被定義的過程後,就可以「隨傳隨到」。一但當需要執行這個函式前,其實不用再一次重新定義它,只要宣告它就好了。宣告函式的寫法為:函式名稱加上小括弧即可。如果有需要引數的場合,則把引數寫在小括弧中。承續上一段的例子,今天我們要叫出這個名字為「hello」的函式,寫法如下方所示:

See the Pen JavaScript12-function by Tedutw (@Tedutw) on CodePen.

記得在宣告函式的語句最後方加上分號。

一但函式被定義後,在 JavaScript 中,就可以多次宣告它,不用再重新定義。

 

 

 

 

推薦文章:

Javascript初學者課程(13)-函式中的參數

Javascript初學者課程(1)-如何在網頁中嵌入?

Javascript初學者課程(2)-變數教學

成為前端工程師的第一節課:CSS和HTML.

搞懂這些,Python變得好實用!(1)加減乘除四則運算練習

達內教育評價-故事背後事實的真相甚麼是這樣?!

程式課程選達內,美上市IT課程教育集團

從無到有 挑戰14小時取得Google證照

零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

2天考取Google Ads證照!新手廣告投放攻略

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

Javascript初學者課程(11)-跳出及重新執行迴圈

Javascript初學者課程(11)-跳出及重新執行迴圈
Javascript初學者課程(11)-跳出及重新執行迴圈

本日的JavaScript教學就是要教你跳出及重新執行迴圈的應用哦!

你知道前端工程師常用的Break和continue是什麼意思嗎?一起來看看吧!

Break

break 敘述, 是用來「跳出」迴圈用的,繼續執行迴圈之後的 JavaScript 程式。

See the Pen JavaScript11-break by Tedutw (@Tedutw) on CodePen.

只要當 i 的值等於 7 時,即將會從該迴圈跳出。

Continue

至於在Javascript中的Continue 敘述,僅在迴圈內中斷程式的執行,在中斷後又重新執行迴圈,而不會跳出迴圈。

See the Pen JavaScript12-continue by Tedutw (@Tedutw) on CodePen.

 

 

 

 

推薦文章:

Javascript初學者課程(12)-使用者定義函式


Javascript初學者課程(1)-如何在網頁中嵌入?


Javascript初學者課程(2)-變數教學


Javascript初學者課程(3)-資料類型應用


讓人工智慧來幫你拍電影,不必再為選角傷腦筋!!


前端工程師的CSS課程-盒子模式(上)


Python基礎入門課(1)加減乘除四則運算


達內教育學員見證


2天考取Google Ads證照!新手廣告投放攻略


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略


從無到有 挑戰14小時取得Google證照


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


44歲媽咪順利轉職網頁設計師, 家庭事業都得意

Javascript初學者課程(10)-兩種while迴圈

Javascript初學者課程(10)-兩種while迴圈
Javascript初學者課程(10)-兩種while迴圈

本日的JavaScript教學就是要教你正確應用兩種while迴圈哦!

while 迴圈

前端工程師而言,只要條件成立,JavaScript 的「while 迴圈」就會重複執行一段程式碼。

while 迴圈的 JavaScript 語法如下所示:

See the Pen JavaScript10-while-loop-1 by Tedutw (@Tedutw) on CodePen.

以下為 while 迴圈的範例:變數 i 的初始值等於 0、條件為「當 i 的值小於或等於 7 」時,就執行「顯示變數 i 的值,並且把 i 的值再加 1」。然後重複執行迴圈。

See the Pen JavaScript10-while-loop-2 by Tedutw (@Tedutw) on CodePen.

只要 i 小於或等於 7,迴圈就會繼續執行程式。每次迴圈運行時,數值都會增加 1,於是輸出了 1 到 7 的值。

只要當條件一直成立時,迴圈則會繼續執行程式,直到條件不成立為止。在下條件時要小心,如果條件一直成立的話,迴圈就會一直執行下去,不會停止。

do…while 迴圈

do…while 迴圈是 while 迴圈的變體。在檢查條件是否成立之前,此迴圈會先執行一次程式碼,然後只要條件為真,迴圈將會重複循環。

do…while 迴圈的 JavaScript 語法如下

See the Pen JavaScript10-do-while-loop-3 by Tedutw (@Tedutw) on CodePen.

注意:分號必須寫於 do…while 迴圈的最末端

do…while 迴圈的範例如下:變數 i 的初始值等於 0、執行「顯示變數 i 的值,並且把 i 的值再加 1」、條件為「當 i 的值小於或等於 7 」。

See the Pen JavaScript10-do-while-loop-5 by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

推薦文章:
Javascript初學者課程(11)-跳出及重新執行迴圈


Javascript初學者課程(1)-如何在網頁中嵌入?


Javascript初學者課程(2)-變數教學


人工智慧快取代掉你的工作了嗎?快為自己的未來做打算吧!!(一)


前端工程師必學課程:CSS的常見邊框屬性解釋


前端工程師往前進的基石,Class選擇器宣告法


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略


鄰居們都驚呆了!我只上六個月Java課程就變成Java工程師了


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


從無到有 挑戰14小時取得Google證照


2天考取Google Ads證照!新手廣告投放攻略


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

Javascript初學者課程(9)-for迴圈應用

Javascript初學者課程(9)-for迴圈應用
Javascript初學者課程(9)-for迴圈應用

本日的JavaScript教學就是要教你正確應用for迴圈哦!

迴圈

JavaScript 的「迴圈(Loops)」可以多次執行一組程式。一般來說,當前端工程師操作時,遇到有有多個值,需要重複執行同程式,用「迴圈(Loops)」非常方便。

JavaScript 有三種迴圈:forwhile do while 。最常用的 for 迴圈 JavaScript 語法如下:

See the Pen JavaScript9-for-loop-1 by Tedutw (@Tedutw) on CodePen.

上述例子是十分典型的 for 迴圈(for loop)格式,包含三個條件敘述 (statement):

在迴圈開始之前執行「條件敘述 1」;

「條件敘述 2」定義了迴圈運行的條件;

每次迴圈跑完之後,執行「條件敘述 3」。

For 迴圈

以下的 for 迴圈範例中,顯示出 7 個等於或小於 7 的整數:

See the Pen JavaScript9-for-loop-2 by Tedutw (@Tedutw) on CodePen.

以上示例中,迴圈開始前,條件敘述 1 設置了一個變數(變數 i = 1);

條件敘述 2 定義了迴圈運行的條件(i 必須小於或等於 7)。

每次執行迴圈中的程式代碼後,條件敘述 3 都會增加一個值(i ++)。

條件敘述 1 是選擇性的:如果在迴圈開始前就已經定義了值,則可以將其省略。如下例 (因為在 for 迴圈之前便已經定義了「var i = 1」,因此 for 迴圈就省略了條件敘述 1 ):

See the Pen JavaScript9-for-loop-3 by Tedutw (@Tedutw) on CodePen.

如果條件敘述 2 結果為真(true),則迴圈將重頭開始執行;反之,迴圈將結束。與條件敘述 1 一樣,條件敘述 2 也是選擇性的(可以省略)。

如果省略條件敘述 2 ,就必須在迴圈內加一個 break。否則迴圈將不會結束哦。

條件敘述 3 用於更改初始變數。可以使用任何方式來修改變數,包括減去(i–)或增加(i = i + 15)等等。

條件敘述 3 也是選擇性的(可以省略),假設在迴圈內增加值,則可以將其省略。

See the Pen JavaScript9-for-loop-4 by Tedutw (@Tedutw) on CodePen.

 

 

 

 

推薦文章:
Javascript初學者課程(10)-兩種while迴圈


Javascript初學者課程(3)-資料類型應用


Javascript初學者課程(5)-賦值運算子應用


毛小孩照片超難修?靠Photoshop輕鬆就搞定!


擠進高薪科技大門-Java課程等你來瞭解!


連日本麻將好手都驚艷的人工智慧天鳳你挑戰過嗎?(1)


Java課程、UI課程、程式課程、網路行銷課程推薦


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


2天考取Google Ads證照!新手廣告投放攻略


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略


從無到有 挑戰14小時取得Google證照

Javascript初學者課程(8)-條件判斷式應用

Javascript初學者課程(8)-條件判斷式應用
Javascript初學者課程(8)-條件判斷式應用

本日的JavaScript教學就是要教你正確應用條件判斷式哦!

switch 條件式

前端工程師建議,只要是在 JavaScript 中,如果你有多個條件需要測試的話,為每個條件編寫 if…else 語句可能不是那麼有效率。此時,前端工程師們可以使用 switch 敘述式,就可以依據不同的條件而執行所指定的程式。 switch 用法如下面代碼所示:

See the Pen JavaScript8-switch-1 by Tedutw (@Tedutw) on CodePen.

switch 敘述式代表只會運算一次,看看敘述是否符合各個情況(case)所指定的條件。當有條件成立時,則會執行該情況(case)所對應的程式。如以下例子:變數「day」若為 1 時則輸出「Mon」、為 2 時,則輸出「Tue」、為 3 則輸出「Wed」、為 4 則輸出「Thu」、為 5 則輸出「TGIF」,都不符合就輸出「Weekend day」。

See the Pen JavaScript8-switch-2 by Tedutw (@Tedutw) on CodePen.

註1:以上例子也可以使用 if…else 條件式 來寫,但還不如 switch 來的精簡。

註2:每一個 case 中的「break」語句,作用是為了讓 JavaScript 跳出該 switch 程式區塊,以阻止更多的程式碼執行、或是繼續在該區塊內繼續測試的動作。通常一種情況(case)的條件陳述中,會放一個「break」。

switch 條件式中的「default」

當所有條件都不成立時,「default」關鍵字指定 JavaScript 要執行的動作。如下例,如果變數「member」的值都不符合所有情況(case)的條件陳述時,JavaScript 就會跑到「default」,顯示「不是Stratovarius的現任團員」。以下的變數(var)「member」的值為 「Tokki」,看看是否符合每個情況(case)的條件陳述。

See the Pen JavaScript8-switch-3 by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

 

推薦文章:
Javascript初學者課程(9)-for迴圈應用


Javascript初學者課程(1)-如何在網頁中嵌入?


Javascript初學者課程(2)-變數教學


網路行銷的7大心法3-社群行銷與CRO是不可或缺的!


電影迷工程師分得出片中的Python,Java嗎?(上)


前端工程師不可不會的CSS盒子模型!! (邊框留白篇)


你能分辨人工智慧製造的假新聞嗎?


2天考取Google Ads證照!新手廣告投放攻略


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


從無到有 挑戰14小時取得Google證照

Javascript初學者課程(7)-條件式應用

Javascript初學者課程(7)-條件式應用
Javascript初學者課程(7)-條件式應用

本日的JavaScript教學就是要教你正確應用條件式哦!

if 條件式

一般來說,在使用 JavaScript 編寫程式碼時, 前端工程師建議,如果希望程式能依據不同的狀態,而執行不同的操作時,就需要使用條件陳述式(conditional statements)

我們可以使用if 條件式來敘述:當一個指定的條件成立(為真)時會執行的程式碼,用白話來說就是「當…條件成立時,則會執行…程式」。

if 條件式的 JavaScript 語法如下:

See the Pen JavaScript7-if-1 by Tedutw (@Tedutw) on CodePen.

只有當指定的條件成立時,程式碼才會執行。

下面為 if 條件式 的範例,聲明當「變數 Num1 小於 變數 Num2」的條件成立時,才會顯示「JavaScript其實不難啊!」。

See the Pen JavaScript7-if-3 by Tedutw (@Tedutw) on CodePen.

承上面的例子,當「變數 Num1 小於 變數 Num2」的條件不成立時,則程式會自動跳過要執行的代碼,不會顯示「JavaScript其實不難啊!」。如下所示:

See the Pen JavaScript7-if-4 by Tedutw (@Tedutw) on CodePen.

else 敘述

當條件不成立時,除了不讓程式執行之外,我們還可以有其他選擇,可以使用「else」語句來指定當不符合指定條件時,所要執行的動作。承上方例子,當不符合「變數 Num1 小於變數 Num2」 的狀況時,就顯示「前端工程師都必須學JavaScript」。

See the Pen JavaScript7-if-5 by Tedutw (@Tedutw) on CodePen.

else if 敘述

if 條件式 中,我們還可以加入「else if」敘述另一個條件。當所指定的條件不成立時,是否還符合另一個條件。如以下例子所示,當變數「age」大於 17 的條件成立時,則顯示「成人」;若不成立,則看看是否符合另一個條件(變數是否大於 11)。當另一個條件成立時,則顯示「青少年」;若兩個條件都不成立,就顯示「兒童」。

See the Pen JavaScript7-if-6 by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

 

 

推薦文章:
Javascript初學者課程(8)-條件判斷式應用


Javascript初學者課程(1)-如何在網頁中嵌入?


Javascript初學者課程(2)-變數教學


還在困擾不知垃圾如何分類嗎?人工智慧資源回收機器人終於出現啦!


不能不會的Python基礎概念1-加減乘除四則運算練習


達內教育學員見證


身為前端工程師的你還分不清Div及Span標籤應用嗎? (上)


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


從無到有 挑戰14小時取得Google證照


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


2天考取Google Ads證照!新手廣告投放攻略


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略

Javascript初學者課程(6)-邏輯運算子應用

Javascript初學者課程(6)-邏輯運算子應用
Javascript初學者課程(6)-邏輯運算子應用

本日的JavaScript教學就是要教你正確應用邏輯運算子哦!

邏輯運算子

JavaScript教學裡,其中的邏輯運算子,又稱為「布林運算字(Booleen Operators)」,是可以用來評估表達式,並且回傳 true 或是 false。

邏輯運算子 敘述
&& and 運算子:若兩個運算元為真,則回傳「ture」
|| or 運算子:若其中一個運算元為真,則回傳「ture」
! not 運算子:若運算元不為真,則回傳「ture」

See the Pen 邏輯運算子|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.上表中的JavaScript 運算子,範例如下所示,前兩個分別為「and 運算子」、「or 運算子」連接兩個布林表達式,最後一個為「not 運算子」接一個布林表達式。

條件運算子

也有一種 JavaScript 的邏輯運算子稱為「條件運算子」,它會根據指定的條件而指派一個值給一個變數,寫法如下:

 variable = (什麼樣的條件) ? 第一個值:第二個值

範例如下所示:

 

See the Pen 條件運算子|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

在以上例子中,假設變數 age 的值小於 18 的話,則變數 isAdult 的值將為「未滿18不得入場」,若變數 age 的值為 18 以上的話,則變數 isAdult 的值將為「18歲以上可以入場」。

 

 

 

 

 

 

 

推薦閱讀:
Javascript初學者課程(7)-條件式應用


Javascript初學者課程(1)-如何在網頁中嵌入?


Javascript初學者課程(2)-變數教學


Javascript初學者課程(3)-資料類型應用


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


前端工程師必備「Emmet」基礎教學(1)


再也不用為了回收分類發愁了!!交給人工智慧就對了!!


Python與R語言誰是贏家?盤點5個即將消失的程式語言(上)

Javascript初學者課程(5)-賦值運算子應用

Javascript初學者課程(5)-賦值運算子應用
Javascript初學者課程(5)-賦值運算子應用

本日的JavaScript教學就是要教你正確應用賦值運算子哦!

賦值運算子

JavaScript教學中,你會發現到JavaScript 中的賦值運算子,其賦值運算符號是「=」。第一次接觸程式碼的人可能會以為它是「等於」,其實並非如此。它實際上意思是指把右邊表達式的值賦給左邊的運算數。

JavaScript賦值運算子 敘述 範例
x = y x = y
+= x += y x = x + y
-= x -= y x = x – y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

你可以在JavaScript 中的同一行中,使用多種運算子,如在下面例子所示:

See the Pen 賦值運算子|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

你也可以運用多種變數,例子如下:

See the Pen Addition-2|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

推薦閱讀:
Javascript初學者課程(6)-邏輯運算子應用


Javascript初學者課程(1)-如何在網頁中嵌入?


Javascript初學者課程(2)-變數教學


電影迷工程師分得出片中的Python,Java嗎?(上)


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


美國NASDAQ上市公司、外商IT教育培訓企業


日本研發的人工智慧機器人,真的能成為完美人妻?(上)

Javascript初學者課程(4)-數學運算子應用

Javascript初學者課程(4)-數學運算子應用
Javascript初學者課程(4)-數學運算子應用

本日的JavaScript教學就是要教你正確應用數學運算子哦!

數學運算子

JavaScript教學中的數學運算子,其作用是對數字(文字的形式或是變數的形式)進行函式運算。

運算子 敘述 範例
+ 加號 1 + 1 = 2
減號 2 – 1 = 1
* 乘號 2 * 3 = 6
/ 除號 10 / 2 = 5
減去 var a = 10; a–; Now a =9
% 餘數 20 % 3 = 2
++ 遞增 var a = 10; a++; Now a =10
遞減 var a = 10; a–; Now a =9

從下面例子中,你可以看出它是利用加號運算子來決定兩個數的和:

See the Pen Addition|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

你也可以運用多種變數,例子如下:

See the Pen Addition-2|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

承第一個例子,假如我們把「var x = 20 + 30」使用字串表示,變成「var x = “20 + 30″」的話,答案就不會是 20 + 30 的和,而是以字串形式呈現如下:

See the Pen Addition-string|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

減、乘、除運算子

四則運算中,除了上述介紹的加號運算子外,JavaScript 的減、乘、除運算子範例如下所示:

See the Pen 減、成、除運算子|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

遞增與遞減運算子

JavaScript 的遞增運算子「++」把數值加一,至於運算元的前後,意義各不相同:要是置於運算元的前方,則回傳被遞增的值;要是至於運算元的後方,則回傳原值,然後才遞增運算子。這樣解釋看似模糊,請見範例如下:

把遞增運算子放在運算元「y」前方的例子:

See the Pen 遞增運算子++var|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

把遞增運算子放在運算元「y」後方的例子:

See the Pen 遞增運算子var++|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

同理可證,遞減運算子「–」則是把數值減一,於運算元的前方,則回傳被遞減的值;要是至於運算元的後方,則回傳原值,然後才遞減運算子,範例如下:

把遞減運算子放在運算元「y」前方的例子:

See the Pen 遞減運算子–var|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

把遞減運算子放在運算元「y」後方的例子:

See the Pen 遞減運算子var–|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

 

推薦文章:
Javascript初學者課程(5)-賦值運算子應用


Javascript初學者課程(6)-邏輯運算子應用


Javascript初學者課程(1)-如何在網頁中嵌入?


控制Python的結構這邊告訴你(H)


AI 人工智慧竟是中美貿易戰的關鍵!(上)


前端工程師必備HTML5入門課程:SVG簡介


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~