设计基本网页特效

1、 任务任务1-1 JavaScript实现动态加实现动态加载网页内容载网页内容 网页中常见的底部导航栏与版权信网页中常见的底部导航栏与版权信息如图息如图1-1所示。所示。图图1-1网页的底部导航栏与版权信息网页的底部导航栏与版权信息 图图1-1所示的底部导航栏与版权信息所示的底部导航栏与版权信息可以采用可以采用HTML代码实现，代码如表代码实现，代码如表1-1所示。所示。 也可以采用也可以采用JavaScript代码实现，对代码实现，对应的应的JavaScript代码如表代码如表1-2所示。所示。序号序号程序代码程序代码0102030405060708 联系我们联系我们  |

2、  网站地图网站地图  |  旅游调查旅游调查  |   用户留言用户留言 |  设为首页设为首页  |  收藏本站收藏本站 e游天下网游天下网 版权所有版权所有 Copyright 2013-2016 蝴蝶工作室蝴蝶工作室 为了您正常地浏览页面，推荐使用分辨率为为了您正常地浏览页面，推荐使用分辨率为1080800及以上及以上 表表1-1实现网页底部导航栏与版权信息的实现网页底部导航栏与版权信息的HTML代码代码序号序号程序代码程序代

3、码0102030405060708091011121314 !- var footerContent ; footerContent = 联系我们联系我们 | 网站地图网站地图 | 旅游调查旅游调查 | ; footerContent += 用户留言用户留言 | 设为首页设为首页 | 收藏本站收藏本站; footerContent += e游天下网游天下网 版权所有版权所有 Copyright 2013-2016 蝴蝶工作室蝴蝶工作室; footerContent += 为了您正常地浏览页面，推荐使用分辨率为为了您正常地浏览页面，推荐使用分辨率为1080800及以上及以上; document.

4、write(footerContent); / - 在浏览该网页时，单击网页中的在浏览该网页时，单击网页中的“添加添加收藏收藏”超链接，会弹出如图超链接，会弹出如图1-2所示的【添加所示的【添加到收藏夹】对话框，在该对话框中单击【确到收藏夹】对话框，在该对话框中单击【确定】按钮，则会将对应网页添加到收藏夹。定】按钮，则会将对应网页添加到收藏夹。图图1-2【添加到收藏夹】对话框【添加到收藏夹】对话框 这里的添加收藏功能采用这里的添加收藏功能采用jQuery方方式实现，代码如表式实现，代码如表1-3所示。所示。序号序号程序代码程序代码01020304050607080910111213141516

5、17/加入收藏夹加入收藏夹$(document).ready(function() $(#favorite).click(function() try if (document.all) /适用于适用于IE浏览器浏览器 window.external.addFavorite(http:/, 科科e互联互联 | IT建站之选建站之选) else if (window.sidebar) /适用于适用于Firefox浏览器浏览器 window.sidebar.addPanel(科科e互联互联 | IT建站之选建站之选, http:/, ) catch(e) /当无法取得收藏效果，弹出收藏失败窗口当无

6、法取得收藏效果，弹出收藏失败窗口 alert(加入收藏失败，请使用加入收藏失败，请使用Ctrl+D进行添加进行添加) ););表表1-3实现网页收藏功能的实现网页收藏功能的JavaScript代码代码【知识必备】【知识必备】 JavaScript是一种基于对象和事件驱动是一种基于对象和事件驱动的脚本语言。的脚本语言。 使用它的目的是与使用它的目的是与HTML（超文本标（超文本标记语言）一起实现网页中的动态交互功能。记语言）一起实现网页中的动态交互功能。 通过嵌入或调用通过嵌入或调用JavaScript代码在标准的代码在标准的HTML中实现其功能，它与中实现其功能，它与HTML标签结合在标签结合

7、在一起，弥补了一起，弥补了HTML的不足，的不足，JavaScript使网使网页变得更加生动。页变得更加生动。 JavaScript是一种轻量级的编程语言，是一种轻量级的编程语言，JavaScript插入插入HTML页面后，可由所有的页面后，可由所有的现代浏览器执行。现代浏览器执行。 JavaScript由布兰登由布兰登艾奇（艾奇（Brendan Eich）发明，于发明，于1995年出现在年出现在Netscape中（该浏览器中（该浏览器已停止更新），并于已停止更新），并于1997年被年被ECMA（欧洲计（欧洲计算机制造协会）采纳，将算机制造协会）采纳，将JavaScript制订为标制订为标准，

