JavaScript基础概览

浏览数：32 / 时间：2015年06月08日

一些概念

DOM（文档对象模型）是HTML和XML的应用程序接口（API）。

DOM Level1规划文档结构；DOM Level2扩展了对鼠标和用户界面事件等的支持；DOM Level3支持了XML1.0特性，包括XPath等。

还有其他语言发布了自己的DOM标准：可缩放矢量图形（SVG），同步多媒体集成语言（SMIL）等。

DOM描述了处理网页内容的方法和接口；BOM描述了与浏览器进行交互的方法和接口。

ECMAScript原始类型

5种原始类型：Undefined、Null、Boolean、Number、String；对应的使用typeof运算符返回：undefined、object、boolean、number、string。

undefined值实际上是从null派生而来，因此 null==undefined

所有ECMAScript数值必须在Number.MAX_VALUE和Number.MIN_VALUE之间；
当计算的数大于Number.MAX_VALUE时候会被赋予值Number.POSITIVE_INFINITY，显示为Infinity；
当计算的数小于Number.MIN_VALUE时候会被赋予值Number.NEGATIVE_INFINITY，显示为-Infinity。
可以对任何数调用isFinit() ，已确保该数不是无穷大。
另外还存在一个特殊值NaN，表示非数，例如在类型转换失败时会变为非数，可以通过isNaN()来判断，另外NaN不等于NaN。

转换数字可以使用parseInt()和parseFloat()方法，只能对String类型的调用这些方法，对其他类型的返回为NaN。
强制类型转换可以使用Boolean()、Number() 、String()。
Number(undefined)返回NaN；Number(null)返回0。

Object类具有的属性：constructor、prototype；
Object类具有的方法：hasOwnProperty()、isPrototypeOf()、propertyIsEnumerable()、toString()、valueOf()。

String类的各种方法：

charCodeAt	字符代码
concat	连接一个或多个字符串，保持原始的String对象不变
indexOf	指定子串在另一个字符串中的位置
slice	该方法截取子串，若参数是负数则会用字符串的长度加上参数；不改变String对象自身
substring	该方法截取子串，如果对于负参数，将当作0处理；不改变String对象自身
toUpperCase	转换大写
toLowerCase	转换小写

instanceof运算符：和typeof运算符类似，但该运算符可以确认对象为某特定类型，例如"hello" instanceof String

运算

逻辑OR运算中如果一个运算数是对象，另一个是Boolean值，则返回该对象，例如 alert(false||{}); 输出的是对象。
两个字符串形式的数字进行比较时候，比较的是字符代码；但如果一个字符串数字和数字进行比较，那么字符串数字会先转换为数字，例如 "23"<3 为false；
如果字符串和数字比较，字符串无法转换为有效数字，例如 "a"<3 返回为false，因为"a"尝试parseInt()返回为NaN，任何和NaN的关系运算都为false。

函数

使用new Function来定义一个函数，例如 var f=new Function("v1","v2","return v1+v2;");alert(f(1,2));
尽管可以使用Function构造函数创建函数，但用它定义函数比用传统方式要慢得多，类似于eval；另外不能访问局部作用域，无法自身遍历等问题。

对象

ECMA-262定义的本地类：

Object	Function	Array	String	Boolean
Number	Date	RegExp	Error	EvalError
RangeError	ReferenceError	SyntaxError	TypeError	URIError

Array对象可以使用join方法连接字符串，String对象可以用split方法转换字符串为数组。
Array对象还具有两个String类具有的方法，concat和slice方法，返回的为新的数组，不改变原始数组。
Array对象还有push方法、pop方法、shift方法、unshift方法。
Array对象可以使用reverse方法颠倒数组项顺序，sort方法将根据数据项的值按升序排序。
Array对象还有个splice方法，可以实现删除替换操作，例如 var a=[1,2,3,4];a.splice(2,1,300,301);alert(a); ，该方法会改变原始数组。

Date对象可以使用UTC方法返回日期的毫秒表示，例如 new Date(Date.UTC(2012,1,29,8,30)); 为UTC的2012年2月29日8点30分。

Global对象是个特别的对象，设计上根本不存在，如isNaN等方法都是Global对象的方法。
Global对象中还有encodeURI编码链接，还有encodeURIComponent对所有非标准字符进行编码。
Global对象的eval方法，解释程序会把eval方法的参数解释为真正的ECMAScript语句，然后插入该函数所在的位置，因此eval方法可以调用局部变量：

1 (function(){
2     var msg="hello world";
3     eval("alert(msg);var o={o:1};");
4     var re=eval("({a:1})");
5     alert(o.o); /* eval中定义的变量 */
6     alert(re.a); /* eval可以返回一个变量 */
7 })();

eval调用局部变量 & 定义变量 & 返回变量

Math对象存在一个ceil向上舍入函数、floor方法向下舍入函数、round方法四舍五入函数。
Math对象配合random方法可以生成随机数，例如生成1到10之间的数： Math.floor(Math.random()*10+1);

继承

使用call和apply方法可以实现对象冒充。

可以通过一个中间对象来实现继承：

 1 function extend(sb,sp){
 2     var bridge=function(){};
 3     bridge.prototype=sp.prototype;
 4     var o=new bridge();
 5     sb.prototype=o;
 6     o.constructor=sb;
 7     sb.superclass=sp;
 8     return sb;
 9 }
10 function class1(nm){
11     this.nm=nm;
12 }
13 class1.prototype.getnm=function(){
14     return this.nm;
15 };
16 function class2(nm){
17     class2.superclass.call(this,nm);
18 }
19 extend(class2,class1);
20 ao=new class2("zxf");
21 ao.getnm();

中间对象实现继承

BOM浏览器对象模型基础

XHTML中引入javascript要注意需要CDATA段才能识别，另外要兼容不支持XHTML的浏览器（可能不识别CDATA段），因此嵌入XHTML的代码可能如下：

1 <script type="text/javascript">
2 //<![CDATA[
3     function add(a,b){
4         return a+b;
5     }
6 //]]>
7 </script>

XHTML的javascript嵌入

window对象中有top对象和parent对象和self对象来指明窗口对象。
window.open()方法打开新窗口，存在四个参数(URL,新窗口名字,特性字符串,是否新载入页面替换当前页面)：
例如 window.open("http://www.baidu.com","_blank","height=100,width=100,top=10,left=10"); 并可以通过window.close()来关闭窗口。

window对象可以通过alert()方法弹出显示框；通过confirm()方法弹出确定框；通过prompt()方法弹出文本输入框。

setTimeout()方法设置延迟执行，其中参数可以用字符串也可以直接传递函数；取消未执行的setTimeout()可以使用clearTimeout()方法。
setInterval()方法可以设置重复执行，同样的可以通过clearInterval()方法来停止执行。
关于setTimeout()方法以及setInterval()方法的执行作用域：全局作用域，可以通过传递一个函数来实现局部变量访问：

1 (function(){
2     var x=10;
3     setTimeout("alert(typeof x);",1000);    /* undefined */
4     setTimeout(function(){alert(typeof x)},2000);    /* number */
5 })();

setTimeout执行作用域

window.history对象有go()方法，可以传递前进或后退的页面数，更简单的可以使用history.back()和history.forward()方法。

window.document对象比较特殊，即属于BOM又属于DOM。

window.location对象包含protocol、host、port、pathname、search、hash以及href等属性。
window.location.replace()方法可以跳转到新页面并且从浏览器历史中删除原页面记录；
window.location.reload()方法可以从服务端重新加载当前页面。