【JavaScript学习系列】(1)——JavaScript语言概述
从大学开始学习网页制作就开始接触到JavaScript，一直到现在只是感觉JavaScript就是一个简单的脚本语言，而且大多我们用的JavaScript都只是一些很简单的应用背景，后来在查阅一些资料的时候，才感觉我们走了很多弯路，也许很多时候只需要简短的JavaScript代码就能够实现的东西，我们却一直找不到解决方案。【JavaScript学习系列】主要详细记录自己的JavaScript学习路程，如果有同道中人，如果有希望尽早学习JavaScript的都可以从这一系列教材找到自己要的答案。
本章先预热一下，主要介绍：
【JavaScript学习系列】(1)——JavaScript语言概述
JavaScript是目前Web应用程序开发者使用最为广泛的客户端脚本编程语言，它不仅可以用来开发交互式的Web页面，更重要的是它将HTML、XML和Java applet、Flash等功能强大的Web对象有机结合起来，是开发人员能快捷生成Internet或Intranet上使用的分布式应用程序。
一、JavaScript是什么
应用程序开发者在学习一门新语言之前，兴趣肯定聚焦在诸如“它是什么？”、“它能够做什么？”等问题，而不是“如何开发？”等问题上面，所以我们首先介绍一下：JavaScript是什么玩意。
1.1 JavaScript的特点
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，主要用于创建具有交互性较强的动态页面，主要具有如下特点：
1、基于对象：JavaScript能通过DOM(文档结构模型)及自身提供的对象及操作方法来实现所需的功能。
2、事件驱动：JavaScript采用事件驱动方式，能响应键盘事件、鼠标事件及浏览器窗口事件等，并执行指定的操作。
3、解释性语言：JavaScript无须专门编译器编译，而是嵌入JavaScript脚本的HTML文档载入时被浏览器逐行的解释，大量节省客户端与服务器端进行数据交互的时间。
4、实时性：JavaScript无须经服务器就可以直接对客户端的事件做出响应，并用处理结果实时更新目标页面。
5、动态性：JavaScript提供简单高效的语言流程，灵活处理对象的各种方法和属性，同时及时响应文档页面事件，实现页面的交互性和动态性。
6、跨平台：JavaScript脚本的正确运行依赖于浏览器，而与具体的操作系统无关。只要客户端装有支持JavaScript脚本的浏览器，JavaScript脚本运行结果就能正确反映在客户端浏览器平台上。
7、开发使用简单：JavaScript基本结构类似C语言，采用小程序段的方式编程，并提供了简易的开发平台和便捷的开发流程，就可以嵌入到HTML文档中供浏览器解释执行，同时JavaScript的变量类型是弱类型，使用不严格。
8、相对安全性：JavaScript是客户端脚本，通过浏览器解释执行。它不允许访问本地的硬盘，并且不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效地防止数据的丢失。
综上所述，JavaScript是一种有较强生命力和发展潜力的脚本描述语言，它可以被直接嵌入到HTML文档中，供浏览器解释执行，直接相应客户端事件，如：验证数据表单合法性，并调用相应的处理方法，迅速返回处理结果并更新页面，实现Web交互性和动态的要求，同时将大部分工作交给客户端处理，将Web服务器的资源消耗降到最低。
1.2 JavaScript能做什么
JavaScript脚本由于其效率高、功能强大等特点，在表单数据合法性验证、网页特效、交互式菜单、动态页面、数值计算等方面都获得广泛的应用，甚至出现了完全使用JavaScript编写的基于Web浏览器的类UNIX操作系统JS/UNIX和无须安装即可使用的中文输入法程序JustInput，可见JavaScript脚本编程能力不容小视！下面介绍JavaScript的常用功能：
1、表单数据合法性验证
使用JavaScript脚本语言能有效验证客户端提交的表单上数据的合法性，如数据合法则执行下一步操作，否则返回错误提示信息。
2、网页特效
使用JavaScript脚本语言，结合DOM和CSS能创建绚丽多彩的网页特效，如火焰状闪烁文字、文字围绕光标旋转等。
3、交互式菜单
使用JavaScript脚本可以创建具有动态效果的交互式菜单，完全可以与Flash制作的页面导航菜单相媲美。
4、动态页面
使用JavaScript脚本可以对Web页面的所有元素对象进行访问并使用对象的方法访问并修改其属性实现动态页面效果，其典型应用如网页版俄罗斯方块、扑克牌游戏等。
5、数值计算
JavaScript脚本将数据类型作为对象，并提供丰富的操作方法使得JavaScript用于数值计算。
二、JavaScript编程起步
JavaScript脚本已经成为Web应用程序开发的一门炙手可热的语言，成为客户端脚本的首选，网络上充斥着形态各异的JavaScript脚本实现不同的功能，但是用户也许并不了解JavaScript脚本是如何被浏览器中解释执行，更不知如何开始编写自己的JavaScript脚本来实现自己想要实现的效果。本节将学习JavaScript脚本语言编程的基本知识。
2.1 "Hello World"程序
任何一门新型语言的学习，都开始于"Hello World"，JavaScript也不例外。代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Hello World</title> </head> <body> <br /> <center> <script language="javascript"type="text/javascript"> document.write("Hello World!"); </script> </center> </body> </html>
保存为Helloworld.html，直接点击后可以查看到页面显示Hello World!信息。
2.2 JavaScript脚本编程步骤
JavaScript脚本编程一般分为如下步骤：
1、选择JavaScript脚本语言编辑器编辑脚本代码；
2、嵌入该JavaScript脚本代码到HTML文档中；
3、选择支持JavaScript脚本的浏览器浏览该HTML文档；
4、如果错误则检查并修正源代码，重新浏览，此过程重复直至代码正确为止；
5、处理不支持JavaScript脚本的情况。
由于JavaScript脚本代码是嵌入到HTML文档中被浏览器解释执行，所以开发JavaScript脚本代码并不需要特殊的编程环境，只需要普通的文本编辑器和支持JavaScript脚本的浏览器即可，那么又如何选择JavaScript脚本编辑器呢？
2.3 选择JavaScript脚本编辑器
编写JavaScript脚本代码可以选择普通的文本编辑器，如Windows Notepad、UltraEdit等，只要所选编辑器能将所编辑的代码最终保存为HTML文档类型(.html、htm等)即可。
虽然Dreamweaver、Microsoft FrontPage等专业网页开发工具套件内部集成了JavaScript脚本的开发环境，但笔者依然建议JavaScript脚本程序开发者在起步阶段使用最基本的文本编辑器，如Notepad、UltraEdit等进行开发，以便把注意力放在JavaScript脚本语言而不是开发环境上。
同时，如果脚本代码出现错误，可用该编辑器打开源文件(.html、.htm或.js)修改后保存，并重新使用浏览器浏览，重复此过程直到没有错误出现为止。
2.4 引入JavaScript脚本代码到HTML文档中
将JavaScript脚本嵌入到HTML文档中有4中标准方法：
1、代码包含于<script>和</script>标记对，然后嵌入到HTML文档中；
2、通过<script>标记的src属性链接外部的JavaScript脚本文件；
3、通过JavaScript伪URL地址引入；
4、通过HTML文档时间处理程序引入；
下面分别介绍JavaScript脚本的几种标准引入方法：
【1】通过<script>和</script>标记对引入
在前面的源代码中，除了<script>和</script>标记对之间的内容外，都是最基本的HTML代码，可见<script>和</script>标记对将JavaScript脚本代码封装到HTML文档中：
document.write("Hello World!");
浏览器载入嵌有JavaScript脚本的HTML文档时，能自动识别JavaScript脚本代码起始标记<script>和结果标记</script>，并将其间的代码按照解释JavaScript脚本代码的方法加以解释，然后将解释结果返回HTML文档并在浏览器窗口显示。
我们再来看看下面的代码：
<script language="javascript"type="text/javascript"> document.write("Hello World!"); </script>
首先，<script>和</script>标记对将JavaScript脚本代码封装，同时告诉浏览器期间的代码为JavaScript脚本代码，然后调用document文档对象的write()方法写字符串到HTML文档中。
下面重点介绍<script>标记的几个属性：
- language属性：用于指定封装代码的脚本语言及版本，包括：Perl、VBScript、JScript等，默认值为JavaScript；
- type属性：指定<script>和</script>标记对之间插入的脚本代码类型；
- src属性：用于将外部的脚本文件内容嵌入到当前文档中，使用JavaScript脚本编写的外部脚本文件必须使用.js为扩展名，同时在<script>和</script>标记对中不包含任何内容。如下所示：
- <script language="javascript"type="text/javascript"src="1.js"></script>
【2】通过<script>标记的src属性引入
将HTML文档中的<script></script>修改为：
<script language="javascript"type="text/javascript"src="1.js"></script>
同时在文本编辑器中编辑如下代码并将其保存为1.js:
document.write("Hello World!");
运行修改后的页面时，结果跟前面相同，同样的输出Hello World!
【3】通过JavaScript伪URL引入
在多数支持JavaScript脚本的浏览器中，可以通过JavaScript伪URL地址调用语句来引入JavaScript脚本代码。伪URL地址的一般格式如下：
JavaScript:alert("Hello World!")
一般以"javascript:"开始，后面紧跟要执行的操作。下面的代码演示如何使用伪URL地址来引入JavaScript代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript伪URL引入</title> </head> <body> <br /> <center> <form name="MyForm"> <input type=text name="MyText" value="鼠标点击" onclick="javascript:alert('鼠标已点击')"> </form> </center> </body> </html>
在浏览器查看该页面时，鼠标点击文本框后，弹出警告对话框。
【4】通过HTML文档事件处理程序引入
在开发Web应用程序的过程中，开发者可以给HTML文档中设定不同的事件处理器，通常是设置某HTML元素的属性来引用一个脚本(可以是一个简单的动作或者函数)，属性一般以on开头，如鼠标移动onmousemove()等。
下面的程序演示如何使用JavaScript脚本对按钮单击事件进行响应：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Sample Page</title> <mce:script type="text/javascript"><!-- function ClickMe() { alert("鼠标已单击按钮"); } // --></mce:script> </head> <body> <br /> <center> <p>通过文档事件处理程序引入JavaScript脚本代码示例：</p> <form name="MyForm"> <input type=button name="MyButton" value="鼠标点击" onclick="ClickMe()"> </form> </center> </body> </html>
程序运行后，在原始页面单击“鼠标单击”按钮，会出现“鼠标已被点击”的警告对话框。
2.5 嵌入JavaScript脚本代码位置
JavaScript脚本代码可放在HTML文档任何需要的位置，一般来说，可以在<head>与</head>标记对、<body>与</body>标记对之间按需要放置JavaScript脚本代码。
【1】<head>与</head>标记对之间放置
放置在】<head>与</head>标记对之间的JavaScript脚本代码一般用于提前载入以响应用户的动作，一般不影响HTML文档的浏览器显示内容。如下是其基本文档结构。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Sample Page</title> <script type="text/javascript"> //脚本语句 </script> </head> <body> </body> </html>
【2】<body>与</body>标记对之间放置
如果需要在页面载入时运行JavaScript脚本生成网页内容，应将脚本代码放置在<body>与</body>标记对之间，可根据需要编写多个独立的脚本代码并与HTML代码结合在一起，如下是其基本文档结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Sample Page</title> </head> <body> <mce:script type="text/javascript"><!-- //脚本语句 // --></mce:script> <mce:script type="text/javascript"><!-- //脚本语句 // --></mce:script> </body> </html>
【3】在两个标记对之间混合放置
如果既需要提前载入脚本代码以响应用户的事件，又需要在页面载入时使用脚本生成页面内容，可以综合以上两种方式，如下是其基本文档结构：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Sample Page</title> <mce:script type="text/javascript"><!-- //脚本语句 // --></mce:script> </head> <body> <mce:script type="text/javascript"><!-- //脚本语句 // --></mce:script> </body> </html>
在HTML文档中何种位置嵌入JavaScript脚本代码应由其实际功能需求来决定，嵌入脚本的HTML文档编辑完成。
2.6 处理不支持JavaScript脚本的情况
客户端浏览器不支持当前JavaScript脚本存在如下三种可能：
- 客户端浏览器不支持任何JavaScript脚本；
- 客户端浏览器支持的JavaScript脚本与该脚本代码使用的版本支持的对象、属性或方法不同；
- 客户端为了安全起见，已经将浏览器对JavaScript脚本的支持设置为禁止
以上三种情况总结起来，就是浏览器对当前脚本不能解释出正确的结果，在编写脚本代码时如不进行相关处理，用户使用该浏览器带有该脚本的文档将出现警告框。可以通过以下两种方法解决。
- 使用<!--和-->标记对直接屏蔽法：该方法使用<!--和-->标记将JavaScript代码进行封装，告诉浏览器如果它不支持该脚本就直接跳过，如果支持脚本代码则自动跳过该标记对，达到如果浏览器不支持脚本代码则其隐藏的目的。
- 使用<noscript>和</noscript>标记对给出提示信息。
三、JavaScript的实现基础
通过前面的学习，我们得知ECMAScript是JavaScript脚本的基石，但并不是使用JavaScript脚本开发过程中应唯一特别值得关注的部分。实际上，一个完整的JavaScript脚本应包含以下三部分：
- ECMAScript核心：为不同的宿主环境提供核心的脚本能力；
- DOM(文档对象模型)：规定了访问HTML和XML的应用程序接口；
- BOM(浏览器对象模型)：提供了独立于内容而在浏览器窗口之间进行交互的对象和方法。
四、本章小结
本章主要介绍了JavaScript脚本的基本知识，同时演示了如何编写自己的“Hello World!”程序，兼顾JavaScript及浏览器的版本差异性提出相应的编程策略；讲述了JavaScript脚本语言的实现基础，同时大家一定在使用过程中要区分JavaScript与JScript、VBScript的区别，以及JavaScript与Java、Java Applet概念的异同。
至此我们的JavaScript入门篇就结束了，后面的章节会详细介绍JavaScript的语言基础等内容。