作者:龙马工作室编著
出版社:人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
精通JavaScript+jQuery——100%动态网页设计密码试读:
前言
随着社会信息化的发展,与网站开发相关的各项技术越来越受到广大IT从业人员的重视,与此相关的各类学习资料也层出不穷。然而,现有的学习资料在注重知识全面性、系统性的同时,却经常忽视了内容的实用性,导致很多读者在学习完基础知识后,不能马上适应实际的开发工作。为了让广大读者能够真正掌握相关知识,具备解决实际问题的能力,我们总结了多位相关行业从业者和计算机教育专家的经验,精心编制了这套“精通100%”丛书。
丛书内容
本套丛书涵盖读者在网站开发过程中可能涉及的各个领域,在介绍基础知识的同时,还兼顾了实际应用的需要。本套丛书主要包括以下品种。
JavaScript+jQuery的最佳学习途径
本书全面研究总结了多位计算机教育专家的实际教学经验,精心设计学习、实践结构,将读者的学习过程分为四个阶段,读者既可以根据章节安排,按部就班地完成学习,也可以直接进入所需部分,结合问题,参考提高。
本书特色
▶ 内容讲解,系统全面
本书对知识点进行精心安排,既确保内容的系统性,又兼顾技术的实用性。无论读者是否接触过JavaScript和jQuery,都能从本书中找到合适的起点。
▶ 项目案例,专业实用
本书针对学习的不同阶段选择案例。在系统学习阶段,侧重对知识点的讲解,以便读者快速掌握;而在实战阶段,则面向实际,直接对热门网站进行剖析,帮助读者了解知识的实际应用方法。
▶ 应用指导,细致入微
除了知识点外,本书非常重视实际应用,对关键点都进行了细致的讲解。此外,在正文中还穿插了“注意”、“说明”、“技巧”等小栏目,帮助读者在学习过程中更深入地了解所学知识,掌握相关技巧。
▶ 书盘结合,迅速提高
本书配套的多媒体教学光盘中的内容与书中的知识点紧密结合并相互补充。教学录像可以加深读者对知识的理解程度,并系统掌握实际应用方法,达到学以致用的目的。
超值光盘
▶ 11小时全程同步教学录像
录像涵盖本书所有知识点,详细讲解每个案例的开发过程及关键点,帮助读者轻松掌握实用技能。
▶ 王牌资源大放送
除教学录像外,光盘中还赠送了大量超值资源,包括本书所有案例的源代码、CSS属性速查表、Dreamweaver案例电子书、Dreamweaver常用快捷键速查表、HTML标签速查表、JavaScript对象参考手册、JavaScript实用案例集锦、JavaScript语法速查表、jQuery速查表、Photoshop案例电子书、精彩网站配色方案赏析电子书、精选JavaScript实例、8小时Photoshop教学录像以及22小时Dreamweaver教学录像等。
光盘使用说明
▶ Windows XP操作系统
01 将光盘印有文字的一面朝上放入光驱中 , 几秒钟后光盘会自动运行。
02 若光盘没有自动运行,可以双击桌面上的【我的电脑】图标,打开【我的电脑】窗口,然后双击【光盘】图标,或者在【光盘】图标上单击鼠标右键,在弹出的快捷菜单中选择【自动播放】选项,光盘就会运行。
▶ Windows 7、Windows 8操作系统
01 将光盘印有文字的一面朝上放入 DVD 光驱中 , 几秒钟后光盘会自动运行。
02 在 Windows 7 操作系统中 , 系统会弹出【自动播放】对话框,单击【运行 MyBook.exe】选项即可运行光盘系统。或者单击【打开文件夹以查看文件】选项打开光盘文件夹,双击光盘文件夹中的MyBook.exe文件,也可以运行光盘系统。
在Windows 8操作系统中,桌面右上角会显示快捷操作界面,单击该界面后,在其列表中选择【运行MyBook.exe】选项即可运行光盘系统。或者单击【打开文件夹以查看文件】选项打开光盘文件夹,双击光盘文件夹中的MyBook.exe文件,也可以运行光盘系统。
03 光盘运行后,经过片头动画后便可进入光盘的主界面。
04 教学录像按照章节排列在各自的篇中,在顶部的菜单中依次选择相应的篇、章、节名称,即可播放本节录像。
05 单击菜单栏中的【赠送资源】,在弹出的菜单中选择赠送资源的名称,即可打开相应的文件夹。
06 详细的光盘使用说明请参阅“其他内容”文件夹下的“光盘使用说明.pdf”文档。
创作团队
本书由龙马工作室策划,张闻强任主编,刘刚、许伟涛任副主编,其中第1章和第2章由郑州威科姆科技股份有限公司钱展编著,第3章和第4章由河南工业大学王云侠老师编著,第5章和第6章由河南工业大学史卫亚老师编著,第7章~第10章和第18章由河南工业大学张闻强老师编著,第11章~第13章由河南工业大学刘刚老师编著,第14章和第17章由河南工业大学魏蔚老师编著,第15章、第16章由河南工业大学许伟涛老师编著。参与本书编写、资料整理、多媒体开发及程序调试的人员还有张瑾瑾、杨琳、董飞飞、孔万里、李震、赵源源、乔娜、周奎奎、祖兵新、董晶晶、王果、陈小杰、左琨、邓艳丽、崔姝怡、侯蕾、左花苹、刘锦源、普宁、王常吉、师鸣若、钟宏伟、陈川、刘子威、徐永俊、朱涛、张允等。
在编写过程中,我们竭尽所能地将最好的讲解呈现给读者,但也难免有疏漏和不妥之处,敬请广大读者不吝指正。若读者在学习中遇到困难或疑问,或有任何建议,可发送邮件至zhangyi@ptpress.com.cn。编者第1篇|chapter1JavaScript基础篇
本篇介绍了JavaScript的相关内容,包括JavaScript概述、JavaScript基础、JavaScript开发基础、CSS基础、CSS进阶及DOM模型等相关知识,结合大量的实例讲解,可以使读者快速熟悉JavaScript的基础知识,为后面深入学习奠定坚实的基础。
▶ 第1章 JavaScript 概述
▶ 第2章 JavaScript 基础
▶ 第3章 JavaScript 开发
▶ 第4章 CSS 基础
▶ 第5章 CSS 进阶
▶ 第6章 DOM 模型第1章JavaScript概述
本章教学录像:22分钟
互联网技术的发展是让人很兴奋的事情,对开发者来说它始终充满着强大的吸引力和巨大的创新力。笔者也同无数网页设计人员们一样经历了从静态网页开发到交互式网页开发的过程,在这其中产生的若干开发语言和设计标准中,不得不提的就是使网页具备可交互性的程序设计语言——JavaScript。
本章要点(已掌握的在方框中打勾)
□ JavaScript 的起源
□ 浏览器之争
□ JavaScript 的实现
□ JavaScript 小体验1.1 JavaScript的起源
本节视频教学录像:6分钟
1992年前后,一家名为Nombas的公司(后来被Openwave收购)开发了一种嵌入式脚本语言,并将其命名为C-minus-minus(简称Cmm)。Cmm背后的设计思想很简单:要足够强大,可以取代宏;同时还要与C(以及C++)非常相似,以便开发人员能够迅速掌握。这个脚本语言被打包到共享软件CEnvi中,许多开发人员就是通过该软件首次体验到了它的强大功能。最终,Nombas公司把Cmm改名为ScriptEase。而ScriptEase则成为了这家公司产品开发的主要驱动力。在Netscape Navigator受到人们狂热追捧之际,Nombas公司开发了能够嵌入到网页中的CEnvi版本。而这种嵌入CEnvi的早期试验性网页被叫做Espresso Pages(浓咖啡版网页),它们是在万维网上首次使用脚本语言的标志。相信当初的Nombas公司不太可能意识到,他们这种在网页中嵌入脚本的想法会在很大程度上左右未来因特网的发展。1.1.1 新鲜的玩意儿
首先需要强调一下,虽然JavaScript是Netscape公司与Sun公司合作开发的,但是它与Sun公司开发的Java程序语言却没有任何联系。JavaScript的前身是Netscape公司开发的LiveScript,1995年11月Netscape公司和Sun公司联合把其改名为JavaScript,至于为什么要叫JavaScript,大概是因为当时Java的发展势头强劲,如日中天,为了让它也沾上Java的光。这个命名使得在此后不得不向每位初学者一再澄清,JavaScript和Java毫无关系。
好了,言归正传,用笔者个人的亲身经历来说一下JavaScript。1997年,笔者还在大学时,当时流行做个人网站,于是笔者也开始做了一个网站。最初,网页只是用HTML做的一个个纯静态的页面链接起来的,来展示静态的信息。后来,笔者发现别的网站有能从左到右滚动的文字,笔者就开始找资料看如何实现,这时第一次了解到了一个新鲜的技术:JavaScript,笔者的网站上也有了第一个JavaScript特效:“跑马灯”。。后来笔者又用JavaScript在笔者的主页上做出了时钟、图片切换、背景音乐等效果,这些新鲜玩意儿的应用使笔者的主页当时在同学中格外出众。1.1.2 不仅仅是网页中的代码
在网页中添加JavaScript代码,与在网页中添加其他任何HTML内容一样,也使用标记来标识脚本代码的开始和结束。该标记就是结束标记之间的文本块并不是要显示的HTML,而是需要处理的脚本代码。由标记包围的代码块称为脚本块。JavaScript不仅仅是网页中的代码,而是需要浏览器解释执行,并且可以和HTML元素及浏览器某些元素交互,从而实现特定功能的代码。JavaScript使得网页的交互性更强,更加生动灵活。用户在浏览网页时做一种操作就产生一个事件,JavaScript所编写的程序可对相应的事件做出反应。1.1.3 典型的 JavaScript 脚本
下面通过一个简单的例子来认识一下典型的JavaScript脚本结构。【范例1.1】 JavaScript脚本程序语言(范例文件:ch01\1-1.html)
01
02
03
04
05 //与
09
10
11
12
13
14
15
16
17
18
19
20
21
22
24
25
相关的示例请参考ch01\1-3.html文件。在IE浏览器里面运行的结果如图所示。高手私房菜技巧:在HTML中嵌入JavaScript的方法
⑴ 直接将 JavaScript 代码放在标记对 之间;由 标记的 src属性制定外部的JS文件放在事件处理程序中。
⑵ 作为URL的主体,这个URL使用特殊的“JavaScript:协议”。
⑶ 利用JavaScript本身的document.write()方法写入新的JavaScript代码;
⑷ 利用Ajax异步获取JavaScript代码,然后执行第3种和第4种方法写入的JavaScript,需要触发才能执行,所以除非特别设置,否则页面加载时不会执行。第2章JavaScript基础
本章教学录像:45 分钟
第1章对JavaScript进行了概述性的介绍,从本章开始对JavaScript进行进一步的讨论。本章将分析JavaScript的核心ECMAScript,让读者从底层了解JavaScript的编写,包括JavaScript的基本语法、变量、关键字、保留字、语句、函数和BOM等。
本章要点(已掌握的在方框中打勾)
□ JavaScript 的语法、变量
□ 数据类型、关键字、保留字
□ 条件语句、循环语句
□ 函数
□ 对象
□ BOM 基础2.1 JavaScript的语法
本节视频教学录像:4分钟
正如C、Java及其他编程语言一样,JavaScript也有自己的语法,但只要熟悉其他语言就会发现,JavaScript的语法是非常简单的。
JavaScript脚本代码出现的位置有3处。
⑴ 放置在标签对之间;
⑵ 放置在一个单独的文件(.js中再用 ;
⑶ 将脚本代码作为属性值,如 。
JavaScript的语法基本要素可概括为以下5项。
⑴ 区分大小写。
JavaScript中的标识符由大小写字母、数字、下划线(_)、美元符号($)组成,不能以数字开头,不能是保留字和关键字,标识符区分大小写,如computer与Computer是两个不同的标识符。
⑵ 变量不区分类型。
定义一个变量,系统就会为之分配一块内存,程序可以用变量来表示这块内存中的数据。
声明变量要使用var关键字,例如
var name;
声明变量的同时为其赋值,例如
var name = “zhongguo”;
⑶ 每条功能语句必须以分号结尾。和C语言、Java语言一样,凡是功能语句必须以“;”结束,而作为属性值的JavaScript脚本最后一条语句结尾处的分号(;)可以省略,如下面两行代码都是正确的。
01 var name = “张三”;
02 var name = “张三”
⑷ 注释与C、C++、Java、PHP相同。注释分为两种,分别是单行注释和多行注释,例如
01 //单行注释 注释内容
02 /*多行注释
03 注释内容
04 */
⑸ 代码段要封闭。代码段是一系列的顺序执行的代码,这些代码要被封装在{ }中。2.2 变量
本节视频教学录像:3分钟
变量是用来临时存储数值的容器。在程序中,变量存储的数值是可以变化的。变量占据一段内存,通过变量的名字可以调用内存中的信息。
⑴ 变量的声明。
在使用一个变量之前,首先要声明这个变量。在JavaScript里,使用var来声明变量,与第一节的用法相同。
⑵ 变量的命名规则。
① 变量名可以是任意长度。
② 变量名的第一个字符必须是英文字母或者下划线符号_;
③ 变量名的第一个字母不能是数字。其后的字符,可以是英文字母、数字和下划线符号;
④ 变量名不能是JavaScript的保留字,如Infinity、NaN、Undefined (参见JavaScript保留字)。
⑤ 虽然JavaScript变量表面上没有类型,但是JavaScript内部还是会为变量赋予相应的类型。匈牙利命名法是一位微软程序员发明的,多数的C、C++程序员都使用此命名法。
说明
正如先前我们所提到的 JavaScript 标识符是区分大小写的。变量 myname 和MyName表示的是两个不同的变量。写错变量的大小写是初学者最常见的错误之一。
变量使用举例如范例2.1所示。【范例2.1】 变量定义示例(范例文件:ch02\2-1.html)
01
02 var myName = "zhangsan";
03 alert(myName);
04 myName = "lisi";
05 alert(myName);
06
相关的示例请参考ch02\2-1.html文件。在IE浏览器里面运行的结果如图所示。2.3 数据类型
本节视频教学录像:2分钟
JavaScript中共有9种数据类型,分别是未定义(Undefined)、空(Null)、布尔型(Boolean)、字符串(String)、数值(Number)、对象(Object)、引用(Reference)、列表(List)和完成(Completion)。其中后3种类型仅仅作为JavaScript运行时中间结果的数据类型,因此不能在代码中使用。本节主要讲解一些常用的数据类型。2.3.1 字符串
字符串由0个或者多个字符构成。字符包括字母、数字、标点符号和空格,字符串必须放在单引号或者双引号里。
⑴ JavaScript字符串定义方法。
① 方法一:
var str = “字符串”;
② 方法二:
var str = new String(“字符串”);
⑵JavaScript字符串使用注意事项。
① 字符串类型可以表示一串字符,比如"www.haut.edu.cn"、'中国'。
② 字符串类型应使用双引号(")或单引号(')括起来。
⑶ 字符串的使用。
JavaScript的内部特性之一就是能够连接字符串。如果将加号(+)运算符用于数字,那就是把两个数字相加。但是,如果将它作用于字符串,它就会把这两个字符串连接起来,将第二个字符串拼接在第一个字符串之后。【范例2.2】 连接字符串示例(范例文件:ch02\2-2.html)
01
02 var msg = "hello";
03 msg = msg+ " world";
04 alert(msg);
05
相关的示例请参考ch02\2-2.html文件。在IE浏览器里面运行的结果如图所示。
如果想要确定一个字符串的长度(它包含字符的个数),可以使用字符串的length属性。如果变量s包含一个字符串,可以使用如下方法访问它的长度:s.length。【范例2.3】 获取字符串长度示例(范例文件:ch02\2-3.html)
01
02 var str = "every dog has his day! ";
03 alert("every dog has his day!中的字符个数:"+str.length);
04
相关的示例请参考ch02\2-3.html文件。在IE浏览器里面运行的结果如图所示。
⑷ 字符串的大小写转换。
在某些情况下,我们要考虑对字符串进行大小写转换,此时需要使用toLowerCase()和toUpperCase()方法。【范例2.4】 字符串字母大小写转换(范例文件:ch02\2-4.html)
01
02 var city = "ShanGHai";
03 city = city.toLowerCase();
04 alert(city); // city is "shanghai" now.
05 city = city.toUpperCase();
06 alert(city); // city is "SHANGHAI" now.
07
相关的示例请参考ch02\2-4.html文件。在IE浏览器里面运行的结果如图所示。
⑸ 在Unicode值和字符串中的字符间转换。
要获得字符的Unicode编码,可以使用string.charCodeAt(index)方法,其定义为
strObj.charCodeAt(index)
index为指定字符在strObj对象中的位置(基于0的索引),返回值为0到65535之间的16位整数。例如【范例2.5】 获得字符的Unicode编码(范例文件:ch02\2-5.html)
01 var strObj = "ABCDEFG";
02 var code = strObj.charCodeAt(2); // Unicode value of character 'C' is 67
相关的示例请参考ch02\2-5.html文件。在IE浏览器里面运行的结果如图所示。
如果index指定的索引处没有字符,则返回值为NaN。
要将Unicode编码转换为一个字符,使用String.fromCharCode()方法,注意它是String对象的一个“静态方法”,也就是说在使用前不需要创建字符串实例。
String.fromCharCode(c1, c2,...)
它接收0个或多个整数,返回一个字符串,该字符串包含了各参数指定的字符,例如【范例2.6】 获得 Unicode 编码所对应的字符串(范例文件:ch02\2-6.html)
01 var str = String.fromCharCode(72, 101, 108, 108, 111);
02 // str == "Hello"
相关的示例请参考ch02\2-6.html文件。在IE浏览器里面运行的结果如图所示。2.3.2 数值
JavaScript数值类型表示一个数,如5、12、-5、2e5。
在JavaScript中,数值类型有正数、负数、指数类型等,与其他语言基本相同。
2e3为指数表示法,等价于 2×10×10×10。【范例2.7】 数值运行示例(范例文件:ch02\2-7.html)
01 var iA=5;
02 var iB=2e3
相关的示例请参考ch02\2-7.html文件。在IE浏览器里面运行的结果如图所示。
注意
JavaScript 中只有一种数值类型,而且内部使用的是 64 位浮点型,等同于 C# 或Java中的double。2.3.3 布尔型
数值数据类型和字符串数据类型可能的值都无穷多。但布尔型(Boolean )只有两个值,这两个合法的值分别由直接量true和false表示。一个布尔值代表的是一个“真值”,它说明了某个事物是真还是假。
布尔值通常是在JavaScript程序中比较所得的结果。
Boolean 类型的 toString() 方法只是输出“true”或“false”,结果由变量的值决定。【范例2.8】 布尔类型转换字符串(范例文件:ch02\2-8.html)
01 var bFound = false;
02 alert(bFound.toString()); // 输出 "false"
相关的示例请参考ch02\2-8.html文件。在IE浏览器里面运行的结果如图所示。2.3.4 类型转换
1.转换成字符串
ECMAScript 的 Boolean 值、数值和字符串都有 toString() 方法,可以把它们的值转换成字符串。
Boolean 类型的 toString() 方法只是输出“true”或“false”,结果由变量的值决定。
Number 类型的 toString() 方法比较特殊,它有两种模式,即默认模式和基模式。采用默认模式,toString() 方法只是用相应的字符串输出数字值(无论是整数、浮点数还是科学计数法),如下所示。
01 var iNum1 = 10;
02 var iNum2 = 10.0;
03 alert(iNum1.toString()); //输出 "10"
04 alert(iNum2.toString()); //输出 "10"
在默认模式中,无论最初采用什么表示法声明数字,Number 类型的 toString() 方法返回的都是数字的十进制表示。因此,以八进制或十六进制字面量形式声明的数字输出的都是十进制形式的。
采用 Number 类型的 toString() 方法的基模式可以用不同的基输出数字,例如二进制的基是 2,八进制的基是 8,十六进制的基是 16。
基只是要转换成的基数的另一种格式而已,它是 toString() 方法的参数。
01 var iNum = 10;
02 alert(iNum1.toString(2)); // 输出 "1010"
03 alert(iNum1.toString(8)); // 输出 "12"
04 alert(iNum1.toString(16)); // 输出 "A"
在前面的示例中,以 3 种不同的形式输出了数字 10,即二进制形式、八进制形式和十六进制形式。HTML 采用十六进制表示每种颜色,在 HTML 中处理数字时这种功能非常有用。
对数字调用 toString(10) 与调用 toString() 相同,它们返回的都是该数字的十进制形式。
2.转换成数字
有两种把非数字的原始值转换成数字的方法,即 parseInt() 和 parseFloat()。前者把值转换成整数,后者把值转换成浮点数。只有对 String 类型调用这些方法,它们才能正确运行;对其他类型返回的都是NaN。
⑴ parseInt()。parseInt() 方法的作用为将非数字转换成数字。首先查看位置 0 处的字符,判断它是否是个有效数字;如果不是,该方法将返回 NaN,不再继续执行其他操作。但如果该字符是有效数字,该方法将查看位置 1 处的字符,进行同样的测试。这一过程将持续到发现非有效数字的字符为止,此时 parseInt() 将把该字符之前的字符串转换成数字。
⑵ parseFloat()。parseFloat() 方法与 parseInt() 方法的处理方式相似,从位置 0 开始查看每个字符,直到找到第一个非有效的字符为止,然后把该字符之前的字符串转换成浮点数。2.3.5 数组
数组就是某类数据的集合,数据的类型可以是整型、字符串,甚至是对象。JavaScript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数组的功能。
1.数组的定义
数组有4种定义方式。
使用构造函数。
01 var a = new Array();
02 var b = new Array(8);
03 var c = new Array("first", "second", "third");
或者数组直接赋值。
var d = ["first", "second", "third"];;
在无法提前预知某个数组最终的元素个数时,声明数组时可以不指定具体个数,例如
01 var mycars=new Array();
02 mycars[0]="Saab";
03 mycars[1]="Volvo";
04 mycars[2]="BMW";;
定义和初始化一起给出。
var mycars=new Array("Saab","Volvo","BMW");
JavaScript用一维数组来模拟二维数组。
2.数组长度
JavaScript的数组不需要设定长度,会自己进行扩展,“数组名.length”会返回元素个数。
3.常用函数
⑴ toString():把数组转换成一个字符串。例如【范例2.9】 数组toString方法(范例文件:ch02\2-9.html)
01 var arr = new Array(3);
02 arr[0] = "George";
03 arr[1] = "John";
04 arr[2] = "Thomas";
05 alert(arr.toString());
相关的示例请参考ch02\2-9.html文件。在IE浏览器里面运行的结果如图所示。
⑵shift():用于把数组的第一个元素从数组中删除,并返回第一个元素的值。
arrayObject.shift();
如果数组是空的,那么 shift() 方法将不进行任何操作,返回 Undefined 值。请注意,该方法不创建新数组,而是直接修改原有的 arrayObject,并且该方法会改变数组的长度。范例如下所示。【范例2.10】 数组的shift方法(范例文件:ch02\2-10.html)
01 var arr = new Array(3);
02 arr[0] = "George";
03 arr[1] = "John";
04 arr[2] = "Thomas";
05 alert(arr+"\n"+arr.shift()+"\n"+arr);
相关的示例请参考ch02\2-10.html文件。在IE浏览器里面运行的结果如图所示。
⑶ unshift():可向数组的开头添加一个或更多元素,并返回新的长度。
⑷ push():可向数组的末尾添加一个或多个元素,并返回新的长度。
arrayObject.push(newelement1,newelement2,......,newelementX);
push()方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject,而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
⑸ concat():用于连接两个或多个数组。
该方法不会改变现有的数组,而仅仅返回被连接数组的一个副本。
arrayObject.concat(arrayX,arrayX,......,arrayX);
返回值:返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组,那么添加的是数组中的元素,而不是数组。
在下面的实例中,我们创建了两个数组,然后使用 concat() 把它们连接起来。【范例2.11】 数组的concat方法(范例文件:ch02\2-11.html)
01 var arr = new Array(3);
02 arr[0] = "George";
03 arr[1] = "John";
04 arr[2] = "Thomas";
05 var arr2 = new Array(3);
06 arr2[0] = "James";
07 arr2[1] = "Adrew";
08 arr2[2] = "Martin";
09 alert(arr.concat(arr2));
相关的示例请参考ch02\2-11.html文件。在IE浏览器里面运行的结果如图所示。2.4 关键字
本节视频教学录像:2分钟
ECMA-262 定义了 ECMAScript 支持的一套关键字(keyword)。根据规定,关键字是保留的,不能用作变量名或函数名。
下面是ECMAScript关键字的完整列表。
如果把关键字用作变量名或函数名,可能得到诸如 "Identifier Expected"(应该有标识符、期望标识符)这样的错误消息。2.5 保留字
本节视频教学录像:1分钟
ECMA-262 定义了 ECMAScript 支持的一套保留字(reserved word)。保留字在某种意思上是为将来的关键字而保留的单词。因此保留字不能用作变量名或函数名。
ECMA-262 第三版中保留字的完整列表如下。
如果将保留字用作变量名或函数名,那么除非将来的浏览器实现了该保留字,否则很可能收不到任何错误消息。当浏览器将其实现后,该单词将被看做关键字,如此将出现关键字错误。2.6 条件语句
本节视频教学录像:3分钟
和其他程序设计语言一样,JavaScript也具有各种条件语句来进行流程上的判断。本节将对条件语句进行简单的介绍,包括各种操作符以及逻辑语句等。2.6.1 比较运算符
比较运算符执行的是比较运算。每个比较运算符都返回一个布尔值。比较运算符在逻辑语句中使用,以测定变量或值是否相等。
给定 x=5,下面的表格解释了比较运算符。
可以在条件语句中使用比较运算符对值进行比较,然后根据结果来采取行动。
if (age<18) document.write("Too young");2.6.2 逻辑运算符
⑴ 逻辑运算符,用于测定变量或值之间的逻辑。
给定 x=6 以及 y=3,下表解释了逻辑运算符。
⑵ 条件运算符。
JavaScript还包含了基于某些条件对变量进行赋值的条件运算符。
variablename=(condition)?value1:value2;
例子如下。
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
如果变量visitor中的值是 "PRES",则向变量greeting赋值"Dear President",否则赋值 "Dear"。2.6.3 if 语句
if条件语句用于基于不同的条件来执行不同的动作。
1.if 语句语法
01 if ( 条件 ) {
02 只有当条件为 true 时执行的代码
03 };
2.if...else if...else 语句
使用 if....else if...else 语句选择多个代码块之一来执行。
语法如下。
01 if (条件 1)
02 {
03 当条件 1 为 true 时执行的代码
04 }
05 else if (条件 2)
06 {
07 当条件 2 为 true 时执行的代码
08 }
09 else
10 {
11 当条件 1 和 条件 2 都不为 true 时执行的代码
12 };2.6.4 switch 语句
switch 语句是 if 语句的兄弟语句。
开发者可以用 switch 语句为表达式提供一系列的分支情况(case)。
switch 语句的语法如下。
01 switch (expression)
02 case value: statement;
03 break;
04 case value: statement;
05 break;
06 case value: statement;
07 break;
08 default: statement;
每个分支情况(case)都是表示“如果expression等于value,就执行statement”。
关键字 break 会使代码跳出 switch 语句。如果没有关键字 break,代码就会继续进入下一个 case。关键字 default 说明了表达式的结果不等于任何一种情况时的操作。2.7 循环语句
本节视频教学录像:8分钟
循环语句的作用是反复地执行同一段代码,尽管其分为几种不同的类型,但基本的原理几乎都是一样的,只要给定的条件仍能得到满足,包括在循环条件语句里面的代码就会重复执行下去,一旦条件不再满足则终止。本节将简要介绍JavaScript中常用的几种循环。2.7.1 while 语句
while语句语法如下。
01 while(表达式 )
02 {
03 语句 ;
04 };
while为不确定性循环,当表达式的结果为真(true)时,执行循环中的语句;表达式为假(false)不执行循环(true和false是JavaScript布尔类型)。2.7.2 do...while 语句
1.do...while语句语法
01 do
02 {
03 语句 ;
04 }while(表达式 );
do...while为不确定性循环,先执行大括号中的语句,当表达式的结果为真(true)时,执行循环中的语句;表达式为假(false)不执行循环,并退出do...while循环。
2.while与do...while的区别
do...while将先执行一遍大括号中的语句,再判断表达式的真假。这是它与while的本质区别。2.7.3 for 语句
for语句语法如下。
01 for(初始化表达式 ;判断表达式 ;循环表达式 )
02 {
03 语句 ;
04 };
for语句非常灵活,完全可以代替while与do...while语句。见下图,先执行“初始化表达式”,再根据“判断表达式”的结果判断是否执行循环,当判断表达式为真(true)时,执行循环中的语句,最后执行“循环表达式”,并继续返回循环的开始进行新一轮循环;表达式为假(false)不执行循环,并退出for循环。
试读结束[说明:试读内容隐藏了图片]