石家庄工程技术学校贾志华《网页设计培训—javascript部分》_百

1、石家庄工程技术学校贾志华网页设计培训javascript部分n 第1章 制作日期和排行榜显示特效任务1：第一个嵌入JavaScript脚本的网页1、打开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例第一个嵌入JavaScript脚本的网页素材素材.htm”页面。（2）切换到【代码视图】。2、向页面添加JavaScript脚本：（1）在下方，编写脚本。（2）DW中用不同颜色显示，JavaScript脚本代码。alert(你还记得李白的静夜思吗？);/向页面弹出信息提示框document.write(这是我的第一个JAVASCRIPT脚本页面);/用于向页面打印信息document.

2、write();任务2：显示日期1、打开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例显示日期素材素材.htm”页面。（2）切换到【代码视图】。2、添加标签对：（1）在下方，添加标签对，脚本代码如下：3、添加创建日期对象的脚本（1）创建一个不带参数的Date日期对象，默认包含系统的当期日期和时间，代码如下：var time = new Date(); /获得当前时间4、添加脚本，获取当前日期的年、月、日（1）Date对象分别提供了获取年、月、日的方法。getFullYear：返回Date对象的年份，一个四位的整数。getMonth：返回Date对象的月份，介于011。getDat

3、e：返回Date对象的日，介于131。（2）分别声明变量year、month、date用于接收从Date对象中获取的年、月、日，脚本代码如下：var year = time.getFullYear(); var month = time.getMonth()+1; var date = time.getDate();5、添加脚本，拼接字符串输出显示，代码如下：document.write(今天是:+year+年+month+月+date+日);/向页面打印结果6、完整代码如下： var time = new Date(); /获得当前时间/获得年、月、日，Date对象返回月份是从0-11之间

4、var year = time.getFullYear(); var month = time.getMonth()+1; var date = time.getDate(); document.write(今天是:+year+年+month+月+date+日);/向页面打印结果任务3：显示时间1、打开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例显示时间素材素材.htm”页面。（2）在【设计视图】模式下，选中页面中文字“时间问候语的显示位置”。（3）切换到【代码视图】。2、添加脚本，创建Date日期对象，获得Date对象的小时数：（1）删除步骤1中选中的页面中的文字，嵌入Jav

5、aScript脚本标签。（2）创建Date对象。（3）获取Date对象中的小时数。代码如下： var time = new Date( ); /获得当前时间 var hour = time.getHours(); /获得具体的小时 document.write(欢迎您光临中远集团 ) document.write(现在时间是:+hour+点t);3、添加脚本，通过if-else if语句判断当前时间所处的时段（1）在2操作步骤中已经获取了Date对象的小时数，接下来将以12点和18点为条件，使用if-else语句判断当前时间是上午、下午还是晚上，代码如下： if (hour12) /按12小时

6、制显示 document.write(上午好！); else if(hour18) document.write(下午好！); else document.write(晚上好！);任务4：显示星期几1、打开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例显示星期几素材素材.htm”页面。（2）在【设计视图】模式下，选中页面中文字“星期几的显示位置”。（3）切换到【代码视图】。2、添加JavaScript脚本，创建Date对象并从中获取第几天：（1）删除步骤1中选中的页面中的文字，嵌入JavaScript脚本标签。（2）创建Date对象：new Date( )，表示当前日期。（3）使

7、用getDay( )获取星期几，代码如下：var time = new Date( ); /获得当前时间var day = time.getDay();/获得一个星期中的第几天,西方的星期是从星期日开始，星期六结束3、使用switch-case语句转换显示内容，脚本代码：（1）设置switch条件语句的case条件，并通过document.write()输出语句，将结果输出到页面，脚本代码如下：switch(day)case 0:document.write(今天是星期日，不知道今天有没有火箭的比赛);break;case 1:document.write(今天是星期一，不能睡懒觉了好辛苦呀)

