通过代码实例跟我学JavaScript ——JavaScript脚本语言(第1部分)

1.1通过代码实例跟我学JavaScript ——JavaScript脚本语言（第1部分）1.1.1JavaScript脚本语言概况

1、什么是JavaScript

JavaScript是一种基于对象（Object）和事件驱动（Event Driven）并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java 小程序和服务器端脚本等共同实现在一个Web页面中链接多个对象，从而实现与Web客户进行更复杂的交互作用。

它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，同时也是AJAX 技术的主要编程语言。

2、JavaScript脚本语言的特点

（1）是一种脚本语言，并且采用小程序段的方式实现编程

像其它脚本语言一样，JavaScript同样也是一种解释性语言。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

（2）是基于对象的语言

JavaScript是一种基于对象的语言，这意味着它能运用自己内置已经创建好的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

（3）简单性

JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java语言的读者来说是一种非常好的过渡——而对于熟悉Java 的程序员来说，则非常简单。其次它的变量类型是采用弱类型，并未使用严格的数据类型。（4）安全性

JavaScript是一种安全性语言，它不允许访问本地的硬盘（但微软的Jscript脚本语言除外），并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

（5）动态性

JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。

它对用户的反映响应，是采用以事件驱动的方式进行的——而所谓的事件驱动，就是指在页面中执行了某种操作所产生的动作，就称为“事件”（Event）。比如按下鼠标、移动窗口、选择菜单等都可以视为事件——当事件发生后，可以引起相应的事件响应函数的执行。（6）跨平台性

JavaScript是依赖于浏览器的但与客户机的操作环境无关，只要能运行支持JavaScript的浏览器就可正确执行。从而实现了类似Java语言的“编写一次、到处执行”的效果。

3、JavaScript和Java的区别

JavaScript不是Sun Microsystems的产品，它是由Netscape公司开发出的。它最初叫LiveScript，虽然JavaScript与Java有紧密的联系，但却是两个公司开发的两个不同的产品。

就在Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为JavaScript，目的是为了利用Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报，JavaScript 从此变成了因特网的必备组件。

JavaScript 和Java 很类似，但到底并不一样！Java 是一种比JavaScript 更复杂更强大功能的编程语言，而JavaScript 则是对Java精华后的语言，因此许多Java 的技术特性在JavaScript 中并不被支持。下面对两种语言间的异同进行对比：

（1）基于对象和面向对象

1)Java是一种真正的面向对象的语言，即使是开发简单的程序，必须设计对象。

2)JavaScript是种脚本语言，它可以用来制作与网络无关的，与用户交互作用的复杂软

件。它是一种基于对象（Object Based）和事件驱动（Event Driver）的编程语言。因而它本身提供了非常丰富的内部对象供设计人员使用。

（2）解释和编译

1)Java的源代码在传递到客户端执行之前，必须经过编译，因而客户端上必须具有相应

的解释器，它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。

2)JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，

而是将文本格式的字符代码发送给客户编由浏览器解释执行。

（3）强变量和弱变量（与Java 一样，变量、函数名、运算符以及其他一切东西都是区分大小写的）

Java采用强类型变量检查，即所有变量在编译之前必须作声明。

int x=“1234”;

String y="4321";

JavaScript中变量声明，采用弱类型。即变量在使用前不需作声明（但一般最好以var 定义出），而是解释器在运行时检查其数据类型。因此，可以随时改变变量所存数据的类型（尽量避免这样做）。

x=1234;

y＝"4321";

前者说明x为其数值型变量，而后者说明y为字符型变量。使用变量时，好的编码习惯是始终存放相同类型的值。另外，用同一个var 语句定义的变量不必具有相同的类型，如下所示：

var test = "hi", age = 25;

与Java 不同，JavaScript中的变量并不一定要初始化。因此，下面这一行代码也是有效的：

var test;

（4）代码格式不一样

1)Java是一种与HTML无关的格式，其代码以字节代码的形式保存在独立的文档中。

2)JavaScript的代码是一种文本字符格式，可以直接嵌入到HTML文档中，并且可动态

装载。

（5）每行结尾的分号可有可无

Java、C 和Perl 都要求每行代码以分号（;）结束才符合语法，而JavaScript则允许开发者自行决定是否以分号结束一行代码。

如果没有分号，JavaScript就把折行代码的结尾看做该语句的结尾（与Visual Basic 和VBScript 相似），前提是这样没有破坏代码的语义。

但最好的代码编写习惯是总加入分号，因为没有分号，有些浏览器就不能正确运行，不过根据JavaScript标准，下面两行代码都是正确的：

