JavaScript 的引入
- 利用標籤插入在 HTML 中任何位置
<script>...</script>
- 建立一個 .js 檔，再利用指令引用進 HTML
<script src="./main.js"></script>
JavaScript 與瀏覽器的溝通
- 介面：如何改變介面
- 事件：如何監聽事件並作出反應
- 資料：如何跟伺服器交換資料
DOM 文件物件模型
- DOM 全名為 Document Object Model
- 就是把 HTML 的標記（ Document ） 轉換成物件( Object )。
JavaScript 可以操作物件，但不能直接操作頁面上的標籤，所以 DOM 就是瀏覽器幫 object 轉換成 => HTML 對應的標記，進而讓 JS 可以改變到頁面的元素。也就是說「DOM 就是 JS 跟 HTML 溝通的橋樑。」
理論上能操控 object 的程式語言都可以透過 DOM 把 object 轉換成 => HTML 對應的標記，但是因為瀏覽器只能看得懂 JavaScript，所以前端的語言就只有這個選項囉。
選取元素
- Tag
document.getElementsByTagName("header");
- Class Name
document.getElementsByClassName("cotainerBody");
- ID （ 注意：Element 沒有 s，因為 ID 元素只能有一個 ）
document.getElementById("container");
- CSS 選擇器
document.querySelector("#header p");- 可以選取到 #header 底下的第一個 p
document.querySelectorAll("#header p");- 可以選取到 #header 底下所有的 p
- 就像寫 CSS 來選擇元素。
- id 用 #、class 用 .、 tag 用
<tag 本身>、關係選擇器 > + ~ - 但 querySelector 只會回傳第一個元素，如果想要選取到所有匹配到的元素，可以改用 querySelectorAll。
element.closest()選取最靠近的父層元素注意：script 要放在元素後面，不然 JS 無法對元素操作
改變 CSS
- 先在 css 上對 class 設定好狀態
.checked {
background: yellow;
}
- 待事件觸發時，再幫元素加上該狀態的 class
element.classList.add('checked')
修改 className
- 增加 : .classList.add("active")
- 移除 : .classList.remove("active")
- 開關 : .classList.toggle("active")
- 沒有此 class → 新增、有此 class → 移除
- 檢查是否包含該 class :
.classList.contains("active")
修改 text & HTML
.innerText
- 只抓取標籤裡的內容、不包含標籤本身
- 只能寫入純文字
- 將要設定的值「賦值」到 innerText
element.innerText = "content"
.innerHTML
- 抓取標籤裡的所有內容、包含子標籤 ( 如果裡面沒有子標籤，抓取內容就跟 innerText 一樣 ）
- 跟 innerText 不同的是，可以寫入標籤
element.innerHTML = "<div>content</div>"
.outerHTML
- 改變標籤內容、包括標籤本身
element.outerHTML = "<new-element>...<div>content</div>...<new-element>"
新增元素
注意：要新增 or 刪除元素，要先找到它的父層，再利用 appendChild() or removeChild() 處理
創造元素
document.createElement('button')
- 加上屬性
.setAttribute('data-value', num)
- 加上 className
.classList.add('btn')
- 在 <目標物> 最後加上元素
.appendChild(<要加上去的元素>)
移除元素
.removeChild(<要加上去的元素>)
舉例：新增按鈕
document.querySelector('.add__btn').addEventListener('click', () => {
const btn = document.creatElement('button'); // 創造元素
btn.setAttribute('data-value', num); // 加上屬性
btn.classList.add('btn'); // 加上 className
btn.innerText = num; // 加上內容
document.querySelector('.outer').appendChild(btn); // 把新元素放上去
})
事件監聽 Event Listener
簡單來說就是指定畫面的某一元素，我們會監測當此元素發生 「什麼事」 、會再進行後續的處理，而我們可以要偵測指定「 事件 」是什麼、當它發生的這動作稱為 「觸發」。
- 在 element 綁定一個 click 事件
- 當滑鼠點擊到 element ，即觸發了element 的 click 事件，會進行 callback function
element.addEventListener('click', function(){
// ... callback => 當按鈕點擊時、要做的動作
});
事件資訊 function(e)
onClick 事件發生的同時，瀏覽器會記下當下的數據（點選的位置, 點選的標籤, 相關內容），我們可以藉由程式碼來撈取我們所需要的訊息
event 資訊會放在 callback function 裡面的第一個參數，通常都是取名 event 或簡寫 e，可以當成是一個「 物件 」，裡面有各種此事件的參數值，例如：
- click 點擊
- e.target 點擊到的元素
- e.screenX 滑鼠離視窗左邊的距離
- e.screenY 滑鼠離視窗上邊的距離
- 若是想拿到我們點擊的 element 屬性
e.target.getAttribute('data-value')
- keydown 按下按鍵
- e.key 按鍵號碼
表單事件處理 onSubmit
當表單 form 中的 submit 按鈕 click 的時候，會有個預設行為，就是「 送出表單 」，預設是 GET 方法，並把參數帶入原網址送出，而 submit 事件是在表單送出前會觸發，用處是可以拿來驗證表單內容。
例如 密碼 跟 確認密碼 輸入的值不一樣的話，可以用 e.preventDefault() 來阻止表單送出。
<body>
<form class="form" action="">
密碼：<input type="password" name="password1">
確認密碼：<input type="password" name="password2">
<button type="submit">送出表單</button>
</form>
<script>
const form = document.querySelector('.form');
form.addEventListener('submit', function(e){
const pw1 = document.querySelector('input[name="password1"]');
const pw2 = document.querySelector('input[name="password2"]');
if (pw1.value !== pw2.value) e.preventDefault(); // 密碼不同、不送出表單
});
</script>
</body>
阻止預設動作 e.preventDefault()
阻止瀏覽器上的特定元素在該事件預設的行為，以下是比較常用的情況：
<form>的 submit - 阻止送出表單<a>的 click 事件 - 阻止跳網址<input>的 keypress 事件 - 阻止輸入按鍵
/?utm_source=coderbridge-io&utm_medium=blog_related_post_img&utm_campaign=程式導師計畫第四期 學習紀錄_設計模式- 命令模式(Command Pattern)_@erickson122764_https://static.coderbridge.com/images/covers/default-post-cover-2.jpg)
