Javascript新手上路(十九):Method

Javascript新手上路(十九):Method
Javascript新手上路(十九):Method

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

方法 (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 CodePen.

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

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

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

 

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

 

 

 

其他閱讀

 

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

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

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

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

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

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

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

 

 

 

 

 

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

手把手教你JavaScript(16):三種訊息框
手把手教你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(14):在函式中使用多重參數

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

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

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

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

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

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

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

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

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

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

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」

如下例子,當使用者進入網頁時,網頁就會跳出一個 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新手上路(十四):在函式中使用多重參數

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

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

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

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

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

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

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

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

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

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

手把手教你JavaScript(15):函式回傳
手把手教你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(14):在函式中使用多重參數

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

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

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

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

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

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

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

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

手把手教你JavaScript(14):在函式中使用多重參數
手把手教你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(13):函式中的參數

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

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

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

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

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

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

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

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

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

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

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

函式中的參數

前端工程師可在JavaScript 中的函式(function),可以導入參數(parameters),讓函式有更多的應用。

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

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

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

使用參數

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

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

 

S

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

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

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

 

更多關於JavaScript和前端工程師的文章請點下方連結!!

 

 

 

其他閱讀

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

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

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

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

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

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

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

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

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

手把手教你JavaScript(12):使用者定義函式

手把手教你JavaScript(12):使用者定義函式
手把手教你JavaScript(12):使用者定義函式

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

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

 

 

 

 

其他閱讀

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

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

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

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

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

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

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

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

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

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

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新手上路(七):條件陳述式

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

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

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

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

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

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

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

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

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

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

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

 

 

 

其他閱讀

Javascript新手上路(十三):函式中的參數

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

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

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

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

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

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

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

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

Javascript新手上路(十三):函式中的參數

Javascript新手上路(十三):函式中的參數
Javascript新手上路(十三):函式中的參數

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

函式中的參數

前端工程師可在JavaScript 中的函式(function),可以導入參數(parameters),讓函式有更多的應用。

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

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

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

使用參數

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

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

 

S

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

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

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

 

更多關於JavaScript和前端工程師的文章請點下方連結!!

 

 

 

其他閱讀

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

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

重新學習UI UX Python課程 打好基礎輕鬆領高薪

有一個傳說 來上Java課程還能任高薪職缺 媒合率竟高達百分之90

人工智慧讓你看清肥胖的原因 讓Python課程教你如何做到

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

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

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

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

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

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