JavaScript 教程

纯干货教学，从零开始学习 JavaScript

JavaScript 简介

JavaScript 是一种用于创建交互式网页的脚本语言。它是 Web 开发的三大核心技术之一，与 HTML 和 CSS 一起构成了现代网页开发的基础。

🎯 JavaScript 的重要性

JavaScript 不仅用于网页开发，还可以用于服务器端编程、移动应用开发、桌面应用开发等多个领域。掌握 JavaScript 是成为一名全栈开发者的必备技能。

什么是 JavaScript？

JavaScript 是一种轻量级的、解释型的、面向对象的脚本语言。它最初由 Brendan Eich 在 1995 年创建，最初名为 Mocha，后来改名为 LiveScript，最后定名为 JavaScript。

JavaScript 主要特点：

  • 轻量级：JavaScript 代码体积小，加载速度快
  • 解释型：不需要编译，直接由浏览器解释执行
  • 面向对象：支持面向对象编程范式
  • 动态类型：变量类型在运行时确定
  • 跨平台：可以在不同的浏览器和环境中运行
  • 事件驱动：基于事件的编程模型

JavaScript 的历史发展

JavaScript 的发展历程：

  • 1995：JavaScript 诞生，最初用于 Netscape Navigator 浏览器
  • 1997：ECMAScript 1.0 发布，JavaScript 成为标准
  • 1999：ECMAScript 3 发布，成为 JavaScript 的主流版本
  • 2009：Node.js 发布，JavaScript 开始用于服务器端
  • 2015：ECMAScript 6 (ES6) 发布，添加了大量新特性
  • 2017 至今：ECMAScript 每年发布一个新版本，不断改进和扩展

JavaScript 的应用场景

JavaScript 的应用场景非常广泛：

  • 前端开发：创建交互式网页，使用框架如 React、Vue、Angular 等
  • 后端开发：使用 Node.js 开发服务器端应用
  • 移动应用开发：使用 React Native、Ionic 等框架开发跨平台移动应用
  • 桌面应用开发：使用 Electron 开发跨平台桌面应用
  • 游戏开发：使用 Canvas、WebGL 或游戏引擎如 Phaser 开发网页游戏
  • 人工智能：使用 TensorFlow.js 等库进行机器学习
  • 物联网：使用 Node.js 开发物联网应用

JavaScript 与 ECMAScript 的关系

ECMAScript 是 JavaScript 的标准规范，由 ECMA International 组织制定。JavaScript 是 ECMAScript 规范的一种实现。

主要版本：

  • ES5（2009）：广泛支持的版本，所有现代浏览器都支持
  • ES6/ES2015（2015）：添加了大量新特性，如箭头函数、类、模块等
  • ES7/ES2016（2016）：添加了 Array.prototype.includes() 和指数运算符
  • ES8/ES2017（2017）：添加了 async/await、Object.values() 等
  • ES9/ES2018（2018）：添加了异步迭代器、剩余参数等
  • ES10/ES2019（2019）：添加了 Array.prototype.flat()、String.prototype.trimStart() 等
  • ES11/ES2020（2020）：添加了 BigInt、可选链操作符等
  • ES12/ES2021（2021）：添加了逻辑赋值运算符、数字分隔符等

JavaScript 的运行环境

JavaScript 可以在以下环境中运行：

  • 浏览器：如 Chrome、Firefox、Safari、Edge 等
  • 服务器端：使用 Node.js
  • 移动设备：使用 React Native、Ionic 等框架
  • 桌面应用：使用 Electron
  • 嵌入式设备：使用 Node.js 或其他运行时

JavaScript 的基本结构

一个简单的 JavaScript 程序结构：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 示例</title>
</head>
<body>
    <h1>JavaScript 示例</h1>
    <p id="demo">这是一个段落</p>
    <button onclick="myFunction()">点击我</button>
    
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "Hello, JavaScript!";
        }
    </script>
</body>
</html>

浏览器控制台使用指南

浏览器控制台是学习 JavaScript 的最佳工具之一，它可以让你直接在浏览器中测试和运行 JavaScript 代码。

如何打开浏览器控制台

  • Chrome / Edge：按 F12 键，或右键点击页面 → 检查 → 控制台
  • Firefox：按 F12 键，或右键点击页面 → 检查元素 → 控制台
  • Safari：偏好设置 → 高级 → 显示开发菜单，然后按 Option + Command + C

控制台基本操作

  • 输出信息：使用 console.log() 函数输出信息
  • 执行代码：在控制台中直接输入 JavaScript 代码并按 Enter 键执行
  • 查看变量：直接输入变量名查看其值
  • 调试代码：使用 debugger 语句设置断点

控制台示例

// 输出文本
console.log("Hello, JavaScript!");

// 输出变量
let name = "张三";
console.log(name);

// 输出对象
let person = { name: "李四", age: 25 };
console.log(person);

// 输出数组
let fruits = ["苹果", "香蕉", "橙子"];
console.log(fruits);

// 输出错误信息
console.error("这是一个错误信息");

// 输出警告信息
console.warn("这是一个警告信息");

第一个 JavaScript 程序