8、;break;case 2:document.write(今天是星期二，电影票半价，看看有什么好看的大片);break;case 3:document.write(今天是星期三，一周已经过一半了，有盼头了);break;case 4:document.write(今天是星期四，坚持就是胜利);break;case 5:document.write(今天是星期五，我要站好最后一班岗);break;case 6:document.write(今天是星期六，我要去K歌，我要去SHOPPING，今天是属于我的);break;任务5：使用for循环语句输出投票排名1、打开素材页面，并切换到代码视图：（1

9、）使用DW打开“课堂演示示例使用for循环语句输出投票排名素材素材.htm”页面。（2）在【设计视图】模式下，选中页面中文字“投票排名的显示位置”。（3）切换到【代码视图】。2、添加JavaScript脚本，使用for循环语句打印排名：（1）删除步骤1中选中之间的文字，嵌入JavaScript脚本标签。（2）总共四名球员，所以设定循环次数为4次。（3）每次循环将排行条长度增加20，然后用document.write()语句输出，代码如下：for (var i= 0; i 4; i+)document.write(+(80+i*20)+票);上机实练部分实训1：随机显示图片广告1、打开素材页面，

10、并切换到代码视图：（1）使用DW打开“上机实练案例随机显示图片广告素材素材.htm”页面。（2）在【设计视图】模式下，选中页面中文字“广告图片的显示位置”。（3）切换到【代码视图】。2、页面嵌入JavaScript脚本，创建Date对象，并获取秒数：（1）删除步骤1中选中的之间的文字，嵌入JavaScript脚本标签。（2）创建一个包含了当前系统日期时间的Date对象。（3）获取Date对象中的秒数。代码如下：var time=new Date();var seconds=time.getSeconds();3、以12秒为周期，通过if条件语句判断输出图片的条件（1）设置一个图片变量用来存放不

11、同时间段显示的图片名，初始存放图片为pic1.jpg。（2）根据获得的秒数判断显示哪张图片。（3）使用document.write()向页面输出结果，代码如下：var thisimg=pic1.jpg;if(seconds12)thisimg=pic5.jpg;if(seconds24)thisimg=pic4.jpg;if(seconds36)thisimg=pic3.jpg;if(seconds48)thisimg=pic2.jpg;document.write();实训2：评比星级商铺1、打开素材页面，并切换到代码视图：（1）使用DW打开“上机实练案例评比星级商铺素材素材.htm”页面。

12、（2）在【设计视图】模式下，选中页面中文字“星级显示位置。（3）切换到【代码视图】。2、页面嵌入JavaScript脚本：（1）删除步骤1中选中的之间的文本，嵌入JavaScript脚本标签。（2）假定商家星级为4，设定for循环语句的循环次数为4次。（3）使用document.write()向页面输出结果。代码如下：for(var i=0;i4;i+)document.write();实训3：计算年龄1、打开素材页面，并切换到代码视图：（1）使用DW打开“上机实练案例计算年龄素材素材.htm”页面。（2）在【设计视图】模式下，选中页面中文字“年龄显示的位置”。（3）切换到【代码视图】。2、页

13、面嵌入JavaScript脚本，创建Date对象：（1）删除步骤1中选中的文本，嵌入JavaScript脚本标签。（2）创建两个Date对象，一个存储的是当前的日期时间，一个存储的是设定的出生日期，代码如下： var birDay=new Date(1978,11,01); var time=new Date();3、计算年龄：（1）使用Date对象的getFullYear()分别获得当前年份和生日所在年份。（2）二者相减得到年龄，代码如下：var age=time.getFullYear()-birDay.getFullYear();document.write(age);实训4：北京奥运会

