网页行为语言-JavaS.ppt

《网页行为语言-JavaS.ppt》由会员分享，可在线阅读，更多相关《网页行为语言-JavaS.ppt（16页珍藏版）》请在三一办公上搜索。

1、主要内容JavaScript简介行为基于对象的JavaScript脚本语言对象事件制作JavaScript特效,第6章 网页行为语言JavaScript,脚本（Script）实际上就是一段程序，用来完成某些特殊的功能。脚本程序既可以在服务器端运行（称为服务器脚本，例如ASP脚本、PHP脚本等），也可以直接在浏览器端运行（称为客户端脚本）。JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言。使用它的目的是与HTML、CSS一起实现在一个Web页面中链接多个对象，与Web客户交互的作用。JavaScript不是Java，只不过两者类似。

2、JavaScript语言的前身叫作Livescript，自从Sun公司推出著名的Java语言后，Netscape公司引进了Sun公司有关Java的程序概念，将Livescript重新进行设计，并改名为JavaScript。,6.1 JavaScript简介,6.2.1 行为的基本概念 行为是Dreamweaver内置的JavaScript程序库，由事件（Event）和动作（Action）组成。行为是指某个事件发生时浏览器执行的动作，能实现用户与网页间的交互，通过某个动作来触发某项计划。,6.2 行为,6.2.1 行为的基本概念 事件是浏览器生成的消息，它指示该页的访问者已执行了某种操作。不同的

3、页面元素定义了不同的事件，在大多数浏览器中，onMouseOver事件和onClick事件是与链接关联的事件，而onLoad事件是与图像和文档的body部分关联的事件。动作是一段预先编写好的JavaScript代码，可用于执行以下常见的任务：打开浏览器窗口、显示或隐藏AP元素、弹出信息、设置导航栏图像、播放声音或影片等。,6.2 行为,6.2.2 行为面板 Dreamweaver CS4中，行为面板默认的位置位于“标签检查器”组合面板中，可以使用下面的方法打开行为面板。执行“窗口”“行为”命令；按Shift+F4组合键。使用“行为”面板可以将行为附加到页面元素，并可以修改以前所附加行为的参数。

4、已附加到当前所选页面元素的行为显示在行为列表中，并按事件以字母顺序列出。如果针对同一个事件列有多个动作，则会按在列表中出现的顺序执行这些动作；如果行为列表中没有显示任何行为，则表示没有行为附加到当前所选的页面元素。,6.2 行为,6.3.1 利用行为面板设置弹出窗口页面 弹出窗口页面是使用“打开浏览器窗口”行为实现的，是指在一个新的窗口中打开一个广告效果的页面，用户可以指定新窗口的大小、特性（是否可以调整大小、是否具有菜单栏等）和名称。,6.3 页面对象行为,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.3.3 案例一：制作曙光大学网站首页弹出窗口页面,6.3 页面对象行为,6.6.1

7、案例二：制作曙光大学网站首页滚动友情链接院校信息【案例综述】使用字幕技术和JavaScript脚本语言修改曙光大学网站首页友情链接栏目的展示形式。【案例展示】使用循环向上滚动的字幕展示友情链接的院校信息。当浏览者将鼠标移动到字幕区域后，字幕停止运动，让浏览者清晰地看到相关信息。,6.6 制作JavaScript特效,6.6.1 案例二：制作曙光大学网站首页滚动友情链接院校信息,6.6 制作JavaScript特效,6.6.2 案例三：制作曙光大学网站首页循环滚动图片广告【案例综述】使用字幕技术和JavaScript脚本语言修改曙光大学网站首页学校风采展示图片的展示形式。【案例展示】使用循环向左

8、滚动的字幕展示学校风采的系列图片。当浏览者将鼠标移动到字幕区域后，字幕停止运动；当浏览者将鼠标移出字幕区域后，字幕继续运动。该字幕是不间断循环滚动的，本案例的效果如图6-18所示。,6.6 制作JavaScript特效,6.6.2 案例三：制作曙光大学网站首页循环滚动图片广告,6.6 制作JavaScript特效,6.6.3 案例四：制作曙光大学网站首页幻灯切换广告【案例综述】制作曙光大学网站首页幻灯切换广告，展示学校最新的新闻图片。【案例展示】制作学校新闻栏目中的幻灯切换广告。每隔一段时间，广告自动切换到下一幅画面；用户单击广告下方的数字，将直接切换到相应的画面；用户单击链接文字，可以打开相应的网页。,6.6 制作JavaScript特效,6.6.3 案例四：制作曙光大学网站首页幻灯切换广告,6.6 制作JavaScript特效,