DOM 操作：認為有用
以下部分問題需要您編寫一些DOM 操作程式碼來完成——例如，透過 JavaScript 建立新的 HTML 元素，將其文字內容設定為等於特定的字串值，並將它們巢狀在頁面上現有的元素內部。
我們尚未在課程中明確教授過這部分內容，但您應該會看到一些使用了它的示例，我們希望您能夠自行研究需要哪些 DOM API 來成功回答問題。一個好的起點是我們的DOM 指令碼入門教程。
互動挑戰
首先，我們將提供一個由我們的 學習夥伴 Scrimba 建立的、關於函式返回值的趣味互動挑戰。
觀看嵌入的 scrim，並按照說明編輯程式碼，在時間軸上（小幽靈圖示）完成任務。完成後，您可以繼續觀看 scrim，檢查老師的解決方案與您的解決方案有何不同。
任務 1
完成我們的第一個函式任務
- 定義一個函式 —
chooseName()— 該函式從提供的陣列 (names) 中隨機選擇一個姓名，並將其列印到提供的段落 (para) 中。 - 呼叫一次
chooseName()函式。
js
const names = [
"Chris",
"Li Kang",
"Anne",
"Francesca",
"Mustafa",
"Tina",
"Bert",
"Jada",
];
const para = document.querySelector("p");
// Don't edit the code above here!
// Add your code here
點選此處顯示解決方案
你完成的 JavaScript 應該看起來像這樣
js
// ...
// Don't edit the code above here!
function chooseName() {
const randomNumber = Math.floor(Math.random() * names.length);
const choice = names[randomNumber];
para.textContent = choice;
}
chooseName();
任務 2
此任務要求您建立一個函式，該函式根據提供的五個輸入變數在提供的 <canvas>（參考變數 canvas，上下文可在 ctx 中獲取）上繪製一個矩形。
x— 矩形的 x 座標。y— 矩形的 y 座標。width— 矩形的寬度。height— 矩形的高度。color— 矩形的顏色。
js
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const x = 50;
const y = 60;
const width = 100;
const height = 75;
const color = "blue";
// Don't edit the code above here!
// Add your code here
點選此處顯示解決方案
你完成的 JavaScript 應該看起來像這樣
js
// ...
// Don't edit the code above here!
function drawSquare(x, y, width, height, color) {
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
drawSquare(x, y, width, height, color);
任務 3
在此任務中，您將回到任務 1 中提出的問題，旨在對其進行三項改進。
完成任務
- 將生成隨機數的程式碼重構為一個名為
random()的獨立函式，該函式接收兩個通用邊界作為引數（隨機數應在此範圍內），並返回結果。 - 更新
chooseName()函式，使其使用隨機數函式，將要從中選擇的陣列作為引數（使其更具靈活性），並返回結果。 - 將返回的結果列印到段落 (
para) 的textContent中。
js
const names = [
"Chris",
"Li Kang",
"Anne",
"Francesca",
"Mustafa",
"Tina",
"Bert",
"Jada",
];
const para = document.querySelector("p");
// Don't edit the code above here!
// Update the code below here
function chooseName() {
const randomNumber = Math.floor(Math.random() * names.length);
const choice = names[randomNumber];
para.textContent = choice;
}
chooseName();
點選此處顯示解決方案
你完成的 JavaScript 應該看起來像這樣
js
// ...
// Don't edit the code above here!
function random(min, max) {
const num = Math.floor(Math.random() * (max - min)) + min;
return num;
}
function chooseItem(array) {
const choice = array[random(0, array.length)];
return choice;
}
para.textContent = chooseItem(names);
任務 4
在此任務中，我們有一個姓名陣列，並使用 Array.filter() 來獲取一個僅包含長度小於 5 個字元的姓名的陣列。目前，filter 正在傳遞一個名為 isShort() 的命名函式。該函式檢查姓名的長度，如果姓名長度小於 5 個字元，則返回 true，否則返回 false。
要完成任務，請更新程式碼，使 isShort() 中的功能直接包含在 filter() 呼叫中，作為箭頭函式。看看您能使其變得多緊湊。
js
const names = [
"Chris",
"Li Kang",
"Anne",
"Francesca",
"Mustafa",
"Tina",
"Bert",
"Jada",
];
const para = document.querySelector("p");
// Don't edit the code above here!
// Update the code below here
function isShort(name) {
return name.length < 5;
}
const shortNames = names.filter(isShort);
para.textContent = shortNames;
點選此處顯示解決方案
你完成的 JavaScript 應該看起來像這樣
js
// ...
// Don't edit the code above here!
// Update the code below here
const shortNames = names.filter((name) => name.length < 5);
para.textContent = shortNames;