14、倒计时1、打开素材页面，并切换到代码视图：（1）使用DW打开“上机实练案例计算年龄北京奥运会倒计时素材.htm”页面。（2）在【设计视图】模式下，选中页面中文字“?”。（3）切换到【代码视图】。2、页面嵌入JavaScript脚本，创建Date对象：（1）删除步骤1中选页面中的“?”，嵌入JavaScript脚本标签。（2）创建两个Date对象，一个存储当前日期，一个存储的是2008年8月8日奥运会开幕式的日期，代码如下： 3、通过Date对象的getTime()方法获得两个Date对象时间的毫秒数之差：var remain=finalDay.getTime()-today.getTime()

15、;4、将毫秒差换算成天数（1）毫秒换成天数=24小时*60分钟*60秒*1000毫秒。（2）使用Math内置对象的ceil()方法取得一个以整数表示的间隔天数。（3）使用document.write()输出语句将计算的结果输出。代码如下：var oneDay=24*60*60*1000; var days=remain/oneDay; var daysold=Math.ceil(days); /ceil( )可以返回一个大于或等于的最小整数 document.write(+daysold+); 第2章 制作鼠标改变背景的特效任务1：随鼠标变化的文字背景1、打开素材页面，并切换到代码视图：（1）

16、使用DW打开“课堂演示示例随鼠标变换的文字背景素材素材.htm”页面。（2）在【设计视图】模式下，选中文本“欢迎来到腾讯客服中心”。（3）切换到【代码视图】。2、向页面添加鼠标移入事件：（1）将光标定位到标签中末尾处，按下空格，自动弹出操作列表，选择“onMouseOver”。3、在鼠标移入事件中添加修改文本背景颜色的代码：onMouseOver=this.style.backgroundColor=#FFFF00 4、在鼠标移出事件中添加修改文本背景颜色的代码：onMouseOut=this.style.backgroundColor=任务2：随鼠标变化的边框颜色1、打开素材页面，并切换到代

17、码视图：（1）使用DW打开“课堂演示示例随鼠标变换的边框颜色素材素材.htm”页面。（2）在【设计视图】模式下，选中用户名文本框。（3）切换到【代码视图】。2、添加鼠标事件：（1）将光标定位到添加文本框的标签末尾，按下空格，自动弹出操作列表，选择“onMouseOver”和“onMouseOut”。3、在鼠标事件中添加改变和恢复边框颜色的代码：onMouseOver=this.style.borderColor=blue onMouseOut=this.style.borderColor=#9DF986任务3：随鼠标变化的图片1、打开素材页面，并切换到代码视图：（1）使用DW打开“课堂演示示例

18、随鼠标变换的图片素材素材.htm”页面。（2）在【设计视图】模式下，选中页面中的广告。（3）切换到【代码视图】。2、添加鼠标事件，并在鼠标事件中添加改变图片路径的脚本：（1）将光标定位到图像的标签末尾，自动弹出操作列表，选择“onMouseOver”和“onMouseOut”。（2）在鼠标移入事件中添加修改图片路径的代码：onMouseOver=this.src=images/p2.jpg（3）在鼠标移出事件中恢复最初的图片显示：onMouseOut=this.src=images/p1.jpg任务4：同时变化的文字大小和颜色1、打开素材页面，添加JavaScript标签：（1）使用DW打开“

19、课堂演示示例随鼠标同时变化的文字大小和颜色素材素材.htm”页面。（2）切换到【代码视图】。（3）在“忘记代码”超链接标签中定义name属性为“pwd”。2、定义鼠标移入事件调用的函数：（1）在页面中添加JavaScript标签。（2）在标签内定义函数mouseIn()，这个函数是在鼠标移入事件中调用，实现文字大小和颜色的改变，代码如下：function mouseIn() （3）在函数内编写脚本代码：改变文字颜色的脚本代码：pwd.style.color=red;改变文字大小的脚本代码：pwd.style.fontSize=26px;mouseIn()函数完整代码如下：function mo

