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