JAVASCRIPT
Copy
let element = document.getElementById("$ELEMENT ID");
let collection = document.getElementsByClassName("$ELEMENT CLASSNAME");

• let - 用來創建變數，JS 中還有另一種宣告方式: var，兩種差異在於 let 是 block-scoped，變數的生命週期只限於同一個 block ({ ... })，var 則是 function-scoped，變數在同個 function 都有效。

  從這裡可以看出 JS 跟 Python 一樣都是 untyped languages。

• document - JS 物件，可以當成是用來與 HTML 文件互動的介面。
• getElementById - 透過元素的 id 來選取元素，回傳型別為 HTMLElement 。
• getElementsByClassName - 透過元素的 class 來選取元素 不過由於 classname 並非獨特的，因此回傳時會以 collection 的形式來傳送多個元素，之後處理時可以用 collection[0]、collection[1] ... 來存取各別的元素。

JAVASCRIPT
Copy
let element = document.querySelector("$YOUR SELECTOR");
let nodelist = document.querySelectorAll("$YOUR SELECTOR");

getElementBy 跟 querySelector 傳回的資料型態不太一樣，不過初學時先忽略吧~~。

HTML
Copy
<script src="script.js"></script> <!-- 載入 JS 檔案 -->

JAVASCRIPT
Copy
window.onload = function() {
    setDemo();
}

function setDemo() {
    let button = document.getElementById("demo-button");
    button.onclick = updateDemoDisplay;
}

function updateDemoDisplay() {
    let text = document.getElementById("demo-input");
    let value = text.value;
    let display = document.getElementById("demo-display");
    display.textContent = value;
}

• window.onload - 前面提到 JS 應用需要提取 HTML 元素，但 HTML 元素必須等網頁載入後 (onload) 才會存在，所以建議是把主要執行的部分放到 window.onload 裡面呼叫，避免找不到元素。
• setDemo - 學會了 JS 生成網頁的三個步驟後，你可能會發現還少了點甚麼，就是觸發事件，前面說的流程都是在我們觸發一個事件後才會開始跑: 點擊按鈕，而 JS 中 HTML 元素都能設定 click 事件: button.onclick = updateDemoDisplay。
• updateDemoDisplay - 這塊就是前面提到的三個流程，我們取得使用者輸入資料的元素和之後要顯示的區塊、提取輸入的字串、設定顯示區塊內部的字串。