初學者必看 JavaScript 入門指南 - 卡哥小技倆 Carger Tips

文章最後更新於 2024 年 10 月 7 日

1. JavaScript 概述

1.1 定義與用途

JavaScript 是一種高級、解釋型、物件導向的編程語言，廣泛應用於網頁開發。它最初由 Brendan Eich 在 1995 年開發，目的是為了使網頁具備互動性。隨著時間的推移，JavaScript 已經不僅僅局限於客戶端腳本，現在也被用於伺服器端開發、移動應用開發及桌面應用程序等多個領域。

在網頁開發中，JavaScript 的角色主要是增強用戶體驗，通過操作 HTML 和 CSS 來實現動態效果。典型的用途包括：

表單驗證
動態內容更新
創建互動式圖形和遊戲

1.2 歷史背景

JavaScript 的誕生可以追溯到 1995 年，當時它被稱為 LiveScript，隨後改名為 JavaScript。隨著網際網路的崛起，JavaScript 的使用迅速增長。以下是 JavaScript 的主要版本更新：

ES5（ECMAScript 5）：於 2009 年發布，加入了很多新特性，如 Array.prototype.forEach 和 JSON 支持。
ES6（ECMAScript 2015）：於 2015 年發布，帶來了 let、const、箭頭函數、類別等新特性，從而使語法更加現代化和易於維護。

1.3 相關技術

JavaScript 與 HTML 和 CSS 密切相關，這三者共同構成了網頁的基本架構：

HTML：負責網頁的結構與內容。
CSS：用於網頁的樣式與佈局。
JavaScript：提供互動性和動態效果。

此外，JavaScript 社群發展出許多框架和庫以提升開發效率，例如：

React：由 Facebook 開發的用於構建用戶界面的庫。
Vue：一個漸進式的 JavaScript 框架，用於構建交互式用戶界面。
jQuery：一個快速、小巧的 JavaScript 庫，簡化了 HTML 文檔操作、事件處理和動畫效果。

2. JavaScript 基礎語法

2.1 基本數據類型

JavaScript 的基本數據類型包括：

整數和浮點數：例如 let num = 42; 或 let pi = 3.14;
字符串：用單引號或雙引號包裹的字符序列，例如 let greeting = "Hello, World!";
布爾值：true 或 false，例如 let isActive = true;
Null 和 Undefined：
- null 表示無值，例如 let value = null;
- undefined 表示未定義的變量，例如 let x;，此時 x 的值為 undefined。

2.2 變量聲明

JavaScript 提供三種變量聲明方式：

var：使用 var 聲明的變量具有函數作用域或全局作用域。
let：let 用於塊級作用域的變量聲明，避免了 var 的作用域問題。
const：用於聲明常量，不可重新賦值。

以下是變量聲明的示例：

var x = 10; // 全局作用域
let y = 20; // 塊級作用域
const PI = 3.14; // 常量

2.3 控制結構

JavaScript 提供了多種控制結構：

條件語句：

if (x > 10) {
  console.log("x is greater than 10");
} else {
  console.log("x is less than or equal to 10");
}

迴圈：

// for 迴圈
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// while 迴圈
let i = 0;
while (i < 5) {
  console.log(i);
  i++;
}

// do...while 迴圈
i = 0;
do {
  console.log(i);
  i++;
} while (i < 5);

3. 函數與作用域

3.1 函數定義與調用

函數是 JavaScript 的基本構造之一。可以通過以下方式定義函數：

function add(a, b) {
    return a + b;
}

// 函數調用
let sum = add(5, 10);
console.log(sum); // 15

在 JavaScript 中，函數可以作為變量傳遞，甚至可以返回其他函數。

3.2 作用域與閉包

作用域決定了變量的可見性：

全局作用域：在任何地方都可以訪問的變量。
局部作用域：在函數內部定義的變量，只能在該函數內部訪問。

閉包是一個函數，它可以記住並訪問其外部作用域，即使在其外部環境中執行。閉包常用於數據隱藏和維護狀態。

