🚀 第一章：JavaScript 初探与环境搭建

开启 JavaScript 学习之旅

1.1 JS 能做什么？

            JavaScript 是一门功能强大的编程语言，几乎可以在任何环境中运行。
        

核心功能

交互功能 - 响应用户操作，如点击、输入等
逻辑处理 - 执行复杂的计算和业务逻辑
DOM 操作 - 动态修改网页内容和样式
服务端开发 - 使用 Node.js 或 Deno 构建后端服务
移动应用 - 使用 React Native、Electron 等构建跨平台应用
游戏开发 - 构建网页游戏和休闲游戏
AI 应用 - 运行机器学习模型和处理数据

运行环境

环境	描述	代表技术
浏览器	客户端运行环境	Chrome, Firefox, Safari
Node.js	服务端运行环境	Node.js 22+
Deno	现代服务端运行时	Deno
嵌入式	在其他应用中运行	Electron, React Native

1.2 运行环境

浏览器控制台

浏览器控制台是学习和调试 JavaScript 的最佳工具：

打开任意网页
按 F12 或右键选择「检查」
切换到「控制台」(Console) 标签
输入 JavaScript 代码并按回车执行

编辑器 + Node.js

对于严肃的开发，推荐使用：

VS Code - 功能强大的代码编辑器
Node.js 22+ - 最新版本的 JavaScript 运行时

Hello World 示例

// 在浏览器控制台或 Node.js 中执行
console.log('Hello, JavaScript!');

1.3 引入方式

<script> 标签

// 内联脚本
<script>
    console.log('Hello from inline script');
</script>

// 外部脚本
<script src='script.js'></script>

defer vs async

属性	加载时机	执行时机	适用场景
无属性	阻塞 HTML 解析	立即执行	小型脚本
async	并行加载	加载完成后立即执行	独立脚本
defer	并行加载	HTML 解析完成后执行	依赖 DOM 的脚本

最佳实践：对于依赖 DOM 的脚本，使用 defer 属性；对于独立的分析或广告脚本，使用 async。

1.4 严格模式

            严格模式 ('use strict') 可以帮助你写出更安全、更规范的代码。
        

启用严格模式

// 在脚本顶部添加
'use strict';

// 或在函数内部添加
function myFunction() {
    'use strict';
    // 函数体
}

严格模式的好处

禁止使用未声明的变量
禁止删除变量或函数
禁止重复参数名
禁止使用 eval() 全局作用域
限制 this 的指向
禁止八进制字面量

1.5 输出与调试

console.log 的高级用法

// 基本用法
console.log('Hello');

// 带变量
const name = 'John';
console.log('Hello, ', name);

// 模板字符串
console.log(`Hello, ${name}`);

// 表格
const users = [{ name: 'John', age: 30 }, { name: 'Jane', age: 25 }];
console.table(users);

// 时间
console.time('loop');
for (let i = 0; i < 1000; i++) {
    // 循环代码
}
console.timeEnd('loop');

// 分组
console.group('User Info');
console.log('Name: John');
console.log('Age: 30');
console.groupEnd();

// 警告和错误
console.warn('This is a warning');
console.error('This is an error');

断点调试

在 VS Code 中打开文件
点击代码行号左侧设置断点
使用调试器运行代码
在调试面板中查看变量和调用栈

动手练习

练习 1：环境搭建

安装 Node.js 22+
安装 VS Code
创建一个简单的 JavaScript 文件
在终端中运行该文件

练习 2：控制台调试

打开浏览器控制台
尝试使用 console.log 的各种方法
创建一个对象并使用 console.table 查看
使用 console.time 测试一段代码的执行时间

练习 3：脚本引入

创建一个 HTML 文件
添加内联脚本和外部脚本
测试 defer 和 async 属性的效果
在脚本中使用严格模式