太原理工大学WEB实验报告
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
</html>
分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确.
2．事件驱动和事件处理
在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解
每条语句的作用。源程序清单如下：
<html> <head> <script language="javascript"> function myfunction(){ alert("HELLO") } </script> </head> <body> <form> <input type="button" onClick="myfunction()" value="Call
学院名称 学生姓名 课程名称
学号 专业班级
Web 开发实用技术基础 实验题目
实验成绩 实验日期 HTML 语言
一．实验目的和要求
1．掌握常用的 HTML 语言标记； 2．利用文本编辑器建立 HTML 文档，制作简单网页。
3．独立完成实验。 4．书写实验报告书。
二．实验内容
1．在文本编辑器“记事本”中输入如下的 HTML 代码程序，以文件名 sy1.html 保存，
每条语句的作用。源程序清单如下：
<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>
本科实验报告
课程名称： Web 开发实用技术基础
实验项目：
HTML 语言
网页程序设计 Javascript
Request 与 Response 对象的应用
Application 与 Session 对象的应用
实验地点：
实验室 211
专业班级： 学号：
学生姓名：
指导教师：
2015 年 11 月 5 日
实验内容 2： 代码： <html><head> <title>表单范例</title> </head><body> <h2 align="center"><b><SPAN style="TEXT-DECORATION: underline">请留下个人 资料</SPAN></b></h2> <table align="center"> <form name="form"> <tr><td align="right">姓名：</td> <td><input type="text" name="姓名"></td></tr> <tr><td align="right">E-mail：</td><td><input type="text" name="邮箱"></td></tr> <tr><td align="right">电话：</td><td><input type="text" name="电话"></td></tr> <tr><td align="right">性别：</td><td><input type="radio" name="性别" checked>女 <input type="radio" name="性别">男</td></tr> <tr><td align="right">年龄：</td><td><select> <option selected>20 以下 <option>40 以下
<th>item</th> <th>content</th> </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>
一．实验目的和要求
1.掌握 JavaScript 技术,基本掌握 JavaScript 的开发技巧。 2.利用文本编辑器建立 JavaScript 脚本语言进行简单编程。 3.据以下实验内容书写实验准备报告。 4.独立完成实验。
二．实验内容
1.显示一个动态的时钟 在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解
编写程序 register.htm，做一个如下图所示的用户注册界面，要求对用户填写的 部分进行合法性检验。
三、主要仪器设备 笔记本电脑。
四、实验结果
实验内容 1：
页面上有一行文字“现在是北京时间：”，其后是一个文本框，内容为现在的时间。事件为 body，onLoad 驱动调用 start()获取本机时间并保存在名为 display 的文本框中。关闭页面时， onUnload 驱动调用 Stop 用来清零计时器。
if(input.name.value=="") { alert("用户名不能为空，请输入用ቤተ መጻሕፍቲ ባይዱ名!"); input.name.focus(); return false; }
else
alert("登陆成功"); } </script> </head> <body> <table> <form name="input" action="html_form_action.asp"method="get" onsubmit="return on_submit()"> <tr><td>用户登录</td></tr> <tr><td>请输入用户名：</td><td><input type="text" name="name"></td></tr> <tr><td>请输入密码：</td><td><input type="password" name="Password"></td></tr> </table> <input type="submit" value="提交"> <input type="reset" value="全部重写"> </form> </body> </html>
function"> </form> <p>By pressing the button, a function will be called. The function
will alert a message.</p> </body>
</html>
分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。 3．JavaScript 表单校验
实验内容 2：
点击按钮 Call Function 后显示
页面时有一个按钮，按钮的值为 Call Function，还有一行文字。点击按钮 Call Function 后， onclick 驱动函数 myfunction()，显示提示框，提示框内容为 HELLO。
实验内容 3： 代码：
<html> <head> <title>用户登录</title> <script language="javascript"> function on_submit() {
2．编写一个能输出如图所示界面的 HTML 文件。
三、主要仪器设备 笔记本电脑 四、实验结果
实验内容 1：
页面中包含的元素有滚动条 welcome to you，标题 A simple HTML docunment，文字 部分 Welcome to the world of HTML.This is a simple HTML document.It is to give you an outline of how to write HTML file and how the markup tags work in the 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>
五、讨论、心得 程序开始编写的时候虽然有了要求的 form，但是格式却不如例图
中的整齐，后来查阅资料发现用表格可以使 form 里的元素格式变的整 齐，看起来和例图中的一样了。
学院名称
学号
实验成绩
学生姓名 课程名称
专业班级 Web 开发实用技术基础 实验题目
实验日期 网页程序设计-JavaScript
<option>60 以下 <option>60 以上 </select></td></tr> <tr><td align="right">留言板：</td> <td><textarea name="留言板" rows="5" cols="40"></textarea><br></td></tr> <tr><td align="right">您的爱好：</td> <td><input type="checkbox" name="运动">运动<br> <input type="checkbox" name="阅读">阅读<br> <input type="checkbox" name="听音乐">听音乐<br> <input type="checkbox" name="旅游">旅游 </td></tr> <tr><td align="center" colspan="2"><input type="submit" name="提交" value="提交"> <input type="reset" name="重写" value="全部重写"></td></tr> </form> </table> </body> </html> 结果截图：
分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确.
2．事件驱动和事件处理
在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解
每条语句的作用。源程序清单如下：
<html> <head> <script language="javascript"> function myfunction(){ alert("HELLO") } </script> </head> <body> <form> <input type="button" onClick="myfunction()" value="Call
学院名称 学生姓名 课程名称
学号 专业班级
Web 开发实用技术基础 实验题目
实验成绩 实验日期 HTML 语言
一．实验目的和要求
1．掌握常用的 HTML 语言标记； 2．利用文本编辑器建立 HTML 文档，制作简单网页。
3．独立完成实验。 4．书写实验报告书。
二．实验内容
1．在文本编辑器“记事本”中输入如下的 HTML 代码程序，以文件名 sy1.html 保存，
每条语句的作用。源程序清单如下：
<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>
本科实验报告
课程名称： Web 开发实用技术基础
实验项目：
HTML 语言
网页程序设计 Javascript
Request 与 Response 对象的应用
Application 与 Session 对象的应用
实验地点：
实验室 211
专业班级： 学号：
学生姓名：
指导教师：
2015 年 11 月 5 日
实验内容 2： 代码： <html><head> <title>表单范例</title> </head><body> <h2 align="center"><b><SPAN style="TEXT-DECORATION: underline">请留下个人 资料</SPAN></b></h2> <table align="center"> <form name="form"> <tr><td align="right">姓名：</td> <td><input type="text" name="姓名"></td></tr> <tr><td align="right">E-mail：</td><td><input type="text" name="邮箱"></td></tr> <tr><td align="right">电话：</td><td><input type="text" name="电话"></td></tr> <tr><td align="right">性别：</td><td><input type="radio" name="性别" checked>女 <input type="radio" name="性别">男</td></tr> <tr><td align="right">年龄：</td><td><select> <option selected>20 以下 <option>40 以下
<th>item</th> <th>content</th> </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>
一．实验目的和要求
1.掌握 JavaScript 技术,基本掌握 JavaScript 的开发技巧。 2.利用文本编辑器建立 JavaScript 脚本语言进行简单编程。 3.据以下实验内容书写实验准备报告。 4.独立完成实验。
二．实验内容
1.显示一个动态的时钟 在文本编辑器“记事本”中输入如下代码程序，请仔细阅读下列程序语句，理解
编写程序 register.htm，做一个如下图所示的用户注册界面，要求对用户填写的 部分进行合法性检验。
三、主要仪器设备 笔记本电脑。
四、实验结果
实验内容 1：
页面上有一行文字“现在是北京时间：”，其后是一个文本框，内容为现在的时间。事件为 body，onLoad 驱动调用 start()获取本机时间并保存在名为 display 的文本框中。关闭页面时， onUnload 驱动调用 Stop 用来清零计时器。
if(input.name.value=="") { alert("用户名不能为空，请输入用ቤተ መጻሕፍቲ ባይዱ名!"); input.name.focus(); return false; }
else
alert("登陆成功"); } </script> </head> <body> <table> <form name="input" action="html_form_action.asp"method="get" onsubmit="return on_submit()"> <tr><td>用户登录</td></tr> <tr><td>请输入用户名：</td><td><input type="text" name="name"></td></tr> <tr><td>请输入密码：</td><td><input type="password" name="Password"></td></tr> </table> <input type="submit" value="提交"> <input type="reset" value="全部重写"> </form> </body> </html>
function"> </form> <p>By pressing the button, a function will be called. The function
will alert a message.</p> </body>
</html>
分析上述代码的作用,然后用浏览器运行文件,验证自己的判断是否正确。 3．JavaScript 表单校验
实验内容 2：
点击按钮 Call Function 后显示
页面时有一个按钮，按钮的值为 Call Function，还有一行文字。点击按钮 Call Function 后， onclick 驱动函数 myfunction()，显示提示框，提示框内容为 HELLO。
实验内容 3： 代码：
<html> <head> <title>用户登录</title> <script language="javascript"> function on_submit() {
2．编写一个能输出如图所示界面的 HTML 文件。
三、主要仪器设备 笔记本电脑 四、实验结果
实验内容 1：
页面中包含的元素有滚动条 welcome to you，标题 A simple HTML docunment，文字 部分 Welcome to the world of HTML.This is a simple HTML document.It is to give you an outline of how to write HTML file and how the markup tags work in the 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>
五、讨论、心得 程序开始编写的时候虽然有了要求的 form，但是格式却不如例图
中的整齐，后来查阅资料发现用表格可以使 form 里的元素格式变的整 齐，看起来和例图中的一样了。
学院名称
学号
实验成绩
学生姓名 课程名称
专业班级 Web 开发实用技术基础 实验题目
实验日期 网页程序设计-JavaScript
<option>60 以下 <option>60 以上 </select></td></tr> <tr><td align="right">留言板：</td> <td><textarea name="留言板" rows="5" cols="40"></textarea><br></td></tr> <tr><td align="right">您的爱好：</td> <td><input type="checkbox" name="运动">运动<br> <input type="checkbox" name="阅读">阅读<br> <input type="checkbox" name="听音乐">听音乐<br> <input type="checkbox" name="旅游">旅游 </td></tr> <tr><td align="center" colspan="2"><input type="submit" name="提交" value="提交"> <input type="reset" name="重写" value="全部重写"></td></tr> </form> </table> </body> </html> 结果截图：