Javascript新手上路(二一):陣列的方法和屬性

Javascript新手上路(二一):陣列的方法和屬性
Javascript新手上路(二一):陣列的方法和屬性

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

陣列(Arrays)-length 屬性

JavaScript 陣列(Arrays)擁有一些實用的內置屬性和方法,如 length 屬性,用以回傳一個陣列中元素的數量。寫法如下例所示:

See the Pen JavaScript-Array-length-property by Tedutw (@Tedutw) on CodePen.

上述範例左側的原始碼,第一行的「courses」陣列有三個元素:HTML、CSS、JS,因此回傳數值為「3」;第四行的「courses1」陣列有四個元素:HTML、CSS、JS、JQuery,因此回傳數值為「4」

合併陣列(Combining Arrays)-concat () 方法

JavaScript 的 concat () 方法被用來合併兩個或多個陣列。此方法不會改變原本的陣列,而是新增加另一個經過合併過的陣列後回傳。

See the Pen JavaScript-combining-Arrays by Tedutw (@Tedutw) on CodePen.

上述範例左側的原始碼,第一行為「c1」陣列回傳為「HTML,CSS」;第二行的「c2」陣列回傳為「JS,JQuery」;第三行就採用 concat () 方法來合併第一、第二行的 c1、c2 陣列,是為新陣列「c3」,其回傳值有四個元素「HTML,CSS,JS,JQuery」。

JavaScript 的陣列 (Arrays)教學在此告一個段落,請各位讀者務必將前一章「陣列的介紹」與本章再複習一次。下回的JavaScript教學系列,我們將陸續介紹 Math Object 數學物件與 Date Object 日期物件等 JavaScript 原生物件。

 

更多JavaScript相關文章請點下方連結~

 

 

 

其他閱讀

JavaScript入門教學#18|創造JavaScript物件(Objects)

你是我的眼!Google AI 眼鏡助視障朋友「看見」世界

差點被拋棄的冠軍程式語言-Java入門教學(一)

Java 身世之謎/寫出第一個Java程式

APCS 是什麼?所有 APCS 檢定的問題這篇都會回答你!

Javascript新手上路(十九):Method

前端工程師一定要懂的JavaScript變數命名規範~

學習網頁前端時也千萬別放過JavaScript!!

 

 

 

 

Javascript新手上路(二十):陣列

Javascript新手上路(二十):陣列
Javascript新手上路(二十):陣列

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

陣列(Arrays)

JavaScript 中的「陣列(Arrays)」可被比喻成「可以一次承裝多個值的變數」。一般的變數一次只能裝一個值,而陣列一次可裝多個變數。例如,現在我們有三個課程名稱「HTML」、「CSS」、「JS」,就需要設立三個變數來承裝。原始碼如下所示:

var course1 ="HTML"; 
var course2 ="CSS"; 
var course3 ="JS"; 

若是使用「陣列(Arrays)」,原始碼就可以精簡成一行文,如下所示:

var courses = new Array("HTML", "CSS", "JS"); 

語法解析:上述的代碼是宣告名為「courses」的陣列。這個陣列包含三個值(或稱元素)。建立新陣列的寫法為「new Array(元素一,元素二,元素三)」

取出陣列的某一元素

陣列裡含這麼多元素,當我們要找出某個元素時,就需要把索引號碼寫在方括號內。要取出陣列中的第 X 個元素,語法為「陣列名稱[X-1]」(因為陣列元素的編號是從零開始,不是從一開始,所以第一個元素的索引號為「0」、第二個元素的索引編號為「1」,由此類推⋯⋯)

我們承接前一段「名稱為 courses 的陣列」的例子,假如今天我們要從 courses 陣列中取出「JS」,並且把「JS」改成「JQuery」,寫法如下:

var courses = new Array("HTML", "CSS", "JS"); 
var course = courses[2]; // 取出第三個元素「JS」
courses[2] = "JQuery"; //將第三個元素名稱改成「JQuery」 

See the Pen JavaScript-Array1 by Tedutw (@Tedutw) on CodePen.

