一些概念
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 })();
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>
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 })();
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()方法可以从服务端重新加载当前页面。
window.navigator对象包含大量WEB浏览器的信息,通常使用navigator.userAgent来判断客户端环境。
window.screen对象可以获取部分用户系统信息,例如screen.availHeight可获取屏幕可以使用的像素高度,screen.height可以获取屏幕高度。
DOM文档对象模型 基础
20140408