# JavaScript
## 先備知識
### 字串 string
可用雙雙引號""或雙單引號''表示
"example_1" 'example_2'
字串相加=字串連接 //如果是字串加數字 數字會默認成字串
### 模板字串
用雙反引號\`\`表示
\`example\`
相比一般字串 可用${}代入變數
### 布林值 Boolean
跟c++差不多
true 和 false
### falsy 和 truthy 值
判斷資料是true或false
truthy=非空字串,不為0的數字,物件 皆為true
falsy=空字串"",0,NaN,undefined,null 皆為false
## 常用指令
### 查資料型態 typeof
### 提示框 alert
```javascript=
alert("string"); //可換行 \n
```
### console log
```javascript=
console.log("example");
```
只會顯示在網頁的console裡
### 按鈕 button
```javascript=
<button> 按鈕內的文字 </button>
```
加 onclick 點擊後執行""內的指令
```javascript=
<button onclick="alert=('example ALERT!!!');"> example </button>
```
## JavaScript code區
### script標籤
```javascript=
<script>
//code區
</script>
```
### javascript腳本嵌入html
在body標籤內加上
```html=
<script src=".js file"></script>
```
### 設定變數
變數命名規則如同c++
不得使用保留字、開頭不能為數字
let 變數名稱=可為任意資料型態;
也可以使用
const 變數名稱=可為任意資料型態;
但不得事後修改值
var 變數名稱=可為任意資料型態;
舊版JS使用，現今不使用因為會有一些問題
### if判斷式
跟c++差不多
但有差別的地方是如果是要判斷相等要使用=== 不相等要使用!==
```javascript=
if(){
}
else{
}
```
### 邏輯運算
跟c++差不多
&&and
||or
!not
### 函數 function
函數命名規則如同c++
不得使用保留字、開頭不能為數字
```javascript=
function 函數名稱(){
//code
}
```
#### 函數參數 parameter
```javascript=
function 函數名稱(參數){
//code
}
```
#### return
可寫可不寫
如果function內沒有return
會被預設成return undefined;
### 物件 object
```javascript=
{
屬性名稱:資料,
屬性名稱:資料
};
```
或
```javascript=
let 物件名稱={
屬性名稱:資料,
屬性名稱:資料
};
```
取得物件內屬性可用
物件.屬性 或 物件["屬性"]
也可以額外增加或刪除屬性
### 陣列 array
跟c++差不多
```javascript=
陣列名稱[資料1,資料2,資料3,...];
```
**因為陣列算物件 所以會有屬性跟方法**
#### 陣列長度 length屬性
```javascript=
陣列名稱.length
```
#### push 方法
用於新增資料進陣列
```javascript=
陣列名稱.push(資料);
```
#### splice 方法
選定從第幾筆資料開始刪幾個資料
```javascript=
陣列名稱.splice(從第幾筆資料開始,切幾筆資料);
```
#### slice 方法
因為陣列名稱存的是地址而非陣列資料本體
所以當設定變數 b = 陣列a 時
b 存的是地址
要讓a和b陣列互不干擾可以使用 slice
```javascript=
a.slice();
```
複製一份a陣列的內容給b
### for 迴圈
跟c++差不多
```javascript=
for(初始化;條件判斷;變數改變){
//code
}
```
### while 迴圈
跟c++差不多
```javascript=
while(條件判斷式){
//code
}
```
### break 和 continue
用法如同c++
## JS儲存資料方式
primitive 基本類型 存數字、字串、布林值...
reference 引用類型 存物件
因為物件佔的空間較大較複雜 所以會存的是物件在較大的記憶體的位址而非值
所以物件的值會是位址
## localStorage 和 JSON
因為網頁重整後所有資料會被歸零
所以需要一個存資料的地方
### localStorage
瀏覽器內的儲存空間 是JS內建的物件
#### 儲存資料
```javascript=
localStorage.setItem("儲存資料的名字",要儲存的資料);
```
#### 取得資料
```javascript=
localStorage.getItem("要取得的資料名字");
```
#### 刪除資料
```javascript=
localStorage.removeItem("要刪除的資料名字");
```
但localStorage只能存字串 要存數字需要用到JSON
### JSON
也是JS內建的物件但裡面不能儲存函式
轉換成JSON格式的字串 轉換後函式會直接消失
因為轉成JSON會變成字串，所以可以跟localStorage結合
```javascript=
JSON.stringify(要轉換的資料或物件);
```
JSON格式轉換成JavaScript物件
```javascript=
JSON.parse(要轉換的資料或物件);
```
## DOM Document Object Model
提供一個JS內建的document物件
### document物件
是用於跟網頁做連結的
可以取得或修改網頁上的內容
```javascript=
document.body //用於取得<body></body> body標籤裡的內容
```
body是物件 而裡面的html則是屬性
### innerHTML
可以取得或修改body標籤(物件)內的html內容(屬性)程式碼
簡單理解成開始標籤和結束標籤中間的內容
```javascript=
document.body.innerHTML
```
### title
```javascript=
document.title //取得或修改網頁標籤
```
### querySelector 方法
用於取得任何標籤的內容
```javascript=
document.querySelector("標籤");
```
有些標籤可能不只一個 像p標籤就會有一個以上
這時使用querySelector就只會取得第一個p標籤
如過要取得指定的某一個標籤 可以在標籤內加
class="example" 然後使用
```javascript=
document.querySelector(".example");
//或
document.getElementsByClassName("example");
```
或是 id="example" 然後使用
```javascript=
document.querySelector("#example");
//或
document.getElementById("example");
```
因為取得的「標籤」是個物件 所以裡面一定會有「屬性」
可以使用innerHTML做取得或修改
### .value
有些標籤是只有開始標籤/而沒有結束標籤 像是input標籤
```html=
<input/>
```
就沒辦法使用innerHTML取得裡面的資料
這時就可以使用value來取得
但取得的都會是字串 就算輸入數字還是會變成字串
如果是要數字的話可以用Number();把字串改成數字
### Number 和 String
```javascript=
Number("string");
```
將取得的數字(字串)轉換成數字(數字)
```javascript=
String(number);
```
將取得的數字(數字)轉換成數字(字串)
## 事件監聽 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
```
### event listener
#### 新增監聽函數
```javascript=
object.addEventListener("event name",function(),option); //option 可寫可不寫
```
#### 刪除監聽函數
```javascript=
object.removeEventListener("event name");
```
### event handler 和 listener 的差別
一個object只能有一個event handler處理一個特定的event
如果一個特定的button標籤(物件)有兩個onclick
後面的onclick會覆蓋前面的onclick
但event listener不會
數個 event listener 可以一起處理一個特定的 event
---
- Contributor: 林彥均
Sign in with Wallet
Connect another wallet