JavaScript初階課程-分辨遞增和遞減運算子

JavaScript初階課程-分辨遞增和遞減運算子
JavaScript初階課程-分辨遞增和遞減運算子

想了解JavaScript的基礎嗎?你可以先從分辨遞增和遞減運算子這邊著手哦!

 

目錄

1. 遞增運算子(++)

2. 遞減運算子(–)

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將於四月停用展示型購物廣告


是哪十個Python函式庫榮登2020年最好用?(一)


上對PYTHON課程就能無痛轉行?!文科生成功當上工程師!


人工智慧”MuZero”超強大,下棋.玩遊戲樣樣精!(上)

分不清JavaScript和Java嗎?它們竟然沒有關係?!

分不清JavaScript和Java嗎?它們竟然沒有關係?!
分不清JavaScript和Java嗎?它們竟然沒有關係?!

還是分不清處JavaScript和Java的差別?聽說它們名字雖像卻完全沒關係?!

JavaScript 與 Java 有關係嗎?JavaScript 的編年史

1992:ScripEase

一家稱作 Nombas 的公司開發嵌入式語言「Cmm」,後改名為「ScripEase」。之後出現可以嵌入在網頁的 CEnvi 版本

1995:從 LiveScript 改名為 JavaScript

Netscape (網景公司) 與昇陽科技聯手完成 Netscape Navigator 2.0 的腳本語言
「LiveScript」。之後因為「趕流行」而改名為「JavaScript」:因為在當時網景公司與昇陽科技組成的開發聯盟為了讓這門語言搭上當時正夯的 Java 程式語言這個「熱詞」,因此臨時將 LiveScript 改名為 JavaScript,但是這也成為日後大眾對於這門語言有許多誤解(好比說: 誤以為這門語言與 Java 有關)的原因之一。

1996:制定統一 JavaScript 標準

微軟在 IE 3.0 內發布 「JScript」,是為 JavaScript 的複製版。此時有三種版本的 JavaScript,一為 Netscapt Navigator 3.0 中的 JavaScript「本尊」、IE 中的 JScript 與前述 Nombas CEnvi 中的 ScriptEase。在同年 11 月,Netscape 決定將 JavaScript 提交給歐洲電腦製造商協會(ECMA)制定統一的 JavaScript 標準。

1997:發布第一版 ECMA-262

ECMA 發布 262 號標准文件(ECMA-262)的第一版,規定了瀏覽器腳本語言的標準,並且將這種語言稱為「ECMAScript」(因為當時只有 Netscape 才能合法的使用「JavaScript」這個名字)。

2009:Node.js 讓 JavaScript 朝後端發展

CommonJS 規範讓 JavaScript 朝伺服器端發展。Node.js 就是遵循 CommonJS 規範,可以直接使用 Sockets API 建立各種網路服務程式。

現狀

多虧了 Node.js,讓原本只能應用在前端(瀏覽器端)的 JavaScript 現在也可以應用在後端部分(伺服器端)。

JavaScript 有哪些特色?

  • 可以用於任何編輯器開發
  • 腳本不需要編譯,直接由 JavaScript 引擎「解釋(註:編輯一行就執行一行)」執行
  • 靈活的「弱型別語言」:變數可被賦予不同資料類型的值。
    強型別的語言遇到函式引數型別和實際叫用型別不合的情況,經常會直接出錯或編譯失敗;而弱型別的語言常常靈活地進行隱式轉換因應。
  • 基於原型(Prototype-Based)的物件導向語言
  • 可跨平台使用:Linux、Windows、MacOS、Android 等

不只是網頁開發:JavaScript 的應用

  • 前端(瀏覽器端)的網頁互動效果
  • APP 開發
  • 圖像使用者介面 (GUI)
  • 2D 繪圖、3D 建模(如 Three.js)
  • 網頁上實現虛擬實境(VR)與擴增實境(AR)
  • 創建網頁伺服器、操作資料庫等後端操作

JavaScript 的開發環境

  • 任何瀏覽器(IE、Google Chrome、Firefox、Safari、Opera 等)都自帶 JavaScript
  • APP 開發
  • 如何建置 JavaScript 的開發環境
    1. 瀏覽器端:自帶 JavaScript 解釋器,不需要另外建置開發環境。
    2. 伺服器端:至 Node.js 下載 Node.js 後,使用終端機(iOS) 或是命令提示字元(Windows)輸入「node -v」查看電腦上 Node.js 的版本已確認是否安裝。

今天的 JavaScript:熱門程式語言榜冠軍常客

根據 RedMonk 發表 2020 年第 3 季的熱門語言程式排名,儘管第二名 Python 之後的語言排行仍有變動之外,JavaScript 卻始終蟬聯冠軍寶座。有興趣建議可以參考下列文章:

推薦閱讀:

而 RedMonk 熱門程式語言排行榜是結合 GitHub 及 Stack Overflow 平台而綜合出的排名結果:GitHub 能反映程式語言實際被使用的狀況;而 Stack Overflow 則顯示程式語言的討論熱度。RedMonk 綜合以上兩者,歸納出排行,可以作為未來程式語言趨勢的參考哦。

 

 

 

 

 

 

推薦文章:
用說的就能寫程式!人工智慧替手傷工程師開發語音程式工具


Google 12 月更新演算法!SEO今年排名最大洗牌


Google 在 Search Console 中啟用新的檢索統計報告


