javascript
JS即javascript,更多含义,请参阅JS(多义词)。
目 录
1基本信息
JavaScript是一种基于对象和
事件驱动并具有相对安全性的客户端
脚本语言。同时也是一种广泛用于客户端
Web开发的脚本语言,常用来给
HTML网页添加动态功能,比如响应用户的各种操作。它最初由网景公司(Netscape)的Brendan Eich设计,是一种
动态、弱类型、基于原型的语言,内置支持类。JavaScript是
Sun公司的
注册商标。
Ecma国际以JavaScript为基础制定了
ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:
ECMAScript,
文档对象模型,
字节顺序记号。
Netscape公司在最初将其脚本语言命名为LiveScript。在
Netscape在与
Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”
[1]
,因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计
原则源自Self和Scheme
[2]
。JavaScript与
Java名称上的近似,是当时网景为了
营销
[3]
考虑与
Sun公司达成协议的结果。为了取得
技术优势,微软推出了
JScript
脚本语言。Ecma国际(前身为
欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。现两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言,而非是作为给程序人员的编程语言来推广和宣传,但是JavaScript具有非常丰富的特性。
前身是 Live Script
正式名称:ECMAScript
ECMAScript-262是JavaScript标准,基于网景(Netscape)公司提出JavaScript语言和微软公司提出的JScript语言
ECMA开始于1996年,在1997年7月,采纳了首个版本,1998年,该标准成为了国际ISO标准
正式名称:ECMAScript
ECMAScript-262是JavaScript标准,基于网景(Netscape)公司提出JavaScript语言和微软公司提出的JScript语言
ECMA开始于1996年,在1997年7月,采纳了首个版本,1998年,该标准成为了国际ISO标准
2作者简介
Brendan Eich
布兰登·艾奇(Brendan Eich,1964年~),JavaScript
[4]
的发明人,从2007年开始在
Mozilla公司担任首席技术长官(Chief Technology Officer)。
3组成部分
一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:核心(ECMAScript)、文档对象模型(Document Object Model,简称
DOM)、浏览器对象模型(Browser Object Model,简称
BOM)。
4相关概念
语句
赋值语句、switch选择语句、while循环语句、for循环语句、for each循环语句、do...while循环语句、break循环中止语句、continue循环中断语句、with语句、try…catch语句、if语句(if..else,if…else if…)。
函数
函数是命名的语句段,这个语句段可以被当作一个整体来引用和执行。使用函数要注意以下几点:
1)函数由关键字function定义(也可由Function构造函数构造)。
2)使用function关键字定义的函数在一个作用域内是可以在任意处
调用的(包括定义函数的语句前);而用var关键字定义的必须定义后才能被调用。
3)函数名是调用函数时引用的名称,区分大小写,调用函数时不可写错函数名。
4)参数表示传递给函数使用或操作的值,它可以是常量,也可以是变量,也可以是函数,在函数内部可以通过arguments对象(arguments对象是一个伪数组,属性callee引用被调用的函数)访问所有参数。
5)return语句用于返回表达式的值。
6)yield语句扔出一个表达式,并且中断函数执行直到下一次调用next。
一般的函数都是以下格式:
1
2
3
|
function
myFunction(params){
//执行的语句
}
|
函数表达式:
1
2
3
4
5
6
7
|
var
myFunction=
function
(params){
//执行的语句
}
var
myFunction =
function
(){
//执行的语句
}
myFunction();
//调用函数
|
匿名函数,它常作为参数在其他函数间传递:
1
2
3
|
window.addEventListener(
'load'
,
function
(){
//执行的语句
},
false
);
|
对象
JavaScript的一个重要功能就是
面向对象的功能,通过基于对象的程序设计,可以用更直观、模块化和可重复使用的方式进行程序开发。
一组包含数据的属性和对属性中包含数据进行操作的方法,称为对象。比如要设定网页的背景颜色,所针对的对象就是document,所用的属性名是bgcolor,如document.bgcolor="blue",就是表示使背景的颜色为蓝色。
内置对象
JavaScript 字符串(String)对象
字符串是 JavaScript 的一种基本的数据类型。需要注意的是,JavaScript 的字符串不可变(immutable),String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法,返回的是全新的字符串,而不是修改原始字符串。
String 对象的 length 属性声明了该字符串中的字符数。
String 类定义了大量操作字符串的方法,一般分为这样几类:查找子字符串、截取,分割和拼接字符串、匹配正则表达式、改变字符串样式等。
JavaScript Date(日期)对象
Date 对象用于处理日期和时间,Date 对象会自动把当前日期和时间保存为其初始值。
Date 对象的大部分方法是以下几类:
getXXX:获取 年、月、日、时、分、秒、等等。
setXXX:设置 年、月、日、时、分、秒、等等。
toXXXString:转成一定格式的字符串。
字符串是 JavaScript 的一种基本的数据类型。需要注意的是,JavaScript 的字符串不可变(immutable),String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法,返回的是全新的字符串,而不是修改原始字符串。
String 对象的 length 属性声明了该字符串中的字符数。
String 类定义了大量操作字符串的方法,一般分为这样几类:查找子字符串、截取,分割和拼接字符串、匹配正则表达式、改变字符串样式等。
JavaScript Date(日期)对象
Date 对象用于处理日期和时间,Date 对象会自动把当前日期和时间保存为其初始值。
Date 对象的大部分方法是以下几类:
getXXX:获取 年、月、日、时、分、秒、等等。
setXXX:设置 年、月、日、时、分、秒、等等。
toXXXString:转成一定格式的字符串。
JavaScript Array(数组)对象
数组对象的作用是:使用单独的变量名来存储一系列的值。
数组的常用属性是:length,代表了这个数组中元素的个数。
数组的常用方法分这么几类:排序、添加和删除元素、拼接另一个数组、转成字符串。其中添加元素和移除元素的几个方法还有模拟堆栈或队列这些数据结构的作用。
JavaScript Boolean(逻辑)对象
Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。
在 JavaScript 中,布尔值是一种基本的数据类型。Boolean 对象是一个将布尔值打包的布尔对象。Boolean 对象主要用于提供将布尔值转换成字符串的 toString() 方法。当调用 toString() 方法将布尔值转换成字符串时(通常是由 JavaScript 隐式地调用),JavaScript 会内在地将这个布尔值转换成一个临时的 Boolean 对象,然后调用这个对象的 toString() 方法。
JavaScript Math(算数)对象
Math(算数)对象的作用是:执行常见的算数任务。
Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。(相当于静态类和静态方法)
Math 对象的常用属性都是数学相关的常量属性,如圆周率π、2的平方根,算数常量e(自然对数的底数,约等于2.718)。
Math 对象中最常用的方法有这样一些:向上(向下)取整、四舍五入取整、随机数、返回2个数中的大数或小数。
JavaScript RegExp 对象
什么是 RegExp?
RegExp 是正则表达式的缩写。当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。您可以规定字符串中的检索位置,以及要检索的字符类型,等等。
这个知识点,相对还是比较繁杂的,想熟练掌握是需要花费一些功夫的,具体请看 JS 手册。
JavaScript Global 对象
这是一个固有对象,目的是把所有全局方法集中在一个对象中。Global 对象不能用 new 运算符创建。它在 Scripting 引擎被初始化时创建,并立即使其方法和属性可用。
属性:Infinity 属性 | NaN 属性
方法:escape 方法 | eval 方法 | isFinite 方法 | isNaN 方法 | parseFloat 方法 | parseInt 方法 | unescape 方法
数组对象的作用是:使用单独的变量名来存储一系列的值。
数组的常用属性是:length,代表了这个数组中元素的个数。
数组的常用方法分这么几类:排序、添加和删除元素、拼接另一个数组、转成字符串。其中添加元素和移除元素的几个方法还有模拟堆栈或队列这些数据结构的作用。
JavaScript Boolean(逻辑)对象
Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。
在 JavaScript 中,布尔值是一种基本的数据类型。Boolean 对象是一个将布尔值打包的布尔对象。Boolean 对象主要用于提供将布尔值转换成字符串的 toString() 方法。当调用 toString() 方法将布尔值转换成字符串时(通常是由 JavaScript 隐式地调用),JavaScript 会内在地将这个布尔值转换成一个临时的 Boolean 对象,然后调用这个对象的 toString() 方法。
JavaScript Math(算数)对象
Math(算数)对象的作用是:执行常见的算数任务。
Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。(相当于静态类和静态方法)
Math 对象的常用属性都是数学相关的常量属性,如圆周率π、2的平方根,算数常量e(自然对数的底数,约等于2.718)。
Math 对象中最常用的方法有这样一些:向上(向下)取整、四舍五入取整、随机数、返回2个数中的大数或小数。
JavaScript RegExp 对象
什么是 RegExp?
RegExp 是正则表达式的缩写。当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。您可以规定字符串中的检索位置,以及要检索的字符类型,等等。
这个知识点,相对还是比较繁杂的,想熟练掌握是需要花费一些功夫的,具体请看 JS 手册。
JavaScript Global 对象
这是一个固有对象,目的是把所有全局方法集中在一个对象中。Global 对象不能用 new 运算符创建。它在 Scripting 引擎被初始化时创建,并立即使其方法和属性可用。
属性:Infinity 属性 | NaN 属性
方法:escape 方法 | eval 方法 | isFinite 方法 | isNaN 方法 | parseFloat 方法 | parseInt 方法 | unescape 方法
事件
用户与网页交互时产生的操作,称为事件。事件可以由用户引发,也可能是页面发生改变,甚至还有你看不见的事件(如Ajax的交互进度改变)。绝大部分事件都由用户的动作所引发,如:用户按鼠标的按键,就产生click事件,若鼠标的指针在链接上移动,就产生mouseover事件等等。在JavaScript中,事件往往与事件处理程序配套使用。
传统的方法就是定义
元素的on…事件,它就是
W3C的方法中的事件参数前加一个“on”。而IE的事件模型使用attachEvent和dettachEvent对事件进行绑定和删除。
JavaScript中事件还分捕获和冒泡两个阶段,但是传统绑定只支持冒泡事件。
变量
常用类型
Object:对象
Array:数组
Number:数
Boolean:
布尔值,只有true和false两个值,是所有类型中占用内存最少的
null:一个空值,唯一的值是null,表空引用
undefined:没有定义或赋值的变量
NaN:非数字类型
命名形式
一般形式是:
var <变量名表>;
其中,var是javascript的保留字,表面接下来是变量说明,变量名表是用户自定义标识符,变量之间用逗号分开。和C++等程序不同,在javascript中,变量说明不需要给出变量的数据类型。此外,变量也可以不说明而直接使用。
作用域
变量的作用域由声明变量的位置决定,决定哪些脚本命令可访问该变量。在函数外部声明的变量称为全局变量,其值能被所在
HTML文件中的任何脚本命令访问和修改。在函数内部声明的变量称为局部变量。只有当函数被执行时,变量被分配临时空间,函数结束后,变量所占据的空间被释放。局部变量只能被函数内部的语句访问,只对该函数是可见的,而在函数外部是不可见的。
运算符
javascript提供了丰富的运算功能,包括算术运算、
关系运算、逻辑运算和连接运算。
1.算术运算符
javascript中的
算术运算符有单目运算符和双目运算符。双目运算符包括:+(加)、-(减)、*(乘)、/(除)、%(取余)、|(按位或)、&(按位与)、<<(左移)、>>(右移)等。单目运算符有:-(取反)、~(取补)、++(递加1)--(递减1)等。
2.关系运算符
关系运算符又称比较运算,运算符包括:<(小于)、<=(小于等于)、>(大于)、>=(大于等于)、==(等于)和!=(不等于)以及 ===) 和 !==。
关系运算的运算结果为布尔值,如果条件成立,则结果为true,否则为false。
3.逻辑运算符
逻辑运算符有:&&(逻辑与)、||(逻辑或)、!(取反,逻辑非)、^(逻辑异或)。
4.字符串连接运算符
连接运算用于
字符串操作,运算符为+(用于强制连接),将两个或多个字符串连结为一个字符串。
5.三目操作符?:
三目操作符“?:”格式为:
操作数?表达式1:表达式2
三目操作符“?:”构成的表达式,其逻辑功能为:若操作数的结果为true,则表述式的结果为表达式1,否则为表达式2。例如max=(a>b)?a:b;该语句的功能就是将a,b中的较大的数赋给max。
相关规则
在JavaScript中,“==="是全同运算符,只有当值相等,数据类型也相等时才成立。
等同运算符“=="的比较规则:
当两个运算数的类型不同时:将他们转换成相同的类型。
1)一个数字与一个
字符串,字符串转换成数字之后,进行比较。
2)true转换为1、false转换为0,进行比较。
3)一个对象、
数组、函数与 一个数字或字符串,对象、数组、函数转换为原始类型的值,然后进行比较。(先使用valueOf,如果不行就使用toString)
4)其他类型的组合不相等。
想两个运算数类型相同,或转换成相同类型后:
1)2个字符串:同一位置上的字符相等,2个字符串就相同。
2)2个数字:2个
数字相同,就相同。如果一个是NaN,或两个都是NaN,则不相同。
3)2个都是true,或者2个都是false,则相同。
5)2个
null,或者2个都是未定义的,那么他们相等。
而“===”是全同运算符,全同运算符遵循等同运算符的比较规则,但是它不对运算数进行类型转换,当两个运算数的类型不同时,返回false;只有当两个运算数的类型相同的时候,才遵循等同运算符的比较规则进行比较。
例如:null==undefined 会返回真, 但是null===undefined 就会返回假!
表达式
表达式是指将常量、变量、函数、运算符和括号连接而成的式子。根据运算结果的不同,表达式可分为算术表达式、字符表达式、和逻辑表达式。
脚本语言
不同于
服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说JavaScript是在用户的浏览器上运行,不需要服务器的支持而可以独立运行。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担,而与此同时也带来另一个问题:安全性。而随着服务器的强壮,虽然程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。
JavaScript是一种
脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。解释语言的弱点是安全性较差,而且在JavaScript中,如果一条运行不了,那么下面的语言也无法运行。而且由于每次重新加载都会重新解译,加载后,有些代码会延迟至运行时才解译,甚至会多次解译,所以速度较慢。
与其相对应的是编译语言,例如Java。Java的源代码在传递到客户端运行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或
解释器,它可以通过
编译器或解释器实现独立于某个特定的平台编译代码的束缚。但是它必须在服务器端进行编译,这样就拖延了时间。但因为已经封装,所以能保证安全性。
Javascript库
库,指得是可以方便应用到现有开发体系中的、现成的代码资源。库不仅为大部分日常的DOM脚本编程工作提供了快捷的解决方案,而且也提供了许多独特的工具。虽然库使用起来很方便,但它们也并非能解决你所有的问题。在使用库之前,一定要保证真正理解javascript的DOM原理。
这些库一般是一个(或多个)js(Javascript的缩写)文件,只要把他们导入你的网页就能使用了。
常用的库有:
dojo:一个巨大的库,包括的东西很多,dijit和dojox是dojo的扩展,几乎你想要的各种javascript程序都包括了。
prototype:一个非常流行的库,使用了原型链向javascript中添加了很多不错的函数
YUI:(YahooYUI库)yahoo!用户界面,非常实用,提供各种解决方案。
ExtJs:组件非常丰富,皮肤也很漂亮,动画效果也丰富。
5基本特点
网页嵌入技术有:Javascript、VBScript、Document Object Model(DOM,
文档对象模型)、Layers和Cascading Style Sheets(CSS,
层叠样式表),这里主要讲Javascript。
Javascript就是适应动态
网页制作的需要而诞生的一种新的编程语言,如今越来越广泛地使用于Internet网页制作上。Javascript是由 Netscape公司开发的一种脚本语言(scripting language),或者称为描述语言。在HTML基础上,使用Javascript可以开发交互式
Web网页。Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加精彩的内容。运行用Javascript编写的程序需要能支持Javascript语言的浏览器。Netscape公司 Navigator 3.0以上版本的浏览器都能支持Javascript程序,
微软公司Internet Explorer 3.0以上版本的浏览器基本上支持Javascript。微软公司还有自己开发的Javascript,称为JScript。Javascript和Jscript基本上是相同的,只是在一些细节上有出入。 Javascript短小精悍,又是在客户机上执行的,大大提高了网页的浏览速度和交互能力。 同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交
表单做即时的检查,无需浪费时间交由CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意。
6主要工具
开发工具
在如今网络开发方面,JavaScript起了很关键的作用;像
jQuery,
MooTools,
Prototype等等JavaScript框架以及其它JavaScript类库让我们的生活轻松了不少。但是随着Rich Internet Applications(RIA)的面世及迅速应用,书写更强大,更坚实可靠的JavaScript的需要日益迫切。
比较常用的开发框架处理前面提到的
jQuery,
MooTools,
Prototype外,还有如YUI Library、DevExtreme、Bookmarklet Generator、Dojo Toolkit、Modernizr等。
测试工具
JSLint –JavaScript的验证器
JSLint取得一个JavaScript源代码并对其扫描。如果发现问题,它送回信息描述问题状况及在源代码中的大概位置。问题不一定就出在句法上,不过常常正是这里出错。JSLint查看一些风格约定和结构问题,它证明不了程序是否正确。它只是提供了另一双眼睛来帮助发现问题。
JsUnit
JsUnit是一个客户端(内浏览器)JavaScript单元测试框架。它其实是JUnit给JavaScript的一个口岸。其中还有一个平台来在多个浏览器上以及运行不同操作系统的多个机器上的自动执行测试。
YUI Test
YUI Test是一个测试框架,它针对基于浏览器的JavaScript解决方案。你可以用YUI Test在JavaScript 解决方案上轻松添加单元测试。
Obtrusive JavaScript Checker
可作为Firefox扩展,Greasemonkey用户脚本,以及Ubiquity命令;Obtrusive JavaScript Checker是一种可以扫过页面上所有元素的工具,发现带有行内事件的HTML元素(这是有危害性的,JavaScript应该是不张扬的)时,它给这部分加红边使其凸显。
Crosscheck
Crosscheck是一个开源测试框架,验证内浏览器JavaScript代码。它帮助你确保代码可以在Internet Explorer和Firefox等种种不同的浏览器上运行,而这些浏览器都不需要安装。
JSLitmus
JSLitmus是一个轻量级工具用来制作JavaScript的特定标准测试。
JavaScriptMVC的测试插件
JavaScriptMVC的测试库提供事件模拟,单元测试,Ajax 夹具,和一个控制台程序。
调试工具
Javascript调试工具包
JavaScript调试工具包是一种跨浏览器调试JavaScript的eclipse plugin,它可以在IE,Firefox,Safari,Chrome,Opera甚至是移动浏览器上调试JavaScript。
Firebug
作为最受欢迎的网页开发程序工具,
Firebug是
Firefox的一个插件,可以用它在任何网页上现时编辑,调试和监控CSS, HTML, 和JavaScript。它提供给JavaScript登陆和调试控制台一些有用的功能如AJAX requests logging,JavaScript解释器,DOM explorer等等。Firebug Lite 可以在IE, Opera, 和Safari上使用。
Venkman
Venkman为基于Gecko的浏览器提供功能强大JavaScript调试环境。这个调试器以Firefox & Mozilla插件的形式使用。可以在用户界面上和控制台命令中使用
断点管理,调用栈检查,变量/对象检查等功能,可以让你以最习惯的方式调试。
NitobiBug
NitobiBug是一种基于浏览器的JavaScript对象记录和检查工具——与Firebug作用相似。NitobiBug在可以在不同的服务器(IE6+,
Safari,
Opera, Firefox)上运行以提供开发各种Ajax应用程序一致且功能强大的工具。
DamnIT
DamnIT是一种免费服务,当用户在网页上遇到JavaScript错误时它会给你发送电子邮件。
JS Bin
JS Bin是一种在线网络应用程序,为帮助JavaScript开发者在一定情景里测试代码片段以及协作调试代码而特别设计。你可以用JS Bin在线编辑测试JavaScript和HTML代码。一旦完成,你可以将URL保存并发送给同伴来进行审查或获得帮助。
Blackbird
许多JavaScript开发者仅仅使用alert()来显示各种信息调试代码。Blackbird在JavaScript上提供了记录信息的简单方式以及一个引人注意的控制台程序来察看并过滤信息。
压缩工具
Online Javascript Compression Tool
一个可以用一些压缩算法如JSMin 和Packer压缩JavaScript文件的在线JavaScript压缩器。压缩的JavaScript文件是生产环境中的理想文件,因为它们常常将文件大小减小30-90%。在很大程度上,文件尺寸的缩小是通过除去网页浏览者或访问者不需要的注释和多余的空格字符来实现的。
Scriptalizer
一个将多个JavaScript文件组合为一个文件的在线工具。
Dojo ShrinkSafe
一种命令行实用程序,允许你用
浏览器缩小文件大小,从而缩短
响应时间。
Dojo压缩器不是建立在脆弱的规则表达式基础上的。它基于来自莫兹拉专案的JavaScript引擎。由于一个基于真正的parse stream,Dojo压缩器比基于规则表达式的工具可以更好体现代符(变量名等等)的环境。
YUI Compressor
The YUI Compressor是一种JavaScript压缩器。去除注释和空格之外,它还可以用最小可用变量名混淆局部变量。即使在使用‘eval’或‘with’之类构造(在这些情况下压缩并不合适),这种混淆也是安全的。与jsmin相比,它平均节省20%。
文件记载
jGrouseDoc
jGrouseDoc可以从源代码中的注释生成
API文件。用户可以用这个工具记载需要的所有构造——不仅有函数和变量,还有类文件包,界面,命名空间,包和其它。使用那种JavaScript框架是无关紧要的——用户可以不采取框架或工具强加的方式而以自己希望的方式记录代码,
格式化工具
JavaScript代码美化工具
这个美化工具可处理散乱或压缩的JavaScript代码,不断对其进行快速的格式化并使其可读。
JSDoc Toolkit
JavaScript的一种文件产生器,以JavaScript形式写成;它自动从加注的JavaScript源代码中生成格式模版化,多页面HTML(或XML, JSON, 抑或其它文本)。
浏览器扩展
Firefox, Flock & Seamonkey的网络开发人员扩展
网络开发人员拓展在浏览器中增加了一个菜单和工具条,其中包含许多网络开发工具包括能使你的XHTML生效,发现JavaScript/CSS的错误,网页结构可视化,测试网络表单,改变运行中的XHTML,检查HTTP头信息等等。
Opera Dragonfly
Opera Dragonfly 是Opera浏览器的跨设备,跨平台调试环境—调试JavaScript, 检查编辑CSS和DOM,并且查看移动设备或计算机上的错误。
IE6/7的开发者工具条
微软的英特网浏览器开发者工具条为网页的快速创建,理解和故障诊断提供了各种的工具。
其它相应工具
Google的AJAX APIs Playground
AJAX API Playground装载有Google JavaScript APIs(Maps, Search, Feeds, Calendar, Visualization, Language, Blogger, Libraries和Earth,等等)例子,你可以编辑运行这些例子帮助你探究Google的APIs可提供的功能。同时也还有保存和输出功能。你可以用保存功能保持编辑的例子以留待以后使用。而输出功能可用来修改例子并把代码公布在一个永久的URL上。
QuirksMode –相容性表
检查CSS2, CSS3, DOM Core, DOM HTML, DOM CSS, DOM Events 和CSS Object Model View主要浏览器相容性状态的最受欢迎的出处。
HTML到JavaScript转换器
HTML到JavaScript转换器获得置标并将它转换成一系列可以在JavaScript块中使用的document.write()申明。
Glimmer
Glimmer是一种
桌面应用软件,可以用它利用jQuery库的作用在网页上轻松制作交互式元素。可以用它轻松制作交错感受如旋转相册/报头,下拉导航,悬停效果,或自定义动画。
jQuery Function Builder
你可以用这个工具很快建立一个函数集,当页面加载完毕/准备完毕时,调用该函数集。
JavaScript Regex Generator
一个制作
正则表达式的在线工具。
7HTTP监控
Fiddler
TamperData
TamperData是一个追踪并修改http/https请求的Firefox扩展。可以用它做基于网络的应用程序的安全测试,追踪请求/回应。
Live HTTP Headers
可以在浏览的时候查看网页的HTTP headers。可以用Live HTTP Headers调试网页应用程序,找出远端网站使用的是那种网站服务器,或者查看远端网站发送的小数据文件。
8开发环境
Aptana Studio
Aptana Studio是一个完整的网络开发环境。它提供有JavaScript代码自动完成和调试,HTML/CSS/JavaScript代码提示,以及对重要的Ajax类库的支持。Aptana Studio甚至给你页面上所有的,包括你自己的JavaScript提供代码提示。
Komodo Edit
Komodo Edit是一种免费开放的源编辑程序。它提供自动完成,调用提示,多种语言支持,语法高亮颜色显示,语法检查,Vi emulation,
Emacs快捷键绑定等等功能。扩展Komodo Edit是其最实用的功能之一。你会发现各种对
[3]
者有用的扩展(如JSLint plugin for Komodo, Venkman JavaScript Debugger,等等)。
Spket IDE
Spket IDE是JavaScript和
XML开发功能强大的工具包。JavaScript, XUL/XBL and Yahoo! Widget开发功能强大的编辑器。JavaScript编辑器有代码完成,语法高亮显示和内容概要等功能,这些功能帮助开发者高效制作出有效的JavaScript代码。Spket IDE为非商业用途免费提供。
9使用技巧
Javascript加入网页有两种方法:直接方式和引用方式。
直接方式
直接调用分为两种形式:代码块和代码行
代码行引用:
<a href="javascript:alert(1)">aa</a>
这种方式应用比较简单,直观,多用于测试
代码块:
这是最常用的方法,大部分含有Javascript的网页都采用这种方法,例如:
1
2
3
4
5
|
<
script
type
=
"application/javascript"
>
<!--
document.write("这是Javascript!采用直接插入的方法!");
//-Javascript结束-->
</
script
>
|
在这个例子中,我们可看到一个新的
标签:<script>……</script>,而<script language="Javascript"> 用来告诉浏览器这是用Javascript编写的程序,需要调动相应的
解释程序进行解释。(w3c已经建议使用新的标准:<script type="application/javascript">)
HTML的注释标签<!--和-->:用来去掉浏览器所不能识别的Javascript
源代码的,这对不支持Javascript 语言的浏览器来说是很有用的。
注意在非xhtml文档中插入script标签时,如果不是引用外部文件,应该在script内加上cdata声明,避免大于和小于运算符引起的浏览器解析错误
//-Javascript结束:双斜杠表示Javascript的注释部分,即从//开始到行尾的字符都被忽略。 至于程序中所用到的document.write()函数则表示将括号中的文字输出到窗口中去,这在后面将会详细介绍。 另外一点需要注意的是,<script>……</script>的位置并不是固定的,可以包含在<head>……</head> 或<body>…..</body>中的任何地方。
还有一个更高级版本的嵌入
脚本,它使用了HTML中的CDATA语法(Character Data,就是把CDATA中的文本全部当作纯文本处理,除非遇到CDATA的结束)
1
2
3
|
<
script
language
=
"javascript"
type
=
"text/javascript"
>
<!--//-->
<!
CDATA
[[//>
<!--
//javascript代码
//-->
<!]]></
script
>
|
引用方式
如果已经存在一个Javascript源文件(通常以js为扩展名),则可以采用这种引用的方式,以提高程序代码的利用率。其基本格式如下:
1
|
<
script
src=“url”
type
=
"text/javascript"
></
script
>
|
其中的Url就是
程序文件的地址。同样的,这样的语句可以放在HTML文档头部或主体的任何部分。如果要实现“直接插入方式”中所举例子的效果,可以首先创建一个Javascript源代码文件“Script.js”,其内容如下:
document.write("这是Javascript!采用直接插入的方法!");
在网页中可以这样调用程序:
1
|
<
script
src
=
"Script.js"
type
=
"text/javascript"
></
script
>
|
也可以同时在导入文件时制定javascript的版本,例如:
1
|
<
script
src
=
"Script.js"
type
=
"text/javascript; version=1.8"
></
script
>
|
注意:凡是指定了src属性的script标签里的内容都会被忽略。
10脚本调试
随着用JavaScript编程的深入,你会开始理解那些JavaScript给出的不透明
错误信息。一旦你理解了你常犯的一般性错误,你就会很快知道怎样避免它们,这样你写的代码中的错误将越来越少。编程实际上是一种能随着时间不断飞快进步的技术。但是不管变得多么熟练,你仍然要花一些时间调试你的代码。如果你做过家庭作业,或有过JavaScript编程经验,你会知道相当多的时间是花在调试上。这很正常- 这只是编程者必须做的事之一。实际上,按照大量的研究,程序员平均百分之五十的时间花在解决代码中的错误。
调试的技巧:
根据浏览器的提示信息
选择浏览器是很重要的,不同的浏览器的错误提示都不同,在浏览器中错误信息最容易理解的,能最快找出错误的,就是firefox和opera了。它们都会给出详细的出错原因和行号。
使用调试工具
如果你是
Firefox的用户,那么你可以到添加组件的网页中搜索一些用于网页开发的组件
推荐:
Firebug
一款非常优秀的组件,可以指出你的脚本中的错误,查看DOM树,查看cookie,ajax通信,并且还有CSS的调试工具,而且也有不少firebug的扩展。
javascript debugger
这是mozilla开发的调试工具,项目代号叫venkman,和gecko的javascript解析器无缝集成,功能非常强大。
清除浏览器缓存
有时浏览器会在网页明明修改过的时候却依然使用
缓存里的网页来显示,这时最好强制刷新网页以重新载入数据,如果还不行就清除缓存。
输出变量
如果你使用firebug调试的话,可以很方便地在脚本里用console.log()来输出变量的值,而且幸运的是,firebug还会对你输出的变量进行解析,在控制台里显示一个清晰的变量结构
如果你没有firebug,那么可以用alert代替,不过当有几百个变量输出时,很可能不得不强行关闭浏览器。在网页里专门放置一个调试用的div也是一种不错的解决办法.
11相关特性
面向对象性
作用域
作用域是指变量存在的域,在文档中的javascript脚本的作用域都是window。在javascript,function和let分隔作用域
例如下面这个作用域的例子:
1
2
3
4
5
6
7
|
var
myVariable=
"outside"
;
function
myFunction(){
var
myVariable=
"inside"
;
alert(myVariable);
}
myFunction();
alert(myVariable);
|
结果会是先弹出内容为“inside”的对话框,然后弹出内容为“outside”的对话框,这就是
function建立了一个作用域,而第一次提示的是myFunction作用域内的myVariable
下面是一个let控制作用域的例子:
1
2
3
|
var
myVariable=
"outside"
;
let
(myVarialbe=
"inside"
) alert(myVariable);
// inside
alert(myVariable);
// outside
|
let语句是在javascript 1.7中加入的
闭包
1
2
3
4
|
(
function
(){
var
myVariable=
"private"
})();
alert(myVariable);
// undefined
|
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢?请看下面的代码。
Js代码
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
这段代码中另一个值得注意的地方,就是“nAdd=function(){n+=1}”这一行,首先在nAdd前面没有使用var关键字,因此 nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个
上下文对象
上下文对象指的就是this对象。它是一个只能读取而不能直接赋值的对象(就是你只能对this拥有的属性和方法赋值)。上下文对象在javascript可以说发挥的淋漓尽致。
如果你在一个对象(Object)中使用this,指的就是这个对象
1
2
3
4
5
6
|
var
obj={
getThis:
function
(){
return
this
;
}
};
alert(obj.getThis()===obj);
// true
|
同样的,在作用域中已经提到过文档中javascript对象都属于window,那么下面这个例子
1
|
alert(window===
this
);
|
也将提示true。
上下文对象在事件侦听器中指的就是发生事件的对象
1
2
3
4
5
6
7
8
|
document.body.addEventListener(
'click'
,
function
(){
alert(
this
===document.body);
// true
},
false
);
this
在构造函数中则是指实例
function
Person(name){
this
.name = name;
}
var
Sam=
new
Persom();
|
这里this指的就是Sam。
12相关区别
与Java的不同
——来自Usenet上的
Javascript讨论组
很多人看到
Java和
JavaScript都有“
Java”四个字,就以为它们是同一样东西,连我自己当初也是这样。事实上,
JAVA语言和
JavaScript语言是相关的,但是它们的联系并非你想像的那样紧密。首先
Java语言是
SUN Microsystems公司的产品,而
JavaScript是
Netscape公司的产品。
其次它们在功能上也有些差异:Java在客户端的运行的
应用程序叫做Java Applet,是嵌在网页中,而又有自己独立的运行窗口的小程序。Java Applet 是预先编译好的,一个Applet 文件(.class)用Notepad 打开阅读,根本不能理解。Java Applet 的功能很强大,可以访问http、ftp等协议,甚至可以在电脑上种病毒(已有先例了)。相比之下,JavaScript 的能力就比较小了。JavaScript 是一种“脚本”(“Script”),它直接把代码写到HTML 文档中,浏览器读取它们的时候才进行编译、执行,所以能查看HTML 源文件就能查看JavaScript 源代码。JavaScript 没有独立的运行窗口,浏览器当前窗口就是它的运行窗口。它们的相同点,我想只有同是以Java 作编程语言一点了。
Java是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和
Java平台的总称。用Java实现的
HotJava浏览器(支持Java applet)显示了Java的魅力:跨平台、动感的Web、Internet计算。从此,Java被广泛接受并推动了Web的迅速发展,常用的浏览器均支持Java applet。另一方面,Java技术也不断更新。
Java平台由Java
虚拟机(Java Virtual Machine)和Java 应用编程接口(Application Programming Interface、简称API)构成。Java 应用编程接口为Java应用提供了一个独立于
操作系统的标准接口,可分为基本部分和扩展部分。在硬件或操作系统平台上安装一个Java平台之后,Java 应用程序就可运行。Java平台已经嵌入了几乎所有的操作系统。这样Java程序可以只编译一次,就可以在各种系统中运行。
Java分为三个体系JavaSE、JavaEE、JavaME。
与JScript不同
JScript是Microsoft公司开发的,Javascript是Netscape公司开发的,虽然他们是死对头,但是现在的浏览器中,无论你把语言指定为Javascript 还是Jscript,浏览器都会综合他们两个语言的特性,所以,即使把语言指定为Javascript,用几句JScript也是没问题的。
虽然浏览器综合了两种语言的特性,但是对于那些对脚本语言熟悉的程序员来说,还是Jscript的实用性更强。如果你在网上察看Javascript和Jscript的手册,你会发现Jscript的运算符比Javascript的多得多,所以许多库(比如Concurrent、
Thread)都是采用Jscript的格式编写的。
与DOM的关系
DOM是Document Object Model(文档对象模型)的简称,它是让javascript与页面交互的一种方式,能够动态修改文档中的节点、元素、属性等。
DOM不仅适用于
xhtml文档,对于所有的xml文档dom都是可以使用的。
DOM的级别
1级:基本的节点操作一级里都包括了
2级:增加了对样式表、文档显示、事件处理等的支持
3级:可以用javascript加载和保存文档、检查文档错误。
与其他脚本语言
Visual Studio 2008之前的版本可以使用
debugger来调试。
Javascript不是一个预编译语言,所以虽然Javascript的作者尽量把它写得强大,但是仍然有一些功能无法实现,而且对于那些对
VBscript熟悉而对Javascript 却较陌生的程序员来说,这是一个很头疼的难题,因为VBscript也只是一门脚本语言,当然没有VB 强大。
许多浏览器(如
IE)都提供了脚本互通,但是网上对此的介绍不多,最多在应用问题上提到一点。Javascript和VBscript的互通性很好,而且在VBArray(Javascript不支持多维数组)和
ASCII(Javascript不能把字符转成ASCII)中都得到了应用,这方面基础VBScript做得很好。所以它的代码的大致意思就是Javascript可以用VBScript的自定义函数和变量(当然不能用内置变量和函数)通过转换调用
内置函数。
1
2
3
4
5
6
7
8
|
<
script
language
=
"vbscript"
>
function AL()
AL = "S"
end function
</
script
>
<
script
language
=
"javascript"
>
alert(AL());
</
script
>
|
至于效果就自己看吧。
13进阶技术
AJAX全称为“
Asynchronous JavaScript and XML”(异步
JavaScript和
XML),是一种创建交互式网页应用的网页开发技术。根据Ajax提出者Jesse James Garrett建议AJAX:
2.使用
JavaScript操作
DOM(
Document Object Model)进行动态显示及交互
4.使用
XMLHttpRequest对象与
Web服务器进行异步数据交换
5.使用JavaScript将所有的东西绑定在一起
AJAX的应用使用支持以上技术的Web
浏览器作为运行平台。这些浏览器包括:
Internet Explorer、
Mozilla、
Firefox、
Opera、Konqueror及Mac OS的
Safari。但是
Opera不支持XSL格式对象,也不支持XSLT。
14程序举例
编写第一个JavaScript程序
1
2
3
4
5
6
7
8
9
10
11
12
|
<
html
>
<
head
>
<
script
type
=
"text/javascript"
>
<!--
document.write("Hello, world!")//直接在浏览器视窗显示。
alert("Hello, world!")//开启对话视窗显示。
-->
</
script
>
</
head
>
<
body
>
</
body
>
</
html
>
|
JavaScript代码由<script type="text/javaScript">…</script>说明。在标识<script type ="text/javaScript">…</script>之间就可加入JavaScript脚本。 alert()是JavaScript的窗口对象方法,其功能是弹出一个具有OK对话框并显示()中的字符串。通过<!-- …//-->标识说明:若不认识JavaScript代码的浏览器,则所有在其中的标识均被忽略;若认识,则执行其结果。使用注释这是一个好的编程习惯,它使其他人可以读懂这种语言。JavaScript 以</Script> 标签结束。
15相关版本
版本历史
版本
|
发布日期
|
基于
|
Netscape Navigator
|
Mozilla Firefox
|
Internet Explorer
|
Opera
|
Safari
|
谷歌Chrome
|
1.0
|
1996年3月
|
2.0
|
3.0
| |||||
1.1
|
1996年8月
|
3.0
| ||||||
1.2
|
1997年6月
|
4.0-4.05
| ||||||
1.3
|
1998年10月
|
ECMA-262 1 edition / ECMA-262 2 edition
|
4.06-4.7x
|
4.0
| ||||
1.4
|
Netscape
Server
| |||||||
1.5
|
2000年11月
|
ECMA-262 3 edition
|
6.0
|
1.0
|
5.5 (JScript 5.5),
6.(JScript 5.6),
7.(JScript 5.7),
8.(JScript 6)
|
6.0,
7.0,
8.0,
9.0
| ||
1.6
|
2005年11月
|
1.5 + Array extras + Array and String generics + E4X
|
1.5
|
3.0, 3.1
| ||||
1.7
|
2006年10月
|
1.6 + Pythonic generators + Iterators + let
|
2.0
|
3.2, 4.0
|
1.0
| |||
1.8
|
2008年6月
|
1.7 + Generator expressions + Expression closures
|
3.0
| |||||
1.8.1
|
1.8 + Minor Updates
|
3.5
| ||||||
1.9
|
1.8.1 + ECMAScript 5 Compliance
|
4
|
版本标准
JavaScript已经被Netscape公司提交给
ECMA制定为标准,称之为ECMAScript,这个标准由ECMA
组织发展和维护,标准编号ECMA-262。这个标准基于JavaScript (Netscape) 和JScript (Microsoft)。Netscape (Navigator 2.0) 的
Brendan Eich发明了这门语言,从1996 年开始,已经出现在所有的Netscape 和Microsoft
浏览器中。ECMA-262 的开发始于1996 年,在1997 年7 月,ECMA 会员大会采纳了它的首个版本。
在1998 年,该标准成为了国际ISO 标准(ISO/IEC 16262)。这个标准仍然处于发展之中。在2005年12月,ECMA发布ECMA-357标准(ISO/IEC 22537)出台,主要增加对扩展标记语言
XML的有效支持。目前最新版为ECMA-262 3rd Edition。符合该标准的实现有:
1. Microsoft公司的JScript
2. Mozilla的Javascript-C(C语言实现)
3. SpiderMonkeyMozilla的Rhino(Java实现)
4. Digital Mars公司的DMDScript
5. 谷歌公司的V8WebKit
ECMA-262 4th Edition正在开发的过程中,与其对应的JavaScript的版本为JavaScript 2.0,也正在开发过程中。
16发展历史
大概在1998年,一家称作Nombas的公司开始开发一种叫做C减减(C-minus-minus,简称Cmm)的嵌入式脚本语言。这个脚本语言捆绑在一个叫做CEnvi的共享软件产品中,当
Netscape Navigator崭露头角时,Nombas开发了一个可以嵌入网页中的CEnvi的版本。这些早期的试验称为EspressoPage(浓咖啡般的页面),它们代表了第一个在
万维网上使用的
客户端脚本语言。而Nombas丝毫没有料到它的理念将会成为
因特网的一块重要基石。
17常见问题
JavaScript是Java的变种吗?
JavaScript最初的确是受Java启发而开始设计的,而且设计的目的之一就是“看上去像Java”[2],因此语法上有很多类似之处,许多名称和命名规范也借自Java。但是实际上,JavaScript的主要设计原则源自Self和Scheme[3],它与Java本质上是不同的。它与Java名称上的近似,是当时网景为了营销考虑与Sun公司达成协议的结果。其实从本质上讲javascript更像是一门函数式编程语言.而非
面向对象的语言,它使用一些智能的语法和语义来仿真高度复杂的行为。其对象模型极为灵活、开放和强大,具有全部的反射性。
JavaScript与JScript相同吗?
为了取得技术优势,微软推出了JScript脚本语言。
Ecma国际(前身为
欧洲计算机制造商协会)建立了ECMA-262标准(ECMAScript)。现在两者都属于ECMAScript的实现。
JavaScript是一门简单的语言吗?
尽管JavaScript作为给非
程序人员的脚本语言,而非作为给程序人员的编程语言来推广和宣传,但是JavaScript是一门具有非常丰富特性的语言,它有着和其他编程语言一样的复杂性,或更甚复杂。实际上,你必需对JavaScript有扎实的理解才能用它来撰写比较复杂的程序。
Java 和 JavaScript 是相同的吗?
不同!
在概念和设计方面,Java 和 JavaScript 是两种完全不同的语言。
java(由太阳微系统公司开发)很强大,同时也是更复杂的编程语言,就像同级别的 C 和 C++。
18其他程序
Jquery
Jquery是继prototype之后又一个优秀的Javascrīpt
框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种
浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的
插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
Ext
Ext是一个强大的js类库,以前是基于
YAHOO-UI,现在已经完全独立了。 主要包括data、widget、form、grid、dd、menu,其中最强大的应该算grid了,编程思想是基于
面向对象编程(oop),扩展性相当的好.可以自己写扩展,自己定义命名空间。web应用可能感觉太大.不过您可以根据需要按需加载您想要的类库就可以了。
主要包括三个大的文件:ext-all.css,ext-base.js,ext-all.js(包括所有的类库,您可以根据需要进行删减.官方网站提供这一接口),在引用ext类库的时候,这三个文件必不可少。
它提供了丰富的,非常漂亮的外观体验,成为众多界面层开发人员的追捧!其核心的组件基本覆盖了我们构建
富客户端的常用的组件。
从 Ext 2开始,商业版(针对那些以盈利为目的的开发方)要收费了。这可能会影响一些他的应用前景。
目前的最新版本为4.2.0
prototype
prototype.js是由Sam Stephenson写的一个javascript类库。该框架的设计思路巧妙,而且兼容标准的类库,能够帮助开发人员轻松建立有交互性良好的web2.0特性
富客户端页面。
HTML |
|
---|
XML |
|
---|
Web脚本 |
|
---|
Serv脚本 |
|
---|
.NET |
|
---|
多媒体 |
|
---|
文档呈现语言 |
|
---|
样式格式描述语言 |
|
---|
动态网页技术 |
|
---|
客户端交互技术 |
|
---|
客户端脚本语言 |
|
---|
标识定位语言 |
|
---|
文档纲要语言 |
|
---|
-
参考资料
-
-
1. javascript深入理解js闭包 .百度库文 .2013-04-18 [引用日期2013-08-21] .
-
2. 用JavaScript 创建模块化的交互用户界面 .慧都控件网 [引用日期2013-04-24] .
-
3. Javascript开发移动应用程序 .北大青鸟飞迅网 .2013-05-10 [引用日期2013-05-10] .
-
4. Javascript继承机制总结 .上海泽众软件科技有限公司 [引用日期2013-10-17] .
-
5. Web开发人员最喜爱的10款流行JavaScript库 .慧都控件 [引用日期2013-09-23] .
-