標籤: 網頁前端開發教學

Python 變身告白神器、還會幫你整理電腦？6 種 Python 隱藏版技能一次學

紅到被山寨！中國自主開發語言「木蘭」竟是抄襲 Python

學習網頁前端就一定要懂JavaScript!!

Javascript初學小課(十七):物件介紹

Javascript基礎入門(十八):創造物件

Javascript新手上路(十八):創造物件

時下最熱門的程式語言之一JavaScript開始學了嗎?正式上課前先看看我們為你準備的文章吧!!(十八)

物件建構式（object constructor）

在上一課中，我們使用物件（object）初始值（initializer）語法來創建了一些 JavaScript 物件。

See the Pen JavaScript 17-Objects-1 by Tedutw (@Tedutw) on CodePen.

以上的 JavaScript例子只建立了單一的「person」。有時前端工程師也需要設定「物件種類（object type）」來創建單一種類的多個物件

此時前端工程師可以使用「物件建構式（object constructor）」創建「物件種類（object type）」。範例如下：

See the Pen JavaScript 18-Objects-Constructor-1 by Tedutw (@Tedutw) on CodePen.

上述的函式「function person」就是一個物件建構式（object constructor）：接受 name、nationality、team、BikeNo 這 4 個參數並且指派這 4 個參數為物件的屬性。

上述例子的關鍵字「this」是指當前的物件。注意 this 不具有變數的屬性（因為其值不能改變），僅僅是一個關鍵字。

創造物件

一旦有了物件建構式（object constructor）之後，就可以使用關鍵字「new」來創建同一種類型（type）的新物件（new objects）

See the Pen JavaScript 18-Objects-Constructor-2 by Tedutw (@Tedutw) on CodePen.

在上述的例子，變數 b1 與 b2 皆為「biker」類型的新物件。這些物件含有多個屬性，這些屬性被分配給對應的物件值。例如 b1 的 “Valention Rossi” 屬性被分配給物件值 “name”。

上述例子中，b1 的物件名稱與屬性名稱分別列表如下

物件：name；屬性：Valention Rossi
物件：nationality；屬性：Italy
物件：team；屬性：Monster Energy Yamaha MotoGP
物件：BikeNo；屬性：46

b2 的哪個屬性被分配（對應）給哪個物件名稱也如同上述的形式：

物件：name；屬性：Valention Rossi
物件：nationality；屬性：Marc Márquez
物件：team；屬性：Repsol Honda Team
物件：BikeNo；屬性：93

照著以上的語法，多練習幾遍，相信你會很快熟悉如何在 JavaScript 中快速建立新的物件屬性

更多JavaScript文章請點下方連結!!

其他閱讀

Javascript新手上路(十七):物件介紹

時下最熱門的程式語言之一JavaScript開始學了嗎?正式上課前先看看我們為你準備的文章吧!!(十七)

JavaScript的變數（variable）可被比喻成用來盛裝「值（value）」的容器。本篇介紹的「物件（objects）」就是變數（variable）的一種，且可以承裝多個值（value）。

