###### tags: `Javascript`

# 1. Javascript 函式

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

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

## querySelector('X') 找尋標籤
* 可以找類別也可以找標籤

const el = document.querySelector('h1');

## 抓子層元素

const listContent = document.querySelector('.list li');

## X.textContent 修改文字

el.textContent = "Hello World!";

## X.innerHTML 寫入並覆蓋HTML標籤

el.innerHTML='<h1 class="main">5678</h1>';

## setAttribute 設置屬性
>setAttribute是方法()，第一個參數填屬性 第二個填數值。

const myLink = document.querySelector('a');

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

## querySelectorAll 選擇全部並指定為陣列
>假設有兩個a連結

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") : 抓類別

const myLink = document.querySelector("a");

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

## 表單取值與賦予值
* 以下為用取值方式賦予值

<select class="list">
    <option value="台北市"></option>
</select>

const txt = document.querySelectorAll('.list');
txt.value = "桃園市";

# 3. Javascript Event事件
* event 是網頁的即時快照 會拍成物件 可以隨時呼叫物件元素進行觀察
>物件元素屬性位在console頁面

const btn = document.querySelector('.btn');
btn.addEventListener("click",function(e){
    console.log(e.layerX)
})

## preventDefault 取消預設觸發行為
*　常用１：在避免轉址行為　常用２：取消ｓｕｂｍｉｔ交出行為

const myLink = document.querySelector("a");

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

## addEventListener 註冊事件監聽教學

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

## 用Event事件寫一個加法器

const btn = document.querySelector(".btn");
const title = document.querySelector(".h1");
let count = 0;
//監聽 事件
btn.addEventListener("click",function(e){
    count+=1;
    title.textContent = count;
})

## 取得HTML 標籤

console.log(X.nodeName)

* e.target 取得目前所點擊元素所在位置

const list = document.querySelector(".list");

list.addEventListener("click",function(e){
    console.log(e.target)
})

## 用EVENT寫一個是否有點到按鈕的程式

const list = document.querySelector(".list");

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