用JavaScript做一个网页
引言
在互联网时代，网页已经成为人们获取信息和互相交流的重要途径。为了更好地展示内容和提供交互，JavaScript成为了开发网页的必备工具之一。本文将介绍如何使用JavaScript来制作一个简单的网页，并提供代码示例。
准备工作
在开始之前，我们需要先准备好开发环境。首先，需要一个文本编辑器，用于编写HTML、CSS和JavaScript代码。常见的文本编辑器有Visual Studio Code、Sublime Text等。其次，需要一个现代的Web浏览器，用于展示和调试网页。常见的浏览器有Chrome、Firefox等。
基本结构
一个网页主要由HTML、CSS和JavaScript三部分组成。HTML用于定义网页的结构和内容，CSS用于控制网页的样式，而JavaScript用于实现网页的交互逻辑。下面是一个简单的HTML模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
欢迎来到我的网页
<p>这是一个用JavaScript制作的网页示例</p>
<script src="script.js"></script>
</body>
</html>
在上面的代码中，我们使用<!DOCTYPE html>声明了文档类型，指明这是一个HTML5文档。<html>标签包裹了整个网页的内容。<head>标签里面包含了一些元信息，比如字符编码和网页标题。在<head>标签中，我们还可以引入外部的CSS文件，通过<link>标签指定CSS文件的路径。<body>标签包含了网页的主要内容，比如标题和段落。最后，我们使用<script>标签引入了一个外部的JavaScript文件。
JavaScript交互
JavaScript是一种脚本语言，用于为网页添加交互功能。下面是一个简单的JavaScript代码示例，通过点击按钮改变网页中的文字：
// 获取按钮元素
var button = document.querySelector('button');
// 绑定点击事件
button.addEventListener('click', function() {
// 获取文字元素
var text = document.querySelector('p');
// 修改文字内容
text.textContent = '你点击了按钮！';
});
在上面的代码中，我们首先使用document.querySelector方法获取了一个按钮元素和一个段落元素。接下来，我们使用addEventListener方法给按钮元素绑定了一个点击事件。当用户点击按钮时，会触发事件处理函数，其中我们获取到了段落元素，并修改了它的文字内容。
CSS样式
CSS用于控制网页的样式，比如颜色、字体、布局等。下面是一个简单的CSS示例，用于改变网页标题和段落的颜色：
h1 {
color: blue;
}
p {
color: red;
}
在上面的代码中，我们使用选择器h1选中了一个标题元素，并将其颜色设为蓝色；使用选择器p选中了一个段落元素，并将其颜色设为红色。
类图
类图是一种用于表示类之间关系的图形化工具。下面是一个使用mermaid语法表示的类图示例：
classDiagram
class Animal {
- name: String
+ getName(): String
+ setName(name: String): void
+ eat(): void
}
class Dog {
- breed: String
+ getBreed(): String
+ setBreed(breed: String): void
+ bark(): void
}
Animal <|-- Dog
上面的代码定义了一个Animal类和一个Dog类，Dog类继承自Animal类。Animal类有一个私有属性name和三个公有方法getName、setName和eat。Dog类有一个私有属性breed和三个公有方法getBreed、`setBreed