20、useIn()pwd.style.fontSize=26px;pwd.style.color=red;4、参照函数mouseIn()的实现，定义鼠标移出时调用的函数。（1）定义函数mouseOut()，在鼠标移出时调用，代码如下：function mouseOut()pwd.style.fontSize=12px;pwd.style.color=blue;5、添加超链接中的鼠标事件，调用已定义的函数。（1）在“忘记代码”的超链接标签中添加鼠标移入事件onMouseOver和鼠标移出事件onMouseOut，分别在事件中年调用已经定义好的mouseIn()函数和mouseOut()函数。onMo

21、useOver=mouseIn() onMouseOut=mouseOut()任务5：使用有参函数修改演示案例41、页面准备：（1）使用DW打开“理论演示示例使用有参函数修改演示案例4素材素材.htm”页面。（2）切换到【代码视图】，在页面中添加JavaScript脚本标记。（3）给“忘记代码”超链接制定name属性为“pwd”。2、定义函数： （1）在标签内定义函数mouseChange(color,size)，第一个参数color用于改变文字的颜色，第二个参数size用于改变文字的大小，代码如下：function mouseChange(color,size)3、脚本代码实现：（1）改变文

22、字颜色的脚本代码：pwd.style.color=color;（2）改变文字大小的脚本代码：pwd.style.fontSize=size;（3）mouseChange(color,size)函数完整代码如下：function mouseChange(color,size)pwd.style.color=color;pwd.style.fontSize=size;4、添加鼠标事件调用函数。（1）在“忘记代码”的超链接标签中添加鼠标事件，并调用函数。onMouseOver=mouseChange(red,26px) onMouseOut=mouseChange(blue,12px)5、保存页面，

23、按下F12键，查看结果。任务6：使用无参函数改变页面背景颜色1、函数定义：（1）添加脚本标签。（2）定义函数。定义函数changeBTN1()，在函数体内编写脚本：document.bgColor=blue;定义函数changeBTN2()，在函数体内编写脚本：document.bgColor=red;定义函数changeBTN3()，在函数体内编写脚本：document.bgColor=green;完整代码如下：function changeBTN1()document.bgColor=blue;function changeBTN2()document.bgColor= red ;func

24、tion changeBTN3()document.bgColor= green ;2、添加按钮的单击事件，调用函数： （1）分别添加三个按钮的单击事件，然后在事件中调用相应的函数，代码如下：onClick= changeBTN1()onClick= changeBTN2()onClick= changeBTN3()任务7：使用有参函数修改演示案例61、页面添加脚本语言，定义函数：（1）添加脚本标签。（2）定义一个函数change(color)，在函数体内编写代码：document.bgColor=color;2、添加按钮的单击事件并调用函数： （1）分别添加三个按钮的单击事件，在事件中调用函

25、数，并同时传递需要改变的背景颜色值，代码如下：onClick=change(blue)onClick=change(red)onClick=change(green)3、保存页面，按下F12键，查看结果。上机实练部分实训1：改变文字背景颜色一、技能要点（1）会使用鼠标移入事件onMouseOver。（2）会使用鼠标移出事件onMouseOut。（2）会使用样式属性backgroundColor。二、操作步骤1、打开素材页面：（1）使用DW打开“上机案例改变文字背景颜色素材素材.htm”页面。（2）在【设计视图】模式下，选中文本“五福临门2008年北京奥运会吉祥物”。（3）切换到【代码视图】。2

26、、添加鼠标事件：（1）在标签内添加鼠标移入事件onMouseOver和鼠标移出事件onMouseOut。3、在鼠标事件中添加改变背景色代码：onMouseOver=this.style.background=#FFAD5B onMouseOut=this.style.backgroundColor=实训2：改变多个样式（文字大小，文字颜色，边框颜色）1、打开素材页面：（1）使用DW打开“上机案例改变多个样式（文字大小，文字颜色，边框颜色）素材素材.htm”页面。（2）在【设计视图】模式下，选中“QQ号码”文本框。（3）切换到【代码视图】。2、添加鼠标事件：（1）在文本框代码中“onMouseO