一個物件（objects）可以被比喻成一張列有多個值（value）的清單，清單上每個物件的格式為「屬性:屬性值」。所有的屬性、屬性值均以冒號為區隔，範例與說明(「//」開頭的橫行為說明文字) 如以下所示：

See the Pen JavaScript 17-Objects-1 by Tedutw (@Tedutw) on CodePen.

結論：JavaScript 的物件 Objects 就像是容器，能裝多個「有名字」的值。

物件屬性（object property）

在 JavaScript 中，要存取物件的屬性（object property），有兩種寫法：

物件名.屬性名
物件名[‘屬性名’]

以上兩種的範例與說明(「//」開頭的橫行為說明文字)如以下所示：

See the Pen JavaScript 17-Objects-2 by Tedutw (@Tedutw) on CodePen.

順帶一提，JavaScript 有內建「length」屬性，可以計算屬性名稱的字數。承上例，「length」屬性如下所示

See the Pen JavaScript 17-Objects-3 by Tedutw (@Tedutw) on CodePen.

物件方法（object method）

JavaScript 中的物件方法（object method）是一個含有「函式定義（ function definition）」的屬性，存取物件方法（object method）的寫法如以下所示：

物件名.方法名

如同大家都知道的，document.write() 會顯示資料的內容，這個 write()函式就是物件「document」的方法。「document.write()」就是一個物件方法（object method） 的例子。

更多JavaScript文章請點下方連結!!

其他閱讀

手把手教你JavaScript(18):創造物件

想學JavaScript卻不知從何下手?看完這一系列教學文一定對你的程式之路很有幫助的!!(18)

物件建構式（object constructor）

在上一課中，我們使用物件（object）初始值（initializer）語法來創建了一些 JavaScript 物件。

See the Pen JavaScript 17-Objects-1 by Tedutw (@Tedutw) on CodePen.

以上的 JavaScript例子只建立了單一的「person」。有時前端工程師也需要設定「物件種類（object type）」來創建單一種類的多個物件

此時前端工程師可以使用「物件建構式（object constructor）」創建「物件種類（object type）」。範例如下：

See the Pen JavaScript 18-Objects-Constructor-1 by Tedutw (@Tedutw) on CodePen.

上述的函式「function person」就是一個物件建構式（object constructor）：接受 name、nationality、team、BikeNo 這 4 個參數並且指派這 4 個參數為物件的屬性。

上述例子的關鍵字「this」是指當前的物件。注意 this 不具有變數的屬性（因為其值不能改變），僅僅是一個關鍵字。

創造物件

一旦有了物件建構式（object constructor）之後，就可以使用關鍵字「new」來創建同一種類型（type）的新物件（new objects）

See the Pen JavaScript 18-Objects-Constructor-2 by Tedutw (@Tedutw) on CodePen.

上述例子中，b1 的物件名稱與屬性名稱分別列表如下

物件：name；屬性：Valention Rossi
物件：nationality；屬性：Italy
物件：team；屬性：Monster Energy Yamaha MotoGP
物件：BikeNo；屬性：46

b2 的哪個屬性被分配（對應）給哪個物件名稱也如同上述的形式：

物件：name；屬性：Valention Rossi
物件：nationality；屬性：Marc Márquez
物件：team；屬性：Repsol Honda Team
物件：BikeNo；屬性：93

照著以上的語法，多練習幾遍，相信你會很快熟悉如何在 JavaScript 中快速建立新的物件屬性

更多JavaScript文章請點下方連結!!

其他閱讀

手把手教你JavaScript(17):物件介紹

想學JavaScript卻不知從何下手?看完這一系列教學文一定對你的程式之路很有幫助的!!(17)

See the Pen JavaScript 17-Objects-1 by Tedutw (@Tedutw) on CodePen.

結論：JavaScript 的物件 Objects 就像是容器，能裝多個「有名字」的值。

物件屬性（object property）

在 JavaScript 中，要存取物件的屬性（object property），有兩種寫法：

物件名.屬性名
物件名[‘屬性名’]

以上兩種的範例與說明(「//」開頭的橫行為說明文字)如以下所示：

See the Pen JavaScript 17-Objects-2 by Tedutw (@Tedutw) on CodePen.

順帶一提，JavaScript 有內建「length」屬性，可以計算屬性名稱的字數。承上例，「length」屬性如下所示

See the Pen JavaScript 17-Objects-3 by Tedutw (@Tedutw) on CodePen.

物件方法（object method）

JavaScript 中的物件方法（object method）是一個含有「函式定義（ function definition）」的屬性，存取物件方法（object method）的寫法如以下所示：

物件名.方法名

更多JavaScript文章請點下方連結!!

其他閱讀

手把手教你JavaScript(14):在函式中使用多重參數

手把手教你JavaScript(16):三種訊息框

想學JavaScript卻不知從何下手?看完這一系列教學文一定對你的程式之路很有幫助的!!(16)

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的文章請點下方連結喔~

其他閱讀

手把手教你JavaScript(15):函式回傳

不可不知!!SEO優化人員和前端工程師必讀的語意標記入門!!

Javascript新手上路(十四):在函式中使用多重參數

Javascript新手上路(十六):三種訊息框

時下最熱門的程式語言之一JavaScript開始學了嗎?正式上課前先看看我們為你準備的文章吧!!(十六)

JavaScript 提供三種訊息框：alert、confirm、prompt，介紹如下：

Alert警告提示框

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

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

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

prompt提示訊息框

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

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

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

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

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

confirm確認訊息框

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

更多關於JavaScript的文章請點下方連結喔~

其他閱讀

不可不知!!SEO優化人員和前端工程師必讀的語意標記入門!!

手把手教你JavaScript(14):在函式中使用多重參數

手把手教你JavaScript(15):函式回傳

想學JavaScript卻不知從何下手?看完這一系列教學文一定對你的程式之路很有幫助的!!(15)

一個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和前端工程師的文章請點下方連結!!

其他閱讀

手把手教你JavaScript(7):條件陳述式

手把手教你JavaScript(13):函式中的參數

手把手教你JavaScript(14):在函式中使用多重參數

想學JavaScript卻不知從何下手?看完這一系列教學文一定對你的程式之路很有幫助的!!(14)

函式中使用多重參數

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

一個函式中可以使用兩個以上的參數，參數間以半形的逗點「,」隔開。例如名為「myFunc」的函式中置入了三個參數，其寫法如下：

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

這些參數被使用於函式的定義中，寫法範例如下：

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

當你在宣告上述的「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和前端工程師的文章請點下方連結!!

其他閱讀

手把手教你JavaScript(15):函式回傳

Javascript新手上路(十四):在函式中使用多重參數

Javascript新手上路(十五):函式回傳

時下最熱門的程式語言之一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和前端工程師的文章請點下方連結!!

其他閱讀

Javascript新手上路(七):條件陳述式