8、称为准，称为ECMAScript，ECMA-262是是JavaScript标准的官方名称。标准的官方名称。 JavaScript的基本语法与的基本语法与C语言类似，语言类似，但运行过程中不需要单独编译，而是逐行但运行过程中不需要单独编译，而是逐行解释执行，运行快。解释执行，运行快。 JavaScript具有跨平台性，与操作环具有跨平台性，与操作环境无关，只依赖于浏览器本身，只要浏览境无关，只依赖于浏览器本身，只要浏览器支持器支持JavaScript就能正确执行。就能正确执行。 由于由于JavaScript具有复杂的文档对象模型具有复杂的文档对象模型 （DOM），不同浏览器实现的方式不一样；以）

9、，不同浏览器实现的方式不一样；以及缺乏便捷的开发、调试工具，所以及缺乏便捷的开发、调试工具，所以JavaScript的应用并未真正推广开，正当的应用并未真正推广开，正当JavaScript从开从开发者的视线中渐渐隐去时，一种新型的基于发者的视线中渐渐隐去时，一种新型的基于JavaScript的的Web技术技术AJAX（Asynchronous JavaScript And XML，异步，异步JavaScript和和 XML）诞生了，使互联网中基于诞生了，使互联网中基于JavaScript的应用越来的应用越来越多，从而使越多，从而使JavaScript不再是一种仅仅用于制不再是一种仅仅用于制作作

10、Web页面的脚本语言，页面的脚本语言，JavaScript越来越受到越来越受到重视，互联网正在掀起一场重视，互联网正在掀起一场JavaScript风暴。风暴。 （1）网页中插入脚本程序的方式是使用）网页中插入脚本程序的方式是使用script标记，把脚本标记标记，把脚本标记置于网页置于网页上的上的head部分或部分或body部分，然后在其中加入部分，然后在其中加入脚本程序。脚本程序。 （2）所有的）所有的JavaScript语句都以分号语句都以分号“;”结结束。束。 （3）JavaScript语言对大小写是敏感的。语言对大小写是敏感的。 编写与调试编写与调试JavaScript脚本程序的工具有多

11、脚本程序的工具有多种，目前常用的工具有种，目前常用的工具有Dreamweaver、Firebug、Visual Studio、Aptana、JavaScript Editor等。等。1Dreamweaver2Firebug3Visual Studio4Aptana HTML中的中的JavaScript脚本必须位于脚本必须位于与与标签之间，脚本可被标签之间，脚本可被放置在放置在HTML页面的页面的或或部部分中，或者同时存在于两个部分中。分中，或者同时存在于两个部分中。 通常的做法是把函数放入通常的做法是把函数放入部部分中，或者放在页面底部。分中，或者放在页面底部。 这样就可以把它们安置到同一处位

12、置，这样就可以把它们安置到同一处位置，不会干扰页面的内容。不会干扰页面的内容。 JavaScript代码嵌入代码嵌入HTML文档的形式文档的形式有以下几种。有以下几种。（1）在）在head部分添加部分添加JavaScript脚本。脚本。（2）直接在）直接在body部分添加部分添加JavaScript脚本。脚本。（3）链接）链接JavaScript脚本文件。脚本文件。 外部外部JavaScript文件是最常见的包含文件是最常见的包含JavaScript代码的方式，其主要原因有以代码的方式，其主要原因有以下几种。下几种。 （1）HTML页面中代码越少，搜索引擎就页面中代码越少，搜索引擎就能够以越快

13、的速度来抓取网站并建立索引。能够以越快的速度来抓取网站并建立索引。 （2）保持）保持JavaScript代码和代码和HTML的分离，的分离，这样代码显得更清晰，且最终更易于管理。这样代码显得更清晰，且最终更易于管理。 （3）因为可以在）因为可以在HTML代码中包含多个代码中包含多个JavaScript文件，因此可以把文件，因此可以把JavaScript文件分开放在文件分开放在Web服服务器上不同的文件目录结构中，这类似于图像的务器上不同的文件目录结构中，这类似于图像的存放方式，这是一种更容易管理代码的做法。清存放方式，这是一种更容易管理代码的做法。清晰、有条理的代码始终是让网站管理变容易的关晰

