JavaScript 包括三部分：ECMAScript、DOM 和 BOM

1. ECMAScript

ECMAScript 是 JavaScript 的核心标准，它定义了 JavaScript 的语法和基本操作。以下是 ECMAScript 中重要的概念：

1.1 变量声明

ECMAScript 提供了三种方式来声明变量：var、let 和 const。它们的区别在于作用域和是否可以重新赋值。


// var 声明，具有函数作用域，可以重新赋值
var name = "Alice";
name = "Bob";

// let 声明，具有块级作用域，可以重新赋值
let age = 25;
age = 30;

// const 声明，具有块级作用域，不能重新赋值
const PI = 3.14159;
PI = 3.14;  // 这将会导致错误

1.2 数据类型

ECMAScript 中的基本数据类型包括：

Number：数值类型，如 123 或 3.14
String：字符串类型，如 "Hello, World!"
Boolean：布尔值类型，表示 true 或 false
Undefined：声明但未赋值的变量
Null：表示空值
Object：对象类型，用于存储键值对

1.3 条件与循环

条件语句和循环结构是 ECMAScript 中的基础控制流：


// 条件语句
if (age >= 18) {
    alert("成年");
} else {
    alert("未成年");
}

// for 循环
for (let i = 0; i < 5; i++) {
    console.log(i);  // 输出 0 到 4
}

// while 循环
let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

1.4 函数

函数是 ECMAScript 中的重要组成部分。函数可以通过关键字 function 来定义。


function sayHello(name) {
    return "Hello, " + name + "!";
}

console.log(sayHello("Alice"));  // 输出 "Hello, Alice!"

1.5 面向对象编程

ECMAScript 支持面向对象编程，使用类来定义对象的结构和行为：


// 定义一个类
class Car {
    constructor(brand, model) {
        this.brand = brand;
        this.model = model;
    }

    displayInfo() {
        return this.brand + " " + this.model;
    }
}

// 创建类的实例
let myCar = new Car("Toyota", "Corolla");
console.log(myCar.displayInfo());  // 输出 "Toyota Corolla"

2. DOM（文档对象模型）

**DOM**（Document Object Model）是一套与 HTML 和 XML 文档交互的 API。它允许 JavaScript 操作 HTML 元素、结构和样式。

2.1 访问与修改 HTML 元素

通过 DOM，JavaScript 可以访问和修改网页中的 HTML 元素：


// 获取元素并修改内容
document.getElementById("demo").innerHTML = "新内容";

// 修改元素样式
document.getElementById("demo").style.color = "red";

2.2 操作节点

JavaScript 可以通过 DOM 动态创建、添加或删除节点：


// 创建一个新的  元素
let newParagraph = document.createElement("p");
newParagraph.innerHTML = "这是一个新段落";
// 将其添加到页面
document.body.appendChild(newParagraph);

// 删除一个元素
let elementToRemove = document.getElementById("demo");
elementToRemove.parentNode.removeChild(elementToRemove);

2.3 事件处理

DOM 提供了事件处理功能，让 JavaScript 可以响应用户的操作（如点击、悬停等）：


// 为按钮添加点击事件
document.getElementById("myButton").addEventListener("click", function() {
    alert("按钮被点击了！");
});

3. BOM（浏览器对象模型）

**BOM**（Browser Object Model）允许 JavaScript 与浏览器进行交互，提供了对窗口、导航、屏幕等的访问。

3.1 窗口操作

BOM 提供了操作浏览器窗口的方法，例如打开新窗口、关闭窗口等：


// 打开一个新窗口
window.open("https://www.example.com");

// 关闭当前窗口
window.close();

3.2 浏览器信息

BOM 允许访问浏览器的详细信息，如浏览器名称、版本、平台等：


// 获取浏览器信息
let browserName = navigator.appName;
let browserVersion = navigator.appVersion;
console.log("浏览器名称: " + browserName);
console.log("浏览器版本: " + browserVersion);

3.3 URL 和导航

通过 BOM，JavaScript 可以操作浏览器的 URL 和导航历史记录：


// 获取当前 URL
let currentUrl = window.location.href;
console.log("当前页面 URL: " + currentUrl);

// 跳转到新页面
window.location.href = "https://www.example.com";

3.4 弹出框

BOM 提供了弹出框的功能，例如警告框、确认框和提示框：


// 弹出警告框
alert("这是一个警告框！");

// 弹出确认框
let confirmResult = confirm("你确定要继续吗？");
console.log("确认结果: " + confirmResult);

// 弹出提示框
let userInput = prompt("请输入你的名字：");
console.log("用户输入: " + userInput);