本科实验报告
课程名称: Web 程序设计基础
实验项目:实验二 网页程序设计JavaScript
实验地点: 迎西校区4506机房
专业班级:软件工程 学号:
学生姓名:
指导教师:
20##年 4月
一、 实验目的
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">
</from>
</body>
</html>
分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。
2. 事件驱动和事件处理
在文本编辑器“记事本”中输入如下代码程序,请仔细阅读下列语句,理解每条语句的作用。
源程序清单如下:
<html>
<head>
<script language="javascript">
function myfunction()
{
alert("HELLO");
}
</script>
</head>
<form>
<body>
<input type="button" onclick="myfunction()" value="Call function">
</form>
<p>By pressing the button,a funtion will be called.The function will alert a message.</p>
</body>
</html>
分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。
3. JavaScript表单校验
编写程序register.htm,做一个如下图所示的用户注册界面,要求对用户填写的部分进行合法性验证。
四、 实验结果
1.
2.
3. 程序清单:
<html>
<head>
<title>用户登录</title>
<script>
function myfunction(){
if(form.username.value=="")
{
alert("用户名不能为空,请输入用户名!");
form.username.focus();
return false;
}
if(form.password.value=="")
{
alert("密码不能为空,请输入密码");
form.password.focus();
return false;
}
}
</script>
</head>
<body>
用户登录<br>
<form name="form" onsubmit="return myfunction()" method="post" action="sy2-3(2).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>
五、 讨论、心得
通过此次实验,让我收获许多,主要收获如下:
1.学会使用JavaScript脚本语言进行简单的编程。
2.基本掌握了JavaScript的开发技巧,理解了事件驱动与事件处理还有事件之间的区别。
第二篇:太原理工大学计算机双学位-Web程序设计基础实验指导书
WEB
实验指导书太原理工大学田玉玲 编程序设计基础
目录
实验1 HTML语言 ................................................................................. 2
实验2 网页程序设计-JavaScript ........................................................... 4
1
实验一 HTML语言
一、实验目的
1.掌握常用的HTML语言标记;
2.利用文本编辑器建立HTML文档,制作简单网页。
二、实验要求
1.独立完成实验。
2.书写实验报告书。
三、实验内容
1.在文本编辑器“记事本”中输入如下的HTML代码程序,以文件名sy1.html保存,并在浏览器中运行。(请仔细阅读下列程序语句,理解每条语句的作用) 源程序清单如下:
<html>
<head>
<title>Example</title>
</head>
<body bgcolor="#00DDFF">
<h1><B><I><FONT COLOR="#FF00FF">
<MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome to you</MARQUEE>
</FONT></I></B></h1>
<hr>
<h2 align=center><FONT COLOR="#0000FF">A simple HTML document</FONT></h2> <EM>Welcome to the world of HTML</EM>
<p>This is a simple HTML document.It is to give you an outline of how to write HTML file and how the<b> markup tags</b> work in the <I>HTML</I> file</p>
<p>Following is three chapters
<ul>
<li>This is the chapter one</li>
<li><A HREF="#item">This is the chapter two</A></li>
<li>This is the chapter three</li>
</ul></p>
<hr>
<p><A NAME="item">Following is items of the chapter two</A> </p>
<table border=2 bgcolor=gray width="40%">
<tr>
<th>item</th>
<th>content</th>
2
</tr>
<tr>
<td>item 1</td>
<td>font</td>
</tr>
<tr>
<td>item 2</td>
<td>table</td>
</tr>
<tr>
<td>item 3</td>
<td>form</td>
</tr>
</table>
<hr><p>
1<p>
2<p>
3<p>
4<p>
5<p>
6<p>
7<p>
<B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B> </p>
</body>
</html>
2.编写一个能输出如图所示界面的HTML文件。
3
实验二 网页程序设计-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>
4
现在是北京时间:<input type="text" name="display" size="20">
</form>
</body>
</html>
分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确.
2.事件驱动和事件处理
在文本编辑器“记事本”中输入如下代码程序,请仔细阅读下列程序语句,理解每条语句的作用。源程序清单如下:
分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。
3.JavaScript表单校验
编写程序register.htm,做一个如下图所示的用户注册界面,要求对用户填写的部分进行合法性检验。
5
6