Javascript初學者課程(16)-訊息框

Javascript初學者課程(16)-訊息框
Javascript初學者課程(16)-訊息框

本日的JavaScript教學就是要教你訊息框的應用哦!

一般來說,JavaScript 提供三種訊息框:alert、confirm、prompt,介紹如下:

Alert警告提示框

當要確保信息傳遞給用戶時,就會使用 Alert 警告提示框。JavaScript 的訊息框提供了一個「確定」按鈕,讓使用者關閉該訊息框後才可以繼續進行操作。

Alert 警告提示框採用單個參數,即彈出框中顯示的文字,如下例子:

alert("Do you really want to leave this page?");

prompt提示訊息框

JavaScript 的 prompt 提示訊息框經常用於讓用戶在進入頁面之前,必須先輸入訊息。

當 prompt 提示訊息框跳出時,用戶在輸入訊息後必須點擊「確定」或「取消」才能繼續。

如果用戶點擊「確定」,該框將顯示使用者輸入的訊息如果用戶單擊「取消」,則顯示「null」

如下例子,當使用者進入網頁時,網頁就會跳出一個 prompt提示訊息框,訊息框上顯示「你今年幾算?」,然後讓使用者輸入數字。若使用者輸入歲數並且按下「確定」後,訊息框將會顯示「你今年_歲」;若使用者沒有輸入訊息或是按「取消」,則顯示「你今年null歲」。

// result = prompt(確認訊息框顯示問題);
let age = prompt('你今年幾算?');

alert(`你今年 ${age} 歲!`); // 你今年_歲!

confirm確認訊息框

JavaScript 的 confirm 確認訊息框通常用於讓用戶驗證或接受某些內容。
彈出confirm確認訊息框時,用戶必須先點擊「確定」或「取消」才能繼續。
如果用戶單擊「確定」,則該框將回傳 true。如果用戶單擊「取消」,則該框將回傳 false。

如下例子所示,當使用者進入網頁時,網頁就會跳出一個 confirm 確認訊息框,訊息框上顯示「請問你確定要離開此頁嗎?」,然後讓使用者輸入「確定」或「取消」。如果使用者輸入「確定」後,訊息框將會顯示「感謝您的造訪,再見!」;若使用者沒有輸入訊息或是按「取消」,則顯示「感謝您選擇繼續瀏覽我們的網頁!」。

var result = confirm("請問你確定要離開此頁嗎?");
if (result == true) {
  alert("感謝您的造訪,再見!");
}
else {
  alert("感謝您選擇繼續瀏覽我們的網頁!");

 

 

 

 

推薦文章:
Javascript初學者課程(1)-如何在網頁中嵌入?


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


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


前端工程師設定CSS背景的五種方法(一)背景固定模式設定


想與AI人工智慧競爭? 你必須擁有這四種能力!


還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!


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


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


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


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


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


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

Javascript初學者課程(15)-函式回傳

Javascript初學者課程(15)-函式回傳
Javascript初學者課程(15)-函式回傳

本日的JavaScript教學就是要教你函式回傳的應用哦!

一個 JavaScript 函式(function)其實是可以選擇使用 return 語句的,以便讓函式回傳結果。當進行需要結果的計算時,此語句很有用。

JavaScript 執行到 return 語句時,函式則會停止執行哦。

return 語句可用來回傳結果。如下例所示,對兩個數值 x,y 進行運算後回傳結果

See the Pen JavaScript15-theReturnStatement by Tedutw (@Tedutw) on CodePen.

假設你不從函式回傳任何內容,它將回傳為 undefined。例如,我們將上述的例子中,「return a * b;」改為「return;」,則結果如下面所示:

See the Pen JavaScript15-theReturnStatement-1 by Tedutw (@Tedutw) on CodePen.

return 語句記得要寫在函式定義的最後方,另一個 return 語句的範例如下所示:

See the Pen JavaScript15-theReturnStatement-2 by Tedutw (@Tedutw) on CodePen.

 

 

 

 

推薦文章:
Javascript初學者課程(1)-如何在網頁中嵌入?


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


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


實用HTML5教學小技巧一-免費編輯器寫HTML這樣用!!


成為前端工程師的第一步,學習HTML與CSS!


透過對的Java課程,讓你從茫然的畢業生中脫穎而出!


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


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


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


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


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


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

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

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

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

函式中使用多重參數

在上一篇文章「函式中的參數(Parameters)」中,介紹了函式中的參數用法。而本篇JavaScript 教學則介紹在函式(function)中置入多個參數的方法。

你知道嗎? 其實一個函式中是可以使用兩個以上的參數的,參數間以半形的逗點「,」隔開。例如名為「myFunc」的函式中置入了三個參數,其寫法如下所示:

function myFunc(x,y,z) {
  //這裡寫上要執行的程式代碼,定義這個參數。
} 

這些參數被使用於函式的定義中,寫法範例如下所示:

function  sayAge(name,age){
  document.write(name+" is "+age+"  years old.")
}

當你在JavaScript中宣告上述的「sayAge」函式時,就在小括號中寫入兩個參數的值(即為「引數 arguments」)。兩個引數須依照參數的順序來寫,範例如下:

See the Pen JavaScript14–function multiple Parameters by Tedutw (@Tedutw) on CodePen.

另一個三個參數的範例如下:

See the Pen JavaScript14–function multiple Parameters-2 by Tedutw (@Tedutw) on CodePen.

假如你宣告函式之後,你所輸入的引數數目小於參數時,則缺少的引數就被設置為「undefined」。如下例中我們定義了三個參數,但是只輸入了兩個引數,則第三個引數就會自動被設置為「undefined」。

See the Pen JavaScript14–function multiple Parameters-3 by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

推薦文章:
Javascript初學者課程(15)-函式回傳


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


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


網路行銷又添一利器(上):趕快來學免費的HTML5教學


入門前端工程師知識~得心應手不是夢-透析Class選擇器


讓你實現目標與夢想的技術實力-Java課程


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


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


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


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


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


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

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教育培訓企業


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