JavaScript脚本的使用.docx

《JavaScript脚本的使用.docx》由会员分享，可在线阅读，更多相关《JavaScript脚本的使用.docx（27页珍藏版）》请在冰点文库上搜索。

JavaScript脚本的使用

项目十JavaScript脚本的使用

教学目标

通过本项目的学习，使读者能够学会JavaScript语法基础，使用JavaScript脚本为网页制作特效，和表单验证。

1．能够熟悉JavaScript语法。

2．能够使用JavaScript脚本制作网页特效。

3．能够使用JavaScript脚本验证表单。

工作任务

在DreamweaverCS3中使用JavaScript脚本为“上海世博网”的首页添加特效。

任务1：

为“上海世博网”的首页制作弹出窗口。

任务2：

为“上海世博网”的首页制作随滚动条移动的浮动广告。

任务3：

为首页制作飘浮广告。

任务4：

为注册网页设计表单验证功能。

10.1JavaScript基础

JavaScript旨在使网页开发人员能对网页的功能进行管理和控制，JavaScript代码可以嵌入到HTML文档中，控制页面的内容和验证用户输入的数据，当页面显示在浏览器中，浏览器将解释并执行JavaScript语句。

JavaScript的功能十分强大，可实现多种任务，如执行计算、检查表单，编写游戏，添加特殊效果等，本项目主要学习用JavaScript脚本设计网页中最常用的特效和表单验证方法。

10.1.1认识JavaScript结构

通常JavaScript代码是用标记结束标记为止，然后，浏览器检查JavaScript语句的语法，如果有任何错误，就会在警告框中显示；如果没有错误，浏览器将编译并执行语句。

脚本的基本结构如下：

--

javascript语句;

-->

Language属性用于指定编写脚本使用哪一个脚本语言，脚本语言是浏览器用于解释脚本的语言，通过该属性还可以指定使用的脚本语言的版本。

--javascript语句;-->是注释标记，这些标记用于告知不支持Javascript的浏览器忽略标记中包含的语句。

--表示开始注释标记，-->表示结束注释标记。

这些标记是可选的，但最好在脚本中使用这些标记，目前大多浏览器都支持JavaScript。

要编写JavaScript程序，一般可按下面的三步进行：

第一步：

选用编辑器，设计网页的编辑器都可以使用，如记事本、Dreamweaver等。

第二步：

在Web页面内加入JavaScript代码，JavaScript程序嵌入在HTML文档中的和标记之间，理论上可以将JavaScript语句放置在HTML文档中的任何位置，然后将核心脚本语句放置在…之间是一个良好的编程习惯，因为这确保了所有代码在从部分调用之前被阅读和执行。

第三步：

将HTML文档保存为扩展名是.html或.htm的文件，然后使用浏览器就可以看到JavaScript程序运行效果。

打开Dreamweaver，新建一网页文件，并保存为js.html，打开代码视图，输入以下代码：

varcount=0;//定义变量并初始化

document.write（""）;//屏幕输出“上海世博欢迎您！

”

for（i=0;i<5;i++）//五次循环输出

document.write（"

上海世博欢迎您！

”

这是属于BODY的内容

保存文档，按F12浏览效果，如图10.1所示。

图10.1使用JavaScript脚本的基本结构

10.1.2使用JavaScript基本语法编写一个简易计算器

下面通过学习一个简易的计算器学习JavaScript中自定义函数的创建使用方法以及表单元素的获取，效果如图10.2所示。

图10.2简易计算器

1.新建表单网页calc.html，并为表单及各个表单元素命名，如图10.3所示。

图10.3简易计算器表单设计

其HTML代码如下：

购物简易计算器

第一个数

第二个数

计算结果

2.自定义函数

在JavaScript中，分别有内置函数和自定义函数，其中内置函数可在脚本任意位置随时调用（如alert函数）；自定义函数则必须先定义，然后才可以调用。

在JavaScript中自定义函数的语法如下：

