Javascript初學者課程(21)-陣列的方法與屬性

Javascript初學者課程(21)-陣列的方法與屬性
Javascript初學者課程(21)-陣列的方法與屬性

本日的JavaScript教學就是要教你關於Javacript中的陣列的方法與屬性哦!

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

 

 

 

 

 

 

推薦文章:
JavaScript入門教學#18|創造JavaScript物件(Objects)


差點被拋棄的冠軍程式語言-Java入門教學(一)
Java 身世之謎/寫出第一個Java程式


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


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


網頁前端要成功關鍵,就是JavaScript!!


Javascript入門第十七課-物件介紹


搞不懂Javascript變量命名?問前端工程師就對了!

Javascript初學者課程(20)-陣列

Javascript初學者課程(20)-陣列
Javascript初學者課程(20)-陣列

本日的JavaScript教學就是要教你關於Javacript中的陣列哦!

陣列(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入門教學#18|創造JavaScript物件(Objects)


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


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


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


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


Javascript基礎練習(十七)-物件介紹


Javascript入門第十八課-創造物件


搞不懂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; //不能有空格

 

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

 

abstractbooleanbytecharclassconstdebuggerdoubleenumexportextendsfinalfloatgoto

 

implementsimportintinterfacelongnativepackageprivateprotectedpublicshortstaticsupersynchronizedthrowstransientvolatile

 

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

 

1 var A = 250;

 

2 var a = 888;

 

 

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


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


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


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


Javascript基礎練習(十八)-創造物件


想要成功搞定網頁前端,就要掌握好JavaScript!


Javascript初學者課程(17)-物件介紹

是什麼原因讓Python再度蟬聯熱門程式語言第一名??

是什麼原因讓Python再度蟬聯熱門程式語言第一名??
是什麼原因讓Python再度蟬聯熱門程式語言第一名??

Python再度成為熱門程式語言,到底是什麼原因讓它這麼夯?

2019 默默地進入了尾聲了,而 IEEE 也在此刻推出了今年最受歡迎的程式語言排行榜。不管你已經是寫程式高手,或者只是熱衷科技的一般人,生活在科技的浪潮中的我們,一起來看看到底是什麼程式語言建構了我們所知的科技世界吧!


▲ IEEE 2019 程式語言排行榜:Python 蟬連最熱門語言之首

今年的程式語言排行榜與以往不同, IEEE 剔除的一些已經不合時宜的評判標準,並且加重了每個語言在職場上的使用需求權重,讓程式語言排行更貼近現代的就業潮流。其判斷數據則來自於 Google、Twitter、GitHub、Stack Overflow、Reddit、Hacker News、CareerBuilder 等等科技大佬,讓這個排名更具公信力。

不過即使評判的標準有所改變, Python 的熱潮依舊氣勢難擋。在所有分項目中都名列榜首的 Python,獲勝的關鍵在於他擁有大量的函式庫可供應用。尤其是在近年蓬勃發展的「人工智慧」領域中, Python 最令人熟知的函式庫 Keras更為人工智慧領域,尤其是「深度學習」貢獻不少,其中 Keras 提供的 TensorFlow、CNTKTheano 深度學習框架的介面和工具包正是工程師們必備的武器。

人工智慧的興起也是近年有意轉職的工程師們持續關注的話題,在 GitHub 問卷「你對哪項技術或技能最感興趣?」中,「人工智慧」排名第一,緊跟在後的才是「使用者體驗」以及「區塊鏈」。 GitHub 更提及 Python是人工智慧領域中工程師們的最愛,這也不難理解為什麼 Python 的熱潮會持續不退,甚至擊敗 Java 以及 C 語言等流行多年的語言了!

當然,人工智慧也並非 Python 的唯一應用方向,在數據分析領域或應用程式開發都擁有不錯的發展,而不同於其他語言,簡潔的程式碼以及易讀易懂的語法更使他擺脫了程式語言艱澀難學的評價。正是 Python 可靈活運用卻又好上手的特性,讓他成為初學者炙手可熱的選擇!

而緊緊排在 Python之後的程式語言則是 Java、C語言、C++ 等長年與 Python 爭奪冠軍的熱門程式語言。僅管 IEEE 調整了評判的指標,但這些語言與 Python 的差距依然越來越大。Java 是 15 年以來最多人使用的程式語言,帶著他強大的可移植性、可擴展性成為最多企業公司的開發語言,更建立了龐大的使用社群,是個含金量極高的程式語言。

但是相較於 Python, Java 的語法少了些可閱讀性,編程上也不如 Python 那樣簡潔有力,對於初學者是個不易親近的程式語言。而曾經紅極一時的 R 語言目前排名第五,儘管沒有像其他語言如此炙手可熱,但由於大數據產業的普遍應用,以及相對於其他語言的專業性較高, R 語言在榜上依然擁有一席之地,對於統計領域的朋友是個不錯的選擇。

在第十名以外,也有些值得一提的語言,例如位在第 11 位的 Arduino 以及第 12 位的 HTML/CSS。有些人可能會抱怨他們不算真正的程式語言,Arduino 其實是某種語言執行的一系列硬體平台名稱,但 IEEE表示對此他們秉持著實用主義的原則:在遇到程式語言的問題時,人們很常在 Google 搜尋中鍵入「Arduino 程式⋯⋯寫法」而不是其他程式語言的名字。

藉由 Arduino 作為評比對象,是有助於更精確統計此種程式語言的使用現況的,同時也可以避免許多使用數據上的遺漏。對於 HTML/CSS 的評論,因為缺乏了分支以及迴圈的功能,許多人根本不把他們當成是程式語言。但由於 HTML/CSS 在開發者中的普遍使用,甚至使他佔據了數以十億計的伺服器空間,在這樣的觀點下,IEEE 自然也認為他是現代社會中不可或缺的語言。

IEEE 也提及比較程式語言優劣時的難處,畢竟沒有任何人能夠學會所有的程式語言,並客觀比較哪種語言最強大,而程式語言之間也像個大家族,有些血緣十分相近,而有些卻相差十萬八千里,連使用的目的也可能毫無相關。所以其實並不存在所謂「最好的程式語言」,想要選擇真正適合你的程式語言,依然需要考量自己想要鑽研的領域以及應用方向。也基於這一點,在 IEEE 的可互動頁面上,使用者可以自己調整每項評分項目權重,讓使用者更貼近的了解最適合自己的程式語言。

 

 

 

 

 

推薦文章:
只會用PS就落伍了!Python畫出皮卡丘才夠屌!


想要自學Python?首先你要先懂它是誰!


Python與Java名字由來超有趣?看完你就知道了…


SEO前,我們該做什麼?(上)先找出你的競爭者!


人工智慧微軟Suphx又解新成就(1)創日本麻將最高紀錄


網路行銷七大撇步馬上告訴你(一)


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

Javascript初學者課程(6)-邏輯運算子應用

Javascript初學者課程(6)-邏輯運算子應用
Javascript初學者課程(6)-邏輯運算子應用

本日的JavaScript教學就是要教你正確應用邏輯運算子哦!

邏輯運算子

JavaScript教學裡,其中的邏輯運算子,又稱為「布林運算字(Booleen Operators)」,是可以用來評估表達式,並且回傳 true 或是 false。

邏輯運算子 敘述
&& and 運算子:若兩個運算元為真,則回傳「ture」
|| or 運算子:若其中一個運算元為真,則回傳「ture」
! not 運算子:若運算元不為真,則回傳「ture」

See the Pen 邏輯運算子|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.上表中的JavaScript 運算子,範例如下所示,前兩個分別為「and 運算子」、「or 運算子」連接兩個布林表達式,最後一個為「not 運算子」接一個布林表達式。

條件運算子

也有一種 JavaScript 的邏輯運算子稱為「條件運算子」,它會根據指定的條件而指派一個值給一個變數,寫法如下:

 variable = (什麼樣的條件) ? 第一個值:第二個值

範例如下所示:

 

See the Pen 條件運算子|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

在以上例子中,假設變數 age 的值小於 18 的話,則變數 isAdult 的值將為「未滿18不得入場」,若變數 age 的值為 18 以上的話,則變數 isAdult 的值將為「18歲以上可以入場」。

 

 

 

 

 

 

 

推薦閱讀:
Javascript初學者課程(7)-條件式應用


Javascript初學者課程(1)-如何在網頁中嵌入?


Javascript初學者課程(2)-變數教學


Javascript初學者課程(3)-資料類型應用


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


前端工程師必備「Emmet」基礎教學(1)


再也不用為了回收分類發愁了!!交給人工智慧就對了!!


Python與R語言誰是贏家?盤點5個即將消失的程式語言(上)

Javascript初學者課程(5)-賦值運算子應用

Javascript初學者課程(5)-賦值運算子應用
Javascript初學者課程(5)-賦值運算子應用

本日的JavaScript教學就是要教你正確應用賦值運算子哦!

賦值運算子

JavaScript教學中,你會發現到JavaScript 中的賦值運算子,其賦值運算符號是「=」。第一次接觸程式碼的人可能會以為它是「等於」,其實並非如此。它實際上意思是指把右邊表達式的值賦給左邊的運算數。

JavaScript賦值運算子 敘述 範例
x = y x = y
+= x += y x = x + y
-= x -= y x = x – y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

你可以在JavaScript 中的同一行中,使用多種運算子,如在下面例子所示:

See the Pen 賦值運算子|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

你也可以運用多種變數,例子如下:

See the Pen Addition-2|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

推薦閱讀:
Javascript初學者課程(6)-邏輯運算子應用


Javascript初學者課程(1)-如何在網頁中嵌入?


Javascript初學者課程(2)-變數教學


電影迷工程師分得出片中的Python,Java嗎?(上)


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


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


日本研發的人工智慧機器人,真的能成為完美人妻?(上)

Javascript初學者課程(4)-數學運算子應用

Javascript初學者課程(4)-數學運算子應用
Javascript初學者課程(4)-數學運算子應用

本日的JavaScript教學就是要教你正確應用數學運算子哦!

數學運算子

JavaScript教學中的數學運算子,其作用是對數字(文字的形式或是變數的形式)進行函式運算。

運算子 敘述 範例
+ 加號 1 + 1 = 2
減號 2 – 1 = 1
* 乘號 2 * 3 = 6
/ 除號 10 / 2 = 5
減去 var a = 10; a–; Now a =9
% 餘數 20 % 3 = 2
++ 遞增 var a = 10; a++; Now a =10
遞減 var a = 10; a–; Now a =9

從下面例子中,你可以看出它是利用加號運算子來決定兩個數的和:

See the Pen Addition|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

你也可以運用多種變數,例子如下:

See the Pen Addition-2|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

承第一個例子,假如我們把「var x = 20 + 30」使用字串表示,變成「var x = “20 + 30″」的話,答案就不會是 20 + 30 的和,而是以字串形式呈現如下:

See the Pen Addition-string|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

減、乘、除運算子

四則運算中,除了上述介紹的加號運算子外,JavaScript 的減、乘、除運算子範例如下所示:

See the Pen 減、成、除運算子|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

遞增與遞減運算子

JavaScript 的遞增運算子「++」把數值加一,至於運算元的前後,意義各不相同:要是置於運算元的前方,則回傳被遞增的值;要是至於運算元的後方,則回傳原值,然後才遞增運算子。這樣解釋看似模糊,請見範例如下:

把遞增運算子放在運算元「y」前方的例子:

See the Pen 遞增運算子++var|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

把遞增運算子放在運算元「y」後方的例子:

See the Pen 遞增運算子var++|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

同理可證,遞減運算子「–」則是把數值減一,於運算元的前方,則回傳被遞減的值;要是至於運算元的後方,則回傳原值,然後才遞減運算子,範例如下:

把遞減運算子放在運算元「y」前方的例子:

See the Pen 遞減運算子–var|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

把遞減運算子放在運算元「y」後方的例子:

See the Pen 遞減運算子var–|Math Operator|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

 

推薦文章:
Javascript初學者課程(5)-賦值運算子應用


Javascript初學者課程(6)-邏輯運算子應用


Javascript初學者課程(1)-如何在網頁中嵌入?


控制Python的結構這邊告訴你(H)


AI 人工智慧竟是中美貿易戰的關鍵!(上)


前端工程師必備HTML5入門課程:SVG簡介


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

 

Javascript初學者課程(3)-資料類型應用

Javascript初學者課程(3)-資料類型應用
Javascript初學者課程(3)-資料類型應用

本日的JavaScript教學就是要教你正確應用資料類型哦!

資料類型

「資料類型(Data Types)」是關於一個可以運行的程式中的值的種類。JavaScript 變數可以支援各式各樣的資料類型,例如數字(類型)、字串(類型)、陣列(類型)等。

不同於其他的程式語言,JavaScript 不會特別因「不同的數值類型(如整數、數值長短、浮點等)」而賦予不同的定義。

JavaScript教學中的數值,是可以帶小數點的或是整數的形式呈現的。

See the Pen Data Type-1 by Tedutw (@Tedutw) on CodePen.

浮點數

JavaScript的數字可以有小數點,如下例所示:

See the Pen Float|Data Value|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

字串(Strings)

JavaScript「字串(Strings)」常常被用以承裝、處理文字。

一個字串可以是引號中的任何文字,這對引號可以使用單引號或是雙引號,如下範例:

var name = 'Márquez';
var text = "His name is Marc Márquez";

你可以在引號中,再加入引號。如單引號中加入雙引號、雙引號中放置單引號,只要兩種引號不要一樣就可以了。

var text = "His name is 'Marc Márquez'";
var text = 'and his opponent's name is "Valentino Rossi"';

承上例,除了使用不同樣式的引號外,我們還可以使用反斜杠(\),如下所示:

var text = "His name is \"Marc Márquez\"";
var text = 'and his opponent's name is \'Valentino Rossi\';

布林值(Booleans)

JavaScript布林值(Booleans)」中,我們可以擁有一到兩個值:不是 true 就是 false。

Booleans 適用於當你需要一個資料類型,而該資料類型又只有兩個值(如「是或不是」、「對或錯」)的場合時。範例如下:

See the Pen Booleans|Data Value|JavaScript Tutorial by Tedutw (@Tedutw) on CodePen.

 

 

 

 

 

推薦文章:
Javascript初學者課程(4)-數學運算子應用


Javascript初學者課程(5)-賦值運算子應用


Javascript初學者課程(6)-邏輯運算子應用


前端工程師必備RWD概念:行動設備優先的設計考量


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


前端工程師一定都認識的標籤們,今天就雙手奉上了!(上)


2019最熱門的前十大程式語言, 給初學者的你一條明燈!

Javascript初學者課程(2)-變數教學

Javascript初學者課程(2)-變數教學
Javascript初學者課程(2)-變數教學

本日的JavaScript教學就是要帶你認識它的變數哦!

變數

一般來說,「變數(Variables)」是用來承裝資料數值的容器。在同一程式中,變數的值是可以改變的。

JavaScript 中,以「var」來宣告變數。寫法如下所示:

var x = 777;

在上述例子中,數值 777 被指定給變數 x。

JavaScript 對於字體的大小寫是敏感的,大小寫被視為不同的變數,例如變數「Name」與「name」就是被視為不同的變數哦。

等號

JavaScript教學中,等號 (=) 被稱作「分配」運算子,而不是「等於」運算子。

例如,「x = y」就是「把數值 y 分配給 x」,而不是「y 等於 x」。

使用變數

現在,我們將一個值「777」分配給一個變數「x」,並將其輸出。程式碼與結果如下所示:

See the Pen var.js by Tedutw (@Tedutw) on CodePen.

為變數命名

JavaScript 中的變數名稱,對於字體的大小寫是敏感的,大小寫被視為不同的變數。如下例,我們將 x 由小寫改為大寫,程式碼與結果如下所示:

var x = 100;
document.write(X);

See the Pen Naming Variables by Tedutw (@Tedutw) on CodePen.

因為大小寫不同的緣故,所以 x 與 X 被判定為不同的變數。因此上面的程式碼並沒有產出任何的結果。

JavaScript 變數命名原則:

  • 命名的第一個字,必須是英文字母、底線(_)或是貨幣符號($)。後續的字可以是英文字母、數字(注意:數字不能作為第一個字)、底線或是貨幣符號($)
  • 變數名稱不能包含一個算數或是邏輯運算子,像是加(+)減(-)乘(*)除(/)的的記號都不能用。注意:連接線(-)會被視為減號,因此命名中也不能含連接線。)
  • 變數名稱不能包含特殊符號,例如「my#num」、「num%」等。
  • 任何的 JavaScript 名稱都不能含有空白字元。
  • 以下圖片為「JavaScript 保留字」一覽表,表中的任何字都不能用於命名變數。

 

 
 
 

 

 

 

 

 

 

