JavaScript

开源公司:网景公司

作品详情

1发展历程

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作。它最初由网景公司(Netscape)的Breda Eich设计,是一种动态、弱类型、基于原型的语言,内置支持类。JavaScript是Su公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,字节顺序记号。

Netscape公司在最初将其脚本语言命名为LiveScript。在Netscape在与Su合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”[2],因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme[3]。JavaScript与Java名称上的近似,是当时网景为了营销[1]考虑与Su公司达成协议的结果。为了取得技术优势,微软推出了JScript脚本语言。Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。现两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言,而非是作为给程序人员的编程语言来推广和宣传,但是JavaScript具有非常丰富的特性。

背景介绍

大概在1992年,一家称作Nombas的公司开始开发一种叫做C减减(C-mius-mius,简称Cmm)的嵌入式脚本语言。这个脚本语言捆绑在一个叫做CEvi的共享软件产品中,当Netscape Navigator崭露头角时,Nombas开发了一个可以嵌入网页中的CEvi的版本。这些早期的试验称为EspressoPage(浓咖啡般的页面),它们代表了第一个在万维网上使用的客户端脚本语言。而Nombas丝毫没有料到它的理念将会成为因特网的一块重要基石。

2主要功能

嵌入动态文本于HTML页面。

对浏览器事件做出响应。

读写HTML元素。

在数据被提交到服务器之前验证数据。

检测访客的浏览器信息。控制cookies,包括创建和修改等。

基于Node.js技术进行服务器端编程。

3操作指南

一、Javascript在网页的用法

Javascript加入网页有两种方法:

1、直接加入HTML文档

这是最常用的方法,大部分含有Javascript的网页都采用这种方法,如:

<script laguage="Javascript">

<!--

documet.writel("这是Javascript!采用直接插入的方法!");

//-Javascript结束-->

</script>

在这个例子中,我们可看到一个新的标签: ,而浏览器这是用Javascript编写的程序,需要调动相应的解释程序进行解释。(w3c已经建议使用新的标准:)]]>]]>

HTML的注释标签<!--和-->:用来去掉浏览器所不能识别的Javascript源代码的,这对不支持 Javascript 语言的浏览器来说是很有用的。

//-Javascript结束:双斜杠表示 Javascript的注释部分,即从//开始到行尾的字符都被忽略。 至于程序中所用到的documet.write()函数则表示将括号中的文字输出到窗口中去, 这在后面将会详细介绍。 另外一点需要注意的是,的位置并不是固定的,可以包含在...... 或.....中的任何地方。

还有一个更高级版本的嵌入脚本,它使用了HTML中的CDATA语法(Character Data,就是把CDATA中的文本全部当作纯文本处理,除非遇到CDATA的结束)

type="t]]>ext/javascript">

<!--//-->

<!CDATA[[//><!--

//javascript代码

//--><!]]>

</script>

2、引用方式

如果已经存在一个Javascript源文件(以js为扩展名),则可以采用这种引用的方式,以提高程序代码的利用率。其基本格式如下:

<script src=url laguage="Javascript"></script>

其中的Url就是程序文件的地址。同样的,这样的语句可以放在HTML文档头部或主体的任何部分。 如果要实现“直接插入方式”中所举例子的效果,可以首先创建一个Javascript源代码文件“Script.js”,其内容如下:

documet.writel("这是Javascript!采用直接插入的方法!");

在网页中可以这样调用程序:<script src="Script.js" laguage="Javascript"></script> 。

4作者简介

Breda Eich

布兰登·艾奇(Breda Eich,1964年~),JavaScript的发明人,从2007年开始在Mozilla公司担任首席技术长官(Chief Techology Officer)。

5组成部分

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:核心(ECMAScript)、文档对象模型(Documet Object Model,简称DOM)、浏览器对象模型(Browser Object Model,简称BOM)。

在这里只作简单介绍,在以后的例子中结程序再作具体解释其作用。

6相关概念

语句

JavaScript程序是由若干语句组成的,语句是编写程序的指令。JavaScript提供了完整的基本编程语句,它们是:

赋值语句、switch选择语句、while循环语句、for循环语句、for each循环语句、do...while循环语句、break循环中止语句、cotiue循环中断语句、with语句、try…catch语句、if语句(if..else,if…else if…)。

函数

函数是命名的语句段,这个语句段可以被当作一个整体来引用和执行。使用函数要注意以下几点:

1)函数由关键字fuctio定义(也可由Fuctio构造函数构造)

2)使用fuctio关键字定义的函数在一个作用域内是可以在任意处调用的(包括定义函数的语句前);而用var关键字定义的必须定义后才能被调用

3)函数名是调用函数时引用的名称,它对大小写是敏感的,调用函数时不可写错函数名

4)参数表示传递给函数使用或操作的值,它可以是常量,也可以是变量,也可以是函数,在函数内部可以通过argumets对象(argumets对象是一个伪数组,属性callee引用被调用的函数)访问所有参数

5)retur语句用于返回表达式的值。

6)yield语句扔出一个表达式,并且中断函数执行直到下一次调用ext。

一般的函数都是以下格式:

fuctio myFuctio(params){

//执行的语句

}

函数表达式:

var myFuctio=fuctio(params){

//执行的语句

}

var myFuctio = fuctio(){

//执行的语句

}

myFuctio();//调用函数

匿名函数,它常作为参数在其他函数间传递:

widow.addEvetListeer('load',fuctio(){

//执行的语句

},false);

对象

JavaScript的一个重要功能就是面向对象的功能,通过基于对象的程序设计,可以用更直观、模块化和可重复使用的方式进行程序开发。

一组包含数据的属性和对属性中包含数据进行操作的方法,称为对象。比如要设定网页的背景颜色,所针对的对象就是documet,所用的属性名是bgcolor,如documet.bgcolor="blue",就是表示使背景的颜色为蓝色。

事件

用户与网页交互时产生的操作,称为事件。事件可以由用户引发,也可能是页面发生改变,甚至还有你看不见的事件(如Ajax的交互进度改变)。绝大部分事件都由用户的动作所引发,如:用户按鼠标的按键,就产生click事件,若鼠标的指针在链接上移动,就产生mouseover事件等等。在JavaScript中,事件往往与事件处理程序配套使用。

