Javascript 學習日記｜Iris 程式小白 ＃3

Javascript在紅什麼？快跟著網頁設計小白🙆‍♀一起速速了解JS吧！

這篇文章專給…

• 彷彿聽過，對JS似曾相似，但從來沒有真正了解
• 愛用Google analytics & inbound marketing (Hubspot) 的行銷人
• 覺得跟前端工程師錯頻，想了解一下他們星球的語言
• 想學互動式網頁設計，創建屬於自己的第一個網頁天堂

📌 這次我們的起手式，JS編輯器的初認識🙌

講到「編輯器」我們必然會談到它對應的概念「編譯器」

所以，到底什麼是「編輯器」，又什麼是「編譯器」呢？

長話短說，編輯器就是個專門編輯程式的Word

而編譯器則是轉化你所編輯的程式碼，將之翻譯成機器能理解的低端語言

那現成編輯器用誰好呢？ 誰好用呢？

這我們繼續看下去😎

Top 1: Sublime Text

Sublime Text 是個主打靈活、反應快速的文本（或說代碼）編輯器。除了靈活度和機動性，它的廣泛性也值得討論，因為 ST 擁有大量且實用的外掛程式，使用者可以方便地運用、編輯、撰寫，功能可謂包山包海。最後，介面設計上 ST 很符合直覺思維，它擁有側邊欄、記憶功能等功能，且版面配置優美，如此一來能輔助開發者流暢編輯。

點此傳送到Sublime Text官網進行下載

Top 2: Visual Studio Code

由微軟 (Microsoft) 開發的 VS Code 之與 Sublime Text 最大的優勢就是它開源 (open-source) 的特性，只要非商業用途，每個人皆可以取用，也可以由接續開發者不斷更新、增進新功能。因為它開源的特性，造就了新版本頻繁地推出，使編寫代碼的環境更加活絡。

點此傳送到 Visual Studio Code 官網進行下載

Top 3: Atom

Atom是 Github開源的文本編輯器，設計簡潔，檔案採樹狀分層分支列表，使用方便。此外，Atom 操作上相較前兩者更容易，且擁有開放原始碼、原生Git，這些誘因都使 Atom 能在編輯器市場中穩住陣腳。

點此傳送到 Atom 官網進行下載

🎥 插播 💿 不知道身為程式小小白🐥的你們 有沒有聽過IDE？

如果上Google搜尋，你會知道IDE stands for “Integrated Development Environment” 中文譯作「整合開發環境」

廣義地說，IDE就是一個程式撰寫外掛環境，裡面包含了編輯器 (Editor)、編譯器 (Complier)、連結器 (Linker)、除錯器 (Debugger) 等功能。小小白們🐥可以把IDE想成一家沙漠中的咖啡廳，咖啡廳裡有沁涼飲品、超強冷氣、king-size 沙發、檀木長桌、落地玻璃，儼然就是一個好到不能再好的 all-in-one 避暑環境（滿足你的各種需求），讓你可以免於自己找水源、搧風解躁，直接享受無憂無慮辦事 or 耍廢。

🙋‍♀小反思：聽完編輯器和 IDE 的介紹，小小白們🐥 覺得兩者差在哪裡呢？歡迎底下留言～（留了我就會親自解答唷！

📌 JS編輯器種類這麼多，資料類型想必多吧… 🤔

這麼想的人就大錯特錯了

其實JS的資料型態 (data types) 沒有想像的多，這裡就來介紹常見的2大類

Type 1: 基本基料型態 (Primitive data types) 

1. 數值 Number

    就是…數字😂

2. 字串 String

    非數字的英文字母，記得用’單引號’或”雙引號”包住字串。

3. 布林值 Boolean

     即為我們從小到大認識的「是與非」 ，只有 True & False 兩者。

4. 空值 Null

     集合裡空空如也🎶

5. 未定義 Undefined。

    還沒定義 or 還未指定意義

6. 符號 Symbol

    用來表示獨一無二 (unique) 的值。

Type 2: 複合基料型態 (Composite data types) 

1. 陣列 Array

    陣列用以儲存多筆資料。

2. 物件 Object

    Type 1 基本資料型態除外的都是物件（別忘了JS是物件導向唷😉！）

🦖 恐龍君小補充：JS是一種「動態型別語言 (dynamically typed language)」或弱型別語言，代表在寫程式時不需要事先宣告型別，執行時若要檢查類別能由typeof來找出，且如果想變更類別可直接進行更換，無需顧慮中途變換所導致的錯誤。

📌 精通資料類型後，我們來看看函式 & 函式的觀念/ 應用吧～ 😎

（上次有介紹過應該還有一點印象😝）

「函式」就是鼎鼎大名的 function，是組成JS的基本要素之一

亦可以將函式稱作「函數」、「功能」，會有此差異僅為翻譯因素

一段函數的產生需要透過定義，之後才能由呼叫找出特定語法（做使用）

舉個簡單的例子：

function additionByIris(x, y) {

       return x + y  

}

在這個例子之中，我們所做的第一步是宣告變數。藉由 function 這個關鍵字來告訴機器有一個名叫「additionByIris」（即為 function name）的函式，而函式additionByIris 之中包含了兩個參數，分別為 x 和 y，由逗點分割，承裝在中括號中。最後我們看到大括號中的物件即為封裝在該函式中的程式碼。所以說，經過今天定義完「additionByIris 函式」 後，之後如果想要拿兩個數做加總， 只需要透過定義 x 和 y 就可以迅速求出值👍

這樣說明大家有更了解JS的運作嗎～  如果覺得獲益良多歡迎繼續關注我們！

有任何問題都不吝指教，大家一起學習、一起進步喲🗣

那～我們下禮拜見嘍！👋👋👋

references 參考資料：

1. https://makerpro.cc/2015/08/what-is-ide/
2. https://www.itread01.com/content/1545381007.html
3. https://www.fooish.com/javascript/data-types.html
4. https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Functions
5. https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part3/function_scope.html
6. https://free.com.tw/github-atom/
7. https://www.fooish.com/javascript/function.html
8. https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part3/datatype.html