推薦文章:
Javascript初學者課程(3)-資料類型應用


Javascript初學者課程(4)-數學運算子應用


Javascript初學者課程(5)-賦值運算子應用


Photoshop一學就會的萬用技能!-如何毛髮去背?


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


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


AI人工智慧世代即將來臨,準備好這四種能力就不怕被取代!!

 

Javascript初學者課程(1)-如何在網頁中嵌入?

Javascript初學者課程(1)-如何在網頁中嵌入?
Javascript初學者課程(1)-如何在網頁中嵌入?

本日的JavaScript教學就是要教你如何把它應用在網頁中哦!

JavaScript 簡介

JavaScript 可說是目前最普遍的程式語言之一,一般常用於網頁前端開發。JavaScript 不但可以為網頁添增互動元素、進行數據處理,還有創建各種應用程式(行動裝置 App、桌上型電腦的應用程式、遊戲等等。)

就跟著JavaScript教學一起來寫出你的第一個 JavaScript 程式!

首先,讓我們一起來使用 JavaScript 寫出第一支程式:讓瀏覽器上顯示「Hello World!」字樣,程式碼如下:

See the Pen My first JavaScript by Tedutw (@Tedutw) on CodePen.

由以上程式碼可知:函數「document.write()」可寫入字串在 HTML 檔案中。此功能可用於編寫文字檔案以及 HTML 檔。

