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 目錄