单元1--设计基本网页特效.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,Page,*,点击此处结束放映,单元,1,设计基本网页特效,任务,1-1 JavaScript,实现动态加,载网页内容,网页中常见的底部导航栏与版权信息如图,1-1,所示。,图,1-1,网页的底部导航栏与版权信息,图,1-1,所示的底部导航栏与版权信息可以采用,HTML,代码实现，代码如表,1-1,所示。,也可以采用,JavaScript,代码实现，对应的,JavaScript,代码如表,1-2,所示。,序号,程序代码,01,02,03,04,05,06,07,08,联系我们,网站地图,旅游调查,用户留言,设为首页,收藏本站,e,游天下网 版权所有,Copyright 2013-2016,蝴蝶工作室,为了您正常地浏览页面，推荐使用分辨率为,1080,800,及以上,表,1-1,实现网页底部导航栏与版权信息的,HTML,代码,序号,程序代码,01,02,03,04,05,06,07,08,09,10,11,12,13,14,任务,1-2 jQuery,实现网页收藏,在浏览该网页时，单击网页中的“,添加收藏,”超链接，会弹出如图,1-2,所示的【添加到收藏夹】对话框，在该对话框中单击【确定】按钮，则会将对应网页添加到收藏夹。,图,1-2,【添加到收藏夹】对话框,这里的添加收藏功能采用,jQuery,方式实现，代码如表,1-3,所示。,序号,程序代码,01,02,03,04,05,06,07,08,09,10,11,12,13,14,15,16,17,/,加入收藏夹,$(document).ready(function(),$(#favorite).click(function(),try,if(document.all)/,适用于,IE,浏览器,window.external.addFavorite(,科,e,互联,|IT,建站之选,),else if(window.sidebar)/,适用于,Firefox,浏览器,window.sidebar.addPanel(,科,e,互联,|IT,建站之选,),catch(e)/,当无法取得收藏效果，弹出收藏失败窗口,alert(,加入收藏失败，请使用,Ctrl+D,进行添加,),);,);,表,1-3,实现网页收藏功能的,JavaScript,代码,【知识必备】,1.1,JavaScript,简介,JavaScript,是一种基于对象和事件驱动的脚本语言。,使用它的目的是与,HTML,（超文本标记语言）一起实现网页中的动态交互功能。,通过嵌入或调用,JavaScript,代码在标准的,HTML,中实现其功能，它与,HTML,标签结合在一起，弥补了,HTML,的不足，,JavaScript,使网页变得更加生动。,JavaScript,是一种轻量级的编程语言，,JavaScript,插入,HTML,页面后，可由所有的,现代浏览器执行。,JavaScript,由布兰登,艾奇（,Brendan Eich,）发明，于,1995,年出现在,Netscape,中（该浏览器,已停止更新），并于,1997,年被,ECMA,（欧洲计,算机制造协会）采纳，将,JavaScript,制订为标,准，称为,ECMAScript,，,ECMA-262,是,JavaScript,标准的官方名称。,JavaScript,的基本语法与,C,语言类似，但运行过程中不需要单独编译，而是逐行解释执行，运行快。,JavaScript,具有跨平台性，与操作环境无关，只依赖于浏览器本身，只要浏览器支持,JavaScript,就能正确执行。,由于,JavaScript,具有复杂的文档对象模型,（,DOM,），不同浏览器实现的方式不一样；以,及缺乏便捷的开发、调试工具，所以,JavaScript,的应用并未真正推广开，正当,JavaScript,从开,发者的视线中渐渐隐去时，一种新型的基于,JavaScript,的,Web,技术,AJAX,（,Asynchronous JavaScript And XML,，异步,JavaScript,和,XML,）诞生了，使互联网中基于,JavaScript,的应用越来越多，从而使,JavaScript,不再是一种仅仅用于制作,Web,页面的脚本语言，,JavaScript,越来越受到重视，互联网正在掀起一场,JavaScript,风暴。,1.2,JavaScript,主要的语法规则,（,1,）网页中插入脚本程序的方式是使用,script,标记，把脚本标记,置于网页上的,head,部分或,body,部分，然后在其中加入脚本程序。,（,2,）所有的,JavaScript,语句都以分号“,;,”结束。,（,3,）,JavaScript,语言对大小写是敏感的。,1.3,JavaScript,常用的开发工具,编写与调试,JavaScript,脚本程序的工具有多,种，目前常用的工具有,Dreamweaver,、,Firebug,、,Visual Studio,、,Aptana,、,JavaScript Editor,等。,1,Dreamweaver,2,Firebug,3,Visual Studio,4,Aptana,1.4,在,HTML,文档中嵌入,JavaScript,代码的方法,HTML,中的,JavaScript,脚本必须位于,与,标签之间，脚本可被放置在,HTML,页面的,或,部分中，或者同时存在于两个部分中。,通常的做法是把函数放入,部分中，或者放在页面底部。,这样就可以把它们安置到同一处位置，不会干扰页面的内容。,JavaScript,代码嵌入,HTML,文档的形式有以下几种。,（,1,）在,head,部分添加,JavaScript,脚本。,（,2,）直接在,body,部分添加,JavaScript,脚本。,（,3,）链接,JavaScript,脚本文件。,外部,JavaScript,文件是最常见的包含,JavaScript,代码的方式，其主要原因有以,下几种。,（,1,）,HTML,页面中代码越少，搜索引擎就,能够以越快的速度来抓取网站并建立索引。,（,2,）保持,JavaScript,代码和,HTML,的分离，,这样代码显得更清晰，且最终更易于管理。,（,3,）因为可以在,HTML,代码中包含多个,JavaScript,文件，因此可以把,JavaScript,文件分开放在,Web,服务器上不同的文件目录结构中，这类似于图像的存放方式，这是一种更容易管理代码的做法。清晰、有条理的代码始终是让网站管理变容易的关键。,1.5,JavaScript,的注释,JavaScript,的注释用于对,JavaScript,代码进行解释，以提高程序的可读性。,调试,JavaScript,程序时，还可以使用注释阻止代码块的执行。,JavaScript,有两种类型的注释。,（,1,）单行注释以双斜杠开头（,/,）。,（,2,）多行注释以单斜杠和星号开头（,/*,），以星号和单斜杠结尾（,*/,）。,1.6,JavaScript,的数据类型,JavaScript,的基本数据类型主要有字符串（,String,）、数字（,Number,）、布尔（,Boolean,）、,Null,、,Undefined,，引用类型主要有数组和对象。,1,字符串,JavaScript,的字符串可以是引号中的任意文本，可以使用单引号或双引号。,2,数字,JavaScript,只有一种数字类型，数字可以带小数点，也可以不带。,3,布尔,JavaScript,的布尔（逻辑）类型只能有两个值：,true,或,false,。,布尔类型值常用在条件测试中。,4,Null,可以通过将变量的值设置为,null,来清空变量。,5,Undefined,Undefined,表示变量不含有值。,1.7,JavaScript,的常量,JavaScript,有,6,种基本类型的常量。,1.,字符型常量,字符型常量是使用单引号（,）或双引号（,）括起来的一个或几个字符。,2.,整型常量,整型常量是不能改变的数据，可以使用十进制、十六进制、八进制表示其值。,3.,实型常量,实型常量由整数部分加小数部分表示，可以使用科学或标准方法表示。,4.,布尔值,布尔常量只有两种值：,ture,或,flase,，主要用来说明或代表一种状态或标志。,5.,空值,JavaScript,中有一种空值类型,null,，表示什么也没有，可以理解为对象占位符。,如果试图引用没有定义的变量，则返回一个,null,值。,6.,特殊字符,JavaScript,中包含以反斜杠（,/,）开头的特殊字符，通常称为控制字符。,1.8,JavaScript,的变量,1,变量的概念与命名,2,JavaScript,变量的声明,（,1,）单个变量的声明与赋值。,（,2,）多个变量的声明与赋值。,（,3,）声明无值的变量。,（,4,）重复声明,JavaScript,变量。,3,JavaScript,变量类型的声明,4,局部,JavaScript,变量,5,全局,JavaScript,变量,1.9,JavaScript,的消息框,可以在,JavaScript,中创建,3,种形式的消息框，即警告框、确认框、提示框。,1.,警告框,警告框是一个带有提示信息和“确定”按钮的对话框，经常用于输出提示信息，当警告框出现后，用户需要单击【确定】按钮才能继续进行操作。,2.确认框,确认框是一个带有提示信息以及【确定】和【取消】按钮的对话框，用于使用户可以验证或者接受某些信息。,当确认框出现后，用户只有单击【确定】或者【取消】按钮才能继续进行操作。,3.提示框,提示框是一个提示用户输入的对话框，经常用于提示用户在进入页面前输入某个值。,当提示框出现后，用户需要输入某个值，然后单击【确认】按钮或【取消】按钮才能继续操作。,1.10,JavaScript,的异常处理,当,JavaScript,引擎执行,JavaScript,代码时，会发生各种错误。,（,1,）可能是语法错误，通常是程序员造成的编码错误或错别字。,（,2,）可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。,（,3,）可能是由于来自服务器或用户的错误输入而导致的错误。,（,4,）也可能是由于许多其他不可预知的原因。,1.11,JavaScript,库,JavaScript,高级程序设计（特别是对浏览器差异的复杂处理）通常很困难也很耗时，为了简化,JavaScript,的开发，许多,JavaScript,库应运而生。,这些,JavaScript,库常被称为,JavaScript,框架。,这些库封装了很多预定义的对象和实用函数，能帮助使用者轻松建立有高难度交互的富客户端页面，并且兼容各大浏览器。,1,jQuery,2,Prototype,3,MooTools,1.12,下载和替代,jQuery,库,1.13,jQuery,简介,jQuery,是一个,JavaScript,函数库，是一个,“写得更少，但做得更多”的轻量级,JavaScript,库，,jQuery,极大地简化了,JavaScript,编程。,1,jQuery,的引用方法,如需使用,jQuery,，需要先下载,jQuery,库，然后使用,HTML,的,标签引用它。,2,jQuery,函数的类别,jQuery,库是一个,JavaScript,文件，其中包含了所有的,jQuery,函数。,jQuery,库包含以下类别的函数。,（,1,）,HTML,元素选取函数。,（,2,）,HTML,元素操作函数。,（,3,）,CSS,操作函数。,（,4,）,HTML,事件函数。,（,5,）,JavaScript,特效和动画函数。,（,6,）,HTML DOM,遍历和修改函数。,（,7,）,AJAX,函数。,（,8,）,Utilities,函数。,3,jQuery,的基础语法,通过,jQuery,，可以选取（查询，,query,）,HTML,元素，并对它们执行“操作”（,actions,）。,jQuery,语法是为,HTML,元素的选取编制的，,可以对元素执行某些操作。,4,文档就绪函数,ready,任务,1-3 JavaScript,实现关闭网页时弹出小窗口,【任务描述】,编写代码实现关闭网页时弹出一个对话框的功能，该对话框如图,1-3,所示。,图,1-3,关闭网页时弹出的小窗口,任务,1-4 JavaScript,实现动态改变样式文件,【任务描述】,网页,0104.html,的底部内容如图,1-4,所示，单击超链接“应用,CSS,样式,1,”时网页引用外部样式文件,style1.css,，单击超链接“应用,CSS,样式,2,”时网页引用外部样式文件,style2.css,。,编写代码实现此功能。,图,1-4,网页,0104.html,的底部内容,任务,1-5 JavaScript,实现动态改变网页字体大小及关闭网页窗口,【任务描述】,网页,0105.html,的底部导航栏如图,1-5,所示，分别单击超链接“大”、“中”、“小”，可,以动态改变网页中文本的字体大小，单击超链,接“关闭”会弹出如图,1-6,所示的“是否关闭此窗口”提示信息对话框，在该对话框单击【是】按钮，将会关闭此网页窗口。,编写代码实现此功能。,图,1-5,网页,0105.html,的底部导航栏,图,1-6,“是否关闭此窗口”提示信息对话框,任务,1-6 JavaScript,实现播放,Flash,动画,【任务描述】,在网页,0106.html,中播放如图,1-7,所示的,Flash,动画。,图,1-7,在网页,0106.html,中播放的,Flash,动画,任务,1-7 JavaScript,实现设为主页,【任务描述】,在网页,0107.html,中单击“设为主页”超链,接，弹出如图,1-8,所示的小窗口，单击【是】按,钮即可将网页“,jQuery,实现动态设置页面的宽度和高度,【任务描述】,由于目前使用的显示器有多种不同的规格尺寸，设计网页时需要根据屏幕的尺寸合理设置网页的尺寸与背景。,试编写代码在网页,0108.html,中实现动态设置页面宽度和高度的功能。,任务,1-9,利用外部,JS,文件动态输,出网页内容,任务,1-10,巧用,CSS,实现下拉菜单,