JavaScript 教程

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

JavaScript 基础

JavaScript 基础章节将介绍 JavaScript 的基本语法、结构和使用方法，帮助您快速上手 JavaScript 编程。

🎯 开始您的 JavaScript 基础学习

掌握 JavaScript 基础是学习更高级 JavaScript 特性的前提。本章节将为您打下坚实的基础。

JavaScript 的引入方式

JavaScript 可以通过以下三种方式引入到 HTML 页面中：

1. 内联脚本

直接在 HTML 元素中使用事件属性：

<button onclick="alert('Hello, JavaScript!')">点击我</button>

2. 内部脚本

在 HTML 页面中使用 <script> 标签：

<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "Hello, JavaScript!";
    }
</script>

3. 外部脚本

使用外部 JavaScript 文件：

<script src="script.js"></script>

JavaScript 的基本语法

1. 语句

JavaScript 语句是执行特定操作的指令，通常以分号结尾：

let x = 5; // 声明变量并赋值
console.log(x); // 输出变量值

2. 注释

JavaScript 支持单行注释和多行注释：

// 这是单行注释

/*
这是
多行注释
*/

3. 变量

使用 var、let 或 const 声明变量：

var name = "John"; // 函数作用域变量
let age = 30; // 块级作用域变量
const pi = 3.14; // 常量

4. 数据类型

JavaScript 有多种数据类型：

let str = "Hello"; // 字符串
let num = 123; // 数字
let bool = true; // 布尔值
let arr = [1, 2, 3]; // 数组
let obj = {name: "John", age: 30}; // 对象
let undef; // undefined
let nul = null; // null

5. 运算符

JavaScript 支持各种运算符：

let x = 10;
let y = 5;

// 算术运算符
console.log(x + y); // 15
console.log(x - y); // 5
console.log(x * y); // 50
console.log(x / y); // 2
console.log(x % y); // 0

// 赋值运算符
let z = x; // 10
z += y; // 15

// 比较运算符
console.log(x > y); // true
console.log(x == y); // false

// 逻辑运算符
console.log(x > 0 && y > 0); // true
console.log(x > 0 || y < 0); // true
console.log(!(x > y)); // false

6. 函数

函数是可重复使用的代码块：

// 函数声明
function greet(name) {
    return "Hello, " + name + "!";
}

// 函数调用
console.log(greet("John")); // Hello, John!

// 箭头函数
const greetArrow = (name) => "Hello, " + name + "!";
console.log(greetArrow("John")); // Hello, John!

7. 对象

对象是键值对的集合：

// 对象字面量
const person = {
    name: "John",
    age: 30,
    greet: function() {
        return "Hello, my name is " + this.name;
    }
};

// 访问对象属性
console.log(person.name); // John
console.log(person["age"]); // 30

// 调用对象方法
console.log(person.greet()); // Hello, my name is John

8. 数组

数组是有序的值的集合：

// 数组字面量
const fruits = ["apple", "banana", "orange"];

// 访问数组元素
console.log(fruits[0]); // apple

// 添加元素
fruits.push("grape");

// 遍历数组
fruits.forEach(function(fruit) {
    console.log(fruit);
});

JavaScript 的执行顺序

JavaScript 代码按照从上到下的顺序执行，但有一些特殊情况：

  • 变量提升：变量声明会被提升到作用域顶部
  • 函数提升：函数声明会被提升到作用域顶部
  • 异步执行：某些操作（如网络请求、定时器）会异步执行

变量提升示例

console.log(x); // undefined
var x = 5;
console.log(x); // 5

函数提升示例

greet(); // Hello, World!
function greet() {
    console.log("Hello, World!");
}

JavaScript 的错误处理

使用 try-catch 语句处理错误：

try {
    // 可能会出错的代码
    let x = y + 5;
} catch (error) {
    // 处理错误
    console.log("错误：" + error.message);
} finally {
    // 无论是否出错都会执行的代码
    console.log("执行完成");
}

JavaScript 的输出方式

JavaScript 可以通过以下方式输出内容：

1. console.log()

在浏览器控制台输出内容：

console.log("Hello, World!");
console.log(123);
console.log({name: "John", age: 30});

2. alert()

显示警告对话框：

alert("Hello, World!");

3. document.write()

在 HTML 文档中写入内容：

document.write("Hello, World!");

4. 修改 HTML 元素

修改 HTML 元素的内容：

document.getElementById("demo").innerHTML = "Hello, JavaScript!";

JavaScript 的严格模式

使用严格模式可以帮助您编写更安全、更规范的 JavaScript 代码：

'use strict';

// 严格模式下的代码
let x = 5;
console.log(x);

严格模式的特点：

  • 禁止使用未声明的变量
  • 禁止删除变量或函数
  • 禁止重复参数名
  • 禁止使用 with 语句
  • 修改 this 的行为

JavaScript 的调试

JavaScript 调试是开发过程中的重要环节，可以帮助您找出并修复代码中的错误：

1. 使用 console.log()

在控制台输出变量值和执行状态：

let x = 5;
console.log("x 的值：", x);
x = x + 10;
console.log("x 新的值：", x);

2. 使用断点

在浏览器开发者工具中设置断点，暂停代码执行：

  1. 打开浏览器开发者工具（按 F12）
  2. 切换到 "Sources" 或 "源代码" 选项卡
  3. 找到您的 JavaScript 文件
  4. 点击行号设置断点
  5. 刷新页面，代码会在断点处暂停

3. 使用 debugger 语句

在代码中使用 debugger 语句设置断点：

let x = 5;
debugger; // 代码会在这里暂停
x = x + 10;
console.log(x);

💡 学习提示

JavaScript 基础是学习更高级 JavaScript 特性的基础，建议您：

  • 多写代码，通过实践巩固所学知识
  • 尝试修改示例代码，观察结果变化
  • 使用浏览器开发者工具调试代码
  • 阅读 JavaScript 文档，了解更多细节

📝 学习检查

通过本章节的学习，你应该掌握：

  • JavaScript 的三种引入方式
  • JavaScript 的基本语法
  • JavaScript 的数据类型
  • JavaScript 的执行顺序
  • JavaScript 的错误处理
  • JavaScript 的输出方式
  • JavaScript 的调试方法