而对事件的处理,W3C的方法是用addEvetListeer()函数,它有三个参数:事件,引发的函数,是否使用事件捕捉。为了安全性,建议将第三个参数始终设置为false

传统的方法就是定义元素的o…事件,它就是W3C的方法中的事件参数前加一个“o”。而IE的事件模型使用attachEvet和dettachEvet对事件进行绑定和删除。JavaScript中事件还分捕获和冒泡两个阶段,但是传统绑定只支持冒泡事件。

变量

1、常用类型

Object:对象

Array:数组

Number:数

Boolea:布尔值,只有true和false两个值,是所有类型中占用内存最少的

ull:一个空值,唯一的值是ull,表空引用

udefied:没有定义或赋值的变量

2、命名形式

一般形式是:

var <变量名表>;

其中,var是javascript的保留字,表面接下来是变量说明,变量名表是用户自定义标识符,变量之间用逗号分开。和C++等程序不同,在javascript中,变量说明不需要给出变量的数据类型。此外,变量也可以不说明而直接使用。

3、作用域

变量的作用域由声明变量的位置决定,决定哪些脚本命令可访问该变量。在函数外部声明的变量称为全局变量,其值能被所在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,如果不行就使用toStrig)

4)其他类型的组合不相等。

想两个运算数类型相同,或转换成相同类型后:

1)2个字符串:同一位置上的字符相等,2个字符串就相同。

2)2个数字:2个数字相同,就相同。如果一个是NaN,或两个都是NaN,则不相同。

3)2个都是true,或者2个都是false,则相同。

4)2个引用的是同一个对象、函数、数组,则他们相等,如果引用的不是同一个对象、函数、数组,则不相同,即使这2个对象、函数、数组可以转换成完全相等的原始值。

5)2个ull,或者2个都是未定义的,那么他们相等。

而“===”是全同运算符,全同运算符遵循等同运算符的比较规则,但是它不对运算数进行类型转换,当两个运算数的类型不同时,返回false;只有当两个运算数的类型相同的时候,才遵循等同运算符的比较规则进行比较。

例如:ull==udefied 会返回真, 但是ull===udefied 就会返回假!

表达式

表达式是指将常量、变量、函数、运算符和括号连接而成的式子。根据运算结果的不同,表达式可分为算术表达式、字符表达式、和逻辑表达式。

脚本语言

不同于服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说JavaScript是在用户的浏览器上运行,不需要服务器的支持而可以独立运行。所以在早期程序员比较青睐于JavaScript以减少对服务器的负担,而与此同时也带来另一个问题:安全性。而随着服务器的强壮,虽然程序员更喜欢运行于服务端的脚本以保证安全,但JavaScript仍然以其跨平台、容易上手等优势大行其道。

JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。解释语言的弱点是安全性较差,而且在JavaScript中,如果一条运行不了,那么下面的语言也无法运行。而且由于每次重新加载都会重新解译,加载后,有些代码会延迟至运行时才解译,甚至会多次解译,所以速度较慢。

与其相对应的是编译语言,例如Java。Java的源代码在传递到客户端运行之前,必须经过编译,因而客户端上必须具有相应平台上的仿真器或解释器,它可以通过编译器或解释器实现独立于某个特定的平台编译代码的束缚。但是它必须在服务器端进行编译,这样就拖延了时间。但因为已经封装,所以能保证安全性。

Javascript库

库,指得是可以方便应用到现有开发体系中的、现成的代码资源。库不仅为大部分日常的DOM脚本编程工作提供了快捷的解决方案,而且也提供了许多独特的工具。虽然库使用起来很方便,但它们也并非能解决你所有的问题。在使用库之前,一定要保证真正理解javascript的DOM原理。

这些库一般是一个(或多个)js(Javascript的缩写)文件,只要把他们导入你的网页就能使用了。

常用的库有:

jQuery:javascript库中的新成员,提供css和xpath选择符查找元素、ajax、动画效果等

JSer: 国人开发的一款全功能的开源脚本框架. 借助JSer,可以便捷的操作DOM、CSS样式访问、属性读写、事件绑定、行为切换、动态载入、数据缓存、URL与AJAX等众多功能。

dojo:一个巨大的库,包括的东西很多,dijit和dojox是dojo的扩展,几乎你想要的各种javascript程序都包括了。

prototype:一个非常流行的库,使用了原型链向javascript中添加了很多不错的函数

YUI:(YahooYUI库)yahoo!用户界面,非常实用,提供各种解决方案。

ExtJs:组件非常丰富,皮肤也很漂亮,动画效果也丰富。

7基本特点

网页嵌入技术有:Javascript、VBScript、Documet Object Model(DOM,文档对象模型)、Layers和Cascadig Style Sheets(CSS,层叠样式表),这里主要讲Javascript。

Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言,如今越来越广泛地使用于Iteret网页制作上。Javascript是由 Netscape公司开发的一种脚本语言(scriptig laguage),或者称为描述语言。在HTML基础上,使用Javascript可以开发交互式Web网页。Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加精彩的内容。运行用Javascript编写的程序需要能支持Javascript语言的浏览器。Netscape公司 Navigator 3.0以上版本的浏览器都能支持Javascript程序,微软公司Iteret Explorer 3.0以上版本的浏览器基本上支持Javascript。微软公司还有自己开发的Javascript,称为JScript。Javascript和Jscript基本上是相同的,只是在一些细节上有出入。 Javascript短小精悍,又是在客户机上执行的,大大提高了网页的浏览速度和交互能力。 同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。

JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意。

8相关区别

Java之于Javascript就好比Car(汽车)之于Carpet(地毯)。

——来自Useet上的Javascript讨论组

中国本地版的说法应该是这样的:Java之于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是由Su Microsystems公司于1995年5月推出的Java程序设计语言和Java平台的总称。用Java实现的HotJava浏览器(支持Java applet)显示了Java的魅力:跨平台、动感的Web、Iteret计算。从此,Java被广泛接受并推动了Web的迅速发展,常用的浏览器现在均支持Java applet。另一方面,Java技术也不断更新。

Java平台由Java虚拟机(Java Virtual Machie)和Java 应用编程接口(Applicatio Programmig Iterface、简称API)构成。Java 应用编程接口为Java应用提供了一个独立于操作系统的标准接口,可分为基本部分和扩展部分。在硬件或操作系统平台上安装一个Java平台之后,Java 应用程序就可运行。现在Java平台已经嵌入了几乎所有的操作系统。这样Java程序可以只编译一次,就可以在各种系统中运行。

