网页的构成要素
JavaScript交互
重要程度：6 分
### 重点内容：JavaScript交互
JavaScript是一种编程语言，用于向网页添加交互功能。通过JavaScript，你可以实现用户与网页之间的动态互动，如响应用户的点击、输入等操作。
#### JavaScript的基本语法
- **变量声明**：使用 `var` 或 `let` 关键字来声明变量。
- **函数定义**：使用 `function` 关键字来定义函数。
- **事件处理**：通过在HTML元素上添加属性（如 `onclick`）来绑定JavaScript代码。
#### 示例1：简单的弹窗提示
<p onclick="showAlert()">点击我</p>
<script>
function showAlert() {
alert("你点击了这个段落！");
}
</script>
在这个例子中，当用户点击段落时，会弹出一个提示框显示 "你点击了这个段落！"。
#### 示例2：改变文本颜色
<p id="text">这是一个段落。</p>
<button onclick="changeColor()">改变颜色</button>
<script>
function changeColor() {
var textElement = document.getElementById("text");
textElement.style.color = "red";
}
</script>
在这个例子中，当用户点击按钮时，段落的文本颜色会变为红色。
#### 示例3：表单验证
<form onsubmit="return validateForm()">
<input type="text" id="name" placeholder="请输入姓名">
<input type="submit" value="提交">
</form>
<script>
function validateForm() {
var name = document.getElementById("name").value;
if (name === "") {
alert("姓名不能为空！");
return false;
}
return true;
}
</script>
在这个例子中，当用户尝试提交表单时，会先检查输入的姓名是否为空。如果为空，则弹出提示框并阻止表单提交。
这些示例展示了如何使用JavaScript来增加网页的交互性。通过这些基本的例子，你可以进一步扩展和学习更复杂的交互逻辑。