Python與R語言之戰鹿死誰手?盤點5個即將消失的程式語言!


心靈雞湯竟然是人工智慧操手的?!還有什麼是它辦不到的!(上)


人工智慧當法官?!愛沙尼亞司法領域做到了!(上)


人工智慧藥櫃,守護你我的用藥安全!(上)

前端工程師之Javascript基礎練習(二十二)-數學物件

前端工程師之Javascript基礎練習(二十二)-數學物件
前端工程師之Javascript基礎練習(二十二)-數學物件

關於前端工程師愛用的JavaScript,今天就帶你認識何謂數學物件哦!

 

Math物件的屬性

前端工程師而言,Math 是 JavaScript 的原生物件,可以進行多種數學運算。該物件並非用函式建構式來生成,所有的屬性和方法都必須在 Math 物件上呼叫。

Math 物件包含多種屬性,在HTML中表示如下表:

    1. 屬性
    2. 描述
    1. 歐拉常數,是自然對數函數的底數,約為 2.718。
    1. LN2
    2. 2 的自然對數
    1. LN10
    2. 10 的自然對數
    1. LOG2E
    2. 以 2 為底的歐拉常數(E),其值約為 1.442。
    1. LOG10E
    2. 以 10 為底的歐拉常數(E),其值約為 0.434。
    1. PI
    2. 圓周率,其值約為 3.14159
    1. SQRT2
    2. 2 的平方根,其值約為 2.414
    1. SQRT1_2
    2. 1/2 的平方根,其值約為 0.707

 

以上 Math 物件的屬性,範例如下:

See the Pen The Math object by Tedutw (@Tedutw) on CodePen.

Math物件的方法

Math 物件除了有許多屬性外,也有許多方法,列表如下:

    1. 方法
    2. 描述
    1. abs(x)
    2. 不用懷疑,就是回傳x的絕對值
    1. acos(x)
    2. 回傳x的反餘弦(三角函數,數學符號是arccos)
    1. asin(x)
    2. 回傳x的反正弦(反三角函數,數學符號是arcsin)
    1. atan(x)
    2. 回傳x的反正切(反三角函數,數學符號是arctan)
    1. ceil(x)
    2. 回傳離x最近的整數:若x為浮點數則向上取整數;x為整數擇取x本身
    1. cos(x)
    2. 回傳x的餘弦(三角函數,數學符號是cos)
    1. exp(x)
    2. 回傳值為以x指數的E
    1. floor(x)
    2. 回傳離x最近的整數:若x為浮點數則向下取整數;x為整數擇取x本身
    1. log(x)
    2. 回傳x的自然對數
    1. max(x,y,z…,n)
    2. 回傳最大值
    1. min(x,y,z…,n)
    2. 回傳最小值
    1. pow(x,y)
    2. 回傳值為x的y次方
    1. random()
    2. 隨機回傳0與1之間的任一數
    1. sin(x)
    2. 回傳x的正弦(三角函數,數學符號是sin)
    1. sqrt(x)
    2. 回傳值為x的平方根
    1. tan(x)
    2. 回傳x的正切(三角函數,數學符號是tan)

 

以上 Math 物件的方法,範例如下(不包含三角函數):

See the Pen The Math object-method by Tedutw (@Tedutw) on CodePen.

綜合練習

讓我們來撰寫一個前端工程師常用的JavaScript 程式:省先彈出一個視窗,要求使用者輸入數字。使用者輸入數字後,即會出現警示視窗,顯示該數字的平方根。

var x = prompt("請輸入一個數字","");
var answer = Math.sqrt(x);
alert(x+" 的平方根是 "+ answer);

執行結果如下:

此時我們在HTML中輸入「64」,則會有以下結果:

JavaScript 的數學物件就介紹到此。若能善用數學物件,則可減省時間。不必自己寫函數。下一章我們將介紹另一個 JavaScript 的原生物件——日期物件。

 

 

 

 

 

 

推薦文章:
達內教育評價:別再抱怨不景氣了!高中生靠SEM接案創業每月額外收入7萬


痛失英才!台灣人工智慧學校執行長陳昇瑋辭世


用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!


人生是自己的, 達內教育評價要靠自己來體驗!


Javascript入門第十九課-方法


Javascript變量命名不知道?別說你是前端工程師!


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

 

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)-物件介紹

Javascript初學者課程(18)-創造物件

Javascript初學者課程(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 的物件名稱與屬性名稱分別列表如下

  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初學者課程(17)-物件介紹


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


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


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


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


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


Javascript基礎練習(十六)-訊息框


Javascript入門第十五課-函式回傳

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

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

本日的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?


Javascript基礎練習(十四)-在函式中使用多重參數


Javascript入門第十三課-函式中的參數


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


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


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


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


Javascript初學者課程(16)-訊息框

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入門第五課-賦值運算子應用


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


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


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


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


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


Javascript基礎練習(四)-數學運算子應用

Javascript初學者課程(16)-訊息框

Javascript初學者課程(16)-訊息框
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("感謝您選擇繼續瀏覽我們的網頁!");

 

 

 

 

推薦文章:
Javascript初學者課程(1)-如何在網頁中嵌入?


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


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


前端工程師設定CSS背景的五種方法(一)背景固定模式設定


想與AI人工智慧競爭? 你必須擁有這四種能力!


還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!


程式課程選達內,美上市IT課程教育集團


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


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


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


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


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