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,打开代码视图,输入以下代码:
JavaScript脚本的基本结构
varcount=0;//定义变量并初始化
document.write("");//屏幕输出“上海世博欢迎您!
”
for(i=0;i<5;i++)//五次循环输出
document.write("
上海世博欢迎您!
");//屏幕输出标题1格式的“上海世博欢迎您!
”
这是属于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