Java分为三个体系JavaSE,JavaEE,JavaME。

9主要工具

开发工具

在如今网络开发方面,JavaScript起了很关键的作用;像jQuery,MooTools,Prototype等等JavaScript框架以及其它JavaScript类库让我们的生活轻松了不少。但是随着Rich Iteret Applicatios(RIA)的面世及迅速应用,书写更强大,更坚实可靠的JavaScript的需要日益迫切。

javascript程序是纯文本的,且不需要编译,所以任何纯文本的编辑器都可以编辑javascript文件。

测试工具

JSLit –JavaScript的验证器

JSLit取得一个JavaScript源代码并对其扫描。如果发现问题,它送回信息描述问题状况及在源代码中的大概位置。问题不一定就出在句法上,不过常常正是这里出错。JSLit查看一些风格约定和结构问题,它证明不了程序是否正确。它只是提供了另一双眼睛来帮助发现问题。

JsUit

JsUit是一个客户端(内浏览器)JavaScript单元测试框架。它其实是JUit给JavaScript的一个口岸。其中还有一个平台来在多个浏览器上以及运行不同操作系统的多个机器上的自动执行测试。

YUI Test

YUI Test是一个测试框架,它针对基于浏览器的JavaScript解决方案。你可以用YUI Test在JavaScript 解决方案上轻松添加单元测试。

Obtrusive JavaScript Checker

可作为Firefox扩展,Greasemokey用户脚本,以及Ubiquity命令;Obtrusive JavaScript Checker是一种可以扫过页面上所有元素的工具,发现带有行内事件的HTML元素(这是有危害性的,JavaScript应该是不张扬的)时,它给这部分加红边使其凸显。

Crosscheck

Crosscheck是一个开源测试框架,验证内浏览器JavaScript代码。它帮助你确保代码可以在Iteret Explorer和Firefox等种种不同的浏览器上运行,而这些浏览器都不需要安装。

JSLitmus

JSLitmus是一个轻量级工具用来制作JavaScript的特定标准测试。

JavaScriptMVC的测试插件

JavaScriptMVC的测试库提供事件模拟,单元测试,Ajax 夹具,和一个控制台程序。

调试工具

Javascript调试工具包

JavaScript调试工具包是一种跨浏览器调试JavaScript的eclipse plugi,它可以在IE,Firefox,Safari,Chrome,Opera甚至是移动浏览器上调试JavaScript。

Firebug

作为最受欢迎的网页开发程序工具,Firebug是Firefox的一个插件,可以用它在任何网页上现时编辑,调试和监控CSS, HTML, 和JavaScript。它提供给JavaScript登陆和调试控制台一些有用的功能如AJAX requests loggig,JavaScript解释器,DOM explorer等等。Firebug Lite 可以在IE, Opera, 和Safari上使用。

Vekma

Vekma为基于Gecko的浏览器提供功能强大JavaScript调试环境。这个调试器以Firefox & Mozilla插件的形式使用。可以在用户界面上和控制台命令中使用断点管理,调用栈检查,变量/对象检查等功能,可以让你以最习惯的方式调试。

NitobiBug

NitobiBug是一种基于浏览器的JavaScript对象记录和检查工具——与Firebug作用相似。NitobiBug在可以在不同的服务器(IE6+,Safari,Opera, Firefox)上运行以提供开发各种Ajax应用程序一致且功能强大的工具。

DamIT

DamIT是一种免费服务,当用户在网页上遇到JavaScript错误时它会给你发送电子邮件。

JS Bi

JS Bi是一种在线网络应用程序,为帮助JavaScript开发者在一定情景里测试代码片段以及协作调试代码而特别设计。你可以用JS Bi在线编辑测试JavaScript和HTML代码。一旦完成,你可以将URL保存并发送给同伴来进行审查或获得帮助。

Blackbird

许多JavaScript开发者仅仅使用alert()来显示各种信息调试代码。Blackbird在JavaScript上提供了记录信息的简单方式以及一个引人注意的控制台程序来察看并过滤信息。

压缩工具

Olie Javascript Compressio Tool

一个可以用一些压缩算法如JSMi 和Packer压缩JavaScript文件的在线JavaScript压缩器。压缩的JavaScript文件是生产环境中的理想文件,因为它们常常将文件大小减小30-90%。在很大程度上,文件尺寸的缩小是通过除去网页浏览者或访问者不需要的注释和多余的空格字符来实现的。

Scriptalizer

一个将多个JavaScript文件组合为一个文件的在线工具。

Dojo ShrikSafe

一种命令行实用程序,允许你用浏览器缩小文件大小,从而缩短响应时间。Dojo压缩器不是建立在脆弱的规则表达式基础上的。它基于来自莫兹拉专案的JavaScript引擎。由于一个基于真正的parse stream,Dojo压缩器比基于规则表达式的工具可以更好体现代符(变量名等等)的环境。

YUI Compressor

The YUI Compressor是一种JavaScript压缩器。去除注释和空格之外,它还可以用最小可用变量名混淆局部变量。即使在使用‘eval’或‘with’之类构造(在这些情况下压缩并不合适),这种混淆也是安全的。与jsmi相比,它平均节省20%。

文件记载

jGrouseDoc

jGrouseDoc可以从源代码中的注释生成API文件。用户可以用这个工具记载需要的所有构造——不仅有函数和变量,还有类文件包,界面,命名空间,包和其它。使用那种JavaScript框架是无关紧要的——用户可以不采取框架或工具强加的方式而以自己希望的方式记录代码,

格式化工具

JavaScript代码美化工具

这个美化工具可处理散乱或压缩的JavaScript代码,不断对其进行快速的格式化并使其可读。

JSDoc Toolkit

JavaScript的一种文件产生器,以JavaScript形式写成;它自动从加注的JavaScript源代码中生成格式模版化,多页面HTML(或XML, JSON, 抑或其它文本)。

浏览器扩展

Firefox, Flock & Seamokey的网络开发人员扩展

