# JS 基礎入門
###### tags:`javascript`
## JS 環境與變數
### 變數
#### 原始型別
- Number數字
- String字串（"" / ''）
- boolean布林（true / false）
- undefined（設了一個變數但沒有賦予值）
- null
- sybol
#### JS 的執行過程
1. 建立出執行環境
會將變數的值暫存至瀏覽器的記憶體
變數會指向某個記憶體位置，其存放的是變數的值
若變數的值有變動，記憶體會再新增一個空間存放新的值
Q1：幾個型別、幾個變數、產生過幾個記憶體位置
A：四個型別、一個變數、五個記憶體位置
> undefined也是一種型別，也會佔用一個記憶體位置
```javascript=
var a;
//重新賦予新的值，不是修改
a = 1;
a = 3;
a = 'hello';
a = true;
```
Q2：幾個型別、幾個變數、產生過幾個記憶體位置
A：三個型別、兩個變數、五個記憶體位置
```javascript=
var a = 1;
var b = 2;
var b = 'qq';//新增一個記憶體空間存放'qq'
//創造階段
var a;//會先有undefined的記憶體空間
var b;
a=1;//新增一個記憶體空間存放1，a指向1
b=2;//新增一個記憶體空間存放2，b指向2
b='qq';//新增一個記憶體空間存放'qq'，b指向'qq'
```
2. 創造階段、執行階段
1. 解析程式碼(編譯)
2. 丟給Chrome執行
## JS 函式與監聽
### DOM（文件物件模型）
#### 結構樹
- 方便JS選取
- 方便CSS渲染、對應標籤
#### 透過JS選取 / 修改資料
```javascript=
document.querySelector(".header").textContent = "呵呵";
//選取該網頁文件，找到裡面的 .header，新增文字，賦予值 呵呵
document.querySelector(".header").textContent;
// 抓出文字內容
var str = document.querySelector(".header").textContent;
//將此文字內容當作變數的值
```
#### 透過JS動態加入資料
```javascript=
document.querySelector(".header").classList.add('active')
//在 .header上新增一 class，名稱為 active
document.querySelector(".header").setAttribute('style','color:red')
//增加屬性，(屬性名稱，值)
```
#### 透過JS賦予值
```javascript=
document.querySelector(".header").innerHTML='<h1>520</h1>';
//賦予值 使用=
//document.querySelector(".header").innerHTML 為取得值
var _headerHTML = document.querySelector(".header").innerHTML;
//將取出的值當作變數的值
//<h1>520</h1>
```
#### 將DOM放到記憶體空間（當作變數）
```javascript=
var element = document.querySelector(".header");
element.innerHTML='<h1>520</h1>';
element.textContent = "呵呵";
//節省開發時間
```
### 函式（function）
宣告函式
```javascript=
function 函數名稱(參數){
指令
}
```
舉例：兩個數字加法計算機
- 找出變因
- 哪些東西會變來變去
- 要回傳什麼東西
```javascript=
function sum(num1,num2){
return num1+num2;
}
var a = sum(3,3);//a = 6
```
- 函式會存放於記憶體中
- 但函式結果會當作一個（賦予變數的）新值>存放於新的記憶體
參數 不等於 變數
```javascript=
function sum(num1,num2){
return num1+num2;
//參數只活在此函式裡面，執行完即消失。
}
console.log(num1);//找不到
```
#### 區域變數
在函式裡設變數，則此變數只在韓式範圍內有效，執行完即消失。
例如：
上圖中，變數total只在紅框框內有效
```javascript=
console.log(friesPrice);//40
console.log(total);//找不到
```
而friesPrice與hambugerPrice為全域變數，即使在函式裡也可使用的變數。
### 監聽
JS內建函式：.addEventListener
```javascript
document.querySelector(".send").addEventListener("監聽動作",
function(){
觸發後效果
})
```
例如
```javascript
document.querySelector(".send").addEventListener("click",
function(){
})
```
可使用Chrome > 檢查 >Event Listener 來看網頁元件的監聽事件是什麼
:::info
常見監聽事件
- onclick：當使用者產生點擊某元素時，例如選擇某的選項或是按鈕（button）。
- onchange：當元素發生改變時，例如選擇下拉選單（select option）中的其他項目時。
- onblur：當游標失去焦點時，也就是點選其他區域時，通常用於填完表單的一個欄位。
- ondblclick：連續兩次 click 某特定元素，通常用於需要特定確認的情況。
- onfocus：當網頁元素被鎖定的時候，例如 textarea、input text。
- onload：當頁面載入完成後立即觸發 function。
- onmousedown：滑鼠事件，當滑鼠的按鍵被按下的時候。
- onmouseover：滑鼠事件，當滑鼠游標移經某個元素或區塊時。
- onmousemove：滑鼠事件，當滑鼠游標移動時。
- onmouseout：滑鼠事件，當滑鼠移出某個元素或區塊時。
- onmouseup：滑鼠事件，當滑鼠的按鍵被放開的時候。
- onunload：當網友要準備離開網頁的時候。
:::
{"metaMigratedAt":"2023-06-15T09:34:01.869Z","metaMigratedFrom":"Content","title":"JS 基礎入門","breaks":true,"contributors":"[{\"id\":\"4a3bce37-8ac0-4beb-82dc-c1f9a9a32f39\",\"add\":3284,\"del\":84}]"}