網站開發基礎知識：如何使用JavaScript給網站賦予生命力

在踏上「網站開發」的廣闊世界時，HTML、CSS和JavaScript無疑是每位初學者必須掌握的三大基石。其中，HTML定義網頁的內容結構，CSS負責網頁的視覺佈局與美化，而JavaScript則賦予網頁生命力，控制著網頁的行為與交互。

關於HTML和CSS的基礎知識，早前香港網頁（HKWEB）已經簡單講解過，有興趣的朋友可回顧：

    ●  從零開始學習HTML，製作出第一個網頁？
    ●  如何使用CSS來設計網頁樣式？

因此，今天我們就來深入探討這位網站開發中的「魔法師」——JavaScript。

網站開發基礎知識：什麼是JavaScript？

根據維基百科介紹，JavaScript（JS）是一門基於原型和頭等函式的多范式進階直譯程式語言，支援物件導向程式設計、指令式編程和函數式程式設計，並提供方法來操控文字、陣列、日期以及正規表示式等。

JavaScript最早是在HTML網頁上使用，用來給網頁增加動態功能；而隨著HTML5和CSS3語言標準的推行，它還可以用於遊戲、桌面和行動應用程式的開發，以及在伺服器段網絡環境執行（如Node.js）。

總體來說，JavaScript可以為我們實現很多事情，建議先從簡單的特性開始，在熟悉這個語言以後，逐步製作遊戲、2D平面以及立體圖像、資料庫系統等應用。

網站開發基礎知識：JavaScript的基本特性有哪些？

要深入理解JavaScript，了解其基本特性至關重要。這些特性不僅構成JavaScript的核心也廣泛存在於其他編程語言中，成為開啟「網站開發」之門的神奇鑰匙。

基本特性一：變量（Variables）

JavaScript變量相當於用來保存數值的容器，你可以給變量起一個簡短名稱（如x），或者更有描述性的名稱（如length），甚至可以保存文本值（如carname="Volvo"）。JavaScript提供了幾種不同的變量方式，主要包括：

①  Ver
在JavaScript中創建變量經常被稱為「聲明」變量，可以通過var語句來聲明JavaScript變量，例如var x;、var carneme;等。在聲明變量後，我們為它指定一個變量賦值，例如var x=5;、var carname="Volvo";。

② let
let語句引入於 ECMAScript 6 (ES6)，用於聲明一個塊級作用於的變量，如：

let b = 20;  
{  
    let b = 30; // 這是一個新的變量，只在這個塊內有效  
    console.log(b); // 輸出: 30  
}  
console.log(b); // 輸出: 20

備註：let聲明的變量只在其聲明所在的塊或子塊中可用，但不能在同一作用域內重複聲明同一個變量。

② const
const語句同樣引入於 ECMAScript 6 (ES6)，用於聲明一個塊級作用於的常量。

const PI = 3.14159;  
console.log(PI); // 輸出: 3.14159  
// PI = 3.14; // 這會導致錯誤，因為 PI 是常量，不能被重新賦值

備註：const聲明的變量必須在聲明時初始化，並且其值在初始化後不能被重新賦值。此外，常量名通常使用大寫字母和下劃線（例如 MAX_COUNT）來區分變量。

總的來說，var、let和const是JavaScript中用來聲明變量的三種語句，其中：

A.  var 是函數作用域或全局作用域，而 let 和 const 是塊級作用域。
B.  var 聲明可以在同一作用域內多次使用同一個變量（雖然不推薦），但 let 和 const 不允許這樣做。
C.  var聲明和 let聲明的變量可以重新賦值，而const聲明的變量不能重新賦值（但如果是對象或數組，其內容可以修改）。

換言之，它們各自有不同的特性和適用場景，選擇哪種語句取決於你的具體需求。

基本特性二：注釋（Comments）

在JavaScript中，註釋語句是用於在程式碼中添加説明或備註的文本，這些文本不會被執行。註釋對於提高程式碼的可讀性和可維護性非常重要，因為它們允許開發者解釋程式碼的意圖、功能或注意事項。

JavaScript支持兩種類型的註釋：

1） 單行註釋：使用 // 開頭，後面的所有內容直到行尾都被視為註釋。例如：

// 這是一個單行註釋  
var a = 5; // 變量a被賦值為5

2）多行註釋：使用 /* 開頭，並使用 */ 結尾，中間的所有內容都被視為註釋。多行注釋可以跨越多行，因此非常適合對程式碼塊或複雜邏輯進行註釋。例如：

/*  
 * 這是一個多行註釋  
 * 它可以跨越多行  
 */  
var b = 10;  
 
/*  
 * 下面的程式碼將變量b的值增加5  
 */  
b += 5;

需要注意的是，雖然多行註釋可以跨越多行，但它們並不侷限於只能用於多行。你同樣可以使用 /* ... */ 來註釋單行，儘管這在大多數情況下可能看起來有點冗餘，因為單行註釋有更簡潔的 // 語法。

此外，註釋應該被放置在相關程式碼附近，並且應該提供有用的、準確的信息，以幫助其他開發者（或未來的你）理解程式碼的意圖和功能。避免在註釋中寫入過時或錯誤的信息，因為這樣的註釋可能會誤導讀者。

基本特性三： 運算符（Operators）

運算符是在編程語言中用於執行各種操作的符號，這些操作可以算術運算、比較運算、邏輯運算、位運算等。運算符可以作用於變量、常量、表達式或函數調用的結果，並返回一個值或執行某些動作。

以下是一些常見運算符類型及其示例：

基本特性四：條件（Conditionals）

