顯示具有 物件建構式 標籤的文章。 顯示所有文章
顯示具有 物件建構式 標籤的文章。 顯示所有文章

JavaScript教學19.方法

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.創造物件

對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)」。範例如下:

上述的函式「function person」就是一個物件建構式(object constructor):接受 name、nationality、team、BikeNo 這 4 個參數並且指派這 4 個參數為物件的屬性。
上述例子的關鍵字「this」是指當前的物件。注意 this 不具有變數的屬性(因為其值不能改變),僅僅是一個關鍵字。

創造物件

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

在上述的例子,變數 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有興趣嗎?免費入門教學在這裡!本篇#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資料類型

全球首屆元宇宙時裝周,複刻20年前的失敗?

全球首屆元宇宙時裝周, 遇到瓶頸 複刻20年前的失敗? 目錄 元宇宙時裝周參與盛況 叫好不叫座?新興技術的行銷瓶頸 由虛擬實境平台 Decentraland 所舉辦的「元宇宙時裝週」(Metaverse Fashion Week...