javascirpt历史澄清误解基本概念特点编程语言web2.0网页javascript - javascirpt知识大全

目录
1历史 2澄清误解 3基本概念 4特点 5与Java的不同 6开发工具

历史
　　大概在1992年，一家称作Nombas的公司开始开发一种叫做C减减（C-minus-minus，简称Cmm）的嵌入式脚本语言。这个脚本语言捆绑在一个叫做CEnvi的共享软件产品中，当Netscape Navigator崭露头角时，Nombas开发了一个可以嵌入网页中的CEnvi的版本。这些早期的试验称为EspressoPage（浓咖啡般的页面），它们代表了第一个在万维网上使用的客户端脚本语言。而Nombas丝毫没有料到它的理念将会成为因特网的一块重要基石。 
澄清误解
　　* JavaScript是Java的变种吗？
　　JavaScript最初的确是受Java启发而开始设计的，而且设计的目的之一就是“看上去像Java”[2]，因此语法上有很多类似之处，许多名称和命名规范也借自Java。但是实际上，JavaScript的主要设计原则源自Self和Scheme[3]，它与Java本质上是不同的。它与Java名称上的近似，是当时网景为了营销考虑与Sun公司达成协议的结果。
　　* JavaScript与JScript相同吗？
　　为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）建立了ECMA-262标准（ECMAScript）。现在两者都属于ECMAScript的实现。
　　* JavaScript是一门简单的语言吗？
　　尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的编程语言来推广和宣传，但是JavaScript是一门具有非常丰富特性的语言，它有着和其他编程语言一样的复杂性，或更甚复杂。实际上，你必需对JavaScript有扎实的理解才能用它来撰写比较复杂的程序。 
基本概念
　　在这里只作简单介绍，在以后的例子中结程序再作具体解释其作用。
　　1、运算符
　　运算符就是完成操和的一系列符号，它有七类：
　　赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位移运算符(|,&,<<,>>,~,^)和字符串运算符(+)。
　　可能很多人不知道"==="什么。
　　在这里，我为大家解释一下，在javascript中 "==="才是全等 只有"==="两边的内存地址也相等 才会返回真
　　而"=="只是值相等就会返回真
　　例如：null==undefined 会返回真 , 但是null===undefined 就会返回假！
　　2、表达式
　　运算符和操作数的组合称为表达式，通常分为四类：赋值表达式、算术表达式、布尔表达式和字符串表达式。
　　3、语句
　　Javascript程序是由若干语句组成的，语句是编写程序的指令。Javascript提供了完整的基本编程语句，它们是：
　　赋值语句、switch选择语句、while循环语句、for循环语句、for each循环语句、do while循环语句、break循环中止语句、continue循环中断语句、with语句、try...catch语句、
　　if语句（if..else，if...else if ...）、let语句。
　　4、函数
　　函数是命名的语句段，这个语句段可以被当作一个整体来引用不着和执行。使用函数要注意以下几点：
　　1）函数由关键字function定义（也可由Function构造函数构造）；
　　2）使用function关键字定义的函数在一个作用域内是可以在任意处调用的（包括定义函数的语句前）；而用var关键字定义的必须定义后才能调用；
　　3）函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名；
　　4）参数表示传递给函数使用或操作的值，它可以是常量，也可以是变量，也可以是函数，在函数内部可以通过arguments对象（arguments对象是一个伪数组，属性callee引   用被调用的函数）访问所有参数；
　　5）return语句用于返回表达式的值。
　　6）yield语句扔出一个表达式，并且中断函数执行直到下一次调用next。
　　一般的函数都是以下格式：
　　function myFunction(params){
　　//执行的语句
　　}
　　函数表达式：
　　var myFunction=function(params){
　　//执行的语句
　　}
　　匿名函数，它常作为参数在其他函数间传递：
　　window.addEventListener(‘load‘,function(){
　　//执行的语句
　　},false);
　　5、对象
　　Javascript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。
　　一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的颜色为蓝色。
　　6、事件
　　用户与网页交互时产生的操作，称为事件。事件可以由用户引发，也可能是页面发生改变，甚至还有你看不见的事件（如Ajax的交互进度改变）。绝大部分事都由用户的动作所引发，如：用户按鼠标的按钮，就产生click事件，若鼠标的指针的链接上移动，就产生mouseover事件等等。在Javascript中，事件往往与事件处理程序配套使用。
　　而对事件的处理，W3C的方法是用addEventListener()函数，它有三个参数：事件，引发的函数，是否使用事件捕捉。为了安全性，建议将第三个参数始终设置为false；
　　传统的方法就是定义元素的on...事件，它就是W3C的方法中的事件参数前加一个“on”。而IE的事件模型使用attachEvent和dettachEvent对事件进行绑定和删除。javascript中事件还分捕获和冒泡两个阶段，但是传统绑定只支持冒泡事件。学习Javascript比较快速有效的方法是先熟悉一些基本概念，然后找几个别人设计好的程序认真仔细地分析一遍，再稍作改动，再看看能否达到预期目的，不断地举一反三，既可以加深对一些参数、设计方法的理解，又可以快速地提高自己的水平。另外，再提醒一下：Javascript对大小写是敏感的，特别是一些对象、方法、属性的大小写一定要一致，要养成一种良好的习惯，否则在调试程序时可要累死你了。
　　7、变量
　　如 var myVariable = "some value";
　　变量有它的类型，上例中myVariable的类型为string（字符串）
　　javascript支持的常用类型还有：
　　object：对象
　　array：数组
　　number：数；
　　boolean：布尔值，只有true和false两个值，是所有类型中占用内存最少的；
　　null：一个空值，唯一的值是null；
　　undefined：没有定义和赋值的变量
　　实际上javascript的变量是弱变量类型，你赋值给他的是字符串，他就是String .
　　是数字他就是整形。是true和false他就是boolean型（注意，不能加引号，不然会被当成字符串处理）。 
特点
　　能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表），这里主要讲Javascript。那么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 的特点是无穷无尽的，只要你有创意。 
与Java的不同
　　Java之于Javascript就好比Car（汽车）之于Carpet（地毯）。
　　——来自Usenet上的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是由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。 
开发工具
　　javascript程序是纯文本的，且不需要编译，所以任何纯文本的编辑器都可以编辑javascript文件。在Dreamweaver CS4中不仅有很好的代码高亮，还有较全的代码提示和错误提示，相比其他编辑器来说是十分强大的。 
使用方法
　　一、Javascript在网页的用法
　　Javascript加入网页有两种方法：
　　1、直接加入HTML文档
　　这是最常用的方法，大部分含有Javascript的网页都采用这种方法，如：
　　<script type="application/javascript">
　　<!--
　　document.writeln("这是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>
　　2、引用方式
　　如果已经存在一个Javascript源文件（通常以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：
　　<script src＝“url” type="text/javascript"></script> 
　　其中的Url就是程序文件的地址。同样的，这样的语句可以放在HTML文档头部或主体的任何部分。 如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个Javascript源代码文件“Script.js”，其内容如下：
　　document.writeln("这是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给出的不透明错误信息。一旦你理解了你常犯的一般性错误，你就会很快知道怎样避免它们，这样你写的代码中的错误将越来越少。编程实际上是一种能随着时间不断飞快进步的技术。但是不管变得多么熟练，你仍然要花一些时间调试你的代码。如果你做过家庭作业，或有过JacaScript编程经验，你会知道相当多的时间是花在调试上。这很正常 - 这只是编程者必须做的事之一。实际上，按照大量的研究，程序员平均百分之五十的时间花在解决代码中的错误。
　　调试的技巧：
　　根据浏览器的提示信息
　　选择浏览器是很重要的，不同的浏览器的错误提示都不同，在浏览器中错误信息最容易理解的，能最快找出错误的，就是firefox和opera了。它们都会给出详细的出错原因和行号。
　　使用调试工具
　　如果你是Firefox的用户，那么你可以到添加组件的网页中搜索一些用于网页开发的组件
　　推荐：Firebug
　　一款非常优秀的组件，可以指出你的脚本中的错误，查看DOM树，查看cookie，ajax通信，并且还有CSS的调试工具，而且也有不少firebug的扩展。
　　javascript debugger
　　这是mozilla开发的调试工具，项目代号叫venkman，和gecko的javascript解析器无缝集成，功能非常强大。
　　清除浏览器缓存
　　有时浏览器会在网页明明修改过的时候却依然使用缓存里的网页来显示，这时最好强制刷新网页以重新载入数据，如果还不行就清除缓存。
　　输出变量
　　如果你使用firebug调试的话，可以很方便地在脚本里用console.log()来输出变量的值，而且幸运的是，firebug还会对你输出的变量进行解析，在控制台里显示一个清晰的变量结构
　　如果你没有firebug，那么可以用alert代替，不过当有几百个变量输出时，很可能不得不强行关闭浏览器。在网页里专门放置一个调试用的div也是一种不错的解决办法。 
编写第一个JavaScript程序
　　<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> 标签结束。 
Javascript与DOM
　　DOM是Document Object Model（文档对象模型）的简称，它是让javascript与页面交互的一种方式，能够动态修改文档中的节点，元素，属性等。
　　DOM不仅适用于xhtml文档，对于所有的xml文档dom都是可以使用的。
　　DOM的级别
　　1级：基本的节点操作一级里都包括了
　　2级：增加了对样式表，文档显示，事件处理，等的支持
　　3级：可以用javascript加载和保存文档，检查文档错误 
面向对象的javascript
　　javascript中并没有类的概念，但是javascript使用了一种叫原型化继承的模型，而且javascript中也有作用域、闭包、继承、上下文对象等概念
　　
　　作用域
　　作用域是指变量存在的域，在文档中的javascript脚本的作用域都是window。在javascript，function和let分隔作用域
　　例如下面这个作用域的例子：
　　var myVariable="outside";
　　function myFunction(){
　　var myVariable="inside";
　　alert(myVariable);
　　}
　　myFunction();
　　alert(myVariable);
　　结果会是先弹出内容为“inside”的对话框，然后弹出内容为“outside”的对话框，这就是function建立了一个作用域，而第一次提示的是myFunction作用域内的myVariable
　　下面是一个let控制作用域的例子：
　　var myVariable="outside";
　　let(myVarialbe="inside") alert(myVariable); // inside
　　alert(myVariable); // outside
　　let语句是在javascript 1.7中加入的
　　闭包
　　闭包也和作用域有关，它指的就是一个封闭的作用域（拥有外部变量，函数无法访问的变量和函数），一般都是用一个匿名函数来做成闭包的
　　(function(){
　　var myVariable="private",
　　})();
　　alert(myVariable); // undefined
　　上下文对象
　　上下文对象指的就是this对象。它是一个只能读取而不能直接赋值的对象（就是你只能对this拥有的属性和方法赋值）。上下文对象在javascript可以说发挥的淋漓尽致。
　　如果你在一个对象（Object）中使用this，指的就是这个对象
　　var obj={
　　getThis:function(){
　　return this;
　　}
　　};
　　alert(obj.getThis===obj); // true
　　同样的，在作用域中已经提到过文档中javascript对象都属于window，那么下面这个例子
　　alert(window===this);
　　也将提示true。
　　上下文对象在事件侦听器中指的就是发生事件的对象
　　document.body.addEventListener(‘click‘,function(){
　　alert(this===document.body); // true
　　},false);
　　this在构造函数中则是指实例
　　function Person(name){
　　this.name=name;
　　}
　　var Sam=new Persom();
　　这里this指的就是Sam。 
Javascript库
　　库，指得是可以方便应用到现有开发体系中的、现成的代码资源。库不仅为大部分日常的DOM教本变成工作提供了快捷的解决方案，而且也提供了许多独特的工具。虽然库使用起来很方便，但它们也并非能解决你所有的问题。在使用库之前，一定要保证真正理解javascript的DOM原理。
　　这些库一般是一个（或多个）js文件，只要把他们导入你的网页就能使用了。
　　查用的库有：
　　jQuery：javascript库中的新成员，提供css和xpath选择符查找元素，ajax，动画效果等
　　dojo：一个巨大的库，包括的东西很多，dijit和dojox是dojo的扩展，几乎你想要的各种javascript程序都包括了。
　　prototype：一个非常流行的库，使用了原型链向javascript中添加了很多不错的函数
　　YUI：yahoo！用户界面，非常使用，提供各种解决方案。 
如何提升JavaScript的运行速度
　　递归是拖慢脚本运行速度的大敌之一。太多的递归会让浏览器变得越来越慢直到死掉或者莫名其妙的突然自动退出（在firefox中弹出脚本无响应的对话框），所以我们一定要解决在JavaScript中出现的这一系列性能问题。在这个系列文章的第二篇中，我曾经简短的介绍了如何通过memoization技术来替代函数中太多的递归调用。memoization是一种可以缓存之前运算结果的技术，这样我们就不需要重新计算那些已经计算过的结果。对于通过递归来进行计算的函数，memoization简直是太有用了。我现在使用的memoizer是由Crockford写的，主要应用在那些返回整数的递归运算中。当然并不是所有的递归函数都返回整数，所以我们需要一个更加通用的memoizer()函数来处理更多类型的递归函数。
　　function memoizer(fundamental, cache){ cache = cache || {} var shell = function(arg){ if (!(arg in cache)){ cache[arg] = fundamental(shell, arg) } return cache[arg]; }; return shell;}这个版本的函数和Crockford写的版本有一点点不同。首先，参数的顺序被颠倒了，原有函数被设置为第一个参数，第二个参数是缓存对象，为可选参数，因为并不是所有的递归函数都包含初始信息。在函数内部，我将缓存对象的类型从数组转换为对象，这样这个版本就可以适应那些不是返回整数的递归函数。在shell函数里，我使用了in操作符来判断参数是否已经包含在缓存里。这种写法比测试类型不是undefined更加安全，因为undefined是一个有效的返回值。我们还是用之前提到的斐波纳契数列来做说明：
　　var fibonacci = memoizer(function (recur, n) { return recur(n - 1) + recur(n - 2); }, {"0":0, "1":1});同样的，执行fibonacci(40)这个函数，只会对原有的函数调用40次，而不是夸张的331,160,280次。memoization对于那些有着严格定义的结果集的递归算法来说，简直是棒极了。然而，确实还有很多递归算法不适合使用memoization方法来进行优化。
　　我在学校时的一位教授一直坚持认为，任何使用递归的情况，如果有需要，都可以使用迭代来代替。实际上，递归和迭代经常会被作为互相弥补的方法，尤其是在另外一种出问题的情况下。将递归算法转换为迭代算法的技术，也是和开发语言无关的。这对JavaScript来说是很重要的，因为很多东西在执行环境中是受到限制的（the importance in JavaScript is greater, though, because the resources of the execution environment are so restrictive.）。让我们回顾一个典型的递归算法，比如说归并排序，在JavaScript中实现这个算法需要下面的代码：
　　function merge(left, right){ var result = []; while (left.length > 0 && right.length > 0){ if (left[0] < right[0]){ result.push(left.shift()); } else { result.push(right.shift()); } } return result.concat(left).concat(right);}//采用递归实现的归并排序算法function mergeSort(items){ if (items.length == 1) { return items; } var middle = Math.floor(items.length / 2), left = items.slice(0, middle), right = items.slice(middle); return merge(mergeSort(left), mergeSort(right));}调用mergeSort()函数处理一个数组，就可以返回经过排序的数组。注意每次调用mergeSort()函数，都会有两次递归调用。这个算法不可以使用memoization来进行优化，因为每个结果都只计算并使用一次，就算缓冲了结果也没有什么用。如果你使用mergeSort()函数来处理一个包含100个元素的数组，总共会有199次调用。1000个元素的数组将会执行1999次调用。在这种情况下，我们的解决方案是将递归算法转换为迭代算法，也就是说要引入一些循环（关于算法，可以参考这篇《List Processing: Sort Again, Naturally》）。
参考资料：
1.https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide
2.https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference