文章目录
- 前言
- console.log()
- 1. 输出简单的文本
- 2. 输出变量
- 3. 输出表达式的结果
- 4. 输出对象和数组
- 5. 输出多个参数
- 6. 使用模板字符串
- 7. 输出错误信息
- alert()
- 基本用法
- 使用场景
- 注意事项
前言
提示：这里可以添加本文要记录的大概内容：
我只知道后端程序跑不通的时候可以用Debug功能，但是不知道前端怎么整，傻傻分不清
console.log()、alert() 都是JavaScript中用于在开发过程中输出信息或向用户显示消息的不同方法，它们的主要区别在于目的、使用场景以及展示方式。
提示：以下是本篇文章正文内容，下面案例可供参考
console.log()
console.log() 是一个在 JavaScript 中常用的函数，用于向浏览器的控制台或 Node.js 的控制台输出信息。这对于调试代码非常有用，因为它可以帮助你查看变量的值、函数的结果等。
下面是一些使用 console.log() 的示例：
1. 输出简单的文本
console.log("XXX返回结果");
console.log("Hello Runoob!");
2. 输出变量
let name = "John Doe";
console.log(name);
3. 输出表达式的结果
let x = 5;
let y = 10;
console.log(x + y); // 输出 15
4. 输出对象和数组
let person = {
name: "Jane Doe",
age: 30
};
console.log(person);
let numbers = [1, 2, 3, 4, 5];
console.log(numbers);
5. 输出多个参数
let message = "Hello";
let recipient = "Alice";
console.log(message, recipient);
6. 使用模板字符串
let name = "Charlie";
console.log(`Hello, ${name}!`);
7. 输出错误信息
虽然不是 console.log()，但是 console.error() 用于输出错误信息也很常见。
console.error("发生错误.");
在浏览器中可以在开发者工具的控制台（Console）面板看到这些输出。在 Node.js 环境中，输出将显示在终端或命令行界面中。
当在开发过程中使用 console.log() 时，记得在代码部署到生产环境前移除或注释掉这些调试语句，以避免不必要的性能开销和潜在的安全隐患。
alert()
下面是一个使用alert()的JavaScript例子，当用户点击“添加”按钮时，会弹出一个警告框，并显示自定义的消息：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert Example</title>
</head>
<body>
<button id="addButton">添加</button>
<script>
// 获取页面上的添加按钮元素
var addButton = document.getElementById("addButton");
// 为按钮添加点击事件监听器
addButton.addEventListener("click", function() {
// 当按钮被点击时执行的代码
alert("您已成功点击了'添加'按钮！");
// 可以在此处添加更多操作，如向列表中添加项目等
});
</script>
</body>
</html>
在上述JavaScript代码中，alert()函数的运行过程如下：
-
页面加载与元素获取：
当HTML页面加载完成后，JavaScript脚本开始执行。首先通过document.getElementById("addButton")获取到ID为"addButton"的按钮元素，并将其赋值给变量addButton。 -
事件监听器设置：
使用addEventListener方法为这个按钮添加了一个点击事件监听器。当指定的事件（在这里是 “click” 事件）发生时，即用户点击了该按钮，会触发回调函数中的代码。 -
用户交互触发事件：
用户在页面上点击“添加”按钮时，浏览器检测到了这一点击事件，并查找所有绑定到该按钮点击事件的监听器。 -
alert()函数调用：
在回调函数内部，有一行代码alert("您已成功点击了'添加'按钮！");。当点击事件被触发并执行回调函数时，这行代码被执行，从而调用了JavaScript内置的alert()函数。 -
弹窗呈现与中断执行：
alert()函数被调用后，浏览器立即创建一个警告对话框，并在其中显示传递的字符串信息——“您已成功点击了’添加’按钮！”。此时，网页的其他操作被暂时阻塞，等待用户对对话框进行响应。 -
用户响应与恢复执行：
用户点击对话框上的“确定”按钮后，浏览器捕获到用户的确认操作，关闭警告对话框，并重新恢复执行之前因调用alert()而暂停的JavaScript代码。在关闭alert()对话框之后，可以继续执行回调函数内的其他代码（如果有的话）。
alert() 是 JavaScript 中的一个内置函数，用于在用户的浏览器窗口中弹出一个警告对话框。这个对话框包含一个可选的消息和一个“确定”按钮。当 alert() 函数被调用时，浏览器会暂停脚本的执行，直到用户点击“确定”按钮。
基本用法
alert("Hello, World!");
这会在浏览器中弹出一个对话框，显示消息 “Hello, World!”，用户必须点击确定按钮才能继续浏览或执行后续的脚本。
使用场景
alert() 常用于以下几种情况：
- 调试：在开发阶段，
alert()可以帮助开发者查看变量的值或脚本的执行点。
let myVariable = "Some value";
alert(myVariable);
- 用户反馈：向用户显示重要的通知或确认信息。
alert("您的更改已保存.");
- 错误处理：显示错误信息给用户，尽管通常推荐使用更专业的错误处理机制。
try {
// 一些可能引发错误的代码
// ... ...
// ... ...
} catch (e) {
alert("发生错误: " + e.message);
}
注意事项
- 使用
alert()进行调试在开发环境中很有用，但在生产环境中应避免使用，因为它会打断用户体验。 - 过度使用
alert()可能会让用户感到厌烦，因此应谨慎使用。 - 在现代Web开发中，更推荐使用
console.log()、console.error()等方法进行调试，因为它们不会中断页面的正常流程。
由于 alert() 的阻塞性质，它并不适合异步操作或复杂的用户交互。在需要更复杂对话框的情况下，可以考虑使用模态对话框插件或库，如 SweetAlert 或 Bootstrap Modal。