网络开发人员拓展在浏览器中增加了一个菜单和工具条,其中包含许多网络开发工具包括能使你的XHTML生效,发现JavaScript/CSS的错误,网页结构可视化,测试网络表单,改变运行中的XHTML,检查HTTP头信息等等。

Opera Dragofly

Opera Dragofly 是Opera浏览器的跨设备,跨平台调试环境—调试JavaScript, 检查编辑CSS和DOM,并且查看移动设备或计算机上的错误。

IE6/7的开发者工具条

微软的英特网浏览器开发者工具条为网页的快速创建,理解和故障诊断提供了各种的工具。

其它相应工具

Google的AJAX APIs Playgroud

AJAX API Playgroud装载有Google JavaScript APIs(Maps, Search, Feeds, Caledar, Visualizatio, Laguage, Blogger, Libraries和Earth,等等)例子,你可以编辑运行这些例子帮助你探究Google的APIs可提供的功能。同时也还有保存和输出功能。你可以用保存功能保持编辑的例子以留待以后使用。而输出功能可用来修改例子并把代码公布在一个永久的URL上。

QuirksMode –相容性表

检查CSS2, CSS3, DOM Core, DOM HTML, DOM CSS, DOM Evets 和CSS Object Model View主要浏览器相容性状态的最受欢迎的出处。

HTML到JavaScript转换器

HTML到JavaScript转换器获得置标并将它转换成一系列可以在JavaScript块中使用的documet.write()申明。

Glimmer

Glimmer是一种桌面应用软件,可以用它利用jQuery库的作用在网页上轻松制作交互式元素。可以用它轻松制作交错感受如旋转相册/报头,下拉导航,悬停效果,或自定义动画。

jQuery Fuctio Builder

你可以用这个工具很快建立一个函数集,当页面加载完毕/准备完毕时,调用该函数集。

JavaScript Regex Geerator

一个制作正则表达式的在线工具。

10开发环境

Aptaa Studio

Aptaa Studio是一个完整的网络开发环境。它提供有JavaScript代码自动完成和调试,HTML/CSS/JavaScript代码提示,以及对重要的Ajax类库的支持。Aptaa Studio甚至给你页面上所有的,包括你自己的JavaScript提供代码提示。

Komodo Edit

Komodo Edit是一种免费开放的源编辑程序。它提供自动完成,调用提示,多种语言支持,语法高亮颜色显示,语法检查,Vi emulatio,Emacs快捷键绑定等等功能。扩展Komodo Edit是其最实用的功能之一。你会发现各种对[1]者有用的扩展(如JSLit plugi for Komodo, Vekma JavaScript Debugger,等等)。

Spket IDE

Spket IDE是JavaScript和XML开发功能强大的工具包。JavaScript, XUL/XBL ad Yahoo! Widget开发功能强大的编辑器。JavaScript编辑器有代码完成,语法高亮显示和内容概要等功能,这些功能帮助开发者高效制作出有效的JavaScript代码。Spket IDE为非商业用途免费提供。

11相关信息

相关特性

面向对象性

javascript中并没有类的概念,但是javascript使用了一种叫“原型化继承”的模型,而且javascript中也有作用域、闭包、继承、上下文对象等概念

作用域

作用域是指变量存在的域,在文档中的javascript脚本的作用域都是widow。在javascript,fuctio和let分隔作用域

例如下面这个作用域的例子:

var myVariable="outside";

fuctio myFuctio(){

var myVariable="iside";

alert(myVariable);

}

myFuctio();

alert(myVariable);

结果会是先弹出内容为“iside”的对话框,然后弹出内容为“outside”的对话框,这就是fuctio建立了一个作用域,而第一次提示的是myFuctio作用域内的myVariable

下面是一个let控制作用域的例子:

var myVariable="outside";

let(myVarialbe="iside") alert(myVariable); // iside

alert(myVariable); // outside

let语句是在javascript 1.7中加入的

闭包

闭包也和作用域有关,它指的就是一个封闭的作用域(拥有外部变量,函数无法访问的变量和函数),一般都是用一个匿名函数来做成闭包的

(fuctio(){

var myVariable="private",

})();

alert(myVariable); // udefied

上下文对象

上下文对象指的就是this对象。它是一个只能读取而不能直接赋值的对象(就是你只能对this拥有的属性和方法赋值)。上下文对象在javascript可以说发挥的淋漓尽致。

如果你在一个对象(Object)中使用this,指的就是这个对象

var obj={

getThis:fuctio(){

retur this;

}

};

alert(obj.getThis===obj); // true

同样的,在作用域中已经提到过文档中javascript对象都属于widow,那么下面这个例子

alert(widow===this);

也将提示true。

上下文对象在事件侦听器中指的就是发生事件的对象

documet.body.addEvetListeer('click',fuctio(){

alert(this===documet.body); // true

},false);

this在构造函数中则是指实例

fuctio Perso(ame){

thisame=ame;

}

var Sam=ew Persom();

这里this指的就是Sam。

区别

与Java的不同

javascript完全手册

Java之于Javascript就好比Car(汽车)之于Carpet(地毯)。

——来自Useet上的Javascript讨论组

中国本地版的说法应该是这样的:Java之于JavaScript就好比雷锋和雷峰塔的关系。

很多人看到Java和JavaScript都有“Java”四个字,就以为它们是同一样东西,连我自己当初也是这样。事实上,JAVA语言和JavaScript语言是相关的,但是它们的联系并非你想像的那样紧密。首先Java语言是SUN Microsystems公司的产品,而JavaScript是Netscape公司的产品。

其次它们在功能上也有些差异:Java在客户端的运行的应用程序叫做Java Applet,是嵌在网页中,而又有自己独立的运行窗口的小程序。Java Applet 是预先编译好的,一个Applet 文件(.class)用Notepad 打开阅读,根本不能理解。Java Applet 的功能很强大,可以访问https、ftp等协议,甚至可以在电脑上种病毒(已有先例了)。相比之下,JavaScript 的能力就比较小了。JavaScript 是一种“脚本”(“Script”),它直接把代码写到HTML 文档中,浏览器读取它们的时候才进行编译、执行,所以能查看HTML 源文件就能查看JavaScript 源代码。JavaScript 没有独立的运行窗口,浏览器当前窗口就是它的运行窗口。它们的相同点,我想只有同是以Java 作编程语言一点了。

