生活必備咖啡因程式碼-店長Yui大小事

JavaScript教學小教室來啦!你知道遞增,遞減運算子嗎?快來學學吧!

JavaScript跟Java到底一不一樣啊?快看本篇文章一解你的困惑吧!
JavaScript 與 Java 有關係嗎？JavaScript 的編年史
1992：ScripEase
開發嵌入式語言「Cmm」是一家 名為Nombas 公司，後改名為「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 2020 第三季程式語言排名：JavaScript 仍是冠軍、Python 首度把 Java 踢出前兩名外！

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

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

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

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

用說的就能寫程式！人工智慧替手傷工程師開發語音程式工具

人工智慧臉部辨識不是人類的專利,連熊也可以喔!

Python教學時間-控制結構4運算子優先順序

在人工智慧眼中,貓原來是這樣的!?

Java 課程 讓他擺脫八年業務資歷,成功轉換跑道!

 

▲ Java 工程師蘇先生過去當了近8年的業務員

現任職於三Ｘ電腦－Java 工程師的蘇先生，不論是找 bug、或者是寫程式碼，都遊刃有餘！當工程師之前，蘇先生從事近 8 年的業務呢！後來他進修半年多的 Java 課程才順利轉換跑道。
很多人都說想賺大錢，就去當業務。因此八年多前，畢業於資管系、才擔任軟體工程師不久的蘇先生，就嘗試轉戰業務跑道。
擔任業務 7-8 年的期間，蘇先生見識的人情世故越來越多，想法更加成熟老練。若能擁有取代性低的技能、時間收入都穩定的職業，才能取得工作與生活的平衡。以下是他的轉職見證，相信蘇先生的建議可以激勵到許多想要改變現況的人：
我畢業於資訊管理系，雖曾擔任過軟體工程師一職，但不久後即轉戰業務跑道，不知不覺，就做了七年左右⋯⋯快八年了。
於是，我重新思索未來的職涯發展方向。考量到大環境的不確定性以及自身的生活等因素，最後還是決定重回軟體工程師行列。
大家都認為：我本身就出身於資管系，直接重操舊業就好啦！
但是但資訊科技日新月異，過去所學己不能適任於現今資訊人員的條件，而我選擇學習與突破！
我開始尋找適合自己的職前 Java 課程培訓機構，但一直找不到適合自己的學習方式與課程內容——直到遇到了達內教育的線上課程才有結果⋯⋯
有「即時解題」的線上課程 學習時間有彈性
達內教育的顧問們都很有耐性，透過她們的詳細解說，我了解他們線上平臺的授課模式是不同的——除了線上視訊可聽課之外，若遇到問題，還可以透過線上的小幫手即時發問，與專門的解題老師互動。等到疑難雜症解決後，再繼續看下一階段的線上課程。
透過「線上授課」與「即時解題老師」的雙師教學模式，我就可依據自己的強項、弱項，決定每個階段課程的學習方式與時間，大幅提昇學習效率。

▲ 達內教育的解題團隊

知名企業工程師直接授課 課程接軌業界需求
他們線上授課的老師也是現役業界的頂尖工程師們，都擁有豐富的實戰經驗。因此他們教學內容不僅豐富，更是符合業界需求！真的是有別於大多數補習班純粹為了考證照的學術導向課程。
這些老師由於是業界的精英，常常需要與主管、屬下等互動，因此表達思路也很清晰——即使說話帶一些口音，但是他說話的速度與邏輯都能讓我們聽得懂！因此我連未來實務工作時，如何與主管、人員甚至是跨部門溝通的撇步都不知不覺在聽課中學到了！
多人支援，學習不再是一個人的事

▲ 達內教育的學員輔導團隊

除此之外，達內教育的所有人員，都非常關心每位學員的學習階段，也不斷提醒學員有什麼加強的課程(免費課程)可以參加，也許這方面的積極度都比學員來的有熱忱，真是非常謝謝他們平日的幫忙。
適合求職者與想轉職者的學習方式
為了求職、轉職而進修一技之長，如何評估用心經營的培訓機構，除了人員服務，扎實的課程更是重要！
像是達內教育的 Java 課程，從一開始的基礎教學，到職前專案作品的開發，「不」再是傳統難懂的理論式教學，令人百思不得其解。
在這裏，每個階段課程的老師們都講解的淺顯易懂且清楚，也經常會提供小測驗讓學員練習。即使真的遇到不理解的地方，達內的老師們也是非常樂意去替學員解決疑問，並且超級速效！我不用再自己燒破腦也得不出解決方法，可以說是非常完整。
如今我也順利找到一間還不錯的公司與職務，這些都要感謝當初自己下的決定，與細心照顧學員的全體達內人員，感謝有你們！
 
相關文章:

程式開發工程師曝「只有國小畢業」！因為 Java 課程而求職順利

被愛貓叼回獵物嚇到！亞馬遜PM開發人工智慧貓門阻止貓帶回獵物

人工智慧替貓取名：萌、酷、黑色幽默、老司機式歪樓全都包

半途而廢、快活興奮劑⋯⋯AI人工智慧替甜點命名歪樓

人工智慧學習該用Python還是R語言呢?(上)

人工智慧開發,你會選擇Python還是R語言呢?(下)

從工地工人轉職Java軟體工程師,怎麼做到的!?

前端工程師 JavaScript 程式碼入門教學- 數學物件
 
Math物件的屬性

前端工程師 指出Math 是 JavaScript 的原生物件，它可進行多種數學運算。這個物件不是以函式建構式來產生，所有的屬性和方法都一定要在 Math 物件上呼叫。
Math 物件包含多種屬性，列舉如下表：
 

1. 屬性


2. 描述

1. Ｅ


2. 歐拉常數，是自然對數函數的底數，約為 2.718。

1. LN2


2. 2 的自然對數

1. LN10


2. 10 的自然對數

1. LOG2E


2. 以 2 為底的歐拉常數（Ｅ），其值約為 1.442。

1. LOG10E


2. 以 10 為底的歐拉常數（Ｅ），其值約為 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);
執行結果如下：
此時我們輸入「64」，則會有以下結果：
JavaScript 的數學物件就介紹到此。若能善用數學物件，則可減省時間。

HTML 不必自己寫函數。下一章我們將介紹另一個 JavaScript 的原生物件——日期物件。
相關文章:

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

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

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


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

Google的人工智慧眼鏡成為穿戴式裝置領頭羊(上)

人工智慧手機可防拍私密照是爸媽的小幫手(上)

人工智慧甩尾讓方程式冠軍車手恐怕要失業了(上)
 

前端工程師基礎篇
一、前端方向

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不藏私教學大公開-方法(Method)  

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不藏私教學大公開-方法(Method)  

JavaScript變數命名規範

JavaScript 程式碼入門教學-方法(Method)
方法 (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.
相關文章:
SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢！
44歲媽咪順利轉職網頁設計師, 家庭事業都得意
AI 甩尾技術勝 Ken Block！方程式冠軍車手嘆：要失業了
日推AI手機具「防拍裸照」功能！再拍人工智慧就跟你媽告狀

前端工程師一定要學習強大功能的JavaScript

JavaScript入門- Objects

JavaScript不藏私教學大公開-創造Objects
 

想要學會當今最火的JavaScript嗎?那你一定不能錯過本日的教學哦!(十八)