太原理工大学web实验报告2

来源：网络收集时间：2026-09-24

导读：课程名称：实验项目：实验地点：专业班级：学生姓名：指导教师：本科实验报告 Web开发实用技术基础 HTML语言、网页程序设计Javascript、逸夫楼软件1227 学号：王晓春崔晓红 2014年 10 月 30 学院名称学生姓名课程名称软件学院王晓春学号专业

课程名称：

实验项目：

实验地点：

专业班级：

学生姓名：指导教师：

本科实验报告

Web开发实用技术基础 HTML语言、网页程序设计Javascript、

逸夫楼软件1227 学号：王晓春

崔晓红

2014年 10 月 30

学院名称学生姓名课程名称

软件学院王晓春

学号专业班级

2012005774 软件 1227

实验成绩实验日期 2014.10.9

Web 开发实用技术基础

实验题目

实验 1 网页程序设计 JavaScript

一.实验目的和要求

实验目的：1.掌握 JavaScript 技术,基本掌握 JavaScript 的开发技巧； 2.利用文本编辑器建立 JavaScript 脚本语言进行简单编程。

实验要求：1.根据以下实验内容书写实验准备报告。 2.独立完成实验。二.实验内容 1.显示一个动态的时钟在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下： <html> <head> <script language="javascript"> var timer = null function stop(){ clearTimeout(timer)} function start(){ var time = new Date() var hours =time.getHours() var minutes =time.getMinutes() minutes=((minutes<10)?"0":"")+minutes var seconds=time.getSeconds() seconds=((seconds<10)?"0":"")+seconds var clock =hours+":"+minutes+":"+seconds document.forms[0].display.value=clock timer=setTimeout("start()",1000)} </script> </head>

<body onLoad="start()" onUnload="stop()"> <form> 现在是北京时间：<input type="text" name="display" size="20"> </form> </body> </html>

分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确. 2.事件驱动和事件处理在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解每条语句的作用。源程序清单如下：

<html> <head> <script language="javascript"> function myfunction(){ alert("HELLO") } </script> </head> <body> <form> <input type="button" onClick="myfunction()" value="Call function"> </form> <p>By pressing the button, a function will be called. The function will alert a message.</p> </body> </html>

分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。

3.JavaScript 表单校验编写程序 register.htm,做一个如下图所示的用户注册界面，要求对用户填写的部分进行合法性检验。

三、主要仪器设备笔记本电脑

四、实验过程中遇到的问题及解决方法实验过程中由于对表单控件不够熟悉，用 onclick 代替了 onsubmit,是的表单功能无法实现，后通过查阅书本弄清楚了表单的控件及属性。

五、实验结果1.界面浏览：

2.代码设计：

3.代码设计<html> <head> <title>用户名登录</title> <script> function myfunction(){ if(http://ername.value=="") { alert("用户名不能为

空，请输入用户名！"); http://ername.focus(); return false; } else if(form.password.value=="") { alert("密码不能为空，请输入密码");

form.password.focus(); return false; } else alert("登陆成功！"); } </script> </head> <body> 用户登录<br> <form name="form" onSubmit="return myfunction()" method="post" action="sy2-3.html"> 请输入用户名：<input type="text" name="username"><br> 请输入密码：<input type="password" name="password"><br> <input type="submit" name="button" value="提交"> <input type="reset" value="全部重写"> </form> </body> </html> 界面浏览

六、讨论、心得此次实验让我认识到了脚本语言 javascript 的使用方法以及功能，初步掌握了它的语法规则、关键字、语句和对象。明白了 javascript 的代码只有与 html 代码结合在一起才能控制 html 页面上的对象。在实验中通过嵌入 javascript 脚本，调用 javascript 内置函数实现了表单信息的校验功能，由此看出 javascript 语言扩展了 HTML 页面的功能。虽然此次试验没有遇到太多问题，但我意识到自己对脚本语言的设计还需多加练习才能更熟练地扩充 HTML 页面的功能，从而设计出更好的界面！

…… 此处隐藏：569字，全部文档内容请下载后查看。喜欢就下载吧 ……

太原理工大学web实验报告2.doc 将本文的Word文档下载到电脑，方便复制、编辑、收藏和打印

下载这篇word文档

本文链接：https://www.jiaowen.net/fanwen/2140908.html（转载请注明文章来源）

上一篇：2016年高考一轮复习高三化学：第四章非金属及其化合物 4-05.考
下一篇：新人教版八年级上册数学20102011学年度第三次月考试题及答案