Java是由Su Microsystems公司于1995年5月推出的Java程序设计语言和Java平台的总称。用Java实现的HotJava浏览器(支持Java applet)显示了Java的魅力:跨平台、动感的Web、Iteret计算。从此,Java被广泛接受并推动了Web的迅速发展,常用的浏览器均支持Java applet。另一方面,Java技术也不断更新。

Java平台由Java虚拟机(Java Virtual Machie)和Java 应用编程接口(Applicatio Programmig Iterface、简称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的多得多,所以许多库(比如Cocurret、Thread)都是采用Jscript的格式编写的。

与DOM的关系

DOM是Documet 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的自定义函数和变量(当然不能用内置变量和函数)通过转换调用内置函数。

<script laguage="vbscript">

fuctio AL()

AL = "S"

ed fuctio

</script>

<script laguage="javascript">

alert(AL());

</script>

至于效果就自己看吧。

相关版本

版本历史

版本 发布日期 基于 NetscapeNavigator MozillaFirefox IteretExplorer Opera Safari 谷歌Chrome
1 1996年3月
2
3


1.1 1996年8月
3




1.2 1997年6月
4,0-4,05




1.3 1998年10月 ECMA-262,1,editio,/,ECMA-262,2,editio 4,06-4,7x
4


1.4

Netscape







Server




1.5 2000年11月 ECMA-262,3,editio 6 1 5.5(JScript5.5),6.(JScript5.6),(JScript5.7),7.(JScript5.7), 6,0,7,0,8,0,9

1.6 2005年11月 1.5+Arrayextras+ArrayadStriggeerics+E4X
1.5

3,0,3,1
1.7 2006年10月 1.6+Pythoicgeerators+Iterators+let
2

3,2,4,0 1
1.8 2008年6月 1.7+Geeratorexpressios+Expressioclosures
3



1.8.1
1,8,+,Mior,Updates
3.5



1.9
1,8,1,+,ECMAScript,5,Compliace
4



版本标准

JavaScript已经被Netscape公司提交给ECMA制定为标准,称之为ECMAScript,这个标准由ECMA组织发展和维护,标准编号ECMA-262。这个标准基于JavaScript (Netscape) 和JScript (Microsoft)。Netscape (Navigator 2.0) 的Breda 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 Editio。符合该标准的实现有:

1. Microsoft公司的JScript

2. Mozilla的Javascript-C(C语言实现)

3. SpiderMokeyMozilla的Rhio(Java实现)

4. Digital Mars公司的DMDScript

5. 谷歌公司的V8WebKit

ECMA-262 4th Editio正在开发的过程中,与其对应的JavaScript的版本为JavaScript 2.0,也正在开发过程中。

12其它信息

进阶技术

AJAX全称为“Asychroous JavaScript ad XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。根据Ajax提出者Jesse James Garrett建议AJAX:

1.使用XHTML+CSS来表示信息

2.使用JavaScript操作DOM(Documet Object Model)进行动态显示及交互

3.使用XML和XSLT进行数据交换及相关操作

4.使用XMLHttpRequest对象与Web服务器进行异步数据交换

5.使用JavaScript将所有的东西绑定在一起

6.使用JavaScript 创建模块化的交互用户界面[2]

AJAX的应用使用支持以上技术的Web浏览器作为运行平台。这些浏览器包括:Iteret Explorer、Mozilla、Firefox、Opera、Koqueror及Mac OS的Safari。但是Opera不支持XSL格式对象,也不支持XSLT。

程序举例

编写第一个JavaScript程序

<html>

<head>

type="text/javascript">]]>

<!--

documet.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> 标签结束。

在web编程中一些比较常用的javascript函数

/**

* 一些常用的javascript函数(方法)

*

* 为便于使用,均书写成Strig对象的方法

* 把他保存为.js文件,可方便的扩展字符串对象的功能

*

* 方法名 功 能

* ----------- --------------------------------

*Trim删除首位空格

* Occurs 统计指定字符出现的次数

* isDigit 检查是否由数字组成

* isAlpha 检查是否由数字字母和下划线组成

* isNumber 检查是否为数

* leb 返回字节数

* isIChiese 检查是否包含汉字

* isEmail 简单的email检查

* isDate简单的日期检查,成功返回日期对象

* isIList 检查是否有列表中的字符字符

* isIList 检查是否有列表中的字符字符

*/

/*** 删除首尾空格 ***/

Strig.prototype.Trim = fuctio() {

retur this.replace(/(^\s*)|(\s*$)/g, "");

}

/*** 统计指定字符出现的次数 ***/

Strig.prototype.Occurs = fuctio(ch) {

// var re =eval("/[^"+ch+"]/g");

// retur this.replace(re, "").legth;

retur this.split(ch).legth-1;

}

/*** 检查是否由数字组成 ***/

Strig.prototype.isDigit = fuctio() {

var s = this.Trim();

retur (s.replace(/\d/g, "").legth == 0);

}

/*** 检查是否由数字字母和下划线组成 ***/

Strig.prototype.isAlpha = fuctio() {

retur (this.replace(/\w/g, "").legth == 0);

}

/*** 检查是否为数 ***/

Strig.prototype.isNumber = fuctio() {

var s = this.Trim();

retur (s.search(/^[+-]?[0-9.]*$/) >= 0);

}

/*** 返回字节数 ***/

Strig.prototype.leb = fuctio() {

retur this.replace(/[^\x00-\xff]/g,"**").legth;

}

/*** 检查是否包含汉字 ***/

Strig.prototype.isIChiese = fuctio() {

retur (this.legth != this.replace(/[^\x00-\xff]/g,"**").legth);

}

/*** 简单的email检查***/

Strig.prototype.isEmail = fuctio() {

var strr;

var mail = this;

var re = /(\w+@\w+\.\w+)(\.\w*)(\.\w*)/i;

re.exec(mail);

if(RegExp.!="" && RegExp.!="." && RegExp.!="."){

strr = RegExp.+RegExp.+RegExp.;

}else if(RegExp.!="" && RegExp.!="."){

strr = RegExp.+RegExp.;

}else{

strr = RegExp.;

}

retur (strr==mail);

}

/*** 简单的日期检查,成功返回日期对象 ***/

