作者：陈承欢
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
JavaScript+jQuery网页特效设计任务驱动教程试读：
前言
HTML、CSS、JavaScript三者共同构造出了丰富多彩的网页，它们使网页包含更多活跃的元素和更加精彩的内容。HTML是一种纯文本的、解释执行的标记语言，它定义了网页结构和网页元素，能够实现网页的普通格式要求。CSS实现了网页结构与表现样式完全分离，弥补了HTML对网页格式化功能的不足，对网页布局和网页元素的控制功能更加强大，能够实现网页中特殊格式的要求。JavaScript主要实现实时的、动态的、可交互的功能，对客户操作进行响应，显示各种自定义内容。
在实际工作中，我们需要将JavaScript程序嵌入HTML文档中，与HTML标签相结合，对网页元素进行控制，对用户操作有所响应，从而实现网页动态交互的特殊效果。这种特殊效果通常称为网页特效。网页中添加一些恰当的特效，能使页面具有一定的动态效果，能吸引浏览者的注意，提高页面的观赏性和趣味性。随着网络技术的发展，JavaScript语言越来越受欢迎，在数以百万计的网页中被用于改进设计、验证表单、检测浏览器、创建Cookies等。
jQuery是一个轻量级的库，实现了操作行为（JavaScript代码）和网页内容（HTML代码）的分离，凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发AJAX的操作。jQuery拥有强大的选择器、出色的DOM操作、可靠的事件处理机制、完善的兼容性、独创的链式操作方式等，以其独特而优雅的代码风格改变了JavaScript程序员的设计思路和编程方式，因而受到越来越多人的追捧，吸引了一批批的JavaScript开发者去学习和研究。
同时，技术的更新也推动着高职高专院校课程的改革，目前，越来越多的高职高专院校对网页设计和制作课程进行了细化和优化，开始开设网页特效设计类课程。为了满足课程教学需要，我们编写了本书。
本书具有以下特色和创新点。（1）合理选取和重构教学内容，科学安排教学单元的顺序。本书从网页特效在网页中实际应用的角度来理解JavaScript语言的语法和jQuery库的应用，而不是从JavaScript理论知识本身取舍教学内容。本书遵循学习者的认知规律和技能的形成规律，将网页特效分为基本网页特效、日期时间类网页特效、文字类网页特效、图片类网页特效、表单控件类网页特效、导航菜单类网页特效、选项卡类网页特效、内容展开与折叠类网页特效和页面类网页特效这9类，同时相应地将内容分为9个教学单元，每个教学单元分析和设计一种类型的网页特效，同时将JavaScript和jQuery的相关知识合理地安排到各个教学单元中。（2）以实际网站中常见的真实网页特效为载体组织教学内容，强化操作技能训练，提升学习者的动手能力。我们在课程建设的过程中，分析研究了1000多个不同类型的网页特效，先后经过4次筛选、简化和优化，最终确定了9大类92个源自真实网站的网页特效作为本书的教学案例，学习者在设计网页时可以根据实际需要灵活使用这些网页特效，以实现学以致用。（3）围绕这92个网页特效设计任务，我们采用了“任务驱动、精讲多练、理论实践一体化”的教学方法，全方位促进学习者网页特效分析设计能力的提升，引导学习者在完成各个网页特效设计任务的过程中，逐步理解灵活多变的JavaScript语法知识，循序渐进地学会jQuery库的应用，从而熟练掌握形式多样的网页特效的设计方法。
本书在每个教学单元中巧妙地设置了3条主线：教学过程主线、理论知识主线和操作任务主线，形成了独具特色的复合结构体例，充分考虑教学实施的需求。我们为每个教学单元都设置了完整的教学环节，帮助教师按照“教学导航→特效赏析→知识必备→引导训练→自主训练”5个环节组织教学。每个教学单元相关的理论知识相对独立，以节的方式组织，形成了系统性强、条理性强、循序渐进的理论知识体系。每个教学单元根据学习知识和训练技能的需要合理设置网页特效设计任务，分为“特效赏析—引导训练—自主训练”3个层次，其中引导训练任务按“任务描述—思路探析—特效实现”3个步骤实施，同时根据需要对实现网页特效的代码进行了必要的解释和说明。（4）本书配套教学资源丰富。教学单元设计、教学过程设计、网页特效设计、任务设计、JavaScript和jQuery相关知识的选取与序化、教学案例、电子教案等教学资源一应俱全，力求做到想师生之所想，急师生之所急。教学辅助资源请登录人邮教育社区（www.ryjiaoyu.com）下载使用。
本书适合实施理论实践一体化教学，平均6~8课时为一个教学单元，可以以串行方式（连续安排2~3周）组织教学，也可以以并行方式（每周安排6~8课时，安排8周左右，每周完成一个教学单元）组织教学。
本书由湖南铁道职业技术学院陈承欢教授编著，颜谦和、吴献文、谢树新、颜珍平、侯伟、潘玫玫、郭外萍、裴来芝、谭传武、肖素华、林保康、王欢燕、张丹、王姿、张丽芳等多位老师参与了网页特效的设计、优化以及部分章节的编写、校对和整理工作。
由于编者水平有限，书中难免存在疏漏之处，敬请各位读者批评指正，作者的QQ号码为1574819688，感谢您使用本书，期待本书能成为您的良师益友。编者2018年10月课程设计
1．教学单元设计
2．教学过程设计
3．网页特效设计和任务设计
4．JavaScript和jQuery相关知识的选取与序化单元1 设计基本网页特效
本单元我们主要探讨基本网页特效的设计方法。教学导航
教学目标1 学会设计基本的网页特效2 学会下载和替代jQuery库3 熟悉JavaScript的基本特点和主要的语法规则4 熟悉JavaScript常用的开发工具5 熟悉JavaScript的注释6 熟练使用JavaScript的消息框7 熟悉JavaScript的异常处理8 掌握在HTML文档中嵌入JavaScript代码的方法9 掌握JavaScript的数据类型10 掌握JavaScript的常量与变量11 掌握jQuery的引用方法12 掌握jQuery的基础语法13 掌握文档就绪函数ready的使用方法14 了解JavaScript库15 了解jQuery函数的类别教学方法 任务驱动法、分组讨论法、探究学习法建议课时 8课时特效赏析任务1-1 JavaScript实现动态加载网页内容
网页中常见的底部导航栏与版权信息如图1-1所示。图1-1 网页的底部导航栏与版权信息
图1-1所示的底部导航栏与版权信息可以采用HTML代码实现，代码如表1-1所示。也可以采用JavaScript代码实现，对应的JavaScript代码如表1-2所示。表1-1 实现网页底部导航栏与版权信息的HTML代码
表1-2中的代码解释如下。（1）JavaScript脚本程序必须置于标签中。表1-2 实现网页底部导航栏与版权信息的JavaScript代码（2）04行的符号“”针对不支持脚本的浏览器，从而忽略其间的脚本程序。（3）05~09行共有5条语句，每一条语句都以“；”结束。这些语句都按其出现的先后顺序执行，即程序结构为顺序结构。（4）05行为声明变量语句：声明1个变量，变量名为footerContent。（5）06行为变量赋值语句：将一个字符常量值赋值给变量footerContent，赋值运算符为“=”。（6）07~08行都是赋值语句，使用的是复合赋值运算符“+=”，将两个字符串连接后重新赋值给变量footerContent。（7）09行使用文档对象document的write方法向网页中输出变量的值footerContent，即输入一个字符串，该JavaScript语句会在页面加载时执行。提示 使用document.write()可以直接写入HTML输出流中，但只能在HTML输出中使用document.write。如果在文档加载后使用该方法，则会覆盖整个文档。（8）JavaScript区分字母的大小写。
在同一个程序中使用大写字母和小写字母表示不同的意义，不能随意将大写字母写成小写，也不能随意将小写字母写成大写。例如，05行中声明的变量“footerContent”，该变量名的第7个字母为大写“C”，在程序中使用该变量时该字母必须统一写成大写“C”，而不能写成小写“c”。如果声明变量时，变量名称为“footercontent”形式，全为小写字母，则在程序中使用该变量时，也不能写成大写。也就是说，使用变量时的名称应与声明变量的名称完全一致。注意 JavaScript的文档对象“document”则全部为小写字母，而不能写成“Document”，否则会由于系统不能识别“Document”，而出现错误。任务1-2 jQuery实现网页收藏
网页中包含如下所示的HTML代码。
用IE 11浏览器浏览该网页时，单击网页中的“添加收藏”超链接，会弹出如图1-2所示的【添加收藏】对话框，在该对话框中单击【添加】按钮，则会将对应网页添加到收藏夹。
用非IE浏览器浏览该网页时，单击网页中的“添加收藏”超链接，会弹出如图1-3所示的【添加失败】对话框。图1-2 【添加收藏】对话框图1-3 【添加失败】对话框
这里的“添加收藏”功能采用jQuery方式实现，代码如表1-3所示。表1-3 实现网页收藏功能的JavaScript代码
表1-3中的代码解释如下。（1）01行引用了一个外部的JS文件jquery.js。（2）为了防止文档在完全加载（就绪）之前运行jQuery代码，jQuery函数应位于ready方法中，如下所示。$(document).ready(function(){ //函数代码 }) ; （3）05行表示单击id="favorite"的按钮时，触发该按钮的单击事件，调用一个函数，执行该函数中的程序代码。（4）if…else…语句为选择结构，针对IE浏览器和非IE浏览器执行不同的语句。（5）06行中的表达式“window.ActiveXObject || "ActiveXObject"in window”用于判断当前浏览器的类型为IE浏览器。（6）07行使用window.external.addFavorite方法实现IE浏览器的添加收藏功能。（7）09行的alert()方法用于打开一个信息对话框，该方法是window对象的常用方法之一，可以写作window.alert()。其作用是弹出一个对话框，显示所指定的内容。括号中的字符串参数为对话框将要显示的内容，该对话框只有一个【确定】按钮。知识必备1.1 JavaScript简介
JavaScript是一种基于对象和事件驱动的脚本语言。使用它的目的是与HTML（超文本标记语言）一起实现网页中的动态交互功能。通过嵌入或调用JavaScript代码在标准的HTML中实现其功能。它与HTML标签结合在一起，弥补了HTML的不足，使网页变得更加生动。
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部分，然后在其中加入脚本程序。其一般语法形式如下。
通过标识指明其间是JavaScript脚本源代码。
使用script标记时，一般使用language属性说明使用何种语言，使用type属性标识脚本程序的类型，也可以只使用其中一种，以适应不同的浏览器。如果需要，还可以在language属性中标明JavaScript的版本号，那么，所使用的JavaScript脚本程序就可以应用该版本中的功能和特性，如“language=JavaScript1.2”。
对于老式的浏览器可能会在标签之间的JavaScript脚本程序当作普通的HTML字符显示在浏览器中。针对此类问题，可以将JavaScript脚本程序代码置于HTML注释符之间，这样对于不支持JavaScript的浏览器就不会把代码内容当作文本显示在页面上，而是把它们当作注释，不会做任何操作。“”是HTML注释符的结束标签。对于不支持JavaScript脚本程序的浏览器，标签之间的内容被当作注释内容，对于支持JavaScript程序的浏览器，这对标签将不起任何作用。另外，需要注意的是，HTML注释符的结束标记之前有两个斜杠“//”，这两个斜杠是JavaScript语言中的注释符号，如果没有这两个斜杠，JavaScript解释器试图将HTML注释的结束标记作为JavaScript来解释，从而有可能导致出错。（2）所有的JavaScript语句都以分号“；”结束。（3）JavaScript语言对大小写是敏感的。1.3 JavaScript常用的开发工具
编写与调试JavaScript脚本程序的工具有多种，目前常用的工具有Dreamweaver、Firebug、Visual Studio、Aptana、JavaScript Editor等。
1．Dreamweaver
Dreamweaver是世界顶级软件厂商Adobe推出的一套制作并编辑网站和移动应用程序的专业网页设计软件，其最新推出的版本为Dreamweaver CC。它支持以代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，无须编写任何代码就能快速创建Web页面。
Dreamweaver CC支持jQuery代码自动提示功能，借助jQuery代码提示加入高级交互性功能，jQuery可轻松为网页添加互动内容，借助针对手机的启动模板快速开始设计。
2．Firebug
Firebug是一个用于网站前端开发的工具，它是Firefox浏览器的一个扩展插件，它集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，可以用于调试JavaScript、查看DOM、分析CSS以及AJAX交互等。
3．Visual Studio
Visual Studio是Microsoft公司推出的程序集成开发环境，Visual Studio 2008版本之后就可以使用jQuery智能提示功能了。
4．Aptana
Aptana是一个功能非常强大、开源和专注于JavaScript的AJAX开发，它支持jQuery代码自动提示功能。1.4 在HTML文档中嵌入JavaScript代码的方法
HTML中的JavaScript脚本必须位于标签之间，脚本可被放置在HTML页面的
或部分中，或者同时存在于两个部分中。通常的做法是把函数放入部分中，或者放在页面底部，这样就可以把它们安置到同一处位置，不会干扰页面的内容。JavaScript代码嵌入HTML文档的形式有以下几种。（1）在head部分添加JavaScript脚本。
将JavaScript脚本置于head部分，使之在其余代码之前装载，快速实现其功能，并且容易维护。
有时在head部分定义JavaScript脚本，在body部分调用JavaScript脚本。（2）直接在body部分添加JavaScript脚本。
由于某些脚本程序在网页中特定部分显示其效果，此时脚本代码就会位于body中的特定位置。也可以直接在HTML表单的标签内添加脚本，以响应输入元素的事件。（3）链接JavaScript脚本文件。
引用外部脚本文件，应使用script标签的src属性来指定外部脚本文件的URL。这种方式可以使脚本得到重复利用，从而降低维护的工作量。
外部JavaScript文件是最常见的包含JavaScript代码的方式，其主要原因有以下几点。
①HTML页面中代码越少，搜索引擎就能够以越快的速度来抓取网站并建立索引。
②保持JavaScript代码和HTML的分离，这样代码显得更清晰，且最终更易于管理。
③因为可以在HTML代码中包含多个JavaScript文件，因此可以把JavaScript文件分开放在Web服务器上不同的文件目录结构中，这类似于图像的存放方式，是一种更容易管理代码的做法。清晰、有条理的代码始终是让网站管理变容易的关键。1.5 JavaScript的注释
JavaScript的注释用于对JavaScript代码进行解释，以提高程序的可读性。调试JavaScript程序时，还可以使用注释阻止代码块的执行。
JavaScript有两种类型的注释。（1）单行注释以双斜杠开头（//）。
例如：
//this is a single-line comment（2）多行注释以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）。例如：
/*this is a multi
line comment*/
注释可以单独一行，也可以在行末。1.6 JavaScript的数据类型
JavaScript的基本数据类型主要有字符串（String）、数字（Number）、布尔（Boolean）、Null、Undefined，引用类型主要有数组和对象。
JavaScript拥有动态类型。这意味着相同的变量可用作不同的类型。
例如：var x; // x 为 undefined var x = 26 ; // x 为数字 var x = "Good" ; // x 为字符串
1．字符串
JavaScript的字符串可以是引号中的任意文本，可以使用单引号或双引号。例如：var name="Good"; var name='Good';
2．数字
JavaScript只有一种数字类型，数字可以带小数点，也可以不带。
例如：var x1=34.00 ; //使用小数点来写 var x2=34 ; //不使用小数点来写
较大或较小的数字可以通过科学计数法（指数）来书写。
例如：var y=123e5; // 12 300 000 var z=123e-5; // 0.001 23
JavaScript不是类型语言，与许多其他编程语言不同，JavaScript不定义不同类型的数字，如整数、短整型、长整型、浮点型等。
JavaScript中的所有数字均为64位，都存储为根为10的64位数字（8比特）。
整数（不使用小数点或指数计数法）的精度最多为15位，小数的最大位数是17位，但是浮点运算并不总是百分之百准确。
如果数字的前缀为0，则JavaScript会把数值常量解释为八进制数，如果数字的前缀为0x，则解释为十六进制数。
例如：
var y=0377;
var z=0xFF;说明 绝不要在数字前面写0，除非需要进行八进制转换。
NaN是JavaScript的全局常量，本意表示某个值不是数值，但其本身却又是数值，且不等于其自身，看下面的代码。alert(typeof NaN); //显示为'Number' alert(NaN == NaN); //显示为 false
实际上NaN不等于任何东西。要确认是不是NaN只能使用isNaN，如以下代码。alert(isNaN(NaN)) ; //显示为 true
3．布尔
JavaScript的布尔（逻辑）类型只能有两个值：true或false。布尔类型值常用在条件测试中。
例如：
var x=true;
var y=false;
Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true或者false）。使用关键词new来定义Boolean对象。
下面的代码定义了一个名为myBoolean的逻辑对象。
var myBoolean=new Boolean();注意 如果逻辑对象无初始值或者其值为0、-0、null、""、false、undefined或者NaN，那么对象的值为false。否则，其值为true（即使当自变量为字符串"false"时）。
4．null
可以通过将变量的值设置为null来清空变量。
例如：
book=null;
5．Undefined
Undefined表示变量不含有值。1.7 JavaScript的常量
JavaScript有6种基本类型的常量。
1．字符型常量
字符型常量是使用单引号（''）或双引号（""）括起来的一个或几个字符。
2．整型常量
整型常量是不能改变的数据，可以使用十进制、十六进制、八进制表示其值。
3．实型常量
实型常量由整数部分加小数部分表示，可以使用科学或标准方法表示。
4．布尔值
布尔常量只有两种值：true或false，主要用来说明或代表一种状态或标志。
5．空值
JavaScript中有一种空值类型null，表示什么也没有，可以理解为对象占位符。如果试图引用没有定义的变量，则返回一个null值。说明 null是个对象。JavaScript有一种空值类型，它有一个唯一的值null，即它的字面量，定义为完全没有任何意义的值，其表现得像个对象。
例如：alert(typeof null); //显示为'object'
尽管typeof值显示为"object"，但null并不认为是一个对象实例。要知道，JavaScript中的值都是对象实例，每个数值都是Number对象，每个对象都是Object对象。因为null是没有值的，所以null不是任何东西的实例。
例如：alert(null instanceof Object); //显示为 false
6．特殊字符
JavaScript中包含以反斜杠（/）开头的特殊字符，通常称为控制字符。1.8 JavaScript的变量
1．变量的概念与命名
变量是内存中存取数据的容器。
例如：var x=2; var y=3; var z=x+y;
在JavaScript中，这些字母被称为变量。
JavaScript变量可用于存放常量数值（如x=2）和表达式的值（如z=x+y）。
变量可以使用短名称（如x和y），也可以使用描述性更好的名称（如name、age、sum、total、volume）。
变量名必须以字母开头，中间可以出现字母、数字、下划线（_），变量名不能有空格、+、-等字符，JavaScript的关键字不能作变量名。JavaScript变量的名称也允许以$和_符号开头，不过不推荐这么做。
变量名称对大小写敏感（如y和Y是不同的变量），JavaScript语句和JavaScript变量都对大小写敏感。
变量的基本类型有4种：字符串变量、整型变量、实型变量和布尔型变量。
2．JavaScript变量的声明（1）单个变量的声明与赋值。
在JavaScript中创建变量通常称为“声明”变量。
使用var关键词来声明变量。
例如：
var name;
变量声明之后，该变量是空的（它没有值）。使用赋值号（=）向变量赋值。
例如：
name="李明";
也可以在声明变量时对其赋值。例如：
var name="李明";提示 一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。（2）多个变量的声明与赋值。
可以在一条语句中声明多个变量。该语句以var开头，并使用逗号分隔变量即可。例如：
var name="李明",age=26,job="程序员";
多个变量的声明也可横跨多行。
例如：var name="李明", age=26, job="程序员" ; （3）声明无值的变量。
声明变量时可以只用var标识符声明无值的变量。未赋值的变量，其值实际上是undefined。在执行过以下语句后，变量name的值将是undefined。
例如：
var name；（4）重复声明JavaScript变量。
如果重复声明JavaScript变量，该变量的值不会丢失。在以下两条语句执行后，变量name的值依然是"李明"。
例如：
var name="李明";
var name;
由于JavaScript的变量是弱类型的，可以将变量初始化为任意值。因此，可以随时改变变量所存数据的类型，但尽量避免这样做。
3．JavaScript变量类型的声明
声明新变量时，可以使用关键词“new”来声明其类型。
例如：
var name=new String;
var x=new Number;
var y=new Boolean;
var color=new Array;
var book=new Object;
JavaScript变量均为对象，当声明一个变量时，就创建了一个新的对象。
4．局部JavaScript变量
在JavaScript函数内部使用var声明的变量是局部变量，该变量的作用域是局部的，即只能在函数内部访问它。
可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。该函数运行完毕，局部变量就会被删除。
5．全局JavaScript变量
在函数外声明的变量是全局变量，网页中的所有脚本和函数都能访问它。JavaScript变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除，而全局变量会在页面关闭后被删除。
如果直接将值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
例如：
name="李明";
将声明一个全局变量name，即使它在函数内执行。注意 局部变量使用var这一关键字来声明，声明全局变量则不需要使用var关键字。
使用了var关键字的变量被看成是局部的，因为只能在声明它的地方所处的范围内访问，不能在其他任何地方访问。
例如，如果在一个函数内部声明了一个局部变量的话，该变量就不能在该函数之外访问，这就使得它是这一函数局部的。如果没有使用var关键字声明同一变量的话，它在整个脚本中就都是可被访问到的，而不仅限定于只能在那个函数中被访问。1.9 JavaScript的消息框
可以在JavaScript中创建3种形式的消息框，即警告框、确认框、提示框。
1．警告框
警告框是一个带有提示信息和“确定”按钮的对话框，经常用于输出提示信息，当警告框出现后，用户需要单击【确定】按钮才能继续进行操作。
语法格式：alert("文本")
例如：
alert("感谢你光临本网站");
如果警告框中输出的提示信息要分为多行，则使用“\n”分行。
2．确认框
确认框是一个带有提示信息以及【确定】和【取消】按钮的对话框，用于使用户可以验证或者接受某些信息。当确认框出现后，用户只有单击【确定】或者【取消】按钮才能继续进行操作。
语法格式：confirm("文本")
例如：
var r=confirm("Press a button!");
当弹出确认框后，如果用户单击【确认】按钮，那么其返回值为true，即r的值为true。如果用户单击【取消】按钮，那么其返回值为false，即r的值为false。
3．提示框
提示框是一个提示用户输入的对话框，经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后单击【确认】按钮或【取消】按钮才能继续操作。
语法格式：prompt("文本","默认值")
例如：
var name=prompt("请输入您的姓名","李明");
如果用户单击【确认】按钮，那么返回值为输入的值；如果用户单击【取消】按钮，那么返回值为null。1.10 JavaScript的异常处理
当JavaScript引擎执行JavaScript代码时，会发生各种错误，如下所列。（1）可能是语法错误，通常是程序员造成的编码错误或错别字。（2）可能是拼写错误或语言中缺少的功能（可能由于浏览器差异导致）。（3）可能是由于来自服务器或用户的错误输入而导致的错误。（4）也可能是由于许多其他不可预知的原因导致。
当错误发生或当事件出现问题时，JavaScript将抛出一个错误。JavaScript使用try…catch…语句处理这些异常，try语句和catch语句总是成对出现的。
语法格式：try { //在这里运行代码 } catch(err) { //在这里处理错误 }
try语句用于测试代码块的错误，允许用户定义在执行时进行错误测试的代码块。
catch语句用于处理错误，允许定义当try代码块发生错误时所执行的代码块。
在下面的示例代码中，我们故意在try块的代码中将“alert”写成了“Alert”，即首字母写成大写“A”。catch块会捕捉到try块中的错误，并执行代码来处理它。
例如：var txt=""; try { Alert("欢迎您!"); } catch(err) { txt="本页有一个错误。\n"; txt+="错误描述：" + err.message ; alert(txt); }
throw语句允许用户自行定义错误或抛出异常（exception）。
如果把throw与try和catch一起使用，就能够控制程序流，并生成自定义的错误消息。语法格式：throw exception
异常可以是JavaScript字符串、数字、逻辑值或对象。
例如：
以上实例代码用于检测输入的值。如果值是错误的，会抛出一个异常（错误）。catch会捕捉到这个错误，并显示一段自定义的错误消息。
以上实例代码中如果getElementById函数出错，也会抛出一个错误。1.11 JavaScript库
JavaScript高级程序设计（特别是对浏览器差异的复杂处理）通常很困难也很耗时，为了简化JavaScript的开发，许多JavaScript库应运而生。这些JavaScript库常被称为JavaScript框架。这些库封装了很多预定义的对象和实用函数，能帮助使用者轻松建立有高难度交互的富客户端页面，并且兼容各大浏览器。jQuery是继Prototype之后又一个优秀的JavaScript库，是一个由约翰·瑞齐格（John Resig）创建于2006年1月的开源项目。
广受欢迎的JavaScript框架有jQuery、Prototype、MooTools，所有这些框架都提供针对常见JavaScript任务的函数，包括动画、DOM操作以及AJAX处理。
1．jQuery
jQuery是目前最受欢迎的JavaScript库，它使用CSS选择器来访问和操作网页上的HTML元素（DOM对象），jQuery同时提供companion UI（用户界面）和插件。目前Google、Microsoft、IBM、Netflix等许多大公司在网站上都使用了jQuery。
2．Prototype
Prototype是一种JavaScript库，提供用于执行常见Web任务的简单API。API是应用程序编程接口（Application Programming Interface）的缩写，它是包含属性和方法的库，用于操作HTML DOM。Prototype通过提供类和继承实现对JavaScript的增强。
3．MooTools
MooTools也是一个JavaScript库，提供了可使常见的JavaScript编程更为简单的API，也包含一些轻量级的效果和动画函数。1.12 下载和替代jQuery库
进入jQuery的官方网站可以下载各个版本的jQuery库文件。jQuery不需要安装，把下载的JS文件存入网站上的一个公共位置，想要在某个页面中使用jQuery时，只需要在相关的HTML文档中引入该库文件即可。
有以下两个版本的jQuery库可供下载：一个版本用于实际的网站中，是已被精简和压缩的；另一个版本用于测试和开发，是未压缩的（是可读的代码，供调试或阅读）。
这两个版本都可以从jQuery官方网站上下载。可以把下载文件放到与页面相同的文件夹中，这样更方便使用。
如果许多不同的网站使用相同的JavaScript库，那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。CDN（Content Delivery Network）解决了这个问题。CDN是包含可分享代码库的网络服务器。
Google和Microsoft公司的网站对jQuery的支持都很好。如果不希望下载并存放jQuery库，那么也可以通过Google或Microsoft的CDN（内容分发网络）引用它，Google和Microsoft的服务器都存有jQuery库。
如需从Google或Microsoft引用jQuery，使用以下代码之一。（1）使用Google的CDN。
（2）使用Microsoft的CDN。
提示 使用Google或Microsoft的jQuery有一个很大的优势：许多用户在访问其他站点时，已经从Google或Microsoft加载过jQuery。所以当用户访问使用jQuery的站点时，会从缓存中加载jQuery，这样可以减少加载时间。同时，大多数CDN都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。1.13 jQuery简介
jQuery是一个JavaScript函数库，是一个“写得更少，但做得更多”的轻量级JavaScript库，jQuery极大地简化了JavaScript编程。
1．jQuery的引用方法
如需使用jQuery，需要先下载jQuery库，然后使用HTML的
在HTML 5中，
调用自定义函数swf()的代码如下所示。
由于目前使用的显示器有多种不同的规格尺寸，因此我们在设计网页时需要根据屏幕的尺寸合理设置网页的尺寸与背景。试编写代码，在网页0106.html中实现动态设置页面宽度和高度的功能。【思路探析】（1）根据常见的屏幕尺寸定义多种不同的样式。（2）使用screen.width属性获取屏幕宽度数据。（3）使用jQuery的$符号选取HTML元素，使用jQuery的addClass()方法向被选元素添加一个类，使用jQuery的removeClass方法从被选元素中删除一个类，使用jQuery的text()方法设置所选元素的文本内容。【特效实现】
根据常见的屏幕尺寸定义的样式如表1-11所示。表1-11 根据常见的屏幕尺寸定义的样式
引用外部JS文件的代码如下所示。
自定义函数windowMedia()，其代码如表1-12所示。表1-12 自定义函数windowMedia()的代码
调用自定义函数的代码如下所示。$(document).ready(function(){ windowMedia(); });
网页0106.html对应的HTML代码如下所示。
自主训练任务1-7 利用外部JS文件动态输出网页内容可以将JavaScript脚本保存到外部文件中，外部文件通常包含被多个网页使用的代码。外部JavaScript文件的文件扩展名是.js。如果需使用外部文件，则应在图1-7 网页底部导航栏的浏览外观效果任务1-8 巧用CSS实现下拉菜单【任务描述】
创建网页0108.html，浏览该网页时会出现如图1-8所示的导航栏，鼠标指针指向该超链接时，自动弹出如图1-9所示的下拉菜单，编写程序使用CSS实现此下拉菜单。图1-8 网页0108.html的导航栏图1-9 网页0108.html中的下拉菜单【操作提示】
网页0108.html对应的HTML代码如表1-13所示。表1-13 网页0108.html对应的HTML代码
网页0108.html主要应用的CSS代码如表1-14所示。表1-14 网页0108.html的关键CSS代码
试读结束[说明：试读内容隐藏了图片]