第一篇 JavaScript基础篇
第1章 JavaScript概述
“千里之行，始于足下”。这句千古遗训蕴含着深刻的道理，在计划安排停当之后需要开始落实行动。只有从现在的脚下开始出发，才能达千里之外的目的地。学习JavaScript最好从了解它的起源开始，了解其产生的背景，为了什么产生，从而知道其主要应用场合，对今后的学习和目标的建立有莫大的帮助。本章将向读者讲解JavaScript的背景和现在的状况，以及未来可能的发展方向。通过本章的学习，读者将学会编写一个最简单的JavaScript程序并知道如何运行。
● 了解JavaScript产生的背景
● 了解JavaScript和其他脚本语言的异同
● 了解如何编写一个JavaScript程序并运行它
● 牢记编写JavaScript程序的注意事项
以上几点是对读者在学习本章内容时所提出的基本要求，也是本章希望能够达到的目的。读者在学习本章内容时可以将其作为学习的参照。
1.1 初识JavaScript
JavaScript是世界上使用人数最多的程序语言之一，几乎每一个普通用户的电脑上都存在JavaScript程序的影子。然而绝大多数用户却不知道它的起源，以及如何发展至今。JavaScript程序设计语言在Web领域的应用越来越火，未来它将会怎样发展，本节将对这部分内容分别讲述。
1.1.1 理解JavaScript的历史
在互联网形成的初期，Web技术远远没有像今天这样丰富以至于让人难以选择。当时，最基本的在Web客户端进行数据有效性验证都非常麻烦，浏览器端的用户体验效果非常单调，几乎没有交互性。今天所看到的全动态Flash、SilverLight、JavaScript等精彩应用在当时都没有，有的只是纯HTML静态页。
基于这样的现状，Netscape公司在它的Navigator Web浏览器中增加了脚本功能，以简单的方式实现浏览器中的数据验证，该脚本名为LiveScript。与此同时，Java技术也逐渐红火，其特点也正好能弥补Web客户端交互性方面的不足。Netscape公司在其Navigator浏览器中支持JavaApplet时，考虑JavaApplet与LiveScript目标的相似性，将LiveScript更名JavaScript，可以理解为其欲借Java之势以求发展。
JavaScript语言刚推出就在市场获得巨大的成功，这表现在Navigator浏览器的用户量上。当JavaScript语言的使用形成一种大趋势之后，微软的IE浏览器也增加对JavaScript语言的支持，这加快了JavaScript语言发展的速度。
微软公司的IE浏览器搭乘Windows操作系统这艘巨舰在市场上获得了空前的成就，同时微软也实现了一门兼容JavaScript的脚本语言，命名为JScript。如今对JavaScript的支持已经成为Web浏览器中不可缺少的技术。
提示：很多种有名的编程语言起初都是由个人或小团体创造出来，逐步完善并发展壮大。
1.1.2 JavaScript标准
众多Web浏览器对JavaScript的支持也很不一致，相同的语言特性在不同的浏览器中会有所差异。这种差异对开发者影响极大，开发时不得不为不同的浏览器编写不同的代码，这种难堪的局面一直持续到JavaScript标准的制定。1997年发布了ECMA-262语言规范，将JavaScript语言标准化并重命名为ECMAScript，现在各种浏览器都以该规范作为标准。
提示：语言和系统接口标准化后可以大大减轻应用开发人员的负担，不用为不同的语言特性或接口编写不同的代码，这也增强了软件的可移植性。
1.1.3 JavaScript的现况
随着Ajax的技术大潮，JavaScript重新受到Web开发者的重视。在此之前JavaScript主要应用还是在客户端实现一些数据验证等简单工作，多媒体交互应用被类似Flash的技术抢占了市场。正当JavaScript处于低潮的时候，Ajax技术被开发出来了，简单地说就是利用JavaScript的异步更新机制实现Web页的局部刷新。当一个页面不需要全部重新加载，只要加载部分数据即可的时候，互联网的运行速度便大大加快了。JavaScript因此在Web开发中站在了一个更加重要的位置。如图1-1所示是JavaScript在浏览器中的层次结构。
图1-1 浏览器中的JavaScript
很多开发者开始挖掘JavaScript其他方面的潜力，打算发现类似Ajax那样令人吃惊的东西。结合W3C现行的DOM规范，JavaScript表现出了惊人的魅力，涌现出很多基于Web的应用程序，这是在Web客户端方面。在服务器端技术中，微软公司也将JavaScript纳入了.NET语言的范畴，使其成了ASP.NET的语言工具，开发者不必重新学习语言即可运用ASP.NET技术。如今基于JavaScript的应用不胜枚举，读者朋友大可上互联网去了解更多的信息。
提示：自从Ajax技术出现之后，人们重新重视了JavaScript的价值，如今不少开发者使用JavaScript开发出极具价值的通用程序框架，例如一些流行的WEB UI库。
1.1.4 JavaScript的发展趋势
语言永远被当做工具，这一点从来都没有被改变过，以后也不会，语言是使用及和其他技术进行交流的方式和手段。例如，在Windows平台上，使用ADODB组件可以使JavaScript能处理支持SQL的数据库中的数据，使用FSO组件可以实现本地文件IO功能。这一切都说明了JavaScript位于应用开发的最顶端，其与低层技术的实现无关，层次结构如图1-2所示。
尽管平台技术不断发生变化，JavaScript仍将以不变的形式去使用平台提供的能力从而适应新的需求。未来的一段时间内，Web开发将是开发者众聚之地，也是JavaScript变得紫红的时代。
图1-2 JavaScript在系统中的位置
1.2 简单的脚本语言
JavaScript是一门脚本语言，它如导演手中的剧本命令一样，使原来独立零散的演员按剧情协调组织表演从而获得观众的掌声。脚本需要简单易懂，有针对性以能运用于一个特定的场合。本节将向读者介绍更多有关脚本的知识。
1.2.1 认识脚本语言
脚本语言是一种应用程序扩展语言，用于系统的扩展，使其按用户的意愿去运行。所有的基础功能由系统提供，脚本语言在更高层次描述如何调用系统的接口。和其他编程语言不同，脚本语言通常不需要经历编译和链接这些阶段，大都直接解释执行。也有的语言需要编译，但这是为了执行得更快一点。
提示：与电影脚本的含义及作用相似，JavaScript是用于实现程序中的事务流程控制，组织多个逻辑对象一起完成工作。
1.2.2 脚本语言的分类
如今成熟的脚本语言非常多，根据使用方式的不同分成嵌入式和非嵌入式两类。嵌入式脚本语言，这类语言通常为了应用程序的扩展而开发出来。解释器通常嵌入在被扩展的应用程序中，成为宿主程序的一部分。例如Lua语言、Python语言的嵌入性也比较好，如今这两者在游戏开发领域应用较多，通常作为游戏软件的脚本系统或配置文件。根据笔者的经验，Lua语言无论在嵌入性和运行效率上都远超过其他语言，将Python语言纳入嵌入式语言分类中有些勉强，因为其更像其他独立运行的语言。
非嵌入式脚本语言，这类语言无须嵌入其他程序中，例如本书所讲的JavaScript语言。这些语言主要应用不是作为系统扩展，而是实现一般的任务控制。
提示：将语言分类比较勉强，因为其在开发的时候大都针对某一类应用而不先考虑属于某一类。
1.2.3 JavaScript的作用
JavaScript主要运用在浏览器端，处理用户的输入实现交互功能。例如在会员注册页面将数据发送到服务器前，使用JavaScript程序检查用户输入的数据是否符合要求。可以使用JavaScript通过DOM对象操作HTML页中的各个节点元素，动态修改HTML文档的内容，实现基于Web的应用。JavaScript可以结合数据库组件、文件系统组件等扩展组件实现任何想要的功能。
1.2.4 JavaScript和其他语言的异同
JavaScript和其他语言脚本语言一样，都应用于高级任务控制，大多都是解释执行，都属于弱类型语言，数据类型在运行时决定，实现自动内存管理机制，资源的分配策略相似。但不同的是，JavaScript运行于浏览器中，主要用于Web开发，这方面它和VBScript一样；而其他众多脚本语言都运用于特定的软件环境以帮助实现任务自动化，例如3DS Max的MaxScript，使用该脚本语言可以使3DS Max产生和手动操作图形界面命令一样的效果，这就是任务的自动化。
1.2.5 JavaScript与Java的异同
令知情人士难以忍受的是很多不了解的人都以为JavaScript和Java存在莫大的关系，事实上二者毫无关系。勉强的说法就是这两者都属于编程语言，都带有“Java”字样。而实际上， JavaScript是一门基于Web浏览器、解释执行、轻量级编程语言；Java则是运行于Java虚拟机、编译执行、重量级编程语言。有关JavaScript的背景知识已经介绍了不少，在此不再赘述。
Java是一个庞大复杂的技术体系及其开发工具的总称，Java语言是使用Java技术的主要工具。Java语言编写的程序通过编译器编译为字节码目标程序，执行时交由Java虚拟机处理，其具有非常强大的跨平台特性，这些和JavaScript截然不同。
提示：读者可以认为JavaScript和Java之间没有任何联系。
1.3 第一个JavaScript程序
学习每一门新语言，大致了解了它的背景之后，最想做的莫过于先写一个最简单的程序并成功运行。如果最初连续几个程序都无法成功编译或运行，初学者学习的信心多少会受些打击，这是正常现象。本节将带领读者对JavaScript进行第一次实践尝试，用它编写一个最简单且流行了几十年的“HelloWorld”程序。
1.3.1 预备知识
JavaScript程序运行于浏览器中，因此这里的“HelloWorld”程序将嵌入在HTML文档里，使用document对象的write方法将字符串“Hello World”输出显示在浏览器客户区里。另一种常用的信息输出方法是使用window对象的alert方法，以消息框的形式输出信息。JavaScript程序嵌入HTML文档的常用方式就是将代码放在“<script>”标签对中，代码如下所示。
01 <html> <!---------HTML文档开始----- --------------->
02 <head> <!---------文档头开始------- ------------------->
03 <title> <!---------标题开始------- ---------------------->
04 </title> <!---------标题结束--------- -------------------->
05 </head> <!---------文档头结束------- ------------------->
06 <body> <!---------文档体开始------- ------------------->
07 <script language="JavaScript">
<!---------脚本程序------- ---------------------->
08 // JavaScript程序语句 // JavaScript程序语句
09 // …… // 更多的JavaScript程序语句
10 </script> <!---------脚本结束-------- --------------------->
11 </body> <!---------文档体结束------- ------------------->
12 </html> <!---------HTML文档结束----- --------------->
另一种方式是将JavaScript代码直接嵌入HTML标签中，代码如下所示。
01 <html> <!---------HTML文档开始----- --------------->
02 <head> <!---------文档头开始------ -------------------->
03 <title> <!---------标题开始------ ----------------------->
04 </title> <!---------标题结束------ ----------------------->
05 </head> <!---------文档头结束------- ------------------->
06 <body> <!---------文档体开始------- ------------------->
07 <input type="button" value="按钮" onclick="alert('嵌入在HTML标签中的
JavaScript程序');"/>
08 </body> <!---------文档体结束------- ------------------->
09 </html> <!---------HTML文档结束----- --------------->
第三种方式是将JavaScript程序以外部文件的形式链接到当前HTML文档中，本书不使用这种方式，限于篇幅在此不作讲解，读者可以查阅相关资料。
提示：JavaScript使用形式灵活多样，除上面所提到的常用方式以外的方法都属于编程技巧范畴。
1.3.2 选择JavaScript编辑器
JavaScript源程序是文本文件，因此可以使用任何文本编辑器来编写程序源代码，例如Windows操作系统里的“记事本”程序。为了更快速地编写程序并且降低出错的几率，通常会选择一些专业的代码编辑工具。专业的代码编辑器有代码提示和自动完成功能，笔者推荐使用Aptana Studio，它是一款很不错的JavaScript代码编辑器，其安装初始界面如图1-3所示。
图1-3 开始安装Aptana Studio
安装完毕后运行Aptana Studio，即可进入程序的主界面，如图1-4所示，使用Aptana Studio可以快速编写JavaScript程序。如果使用的是Firefox浏览器，还可以在该软件中调试JavaScript程序。
图1-4 Aptana Studio主界面
注意：为了简单起见，本书所有的例程都以IE浏览器作为标准。
1.3.3 编写“Hello World”程序
下面正式开始编写Hello World程序，推荐使用记事本或上一节介绍的Aptana IDE。为简单起见，这里使用记事本编写程序。
【范例1-1】编写并运行最经典的入门程序，输出“Hello World!”。打开记事本，输入如示例代码1-1所示的代码并将文件另存为网页文件“helloworld.htm”。
示例代码1-1
01 <html> <!---------HTML文档开始----------- --------->
02 <body> <!---------文档体开始------------ -------------->
03 <script language="JavaScript">
<!---------脚本程序------------ ----------------->
04 document.write("Hello World!"); // 输出经典的Hello World
05 </script> <!---------脚本结束----------- ------------------>
06 </body> <!---------文档体结束------------ -------------->
07 </html> <!---------HTML文档结束------------- ------->
【运行结果】双击网页文件运行程序，其结果如图1-5所示。
图1-5 Hello World程序的运行结果
【代码解析】第4行是JavaScript程序代码，第3、5行是标准HTML标签，该标签用于在HTML文档中插入脚本程序。其中的“language”属性指明了“<script>”标签对间的代码是JavaScript程序。第4行调用document对象的write方法将字符串“Hello World！”输出到HTML文本流中。
提示：嵌入JavaScript脚本时也可以使用标签“<script type="text/JavaScript"></script>”。
1.3.4 浏览器对JavaScript的支持
在互联网发展的过程中，几大主要浏览器之间也存在激烈的竞争。JavaScript是Netscape公司的技术，其他浏览器并不能和Navigator一样良好地支持JavaScript，因为得不到使用许可。微软公司为能使其IE浏览器能抢占一定市场份额，于是在IE中实现了称为JScript的脚本语言，其兼容JavaScript，但是和JavaScript间仍然存在版本差异。因此，编程人员在编码时仍然须考虑不同浏览器间的差别。
为能使JavaScript脚本语言标准化，Netscape、微软等公司和其他一些团体打算建立一个语言标准。1997年发表了第一套脚本语言规范，即ECMA-262。新语言规范下的JavaScript命名为ECMAScript，因为“JavaScript”这名字也存在许可的问题。现在的浏览器都以ECMAScript为规范，这样可以大大减少编程人员的负担，不过差别总还是存在的，因此编程时还得引起注意，现举例如何查询当前正在使用的浏览器类型。
【范例1-2】检测当前浏览器的信息，输出浏览器的名称、版本号、发行代号，如示例代码1-2所示。
示例代码1-2
01 <script language="JavaScript"> // 程序开始
02 document.write("名称：" + navigator.appName+"<br>");// 浏览器名称
03 document.write("版本号：" + navigator.appVersion+"<br>");
// 浏览器版本号
04 document.write("发行代号："+navigator.appCodeName+"<br>");
// 浏览器的内部发行代号
05 </script> // 程序结束
【运行结果】在浏览器中打开网页文件运行程序，其结果如图1-6所示。
图1-6 浏览器信息
【代码解析】该示例读取navigator对象的相关属性以取得当前浏览器的信息。第2行读取appName取得浏览器名称，第3、4行分别取得版本号和发行代号。
提示：通过获得浏览器的信息，才能对当前页面使用具有针对性的JavaScript程序代码。
1.4 注意事项
JavaScript程序的书写有些许需要注意的地方，如大小写敏感、单行和多行、分号的运用等。初学者在编写程序时通常会触犯这些规则，应该尽力避免。用户自定义的标识符不能与语言保留的关键字同名，通过使用一些专业的编辑器可以帮助消除语法错误。
1.4.1 大小写敏感
JavaScript代码是大小写敏感的，Name和name是不同的标识符，编码时应当予以注意。同一个词如果各个字母间大小写不同，系统将当做不同的标识符来处理，相互之间没有任何联系。现举例说明，代码如下所示。
01 Name = "sunsir"; // 大写字母开头
02 name = "foxsir"; // 小写字母开头
此时Name的值仍然是“sunsir”，对name进行操作并不影响到变量Name，它们是不同的变量，因为在JavaScript中所有的代码都区分大小写。
1.4.2 注意空格与换行
代码中多余的空格会被忽略，同一个标识符的所有字母必须连续。一行代码可以分成多行书写，例如以下代码的书写都正确。单行书写如下：
if(1==1 && 6>3 ){alert("return true");}else{alert( "return false" );}
// 代码写于一行中，用分号作为语句结束标志分成多行、规范的书写如下：
01 if( 1==1 && 6>3 ) // 如果1等于1，且6大于3，则
02 {
03 alert("return true" ); // 输出“true”
04 }
05 else // 否则
06 {
07 alert( "return false" ); // 输出“false”
08 }
也可以在代码中的标识符间任意添加空格，多余的空格会被忽略，例如以下代码效果与上述代码完全一样。
01 if ( 1 // 一个语句分多行书写
02 ==1 // 将一行代码分成多行
03 && 6> 3 // 将一行代码分成多行
04 ) // 将一行代码分成多行
05 { alert( // 将一行代码分成多行
06 "return true"); }else // 将一行代码分成多行
07 { // 将一行代码分成多行
08 alert( "return false" ); // 将一行代码分成多行
09 } // 将一行代码分成多行
虽然代码可以分成任意多行去写，但是对于字符串却不一样。要将一个字符串分成多行，须将每一行作为一个单独的字符串，再使用“+”运行符将位于不同行的字符串连接起来。代码如下所示。
01 var Message = "JavaScript编程，简单，有趣！"; // 单行中的字符串
02 var message = "JavaScript编程，" + // 多行中的字符串
03 "简单，有趣！";
提示：规范的书写风格，是编写成熟代码的基本要求，希望读者引起注意。
1.4.3 分号可有可无
JavaScript程序可以使用分号作为一个语句的结束标志，分号之后是新语句的开始。这样可以将多个语句放在一行中，该特性在一些场合中非常有用，比如将JavaScript程序写在一个字符串中以构造函数对象。当一行只有一个程序语句时，结尾可以不使用分号。反之，当不使用分号时，一行被认为是一个程序语句，代码如下所示。
01 <script language="JavaScript"> // 脚本开始
02 var name = "Sunsir" // 名字
03 var age = 25 // 年龄
04 alert( "Sunsir's age:" + age ) // 输出信息
05 </script> // 脚本结束
1.5 小结
本章向读者介绍了JavaScript语言产生的背景、发展的过程及如何使用。现行的JavaScript是以ECMAScript为语言标准的，常见的浏览器基本上都实现了ECMA-262语言规范。对于不同浏览器间的一些微小的差别读者仍需要注意，可以在程序中判断当前浏览器并编写与之适应的代码。JavaScript程序以文本的形式嵌入或链接到HTML文档中，其代码标识符大小写敏感。一个程序语句可以分成多行书写，可以使用分号作为一个语句的结束。如果读者对本章内容还有什么疑问，可以参考《JavaScript实例自学手册：通过486个例子掌握Web开发捷径》（电子工业出版社，吴雪）和《完全手册：HTML+CSS+JavaScript实用详解》（电子工业出版社，叶青）等书籍。
1.6 习题
一、常见面试题
1.简述Java与JavaScript的区别。
【解析】本题考核应聘者对于两种语言的了解。其实JavaScript和Java没有任何关系（除了名字）JavaScript的命名是为了沾Java的光，还仿照了一些Java的结构语法。JavaScript是浏览器的脚本语言，Java是编写应用程序的高级语言。
2.什么是脚本语言。
【解析】本题主要考查的是对脚本语言和高级语言的认识。脚本语言是一种应用程序扩展语言，用于系统的扩展，使其按用户的意愿去运行。所有的基础功能由系统提供，脚本语言在更高层次描述如何调用系统的接口。和其他编程语言不同，脚本语言通常不需要经历编译和链接这些阶段，大都直接解释执行。
二、简答题
1.简述JavaScript的发展史，以及它的未来。
2.简述JavaScript语言的一些特点。
三、综合练习
1.编写程序，在浏览器中显示用户的名字。
【提示】对Hello World程序稍加修改即可实现，差别只是输出不同的字符串。参考代码如下：
01 <script language="JavaScript"> // 脚本开始
02 name = "Sunsir"; // 名字
03 document.write( name ); // 在浏览器中输出
04 </script> // 脚本结束
【运行结果】打开网页运行程序，结果如图1-7所示。
图1-7 输出字符串
2.检测当前运行程序所用的浏览器，输出浏览器的程序名。
【提示】模仿范例1-2，读取navigator对象的appName属性的值，所得数据即为浏览器的程序名，参考代码如下：
01 <script language="JavaScript"> // 程序开始
02 document.write( navigator.appName ); // 在浏览器中输出
03 </script> // 程序结果
【运行结果】打开网页运行程序，结果如图1-8所示。
警告：本书假定读者具有基本的HTML语言知识，HTML部分代码除非必要否则将不多做解释。
图1-8 输出浏览器名称
四、编程题
1.写一个简单的“Hello World”程序并运行。
【提示】可以参照1.3.3节进行。
2.计算两个数相加，并将结果输出。
【提示】可以定义三个变量，两个作为加数，一个作为总数。