27、ver”和“onMouseOut”事件。3、在鼠标事件中改变边框颜色的代码：onMouseOver=this.style.borderColor=#F1520E onMouseOut=this.style.borderColor=#7DBEFF4、修改文字颜色：（1）在“忘记QQ号码”所在的超链接中，添加鼠标事件。（2）在鼠标事件中改变文字颜色的代码：onMouseOver=this.style.color=#FFAD5B onMouseOut=this.style.color=#0000FF5、修改文字大小：（1）在“看不清，换一张”所在的超链接中，添加鼠标事件。（2）在鼠标事件中改变文字大

28、小的代码：onMouseOver=this.style.fontSize=26px onMouseOut=this.style.fontSize=12px实训3：改变按钮背景1、打开素材页面，并切换到代码视图：（1）使用DW打开“上机案例改变按钮背景素材素材.htm”页面。（2）在【设计视图】模式下，选中“登录”按钮。（3）切换到【代码视图】。2、添加鼠标事件：（1）在按钮图片代码中添加“onMouseOver”和“onMouseOut”事件。3、在鼠标事件中添加修改图片现实路径的脚本代码：onMouseOver=this.src=images/submit.gif onMouseOut=th

29、is.src=images/login_submit.gif实训4：同时改变文字的大小和颜色1、打开素材页面，并切换到代码视图：（1）使用DW打开“上机案例同时改变文字的大小和颜色素材素材.htm”页面。（2）在【设计视图】模式下，选中文字“阅读并同意拍拍用户协议”。（3）切换到【代码视图】。（4）给文字所处的超链接指定name属性，设定值为“agreement”。2、向页面添加JavaScript标记，并定义函数：（1）在页面中添加JavaScript标签。（2）在标签内定义鼠标事件调用的自定义函数。鼠标移入事件调用的函数。function mouseUP( )agreement.style

30、.fontSize=26px;agreement.style.color=red;鼠标移出事件调用的函数。function mouseOff( )agreement.style.fontSize=12px;agreement.style.color=#0000FF;3、添加鼠标事件，并调用JavaScript自定义函数：（1）在文字所处的超链接标签中添加鼠标移入事件“onMouseOver”和鼠标移出事件“onMouseOut”，然后在鼠标事件中分别调用JavaScript函数，脚本如下：onMouseOver=mouseUP() onMouseOut=mouseOff()实训5：使用有参函数

31、同时改变文字的大小和颜色1、打开素材页面，并切换到代码视图：（1）使用DW打开“上机案例使用有参函数同时改变文字的大小和颜色素材素材.htm”页面。（2）在【设计视图】模式下，选中文字“阅读并同意拍拍用户协议”。（3）切换到【代码视图】。（4）给文字所处的超链接指定name属性，设定值为“agreement”。2、向页面添加JavaScript标记，并定义函数：（1）在页面中添加JavaScript标签。（2）在标签内定义鼠标事件调用的自定义函数并传进两个参数color和size。自定义函数名称为changeFont(color,size)。代码如下：function changeFont(c

32、olor,size)agreement.style.color=color;agreement.style.fontSize=size;3、添加鼠标事件，并调用JavaScript自定义函数：（1）在文字所处的超链接标签中添加鼠标移入事件“onMouseOver”和鼠标移出事件“onMouseOut”，然后在鼠标事件中分别调用changeFont(color,size)函数，脚本代码如下： 阅读并同意拍拍用户协议第3章 制作窗口页面特效任务1：打开广告窗口1、打开素材页面，添加JavaScript标签：（1）使用DW打开“课堂演示示例打开广告窗口素材素材.htm”页面。（2）切换到【代码视图】

33、。（3）在之间添加标签。2、定义打开新窗口的函数：（1）定义JavaScript函数，在函数中调用window对象的open()方法。代码如下：function init()window.open(adv.html);3、添加onLoad事件：（1）在标签中添加onLoad事件并调用定义好的函数，代码如下：任务2：打开指定大小的窗口1、打开素材页面，添加JavaScript标签：（1）使用DW打开“课堂演示示例打开指定大小的窗口素材素材.htm”页面。（2）切换到【代码视图】。（3）在 之间添加标签，代码如下：2、定义打开窗口的函数：（1）参考演示示例1，声明自定义函数init()。（2）在o