若當我們輸入的索引數字,已經超過了陣列元素數目減去「1」的數字時(例如上述例子的陣列中只有三個元素,但是你卻輸入了「3」或是比「3」還大的數字,則 JavaScript 會回傳「undefined」)。如以下所示:

var courses = new Array("HTML", "CSS", "JS");
document.write(courses[3])
                        

See the Pen JavaScript-Array2 by Tedutw (@Tedutw) on CodePen.

使用其他方式來建立陣列 Array

除了上述方式,我們還可以藉由先輸入陣列元素個數、之後再告知哪個序號對應到哪個元素的方式來建立陣列。

例如,我們把上述的 courses 陣列使用此方法來寫,則 JavaScript 原始碼如下:

var courses = new Array(3);
courses[0] = "HTML";
courses[1] = "CSS";
courses[2] = "JS";

JavaScript 的陣列是動態的,因此我們在上述例子中的第一行「var courses = new Array(3);」,也可以不給元素的數目,即為「var courses = new Array();」。此時,後面的元素就可自由增加如下:

var courses = new Array();
courses[0] = "HTML";
courses[1] = "CSS";
courses[2] = "JS";
courses[3] = "JQuery"

實務上常用:陣列實字 (Array literal)

以上介紹了JavaScript陣列的寫法。為了提高前端工程師的執行速度,我們可以把以上的寫法簡化成陣列實字 (Array literal)寫法,如下所示:

var courses = ["HTML", "CSS", "JS"]; 

這樣子的寫法,等同於「var courses = new Array(“HTML”, “CSS”, “JS”);」,差別是陣列實字的寫法,少了關鍵字「new Array」,並且把元素左右側的括號改成方形括號。此種簡化的寫法最常被前端工程師所使用。

今天就介紹到這裡,在接下來「JavaScript入門教學#21」的文章中,我們將繼續介紹陣列的屬性、合併方法等。建議讀者們先消化一下陣列的寫法,再進入下一章學習陣列的活用,才會學得更輕而易舉。

 

更多JavaScript相關文章請點下方連結~

 

 

 

其他閱讀

JavaScript入門教學#18|創造JavaScript物件(Objects)

你是我的眼!Google AI 眼鏡助視障朋友「看見」世界

差點被拋棄的冠軍程式語言-Java入門教學(一)

Java 身世之謎/寫出第一個Java程式

APCS 是什麼?所有 APCS 檢定的問題這篇都會回答你!

Javascript新手上路(十九):Method

前端工程師一定要懂的JavaScript變數命名規範~

學習網頁前端時也千萬別放過JavaScript!!

 

 

 

 

前端工程師不能錯過的JavaScript變數命名規範!!

前端工程師不能錯過的JavaScript變數命名規範!!
前端工程師不能錯過的JavaScript變數命名規範!!

今天要來跟大家分享前端工程師必學的JavaScript變數命名規範!!西往這篇文章能幫助到大家~

JavaScript變數命名規範:只能由英語字母,數字,下劃線,美元符號$構成,並且不能以數字開頭,並且不能是JavaScript保留字。

前端工程師工程師要知道的JavaScript數命名規範

 

下列都是非常正確的變數命名:

 

var haha​​ = 250;

 

var xixi = 300;

 

var a1 = 400;

 

var a2 = 400;

 

var abc_123 = 400;

 

var $ abc = 999;

 

var $ o0_0o $ = 888;

 

var $ = 1000;

 

var _ = 2000;

 

var ________ = 3000;

 

下列都是錯誤的命名:

 

var a-1 = 1000; //不能有怪異符號

 

var a @ = 2000; //不能有怪異符號

 

var 2year = 3000; //不能以數字開頭

 

var a ¥ = 4000; //不能有怪異符號

 

var a *#$#$ @ = 5000; //不能有怪異符號

 

var a b = 300; //不能有空格

 

下列的單詞,叫做保留字,就是說補充當做變數名

 

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto

 

implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

 

需要注意大寫字母是可以使用的,並且大小寫敏感。最初A和a是兩個變數。

 

1 var A = 250;

 

2 var a = 888;

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

