我們已經學會 JavaScript 的基礎了。接下來用兩個實際的小功能來練習。
圖片切換器
1var myImage = document.querySelector("img");2myImage.onclick = function() {3 let mySrc = myImage.getAttribute("src");4 if (mySrc === "images/sun.png") {5 myImage.setAttribute("src", "images/moon.png");6 } else {7 myImage.setAttribute("src", "images/sun.png");8 }9};程式碼拆解：
取得圖片元素的參考存到 myImage
設定 onclick 事件處理器
每次點擊：取得 src 屬性的值
用 if/else 判斷目前是哪張圖
切換到另一張
客製化歡迎訊息
<button>Change user</button>var myButton = document.querySelector("button");
var myHeading = document.querySelector("h1");
function setUserName() {
let myName = prompt("Please enter your name.");
if (!myName || myName === null) {
setUserName();
} else {
localStorage.setItem("name", myName);
myHeading.innerHTML = "歡迎你，" + myName;
}
}
if (!localStorage.getItem("name")) {
setUserName();
} else {
let storedName = localStorage.getItem("name");
myHeading.innerHTML = "歡迎你，" + storedName;
}
myButton.onclick = function() {
setUserName();
};!myName || myName === null 來處理這個情況。我們只稍稍體驗了 JavaScript 的一些皮毛。但你已經學會了：
這些就是所有網頁互動的基礎。