Java課程是為了數位化的現在，Python課程是為了未來的人工智慧: JavaScript教學

顯示具有 JavaScript教學 標籤的文章。顯示所有文章

2021年4月6日星期二

JavaScript法寶-遞增,遞減運算子

JavaScript的法寶有哪些呢?還不知道遞增,遞減的運算子嗎?這就一起來了解一下吧!

JavaScript 的運算子「遞增（++）」和「遞減（–）」能對指定的數值進行「加1（遞增）」與「減 1（遞減）」的運算。

遞增運算子（++）

JavaScript 遞增運算子可以對數值進行「加1（遞增）」的運算。當放在運算元前方，就會先執行運算，因此得到的值是遞增過的值；若配置於後方則是先取值後運算，會先得到運算元本身的值後才加 1。如以下例子：

    var x = 10,y = 10;
    var a = ++x,b = y++;

    console.log(a,x);
    console.log(b,y);

前置運算會先完成遞增運算後再設值。因此 x 完成遞增運算結果為 11 後，再設值給變數 a。因此 a 的值為 11、x 的值也為 11；而後置運算會先設值後再完成遞增運算。因此 y 會先設值給 b 原本的值 10，再完成遞增運算。因此 b 的值為 10、x 的值為 11。

遞減運算子（–）

JavaScript 遞減運算子能對數值進行「減1（遞減）」的運算。當置於運算元前方，就會先執行運算，因此得到的值是遞減過的值；若配置於後方則是先取值後運算，會先得到運算元本身的值後才進行遞減運算。如以下例子：

    var x = 10,y = 10;
    var a = --x,b = y--;

    console.log(a,x);
    console.log(b,y);

前置運算會先完成遞減運算後再設值。因此 x 完成遞減運算結果為 9 後，再設值給變數 a。因此 a 的值為 9、x 的值也為 9；而後置運算會先設值後再完成遞增運算。因此 y 會先設值給 b 原本的值 10，再完成遞增運算。因此 b 的值為 10、x 的值為 9。

網站核心指標5月將成SEO排名因素!LCP,FID,CLS詳解與優化方式

SEO快訊-Google放寬Search Console網站使用體驗核心指標的標準

SEO快訊-Google 搜尋可能會更少顯示「精選摘要」

SEM快訊-Google Ads將於四月停用展示型購物廣告

Google全新搜尋功能竟讓SEO更複雜了!?

SEO法寶-關鍵字分類篇

SEO小教室開課中-冷門的長尾關鍵字篇

2020年3月26日星期四

Javascript入門必學21-陣列的方法與屬性

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

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

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

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

搞UI設計不可不知的心理小祕密!

JavaScript網頁前端技能不可少!

你不能不知JavaScript變數命名規範

2020年3月25日星期三

Javascript入門必學20-陣列(Array)

入門必學的Javascript陣列(Array),學起來吧!

陣列(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)

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

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

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

搞UI設計不可不知的心理小祕密!

JavaScript網頁前端技能不可少!

你不能不知JavaScript變數命名規範

2020年3月12日星期四

來看看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;

相關文章:

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

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

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

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

Javascript入門磚17-物件

Javascript入門必學18-創造物件

JavaScript掌握在手,網頁前端如神助!

2020年3月11日星期三

Javascript入門必學19-方法(Method)

入門必學的Javascript物件,學起來吧!

方法 (Method)

「方法 (Method)」在JavaScript 語言是屬於函式（Function）的一種，之前介紹的「函式（Function）」與「方法 (Method)」的差別是:「方法 (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.

2020年2月18日星期二

Javascript入門必學18-創造物件

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

物件：name；屬性：Valention Rossi
物件：nationality；屬性：Italy
物件：team；屬性：Monster Energy Yamaha MotoGP
物件：BikeNo；屬性：46

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

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

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

2020年2月17日星期一

Javascript入門必學17-物件

Javascript入門必學,初學者們別忘了去了解"物件"是什麼喔!

JavaScript的變數（variable）可被比喻成用來盛裝「值（value）」的容器。本篇介紹的「物件（objects）」就是變數（variable）的一種，可以承裝多個值（value）。
一個物件（objects）可以被比喻成一張列有多個值的清單，清單上每個物件的格式為「屬性:屬性值」。所有的屬性、屬性值都以冒號作為區隔，範例與說明(「//」開頭的橫行為說明文字) 如以下：

See the Pen JavaScript 17-Objects-1 by Tedutw (@Tedutw) on CodePen.

結論：JavaScript 的物件 Objects 就像是容器，能裝多個「有名字」的值。

物件屬性（object property）

在 JavaScript 中，要存取物件的屬性（object property），有兩種寫法：

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

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

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入門磚7條件式

Javascript入門必學8條件判斷式

Javascript入門教室9-for迴圈

2020年1月2日星期四

Javascript入門必學16三種訊息框

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("感謝您選擇繼續瀏覽我們的網頁！");
}

2019年12月26日星期四

Javascript入門必學15函式回傳

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.

訂閱：文章 (Atom)

2021年4月6日 星期二