---
# System prepended metadata

title: JavaScript
tags: [docs]

---

# JavaScript

## 先備知識

### 字串 string
可用雙雙引號""或雙單引號''表示
"example_1" 'example_2'
字串相加=字串連接 //如果是字串加數字 數字會默認成字串
![螢幕擷取畫面 2024-07-11 162115](https://hackmd.io/_uploads/ryGoYxb_C.png =70%x)

### 模板字串
用雙反引號\`\`表示
\`example\`
相比一般字串 可用${}代入變數
![螢幕擷取畫面 2024-07-12 164721](https://hackmd.io/_uploads/ByCb9xbu0.png)

### 布林值 Boolean 
跟c++差不多
true 和 false

### falsy 和 truthy 值
判斷資料是true或false
truthy=非空字串,不為0的數字,物件 皆為true
falsy=空字串"",0,NaN,undefined,null 皆為false

## 常用指令

### 查資料型態 typeof
![螢幕擷取畫面 2024-07-11 161936](https://hackmd.io/_uploads/HJ1QDxWOC.png =70%x)

### 提示框 alert
```javascript=
alert("string"); //可換行 \n
```
![螢幕擷取畫面 2024-07-11 161252](https://hackmd.io/_uploads/SJFh_x-dC.png)

### console log
```javascript=
console.log("example");
```

只會顯示在網頁的console裡
![螢幕擷取畫面 2024-07-11 172818](https://hackmd.io/_uploads/H1GsagZ_0.png)

### 按鈕 button
```javascript=
<button> 按鈕內的文字 </button>
```
![螢幕擷取畫面 2024-07-11 165001](https://hackmd.io/_uploads/r1orQb-_A.png)

加 onclick 點擊後執行""內的指令
```javascript=
<button onclick="alert=('example ALERT!!!');"> example </button>
```
![螢幕擷取畫面 2024-07-11 165635](https://hackmd.io/_uploads/HkjUmWWO0.png)


## JavaScript code區
### script標籤
```javascript=
<script> 
    //code區 
</script>
```

### javascript腳本嵌入html
在body標籤內加上
```html=
<script src=".js file"></script>
```
![螢幕擷取畫面 2024-07-18 172844](https://hackmd.io/_uploads/SJkhxwUuR.png)


### 設定變數 
變數命名規則如同c++
不得使用保留字、開頭不能為數字
let 變數名稱=可為任意資料型態;

![螢幕擷取畫面 2024-07-12 163535](https://hackmd.io/_uploads/BJQuZZZ_C.png)

也可以使用
const 變數名稱=可為任意資料型態;
但不得事後修改值

var 變數名稱=可為任意資料型態;
舊版JS使用，現今不使用因為會有一些問題

### if判斷式
跟c++差不多
但有差別的地方是如果是要判斷相等要使用=== 不相等要使用!==
```javascript=
if(){

}
else{

}
```
![螢幕擷取畫面 2024-07-12 171832](https://hackmd.io/_uploads/rkbmE--_R.png)

### 邏輯運算
跟c++差不多
&&and
||or
!not

### 函數 function
函數命名規則如同c++
不得使用保留字、開頭不能為數字
```javascript=
function 函數名稱(){
    //code
}
```
![螢幕擷取畫面 2024-07-13 140909](https://hackmd.io/_uploads/Hy2eIbZdC.png)

#### 函數參數 parameter
```javascript=
function 函數名稱(參數){
    //code
}
```
![螢幕擷取畫面 2024-07-13 142324](https://hackmd.io/_uploads/SkyQIZWdR.png)

#### return
可寫可不寫
如果function內沒有return
會被預設成return undefined;

### 物件 object
```javascript=
{
    屬性名稱:資料,
    屬性名稱:資料
};
```
或
```javascript=
let 物件名稱={
    屬性名稱:資料,
    屬性名稱:資料
};
```
取得物件內屬性可用
物件.屬性 或 物件["屬性"]
![螢幕擷取畫面 2024-07-13 150550](https://hackmd.io/_uploads/r1nCY--_C.png)
也可以額外增加或刪除屬性
![螢幕擷取畫面 2024-07-13 150133](https://hackmd.io/_uploads/B1Ql5b-u0.png)

### 陣列 array
跟c++差不多
```javascript=
陣列名稱[資料1,資料2,資料3,...];
```
![螢幕擷取畫面 2024-07-15 160817](https://hackmd.io/_uploads/Sk2XYLfuA.png)

**因為陣列算物件 所以會有屬性跟方法**

#### 陣列長度 length屬性
```javascript=
陣列名稱.length
```
![螢幕擷取畫面 2024-07-15 164206](https://hackmd.io/_uploads/ry1xZDMdA.png)

#### push 方法
用於新增資料進陣列
```javascript=
陣列名稱.push(資料);
```
![螢幕擷取畫面 2024-07-15 164521](https://hackmd.io/_uploads/Hkyn-wG_C.png)

#### splice 方法
選定從第幾筆資料開始刪幾個資料
```javascript=
陣列名稱.splice(從第幾筆資料開始,切幾筆資料);
```
![螢幕擷取畫面 2024-07-15 165050](https://hackmd.io/_uploads/ryYxQvfO0.png)

#### slice 方法
因為陣列名稱存的是地址而非陣列資料本體
所以當設定變數 b = 陣列a 時
b 存的是地址
![螢幕擷取畫面 2024-07-15 175641](https://hackmd.io/_uploads/Hy2Pfuf_0.png =50%x)

要讓a和b陣列互不干擾可以使用 slice
```javascript=
a.slice();
```
複製一份a陣列的內容給b
![螢幕擷取畫面 2024-07-15 180012](https://hackmd.io/_uploads/BJoI7OGOC.png =50%x)

### for 迴圈
跟c++差不多
```javascript=
for(初始化;條件判斷;變數改變){
    //code
}
```
![螢幕擷取畫面 2024-07-15 171058](https://hackmd.io/_uploads/ryQ3PvM_C.png)

### while 迴圈
跟c++差不多
```javascript=
while(條件判斷式){
    //code
}
```
![螢幕擷取畫面 2024-07-15 170154](https://hackmd.io/_uploads/SyZqSPfdC.png)

### break 和 continue
用法如同c++
![螢幕擷取畫面 2024-07-15 172522](https://hackmd.io/_uploads/HJ8fowMuC.png)

## JS儲存資料方式
primitive 基本類型 存數字、字串、布林值...

![螢幕擷取畫面 2024-07-13 171605](https://hackmd.io/_uploads/rkFpibbO0.png =50%x)

reference 引用類型 存物件 
因為物件佔的空間較大較複雜 所以會存的是物件在較大的記憶體的位址而非值
所以物件的值會是位址

![螢幕擷取畫面 2024-07-13 171630](https://hackmd.io/_uploads/ryT0i-ZuA.png =50%x)

## localStorage 和 JSON
因為網頁重整後所有資料會被歸零
所以需要一個存資料的地方

### localStorage
瀏覽器內的儲存空間 是JS內建的物件

#### 儲存資料
```javascript=
localStorage.setItem("儲存資料的名字",要儲存的資料);
```

#### 取得資料
```javascript=
localStorage.getItem("要取得的資料名字");
```
![螢幕擷取畫面 2024-07-13 152059](https://hackmd.io/_uploads/BJxDyd-uR.png)

#### 刪除資料
```javascript=
localStorage.removeItem("要刪除的資料名字");
```

但localStorage只能存字串 要存數字需要用到JSON

### JSON 
也是JS內建的物件但裡面不能儲存函式 

轉換成JSON格式的字串 轉換後函式會直接消失
因為轉成JSON會變成字串，所以可以跟localStorage結合
```javascript=
JSON.stringify(要轉換的資料或物件); 
```
![螢幕擷取畫面 2024-07-13 161438](https://hackmd.io/_uploads/Hk-4xdZ_R.png)

JSON格式轉換成JavaScript物件
```javascript=
JSON.parse(要轉換的資料或物件);
```
![螢幕擷取畫面 2024-07-13 160627](https://hackmd.io/_uploads/Hyd4xuW_C.png)

## DOM Document Object Model
提供一個JS內建的document物件
### document物件
是用於跟網頁做連結的
可以取得或修改網頁上的內容

```javascript=
document.body //用於取得<body></body> body標籤裡的內容
```
![螢幕擷取畫面 2024-07-13 174624](https://hackmd.io/_uploads/SJuiwNMd0.png)
body是物件 而裡面的html則是屬性

### innerHTML 
可以取得或修改body標籤(物件)內的html內容(屬性)程式碼
簡單理解成開始標籤和結束標籤中間的內容
```javascript=
document.body.innerHTML
```
![螢幕擷取畫面 2024-07-13 175352](https://hackmd.io/_uploads/ry56v4MO0.png)
![螢幕擷取畫面 2024-07-13 180237](https://hackmd.io/_uploads/Syn1_VzO0.png)

### title
```javascript=
document.title //取得或修改網頁標籤
```
![螢幕擷取畫面 2024-07-13 180413](https://hackmd.io/_uploads/BJjZuEMdC.png)

### querySelector 方法
用於取得任何標籤的內容

```javascript=
document.querySelector("標籤");
```
![螢幕擷取畫面 2024-07-15 135638](https://hackmd.io/_uploads/B1Z4cNfu0.png)

有些標籤可能不只一個 像p標籤就會有一個以上
這時使用querySelector就只會取得第一個p標籤
![螢幕擷取畫面 2024-07-15 141630](https://hackmd.io/_uploads/HyaTC4fOR.png)

如過要取得指定的某一個標籤 可以在標籤內加
class="example" 然後使用
```javascript=
document.querySelector(".example");
//或
document.getElementsByClassName("example");
```
![螢幕擷取畫面 2024-07-15 142207](https://hackmd.io/_uploads/ByDXerf_A.png)

或是 id="example" 然後使用
```javascript=
document.querySelector("#example");
//或
document.getElementById("example");
```
![螢幕擷取畫面 2024-07-15 142701](https://hackmd.io/_uploads/rkNSWHM_A.png)

因為取得的「標籤」是個物件 所以裡面一定會有「屬性」
可以使用innerHTML做取得或修改
![螢幕擷取畫面 2024-07-15 140105](https://hackmd.io/_uploads/r14SiVfdR.png)

### .value
有些標籤是只有開始標籤/而沒有結束標籤 像是input標籤
```html=
<input/>
```
就沒辦法使用innerHTML取得裡面的資料
![螢幕擷取畫面 2024-07-15 145640](https://hackmd.io/_uploads/rJtEOBGOA.png)

這時就可以使用value來取得
![螢幕擷取畫面 2024-07-15 145728](https://hackmd.io/_uploads/SkjOOrzuC.png)

但取得的都會是字串 就算輸入數字還是會變成字串
![螢幕擷取畫面 2024-07-15 151326](https://hackmd.io/_uploads/SkVXnrzOR.png)

如果是要數字的話可以用Number();把字串改成數字

### Number 和 String
```javascript=
Number("string");
```
![螢幕擷取畫面 2024-07-15 153340](https://hackmd.io/_uploads/r1xlbUM_A.png)
將取得的數字(字串)轉換成數字(數字)

```javascript=
String(number);
```
![螢幕擷取畫面 2024-07-15 154710](https://hackmd.io/_uploads/ByaZVIG_A.png)
將取得的數字(數字)轉換成數字(字串)

## 事件監聽 event listener
JavaScript中的一個函數 它等待事件發生 然後對其進行回應
### 各項event
可參考下面網址:
[HTML DOM Events](https://www.w3schools.com/jsref/dom_obj_event.asp)

寫event listener有兩種方式
event handler 或 listener

### event handler
button 的 onclick 就是個例子

```javascript=
on + event //在event前面加on
```

![螢幕擷取畫面 2024-07-18 150301](https://hackmd.io/_uploads/S1OzJSLd0.png)

![螢幕擷取畫面 2024-07-18 151814](https://hackmd.io/_uploads/Sk4UfrUO0.png)

### event listener

#### 新增監聽函數
```javascript=
object.addEventListener("event name",function(),option); //option 可寫可不寫
```
![螢幕擷取畫面 2024-07-18 153919](https://hackmd.io/_uploads/HJ93LBIuC.png)

#### 刪除監聽函數
```javascript=
object.removeEventListener("event name");
```

### event handler 和 listener 的差別
一個object只能有一個event handler處理一個特定的event
如果一個特定的button標籤(物件)有兩個onclick
後面的onclick會覆蓋前面的onclick

![螢幕擷取畫面 2024-07-18 170919](https://hackmd.io/_uploads/S1kAoUU_R.png)

但event listener不會
數個 event listener 可以一起處理一個特定的 event

![螢幕擷取畫面 2024-07-18 171727](https://hackmd.io/_uploads/BkY2p8U_A.png)

---

- Contributor: 林彥均