让我们创建一个简单的 JavaScript 程序，体验 JavaScript 的基本功能：

// 步骤 1: 创建一个 HTML 文件，保存为 index.html
// 步骤 2: 在文件中添加以下代码

<!DOCTYPE html>
<html>
<head>
    <title>我的第一个 JavaScript 程序</title>
</head>
<body>
    <h1>欢迎来到 JavaScript 世界！</h1>
    <p id="message">点击按钮查看问候语</p>
    <button onclick="showGreeting()">点击我</button>
    
    <script>
        // 定义一个函数
        function showGreeting() {
            // 获取当前时间
            let now = new Date();
            let hour = now.getHours();
            
            // 根据时间生成问候语
            let greeting;
            if (hour < 12) {
                greeting = "早上好！";
            } else if (hour < 18) {
                greeting = "下午好！";
            } else {
                greeting = "晚上好！";
            }
            
            // 显示问候语
            document.getElementById("message").innerHTML = greeting + "欢迎学习 JavaScript！";
            
            // 在控制台输出信息
            console.log("问候语已显示：" + greeting);
        }
    </script>
</body>
</html>

JavaScript 入门常见问题

  • 问题 1: 代码不执行

    • 解决方案：检查浏览器控制台是否有错误信息，确保代码语法正确，脚本标签位置正确。

  • 问题 2: 变量未定义

    • 解决方案：确保变量已经声明，检查变量名拼写是否正确，注意变量作用域。

  • 问题 3: 函数不工作

    • 解决方案：检查函数名是否正确，参数是否匹配，函数是否在调用前定义。

  • 问题 4: DOM 操作失败

    • 解决方案：确保元素已经加载完成，检查元素 ID 是否正确，使用 DOMContentLoaded 事件。

  • 问题 5: 浏览器兼容性

    • 解决方案：使用现代浏览器，了解 ECMAScript 标准，必要时使用 polyfill。

JavaScript 的优缺点

优点：

  • 简单易学，语法相对简单
  • 跨平台，可在不同环境中运行
  • 功能强大，可以实现复杂的交互效果
  • 生态系统丰富，有大量的库和框架
  • 社区活跃，学习资源丰富

缺点：

  • 浏览器兼容性问题
  • 性能不如编译型语言
  • 动态类型可能导致运行时错误
  • 单线程模型在处理大量计算时可能阻塞

JavaScript 学习路径

为了帮助初学者系统地学习 JavaScript，我们设计了以下学习路径：

第 1 周：JavaScript 基础

  • 第 1 天：JavaScript 简介和环境搭建
  • 第 2 天：变量和数据类型
  • 第 3 天：运算符和表达式
  • 第 4 天：控制流语句（if-else, switch）
  • 第 5 天：循环语句（for, while）
  • 第 6 天：函数基础
  • 第 7 天：综合练习

第 2 周：JavaScript 进阶

  • 第 8 天：对象基础
  • 第 9 天：数组和数组方法
  • 第 10 天：字符串和字符串方法
  • 第 11 天：日期和时间
  • 第 12 天：错误处理
  • 第 13 天：JSON 数据格式
  • 第 14 天：综合练习

第 3 周：DOM 操作

  • 第 15 天：DOM 简介
  • 第 16 天：选择元素
  • 第 17 天：修改元素内容和属性
  • 第 18 天：事件处理基础
  • 第 19 天：事件冒泡和捕获
  • 第 20 天：DOM 遍历和操作
  • 第 21 天：综合练习

第 4 周：JavaScript 高级特性

  • 第 22 天：函数表达式和箭头函数
  • 第 23 天：闭包和作用域
  • 第 24 天：原型和原型链
  • 第 25 天：ES6 类
  • 第 26 天：异步编程基础
  • 第 27 天：Promise 和 async/await
  • 第 28 天：综合项目

学习 JavaScript 的建议

  • 从基础开始：掌握变量、数据类型、运算符等基础知识
  • 实践为主：通过编写实际项目来巩固所学知识
  • 学习标准：了解 ECMAScript 标准，掌握最新特性
  • 使用工具：学习使用现代前端工具，如 npm、webpack 等
  • 阅读源码：学习优秀的 JavaScript 代码，提高编程水平
  • 参与社区：加入 JavaScript 社区，分享经验，解决问题
  • 每日练习：坚持每天编写 JavaScript 代码，培养编程思维
  • 构建项目：从简单的项目开始，逐步挑战更复杂的项目

JavaScript 学习资源推荐

  • 官方文档：MDN Web Docs
  • 在线教程：JavaScript 教程网站（本网站）
  • 视频教程：各种在线学习平台的 JavaScript 课程
  • 书籍：《JavaScript 高级程序设计》、《你不知道的 JavaScript》
  • 练习平台：LeetCode、CodeWars、HackerRank
  • 社区：Stack Overflow、GitHub、掘金

📝 学习检查

通过本章节的学习，你应该了解：

  • JavaScript 是什么
  • JavaScript 的历史发展
  • JavaScript 的应用场景
  • JavaScript 的基本特点
  • JavaScript 与 ECMAScript 的关系