实用性配件 Java脚本示例及源代码 Code
詹姆斯·哈特曼
⚡ 智能摘要
实用性配件 Code 使用示例 Java本文通过脚本演示了如何利用循环、表单验证和事件来解决日常浏览器任务。文章介绍了乘法表生成器、完整的注册表单验证器、悬停触发的弹出窗口、实时数字时钟，以及确保此类脚本可靠性的实践方法。
你将在这些地方建造什么 Java脚本示例
以下每个示例都是完整的 HTML 页面，无需构建步骤或外部库即可在任何浏览器中运行。它们共同涵盖了几乎所有浏览器脚本都会用到的三项技能：从数据生成标记、验证用户输入以及响应事件。
| 例如： | 概念实践 | 主要方法 |
|---|---|---|
| 乘法表 | 嵌套循环和字符串构建 | 提示，for，while，document.write |
| 表格验证 | 数组、条件和 DOM 更新 | getElementById、indexOf、lastIndexOf、innerHTML |
| 弹出消息 | 事件处理 | 添加事件监听器，警报 |
| Digi塔尔钟 | 计时器和日期格式化 | setInterval、日期、padStart、文本内容 |
基本熟悉 JavaScript 默认已掌握语法。如果循环语句仍不熟悉，请阅读相关文档。 如何在循环中使用 Java脚本 在开始之前。
示例#1： Java脚本乘法表
创建一个简单的乘法表，要求用户输入行数和列数。
解决方案：
<html>
<head>
<title>Multiplication Table</title>
<script type="text/javascript">
var rows = prompt("How many rows for your multiplication table?");
var cols = prompt("How many columns for your multiplication table?");
if(rows == "" || rows == null)
rows = 10;
if(cols== "" || cols== null)
cols = 10;
createTable(rows, cols);
function createTable(rows, cols)
{
var j=1;
var output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";
for(i=1;i<=rows;i++)
{
output = output + "<tr>";
while(j<=cols)
{
output = output + "<td>" + i*j + "</td>";
j = j+1;
}
output = output + "</tr>";
j = 1;
}
output = output + "</table>";
document.write(output);
}
</script>
</head>
<body>
</body>
</html>
输出结果（3 行 4 列）：
1 2 3 4 2 4 6 8 3 6 9 12
Code 解释： 外层 for 循环每次迭代创建一个表格行，而内层 while 循环则用每列一个单元格填充该行。计数器 j 每行结束后都会重置为 1，这是大多数初学者容易忘记的步骤。如果没有这个重置步骤，只有第一行会有单元格。
💡提示： prompt 函数始终返回一个字符串。表达式 i*j 之所以有效，是因为 Java脚本会将两个操作数都转换为数字以进行乘法运算，但诸如比较之类的运算则不会。 rows > 5 比较文本。将输入内容包裹起来。 Number() 当该值同时用于算术运算和比较运算时。
示例 2：JS 表单示例
创建一个示例表单程序，用于收集用户的名字、姓氏、电子邮件地址、用户 ID、密码和确认密码。所有输入均为必填项，并且电子邮件地址必须采用正确的格式。此外，密码和确认密码文本框中输入的值必须相同。验证完成后，使用 JavaScript在出现错误的文本框旁边，以红色显示正确的错误消息。
解决方案及源代码 Code:
<html>
<head>
<title>Form Validation</title>
<script type="text/javascript">
var divs = new Array();
divs[0] = "errFirst";
divs[1] = "errLast";
divs[2] = "errEmail";
divs[3] = "errUid";
divs[4] = "errPassword";
divs[5] = "errConfirm";
function validate()
{
var inputs = new Array();
inputs[0] = document.getElementById('first').value;
inputs[1] = document.getElementById('last').value;
inputs[2] = document.getElementById('email').value;
inputs[3] = document.getElementById('uid').value;
inputs[4] = document.getElementById('password').value;
inputs[5] = document.getElementById('confirm').value;
var errors = new Array();
errors[0] = "<span style='color:red'>Please enter your first name!</span>";
errors[1] = "<span style='color:red'>Please enter your last name!</span>";
errors[2] = "<span style='color:red'>Please enter your email!</span>";
errors[3] = "<span style='color:red'>Please enter your user id!</span>";
errors[4] = "<span style='color:red'>Please enter your password!</span>";
errors[5] = "<span style='color:red'>Please confirm your password!</span>";
for (i in inputs)
{
var errMessage = errors[i];
var div = divs[i];
if (inputs[i] == "")
document.getElementById(div).innerHTML = errMessage;
else if (i==2)
{
var atpos=inputs[i].indexOf("@");
var dotpos=inputs[i].lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else if (i==5)
{
var first = document.getElementById('password').value;
var second = document.getElementById('confirm').value;
if (second != first)
document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>";
else
document.getElementById(div).innerHTML = "OK!";
}
else
document.getElementById(div).innerHTML = "OK!";
}
}
function finalValidate()
{
var count = 0;
for(i=0;i<6;i++)
{
var div = divs[i];
if(document.getElementById(div).innerHTML == "OK!")
count = count + 1;
}
if(count == 6)
document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td>First Name:</td>
<td><input type="text" id="first" onkeyup="validate();" /></td>
<td><div id="errFirst"></div></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" id="last" onkeyup="validate();"/></td>
<td><div id="errLast"></div></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" id="email" onkeyup="validate();"/></td>
<td><div id="errEmail"></div></td>
</tr>
<tr>
<td>User Id:</td>
<td><input type="text" id="uid" onkeyup="validate();"/></td>
<td><div id="errUid"></div></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" id="password" onkeyup="validate();"/></td>
<td><div id="errPassword"></div></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" id="confirm" onkeyup="validate();"/></td>
<td><div id="errConfirm"></div></td>
</tr>
<tr>
<td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
<td><div id="errFinal"></div></td>
</tr>
</table>
</body>
</html>
预期行为：
Empty first name -> Please enter your first name! Email "ann@site" -> Enter a valid email address! Email "ann@site.com" -> OK! Passwords differ -> Your passwords don't match! All six fields valid -> All the data you entered is correct!!!
Code 解释： 三个数组并行运行。 输入 保存当前值 错误 包含匹配的消息，并且 申报单 它保存着显示每条消息的容器的 ID。因此，索引链接着一个字段、其错误文本及其输出位置。电子邮件分支仅当 @ 符号不是第一个字符，且 @ 符号与最后一个点之间至少间隔两个字符时才接受地址。
⚠️警告： 客户端验证可以提升用户体验，但无法提供任何安全性。任何人都可以禁用它。 Java脚本或 POST 请求直接发送到端点，因此这里显示的每个规则都必须在服务器上重复执行。
示例 3：使用事件弹出消息
在演示网页上显示一条简单的消息“欢迎！！！”，当用户将鼠标悬停在该消息上时，应弹出一个窗口显示消息“欢迎访问我的网页！！！”。
解决方案：
<html> <head> <title>Event!!!</title> <script type="text/javascript"> function trigger() { document.getElementById("hover").addEventListener("mouseover", popup); function popup() { alert("Welcome to my WebPage!!!"); } } </script> <style> p{ font-size: 50px; position: fixed; left: 550px; top: 300px; } </style> </head> <body onload="trigger();"> <p id="hover">Welcome!!!</p> </body> </html>
预期行为：
Page loads -> the text "Welcome!!!" appears in large type Mouse hovers -> an alert box shows "Welcome to my WebPage!!!"
Code 解释： 监听器附加在触发函数内部，该函数在 body 元素的 onload 事件触发时运行。等待页面加载完成至关重要，因为在 head 元素仍在解析时，id 为“hover”的段落并不存在。将脚本放在 body 标签结束标签之前，或者添加 defer 属性，可以更简洁地实现相同的效果。
示例 4：现场直播 Digi使用 setInterval 的 tal 时钟
在页面上显示当前时间，并每秒刷新一次。此示例介绍了计时器，并展示了 document.write 的现代替代方案。
<html> <head> <title>Digital Clock</title> </head> <body> <h2 id="clock">--:--:--</h2> <script> function showTime() { const now = new Date(); const hh = String(now.getHours()).padStart(2, "0"); const mm = String(now.getMinutes()).padStart(2, "0"); const ss = String(now.getSeconds()).padStart(2, "0"); // textContent is safer than innerHTML for plain text document.getElementById("clock").textContent = hh + ":" + mm + ":" + ss; } showTime(); // draw immediately setInterval(showTime, 1000); // then refresh every second </script> </body> </html>
预期行为：
09:05:07 09:05:08 09:05:09 (the heading updates in place once per second)
在调用 `setInterval` 之前先调用一次 `showTime`，可以避免页面打开时出现明显的 1 秒延迟。当需要停止计时时，使用 `clearInterval` 并传入 `setInterval` 返回的值。
撰写这些内容的最佳实践 Java脚本示例
这三个原始示例可追溯到更早期的风格 Java剧本。以下列表显示了在将其改编用于生产工作时需要更改的内容。
- 替换 document.write： 页面加载完成后调用此方法会删除整个文档。请改为创建一个元素并设置 textContent，或者添加一个节点。
- 声明所有变量： 使用 let 和 const 而不是依赖隐式全局变量（例如计数器）。
i在上面的循环中。 - 优先选择 textContent 而不是 insideHTML： 在 innerHTML 中插入用户提供的文本会打开跨站脚本攻击漏洞。
- 将处理程序移出标记： 将 onkeyup 和 onclick 属性替换为 addEventListener，这样可以将行为与结构分离。
- 转换提示输入： 在进行比较之前，请将值包装在 Number() 中，因为 prompt 总是返回一个字符串。
- 请在服务器上再次验证： 仅将浏览器检查视为一种便利机制。
为了进一步探讨这些例子，请回顾 Java脚本数组方法 对于表单验证器中使用的并行数组， Java脚本字符串 用于电子邮件位置检查，以及 饼干 Java脚本 记住访客输入的值。通过读取这些值来确定最终脚本的放置位置。 内部和外部 Java脚本.
