概述
脚本（Script）是一种与HTML配合使用的小型程序，能够增强网页的交互性、动态效果和用户体验，例如实现鼠标点击时的提示框功能。目前，JavaScript是Web开发中最广泛使用的脚本语言。
基本示例
<!DOCTYPE html>
<html>
<body>
<h2>日期时间显示示例</h2>
<button type="button" onclick="document.getElementById('timeDisplay').innerHTML = new Date().toLocaleString()">
点击显示当前日期时间
</button>
<p id="timeDisplay"></p>
</body>
</html>
HTML <script> 标签
<script> 标签用于定义客户端脚本，可包含脚本语句或引用外部JavaScript文件。该标签可放置在<head>或<body>部分。
主要功能包括：
-
图像动态处理
-
表单数据验证
-
内容动态更新
JavaScript通过document.getElementById()方法选择HTML元素。
基础应用示例
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript文本修改示例</h2>
<p id="textDisplay"></p>
<script>
document.getElementById("textDisplay").innerHTML = "欢迎访问易编程教程网站";
</script>
</body>
</html>
HTML事件与JavaScript交互
事件是指用户或浏览器触发的动作，如鼠标点击、页面加载等。JavaScript通过事件处理器响应这些事件。
语法结构
<元素 事件="JavaScript代码">
实践示例
<input type="button" value="点击问候" onclick="alert('您好！欢迎学习编程')">
常见事件类型
-
表单事件：重置(reset)、提交(submit)
-
选择事件：文本选择(select)
-
焦点事件：获取焦点(focus)、失去焦点(blur)
-
鼠标事件：单击(click)、双击(dblclick)、移动(mousemove)
-
窗口事件：加载(load)、卸载(unload)
窗口事件属性表
| 事件处理器 | 事件类型 | 触发条件 |
|---|---|---|
| onblur | 失去焦点 | 表单输入项失去焦点时 |
| onclick | 点击 | 用户点击表单元素或链接时 |
| onsubmit | 提交 | 用户向服务器提交表单时 |
| onload | 加载 | 页面在浏览器中完成加载时 |
| onfocus | 获取焦点 | 用户聚焦到输入字段时 |
| onselect | 选择 | 用户选择表单输入内容时 |
JavaScript功能演示
1. 动态修改HTML内容
<!DOCTYPE html>
<html>
<body>
<p>JavaScript可动态更新HTML元素内容：</p>
<button type="button" onclick="updateContent()">点击更新内容</button>
<p id="contentArea"></p>
<script>
function updateContent() {
document.getElementById("contentArea").innerHTML = "内容已成功更新！";
}
</script>
</body>
</html>
2. 动态改变样式
<!DOCTYPE html>
<html>
<body>
<p id="styleDemo">JavaScript可修改HTML元素的样式表现。</p>
<script>
function changeStyle() {
const element = document.getElementById("styleDemo");
element.style.fontSize = "20px";
element.style.color = "#2c3e50";
element.style.backgroundColor = "#ecf0f1";
element.style.padding = "15px";
}
</script>
<button type="button" onclick="changeStyle()">应用新样式</button>
</body>
</html>
3. 动态更新属性
<!DOCTYPE html>
<html>
<body>
<script>
function toggleImage(state) {
const imageElement = document.getElementById('dynamicImage');
imageElement.src = state ?
'https://www.ebingou.cn/images/active.png' :
'https://www.ebingou.cn/images/inactive.png';
}
</script>
<img id="dynamicImage" src="https://www.ebingou.cn/images/inactive.png"
width="120" height="120" alt="状态指示图">
<p>
<button type="button" onclick="toggleImage(true)">启用状态</button>
<button type="button" onclick="toggleImage(false)">禁用状态</button>
</p>
</body>
</html>
外部脚本引用
当多个HTML文件需要共享相同脚本时，可将JavaScript代码保存在外部文件中（扩展名为.js）。
引用语法
<script type="text/javascript" src="脚本路径.js"></script>
实践示例
HTML文件：
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.ebingou.cn/scripts/validation.js"></script>
</head>
<body>
<h2>外部JavaScript示例</h2>
<form onsubmit="validateForm()">
<label>用户名称：</label><br>
<input type="text" name="username" id="usernameField"><br>
<label>电子邮箱：</label><br>
<input type="email" name="email"><br>
<input type="submit" value="提交信息">
</form>
</body>
</html>
外部JavaScript文件(validation.js)：
function validateForm() {
const username = document.getElementById("usernameField").value;
if(username) {
alert("尊敬的" + username + "，您的信息已成功提交");
}
}
<noscript> 标签应用
<noscript> 标签用于在浏览器禁用脚本时显示替代内容。
使用示例
<!DOCTYPE html>
<html>
<body>
<p id="scriptOutput"></p>
<script>
document.getElementById("scriptOutput").innerHTML = "脚本功能正常启用";
</script>
<noscript>
<p style="color: #e74c3c;">您的浏览器已禁用JavaScript，部分功能可能无常使用。</p>
</noscript>
</body>
</html>
课程实践建议
-
脚本放置位置：将不影响页面显示的脚本放在<body>底部，提高加载性能
-
外部脚本管理：公共功能脚本采用外部引用方式
-
错误处理：使用try-catch结构处理可能的脚本错误
-
浏览器兼容性：考虑不同浏览器的脚本支持差异
-
渐进增强：确保在脚本不可用时基本功能仍可使用
HTML脚本编程通过JavaScript实现了网页的动态交互功能。开发者应掌握事件处理、DOM操作和外部脚本引用等核心概念，同时遵循Web标准和无障碍设计原则，创建既功能丰富又稳定可靠的Web应用程序。
