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;