HTML 与 JavaScript

HTML（HyperText Markup Language）用于构建网页的结构，而 JavaScript 则是一个编程语言，主要用于网页的交互、动态内容更新、表单验证、动画效果等功能。通过将 JavaScript 嵌入到 HTML 页面中，我们可以使网页更加生动和动态。

1. 基本语法

在 HTML 页面中嵌入 JavaScript，可以使用 <script> 标签。你可以将 JavaScript 代码直接写在 HTML 文件中，也可以通过外部 JavaScript 文件来引入。

1.1 内嵌 JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 示例</title>
</head>
<body>
    <h1>欢迎使用 JavaScript</h1>
    
    <script>
        // JavaScript 代码放在这里
        alert("Hello, World!");
    </script>
</body>
</html>
  • 解释：上面的代码在页面加载时会弹出一个包含 “Hello, World!” 的提示框（alert()）。

1.2 外部 JavaScript 文件

将 JavaScript 代码保存在一个单独的 .js 文件中，并通过 <script> 标签引入。

  1. 创建外部 JavaScript 文件（script.js）：
// script.js 文件内容
alert("这是外部 JavaScript 文件！");
  1. 在 HTML 页面中引入该文件：
<!DOCTYPE html>
<html>
<head>
    <title>外部 JavaScript 示例</title>
    <script src="script.js"></script>  <!-- 引入外部 JavaScript 文件 -->
</head>
<body>
    <h1>欢迎使用外部 JavaScript</h1>
</body>
</html>
  • 解释：这里的 <script src="script.js"></script> 会引入 script.js 文件的内容，在页面加载时显示弹出框。

2. JavaScript 基础概念

2.1 变量声明

JavaScript 中的变量用于存储数据。可以使用 var、let 或 const 来声明变量。

  • var：声明一个变量（已经过时，不推荐使用）。
  • let：声明一个块级作用域的变量，适合大多数情况。
  • const：声明常量，值不可改变。
let name = "Alice";    // 使用 let 声明变量
const age = 30;        // 使用 const 声明常量

2.2 数据类型

JavaScript 主要的数据类型有：

  • 字符串（String）：表示文本数据。
  • 数字（Number）：表示整数和浮点数。
  • 布尔值（Boolean）：表示 true 或 false。
  • 数组（Array）：用于存储多个值。
  • 对象（Object）：用于存储具有键值对的集合。
let name = "Alice";   // 字符串
let age = 30;         // 数字
let isActive = true;  // 布尔值
let fruits = ["Apple", "Banana", "Cherry"]; // 数组
let person = { name: "Alice", age: 30 }; // 对象

2.3 运算符

JavaScript 支持常见的运算符，如算术运算符、比较运算符、逻辑运算符等。

// 算术运算符
let sum = 10 + 5;  // 加法
let diff = 10 - 5; // 减法
let product = 10 * 5; // 乘法
let quotient = 10 / 5; // 除法

// 比较运算符
let isEqual = (10 == 5); // 等于
let isGreaterThan = (10 > 5); // 大于

// 逻辑运算符
let andCondition = (true && false); // 逻辑与
let orCondition = (true || false); // 逻辑或

2.4 条件语句

JavaScript 使用 if、else 和 else if 来执行条件判断。

let age = 20;

if (age < 18) {
    console.log("未成年");
} else if (age >= 18 && age < 60) {
    console.log("成年人");
} else {
    console.log("老年人");
}

2.5 循环语句

JavaScript 提供了 for 和 while 循环，用于反复执行某个操作。

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

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

3. DOM 操作

JavaScript 与 HTML 页面中的元素进行交互时，通常使用 DOM（Document Object Model）。通过 DOM，我们可以访问和操作页面中的元素、属性和内容。

3.1 获取元素

使用 getElementById()、getElementsByClassName()、querySelector() 等方法来获取页面中的元素。

let heading = document.getElementById("myHeading");  // 获取具有指定 id 的元素
let paragraph = document.querySelector(".myClass");  // 获取具有指定类名的第一个元素

3.2 修改元素内容

可以使用 .innerHTML 或 .textContent 来修改元素的内容。

// 修改元素的文本内容
heading.innerHTML = "这是新的标题内容";

// 修改元素的文本（不会解析 HTML）
paragraph.textContent = "这是新的段落文本";

3.3 修改元素样式

可以通过 .style 属性修改元素的 CSS 样式。

heading.style.color = "blue";  // 设置文本颜色为蓝色
heading.style.fontSize = "30px"; // 设置字体大小为 30px

3.4 添加事件监听器

使用 addEventListener() 来添加事件处理程序。例如，处理按钮点击事件。

<button id="myButton">点击我</button>

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("按钮被点击了！");
});
  • 解释：当用户点击按钮时，会弹出一个提示框。

4. 事件处理

JavaScript 允许我们处理各种用户交互事件，如点击、鼠标移入、键盘输入等。

4.1 常见的事件类型

  • click：鼠标点击事件
  • mouseover：鼠标移入事件
  • mouseout：鼠标移出事件
  • keydown：键盘按下事件
  • keyup：键盘释放事件
  • submit：表单提交事件

示例：表单提交事件

<form id="myForm">
    <input type="text" id="name" required>
    <input type="submit" value="提交">
</form>

<script>
    let form = document.getElementById("myForm");
    form.addEventListener("submit", function(event) {
        event.preventDefault();  // 阻止表单提交
        let name = document.getElementById("name").value;
        alert("表单已提交，姓名是：" + name);
    });
</script>
  • 解释：表单提交时，阻止默认的表单提交行为，弹出用户输入的姓名。

5. 常见 JavaScript 库与框架

为了提高开发效率，许多开发者使用 JavaScript 库和框架。以下是一些常见的 JavaScript 库和框架：

  • jQuery：一个简化 DOM 操作、事件处理、AJAX 等的库。
  • React：一个用于构建用户界面的 JavaScript 库，适用于单页应用（SPA）。
  • Vue.js：一个轻量级的 JavaScript 框架，用于构建交互式界面。
  • Angular：一个完整的 JavaScript 框架，适用于构建复杂的单页应用。

6. 总结

  • JavaScript 是网页开发中的重要工具，用于增加页面的交互性和动态效果。
  • 通过内嵌或外部的方式将 JavaScript 代码添加到 HTML 页面中。
  • JavaScript 支持变量、条件语句、循环、函数等基本编程概念。
  • 使用 JavaScript 可以操作 DOM，实现页面动态更新、事件处理等功能。
  • 学习和掌握 JavaScript 是前端开发的基础。

如果你有关于 JavaScript 的更多问题或需要具体示例，随时告诉我！