其他閱讀

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

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

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

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

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

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

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

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的理由有這些~

網頁前端工程師非學好JavaScript的理由有這些~
網頁前端工程師非學好JavaScript的理由有這些~

網頁前端為甚麼要學JavaScript?這篇告訴你!!

今天達內教育要跟大家分享的文章是關於為什麼學習網頁前端一定要掌握 JavaScript ?在前端的世界裡,沒有什麼是 JavaScript 實現不了的,關於 JS 有一句話:凡是可以用 JavaScript 來寫的應用,最終都會用 JavaScript , JavaScript 可運行在所有主要平台的所有主流瀏覽器上,也可運行在每一個主流操作系統的服務器端上。現如今我們在為網站寫任何一個主要功能的時候都需要有懂能夠用 JavaScript 寫前端的開發人員。

而後端代碼是用什麼編寫的則無所謂——不管是 Java,PHP,.NET,Node.js 還是其他——但是用戶端就一定需要一個 JavaScript 開發人員。事實上,現在很多開發人員依然沒有認識到 JavaScript 有多麼強大。學習網頁前端開發技術,掌握 JavaScript 這門語言是必要的,那麼JS有哪些功能和領域呢?一起看一看吧!

1.資料視覺化

資料視覺化是當下大家所推崇的一種互動展示模式,而 Java 擁有 ECharts、Dygraphs.js、D3.js、InfoVis、Springy.js 等多種可實現資料視覺化效果的框架。

2.行動裝置應用

PhoneGap 將 WebView 帶向了移動應用,同時也將 JavaScript 帶向了行動裝置應用。

3.伺服器端

Node.js 是一個能執行 JavaScript 的環境,以 Google Chrome V8 引擎為核心,加上一系列 C/C++ 的套件,讓 Server 端也可以執行 JavaScript 。因此現在前端、後端都可以用JavaScript,任何一個網頁都離不開 JavaScript。

4.全平台應用

一份代碼構建行動裝置、桌面、Web 能夠全平台應用,在 Eletcron 上運行 Ionic,就意味著無限的可能性。

5.遊戲

如果你對網頁遊戲僅僅停留在 Flash 的時代,認為只有 Flash 才能做出非常絢麗的遊戲特效,那就錯了。 JavaScript 也可以做出華麗的特效!

6.VR

利用 3D 遊戲引擎,如 Three.js,你也可以來創建一個 3D 世界。

7.硬件

Tessel 可以直接在設備上運行 JavaScript ,連服務器都不需要,然後像做網絡開發一樣通過用 IDE 和庫去開發它,上傳新的固件只需一句 tessel 推送指令。

8.操作系統

那麼是否有可能僅使用 Node.js 創建一個操作系統呢?NodeOS 了解一下,雖然它是用 Linux 內核來處理各種底層任務,比如硬件通訊什麼的,但是除此之外,使用的都是 Node.js。

JavaScript 在整個網頁中的地位:它屬於前端的核心,主要用來操控和重新調整 DOM,通過修改 DOM 結構,從而來達到修改頁面效果的目的。

以上就是達內教育今天為大家分享的關於為什麼學習網頁前端一定要掌握 JavaScript 的文章,希望本篇文章能夠對正在從事網頁前端工作的人們有所幫助。最後祝各位學員們工作順利,成為一名優秀的前端工程師

 

想閱讀更多關於JavaScript的文章請點下方連結!!

 

 

 

其他閱讀

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

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

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

AI人工智慧追蹤蚊子快狠準 讓你不再被叮卻找不到蚊子

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

Javascript初學小課(八):switch條件式

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 的物件名稱與屬性名稱分別列表如下

  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 中快速建立新的物件屬性

 

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

 

 

 

其他閱讀

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

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

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

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

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

Javascript基礎入門(十六):三種訊息框

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

簡單好懂的JavaScript(14):在函式中使用多重參數

 

 

 

 

 

 

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),有兩種寫法:

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

 

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

 

 

 

其他閱讀

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

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

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

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

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

Javascript基礎入門(十六):三種訊息框

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