function函数名称（参数1，参数2，…）{

语句；

｝

其中，function是定义函数的关键字，函数名称最好定义成一个“见名知义”的合法的标识符。

参数列表是传递给函数使用或操作的值，其值可以是常量、变量或其他表达式。

函数可以没有任何参数，但仍然必须保留小括号，如下所示：

function函数名称（）{

语句；

}

函数的定义放在之间。

表单元素值的获取代码：

document.表单名.表单元素名称.value;

在下面添加脚本代码：

functioncompute（op）//op为形式参数，它代码运算符号

{

varnum1,num2;//定义变量

num1=parseFloat（document.myform.txtNum1.value）;//将“第一个数”的文本框的值获取并转化为浮点数赋值到变量num1中

num2=parseFloat（document.myform.txtNum2.value）;//将“第二个数”的文本框的值获取并转化为浮点数赋值到变量num2中

if（op=="+"）//判断参数值是“+”

document.myform.txtResult.value=num1+num2;//将两个变量累加的值赋值到“计算结果”的文本框中

if（op=="-"）//判断参数值是“-”

document.myform.txtResult.value=num1-num2;//将两个变量相减的值赋值到“计算结果”的文本框中

if（op=="*"）//判断参数值是“*”

document.myform.txtResult.value=num1*num2;//将两个变量相乘的值赋值到“计算结果”的文本框中

if（op=="/"&&num2!

=0）//判断参数值是“/”同时num2变量不等于0

document.myform.txtResult.value=num1/num2;//将两个变量相除的值赋值到“计算结果”的文本框中

}

3.调用函数

要执行一个函数，必须先调用这个函数，要调用函数，必须指定函数名及其后面的参数列表（前提是有参数）。

函数的调用一般和表单元素的事件一起使用，调用格式如下：

事件名=“函数名（）”；

在“+”、“-”、“×”、“/”四个命令按钮属性中调用函数，当鼠标单击命令按钮时调用函数，添加调用命令后的运算按钮代码：

至此，一个简易的计算器设计完成，保存文件，F12浏览效果。

10.2JavaScript常用对象应用

10.2.1为网页编写一个日期显示的脚本

由于要用日期和时间和显示问题，所以要用到日期对象Date，要求时间能按秒钟显示动态效果，要用定时器setTimeout（）方法。

其中，日期对象是存储新Date对象的变量，下面为网页添加一个显示日期时间和脚本代码：

functionreloop（）{

vartime=newDate（）;//获得当前时间

//获得年、月、日，Date（）函数中的月份是从0－11计算

varyear=time.getYear（）;

varmonth=time.getMonth（）+1;

vardate=time.getDate（）;//获得小时、分钟、秒

varhour=time.getHours（）;

varminute=time.getMinutes（）;

varsecond=time.getSeconds（）;

//获得一个星期中的第几天,西方的星期是从星期日开始，星期六结束

varday=time.getDay（）;

if（minute<10）//如果分钟只有1位，补0显示

minute="0"+minute;

if（second<10）//如果秒数只有1位，补0显示

second="0"+second;

varapm="AM";//默认显示上午:

AM

if（hour>12）//按12小时制显示

{

hour=hour-12;

apm="PM";

}

varweekday=0;

switch（time.getDay（））{

case0:

weekday="星期日";

break;

case1:

weekday="星期一";

break;

case2:

weekday="星期二";

break;

case3:

weekday="星期三";

break;

case4:

weekday="星期四";

break;

case5:

weekday="星期五";

break;

case6:

weekday="星期六";

break;

}

document.myform.time.value="今天是:

"+year+"年"+month+"月"+date+"日"+weekday+""+hour+":

"+minute+":

"+second+apm;

setTimeout（"reloop（）",1000）;//每秒钟调用一次函数reloop（）"

}

—

/*设置样式：

无边框的文本框*/

INPUT{

font-size:

30px;

border-style:

none;

background-color:

#FF8B3B;

}

-->

保存网页，按F2浏览网页效果，如图10.4所示，显示的日期和时间与电脑中的内置时间相同。

图10.4显示日期和动态时钟

10.2.2设计弹出窗口

1.熟悉window常用方法

网站中有各种各样的弹出窗口，如网站公告，网站广告等，这就需要使用window对象的各种常用属性、方法和事件。

window对象的常用方法，如表10.1所示。

表10.1window常用方法

名称

说明

alert（"提示信息"）

显示一个带有提示信息和确定按钮的对话框

confirm（"提示信息“）

显示一个带有提示信息和确定、取消按钮的对话框

open（"url","name","feature"）

打开具有指定名称的新窗口，并加载给URL所指定的文档；如果没有提供URL，则打开一个空白文档

close（）

关闭当前窗口

setTimeout（"函数",毫秒数）

设置定时器：

经过指定毫秒值后执行某个函数

2.熟悉window窗口特征

制作网页弹出窗口的语法：

open（“打开窗口的url”,“窗口名”,“窗口特征”）

其中窗口特征属性如表10.2所示。

表10.2窗口特征属性

名称

说明

height

窗口高度

width

窗口宽度

toolbars

浏览器工具栏是否显示，yes或1为显示，no或0为不显示

scrollbars

是否显示滚动条

menubar

表示菜单栏是否显示

location

是否显示地址栏，yes或1为显示，no或0为不显示

status

是否显示状态栏，yes或1为显示，no或0为不显示

resizable

是否改变窗口的大小，yes或1为是，no或0为否

3.设计网页弹出窗口

设计思路：

打开首页的时候弹出一个大小固定，无滚动条、无菜单栏、无地址栏的广告窗口，主页的状态栏显示“上海世博欢迎您！

”，效果如图10.5所示。

图10.5自动弹出广告窗口

操作方法：

1）在站点中创建主页index.html，为方便之见，我们用插入图片表示首页。

2）在站点中创建一张广告网页adv.html，网页标题为“中国国家馆”，效果如图10.6所示。

图10.6广告页面

3）添加弹出窗口的JavaScript脚本。

在下面添下如下代码：

functionopenwindow（）

{

window.status="上海世博欢迎您！

";//状态栏显示“上海世博欢迎您！

”

open（"adv.html",中国馆","toolbars=0,location=0,statusbars=0,menubars=0,

width=500,height=250,scrollbars=0"）;

}

4）调用函数

由于要打开主页时自动弹出广告窗口，调用命令为网页加载事件onload。

在中添加脚本调用命令：

保存网页，按F12浏览效果。

10.3用JavaScript设计网页浮动广告

网站中经常除了弹出广告窗口之外，通常还有随滚动条移动的广告以及在网页中飘浮的广告，这就要使用window对象下的子对象——document对象，制作浮动广告主要涉及到document对象中的getElementById（）方法的应用，getElementById（）是根据HTML元素指定的ID，获得唯一一个HTML元素，如访问DIV层对象、图片img对象等。

10.3.1设计随滚动条移动的浮动的广告

1.任务分析

使用DIV层和JavaScript可以实现，先在页面中添加一个层，并把图片放在层中，然后使用JavaScript控制层的位置坐标，让其随滚动条同步移动，并且总保持层位于页面的左上角，如图10.7所示。

图10.7广告图片位于页面左侧

2.实现过程：

1）在dreamweaver中打开index.html，单击【布局】中“绘制APDiv”按钮

，在网页的左侧插入一个层，并设置层的相关属性，属性值如图10.8所示。

图10.8设置层的属性

2）切换到代码窗口，将层的属性修改为style=“……”。

当网页中插入层时dreamweaver会自动生成的样式代码：

#advleft{

position:

absolute;

left:

15px;

top:

40px;

width:

166px;

height:

335;

z-index:

1;

}