function outerFunction() {
    let outerVariable = "I'm outside!";

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

let closureFunction = outerFunction();
closureFunction(); // I'm outside!

3.3 箭頭函數

箭頭函數是 ES6 引入的一種簡化函數語法。它的特點是：

沒有自己的 this 值，this 由外部上下文決定。
語法更簡潔。

範例：

const add = (a, b) => a + b;
console.log(add(5, 10)); // 15

4. 物件與陣列

4.1 物件的基本概念

物件是一組鍵值對的集合。在 JavaScript 中，物件的定義如下：

let person = {
    name: "Alice",
    age: 25,
    greet: function() {
        console.log("Hello, " + this.name);
    }
};

person.greet(); // Hello, Alice

4.2 陣列的基本操作

陣列是一個有序的數據集合，可以包含各種數據類型。陣列的創建與初始化如下：

let fruits = ["apple", "banana", "cherry"];

常用的陣列方法包括：

push()：向陣列末尾添加元素。
pop()：移除陣列末尾的元素。
map()：對陣列中的每個元素執行指定函數。

範例：

fruits.push("date");
console.log(fruits); // ["apple", "banana", "cherry", "date"]

let lengths = fruits.map(fruit => fruit.length);
console.log(lengths); // [5, 6, 6, 4]

4.3 物件與陣列的結合

物件和陣列可以嵌套使用，以表示更複雜的數據結構。例如：

let users = [
    { name: "Alice", age: 25 },
    { name: "Bob", age: 30 }
];

users.forEach(user => {
    console.log(user.name + " is " + user.age + " years old.");
});

JSON（JavaScript Object Notation） 是一種輕量級的數據交換格式，易於人類閱讀和編寫，也易於機器解析和生成。JSON 格式的數據示例：

{
    "name": "Alice",
    "age": 25,
    "isActive": true
}

5. 異步編程與事件處理

5.1 回調函數

回調函數是傳遞給另一個函數的函數，通常在一個操作完成後執行。範例：

function fetchData(callback) {
    setTimeout(() => {
        callback("Data received!");
    }, 2000);
}

fetchData(data => {
    console.log(data); // Data received!
});

潛在的回調地獄問題指的是多層嵌套的回調函數，這會使代碼難以閱讀和維護。

5.2 Promise 與 async/await

Promise 是一種用於處理異步操作的對象。它有三種狀態：Pending（待定）、Fulfilled（已完成）和 Rejected（已拒絕）。

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Data received!");
    }, 2000);
});

promise.then(data => {
    console.log(data); // Data received!
});

async/await 語法使得異步代碼看起來像同步代碼，從而提高可讀性：

async function fetchData() {
    let response = await promise;
    console.log(response); // Data received!
}

fetchData();

5.3 事件處理

事件處理是 JavaScript 的一個核心概念。通過事件監聽器，可以在用戶與頁面互動時執行代碼。例如：

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button was clicked!");
});

事件的基本概念包括：

事件類型：如 click、mouseover、keydown 等。
事件對象：事件發生時會傳遞一個事件對象，包含有關事件的詳細信息。

6. 瀏覽器與 JavaScript 環境

6.1 瀏覽器的工作原理

瀏覽器的工作原理包括以下幾個步驟：

解析 HTML：將 HTML 轉換為 DOM（Document Object Model）樹。
解析 CSS：將 CSS 轉換為 CSSOM（CSS Object Model）樹。
構建渲染樹：結合 DOM 和 CSSOM，生成渲染樹。
布局：計算每個節點的尺寸和位置。
繪製：將渲染樹繪製到屏幕上。

事件循環（Event Loop）是一個重要的概念，用於處理異步操作和回調函數。它確保 JavaScript 單線程運行，但可以處理大量的異步事件。

6.2 開發者工具

現代瀏覽器提供了強大的開發者工具，用於調試 JavaScript 代碼。在 Chrome 瀏覽器中，可以通過按 F12 打開開發者工具。主要功能包括：

控制台：輸入和執行 JavaScript 代碼。
元素檢查：查看和修改 DOM 結構。
網絡監控：查看網頁請求和響應。

6.3 JavaScript 在伺服器端的應用

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境，允許開發者使用 JavaScript 來編寫伺服器端代碼。與前端 JavaScript 的異同包括：

環境：Node.js 是伺服器端環境，而瀏覽器是客戶端環境。
API：Node.js 提供了文件系統、網絡等伺服器端 API，而瀏覽器則提供 DOM 和 BOM API。

Node.js 的基本示例：

const http = require('http');

const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/plain');
    res.end('Hello World\n');
});

server.listen(3000, () => {
    console.log('Server running at http://localhost:3000/');
});

這篇文章旨在幫助新手快速掌握 JavaScript 的基本概念和技能，為後續深入學習打下基礎。希望讀者能夠透過本文的內容和示例，對 JavaScript 有一個清晰的認識與理解。

關於作者

Carger

我是Oscar (卡哥)，前Yahoo Lead Engineer、高智商同好組織Mensa會員，超過十年的工作經驗，服務過Yahoo關鍵字廣告業務部門、電子商務及搜尋部門，喜歡彈吉他玩音樂，也喜歡投資美股、虛擬貨幣，樂於與人分享交流！