簡單好懂的JavaScript(14):在函式中使用多重參數

 

 

 

 

 

 

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

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

JavaScript是個好東西!!請盡量利用他!!尤其是網頁前端們~

今天達內教育要跟大家分享的文章是關於為什麼學習網頁前端一定要掌握 JavaScript ?在前端的世界裡,沒有什麼是 JavaScript 實現不了的,關於 JS 有一句話:凡是可以用 JavaScript 來寫的應用,最終都會用 JavaScript , JavaScript 可運行在所有主要平台的所有主流瀏覽器上,也可運行在每一個主流操作系統的服務器端上。現如今我們在為網站寫任何一個主要功能的時候都需要有懂能夠用 JavaScript 寫前端的開發人員。

而後端代碼是用什麼編寫的則無所謂——不管是 Java,PHP,.NET,Node.js 還是其他——但是用戶端就一定需要一個 JavaScript 開發人員。事實上,現在很多開發人員依然沒有認識到 JavaScript 有多麼強大。學習網頁前端開發技術,掌握 JavaScript 這門語言是必要的,那麼JS有哪些功能和領域呢?一起看一看吧!

1.資料視覺化

資料視覺化是當下大家所推崇的一種互動展示模式,而 Java 擁有 ECharts、Dygraphs.js、D3.js、InfoVis、Springy.js 等多種可實現資料視覺化效果的框架。

2.行動裝置應用

PhoneGap 將 WebView 帶向了移動應用,同時也將 JavaScript 帶向了行動裝置應用。

3.伺服器端

Node.js 是一個能執行 JavaScript 的環境,以 Google Chrome V8 引擎為核心,加上一系列 C/C++ 的套件,讓 Server 端也可以執行 JavaScript 。因此現在前端、後端都可以用JavaScript,任何一個網頁都離不開 JavaScript。

4.全平台應用

一份代碼構建行動裝置、桌面、Web 能夠全平台應用,在 Eletcron 上運行 Ionic,就意味著無限的可能性。

5.遊戲

如果你對網頁遊戲僅僅停留在 Flash 的時代,認為只有 Flash 才能做出非常絢麗的遊戲特效,那就錯了。 JavaScript 也可以做出華麗的特效!

6.VR

利用 3D 遊戲引擎,如 Three.js,你也可以來創建一個 3D 世界。

7.硬件

Tessel 可以直接在設備上運行 JavaScript ,連服務器都不需要,然後像做網絡開發一樣通過用 IDE 和庫去開發它,上傳新的固件只需一句 tessel 推送指令。

8.操作系統

那麼是否有可能僅使用 Node.js 創建一個操作系統呢?NodeOS 了解一下,雖然它是用 Linux 內核來處理各種底層任務,比如硬件通訊什麼的,但是除此之外,使用的都是 Node.js。

JavaScript 在整個網頁中的地位:它屬於前端的核心,主要用來操控和重新調整 DOM,通過修改 DOM 結構,從而來達到修改頁面效果的目的。

以上就是達內教育今天為大家分享的關於為什麼學習網頁前端一定要掌握 JavaScript 的文章,希望本篇文章能夠對正在從事網頁前端工作的人們有所幫助。最後祝各位學員們工作順利,成為一名優秀的前端工程師

 

想閱讀更多關於JavaScript的文章請點下方連結!!

 

 

 

其他閱讀

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

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

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

AI人工智慧追蹤蚊子快狠準 讓你不再被叮卻找不到蚊子

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

Javascript初學小課(八):switch條件式

Javascript基礎入門(十四):在函式中使用多重參數

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

手把手教你JavaScript(18):創造物件
手把手教你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 與 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 中快速建立新的物件屬性

 

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

 

 

 

其他閱讀

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

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

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

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

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

Javascript基礎入門(十六):三種訊息框

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

簡單好懂的JavaScript(14):在函式中使用多重參數

 

 

 

 

 

 

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

手把手教你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) 的例子。

 

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

 

 

 

其他閱讀

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

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

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

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

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

Javascript基礎入門(十六):三種訊息框

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

簡單好懂的JavaScript(14):在函式中使用多重參數