如何在網頁中寫入 JavaScript 腳本

我們可以在 HTML 檔中,寫入任意數量的腳本(script,JavaScript 的別稱,也可以「.js」稱呼)。通常,腳本標籤「<script>…</script>」會放在 HTML 的 <head> 與 </head> 中間:

<html>
   <head>
     <script>
     </script>
   </head>
   <body>
   </body>
</html>

嵌入外部的 JavaScript

除了上述可直接在 HTML 檔案中寫入 JavaScript 腳本之外,我們還可以嵌入外部現成的 JavaScript 檔案。這類現成的 JavaScript 的檔案類型為 .js 檔。嵌入外部檔的語法為「<script src=”檔案名稱”>…</script>」,是可以放在<head>…</head>標籤或是<body>…</body>標籤之內。舉例來說,現在我們要在 HTML 中嵌入外部的 .js 檔「demo.js」,寫法如下所示:

<html>
   <head>
     <script src="demo.js"> </script>
   </head>
   <body>
   </body>
</html>

至於外部現成的 .js 檔,檔中文字就不能包含<script>…</script>標籤了。承上例,這個外部的 .js 檔「demo.js」內容如下:

alert("Welcome to my page!");

則執行結果如下所示:

 

從外部置入 .js 檔的好處比在 HTML 檔內寫入 JavaScript 腳本還多,像是:

1. HTML 原始碼與 JavaScript 分開放置,較好閱讀、維護

2. 當JavaScript檔案被 cache 過後,網頁載入速度就會更快

JavaScript 中加入註解的方法

有時在程式碼中,我們會加入註解,並告知該程式碼的作用。在「/ *」和「* /」之間編寫的所有內容,都將被視為註解,可以單行也可以多行。如下所示:

<script>
    /* 這個code
    會製造出一個
    上面寫著
    「Welcome to my page!」
    的訊息對話框 */
       alert("Welcome to my page!");
</script>

 

 

 

 

推薦文章:
Javascript初學者課程(2)-變數教學


Javascript初學者課程(3)-資料類型應用


Javascript初學者課程(4)-數學運算子應用


馬斯克證實自立的人工智慧公司OpenAI,什麼原因讓他鐵了心?


受不了電子書這麼沒有翻書的感覺!但HTML5教學救了我!


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


網路行銷課程降低你的出錯率增加你的曝光率