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有扎实的理解才能用它来撰写比较复杂的程序。 
基本概念
　　在这里只做简单介绍，在之后的例子中结程序再做具体解释其做用。
　　一、运算符
　　运算符就是完成操和的一系列符号，它有七类：
　　赋值运算符（=,+=,-=,*=,/=,%=,<<=,>>=,|=,&=）、算术运算符(+,-,*,/,++,--,%)、比较运算符(>,<,<=,>=,==,===,!=,!==)、逻辑运算符(||,&&,!)、条件运算(?:)、位移运算符(|,&,<<,>>,~,^)和字符串运算符(+)。
　　可能不少人不知道"==="什么。
　　在这里，我为你们解释一下，在javascript中 "==="才是全等 只有"==="两边的内存地址也相等 才会返回真
　　而"=="只是值相等就会返回真
　　例如：null==undefined 会返回真 , 可是null===undefined 就会返回假！
　　二、表达式
　　运算符和操做数的组合称为表达式，一般分为四类：赋值表达式、算术表达式、布尔表达式和字符串表达式。
　　三、语句
　　Javascript程序是由若干语句组成的，语句是编写程序的指令。Javascript提供了完整的基本编程语句，它们是：
　　赋值语句、switch选择语句、while循环语句、for循环语句、for each循环语句、do while循环语句、break循环停止语句、continue循环中断语句、with语句、try...catch语句、
　　if语句（if..else，if...else if ...）、let语句。
　　四、函数
　　函数是命名的语句段，这个语句段能够被看成一个总体来引用不着和执行。使用函数要注意如下几点：
　　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);
　　五、对象
　　Javascript的一个重要功能就是面向对象的功能，经过基于对象的程序设计，能够用更直观、模块化和可重复使用的方式进行程序开发。
　　一组包含数据的属性和对属性中包含数据进行操做的方法，称为对象。好比要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的颜色为蓝色。
　　六、事件
　　用户与网页交互时产生的操做，称为事件。事件能够由用户引起，也多是页面发生改变，甚至还有你看不见的事件（如Ajax的交互进度改变）。绝大部分事都由用户的动做所引起，如：用户按鼠标的按钮，就产生click事件，若鼠标的指针的连接上移动，就产生mouseover事件等等。在Javascript中，事件每每与事件处理程序配套使用。
　　而对事件的处理，W3C的方法是用addEventListener()函数，它有三个参数：事件，引起的函数，是否使用事件捕捉。为了安全性，建议将第三个参数始终设置为false；
　　传统的方法就是定义元素的on...事件，它就是W3C的方法中的事件参数前加一个“on”。而IE的事件模型使用attachEvent和dettachEvent对事件进行绑定和删除。javascript中事件还分捕获和冒泡两个阶段，可是传统绑定只支持冒泡事件。学习Javascript比较快速有效的方法是先熟悉一些基本概念，而后找几个别人设计好的程序认真仔细地分析一遍，再稍做改动，再看看可否达到预期目的，不断地触类旁通，既能够加深对一些参数、设计方法的理解，又能够快速地提升本身的水平。另外，再提醒一下：Javascript对大小写是敏感的，特别是一些对象、方法、属性的大小写必定要一致，要养成一种良好的习惯，不然在调试程序时可要累死你了。
　　七、变量
　　如 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中不只有很好的代码高亮，还有较全的代码提示和错误提示，相比其余编辑器来讲是十分强大的。 
使用方法
　　1、Javascript在网页的用法
　　Javascript加入网页有两种方法：
　　一、直接加入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>
　　二、引用方式
　　若是已经存在一个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