《网页行为语言——javascript单飞的鞋子》由会员分享,可在线阅读,更多相关《网页行为语言——javascript单飞的鞋子(19页珍藏版)》请在金锄头文库上搜索。
1、网页设计与制作教程 (第4版),机械工业出版社同名教材 配套电子教案,JavaScript简介 行为 三 表格布局页面的综合应用 基于对象的JavaScript脚本语言 五 对象事件 六 制作JavaScript特效 七 实训,第6章 网页行为语言JavaScript,脚本(Script)实际上就是一段程序,用来完成某些特殊的功能。脚本程序既可以在服务器端运行(称为服务器脚本,例如ASP脚本、PHP脚本等),也可以直接在浏览器端运行(称为客户端脚本)。 JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML、C
2、SS一起实现在一个Web页面中链接多个对象,与Web客户交互的作用。 JavaScript不是Java,只不过两者类似。JavaScript语言的前身叫作Livescript,自从Sun公司推出著名的Java语言后,Netscape公司引进了Sun公司有关Java的程序概念,将Livescript重新进行设计,并改名为JavaScript。,6.1 JavaScript简介,6.2.1 行为的基本概念 行为是Dreamweaver内置的JavaScript程序库,由事件(Event)和动作(Action)组成。行为是指某个事件发生时浏览器执行的动作,能实现用户与网页间的交互,通过某个动作来触发
3、某项计划。 事件是浏览器生成的消息,它指示该页的访问者已执行了某种操作。不同的页面元素定义了不同的事件,在大多数浏览器中,onMouseOver事件和onClick事件是与链接关联的事件,而onLoad事件是与图像和文档的body部分关联的事件。 动作是一段预先编写好的JavaScript代码,可用于执行以下常见的任务:打开浏览器窗口、显示或隐藏AP元素、弹出信息、设置导航栏图像、播放声音或影片等。,6.2 行为,6.2.2 行为面板 Dreamweaver CS4中,行为面板默认的位置位于“标签检查器”组合面板中,可以使用下面的方法打开行为面板。 执行“窗口”“行为”命令; 按Shift+F
4、4组合键。 使用“行为”面板可以将行为附加到页面元素,并可以修改以前所附加行为的参数。已附加到当前所选页面元素的行为显示在行为列表中,并按事件以字母顺序列出。如果针对同一个事件列有多个动作,则会按在列表中出现的顺序执行这些动作;如果行为列表中没有显示任何行为,则表示没有行为附加到当前所选的页面元素。,6.2 行为,6.3.1 利用行为面板设置弹出窗口页面 弹出窗口页面是使用“打开浏览器窗口”行为实现的,是指在一个新的窗口中打开一个广告效果的页面,用户可以指定新窗口的大小、特性(是否可以调整大小、是否具有菜单栏等)和名称。 如果不设置该窗口的任何属性,在打开该窗口时它的大小和属性与打开它的窗口相
5、同,指定窗口的任何属性都将自动关闭所有其它未明确设置的属性。例如,如果用户不设置窗口的任何属性,窗口将以1024像素768像素的大小打开,并具有导航条、地址工具栏、状态栏和菜单栏。如果用户将窗口宽度设置为640像素、高度设置为480像素,但不设置其它属性,则该窗口将以640像素480像素的大小打开,并且不显示工具栏。,6.3 页面对象行为,6.3.2 利用行为面板设置弹出信息框 “弹出信息”行为显示一个包含指定信息的JavaScript警告。因为JavaScript警告对话框只有一个“确定”按钮,所以使用此行为可以提供用户信息,但不能为用户提供选择操作。 设置弹出信息框的方法如下。 选择页面对
6、象,然后从“行为”面板的“添加行为”菜单中选择“弹出信息”,打开“弹出信息”对话框,如图6-7所示。 在对话框的“消息”文本框中输入用户希望显示的消息。 单击“确定”按钮,此时在“行为”面板中会自动添加一个单击对象的onClick事件,如图6-8所示。,6.3 页面对象行为,6.3.3 案例一:制作曙光大学网站首页弹出窗口页面 【案例综述】制作伴随曙光大学网站首页打开而自动打开的广告窗口页面。 【案例展示】当曙光大学网站首页在浏览器中打开时,广告页面在宽度为400、高度为300的窗口中自动打开,实例效果如图6-9所示。,6.3 页面对象行为,6.4.1 对象及相关概念 1对象 (1)对象的概念
7、 (2)对象的使用 2对象的属性 3对象的事件 4对象的方法,6.4 基于对象的JavaScript脚本语言,6.4.2 DHTML对象模型简介 在DHTML模型中,最顶层的对象是Window对象,其他对象可以看做是Window对象的属性,如图6-15所示。其中,对于编程最重要的属性是Document对象。Document对象表示浏览器中当前HTML文档,通过该对象能够获得关于当前文档的信息,可以检测和修改当前HTML文档的元素,还可以响应事件。,6.4 基于对象的JavaScript脚本语言,6.5.1 对象事件的分类 在JavaScript中,事件是预先定义好的、能够被对象识别的动作,事件
8、定义了用户与网页交互时产生的各种操作。例如,单击按钮时,就产生一个事件,告诉浏览器发生了需要进行处理的单击操作。浏览器自己的一些动作也可能产生事件,例如,浏览器载入个网页时,就会产生Load事件。当事件发生时,JavaScript将检测两条信息,即发生的是哪种事件和哪个对象接收了事件。 对象事件有三类: 用户引起的事件,如网页装载、表单提交等。 引起页面之间跳转的事件,主要是超级链接。 表单内部与界面对象的交互,包括界面对象的改变等。这类事件可以按照应用程序的具体功能自由设计。,6.5 对象事件,6.5.2 常用的事件及处理程序 1浏览器事件 浏览器事件主要由Load、unLoad、DragD
9、rop以及Submit等事件组成。 2鼠标事件 3键盘事件,6.5 对象事件,6.6.1 案例二:制作曙光大学网站首页滚动友情链接院校信息【案例综述】使用字幕技术和JavaScript脚本语言修改曙光大学网站首页友情链接栏目的展示形式。 【案例展示】使用循环向上滚动的字幕展示友情链接的院校信息。当浏览者将鼠标移动到字幕区域后,字幕停止运动,让浏览者清晰地看到相关信息。,6.6 制作JavaScript特效,6.6.2 案例三:制作曙光大学网站首页循环滚动图片广告 【案例综述】使用字幕技术和JavaScript脚本语言修改曙光大学网站首页学校风采展示图片的展示形式。 【案例展示】使用循环向左滚动
10、的字幕展示学校风采的系列图片。当浏览者将鼠标移动到字幕区域后,字幕停止运动;当浏览者将鼠标移出字幕区域后,字幕继续运动。该字幕是不间断循环滚动的,本案例的效果如图6-18所示。,6.6 制作JavaScript特效,6.6.3 案例四:制作曙光大学网站首页幻灯切换广告 【案例综述】制作曙光大学网站首页幻灯切换广告,展示学校最新的新闻图片。 【案例展示】制作学校新闻栏目中的幻灯切换广告。每隔一段时间,广告自动切换到下一幅画面;用户单击广告下方的数字,将直接切换到相应的画面;用户单击链接文字,可以打开相应的网页。,6.6 制作JavaScript特效,6.6.3 案例四:制作曙光大学网站首页幻灯切
11、换广告 【案例综述】制作曙光大学网站首页幻灯切换广告,展示学校最新的新闻图片。 【案例展示】制作学校新闻栏目中的幻灯切换广告。每隔一段时间,广告自动切换到下一幅画面;用户单击广告下方的数字,将直接切换到相应的画面;用户单击链接文字,可以打开相应的网页。,6.6 制作JavaScript特效,6.7.1 实训一:制作“爱家美食”网站菜谱弹出信息框 【 【实训综述】读者在学习了Dremweaver内置行为的基础上,进一步加强内置行为的练习,制作更多的网页交互功能。 【实训展示】制作“爱家美食”网站菜谱弹出信息框,当浏览者用鼠标单击菜谱图像后,弹出一个信息框,显示菜谱的简介信息,效果如图6-23所示
12、。,6.7 实训,6.7.2 实训二:制作“爱家美食”网站首页的幻灯切换广告【实训综述】读者在学习了JavaScript脚本语言的基础上,进一步加强使用代码制作网页特效的练习。 【实训展示】修改“爱家美食”网站首页的静态广告图片为动态的幻灯切换广告,本实训要求不使用Flash动画playswf.swf实现幻灯切换广告效果,采用纯JavaScript代码的形式实现这一功能,效果如图6-24所示。,6.7 实训,1使用内置行为设置状态栏显示文字,当页面加载时,在状态栏显示文字“欢迎您访问本站!”的提示。 2使用内置行为制作一个弹出式下拉菜单,效果如图6-25所示。 3制作一个循环切换画面的广告网页。每隔一段时间,广告自动切换到下一幅画面;用户单击广告右边的小图,将直接切换到相应的画面,效果如图6-26所示。 4在网页中插入JavaScript脚本实现鼠标跟随天使的特效,如图6-27所示。 5使用JavaScript脚本制作一个禁止使用鼠标右键操作的网页。当浏览者在网页上点击鼠标右键时,自动弹出一个警告对话框,禁止用户使用鼠标右键快捷菜单,实例效果如图6-28所示。,6.8 习题,