javascript教程.docx

1、javascript教程Javascript教程作者：金云龙。坦克大战：1. Aptana插件安装1.1. Aptana插件简介 Aptana是一个非常强大,开源,JavaScript-focused的AJAX开发IDE。 它的特点包括： JavaScript,HTML,CSS语言的Code Assist功能。 Outliner(大纲)：显示JavaScript,HTML和CSS的代码结构。 支持各种js框架 jQuery Ext Dojo Prototype Yahoo User Interface1.2. Aptana插件安装1.2.1. 制作离线Aptana插件安装包 下载Aptana的

2、eclipse插件版： 解压缩下载的压缩包，得到一个aptana_update_024747的文件夹 进入到该文件夹中，只保留features和plugins两个文件夹，其余所有内容全部删除。上图中，选中部分删除！ 在当前文件夹下，右键新建一个文件夹，将其命名为eclipse。 将features和plugins两个文件夹，移动到eclipse文件夹中。 到此，离线Aptana插件安装包制作完毕。1.2.2. 安装方案一：适用于myeclipse8.5以上版本及eclipse3.2以上版本（不包含4.2版本） 进入到myeclipse或eclipse安装目录中 再进入到MyEclipse 10

3、文件夹中上图中，被选中的文件夹dropins，是专门用来安装离线插件包的！ 进入到dropins文件夹中，将制作好的离线Aptana插件安装包copy到此文件夹中。1.2.3. 安装方案二：适用于myeclipse8.5以下版本及eclipse3.2以上版本（不包含4.2版本） 将制作好的离线Aptana插件安装包copy至本地磁盘的任意目录下（目录中不能包含中文和空格，建议copy到myeclipse或eclipse安装目录中）。 进入到myeclipse或eclipse安装目录中。Myeclipse： eclipse： 在myeclipse或eclipse安装目录中，右键新建一个文件夹，命

4、名为links。 进入到新建的links文件夹中，右键新建一个文本文档，并编辑其内容。“path=”后面的内容为离线Aptana插件安装包的路径，并将“”修改为“/”或“”。 再将编辑好的文本文档的名称，修改为“aptana.link”（文件的名字自定义，不能包含中文及特殊字符；后缀名为“.link”）。1.2.4. 验证Aptana插件安装是否成功 启动myeclipse或eclipse。 验证方式一：myeclipse： eclipse： 验证方式二：myeclipse：eclipse：1.2.5. 配置Aptana插件 配置Aptana插件支持的浏览器：（myeclipse10版本后的不

5、能支持火狐浏览器） 配置Aptana插件代码提示： 设置Aptana插件在myeclipse或eclipse启动时，是否显示主页： 设置HTML文件、JS文件默认编辑器： 设置新建HTML文件的默认编码集：2. javascript入门2.1. javascript发展历史 在1995年由Netscape(网景)公司推出LiveScript。在此之前，没有所谓的前端技术。所有的处理都需要由服务器端进行操作。当时的目的是同时在客户端和服务器端使用。 由Netscape(网景)公司联合SUN公司完善LiveScrip。此时， Netscape(网景)公司将LiveScript更名为JavaScri

6、pt。目的是利用Java语言的流行。 微软在推出IE3.0时，使用了JavaScript的克隆版本，Jscript。 此时，JavaScript拥有多个版本：版本不统一的问题出现！ 在1997年，JavaScript 1.1由欧洲计算机制造商协会定义。此举，只为JavaScript语言定制统一的语言版本。该全新版本的推出，更名为ECMAScript。该版本由Netscape、Sun、微软等共同定义。 微软的IE浏览器产品的推广，间接推广了JavaScript。 JavaScript脚本语言已经成为浏览器的必要组件 JavaScript语言的版本问题越加突出 JavaScript语言的版本不统一

7、问题至今仍未解决！2.2. javascript的核心组成部分 ECMAScript ECMAScript是一种脚本语言的标准，ECMA-262标准。 该标准不仅限于JavaScript语言使用，例如ActionScript语言中的标准也为ECMA-262标准。 ECMAScript 描述了以下内容：语法、类型、语句、关键字、保留字、运算符和对象。 BOM：全称： Browser Object Model，译为浏览器对象模型。 DOM：全称： Document Object Model，译为文档对象模型。2.3. 在HTML或JSP页面中如何使用javascript脚本语言 可以在HTML页面

