javaweb实验程序资源-CSDN文库

需积分: 9 197 浏览量 2013-04-27 12:36:40 上传评论收藏 1.31MB PDF 举报

### JavaWeb实验程序知识点解析 #### 实验一：JavaScript技术应用 ##### 1. 定义数组并输出不同级别的标题在本实验的第一个任务中，我们通过JavaScript来定义了一个数组，并利用循环结构来动态地创建不同级别的HTML标题标签。具体步骤如下： 1. **定义变量**：首先定义了一个变量`i`作为计数器，用于控制标题级别。 2. **使用循环**：通过`for`循环结构，循环4次，每次循环生成不同级别的标题。 3. **构建标题**：在循环体内部，构建了一个字符串`head`，该字符串包含了动态生成的HTML标题标签。其中`"<h"+i+">"`和`"</h"+i+">"`分别表示开头和结尾的标签，`i`的值会根据循环次数变化，从而生成不同的标题级别。 4. **输出到页面**：使用`document.write()`方法将构建好的标题输出到网页中。示例代码片段如下： ```javascript <script language="JavaScript"> var i = 0; for (i = 1; i <= 4; i++) { var head = "<h" + i + ">我是" + i + "级标题</h" + i + ">"; document.write(head); } </script> ``` 通过这种方式，可以在Web页面上动态生成不同级别的标题，既提高了开发效率又增强了代码的可维护性。 --- ##### 2. 显示系统时间第二个实验任务是创建一个Web页面，实时显示当前的系统时间。主要步骤如下： 1. **设置页面基本属性**：首先定义了页面的基本属性，如语言、字符编码等。 2. **导入必要的脚本**：在`<head>`标签内导入了JavaScript脚本。 3. **定义函数**：在脚本标签内定义了一个名为`showtime`的函数，该函数负责获取当前时间并更新页面上的显示内容。 4. **定时更新**：使用`setTimeout`函数来实现每秒更新一次时间的功能。 5. **样式设置**：使用`<font>`标签设置了字体、大小和颜色。示例代码片段如下： ```html <script language="javascript"> function showtime() { var Timer = new Date(); var h = Timer.getHours(); var m = Timer.getMinutes(); var s = Timer.getSeconds(); var strShow = "时间：" + h + ":" + m + ":" + s; myspan.innerText = strShow; setTimeout("showtime()", 1000); } </script> ``` 此代码段实现了实时显示时间的功能，并且采用了蓝色、24像素大小的Verdana字体，提升了用户体验。 --- ##### 3. 用户名密码验证第三个实验任务涉及了表单验证，即在用户提交表单之前检查用户名和密码是否为空。主要步骤如下： 1. **定义表单元素**：在页面上添加了用户名和密码的输入框。 2. **设置事件监听**：为表单设置了一个提交事件的监听器，以便在用户点击提交按钮时触发验证逻辑。 3. **验证逻辑**：在监听器中添加了验证逻辑，检查用户名和密码字段是否为空。示例代码片段如下： ```html <form onsubmit="return validateForm()"> <label for="username">用户名:</label> <input type="text" id="username" name="username"><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> <input type="submit" value="提交"> </form> <script> function validateForm() { var username = document.getElementById('username').value; var password = document.getElementById('password').value; if (username == "" || password == "") { alert("用户名或密码不能为空!"); return false; } // 如果验证通过，则返回true允许表单提交 return true; } </script> ``` 这段代码实现了基本的表单验证功能，确保用户在提交表单之前已经正确填写了所需的信息。这种验证方式虽然简单，但对于提高用户体验和减少服务器端的压力具有重要作用。

资源推荐

资源详情

资源评论