14、、有条理的代码始终是让网站管理变容易的关键。键。 JavaScript的注释用于对的注释用于对JavaScript代码进行解释，以提高程序的可读性。代码进行解释，以提高程序的可读性。 调试调试JavaScript程序时，还可以使用程序时，还可以使用注释阻止代码块的执行。注释阻止代码块的执行。 JavaScript有两种类型的注释。有两种类型的注释。 （1）单行注释以双斜杠开头（）单行注释以双斜杠开头（/）。）。 （2）多行注释以单斜杠和星号开头（）多行注释以单斜杠和星号开头（/*），），以星号和单斜杠结尾（以星号和单斜杠结尾（*/）。）。 JavaScript的基本数据类型主要有字的基本数据类

15、型主要有字符串（符串（String）、数字（）、数字（Number）、布）、布尔（尔（Boolean）、）、Null、Undefined，引用，引用类型主要有数组和对象。类型主要有数组和对象。1字符串字符串 JavaScript的字符串可以是引号中的的字符串可以是引号中的任意文本，可以使用单引号或双引号。任意文本，可以使用单引号或双引号。2数字数字 JavaScript只有一种数字类型，数字只有一种数字类型，数字可以带小数点，也可以不带。可以带小数点，也可以不带。 JavaScript的布尔（逻辑）类型只能的布尔（逻辑）类型只能有两个值：有两个值：true或或false。 布尔类型值常用在条件

16、测试中。布尔类型值常用在条件测试中。4Null 可以通过将变量的值设置为可以通过将变量的值设置为null来清来清空变量。空变量。5Undefined Undefined表示变量不含有值。表示变量不含有值。 JavaScript有有6种基本类型的常量。种基本类型的常量。1. 字符型常量字符型常量 字符型常量是使用单引号（字符型常量是使用单引号（ ）或双）或双引号（引号（）括起来的一个或几个字符。）括起来的一个或几个字符。2. 整型常量整型常量 整型常量是不能改变的数据，可以整型常量是不能改变的数据，可以使用十进制、十六进制、八进制表示其使用十进制、十六进制、八进制表示其值。值。3. 实型常量实型

17、常量 实型常量由整数部分加小数部分表实型常量由整数部分加小数部分表示，可以使用科学或标准方法表示。示，可以使用科学或标准方法表示。 布尔常量只有两种值：布尔常量只有两种值：ture或或flase，主要用来说明或代表一种状态或标志。主要用来说明或代表一种状态或标志。 JavaScript中有一种空值类型中有一种空值类型null，表示什么也没有，可以理解为对象占位表示什么也没有，可以理解为对象占位符。符。 如果试图引用没有定义的变量，则如果试图引用没有定义的变量，则返回一个返回一个null值。值。 JavaScript中包含以反斜杠（中包含以反斜杠（/）开）开头的特殊字符，通常称为控制字符。头的特

18、殊字符，通常称为控制字符。1变量的概念与命名变量的概念与命名2JavaScript变量的声明变量的声明（1）单个变量的声明与赋值。）单个变量的声明与赋值。（2）多个变量的声明与赋值。）多个变量的声明与赋值。（3）声明无值的变量。）声明无值的变量。（4）重复声明）重复声明JavaScript变量。变量。3JavaScript变量类型的声明变量类型的声明4局部局部JavaScript变量变量5全局全局JavaScript变量变量 可以在可以在JavaScript中创建中创建3种形式的种形式的消息框，即警告框、确认框、提示框。消息框，即警告框、确认框、提示框。1. 警告框警告框 警告框是一个带有提示

19、信息和警告框是一个带有提示信息和“确确定定”按钮的对话框，经常用于输出提示按钮的对话框，经常用于输出提示信息，当警告框出现后，用户需要单击信息，当警告框出现后，用户需要单击【确定】按钮才能继续进行操作。【确定】按钮才能继续进行操作。 确认框是一个带有提示信息以及【确定】确认框是一个带有提示信息以及【确定】和【取消】按钮的对话框，用于使用户可以验和【取消】按钮的对话框，用于使用户可以验证或者接受某些信息。证或者接受某些信息。 当确认框出现后，用户只有单击【确定】当确认框出现后，用户只有单击【确定】或者【取消】按钮才能继续进行操作。或者【取消】按钮才能继续进行操作。 提示框是一个提示用户输入的对话

