我要學會 JS(一)：JavaScript 簡介

Noob Tsai -

JavaScript 是個優質的語言，當年開發它的工程師只花了十天就設計完了，過了二十幾年在前端仍有不可或缺的地位。這系列的文章會帶大家入門 JavaScript，望大家早日入坑，以一個語言就能寫完前端、後端、資料分析、機器學習、視覺化等各式各樣的作品。

這篇先試著釐清一些概念，然後帶一點基礎語法。就先不談什麼 Babel、ES6 之類的 buzzwords，所以不會講太深。

這系列文章不會講太複雜的程式，但會希望你至少寫過其他語言，對選擇結構（if-else）、迴圈（loop）等概念不陌生。

JavaScript 和 Java 是什麼關係？

狗跟熱狗是什麼關係、牛跟牛蒡是什麼關係，Java 跟 JavaScript 大概就是什麼關係。

在很早期，這個語言叫做 Mocha，後來又改名叫做 LiveScript；當時 Java 語言掀起一股熱潮，所以為了讓這個語言感覺一樣潮，就臨時把名字改叫 JavaScript，後來大家就搞不清楚這兩個語言了。實際上，這兩個語言完全沒有關係，寫法也完全不同。

JavaScript 是一種物件導向語言嗎？

JavaScript 是個特殊的語言，嚴格說起來它是 Prototype-based 的語言，但它寫起來有 FP（Functional Programming）的味道，卻也可以「假裝」成物件導向語言（為什麼是假裝，後面會再提到）。總之，如果你想要生出一個類別（class）再 new 一個實體出來，在 JS 裡面是做得到的。

JavaScript 只能在瀏覽器執行嗎？

在早期 JavaScript 是為了在瀏覽器裡面而開發的，不過後來 JavaScript 被應用在很多平臺，現在大多數的人使用 Node.js 這個環境（runtime）來執行後端程式。所以，JS 在前端、後端都可以使用。

基本語法

在一開始，我們先不要管前端環境還是後端環境，也先不要安裝太複雜的環境跟工具，先到 JSBin 這個網站上練習一點基礎語法吧。

範例中的程式碼是：

const a = 1;
const b = 2;

console.log('a+b=' + (a+b));
console.log('我要學會 JS(一)：JavaScript 簡介');
console.log('https://noob.tw/js-introduction');

而你會在輸出看到：

a+b=3
我要學會 JS(一)：JavaScript 簡介
https://noob.tw/js-introduction

由於 JavaScript 是直譯式語言，所以不需要另外生出一個 main 之類的進入點，原則上會依序由上往下開始執行。

變數宣告

在 JavaScript 中宣告變數時不須指定型態。如果你的變數會改變，請以 let 宣告；如果你的變數不會改變，請以 const 宣告。

const name = 'Noob';

for(let i=0;i<2;i++){
    console.log(name); // 輸出 'Noob'
}

而變數在 JavaScript 中有區域的概念：

const name = 'Noob';

function test(){
    const color = 'red';
}

console.log(name); // 輸出 'Noob'
console.log(color); // 輸出 undefined

由於 color 被宣告在 function test() 的區塊中，所以在全域部分不會有 color 的值，為 undefined。

你可能會在一些地方學到，JavaScript 用 var 來宣告變數，但現在已不鼓勵使用。未來會再提到原因。

物件與陣列

JavaScript 的陣列大概長這樣：

const lottery = [28, 24, 31, 47, 2, 4, 19];

而物件則是：

const apple = {
    color: 'red',
    isSweet: true
};

物件裡可以包含物件，也可以包含陣列：

const family = {
    dad: 'Bob',
    mom: 'Cathy',
    children: ['Peter', 'Jane']
};

當然陣列也可以包含物件：

const families = [
    {
        dad: 'Bob',
        mom: 'Cathy',
        children: ['Peter', 'Jane']
    },
    {
        dad: 'Sam',
        mom: 'Tatjana'
    }
]

如果你已經熟悉 JSON 格式，你可能會覺得這些東西很面熟，事實上，JSON 的全名就是 JavaScript Object Notation，目前已經相當通用。搞懂 JavaScript Object/Array，對未來資料處理也能更加彈性運用。

第一篇先到這邊，下一篇來講運算子、選擇結構和函式。

我要學會 JS 目錄