Web系统与技术.docx

Web系统与技术.docx

《Web系统与技术.docx》由会员分享，可在线阅读，更多相关《Web系统与技术.docx（14页珍藏版）》请在冰豆网上搜索。

Web系统与技术

《Web系统与技术》期末报告

学号：

姓名:

班级：

物联网122班

老师：

常熟理工学院2014～2015学年第二学期

《Web系统与技术》期末大作业

目录

1.Web系统——Javascript2

1.1系统功能介绍2

1.2程序流程7

1.3程序运行效果8

2.代码分析及用法介绍10

2.1JavaScript简介10

2.2JavaScript代码分析10

2.2.1

--javascript程序——End-->

1.2程序流程

该程序的流程如下图所示：

图1程序运行流程图

1.3程序运行效果

程序打开后显示如下页面：

图2.1程序开始页面

图2.2设定抽奖范围最小值

图2.3设定抽奖范围最大值

图2.4抽取一等奖

图2.5抽取二等奖

图2.6抽取三等奖

图2.7显示抽奖结果

2.代码分析及用法介绍

2.1JavaScript简介

JavaScript是一种轻量级的编程语言，是可插入HTML页面的编程代码。

JavaScript插入HTML页面后，可由所有的现代浏览器执行。

JavaScript可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

2.2JavaScript代码分析

2.2.1

如需在HTML页面中插入JavaScript，请使用会告诉JavaScript在何处开始和结束。

之间的代码行包含了JavaScript。

2.2.2JavaScript函数和事件

实例：

//显示三个奖项的中奖数

document.write（str1）;

document.write（str2）;

document.write（str3）;

}

上面例子中的JavaScript语句，会在页面加载时执行。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把JavaScript代码放入函数中，就可以在事件发生时调用该函数。

2.2.3写到文档输出

实例：

//显示三个奖项的中奖数

document.write（str1）;

document.write（str2）;

document.write（str3）;

只能在HTML输出中使用document.write。

如果您在文档加载后使用该方法，会覆盖整个文档。

2.2.4JavaScript字符串

实例：

varstr1="一等奖：

";

varstr2="二等奖：

";

varstr3="三等奖：

";

字符串是存储字符的变量，可以是引号中的任意文本。

您可以使用单引号或双引号。

2.2.5创建JavaScript对象

实例：

numarray=newArray（）;//保存抽奖数字的数组

flagarray=newArray（）;//记录数字是否中奖的标示数组

countaward=newArray（0,0,0）;//记录每组抽奖次数，这里只抽三组奖

JavaScript中的几乎所有事务都是对象：

字符串、数字、数组、日期、函数等等，你也可以创建自己的对象。

2.2.6JavaScript函数语法

实例：

functionsysInit（）

{

/*设定抽奖数字范围*/

//接受用户设定操作

}

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由JavaScript在任何位置进行调用。

提示：

JavaScript对大小写敏感。

关键词function必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

2.2.7JavaScriptIf语句

实例：

if（j==-1）

{

alert（"起始数字范围不正确,程序中断!

"）;

returnfalse;

}//endif

在JavaScript中，我们可使用以下条件语句：

if语句-只有当指定条件为true时，使用该语句来执行代码

if...else语句-当条件为true时执行代码，当条件为false时执行其他代码

if...elseif....else语句-使用该语句来选择多个代码块之一来执行

switch语句-使用该语句来选择多个代码块之一来执行

在这个语法中，没有..else..。

您已经告诉浏览器只有在指定条件为true时才执行代码。

2.2.8JavaScriptFor循环

实例：

for（i=0;i<（to-from）;i++）

{

switch（flagarray[i]）

{

case1:

str1=str1+numarray[i]+"
";

break;

case2:

str2=str2+numarray[i]+"
";

break;

case3:

str3=str3+numarray[i]+"
";

break;

}

}

//显示三个奖项的中奖数

document.write（str1）;

document.write（str2）;

document.write（str3）;

}

JavaScript支持不同类型的循环：

for-循环代码块一定的次数

for/in-循环遍历对象的属性

while-当指定的条件为true时循环指定的代码块

do/while-同样当指定的条件为true时循环指定的代码块。

2.2.9JavaScriptWhile循环

实例：

while（a=1）

{

if（countaward[award-1]==awardtotal）

{

alert（award+"等奖已经取满"+awardtotal+"个"）;

return;

}

While循环会在指定条件为真时循环执行代码块。

如果忘记增加条件中所用变量的值，该循环永远不会结束，可能导致浏览器崩溃。

2.2.10JavaScript表单验证

实例：

functiongetLuck（award,awardtotal）

{

varmsg="";

//当抽奖数大于等于20个时,使用每次抽取10个中奖数。

for（i=0;i<（awardtotal>=20?

10:

1）;i++）

{

//设定循环抽取随机数并判断,防止数字重复取

while（a=1）

{

//判断提示某项奖已经取完

if（countaward[award-1]==awardtotal）

{

alert（award+"等奖已经取满"+awardtotal+"个"）;

return;

}

//在抽奖数字范围内抽取随机数

lucky=Math.round（（to-from+1）*Math.random（）+from）;

//判断上面抽取的随机数是否已经取过

if（numarray[lucky-from]==lucky&&flagarray[lucky-from]==0）

{

flagarray[lucky-from]=award;

countaward[award-1]++;

msg+=award+"等奖N"+countaward[award-1]+":

"+lucky+"\n";

break;

}//endif

}//endwhile

}//endfor

alert（msg）;

return;

}

JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证：

被JavaScript验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？

用户输入的邮件地址是否合法？

用户是否已输入合法的日期？

用户是否在数据域（numericfield）中输入了文本？

上述实例用来验证抽取的随机数是否已经取过，是否在抽奖数字范围内抽取随机数。