Web 程序设计基础

时间:2024.3.24

本科实验报告

课程名称:       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程序设计基础实验指导书

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文件。

太原理工大学计算机双学位Web程序设计基础实验指导书

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,做一个如下图所示的用户注册界面,要求对用户填写的部分进行合法性检验。

太原理工大学计算机双学位Web程序设计基础实验指导书

5

太原理工大学计算机双学位Web程序设计基础实验指导书

太原理工大学计算机双学位Web程序设计基础实验指导书

6

更多相关推荐:
web程序设计课程报告

MyPetShop商城系统分析报告1课程作业概述11课程实习的目的WEB开发技术是一门实用性综合性较强的课程学生在学完本门课程后不仅要了解WEB设计的方法和技术更重要的是能综合应用所学的数据库高级编程语言及网页...

《Web技术应用与开发》课程设计报告

江南大学教育学院课程设计报告课程名称Web技术与开发课题名称中国旅游论坛专业教育技术系班级教育技术06级02班学号**姓名**指导教师**老师2009年6月6日一.课程设计目的课程设计是一项重要的实践性教学环节…

WEB程序设计实验报告

WEB程序设计实验报告院系名称:管理学院专业班级:电子商务0901班学生姓名:**学号:***20**年6月一、实验目的1、通过本课程的实验教学,学生应能够做到:(1)掌握企业网站前台和后台的设计;(2)了解企…

Web课程设计报告模板

课程设计报告学院系专业名称课程设计科目题目学号姓名指导教师完成时间计算机科学与技术系20xx计算机软件工程网络工程Web程序设计企业网站与开发系统小组所有成员的学号姓名杨智泽20xx年2月4月目录1开发背景32...

web程序设计报告

Web程序设计实验报告Web程序设计实验报告院别专业班级学号姓名成绩计算机与通信工程学院计算机科学与技术20xx年12月271Web程序设计实验报告实验编号1实验名称熟悉环境和css的使用实验内容完成三个htm...

《Web程序设计课程设计》报告

洛阳理工学院课程设计报告课程名称Web程序设计课程设计设计题目学生成绩管理系统专业计算机科学与技术班级学号姓名完成日期20xx627课程设计任务书设计题目学生成绩管理系统设计内容与要求设计一个学生成绩管理系统基...

web课程设计报告范例

课程设计论文任务书学院专业班一课程设计论文题目二课程设计论文工作自20xx年6月22日起至20xx年7月8日止三课程设计论文地点创新大楼四课程设计论文内容要求1本课程设计的目的1加深web技术基本概念的了解2灵...

web程序设计课程报告

Web程序设计测评系统的研究和实现陶灵兵1庄红2浙江理工大学杭州下沙高教园西区310018Lbtao1lisa2摘要本文介绍了基于Web的Web程序设计测评系统的设计和实现该测评系统采用NET框架技术具有自测和...

WEB与数据库开发程序设计报告

大学信息学院综合性设计性实验报告班级计信专业级2班学号姓名实验项目名称机票管理系统实验项目性质综合性实验所属课程WEB与数据库课程设计实验室中心软件与通信实验室指导教师实验完成时间20xx年12月28日计算机与...

11级《Web程序设计课程设计》报告(学号+姓名)

洛阳理工学院课程设计报告课程名称Web程序设计课程设计设计题目专业计算机科学与技术班级学号姓名完成日期20xx627课程设计任务书设计题目图书销售管理系统设计内容与要求问题描述了解网上图书销售相关流程实现BS模...

《Web程序设计》实验指导书高心丹

Web程序设计实验指导书东北林业大学信息与计算机工程学院计算机科学与技术专业11实验目的与要求12实验环境23上机环境24实验一般步骤35实验学时36实验内容和要求361JSP运行环境安装及常用HTML标记使用...

Web程序设计实验手册

实验一HTML语言的熟悉与应用实验目的通过学习和应用HTML的基本元素了解并初步掌握静态网页的运行原理及其制作过程实验内容建一个左右结构的框架结构要求如下1左边要求建立一个目录菜单菜单的内容为教材书上的第二章的...

web程序设计报告(24篇)