2. 基本語法和資料類型

2.1 JavaScript 變數和資料類型

JavaScript中的變數使用 var、let 或 const 來宣告。資料類型包括基本資料型態（如數字、字串、布林值）和組合資料型態（如物件、陣列）。

下面我們分別來介紹：

變數宣告

var

• ES5（ECMAScript 5）中引入的，是最早的變數宣告關鍵字。
• 整個函式皆可作用

function example() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10
}

let

• 在ES6中引入的，它引入了區塊級作用域的概念。
• 與var不同，let宣告的變數在區塊級作用域內是局部的，不會被提升到整個函式內。

function example() {
    if (true) {
        let x = 10;
    }
    console.log(x); // ReferenceError: x is not defined
}

const

• ES6中引入的，用於宣告常數，其值在宣告後不能被修改。像let一樣，const也有區塊級作用域。
• 不能被重複宣告。

function example() {
    if (true) {
        const x = 10;
    }
    console.log(x); // ReferenceError: x is not defined
}

命名規則

• 開頭字元需要是ASCII字元(英文大小寫字元)，或是下底線(_)、錢號($)。注意，數字不可用於開頭字元。
• 接下來的字元可以使用英文字元、數字或下底線(_)。
• 大小寫是有差異的。
• 名稱不可使用JavaScript語言保留字詞。

命名習慣

• jQuery 元素習慣已錢號($)開頭。
• 常數習慣全大寫命名單字間已下底線(_)分隔。

// 變數宣告
var numberVar = 10;
let stringVar = "Hello, World!";
const PI = 3.14;

基本資料型態

整數（Integer）

• 用來表示整數值，例如：1,
  10, -5。

let integerNumber = 42;

浮點數（Float）

• 用來表示帶有小數部分的數值，例如：3.14, 2.0, -0.5。

let floatNumber = 3.14;

字串（String）

• 用來表示文本，以單引號 ' 或雙引號 " 括起來，例如：'Hello', "World"。

let greeting = 'Hello';
let message = "World";

布林值（Boolean）

• 用來表示邏輯值，僅有兩個可能的值：true 或 false。

let isTrue = true;
let isFalse = false;

組合資料型態

陣列（Array）

• 用來儲存多個值的有序集合，可以包含不同類型的元素，例如：[1, 2, 3], ['apple', 'orange', 'banana']。

let numbers = [1, 2, 3];
let fruits = ['apple', 'orange', 'banana'];

物件（Object）

• 用來儲存鍵值對的集合，每個鍵都是唯一的，例如：{name: 'John', age: 25, city: 'New York'}。

let person = {
    name: 'John',
    age: 25,
    city: 'New York'
};

空值（Null）

• 表示變數沒有值或不存在。

let nullValue = null;

未定義（Undefined）

• 表示變數已經聲明但尚未賦值。

let undefinedValue;

2.2 運算子和表達式

JavaScript中的運算子包括算術運算子、比較運算子、邏輯運算子等。表達式由運算子和運算元組成。

算術運算子

比較運算子

邏輯運算子

2.3 控制流程（條件語句、迴圈）

JavaScript使用條件語句（if、else if、else）和迴圈（for、while）來控制程式流程。

// 條件語句
let number = 15;
if (number > 10) {
    console.log("Number is greater than 10");
} else if (number === 10) {
    console.log("Number is equal to 10");
} else {
    console.log("Number is less than 10");
}
// 迴圈
for (let i = 0; i < 5; i++) {
    console.log("Iteration: " + i);
}
let counter = 0;
while (counter < 3) {
    console.log("Counter: " + counter);
    counter++;
}

2.4 jQuery 基本語法

使用 jQuery 簡化 DOM 操作，基本語法包括選擇器和方法。

// jQuery基本語法
$(document).ready(function() {
    // 選擇器
    let myElement = $('#myElement');
    // 方法
    myElement.css('color', 'blue');
    myElement.click(function() {
        alert('Element Clicked!');
    });
});

在上述代碼中，$(document).ready() 確保文檔準備就緒後再執行 jQuery 代碼。 $() 是一個簡便的選擇器，用於選擇 HTML 元素，並可以使用各種方法對其進行操作。

這是基本的 JavaScript 和 jQuery 的語法和概念。深入了解這些主題將有助於您更好地理解和應用它們在實際的前端開發中。