关注【索引目录】服务号，更多精彩内容等你来探索！
今天，我们将探讨：
-
什么是函数以及它们如何帮助组织您的代码。 -
如何有效地创建和使用函数。 -
了解函数参数、返回值和范围。 -
DOM 在现代 Web 开发中的作用。 -
选择、修改和监听 DOM 元素上的事件的技术。 -
使用这些概念构建完整的石头剪刀布游戏。
理解 JavaScript 函数：轻松实现可重用逻辑
JavaScript 中的函数是用于执行特定任务的代码块。它可以在整个应用程序中多次重复使用，从而帮助您编写更简洁、更易于维护的代码。
JavaScript 中的基本函数语法
function sayHello() {
console.log("Hello, world!");
}要运行此函数，您可以像这样调用它：
sayHello(); // Outputs: Hello, world!这个简单的例子展示了函数如何封装可以随时触发的逻辑。
函数中的参数：动态函数
当引入参数时，函数会变得更加强大，参数被视为调用函数时传递给函数的值的占位符。
function greetUser(name) {
console.log("Hello, " + name);
}
greetUser("Alice"); // Outputs: Hello, Alice
greetUser("Bob"); // Outputs: Hello, Bob这里，name是一个参数，和"Alice"是"Bob"传递给参数的实参（函数调用期间提供的实际值）。
您可以传递多个参数：
function addNumbers(a, b) {
console.log("The sum is:", a + b);
}
addNumbers(5, 10); // Outputs: The sum is: 15JavaScript 函数返回：获取结果
函数不仅可以像我们一直做的那样记录输出，还可以返回结果以供进一步使用：
function multiply(a, b) {
return a * b;
}
let result = multiply(4, 6);
console.log(result); // Outputs: 24返回值允许函数在表达式、赋值和程序的其他部分中使用。
函数作用域：变量存在的地方
在函数内部声明的变量只能在该函数内部访问。这被称为局部作用域。
function myFunction() {
let message = "Inside the function";
console.log(message);
}
myFunction(); // Outputs: Inside the function
console.log(message); // Error: message is not defined要访问函数外部的变量，请在全局范围内声明它：
let globalMessage = "Outside the function";
function showMessage() {
console.log(globalMessage);
}
showMessage(); // Outputs: Outside the function了解范围有助于防止命名冲突并使调试更容易。
编写函数的最佳实践
- 保持功能小而集中
：每个功能都应该做好一件事。 - 使用描述性名称
：根据函数的功能来命名函数，例如， calculateTotal()而不是doSomething()。 - 避免副作用
：尝试保持函数纯粹 - 这意味着除非必要，否则它们不会修改其范围之外的变量。 - 使用注释或 JSDoc
：对于复杂的功能特别有用。 - 默认参数
：ES6 为函数参数引入了默认值：
function greet(name = "Guest") {
console.log("Hello, " + name);
}
greet(); // Outputs: Hello, Guest
greet("Alice"); // Outputs: Hello, Alice理解 JavaScript 中的文档对象模型 (DOM)
文档对象模型 (DOM)是 HTML 文档的编程接口。它将文档的结构表示为对象树，使 JavaScript 能够读取、修改页面内容并对更改做出反应。
将 DOM 视为 HTML 和 JavaScript 之间的桥梁。
JavaScript 中选择 HTML 元素的语法
在操作元素之前，您需要使用如下方法选择它：
document.querySelector()：选择第一个匹配的元素。 document.querySelectorAll()：返回所有匹配的元素。 document.getElementById()：通过ID选择。 document.getElementsByClassName()：按类别名称选择。
例子：
<p id="intro">Welcome to our site!</p>
<button class="btn">Click me</button>
// By ID
const introParagraph = document.getElementById("intro");
// By class
const button = document.querySelector(".btn");
// By tag name
const paragraph = document.querySelector("p");在 JavaScript 中修改 HTML 内容
一旦选择，您可以更改元素内的文本或 HTML。
textContent：更新文本内容。 innerHTML：更新文本和 HTML（谨慎对待用户生成的内容）。
例子：
introParagraph.textContent = "Welcome back!";
button.innerHTML = "<strong>Submit</strong>";JavaScript 中的事件监听器代码片段
通过响应用户操作（如点击、按键或表单提交）使您的网页具有交互性。
button.addEventListener("click", function () {
alert("Button clicked!");
});您还可以传递命名函数：
function handleClick() {
console.log("Button was clicked.");
}
button.addEventListener("click", handleClick);JavaScript 事件监听器实践：动态更新分数
假设你的 HTML 中有一个分数显示：
<p>Your Score: <span id="score">0</span></p>您可以使用 JavaScript 动态更新它：
let score = 0;
function increaseScore() {
score++;
document.getElementById("score").textContent = score;
}现在每次increaseScore()叫号时，显示的分数都会立即更新。
可以作为复习练习的示例 DOM 项目
- 交互式待办事项列表
- 表单验证
- 图像滑块
- 暗模式切换
- 石头剪刀布游戏
我们现在来构建最后一个。
项目：使用函数和 DOM 的石头剪刀布
让我们结合所学知识来创建一个功能齐全的石头剪刀布游戏。
步骤 1：HTML 结构
<h2>Rock Paper Scissors</h2>
<button class="js-rock">Rock</button>
<button class="js-paper">Paper</button>
<button class="js-scissors">Scissors</button>
<p class="js-result"></p>
<p class="js-score">Score: 0</p>第 2 步：JavaScript 逻辑
let score = 0;
function playGame(playerMove) {
const moves = ["rock", "paper", "scissors"];
const computerMove = moves[Math.floor(Math.random() * 3)];
let result = "";
if (playerMove === computerMove) {
result = "It's a tie!";
} else if (
(playerMove === "rock" && computerMove === "scissors") ||
(playerMove === "paper" && computerMove === "rock") ||
(playerMove === "scissors" && computerMove === "paper")
) {
result = "You win!";
score++;
} else {
result = "You lose!";
score--;
}
document.querySelector(".js-result").textContent =
`You chose ${playerMove}, Computer chose ${computerMove}. ${result}`;
document.querySelector(".js-score").textContent = `Score: ${score}`;
}️ 步骤 3：添加事件监听器
document.querySelector(".js-rock").addEventListener("click", () => {
playGame("rock");
});
document.querySelector(".js-paper").addEventListener("click", () => {
playGame("paper");
});
document.querySelector(".js-scissors").addEventListener("click", () => {
playGame("scissors");
});本练习包含我们在本文或上一篇文章中未学习过的概念。希望我们能在下一篇文章中进一步讨论这些概念，尤其是 JavaScript 中的条件语句。
在此之前，我希望本文能对你有所帮助，并让你复习一下！
使用函数和 DOM 的高级技巧
1.缓存DOM元素
不要重复查询 DOM — 将引用存储在变量中。
const resultElement = document.querySelector(".js-result");
const scoreElement = document.querySelector(".js-score");
// Later in your function:
resultElement.textContent = "New result...";
scoreElement.textContent = "Score updated";2.在事件监听器中 使用箭头函数
箭头函数提供了简洁的语法：
button.addEventListener("click", () => {
console.log("Clicked!");
});3.事件委托
不要将事件监听器附加到每个元素，而是在父级监听：
document.body.addEventListener("click", function(event) {
if (event.target.matches(".js-rock")) {
playGame("rock");
}
});这对于动态添加的元素特别有用。
函数和 DOM 操作是原生 JavaScript 和 Web 开发的基础。无论您是构建小型交互功能还是大型应用，了解这些知识都能帮助您：
-
编写干净、可重复使用的代码。 -
让您的网站充满活力且反应灵敏。 -
提高性能和可维护性。
关注【索引目录】服务号，更多精彩内容等你来探索！