Strig.prototype.isDate = fuctio() {

var p;

var re1 = /(\d)[年./-](\d)[月./-](\d)[日]?$/;

var re2 = /(\d)[月./-](\d)[日./-](\d)[年]?$/;

varre3= /(\d)[月./-](\d)[日./-](\d)[年]?$/;

if(re1.test(this)) {

p = re1.exec(this);

retur ew Date(p[1],p[2],p[3]);

}

if(re2.test(this)) {

p = re2.exec(this);

retur ew Date(p[3],p[1],p[2]);

}

if(re3.test(this)) {

p = re3.exec(this);

retur ew Date(p[3],p[1],p[2]);

}

retur false;

}

/*** 检查是否有列表中的字符字符 ***/

Strig.prototype.isIList = fuctio(list) {

var re = eval("/["+list+"]/");

retur re.test(this);

}

脚本调试

随着用JavaScript编程的深入,你会开始理解那些JavaScript给出的不透明错误信息。一旦你理解了你常犯的一般性错误,你就会很快知道怎样避免它们,这样你写的代码中的错误将越来越少。编程实际上是一种能随着时间不断飞快进步的技术。但是不管变得多么熟练,你仍然要花一些时间调试你的代码。如果你做过家庭作业,或有过JacaScript编程经验,你会知道相当多的时间是花在调试上。这很正常 - 这只是编程者必须做的事之一。实际上,按照大量的研究,程序员平均百分之五十的时间花在解决代码中的错误。

关键是学会怎样有效地调试你的程序。我有一些技巧可以帮助你解决程序为什么没有象应该的那样运行,或者帮你首先避免写有很多错误的代码:

1.用不同方式打印出变量

2.注意一般性错误

3.编码之前先想好

--------------------------------------------------------------------------------

如果JavaScript没能捕获你的错误,你也没有通过查看代码发现错误,有时打印出变量会对你有所帮助。最简单的方法是象下面这样使用一个alert():

// theGreetig gets a ame usig getName, the presets

// oe or two alert boxes depedig o what the ame is

fuctio getName(){

var first_ame = prompt("what's your first ame?","");

var last_ame = prompt("what's your last ame?","");

var the_ame = first_ame + " " + last_ame;

alert("i getName, the_ame is: " + the_ame);

}

-------------------------------------------------------------------------------

1.一般性程序错误

多数错误只是无聊的语法错误。记住关闭那些引号,大括号和小括号会花费很长时间,不过幸运的是JavaScript自动错误检测器能捕获大部分此类错误。虽然JavaScript错误检测器随着日渐复杂的流览器而不断完善,但是一些错误仍会溜走。下面是一些需要留意的常见错误:

2.混淆变量名或函数名

大写和复数变量和函数名产生的错误令人烦恼地经常出现,有时JavaScript错误检测器不能捕获它们。通过建立和坚持使用一种对变量和函数的命名协定,会大大减少这些麻烦的数量。例如,我全部用小写字母定义变量,并用下划线代替空格 (my_variable,the_data, a_example_variable),用内置符号表示函数 (addThreeNumbers(), writeError()等)。我避免使用任何复数,因为我总是忘记那些变量是不是复数。

3.偶然地使用了保留字

一些字不能作为变量名,因为它们已经被JavaScript使用。例如,不能定义一个叫“if”的变量,因为它实际上是JavaScript的一部分 - 如果使用“if”,你会遇到各种麻烦。当你因为使用命名为“if”的变量而变得疯狂时,一个叫做“documet”的变量是很诱人的。不幸的是,“documet”是一个JavaScript对象。另一个经常遇到的问题是把变量命名为“ame”(窗体元素有“ames”属性)。把变量命名为“ame”不会总出问题,只是有时 - 这会更使人迷惑 - 这就是避免使用“ame”变量的原因。

不幸的是,不同的流览器有不同的保留字,所以没有办法知道该回避哪些字。最安全的办法是避免使用已经成为JavaScript一部分的字和HTML使用的字。如果你因为变量遇到问题,并且不能发现哪儿错了,试着把变量改个名字。如果成功了,你或许就避开了保留字。

4.记住在逻辑判断时应该用两个等号

一些流览器能捕获这种错误,有些却不能。这是一种非常常见的错误,但是如果流览器不能替你指出来,你就很难发现。下面是一个这种错误的例子:

var the_ame = prompt("what's your ame?", "");

if (the_ame = "the mokey"){

alert("hello mokey!");

} else {

alert("hello strager.");

}

这段代码将产生“hello mokey!”警告对话框 - 不管你在提示里敲的是什么 - 这不是我们希望的。原因是在if-the语句中只有一个等号,这句话告诉JavaScript你想让一件事等于另一件。假设你在提示中敲的是“robbie the robot”。最开始,变量the_ame的值是“robbie the robot”,但是随后if语句告诉JavaScript你想把the_ame设为“the mokey.”。于是JavaScript很高兴地执行你的命令,送一个“true”消息给if-the语句,结果警告对话框每次都出现“hello mokey!”。这种阴险的错误会使你发疯,所以注意使用两个等号。

5.偶然给变量加上了引号,或忘了给字符串加引号

我不时遇到这个问题。JavaScript区分变量和字符串的唯一方法是:字符串有引号,变量没有。下面有一个明显的错误:

var the_ame = 'koko the gorilla';

alert("the_ame is very happy");

虽然the_ame是一个变量,但是程序还会产生一个提示“the_ame is very happy,”的警告对话框。这是因为一旦JavaScript看见引号包围着某些东西就不再考虑它,所以当你把the_ame放在引号里,你就阻止了JavaScript从内存中查找它。下面是一个不太明显的此类错误的扩展(我们已经在第三天的课程里见过):

fuctio wakeMeI3()

{

var the_message = "Wake up! Hey! Hey! WAKE UP!!!!";

setTimeout("alert(the_message);", 3000);

}

这里的问题是你告诉JavaScript三秒后执行alert(the_message)。但是,三秒后the_message将不再存在,因为你已经退出了函数。这个问题可以这样解决:

fuctio wakeMeI3()

{

var the_message = "Wake up!";

setTimeout("alert('" + the_message+ "');", 3000);

}

把the_message放在引号外面,命令“alert('Wakeup!');”由setTimeout预定好,就可以得到你想要的。这只是一些可能在你的代码中作祟的很难调试的错误。一旦发现了它们,就有不同的或好或差的方法来改正错误。你很幸运,因为你能从我的经验和错误中获益。