var someOneClolr = " blue "

var someOneClolr = "blue";

（6）JavaScript中的注释采用与Java、C 和PHP 语言的注释相同

1)单行注释以双斜杠开头（//）

2)多行注释以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）

//this is a single-line comment

/*

this is a multi-

line comment

*/

（7）括号表示代码块

从Java 中借鉴的另一个概念是代码块，代码块表示一系列应该按顺序执行的语句，这些语句被封装在左括号（{）和右括号（}）之间。例如：

if (test1 == "red") {

test1 = "blue";

alert(test1);

}

4、JavaScript与VBScript的区别

（1）JavaScript是基于对象的

可以利用OOP中的对象封装的特性将代码与数据组合为对象，而VBScript则不具备；（2）JavaScript被IE、Navigator等许多主流的浏览器所支持，而VBScript则只在IE中适用。

5、JavaScript的主要功能

（1）人机交互性

（2）实时动态效果

6、体验在HTML页面中如何应用JavaScript的脚本

（1）直接内联在HTML标签中，作为事件响应代码

点击我可以弹出一个对话框

注意：IE6、IE8不支持如下的设置

其中的Javascript版本最高位javascript1.3。

（2）直接内嵌到HTML页面中的标签区域中

JavaScript的基本成分—变量、函数等代码由说明（最好放在和之间），并通过属性language="javascript"说明标识中是使用的何种脚本语言。

（3）采用外部JS文件的方式

也可以将JavaScript文件放在HTML文件外面形成JavaScript的包含文件并给它个js 的文件扩展名（但在被包含的js文件中不能有等标签）。

在页面中引用该脚本

注意：此时的

7、注意浏览器有禁用JavaScript的设置

（1）在IE浏览器中执行JS会弹出警告提示信息框

（2）在IE系列浏览器中可以启用或者禁止执行JS代码

脚本”选项中进行设置定义。

（3）在Google Chrome 浏览器中可以启用或者禁止执行JS代码

选择“设置”菜单项目，然后在弹出的对话框的下半部分点击选择“显示高级设置”按钮。

在“高级设置”对话框中的“隐私设置”栏中点击“内容设置”按钮，展开“隐私内容设置”。

找到“JavaScript”栏目的内容设置选择框，根据自己的要求选择“允许”或者“禁止”。

8、在页面中应用<>标签或者JavaScript进行自动地识别并提示相关的信息

（1）应用

你禁用了浏览器对JavaScript的支持功能。

（2）应用JavaScript识别

你禁用了浏览器对JavaScript的支持功能。

body

这段代码的原理很简单，即如果执行了JavaScript代码也就是浏览器目前对JavaScript 提供支持，则会将id为NoJs的div隐藏，否则显示除相关的提示信息。

9、在浏览器的控制台中打印日志信息辅助调试跟踪程序

（1）console.log()方法

console.log("在浏览器控制台中输出的信息！");

（2）在IE9浏览器中查看输出的信息

（3）在Google Chrome 浏览器中查看输出的信息

10、JavaScript importScripts 之实现和用法

importScripts 用于在一个js 里面包含其他的js 文件。相当于C 里面的#include 。利用importScripts 这个强大的利器，我们就可以像C/C++/Java 一样写js 了。比如我们用js 写了几个文件A.js ，B.js ，C.js ，它们分别位于不同的路径下面。当我们在D.js 中需要引入上面3个js 文件的时候，就需要importScripts 这个强大的利器了：

比如在D.js 程序文件中需要应用A.js 、B.js 和C.js ，可以分别采用如下的方式对它们进行包含引用：

importScripts("script/A.js", "B.js", "http://helooooooo/C.js");

或者：importScripts("script/A.js");

importScripts("B.js");

importScripts("http://helooooooo/C.js");

1.1.2JavaScript中的数据类型

1、主要的数据类型

（1）5 种原始类型（primitive type）

1)undefined : 未定义的数据类型——当声明的变量未初始化时，Undefined类型只有一

个值undefined。

2)空值：由关键字null代表（null是空对象----- 没有任何属性和方法），Null类型只有

一个值null。

3)数值型（Number）：其中包括整型数和浮点型数。

4)逻辑布尔（Boolean）：即逻辑值---两个值true或flase。

5)字符串（string）：由单个或多个文本字符组成。

（2）3种复合数据类型

1)函数（Function）：代码块

2)对象（Object）：方法和属性的包装

3)数组（Array）

其中的Object本质上是由一组无序的“名:值”对所组成，在JavaScript中不支持开发人员自己所创建的任何新的数据类型的机制，所有的值最终都是以上数据类型之一。

