Appearance
3. 第一个 JavaScript 程序
现在，让我们编写你的第一个 JavaScript 程序！本章节将带你学习 JavaScript 的基本输出方法、代码注释和代码规范。
3.1 alert() 弹出提示框
alert() 是 JavaScript 中最基本的输出方法，它会在浏览器中弹出一个提示框，显示指定的内容。
基本用法
javascript
alert('Hello, World!');示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<body>
<script>
// 弹出一个提示框，显示 "Hello, World!"
alert('Hello, World!');
// 弹出一个提示框，显示变量的值
let name = 'John';
alert('Hello, ' + name + '!');
</script>
</body>
</html>注意事项
alert()会阻塞页面的执行，直到用户点击「确定」按钮- 不要在生产环境中过度使用
alert()，它会影响用户体验
3.2 console.log() 控制台打印（程序员必备）
console.log() 是 JavaScript 中用于在浏览器控制台打印信息的方法，是程序员调试代码的必备工具。
基本用法
javascript
console.log('Hello, World!');示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<body>
<script>
// 在控制台打印 "Hello, World!"
console.log('Hello, World!');
// 在控制台打印变量的值
let name = 'John';
let age = 30;
console.log('Name:', name);
console.log('Age:', age);
// 在控制台打印对象
let person = { name: 'John', age: 30 };
console.log('Person:', person);
// 在控制台打印数组
let fruits = ['apple', 'banana', 'cherry'];
console.log('Fruits:', fruits);
</script>
</body>
</html>如何查看控制台输出
- 在浏览器中打开包含
console.log()的页面 - 按 F12 打开开发者工具
- 切换到「控制台」选项卡，你会看到
console.log()的输出
3.3 代码注释的写法（单行 / 多行注释）
代码注释是程序员用来解释代码的文字，它不会被 JavaScript 引擎执行。良好的注释可以提高代码的可读性和可维护性。
单行注释
使用 // 开始单行注释：
javascript
// 这是一个单行注释
let name = 'John'; // 这也是一个单行注释多行注释
使用 /* */ 包裹多行注释：
javascript
/*
这是一个多行注释
可以跨越多行
用于解释复杂的代码块
*/
let name = 'John';注释的最佳实践
- 注释应该简洁明了，解释代码的目的和逻辑
- 不要注释显而易见的代码
- 当代码发生变化时，及时更新注释
- 使用注释来标记代码的重要部分或待完成的任务
3.4 新手必知：代码规范与命名习惯
良好的代码规范和命名习惯可以提高代码的可读性和可维护性，是成为一名优秀程序员的必备素质。
代码规范
- 缩进：使用 2 或 4 个空格进行缩进，保持代码结构清晰
- 分号：每条语句结束后使用分号
- 空格：在运算符两边、逗号后添加空格
- 换行：一行代码不要过长，超过 80 字符时应换行
- 括号：使用大括号包围代码块，即使只有一行代码
命名习惯
- 变量和函数：使用小驼峰命名法（camelCase），如
firstName、calculateTotal() - 常量：使用全大写字母和下划线，如
MAX_LENGTH、PI - 类：使用大驼峰命名法（PascalCase），如
Person、Car - 布尔值：使用
is、has、can等前缀，如isActive、hasPermission - 命名要语义化：使用描述性的名称，避免使用单个字母或无意义的名称
示例
javascript
// 好的命名
let firstName = 'John';
let isActive = true;
const MAX_AGE = 100;
function calculateTotal(price, quantity) {
return price * quantity;
}
// 不好的命名
let a = 'John'; // 无意义的名称
let flag = true; // 不语义化
const m = 100; // 无意义的名称
function calc(p, q) {
return p * q; // 不语义化的参数名
}小结
通过本章节的学习，你已经掌握了：
- 使用
alert()弹出提示框 - 使用
console.log()在控制台打印信息 - 编写单行和多行注释
- 遵循代码规范和命名习惯
这些是学习 JavaScript 的基础，在后续的章节中，我们将学习 JavaScript 的核心语法，包括变量、数据类型、运算符、条件语句、循环和函数等。
记住，编写代码时要注重代码的可读性和可维护性，这会让你的学习和工作更加轻松愉快！