20、框，经提示框是一个提示用户输入的对话框，经常用于提示用户在进入页面前输入某个值。常用于提示用户在进入页面前输入某个值。 当提示框出现后，用户需要输入某个值，当提示框出现后，用户需要输入某个值，然后单击【确认】按钮或【取消】按钮才能继然后单击【确认】按钮或【取消】按钮才能继续操作。续操作。 当当JavaScript引擎执行引擎执行JavaScript代代码时，会发生各种错误。码时，会发生各种错误。 （1）可能是语法错误，通常是程序员造）可能是语法错误，通常是程序员造成的编码错误或错别字。成的编码错误或错别字。 （2）可能是拼写错误或语言中缺少的功）可能是拼写错误或语言中缺少的功能（可能由于浏览器

21、差异）。能（可能由于浏览器差异）。 （3）可能是由于来自服务器或用户的错）可能是由于来自服务器或用户的错误输入而导致的错误。误输入而导致的错误。 （4）也可能是由于许多其他不可预知的）也可能是由于许多其他不可预知的原因。原因。 JavaScript高级程序设计（特别是对浏览高级程序设计（特别是对浏览器差异的复杂处理）通常很困难也很耗时，器差异的复杂处理）通常很困难也很耗时，为了简化为了简化JavaScript的开发，许多的开发，许多JavaScript库应运而生。库应运而生。 这些这些JavaScript库常被称为库常被称为JavaScript框框架。架。 这些库封装了很多预定义的对象和实用这

22、些库封装了很多预定义的对象和实用函数，能帮助使用者轻松建立有高难度交互函数，能帮助使用者轻松建立有高难度交互的富客户端页面，并且兼容各大浏览器。的富客户端页面，并且兼容各大浏览器。1jQuery2Prototype3MooTools jQuery是一个是一个JavaScript函数库，是一个函数库，是一个 “写得更少，但做得更多写得更少，但做得更多”的轻量级的轻量级JavaScript库，库，jQuery极大地简化了极大地简化了JavaScript编程。编程。 如需使用如需使用jQuery，需要先下载，需要先下载jQuery库，库，然后使用然后使用HTML的的标签引用它。标签引用它。 jQue

23、ry库是一个库是一个JavaScript文件，其文件，其中包含了所有的中包含了所有的jQuery函数。函数。 jQuery库包含以下类别的函数。库包含以下类别的函数。 （1）HTML元素选取函数。元素选取函数。 （2）HTML元素操作函数。元素操作函数。 （3）CSS操作函数。操作函数。（4）HTML事件函数。事件函数。（5）JavaScript特效和动画函数。特效和动画函数。（6）HTML DOM遍历和修改函数。遍历和修改函数。（7）AJAX函数。函数。（8）Utilities函数。函数。3jQuery的基础语法的基础语法 通过通过jQuery，可以选取（查询，可以选取（查询，query）H

24、TML元素，并对它们执行元素，并对它们执行“操作操作”（actions）。）。 jQuery语法是为语法是为HTML元素的选取编制的，元素的选取编制的，可以对元素执行某些操作。可以对元素执行某些操作。4文档就绪函数文档就绪函数ready【任务描述】【任务描述】 编写代码实现关闭网页时弹出一个编写代码实现关闭网页时弹出一个对话框的功能，该对话框如图对话框的功能，该对话框如图1-3所示。所示。图图1-3关闭网页时弹出的小窗口关闭网页时弹出的小窗口【任务描述】【任务描述】 网页网页0104.html的底部内容如图的底部内容如图1-4所所示，单击超链接示，单击超链接“应用应用CSS样式样式1”时网时网页引用外部样式文件页引用外部样式文件style1.css，单击超，单击超链接链接“应用应用CSS样式样式2”时网页引用外部时网页引用外部样式文件样式文件style2.css。 编写代码实现此功能。编写代码实现此功能。图图1-4网页网页01