2、undefined类型

（1）在IE5.5及以上版本中，undefined是一个已实现的系统保留字

因此可以用undefined来比较和运算。检测一个值是否是undefined的更简单方法可以是：

（2）undefined类型只有一个值，即undefined

当声明的变量或者对象未初始化时，该变量的默认值是undefined。var oTemp;前面一行代码声明变量oTemp，没有初始值。该变量将被赋予值undefined，即undefined 类型的字面量。也就是var oTemp;等同于var oTemp =undefined;

可以用下面的代码段测试该变量的值是否等于undefined：

var oTemp;

alert(oTemp == undefined);

这段代码将显示"true"，说明这两个值确实相等。还可以用typeof 运算符显示该变量的值是undefined：

var oTemp;

alert(typeof oTemp); //输出"undefined"

（3）值undefined 并不同于未定义的值

因此，typeof 运算符并不真正区分这两种值。考虑下面的代码：

var oTemp;

alert(typeof oTemp); //输出"undefined"

alert(typeof oTemp2); //输出"undefined"

前面的代码对两个变量输出的都是"undefined"，即使只有变量oTemp2 从未被声明过。如果对oTemp2 使用除typeof 之外的其他运算符的话，会引起错误，因为其他运算符只能用于已声明的变量上。例如，下面的代码将引发错误：

var oTemp;

alert(oTemp2 == undefined);

（4）当函数无明确返回值时，返回的也是值"undefined"，如下所示：

function testFunc() {

}

alert(testFunc() == undefined); //输出"true"

（5）识别变量或者对象是否未初始化

var fileToUploaded;

if(fileToUploaded){

window.alert("fileToUploaded对象已经初始化");

}

else{

window.alert("fileToUploaded对象未初始化");

}

（6）可以将某个变量或者对象设置为undefined

fileToUploaded = undefined;

if(!fileToUploaded){

alert("fileToUploaded 对象已经删除");

}

3、数字（Number ）类型

这种类型既可以表示 32 位的整数，还可以表示 64 位的浮点数。

（1）两个常值定义（特殊的 Number 值）

1)Number.MAX_V ALUE : 返回JavaScript能表达的最大的数。约等于1.79E+308。

2)Number.MIN_V ALUE : 返回JavaScript最接近0的数。约等于2.22E-308。

（2）与数字类型相关的全局方法

1)isFinite()：如果值是NaN/正无穷/负无穷，返回false，否则返回true。

2)parseFloat()：从字符串(的前缀部分)取一个浮点数。不成功则返回NaN。

4、布尔类型

5、字符串类型

（1）字符串字面量是由双引号（"）或单引号（'）声明的

而Java 则是用双引号声明字符串，用单引号声明字符。但是由于JavaScript没有字符类型，所以可使用这两种表示法中的任何一种。例如，下面的两行代码都有效：var sColor1 = "red";

var sColor2 = 'red';

（2）String 类型还包括几种字符字面量，Java、C 和Perl 的开发者应该对此非常熟悉。

6、利用typeof 运算符识别某个数据的数据类型

（1）主要的功能

但要注意的是typeof其实是操作符而不是函数，它的操作符返回的结果是一个变量数据类型相应的字符串表示形式。typeof 运算符有一个参数，即要检查的变量或值。

（2）代码示例

var sTemp = "test string";

alert (typeof sTemp); //输出"string"

alert (typeof 86); //输出"number"

（3）对变量或值调用typeof 运算符将返回下列值之一

String类型则返回“string”，Boolean类型则返回“Boolean”，Undefined类型则返回

“undefined”，Null类型则返回“null”。

1)undefined - 如果变量是Undefined 类型的

2)boolean - 如果变量是Boolean 类型的

3)number - 如果变量是Number 类型的

4)string - 如果变量是String 类型的

5)object - 如果变量是一种对象引用类型或Null 类型的（如果变量是个对象或者null，

返回的类型都是object）

（4）完全由typeof操作符来判断变量的数据类型是不可以的

因为对于Js中的变量，还存在如下情况：

var someOneVal;

alert( typeof someOneVal);

// 显示的结果为“undefined”，因为var someOneVal;等效于var someOneVal = undefined;

alert(typeof someTwoVal);

//显示的结果为“undefined”

如上例所示，对一个已经定义的变量但未对其进行初始化赋值和一个尚未定义的变量同时typeof的结果都是“undefined”，由此也可以看出如果需要判断变量数据类型是否是Undefined直接通过typeof操作符也是不严谨的。