JavaScript 核心教程

JavaScript简介

JavaScript是一种轻量级、解释型的编程语言，主要用于网页交互。它最初由Netscape公司的Brendan Eich在1995年创建，现已成为Web开发的三大核心技术之一（HTML、CSS、JavaScript）。

重要特性

JavaScript具有以下特点：解释型语言、弱类型、基于原型、支持面向对象、函数式编程、事件驱动、跨平台（可在浏览器和Node.js中运行）。

在HTML中使用JavaScript

JavaScript可以通过多种方式嵌入到HTML文档中：

                            JavaScript引入方式
                            
                        

                            <!-- 1. 内部JavaScript -->
<script>
    // JavaScript代码写在这里
    console.log("Hello, JavaScript!");
</script>

<!-- 2. 外部JavaScript文件（推荐） -->
<script src="script.js"></script>

<!-- 3. 内联JavaScript（不推荐） -->
<button onclick="alert('按钮被点击了')">点击我</button>
                        

第一个JavaScript程序

点击下面的按钮运行你的第一个JavaScript程序：

结果将显示在这里...

变量与数据类型

变量是存储数据的容器。在JavaScript中，可以使用var、let和const来声明变量。

变量声明与数据类型

// 变量声明
var name = "张三"; // 旧方式，有作用域问题
let age = 25; // 块级作用域，推荐使用
const PI = 3.14159; // 常量，不可重新赋值

// JavaScript数据类型
let stringType = "Hello World"; // 字符串
let numberType = 42; // 数字
let booleanType = true; // 布尔值
let arrayType = ["苹果", "香蕉", "橙子"]; // 数组
let objectType = {"name": "李四", "age": 30}; // 对象
let nullType = null; // 空值
let undefinedType; // 未定义

// 使用typeof检查数据类型
console.log(typeof stringType); // "string"
console.log(typeof numberType); // "number"
console.log(typeof booleanType); // "boolean"
console.log(typeof arrayType); // "object" (注意：数组也是对象)
console.log(typeof nullType); // "object" (历史遗留问题)
console.log(typeof undefinedType); // "undefined"

数据类型实验

在下面的输入框中输入任何值，查看它的数据类型：

结果将显示在这里...

运算符与表达式

JavaScript提供了多种运算符，用于执行算术、比较、逻辑等操作。

JavaScript运算符

// 算术运算符
let sum = 10 + 5; // 加法: 15
let difference = 10 - 5; // 减法: 5
let product = 10 * 5; // 乘法: 50
let quotient = 10 / 5; // 除法: 2
let remainder = 10 % 3; // 取余: 1
let exponentiation = 2 ** 3; // 指数: 8

// 赋值运算符
let x = 10;
x += 5; // x = x + 5 → 15
x -= 3; // x = x - 3 → 12
x *= 2; // x = x * 2 → 24
x /= 4; // x = x / 4 → 6

// 比较运算符
console.log(10 == "10"); // true (宽松相等，只比较值)
console.log(10 === "10"); // false (严格相等，比较值和类型)
console.log(5 > 3); // true
console.log(5 < 3); // false
console.log(5 >= 5); // true
console.log(5 <= 3); // false

// 逻辑运算符
console.log(true && false); // false (与)
console.log(true || false); // true (或)
console.log(!true); // false (非)

// 三元运算符 (条件 ? 值1 : 值2)
let age = 18;
let canVote = age >= 18 ? "可以投票" : "不能投票";
console.log(canVote); // "可以投票"

JavaScript计算器

使用下面的计算器体验JavaScript运算符：

结果将显示在这里...

控制流程

控制流程语句用于控制代码的执行顺序，包括条件语句和循环语句。

条件语句与循环语句

// if-else 条件语句
let score = 85;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 80) {
    console.log("良好");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

// switch 语句
let day = "Monday";

switch (day) {
    case "Monday":
        console.log("今天是星期一");
        break;
    case "Tuesday":
        console.log("今天是星期二");
        break;
    default:
        console.log("今天不是星期一或星期二");
}

// for 循环
for (let i = 0; i < 5; i++) {
    console.log("循环次数: " + i);
}

// while 循环
let count = 0;
while (count < 3) {
    console.log("计数: " + count);
    count++;
}

// do-while 循环 (至少执行一次)
let num = 5;
do {
    console.log("数字: " + num);
    num--;
} while (num > 0);

// for...of 循环 (遍历数组)
let fruits = ["苹果", "香蕉", "橙子"];
for (let fruit of fruits) {
    console.log("水果: " + fruit);
}

// for...in 循环 (遍历对象属性)
let person = {"name": "张三", "age": 25, "city": "北京"};
for (let key