我们必须剪切advleft｛｝中的样式代码，然后复制到对应的的style属性中，即将其修改为：

absolute;

left:

15px;top:

40px;width:

166px;height:

335;z-index:

1;">，

中间的回车符不去也可以，注意层的宽度和高度应与插入的广告图片大小保持一致，最后去掉内嵌样式剩下的代码。

注意：

如果要在网页的右侧设计一个浮动广告，只要将上面代码中的“left”改变“right”即可。

3）在层中插入广告图片logo3.jpg。

4）编写JavaScrip脚本代码

varinitTop1=0;

functioninit（）//获取广告层的上边距的初始值

{

initTop1=document.getElementById（"advleft"）.style.pixelTop;

}

functionmove（）//使广告图片层与滚动条同步移动

{

document.getElementById（"advleft"）.style.pixelTop=initTop1+document.body.scrollTop;

}

window.onscroll=move;//窗口的滚动事件，当页面滚动时调用move（）函数

5）调用函数

其中init（）在网页加载时调用，即在中添加调用代码后为，也就是能在网页加载时获取广告图片的初始位置；move（）函数的在页面滚动时调用，即可以用代码window.onscroll=move;来调用函数。

至此，与滚动条同步移动的广告设计完成，保存文档，按F12浏览网页效果，即可实现广告图片随滚动条同步移动，并且总保持同一个位置，如图10.9所示。

图10.9广告图片与滚动条同步移动

10.3.2带关闭按钮的浮动窗口

1.任务分析

当我们在打开网站时，如果广告图片太多，会让浏览者感觉到很烦，如果给广告带上关闭的按钮，当用户用鼠标单击此按钮时广告层就可以隐藏起来，要实现此功能，只要在上述的广告层中插入一个子层，并把关闭图片插入其中，然后给“关闭图片”所在的层添加鼠标单击事件，当鼠标单击的时候，调用相关方法来关闭广告层即可。

2.实现过程

1）在dreamweaver打开10.3.1中带有随滚动条移动的广告网页，在层advleft中插入子层closeleft。

2）切换到代码窗口，将层的属性修改为style=“……”。

参考父层advleft的修改方法，将其样式代码，然后复制到对应的的style属性中

3）在子层cloesleft中插入关闭图片close.gif，并调整层的大小，使其与关闭图片大小相同，如图所示，修改后的广告层代码：

absolute;

left:

15px;top:

40px;width:

166px;height:

335;z-index:

1;">

absolute;

width:

92px;height:

19px;z-index:

1;left:

72px;top:

31