# JS 基礎入門
###### tags:`javascript`
## JS 環境與變數

### 變數

#### 原始型別
- Number數字
- String字串（"" / ''）
- boolean布林（true / false）
- undefined（設了一個變數但沒有賦予值）
- null
- sybol

#### JS 的執行過程
1. 建立出執行環境
會將變數的值暫存至瀏覽器的記憶體
變數會指向某個記憶體位置，其存放的是變數的值
若變數的值有變動，記憶體會再新增一個空間存放新的值

Q1：幾個型別、幾個變數、產生過幾個記憶體位置
A：四個型別、一個變數、五個記憶體位置
> undefined也是一種型別，也會佔用一個記憶體位置

var a;
//重新賦予新的值，不是修改
a = 1;
a = 3;
a = 'hello';
a = true;

Q2：幾個型別、幾個變數、產生過幾個記憶體位置
A：三個型別、兩個變數、五個記憶體位置

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選取 / 修改資料

document.querySelector(".header").textContent = "呵呵";
//選取該網頁文件，找到裡面的 .header，新增文字，賦予值 呵呵
document.querySelector(".header").textContent;
// 抓出文字內容
var str = document.querySelector(".header").textContent;
//將此文字內容當作變數的值

#### 透過JS動態加入資料

document.querySelector(".header").classList.add('active')
//在 .header上新增一 class，名稱為 active
document.querySelector(".header").setAttribute('style','color:red')
//增加屬性，(屬性名稱，值)

#### 透過JS賦予值

document.querySelector(".header").innerHTML='<h1>520</h1>';
//賦予值 使用=
//document.querySelector(".header").innerHTML 為取得值
var _headerHTML = document.querySelector(".header").innerHTML;
//將取出的值當作變數的值
//<h1>520</h1>

#### 將DOM放到記憶體空間（當作變數）

var element = document.querySelector(".header");
element.innerHTML='<h1>520</h1>';
element.textContent = "呵呵";
//節省開發時間

### 函式（function）

宣告函式

function 函數名稱(參數){
    指令
}

舉例：兩個數字加法計算機
- 找出變因
- 哪些東西會變來變去
- 要回傳什麼東西

function sum(num1,num2){
    return num1+num2;
}

var a = sum(3,3);//a = 6

- 函式會存放於記憶體中
- 但函式結果會當作一個（賦予變數的）新值>存放於新的記憶體


參數 不等於 變數

function sum(num1,num2){
    return num1+num2;
    //參數只活在此函式裡面，執行完即消失。
}

console.log(num1);//找不到

#### 區域變數

在函式裡設變數，則此變數只在韓式範圍內有效，執行完即消失。
例如：
上圖中，變數total只在紅框框內有效

console.log(friesPrice);//40
console.log(total);//找不到

而friesPrice與hambugerPrice為全域變數，即使在函式裡也可使用的變數。

### 監聽
JS內建函式：.addEventListener

document.querySelector(".send").addEventListener("監聽動作",
function(){
    觸發後效果
})

例如

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：當網友要準備離開網頁的時候。
:::