---
# System prepended metadata

title: 1. Javascript 函式
tags: [Javascript]

---

###### tags: `Javascript`

# 1. Javascript 函式

## 寫一段程式時的思維
- 1. 先小步測試，想出一個實際的數字帶入程式會怎麼寫，再反覆驗證，直到邏輯正確為止。
- 2. 用函式包裹初步程式，模擬參數帶入的情況。
- 3. 試著模擬呼叫函式方法。

# 2. DOM 選取網頁元素 盡量寫在變數裡節省修改量

## querySelector('X') 找尋標籤
* 可以找類別也可以找標籤
```javascript=
const el = document.querySelector('h1');
```

## 抓子層元素
```javascript=
const listContent = document.querySelector('.list li');
```

## X.textContent 修改文字

```javascript=
el.textContent = "Hello World!";
```

## X.innerHTML 寫入並覆蓋HTML標籤
```javascript=
el.innerHTML='<h1 class="main">5678</h1>';
```

## setAttribute 設置屬性
>setAttribute是方法()，第一個參數填屬性 第二個填數值。
```javascript=
const myLink = document.querySelector('a');

mylink.setAttribute("href","https://www.google.com.tw/");
```

## querySelectorAll 選擇全部並指定為陣列
>假設有兩個a連結
```javascript=
const mylinks = document.querySelectorAll('a');

myLinks[0].setAttribute("href","https://www.google.com.tw/")

myLinks[1].setAttribute("href","https://www.google.com.tw/")
```

## 三種抓值的方式 .innerHTML .textContent .getAttribute
1. X.innerHTML : 抓標籤 
2. X.textContent : 抓文字 
3. .getAttribut("X") : 抓類別
```javascript=
const myLink = document.querySelector("a");

X = myLink.getAttribute("href");
Y = myLink.innerHTML;
Z = myLink.textContent;
```

## 表單取值與賦予值
* 以下為用取值方式賦予值
```htmlembedded=
<select class="list">
    <option value="台北市"></option>
</select>
```
```javascript=
const txt = document.querySelectorAll('.list');
txt.value = "桃園市";
```

# 3. Javascript Event事件 
* event 是網頁的即時快照 會拍成物件 可以隨時呼叫物件元素進行觀察
>物件元素屬性位在console頁面
```javascript=
const btn = document.querySelector('.btn');
btn.addEventListener("click",function(e){
    console.log(e.layerX)
})
```

## preventDefault 取消預設觸發行為
*　常用１：在避免轉址行為　常用２：取消ｓｕｂｍｉｔ交出行為
```javascript=
const myLink = document.querySelector("a");

myLink.addEventListener("click",function(e){
    e.preventDefault();
    console.log('有被點擊到');
})
```

## addEventListener 註冊事件監聽教學
```javascript=
const btn = document.querySelector(".btn");
const title = document.querySelector(".h1");
//監聽 事件
btn.addEventListener("click",function(e){
    title.textContent = "按鈕已經被點擊";
})
```

## 用Event事件寫一個加法器
```javascript=
const btn = document.querySelector(".btn");
const title = document.querySelector(".h1");
let count = 0;
//監聽 事件
btn.addEventListener("click",function(e){
    count+=1;
    title.textContent = count;
})
```
## 取得HTML 標籤
```javascript=
console.log(X.nodeName)
```
* e.target 取得目前所點擊元素所在位置
```javascript=
const list = document.querySelector(".list");

list.addEventListener("click",function(e){
    console.log(e.target)
})
```
## 用EVENT寫一個是否有點到按鈕的程式
```javascript=
const list = document.querySelector(".list");

list.addEventListener("click",function(e){
    console.log(e.target.nodeName);
    if(e.target.nodeName == "INPUT"){
        console.log('你目前點到按鈕了!');
    }
})
```