# JS 入門篇

[TOC]

## 資料型別

共有七種
* Boolean，例如：true、false。
* Null，空值
* Undefined，宣告但未定義
* Number，例如：12345。
* string，例如：'Hello World'。
* object例如：{ name: 'Jack' }、[1, 2, 3]
* symbol

## 運算子
* var num = 1 + 1; // 2
* var num = 5 - 2; // 3
* var num = 2 * 2; // 4
* var num = 10 / 5; // 2
* var num = 10 % 3; // 1

## 特殊運算子轉型
* var a = '5' + 1 // '51'
* var a = '6' - 1 // 5
* var a = 1 + '2' // '12'
* var a = 5 - '2' // 3

:::info
透過減號，會強制變成數字
:::

## if、else if、else

var weather = 'sun'

var number = 1
if (number == '1') {
    
}
if (number === 1) {
    
}

// 介紹一下三個等於跟兩個等於的差別
if (weather === 'sun') {
    alert('晴天')
} else if (weather === 'rain') {
    alert('雨天')
} else {
    alert('未定義的天氣')
}

以下寫法會更好些

var weather = 'sun'

if (weather === 'sun') {
    alert('晴天')
}
if (weather === 'rain') {
    alert('雨天')
}

// 沒有定義的怎麼辦呢?
* 使用 else 解決
* 使用 includes 解決 (學到陣列時，再回頭看)

## switch case

var weather = 'sun'

switch (weather) {
    case 'sun':
        alert('晴天')
        break;
    case 'rain':
        alert('雨天')
        break;
    default:
        alert('未知天气')
}

:::info
通常情況下 switch 語句比 if-else 語句稍微更有效率一些，特別是當有多個條件需要判斷時。 這是因為 switch 語句在執行時可以使用跳躍表（jump table）來直接找到匹配的分支，而不需要逐一比較每個條件。
:::

## DOM元素操作 (ID、CLASS、TAG)

https://codepen.io/jameshappy/pen/gOqZXmm

## Function (函數)

函式（function）是一種可重複使用的程式碼，它包含了一組程式語句，可以在需要的時候被呼叫執行。函式可以接受輸入參數，執行一系列操作，然後產生輸出結果。

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

var result = add(2, 3); // 調用add函數，並將結果存儲在result變數中
console.log(result); // 5

## onClick事件

https://codepen.io/jameshappy/pen/gOqZXmm

## 操作 DOM Style

https://codepen.io/jameshappy/pen/abXPVgv

## innerHTML、innerText

https://codepen.io/jameshappy/pen/bGzOawO