JavaScript教學19.方法

對Javascript有興趣嗎?免費入門教學在這裡!本篇是#19方法

方法 (Method)

程式語言JavaScript 教學中,「方法 (Method)」也是函式（Function）的一種，但跟之前介紹的「函式（Function）」的差別是，「方法 (Method)」被當成物件屬性來存取。 JavaScript 「方法 (Method)」的語法如下：

method名稱 = function() { 此處為要執行的代碼
使用以下語法將「方法 (Method)」叫出來

物件名稱.method名稱
方法 (Method) 是一種函數，屬於一個物件。可以使用 this 關鍵字引用之。 this 關鍵字在此用來組為引用當前物件，這意味著前端工程師可以使用它來存取物件的屬性和方法

定義方法 (Method) ，需在函式建構式內完成，範例如

See the Pen Javascript19-method by Tedutw (@Tedutw) on CodePe

在上述 JavaScript 範例，我們為新的 animal 物件定義了一個名為「babyName」的方法 (Method)。該方法 (Method)是一個函數，也取用參數名稱「name」，並將它分配給物件的「name」屬性。this.name 是指該物件的名稱屬性。而「babyName」方法將物件的「name」屬性更改為其

除了上述方法，前端工程師還可以在函式建構式之外定義函式，並將該函式與其物件相連。範例如

See the Pen Javascript19-method-2 by Tedutw (@Tedutw) on CodePeˊn.下：參數n.下：。()： }中的「方法 (Method)」也是函式（Function）的一種，但跟之前介紹的「函式（Function）」的差別是，「方法 (Method)」被當成物件屬性來存取。 JavaScript 「方法 (Method)」的語法如下：

method名稱 = function() { 此處為要執行的代碼 }

使用以下語法將「方法 (Method)」叫出來：

物件名稱.method名稱()

方法 (Method) 是一種函數，屬於一個物件。可以使用 this 關鍵字引用之。 this 關鍵字在此用來組為引用當前物件，這意味著前端工程師可以使用它來存取物件的屬性和方法。
定義方法 (Method) ，需在函式建構式內完成，範例如下：

See the Pen Javascript19-method by Tedutw (@Tedutw) on CodePen.

在上述 JavaScript  範例，我們為新的 animal 物件定義了一個名為「babyName」的方法 (Method)。該方法 (Method)是一個函數，也取用參數名稱「name」，並將它分配給物件的「name」屬性。this.name 是指該物件的名稱屬性。而「babyName」方法將物件的「name」屬性更改為其參數
除了上述方法，前端工程師還可以在函式建構式之外定義函式，並將該函式與其物件相連。範例如下：

See the Pen Javascript19-method-2 by Tedutw (@Tedutw) on CodePen.

參考連結:

SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢！

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

AI 甩尾技術勝 Ken Block！方程式冠軍車手嘆：要失業了

日推AI手機具「防拍裸照」功能！再拍人工智慧就跟你媽告狀

得先掌握JavaScript,才能有效學習網頁前端？

幫你集結各種免費Java開發工具!!

JavaScript入門#18創造物件

JavaScript教學18.創造物件

對Javascript有興趣嗎?免費入門教學在這裡!本篇是#18創造物件

物件建構式（object constructor）

在上一JavaScript課中，我們使用物件（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 的物件名稱與屬性名稱分別列表如下

1. 物件：name；屬性：Valention Rossi
2. 物件：nationality；屬性：Italy
3. 物件：team；屬性：Monster Energy Yamaha MotoGP
4. 物件：BikeNo；屬性：46

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

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

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

參考連結:

SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢！

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

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

AI 產業革命開始！為何 Python 成人工智慧必備語言？

為什麼學習網頁前端一定要掌握JavaScript？

Javascript學堂1.在網頁中嵌入JavaScript

JavaScript教學2.變數


JavaScript入門#3資料類型

JavaScript教學17.物件

對Javascript有興趣嗎?免費入門教學在這裡!本篇是#17物件

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），有兩種寫法：

1. 物件名.屬性名
2. 物件名['屬性名']

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

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） 的例子。


參考連結:

SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢！

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

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

AI 產業革命開始！為何 Python 成人工智慧必備語言？

為什麼學習網頁前端一定要掌握JavaScript？

Javascript學堂1.在網頁中嵌入JavaScript

JavaScript教學2.變數

JavaScript入門#3資料類型

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教學13.函式中的參數

JavaScript教學14.在函式中使用多重參數

JavaScript教學15.函式回傳

有了它人人都可精準選角拍電影?交給人工智慧準沒錯?

還不懂Python的你趕緊看過來,為你獻上基礎介紹(一)

還不懂Python的你趕緊看過來,為你獻上基礎介紹(二)

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

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

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

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

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

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教學12.使用者定義函式

JavaScript教學13.函式中的參數

JavaScript教學14.在函式中使用多重參數

有了它人人都可精準選角拍電影?交給人工智慧準沒錯?

還不懂Python的你趕緊看過來,為你獻上基礎介紹(一)

還不懂Python的你趕緊看過來,為你獻上基礎介紹(二)

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

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

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

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

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

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.")
}

當你在宣告上述的「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教學11.break與continue

JavaScript教學12.使用者定義函式

JavaScript教學13.函式中的參數

有了它人人都可精準選角拍電影?交給人工智慧準沒錯?

還不懂Python的你趕緊看過來,為你獻上基礎介紹(一)

還不懂Python的你趕緊看過來,為你獻上基礎介紹(二)

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

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

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

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

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