34、pen()方法中设置width窗口宽度和height窗口高度。同时设置resizable属性值为0，禁止改变窗口大小。而其他窗口属性，如状态栏、工具栏、地址栏等在本例中都设置为1，表示正常显示：function init()window.open(adv.html,toolbar=1,scrollbars=1,location=1,status=1,menubar=1,resizable=0,width=400,height=210);3、添加onLoad事件，代码如下：任务3：隐藏窗口的地址栏，工具栏，菜单栏1、打开素材页面，添加JavaScript标签：（1）使用DW打开“课堂演示示例制作

35、隐藏窗口的地址栏，工具栏，菜单栏素材素材.htm”页面。（2）切换到【代码视图】。（3）在 之间添加标签。2、定义打开窗口的函数，并设置open()方法的窗口属性：（1）在标签内声明自定义函数function init()。（2）在open()方法中设置窗口属性。代码如下：function init()window.open(adv.html,toolbar=0,scrollbars=1,location=0,status=1,menubar=0,resizable=0,width=400,height=210);3、添加onLoad事件，代码如下：任务4：通过函数的参数传递开启不同风格的窗口

36、1、打开素材页面，添加JavaScript标签：（1）使用DW打开“课堂演示示例通过函数的参数传递开启不同风格的窗口素材素材.htm”页面。（2）切换到【代码视图】。（3）在 之间添加标签。2、定义JavaScript函数，设置接收参数：（1）定义函数openWindow(url,winProperty)，然后在方法体内编写打开窗口的脚本代码。window.open(url,winProperty);3、添加按钮的onClick事件，并调用对应的函数。（1）打开普通窗口，参数设置：onClick=openWindow(adv.html,)（2）指定窗口大小（宽度380，高度220），参数设置：

37、onClick=openWindow(adv2.html,toolbar=1,scrollbars=1,menubar=1,status=1,location=1,resizable=0,width=380,height=220)（3）隐藏窗口属性的窗口，参数设置：onClick=openWindow(adv3.html,toolbar=0,scrollbars=0,menubar=0,status=0,location=0,resizable=0,width=380,height=220)（4）打开全屏窗口，参数设置：onClick=openWindow(adv4.html,fullscre

38、en=yes)任务5：使用外部JavaScript文件实现窗口打开1、使用DW创建JavaScript文件：（1）【文件】【新建】【JavaScript】【创建】；（2）打开一个只有代码视图界面的窗口。2、添加脚本代码并保存文件：（1）编写脚本代码如下：/ JavaScript Documentfunction openWindow(url,agrement)window.open(url,agrement);（2）脚本代码编写完毕后保存文件，文件会默认保存成以“.js”为扩展名的文件。3、在HTML页面中引入外部JavaScript文件。（1）嵌入JavaScript标签：因为浏览器在解析页

39、面时，当读取到标签时，才会去执行里面包含的脚本代码。所以首先要做的就是在HTML页面中嵌入脚本标签。（2）嵌入JavaScript标签后，需要再设置标签的src属性。JavaScript标签的src属性与以前学习的图像标签中src属性是相同的，都是提供浏览器检查文件的路径，即告诉浏览器外部JavaScript文件的保存路径。代码如下：任务6：窗口关闭1、打开素材页面，添加JavaScript标签：（1）使用DW打开“课堂演示示例窗口关闭素材素材.htm”页面。（2）切换到【代码视图】。（3）在 之间添加标签。2、添加窗口关闭的脚本代码：（1）定义一个closewindow( )，在函数体中编写

