第1章: JavaScript 简介

什么是 JavaScript?

JavaScript 是世界上最流行的编程语言之一。截至2026年，JavaScript 已经从单纯的浏览器脚本语言发展成为全栈开发的核心技术，被广泛应用于前端、后端、移动应用、桌面应用和边缘计算等领域。

• HTML - 定义网页的结构
• CSS - 定义网页的样式
• JavaScript - 定义网页的行为和交互逻辑

JavaScript 的特点 视角

• 全栈能力 - 从前端到后端，从浏览器到服务器，JavaScript 无处不在
• 现代引擎 - V8、SpiderMonkey、JavaScriptCore 等引擎性能持续提升
• 类型系统 - TypeScript、JSDoc、以及原生类型提案让代码更健壮
• 异步优先 - Promise、async/await 成为异步编程的标准范式
• 跨平台 - React Native、Electron、Deno、Bun 等让 JS 跨所有平台
• AI 集成 - TensorFlow.js、WebAssembly AI 等让 JS 进入 AI 领域

JavaScript 能做什么?

• ✨ Web 前端 - React、Vue、Svelte 等现代框架构建复杂应用
• 🚀 后端开发 - Node.js、Bun、Deno 构建高性能服务器
• 📱 移动应用 - React Native、Capacitor 开发跨平台应用
• 💻 桌面应用 - Electron、Tauri 构建桌面软件
• 🤖 AI/ML - TensorFlow.js、WebAI 在浏览器中运行 AI 模型
• 🔧 自动化工具 - npm 脚本、Vite、ESLint 等开发生态
• 🌐 WebAssembly - 与 WASM 结合实现高性能计算
• 🎮 游戏开发 - Three.js、Babylon.js 创建3D游戏

第一个 JavaScript 程序 (现代写法)

让我们从最简单的程序开始。2026年推荐使用现代语法:

// 传统方式 (仍然可用)
alert('Hello, JavaScript!');

// 推荐方式 (更现代)
const showMessage = (message) => {
    console.log(message);
    // 或者使用 DOM 操作
    document.body.insertAdjacentHTML('beforeend', `
${message}
`);
};

showMessage('Hello, Modern JavaScript!');

在 HTML 中使用 JavaScript 最佳实践

推荐使用现代的方式来组织和加载 JavaScript:

1. 模块化脚本 (推荐)

<!-- 使用 ES 模块 -->
<script type="module" src="./app.js"></script>

<!-- 内联模块代码 -->
<script type="module">
    import { greet } from './greet.js';
    greet('Hello');
</script>

2. 延迟加载 (性能优化)

<!-- 延迟加载，不阻塞页面渲染 -->
<script src="main.js" defer></script>

<!-- 异步加载，适合第三方库 -->
<script src="analytics.js" async></script>

3. 事件监听器 (推荐)

<!-- HTML 中只添加 data 属性 -->
<button data-action="greet">点击我</button>

<!-- JavaScript 中处理事件 -->
<script type="module">
    document.querySelector('[data-action="greet"]')
        .addEventListener('click', () => {
            alert('点击了!');
        });
</script>

JavaScript 生态系统

现代 JavaScript 开发离不开强大的生态系统:

• 运行时 - Node.js、Bun、Deno
• 包管理 - npm、pnpm、yarn、bun
• 构建工具 - Vite、esbuild、Rollup
• 框架 - React、Vue、Svelte、SolidJS
• 类型系统 - TypeScript、JSDoc
• 测试 - Vitest、Jest、Playwright