------------------------------------------------------------------

找到错误,有时候虽然很难,却只是第一步。然后你必须清除错误。下面是一些在清除错误时应该做的一些事:

首先拷贝你的程序

有些错误很难清除。实际上,有时在根除错误时,你会破坏整个程序 - 一个小错误使你疯狂。在开始调试前保存你的程序是确保错误不会利用你的最好方法。

一次修正一个错误

如果你知道有好几个错误,应该修正一个,检验其结果,再开始下一个。一次修正许多错误而不检验你的工作只会招致更多的错误。

警惕迷惑性错误

有时你知道存在一个错误,但不真正知道为什么。假设有一个变量“idex”,由于某种原因“idex”总比你期望的小1。你可以做下面两件事中的一件:在那儿坐一会儿,解决它为什么变小了,或只是耸耸肩;在使用“idex”之前加1,然后继续进行。后一种方法称为迷惑编程。当你开始思考“究竟是怎么了 - 为什么idex是2而不是3呢?好吧...我现在先让它正常工作,以后再修改错误。”时,你正在把一块护创膏布贴到一处潜在的硬伤上。

迷惑编程可能在短期内有用,但是你可以看到长期的厄运 - 如果你没有完全理解你的代码到可以真正清除错误的程度,那个错误将会回来困扰你。它或者以另一种你不能解决的怪异错误的方式回来,或者当下一个可怜的被诅咒的灵魂读你的代码时,他会发现你的代码非常难以理解。

寻找小错误

有时候,对程序员来说,剪切和粘贴代码的能力是一种很坏的事。通常,你会在一个函数中写一些JavaScript代码,然后把它们剪切和粘贴到另一个函数中。如果第一个函数有问题,那么现在两个函数都有问题。我并不是说你不应该剪切和粘贴代码。但是错误会以某种方式繁殖,如果你发现了一个错误,你就应该寻找与其相似的其它错误。(或者在制作它的若干版本之前确切知道会发生什么。)变量名拼写错误在一段JavaScript代码中会突然多次出现 - 在一个地方把the_ame错拼成teh_ame,你就有机会在其它地方发现这个错误。

如果所有其它的方法都失败了

如果你正坐在那儿盯着一个错误,并且不能指出是怎么回事(或者根本没有发现错误,但是因为程序不能正确运行,你知道存在错误),你最好从计算机前走开。去读一本书,在角落散散步,或者拿一杯可口的饮料 - 做些事,任何事,但不要去想程序或问题。这种技术在某种情况下叫做“酝酿”,效果非常好。在你稍做休息和放松后,再试着找出错误。你会得到一幅比较清晰的景象。“酝酿”起作用是因为它使你从思维混乱中解脱出来。如果沿着一条错路走太远,你有时会发现无法转身。这种情况下最好开辟一条新路。我知道这会令人发火,但确实有效。真的!

如果上面的方法还不成功...

请求别人的帮助。有时你的思想会形成定式,只有换一种眼光才能洞察问题之所在。在结构化编程环境中,程序员们定期地互相复查别人的代码。这可以适当地叫做“代码复查”,不仅可以帮助消除错误,还可以得到更好的代码。不要怕把你的JavaScript代码给别人看,它会使你成为更好的JavaScript程序员。

但是消除错误的绝对最好的办法是...

一开始就创建没有错误的代码。

----------------------------------------------------------------------

编好程序的关键是程序是写给人的,不是写给计算机的。如果你能明白其他人或许会阅读你的JavaScript,你就会写更清晰的代码。代码越清晰,你就越不容易犯错误。机灵的代码是可爱的,但就是这种机灵的代码会产生错误。最好的经验法则是KISS,即KeepIt Simple,Sweetie(保持简单,可爱)。另一个有帮助的技术是在写代码之前作注释。这迫使你在动手之前先想好。一旦写好了注释,你就可以在其下面写代码。

下面是一个用这种方法写函数的例子:

第一步:写注释

第二步:填充代码

这种先写注释的策略不仅迫使你在写代码前思考,而且使编码的过程看起来容易些 - 通过把任务分成小的,易于编码的各个部分,你的问题看起来就不太象珠穆朗玛峰,而象一群令人愉悦的起伏的小山。

最后...总以分号结束你的每一条语句。

虽然并不是严格必需,你应该养成以分号结束每一条语句的习惯,这样可以避免这行后面再有代码。忘了加分号,下一行好的代码会突然产生错误。把变量初始化为“var”,除非你有更好的理由不这样做。用“var”把变量局域化可以减少一个函数与另一个不相关函数相混淆的机会。

好了,既然你已经知道了如何编码,下面就让我们学习怎样使

你的JavaScript快速运行。>>

---------------------------------------------------------  

按速度优化JavaScript代码  

1.限制循环内的工作量  

2.定制if-the-else语句,按最可能到最不可能的顺序  

3.最小化重复执行的表达式  

使用调试工具  

如果你是Firefox的用户,那么你可以到添加组件的网页中搜索一些用于网页开发的组件  

推荐:Firebug  

一款非常优秀的组件,可以指出你的脚本中的错误,查看DOM树,并且还有CSS的调试工具

编写JavaScript  

<html>

<head>  

<Script Laguage ="JavaScript">  

// JavaScript Appears here.  

alert("这是第一个JavaScript例子!");  

alert("欢迎你进入JavaScript世界!");  

alert("今后我们将共同学习JavaScript知识!");  

</Head>

</Html>

JavaScript代码由 <Script Laguage ="JavaScript">...</Script>说明。在标识<Script Laguage ="JavaScript">...</Script>之间就可加入JavaScript脚本。 alert()是JavaScript的窗口对象方法,其功能是弹出一个具有OK对话框并显示()中的字符串。 通过<!-- ...//-->标识说明:若不认识JavaScript代码的浏览器,则所有在其中的标识均被忽略;若认识,则执行其结果。使用注释这是一个好的编程习惯,它使其他人可以读懂你的语言。 JavaScript 以 </Script> 标签结束。

第三方Javascript库

库,指得是可以方便应用到现有开发体系中的、现成的代码资源。库不仅为大部分日常的DOM教本变成工作提供了快捷的解决方案,而且也提供了许多独特的工具。虽然库使用起来很方便,但它们也并非能解决你所有的问题。在使用库之前,一定要保证真正理解javascript的DOM原理。