40、脚本代码：closewindow( )，代码如下：function closewindow( ) window.close( );3、在鼠标事件中调用函数。（1）在退出按钮代码中添加鼠标的单击事件。（2）在单击事件中调用closewindow( )函数，代码如下：onclick=closewindow( )实训1：打开广告窗口1、打开素材页面，添加JavaScript标签：（1）使用DW打开“上机案例打开广告窗口素材素材.htm”页面。（2）切换到【代码视图】。（3）在 之间添加标签。2、添加打开新窗口的脚本代码：（1）定义一个advWindow()，在函数体中编写脚本代码：window.op

41、en(adv.html);，代码如下：function advWindow()window.open(adv.html);3、添加页面加载事件（1）在页面标签内添加页面加载onLoad事件。（2）在onLoad事件中调用advWindow()函数，代码如下：4、在广告窗口中添加关闭窗口功能：（1）使用DW打开“上机案例打开广告窗口素材adv.html”页面。（2）切换到【代码视图】。（3）在 之间添加标签。5、添加关闭新窗口的脚本代码：（1）定义关闭窗口函数closeWindow()，在函数体内编写脚本window.close();。代码如下：function closeWindow()win

42、dow.close();（2）在关闭窗口按钮上添加按钮单击事件，并调用closeWindow()函数，代码如下：实训2：指定窗口的大小1、打开素材页面，添加JavaScript标签：（1）使用DW打开“上机案例指定窗口的大小素材素材.htm”页面。（2）切换到【代码视图】。（3）在 之间添加标签。2、添加打开新窗口的脚本代码：（1）定义一个advWindow()，在函数体中编写脚本代码，代码如下：function advWindow()window.open(adv.html,toolbar=1,scrollbars=0,location=1,status=1,menubar=1,resiza

43、ble=0,width=320,height=400);3、添加onLoad事件，调用函数：（1）在页面标签内添加页面加载onLoad事件。代码如下：实训3：隐藏窗口的菜单栏，工具栏和状态栏1、打开素材页面，并切换到代码视图：（1）使用DW打开“上机案例隐藏窗口的菜单栏，工具栏和状态栏素材素材.htm”页面。（2）切换到【代码视图】。（3）在 之间添加标签。2、添加打开新窗口的脚本代码：（1）定义一个advWindow()，在函数体中编写脚本代码，代码如下：function advWindow()window.open(adv.html,toolbar=0,scrollbars=1,locat

44、ion=0,status=0,menubar=0,resizable=0,width=320,height=400);3、添加onLoad事件，调用函数：（1）在页面标签内添加页面加载onLoad事件。代码如下：实训4：通过参数传递调用函数，动态打开不同风格的窗口1、打开素材页面，添加JavaScript标签：（1）使用DW打开“上机案例通过参数传递调用函数，动态打开不同风格的窗口素材素材.html”页面。（2）切换到【代码视图】。（3）在 之间添加标签。2、定义JavaScript函数，设定接收参数：（1）定义函数openWindow(url,agrement)，在函数体中编写脚本代码，代码

45、如下：function openWindow(url,agrement)window.open(url,agrement);3、添加按钮的onClick事件，并调用对应的函数：（1）打开普通窗口。代码如下：onClick=openWindow(adv.html,)（2）指定窗口大小（宽380，高220）。代码如下：onClick=openWindow(adv2.html,toolbar=1,scrollbars=1,menubar=1,status=1,location=1,resizable=0,width=400,height=200)（3）隐藏窗口属性的窗口。代码如下：onClick=o

46、penWindow(adv3.html,toolbar=0,scrollbars=0,menubar=0,status=0,location=0,resizable=0,width=380,height=220)（4）打开全屏窗口。代码如下：onClick=openWindow(adv4.html,fullscreen=yes)实训5：通过外部JavaScript文件打开窗口1、使用DW创建JavaScript文件：（1）【文件】【新建】【JavaScript】【创建】。2、添加脚本代码并保存文件：（1）书写代码如下：/ JavaScript Documentfunction openWindow(url,agrement)window.open(url,agrement);function closeWindow()window.close();（2）保存文件为：j