D11 - Javascript and DOM - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 11

Modern Web

小白大戰基礎網頁開發系列第 11 篇

D11 - Javascript and DOM

14th鐵人賽

arieltyit122

2022-09-26 08:06:02

621 瀏覽

分享至

JS 與 HTML 的連結

要為我們的 HTML/CSS 網站增加互動性的話有五大步驟，

需要將 JavaScript 串接到我們的 HTML（在中）
確認我們想要 listen 到的使用者或是頁面事件的元素
確認我們想要回應 (respond) 的事件
確認每個 response function 是什麼
當事件發生時為 listener 元素分配功能 (自己要 listen 的事件)

應用之前我們所學的, 網頁是由瀏覽器渲染出來的。我們添加 HTML 連結到 JS (類似於連結 CSS 文件的想法），並且瀏覽器會在加載 HTML/CSS 後執行 JS。

HTML, CSS and JavaScript code come together to create the content in the browser tab when the page is loaded (image: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#what_is_javascript_doing_on_your_page)

Linking to a JS File:

// template
<script src="filename"></script>
// example
<script src="example.js"></script>

<script> tag 應該放在 HTML 頁面的 <head> 中
頁面中使用的所有 JavaScript code 都存在單獨的 .js 文件中
可以直接放在 HTML 文件的 body 或 head中（如 CSS), 但是這樣寫法的 code quality 不太理想
通過將這些 concerns 保存在單獨的文件中來分離內容、樣式表示和行為

Event driven programming:

編寫由使用者事件 (user event)驅動的程式

與 Java 不同的是，JS 沒有 main。在使用者與網頁互動過程中, JS 對使用者的動作做出回應稱為 事件 (event)。

透過 id 來訪問元素 (element) with getElementById:

let name = document.getElementById("id");

document.getElementById 會 return 具有給定 id 元素的 DOM 物件
** 在給定 id 時, 要省略 #

Listening and Responding to Events with addEventListener:

element.addEventListener(event, function, useCapture)
// useCapture (Optional): true or false → default = false


// attaching a named function
element.addEventListener("click", handleFunction);

function handleFunction() {
// event handler code
}

JavaScript function 可以設置為 event handlers（也稱為 callbacks)
當你與元素互動並觸發事件 (event) 時，callback function 就會執行

最後讓我們用 event handler 來實做個簡單有趣的網頁吧!
click event :

HTML

<img id="pokeball" src="images/pokeball.jpg" alt="a pokeball" >
<button id="demo-btn">Click me!</button>

JavaScript

let demoButton = document.getElementById("demo-btn");
demoButton.addEventListener("click", changeImage);

function changeImage() {
  let pokeballImg = document.getElementById("pokeball");
  pokeballImg.src = "images/mystery.gif";
  pokeballImg.alt = "mystery pokemon"

Before clicking the button: