让网页动起来：JavaScript 初探

2025-02-03 2025-05-19 前端前端 30

在之前的教程中，我们学习了如何使用 CSS 为网页穿上漂亮的衣服，让它们拥有迷人的外观。但是，一个优秀的网页不仅仅是静态的展示，更重要的是能够与用户互动，响应用户的操作，呈现动态的效果。而实现这一切的关键技术就是 JavaScript！

本教程将带你初探 JavaScript 的世界，了解它的基本概念和如何让你的网页“动起来”。

什么是 JavaScript？

JavaScript (通常简称为 JS) 是一种轻量级的、解释型的、动态的、基于原型的脚本语言。虽然名字中带有 "Java"，但它和 Java 语言并没有直接的关系。JavaScript 最初是为了增强网页的交互性而设计的，现在已经发展成为一种功能强大的通用编程语言，可以用于前端开发（浏览器端）、后端开发（Node.js）、移动应用开发（React Native）、桌面应用开发（Electron）等等。

在网页开发中，JavaScript 主要负责处理用户在浏览器中的各种操作，例如：

响应按钮点击
处理表单提交
动态修改网页内容和样式
创建动画效果
与服务器进行数据交互
实现更丰富的用户界面组件

简单来说，如果 HTML 是网页的骨架，CSS 是网页的皮肤，那么 JavaScript 就是网页的灵魂，赋予了网页交互和动态的能力。

JavaScript 的基本语法

JavaScript 的语法和 CSS 类似，也需要遵循一定的规则。下面是一些基本概念：

语句 (Statements): JavaScript 代码由一系列语句组成，每条语句通常以分号 ; 结束（虽然在某些情况下可以省略，但建议养成写分号的好习惯）。

变量 (Variables): 用于存储数据的容器。你可以使用 let、const 或 var 关键字来声明变量。推荐使用 let 和 const，因为它们提供了更严格的作用域规则。
JavaScript

let message = "Hello JavaScript!"; // 使用 let 声明一个可以修改的变量
const PI = 3.14159; // 使用 const 声明一个常量，值不能被修改
var oldVariable = "不推荐使用 var"; // 早期版本使用的声明方式

数据类型 (Data Types): JavaScript 中有一些基本的数据类型，包括：
- 字符串 (String): 文本数据，用单引号 ' 或双引号 " 包裹。
- 数字 (Number): 包括整数和浮点数。
- 布尔值 (Boolean): 只有两个值：true（真）和 false（假）。
- 空值 (Null): 表示一个空值或不存在的对象。
- 未定义 (Undefined): 表示一个变量被声明了但没有被赋值。
- 对象 (Object): 复杂的数据结构，可以包含多个键值对。
- 数组 (Array): 有序的数据集合。
运算符 (Operators): 用于执行各种操作，例如：
- 算术运算符:+（加）、-（减）、*（乘）、/（除）、%（取余）。
- 赋值运算符:=（赋值）、+=、-=、*=、/= 等。
- 比较运算符:==（等于）、===（严格等于）、!=（不等于）、!==（严格不等于）、>（大于）、<（小于）、>=（大于等于）、<=（小于等于）。
- 逻辑运算符:&&（与）、||（或）、!（非）。
控制流 (Control Flow): 用于控制代码的执行顺序，例如：
- 条件语句:if、else if、else，根据条件执行不同的代码块。
- 循环语句:for、while、do...while，重复执行一段代码。

函数 (Functions): 用于封装可重复使用的代码块。
JavaScript

function greet(name) {
  console.log("你好，" + name + "！");
}

greet("小明"); // 调用函数

注释 (Comments): 用于在代码中添加说明，不会被 JavaScript 引擎执行。单行注释以 // 开头，多行注释以 /* 开头，以 */ 结尾。

如何在网页中引入 JavaScript

有几种方式可以将 JavaScript 代码添加到你的 HTML 文档中：

<script> 标签 (内部脚本): 将 JavaScript 代码直接写在 HTML 文件的 <script> 标签对之间。通常放在 <body> 标签的底部，以确保在 JavaScript 代码执行之前，HTML 结构已经加载完毕。
HTML

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 初探</title>
</head>
<body>
  <h1>欢迎！</h1>
  <button id="myButton">点击我</button>

  <script>
    const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      alert('你点击了按钮！');
    });
  </script>
</body>
</html>

外部 JavaScript 文件 (外部脚本): 将 JavaScript 代码保存在一个以 .js 为扩展名的独立文件中，然后在 HTML 文件中使用 <script> 标签的 src 属性引入。
script.js 文件内容：
JavaScript
```
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('你点击了外部脚本中的按钮！');
});
```
HTML 文件内容：

HTML
```
<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 初探</title>
</head>
<body>
  <h1>欢迎！</h1>
  <button id="myButton">点击我</button>
  <script src="script.js"></script>
</body>
</html>
```
推荐使用外部 JavaScript 文件，因为它能更好地组织代码，提高代码的可维护性和复用性。

让网页动起来：一个简单的例子

让我们看一个简单的例子，当用户点击一个按钮时，网页上的文字会发生变化。

HTML (index.html):

HTML

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript 动态效果</title>
</head>
<body>
  <h1 id="greeting">你好！</h1>
  <button id="changeButton">点击改变文字</button>

  <script>
    const greetingElement = document.getElementById('greeting');
    const changeButton = document.getElementById('changeButton');

    changeButton.addEventListener('click', function() {
      greetingElement.textContent = '欢迎来到 JavaScript 的世界！';
    });
  </script>
</body>
</html>

在这个例子中：

我们使用 document.getElementById() 方法获取了 HTML 中 id 为 greeting 的 <h1> 元素和 id 为 changeButton 的 <button> 元素。
我们使用 addEventListener() 方法为按钮添加了一个点击事件监听器。
当按钮被点击时，监听器中的函数会被执行，该函数使用 textContent 属性修改了 <h1> 元素的文本内容。

当你打开这个 HTML 文件并在浏览器中点击按钮时，你会看到标题文字从 "你好！" 变成了 "欢迎来到 JavaScript 的世界！"，这就是 JavaScript 让网页动起来的一个简单示例。

让网页动起来：JavaScript 初探

https://blog.moxuan.xin/archives/rang-wang-ye-dong-qi-lai-javascript-chu-tan

作者

moxuan

发布于

2025-02-03

更新于

2025-05-19

许可

前端前端