这些库一般是一个(或多个)js文件,只要把他们导入你的网页就能使用了,常用的库有:

DOMAssistat https://www.robertyma.com/domass/

jQuery https://jquery.com/

MochiKit https://mochikit.com/

Prototype https://prototypejs.org/

YUI(Yahoo! User Iterface) https://developer.yahoo.com/yui/

不建议你把这些库全部下载并导入你的网页,因为它们的文件都是很大的,很容易影响网页的下载速度,你可以选择其中一个你需要的。

在下载前请确认这些库的使用许可。

下面一一介绍这些库的主要功能

DOMAssistat

是一个轻量级和模块化的库,对于保持文件的最小化很合适。虽然缺少Ajax通信方法意味着你可能还需要其他库来获得相应功能,但考虑到Ajax对网站的破坏,这也不一定是一件坏事。此外,使用这个库选择元素有一点受限——只包含通过id和通过classame两种方法。而这方面其他库有更高级的CSS选择符的选择方法。

操作DOM文档的说明:https://www.robertyma.com/domass/modules-domass-cotet.htm

jQuery

是一个快速、简明的javascript库,它能够简化遍历HTML文档、处理事件、生成动画以及为网页添加Ajax交互功能的过程。通过jQuery极其强大的选择方法,可以组合使用CSS3(甚至包括元素的属性选择符)、Xpath(XML的一种定位语言)的选择符取得DOM元素。而简化的Ajax和事件方法与连缀语法的结合运用,则能够让代码更整洁也更容易理解。在jQuery背后有一个非常大的社区,其中许多插件开发者为这个库添加了很多超出其基本功能之外的特性

要了解jQuery与其他库的更多注意事项,请参考https://docs.jquery.com/Usig_jQuery_with_Other_Libraries/

操纵DOM文档的说明:https://docs.jquery.com/DOM/Maipulatio/

MochiKit

据其网站说,MochiKit ”让Javascript不那么差劲“。经过了完备的测试而且文档也很完善的MochiKit库,也提供了与其他库相同的DOM操作方法。而且通过将色彩和视觉效果,以及它自己的调试用的日志面板整合起来,使得其他库变得不再必要。此外,这个库中的自定义事件和内置的拖放支持也会使创建Web应用程序更加容易。

操纵DOM文档的说明:https://www.mochikit.com/doc/html/MochiKit/DOM.html

Prototype

Prototype ”是一个针对简化动态Web开发的框架“。这个库中还包含许多好用的DOM操作函数,以及一个比众所知的$()函数更加流行的Ajax对象。Prototype唯一不足的地方就是它缺乏对命名空间的支持,也就是说在将它与其他的库公用时还不够方便。

操纵DOM文档的说明:https://www.prototypejs.org/api/elemet/

YUI

YUI库是一组以javascript编写的,为使用诸如DOM脚本、DHTML以及Ajax等技术构建丰富的交互式Web应用而开发的实用工具和控件的集合。YUI库中也包含一些核心的CSS资源。YUI库拥有庞大的开发者社区以及大量的文档。这个库中包含了从简单的DOM操作到高级效果以及全部功能饰件(widget)在内的、你所能够想象出来的各种特性。虽然这个库整体上划分成了许多小文件和命名空间,但有为了确定要使用哪个文件和找到这个文件也是件令人烦恼的事——仅仅从简单的说明就长达20页就能看出这个库有多大来。

操纵DOM文档的说明:https://developer.yahoo.com/yui/dom/

ExtJs

1、ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术,由开发人员 JackSlocum开发,通过参考JavaSwig等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。

2、Ext的UI组件模型和开发理念脱胎、成型于Yahoo组件库YUI和Java平台上Swig两者,并为开发者屏蔽了大量跨浏

功能介绍

JavaScript,缩写为JS,是一种高级的、多范式、解释型的编程语言,是一门基于原型、函数先行的语言,它支持面向对象编程、命令式编程以及函数式编程。[1]JavaScript提供语法来操控文本、数组、日期以及正则表达式等,不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。它已经由ECMA(欧洲电脑制造商协会)通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支持。[1]

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态
案例
采用媒体查询、rem、自适应布局等方法完成pc端和移动端的适配展示; 对数据进行可视化展示,使数据更直观、更清晰
因为 UI 的定制化需求,沉淀了数据可视化物料资源,可在新的业务中快速落地实现利用; 积累敏捷开发经验,跟随项目完成了从 0 到 1,以及从 1 到 N 的进化流程。积累了一个项目由最初技术实现,到后期技术迭代的完整经验; 电商项目数据繁多且交互频繁,加强了交互效果,优化代码,减少了页面等待时间; 项目有特殊的展示需求且现有插件无法满足需求,为完成特定功能的展示,实现vue插件的开发,完成了个性化需求的定制; 在项目开发期间接触插件的开发,学习npm发布、管理流程;
该项目主要负责司机抢单送货完成订单并提现,司机通过货主发布运单任务抢单,抢单成功后进行送货,送货完成后可以款项提现。 1.通过 uniapp 快速构建项目,实现项目骨架搭建,2.使用 Vue3 框架,运用 Uni UI 库构建项目 UI 结构
1740APPvueuniapp
该后台管理项目依赖 Saas 平台服务搭建金单系统,货主通过平台下单任务并付款给平台,司机再通过订单平台枪抢单领任务,完成送货后平台把款项付给司机。 1.使用 Qiankun 搭建微前端供多人开发 2. 使用 Vue3+Ts 技术开发 3. 使用 ElementuiPlus 进行样式与交互
该系统通过先进的技术手段,实现对环卫工人工作状态和作业情况的全面监管。利用定位技术,能够实时追踪环卫工人的位置,确保他们在规定区域内进行清扫作业。同时,系统具备工作轨迹记录功能,方便管理部门了解环卫工人的作业路径和工作覆盖范围。 考勤管理功能可以准确记录环卫工人的到岗和离岗时间,保障工作时间的合规性。通过数据分析模块,能对环卫工人的工作绩效进行科学评估,为管理决策提供有力依据。
1970vuecss地图(Map)HTML5开发相关物联网
当前共9419个项目

评论