javaScrip
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。
目录
编辑本段资料
概述
JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。它最初由网景公司(Netscape)的Brendan Eich设计,是一种动态、弱类型、基于原型的语言,内置支持类。JavaScript是Sun公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,字节顺序记号。
Netscape公司在最初将其脚本语言命名为LiveScript。在Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”[2],因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme[3].JavaScript与Java名称上的近似,是当时网景为了营销考虑与Sun公司达成协议的结果。为了取得技术优势,微软推出了JScript来迎战JavaScript的脚本语言。为了互用性,Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。现在两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言,而非是作为给程序人员的编程语言来推广和宣传,但是JavaScript具有非常丰富的特性。
目前javascript的最新版本为1.9版。
作者
布兰登·艾奇(Brendan Eich,1964年~),JavaScript的发明人,目前(2007年)在Mozilla公司担任首席技术长(Chief Technology Officer)。
编辑本段组成
一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:核心(ECMAScript)、文档对象模型(Document Object Model,简称DOM)、浏览器对象模型(Browser Object Model,简称BOM)。
编辑本段相关概念
运算符
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,则相同。
4)2个引用的是同一个对象、函数、数组,则他们相等,如果引用的不是同一个对象、函数、数组,则不相同,即使这2个对象、函数、数组可以转换成完全相等的原始值。
5)2个null,或者2个都是未定义的,那么他们相等。
而“===”是全同运算符,全同运算符遵循等同运算符的比较规则,但是它不对运算数进行类型转换,当两个运算数的类型不同时,返回false;只有当两个运算数的类型相同的时候,才遵循等同运算符的比较规则进行比较。
例如:null==undefined 会返回真, 但是null===undefined 就会返回假!
表达式
表达式是指将常量、变量、函数、运算符和括号连接而成的式子。根据运算结果的不同,表达式可分为算术表达式、字符表达式、和逻辑表达式。
语句
JavaScript程序是由若干语句组成的,语句是编写程序的指令。JavaScript提供了完整的基本编程语句,它们是:
赋值语句、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。
一般的函数都是以下格式:
function myFunction(params){
//执行的语句
}
函数表达式:
var myFunction=function(params){
//执行的语句
}
var myFunction = function(){
//执行的语句
}
myFunction();//调用函数
匿名函数,它常作为参数在其他函数间传递:
window.addEventListener('load',function(){
//执行的语句
},false);
对象
JavaScript的一个重要功能就是面向对象的功能,通过基于对象的程序设计,可以用更直观、模块化和可重复使用的方式进行程序开发。
一组包含数据的属性和对属性中包含数据进行操作的方法,称为对象。比如要设定网页的背景颜色,所针对的对象就是document,所用的属性名是bgcolor,如document.bgcolor="blue",就是表示使背景的颜色为蓝色。
事件
用户与网页交互时产生的操作,称为事件。事件可以由用户引发,也可能是页面发生改变,甚至还有你看不见的事件(如Ajax的交互进度改变)。绝大部分事件都由用户的动作所引发,如:用户按鼠标的按键,就产生click事件,若鼠标的指针在链接上移动,就产生mouseover事件等等。在JavaScript中,事件往往与事件处理程序配套使用。
而对事件的处理,W3C的方法是用addEventListener()函数,它有三个参数:事件,引发的函数,是否使用事件捕捉。为了安全性,建议将第三个参数始终设置为false
传统的方法就是定义元素的on…事件,它就是W3C的方法中的事件参数前加一个“on”。而IE的事件模型使用attachEvent和dettachEvent对事件进行绑定和删除。JavaScript中事件还分捕获和冒泡两个阶段,但是传统绑定只支持冒泡事件。
变量
常用类型
object:对象
array:数组
number:数
boolean:布尔值,只有true和false两个值,是所有类型中占用内存最少的
null:一个空值,唯一的值是null
undefined:没有定义和赋值的变量
命名形式
一般形式是:
var <变量名表>;
其中,var是javascript的保留字,表面接下来是变量说明,变量名表是用户自定义标识符,变量之间用逗号分开。和C++等程序不同,在javascript中,变量说明不需要给出变量的数据类型。此外,变量也可以不说明而直接使用。
作用域
变量的作用域由声明变量的位置决定,决定哪些脚本命令可访问该变量。在函数外部声明的变量称为全局变量,其值能被所在HTML文件中的任何脚本命令访问和修改。在函数内部声明的变量称为局部变量。只有当函数被执行时,变量被分配临时空间,函数结束后,变量所占据的空间被释放。局部变量只能被函数内部的语句访问,只对该函数是可见的,而在函数外部是不可见的。
基本特点
网页嵌入技术有: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 的特点是无穷无尽的,只要你有创意。
常用的javascript库
jquery库、JSer库、prototype
开发工具
在如今网络开发方面,JavaScript起了很关键的作用;像jQuery, MooTools, Prototype等等JavaScript框架以及其它JavaScript类库让我们的生活轻松了不少。但是随着Rich Internet Applications(RIA)的面世及迅速应用,书写更强大,更坚实可靠的JavaScript的需要日益迫切。
javascript程序是纯文本的,且不需要编译,所以任何纯文本的编辑器都可以编辑javascript文件。
测试工具
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上提供了记录信息的简单方式以及一个引人注意的控制台程序来察看并过滤信息。
HTTP监控
Fiddler
Fiddler是一种Web调试代理,它记录你的电脑和网络之间所有的HTTP(S)流量。可以用Fiddler检查所有HTTP(S)流量,设置断点,干涉进来或出去的数据。
TamperData
TamperData是一个追踪并修改http/https请求的Firefox扩展。可以用它做基于网络的应用程序的安全测试,追踪请求/回应。
Live HTTP Headers
可以在浏览的时候查看网页的HTTP headers。可以用Live HTTP Headers调试网页应用程序,找出远端网站使用的是那种网站服务器,或者查看远端网站发送的小数据文件。
文件记载工具
jGrouseDoc
jGrouseDoc可以从源代码中的注释生成API文件。用户可以用这个工具记载需要的所有构造——不仅有函数和变量,还有类文件包,界面,命名空间,包和其它。使用那种JavaScript框架是无关紧要的——用户可以不采取框架或工具强加的方式而以自己希望的方式记录代码,
JSDoc Toolkit
JavaScript的一种文件产生器,以JavaScript形式写成;它自动从加注的JavaScript源代码中生成格式模版化,多页面HTML(或XML, JSON, 抑或其它文本)。
压缩工具
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%。
格式化工具
JavaScript代码美化工具
这个美化工具可处理散乱或压缩的JavaScript代码,不断对其进行快速的格式化并使其可读。
集成开发环境
Aptana Studio
Aptana Studio是一个完整的网络开发环境。它提供有JavaScript代码自动完成和调试,HTML/CSS/JavaScript代码提示,以及对重要的Ajax类库的支持。Aptana Studio甚至给你页面上所有的,包括你自己的JavaScript提供代码提示。
Komodo Edit
Komodo Edit是一种免费开放的源编辑程序。它提供自动完成,调用提示,多种语言支持,语法高亮颜色显示,语法检查,Vi emulation,Emacs快捷键绑定等等功能。扩展Komodo Edit是其最实用的功能之一。你会发现各种对JavaScript开发者有用的扩展(如JSLint plugin for Komodo, Venkman JavaScript Debugger,等等)。
Spket IDE
Spket IDE是JavaScript和XML开发功能强大的工具包。JavaScript, XUL/XBL and Yahoo! Widget开发功能强大的编辑器。JavaScript编辑器有代码完成,语法高亮显示和内容概要等功能,这些功能帮助开发者高效制作出有效的JavaScript代码。Spket IDE为非商业用途免费提供。
其它工具
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
一个制作正则表达式的在线工具。
其它浏览器扩展
Firefox, Flock & Seamonkey的网络开发人员扩展
网络开发人员拓展在浏览器中增加了一个菜单和工具条,其中包含许多网络开发工具包括能使你的XHTML生效,发现JavaScript/CSS的错误,网页结构可视化,测试网络表单,改变运行中的XHTML,检查HTTP头信息等等。
Opera Dragonfly
Opera Dragonfly 是Opera浏览器的跨设备,跨平台调试环境—调试JavaScript, 检查编辑CSS和DOM,并且查看移动设备或计算机上的错误。
IE6/7的开发者工具条
微软的英特网浏览器开发者工具条为网页的快速创建,理解和故障诊断提供了各种的工具。
使用技巧
Javascript加入网页有两种方法:直接方式和引用方式。
直接方式
这是最常用的方法,大部分含有Javascript的网页都采用这种方法,例如:
<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的结束)
<script language="javascript" type="text/javascript"><!--//--><!CDATA[[//><!--
//javascript代码
//--><!]]></script>
引用方式
如果已经存在一个Javascript源文件(通常以js为扩展名),则可以采用这种引用的方式,以提高程序代码的利用率。其基本格式如下:
<script src=“url” type="text/javascript"></script>
其中的Url就是程序文件的地址。同样的,这样的语句可以放在HTML文档头部或主体的任何部分。如果要实现“直接插入方式”中所举例子的效果,可以首先创建一个Javascript源代码文件“Script.js”,其内容如下:
document.write("这是Javascript!采用直接插入的方法!");
在网页中可以这样调用程序:<script src="Script.js" type="text/javascript"></script> 。
也可以同时在导入文件时制定javascript的版本,例如:<script src="Script.js" type="text/javascript; version=1.8"></script>
注意:凡是指定了src属性的script标签里的内容都会被忽略。
脚本的调试
随着用JavaScript编程的深入,你会开始理解那些JavaScript给出的不透明错误信息。一旦你理解了你常犯的一般性错误,你就会很快知道怎样避免它们,这样你写的代码中的错误将越来越少。编程实际上是一种能随着时间不断飞快进步的技术。但是不管变得多么熟练,你仍然要花一些时间调试你的代码。如果你做过家庭作业,或有过JavaScript编程经验,你会知道相当多的时间是花在调试上。这很正常- 这只是编程者必须做的事之一。实际上,按照大量的研究,程序员平均百分之五十的时间花在解决代码中的错误。
调试的技巧:
根据浏览器的提示信息
选择浏览器是很重要的,不同的浏览器的错误提示都不同,在浏览器中错误信息最容易理解的,能最快找出错误的,就是firefox和opera了。它们都会给出详细的出错原因和行号。
使用调试工具
如果你是Firefox的用户,那么你可以到添加组件的网页中搜索一些用于网页开发的组件
推荐:Firebug
一款非常优秀的组件,可以指出你的脚本中的错误,查看DOM树,查看cookie,ajax通信,并且还有CSS的调试工具,而且也有不少firebug的扩展。
javascript debugger
这是mozilla开发的调试工具,项目代号叫venkman,和gecko的javascript解析器无缝集成,功能非常强大。
清除浏览器缓存
有时浏览器会在网页明明修改过的时候却依然使用缓存里的网页来显示,这时最好强制刷新网页以重新载入数据,如果还不行就清除缓存。