8、中的任何位置，使用标签来插入JavaScript。 在HTML页面中的不同位置，插入JavaScript。执行地效果各不相同（执行顺序是自上而下）。 script标签属性说明： type：text/javascript，指定使用的脚本语言。 language：JavaScript，也是指定使用的脚本语言。弃用！ src：载入外部JavaScript脚本代码（路径可以是绝对路径和相对路径）。2.4. ECMAScript入门 区分大小写：与Java一样。变量、函数名、运算符以及其他一切东西都是区分大小写的。 变量是弱类型的：与Java不一样。ECMAScript中的变量无特定的类型，定义变量时只

9、用var 运算符，可以将它初始化为任意的类型。变量的类型取决于给变量赋值的内容。 每行结尾的分号可有可无：与Java不一样。如果一条语句的结尾没有分号表明结束的话，前提是这样没有破坏代码的语义。最好的编写代码习惯是加入分号。 注释：与Java一样。支持”/”、”/*/”这几种常见的注释方式。 括号表明代码块：与Java一样。2.5. BOM简介2.5.1. 浏览器内置对象的介绍 Navigator对象：浏览器对象，包含了正在使用的 Navigator 的版本信息。反映了当前使用的浏览器的资料。JavaScript 客户端运行时刻引擎自动创建 navigator 对象。 Window对象：表示的

10、是浏览器窗口，最顶层的对象, window的属性对应于整个窗口 。 Document对象：文档对象是JavaScript中window和frames对象的一个属性,是显示于窗口或框架内的一个文档。描述当前窗口或指定窗口对象的文档。它包含了文档从到的内容。 Links对象：是一个数组，包含了文档中所有连接标记（包含href属性的标记和标记段里的标记），按照在文档中的次序，从0开始给每个连接标记定义了一个下标。 Archors对象：是一个数组，包含了文档中所有锚标记（包含name属性的标记），按照在文档中的次序，从0开始给每个锚标记定义了一个下标。 Forms对象：是一个数组，包含了文档中所有的表

11、单（）。要引用单个表单，可以用document.formsx，但是一般来说，人们都会这样做：在标记中加上“name=”.“”属性，那么直接用“document.”就可以引用了。 Images对象：图片对象document.images是一个数组，包含了文档中所有的图片（）。 Frame对象：是window对象。用最容易理解的话说，每一个HTML文件占用一个window对象，包括定义框架的网页（“框架网页”）。 Location对象：地址对象它描述的是某一个窗口对象所打开的地址。* window.location = “链接地址”; History对象：历史对象包含了用户已浏览的URL的信息，是

12、指历史对象指浏览器的浏览历史。* back()后退，跟按下“后退”键是等效的。* forward()前进，跟按下“前进”键是等效的。2.5.2. 浏览器内置对象的特点 每个对象有它自己的属性、方法和事件。 对象的属性是反映该对象某些特定的性质的。例如：字符串的长度、图像的长宽等等。 对象的方法能对该对象做一些事情。例如：表单的“提交”(Submit)等等。 对象的事件就能响应发生在对象上的事情。例如：提交表单产生表单的“提交事件”。2.6. DOM简介2.6.1. W3C对DOM的定义2.6.2. DOM的特点： DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，

13、这是表示和处理一个HTML或XML文档的常用方法。 DOM可以用于任何编程语言。 DOM技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等， DOM技术使得页面的交互性大大地增强。 DOM实际上是以面向对象方式描述的文档模型。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。 DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。 DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）。2.6.3. DOM规范级别 DOM Lev

14、el 1 DOM Level 1 是W3C于1998年10 月提出的第一个正式的 W3C DOM规范。它由DOM Core 和DOM HTML两个模块构成。前者提供了基于 XML的文档的结构图，以方便访问和操作文档的任意部分；后者添加了一些 HTML 专用的对象和方法，从而扩展了 DOM Core。DOM Level 1 的主要目标是合理规划文档的结构。它的最大缺陷就是忽略了事件模型，其中包括NN2 和IE3 中最简单的事件模型。 DOM Level 2 DOM Level 2 基于DOM Level 1 并扩展了 DOM Level 1，添加了鼠标和用户界面事件、范围、遍历（重复执行 DOM

15、文档的方法）、XML命名空间、文本范围、检查文档层次的方法等新概念，并通过对象接口添加了对CSS 的支持。同时引入几个新模块，用以处理新的接口类型，包括： DOM视图描述跟踪文档的各种视图（即CSS 样式化之前和CSS 样式化之后的文档）的接口； DOM事件描述事件的接口； DOM样式表描述处理基于CSS 样式的接口； DOM遍历和范围描述遍历和操作文档树的接口。 DOM Level 3 DOM Level 3 引入了以统一的方式载入和保存文档的方法（包含在新模块 DOM Load and Save 中）以及验证文档（DOM Validation）的方法，从而进一步扩展了 W3C DOM规范。

16、在DOM Level 3 中，DOM Core 被扩展为支持所有的 XML 1.0 特性，包括XML Infoset、XPath和XML Base，从而改善了DOM对XML的支持。 DOM Level 0 DOM Level 0 不是 W3C 标准。而仅仅是对在 Netscape Navigator 3.0 和 Microsoft Internet Explorer 3.0 中的等价功能性的一种定义。DOM Level 0 其实就是定义的一些Document对象的属性和方法。2.6.4. DOM的组成部分 核心DOM：指定类属类型，将带有标记的文档看成树状结构并据此对文档进行相关操作。 HTM

17、L DOM：提供用于操作HTML 文档以及类似于JavaScript 对象模型语法的功能部件，在核心DOM的基础上支持对所有HTML 元素对象进行操作。 DOM CSS：提供脚本编程实现CSS 的接口。3. javascript基础3.1. 函数3.1.1. 函数的定义所谓函数，本质上是一种代码的分组形式。我们可以通过这种形式赋予某组代码一个名字，便于日后重用时调用。一般来说，函数声明通常由以下几部分组成： function 子句 函数名称 函数所需的参数，参数之间用逗号分隔 函数索要执行的代码块，我们称之为函数体 return 子句。函数通常都会有返回值，如果某个函数没有显式的返回值，我们就

18、会默认它的返回值是undefined 一个函数只能有一个返回值，如果我们需要同时返回多个值，可以考虑将其放进一个数组里，以数组元素的形式返回。3.1.2. 参数（形参与实参） 形参：出现在函数定义文法中的参数列表是函数的形式参数，简称形参。 实参：函数调用时实际传入的参数是函数的实际参数，简称实参。 一般情况下，形参与实参的个数是相同的。但在JavaScript中并不强求这一点，在特殊情况下，函数的形参和实参的个数可以不相同。这种情况下使用Arguments 对象。3.1.3. javascript定义函数的三种方式 普通方式 语法：function 函数名(参数) 函数体 function

19、add(a,b) return a+b; alert(add(3,4); 构造函数方式 语法：var 变量名 = new Function(参数，函数体);var add = new Function(a,b,return a+b;);alert(add(2,4,1); 直接量定义函数 语法：var 变量名 = function(参数) 函数体 var result = function(a,b)return a+b;alert(result(1,2);3.2. javascript事件3.3. ECMAScript3.3.1. 变量ECMAScript中的变量是用var运算符(variabl

20、e的缩写)加变量名定义的。例如：var test = hello;在这个例子中，声明了变量test，并把它的值初始化为”hello”。由于ECMAScript是弱类型的，所以解释程序会为test自动创建一个字符串值，无需明确的类型声明。还可以用一个var语句定义两个或多个变量：var test1 = hello , test2 = world ;用一个var也可以定义两个或多个具有不同类型的变量：var test = hello , age = 25 ;与Java不同的是，ECMAScript中的变量并不一定要初始化：var test;此外，EMCAScript中，一个变量可以存放不同类型的值

21、，这是弱类型的优势：var test = hello ; alert(test) /输出 hellotest = 55 ;alert(test) /输出 55但是好的编码习惯是始终存放相同类型的值。ECMAScript另一个有趣的是在使用变量之前不必声明：var test1 = hello ; test2 = test1 + world ; alert(test2) /输出 hello world在上面这段代码中，变量test2并没有用var运算符定义，但可以使用，这里只是插入了它，就好像声明过了一样。ECMAScript的解释程序遇到未声明过的标识符时，用该变量名创建一个全局变量，并将其初始

22、化为指定的值。这是该语言的便利之处，最好的习惯是像使用其他程序设计语言一样，总是声明所有变量。3.3.2. 关键字ECMAScript支持一套关键字，这些关键字标识了ECMAScript语句的开始和结尾。关键字是保留的，不能用作变量名或函数名。3.3.3. 保留字ECMAScript还定义了一套保留字，保留字在某种意义上是为将来的关键字而保留的单词。3.3.4. 原始值和引用值在ECMAScript中，变量可以存放两种类型的值，即原始值和引用值。 原始值，是存储在栈中的简单数据段，也就是说，它们的值直接存储在变量访问的地址。 引用值，是存储在栈中的对象，也就是说，存储在变量出的值是一个指针，指

23、向存储对象的内存处。3.3.5. 原始类型EMCAScript有五种原始类型，即Undefined、Null、Boolean、Number和String。3.3.5.1. typeof运算符typeof运算符有一个参数，即要检查的变量或值。例如： var temp = test string ; alert(typeof temp) /输出 “string” alert(typeof 95) /输出 “Number”对变量或值调用typeof运算符将返回下列值之一： “undefined”，如果变量是Undefined类型。 “boolean”，如果变量是Boolean类型。 “number”

24、，如果变量是Number类型。 “string”，如果变量是String类型。 “object”，如果变量是一种引用类型或Null类型的。3.3.5.2. Undefined类型Undefined类型只有一个值，即undefined。当声明的变量未初始化时，该变量的默认值是undefined。 var temp ; /temp的类型就是Undefined类型值得注意的是，值Undefined并不同于未定义的值。但是，typeof运算符并不真正区分这两种值。 var temp1 ; alert(typeof temp1) ; /输出 “undefined” alert(typeof temp2)

25、 ; /输出 “undefined”这里的temp2变量是未被声明过的。如果对temp2使用除typeof之外的运算符会报错，原因是其他运算符只能用于已声明的变量上。当函数无明确返回值时，返回的也是值undefined。3.3.5.3. Null类型Null类型也只有一个值null，即它的字面量。值undefined实际上是从值null派生来的，因此ECMAScript把它们定义为相等的。 alert(null = undefined) /输出 true尽管这两个值相等，但它们的含义不同。undefined是声明了变量但未对其初始化，null则用于表示尚未存在的对象。3.3.5.4. Bool

26、ean类型Boolean类型是ECMAScript中最常用的类型之一。它有两个值true和false。即使false不等于0，0也可以在必要时被转换成false。3.3.5.5. Number类型（不好理解）Number类型是ECMAScript中最为特殊的。这种类型既可以表示32位整数，也可以表示64位的浮点数。整数也可以被表示为八进制或十六进制的字面量。八进制字面量的首数字必须是0，其后的数字可以是任何八进制数字（0到7），如下： var iNum = 070 ; /070 is equal to 56 in decimal要创建十六进制的字面量，首位数字必须为0，其后接字母x，然后是任意

27、的十六进制数字（0到9和A到F）。这些字母可以是大写，也可以小写。例如： var iNum = 0x1f ; /0x1f is equal to 31 in decimal注：尽管所有整数都可表示为八进制或十六进制的字面量，但所有数学运算返回的都是十进制结果。要定义浮点值，必须包括小数点和小数点后的一位数字。这被看作浮点数字面量。例如： var fNum = 5.0 ;注：浮点字面量的有趣之处在于，用它进行计算前，真正存储的是字符串。对于非常大或非常小的数，可以用科学记数法表示浮点值。采用科学记数法，可以把一个数表示为数字（包括十进制数字）加e（或E），后面加乘以10的倍数。几个特殊值也被定义

28、为Number类型的。前两个是Number.MAX_VALUE和Number.MIN_VALUE，它们定义了Number值集合的外边界。所有ECMAScript数都必须在这两个值之间。不过计算生成的数值结果可以不落在这两个数之间。当计算生成的数大于Number.MAX_VALUE时，它将被赋予值Number.POSITIVE_INFINITY，意味着不再有数字值。同样，生成的数值小于Number.MIN_VALUE的计算也会被赋予值Number.NEGATIVE_INFINITY，也意味着不再有数字值。如果计算返回的是无穷大值，那么生成的结果不能再用于其他计算。事实上，有专门的值表示无穷大，即

29、infinity。Number.POSITIVE_INFINITY的值为infinity，Number.NEGATIVE_INFINITY的值为-infinity。由于无穷大数可以是正数也可以是负数，所以可用一个方法判断一个数是否是有穷的。可以对任何数调用isFinit()方法，以确保该数不是无穷大。最后一个特殊值是NaN，表示非数（Not a Number）。这种情况发生在类型（Stirng、Boolean等）转换失败时。与无穷大值一样，NaN也不能用于算术计算。NaN的另一个奇特之处在于，它与自身不想等。出于这种原因，不推荐使用NaN值本身。函数isNaN()会做得很好。3.3.5.6.

30、String类型String类型的独特之处在于，它是唯一没有固定大小的原始类型。可以用字符串存储0或更多的Unicode字符，由16位整数表示。字符串字面量是由双引号或单引号声明的。而Java则是用双引号声明字符串，用单引号声明字符。但是，由于ECMAScript没有字符类型，所以可使用这两种表示法中的任何一种。下面的两行代码都有效： var sColor1 = blue ; var sColor2 = blue ;String类型还包括几种字符字面量：字 面 量含 义n换行t制表符b空格r回车f换页符反斜杠单引号双引号0nnn 八进制代码nnn（n是0到7中的一个八进制数字）表示的字符xnn 十六进制代码nn（n是0到F中的一个十六进制数字）表示的字符unnnn十六进制代