用JavaScript写简单网页
引言
在当今互联网时代，网页成为了人们获取信息和交流的重要工具。很多人都想学习如何编写网页，而JavaScript作为一种广泛使用的脚本语言，为网页的交互和动态效果提供了强大的支持。本文将介绍如何使用JavaScript编写简单的网页，并提供一些代码示例。
什么是JavaScript
JavaScript是一种脚本语言，最初是为了给网页添加交互功能而开发的。与HTML和CSS相比，JavaScript更具动态性，可以对网页进行操作、验证表单数据、动态修改网页内容等等。通过JavaScript，我们可以使网页更加生动有趣，并提供更好的用户体验。
HTML、CSS和JavaScript的关系
在编写网页时，HTML负责定义网页的结构和内容，CSS负责网页的样式和布局，而JavaScript则负责网页的交互和动态效果。这三者相互配合，共同构成了一个完整的网页。
编写简单网页的步骤
1. 创建HTML文件
首先，我们需要创建一个HTML文件，用来定义网页的结构和内容。可以使用任何文本编辑器来创建HTML文件，例如Notepad++、Sublime Text等。下面是一个简单的HTML文件示例：
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>
</head>
<body>
Hello, World!
<p>Welcome to my first web page.</p>
</body>
</html>
在上面的示例中，我们定义了一个标题（<title>），引入了一个外部的CSS样式表（<link>），以及一个外部的JavaScript文件（<script>）。这些都是为了增强网页的样式和交互效果。
2. 创建CSS文件
接下来，我们需要创建一个CSS文件，用来定义网页的样式和布局。同样可以使用文本编辑器来创建CSS文件，例如上面提到的Notepad++、Sublime Text等。下面是一个简单的CSS文件示例：
h1 {
color: blue;
font-size: 24px;
}
p {
color: gray;
font-size: 16px;
}
在上面的示例中，我们定义了标题（h1）和段落（p）的样式，分别设置了字体颜色和字体大小。
3. 创建JavaScript文件
最后，我们需要创建一个JavaScript文件，用来实现网页的交互和动态效果。同样可以使用文本编辑器来创建JavaScript文件，例如上面提到的Notepad++、Sublime Text等。下面是一个简单的JavaScript文件示例：
document.querySelector('h1').addEventListener('click', function() {
this.style.color = 'red';
});
在上面的示例中，我们通过document.querySelector方法选中了标题（h1）元素，并添加了一个点击事件监听器。当用户点击标题时，将会改变标题的字体颜色为红色。
4. 在浏览器中打开网页
完成上述步骤后，保存所有文件，并使用浏览器打开HTML文件。你将看到一个简单的网页，包含一个标题和一个段落。如果你点击标题，字体颜色将会变为红色。
代码示例
下面是一个更复杂的代码示例，展示了如何使用JavaScript创建一个简单的计算器网页：
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
padding: 10px;
border: 1px solid gray;
}
.calculator > div {
grid-column: span 1;
text-align: center;
background-color: lightgray;
cursor: pointer;
padding: 10px;
}
.calculator > div:hover {
background-color: gray;
}
.result {