在JavaScript中，條件語句（Conditional Statements）用於根據一個或多個條件來執行不同的程式碼塊。這些語句允許程序根據運行時的情況做出決策。JavaScript支持幾種類型的條件語句，其中最常用的是if語句、else if語句、else語句以及switch語句。

●  if語句：用於在條件為真時執行一段程式碼，如：

if (condition) {  
    // 當condition為真時執行的程式碼  
}

●  if...else語句：用於在條件為真時執行一段程式碼，如果條件為假，則執行另一段程式碼，如：

if (condition) {  
    // 當condition為真時執行的程式碼  
} else {  
    // 當condition為假時執行的程式碼  
}

●  if...else if...else語句：可以使用多個else if語句來檢查多個條件，並在每個條件為真時執行不同的程式碼塊，如：

if (condition1) {  
    // 當condition1為真時執行的程式碼  
} else if (condition2) {  
    // 當condition2為真時執行的程式碼  
} else {  
    // 當以上條件都不為真時執行的程式碼  
}

●  switch語句：用於基於不同的條件執行不同的程式碼塊。它通常用於替代多個if...else if語句，使程式碼更加簡潔和易於理解，如：

switch (expression) {  
    case value1:  
        // 當expression等於value1時執行的程式碼  
        break;  
    case value2:  
        // 當expression等於value2時執行的程式碼  
        break;  
    // 可以有任意數量的case語句  
    default:  
        // 當expression不匹配任何case時執行的程式碼  
}

在switch語句中，break語句用於終止程式碼塊並跳出switch語句。如果沒有break語句，程序將繼續執行下一個case語句，這通常是不期望的行為（稱為「fall-through」）。

條件語句是編程中控制流程的基本構建塊之一，它們允許程序根據輸入或運行時條件做出決策，從而執行不同的程式碼路徑。

基本特性五：函式（Functions）

函式是一種將需要重複使用的功能打包裝起來的方法，所以當要再次執行這些功能時，可以呼叫這個函式來達成，而無需重新撰寫程式碼，例如：

function greet(name) {  
    console.log("Hello, " + name + "!");  
}  
  
greet("Alice"); // 輸出: Hello, Alice!

在這個例子中：

→ function 關鍵字用於聲明一個函數。
→ greet 是函數的名稱。
→ (name) 是函數的參數列表，其中 name 是一個參數。
→ { ... } 包含了函數的主體，即函數被調用時要執行的程式碼。
→ console.log("Hello, " + name + "!"); 是函數體內的一條語句，用於輸出問候信息。

除了函數聲明，JavaScript還提供了其他幾種定義函數的方法，例如函數表達式和箭頭函數：

A. 函數表達式：

const greet = function(name) {  
    console.log("Hello, " + name + "!");  
};  

greet("Bob"); // 輸出: Hello, Bob!

B. 箭頭函數（ES6引入）：

const greet = (name) => {  
    console.log("Hello, " + name + "!");  
};  
  
greet("Charlie"); // 輸出: Hello, Charlie!

基本特性六：事件（Events）

在JavaScript中，事件語句通常指的是與事件處理相關的程式碼或聲明。事件是發生在瀏覽器或用户界面中的事情，例如用户點擊按鈕、輸入文本或移動鼠標等。當這些事件發生時，JavaScript可以監聽並響應它們，通過執行特定的程式碼來處理這些事件。

事件處理通常涉及以下幾個關鍵部分：

→  事件源：觸發事件的元素或對象。例如，一個按鈕、文本框或整個窗口。
→  事件類型：事件的種類，如點擊（click）、雙擊（dblclick）、鍵盤按鍵（keydown、keyup、keypress）、鼠標移動（mousemove）、窗口加載（load）等。
→  事件處理程序：當事件發生時執行的程式碼或函數。這可以是直接寫在HTML元素中的JavaScript程式碼，也可以是通過JavaScript動態添加到元素上的函數。

在JavaScript中，處理事件有幾種常見的方式：

●  HTML屬性：直接在HTML元素中使用事件屬性來指定事件處理程序。例如：

<button onclick="alert('按鈕被點擊了！')">點擊我</button>

這種方式簡單直接，但不利於程式碼的可維護性和重用性。

●  HDOM屬性：通過JavaScript訪問DOM元素，併為其設置事件處理程序屬性。例如：

var button = document.getElementById('myButton');  
button.onclick = function() {  
    alert('按鈕被點擊了！');  
};

這種方式允許更靈活地控制事件處理程序，但仍然有一定的侷限性。

●  H事件監聽器：使用addEventListener方法為元素添加事件監聽器。這是現代JavaScript中推薦的方式，因為它提供了更多的靈活性和控制力。例如：

var button = document.getElementById('myButton');  
button.addEventListener('click', function() {  
    alert('按鈕被點擊了！');  
});

使用addEventListener可以添加多個事件處理程序到同一個元素上，而不會相互覆蓋。此外，它還可以接受第三個參數來指定事件處理程序的觸發方式（如捕獲或冒泡）。

事件處理是JavaScript編程中非常重要的一部分，它允許開發者根據用户的交互來動態地改變頁面的行為和內容。通過合理地使用事件處理程序，可以創建出更加交互性和動態的用户界面。

JavaScript作為一門功能強大且靈活的編程語言，在網站開發中扮演着至關重要的角色。通過掌握JavaScript的基本特性和應用場景，你可以創造出更加豐富、互動和吸引人的網頁和應用。無論你是初學者還是經驗豐富的開發者，JavaScript都將是你實現創意和想法的強大工具。現在，就讓我們一起踏上這段充滿挑戰和樂趣的JavaScript之旅吧！