ECMAScriptJavaScript高级程序设计(第三本)学习笔记8、9、10章

第8章,BOM

BOM的主干目标是window,具有更角色,既是js访问浏览器的一个接口,又是ECMAScript规定之Global对象。因此,在全局作用域中扬言的函数、变量都见面化window对象的性质和方法。

例:

var age = 20;
function sayAge(){
    alert(this.age);
}
alert(window.age);    //20
window.sayAge();    //20

概念全局变量与当window对象及一直定义属性区别:全局变量不克通过delete操作符删除,而直白以window对象及定义之性质可以。

横流:尝试看未声明的变量会丢掉来左,但由此询问window对象,可以掌握某不声明变量是否在

例:

//这里会出错,因为oldValue未定义
var value = oldValue;
//这里不会抛出错误,因为这是一次属性查询
//value的值是undefined
var value = window.oldValue;

大局对象location和navigation实际上还是window对象的习性

窗口关系及框架

而页面包含框架,则每个框架都发生温馨的window对象,并且保留于frames集合中。在frames集合中,可以以索引(从0开始,从左到右,从上到下),或框架名称来做客相应的window对象。

<html>
<head>
    <title>Frameset Example</title>
</head>
<frameset row="160,*">
    <frame src="frame.html" name="topFrame">
    <frameset cols="50%,50%">
        <frame src="anotherframe.html" name="leftFrame"></frame>
        <frame src="yetanotherframe.html" name="rightFrame"></frame>
    </frameset>
</frameset>
</html>

上述代码创建了一个框架集,可以通过window.frames[0]或者window.frames[“topFrame”]来引用上方框架,不过,最好使用top而非window访问

top对象始终对准最高(最外)层框架,使用外得以保以一个框架中对地拜会另一个框架,与top相对的window对象是parent,parent始终本着当前框架的一直上层框架,在一些情况下,parent等于top,没有框架的场面,parent一定当top。

以及框架有关的最终一个靶是self,始终本着window,实际上,self和window对象可以交换使用

以下例代码可以超越浏览器取得窗口左边和上面的职位

var leftPos = (typeof window.screenLeft == “number”)?
            window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == “number”)?
            window.screenTop : window.screenY;
window.moveTo();    //接收两个参数,新位置的x,y
window.moveBy();    //接收两个参数,水平和垂直移动的像素

窗口大小

window.resizeTo();  //接收两个参数,新窗口的宽和高

window.resizeBy();  //接收两个参数,相对旧窗口的宽和高之差

window.open();      //接收四个参数:要加载的url,窗口目标,一个特性字符串,一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值,最后一个参数只在不打开新窗口的情况下使用

停顿调用和过调用

js是单线程语言,但允许通过设置过时间以及间断时间来调度代码在一定时刻执行

过期调用

行使window的setTimeout方法,接收两独参数,要履行的代码和过时间毫秒数,可以是字符串,也足以是函数。

//不建议传递字符串
setTimeout(“alert(‘hello,world’)”,1000);
//推荐使用方式
setTimeout(function(){
    alert(‘hello,world’);
},1000);

setTimeout返回一个数值ID,是计划执行的绝无仅有标识符,可以由此clearTimeout()来取消

停顿调用

使用setInterval()方法,与setTimeou方法接收的参数一样,写法平,也会见回到一个数值ID,也是绝无仅有标识符,可以动用clearInterval方法取消

建议:最好不采取间歇调用,可以下过期调用模拟间歇调用,因为在少数情况下后一个顿调用,有或会见以面前一个请勿结之前启动

系对话框

alert(),只有确定按钮

confirm(),有规定及撤销按钮,用法与alert一致,不过,confirm会返回布尔值,确定返回true,取消返回false

prompt(),比confirm多矣一个文件输入域,接收两单参数:提示文本以及输入默认文本,点击ok,返回文本,其他办法关闭对话框,返回null

//显示查找对话框
window.find();
//显示打印对话框
window.print();

location对象

既是window对象属性,也是document对象属性,即window.location与document.location引用的凡同一个对象

location对象属性

属性名

例子

说明

hash

“#contents”

返回url中的hash,#号后跟的字符,没有则返回空串

host

“www.wrox.com:80”

返回服务器名称和端口号

hostname

“www.wrox.com”

返回服务器名称

href

“http:/www.wrox.com”

返回完整url,location的toString也会返回相同值

pathname

“/WileyCDA/”

返回url中的目录和或文件名

port

“8080”

返回url中的端口号

protocol

“http:”

返回页面使用的协议

search

“?q=javascript”

返回url从?号开始到结束的字符串即返回查询字符串,以?号开头

注:每次修改location的属性(hase除外),都见面坐新url刷新页面

location.replace()方法只有接受一个参数,新的url,调用此方式后,用户无法赶回上一个页面

location.reload()方法,重新加载当前页面,有或从缓存加载,传递true之后尽管打服务器又加载

navigation对象

靶的属性通常用于检测显示网页的浏览器类型

检测插件

对非IE浏览器采用plugins数组来齐目的

name:插件名字

description:插件描述

filename:插件文件称

length:插件所处理的MIME类型数量

screen对象

并没有多特别用

history对象

用户浏览的历史记录

go方法,传入数值(正值前进,负值后降落)和字符串参数(url)

back(),返回,forward(),前进。

length,保存历史记录的数量

第9章,客户端检测

尽量不行使客户端检测。先筹极端通用的方案,再下一定的浏览器方法提高该方案

能力检测

检测浏览器是否富有某一样力。

尽量用typeof进行力量检测,对所而使的函数或者性质进行是否符合预期的检测,可以降低出错的风险

并不需要知道用户用的是啊浏览器,只需要懂得用户的浏览器是否具某些开发所用的法力即可,毕竟浏览器的法力是碰头变动之,并无可知担保现在独有的性质未来莫会见发出其它浏览器实现。

老癖检测

检测浏览器的特有表现,与能力检测类似,不过,怪癖检测是怀念只要了解浏览器存在什么毛病。

用户代理检测

经过检测用户代理字符串来规定实际行使的浏览器。在各级一样糟糕的http请求过程被,用户代理字符串是当做响应首部发送的,可以经过js的navigator.userAgent属性访问。这服务端即时是常见而广为接受的做法,客户端是没法的做法。

识假呈现引擎

注意检测五不行见引擎:IE,Gecko,WebKit,KHTML和Opera

小心鉴别顺序Opera,WebKit,KHTML,Gecko,IE,前一个发动机来含后一个引擎的一点性能,顺序错误将无能够是识别

鉴别浏览器

鉴别平台

辨认windows操作系统

辨认移动装备

识假游戏系统

整体的用户代理检测代码

ECMAScript 1ECMAScript 2

  1 //完整代码
  2 var client = function(){
  3     //呈现引擎
  4     var engine = {
  5         ie:0,
  6         gecko:0,
  7         webkit:0,
  8         khtml:0,
  9         opera:0,
 10 
 11         //完整版本号
 12         ver:null
 13     };
 14 
 15     //浏览器
 16     var browser = {
 17         //主要浏览器
 18         ie:0,
 19         firefox:0,
 20         safari:0,
 21         konq:0,
 22         opera:0,
 23         chrome:0,
 24 
 25         //具体版本号
 26         ver:null
 27     };
 28 
 29     //平台、设备和操作系统
 30     var system = {
 31         win:false,
 32         mac:false,
 33         x11:false,
 34 
 35         //移动设备
 36         iphone:false,
 37         ipod:false,
 38         ipad:false,
 39         ios:false,
 40         android:false,
 41         nokiaN:false,
 42         winMobile:false,
 43 
 44         //游戏系统
 45         wii:false,
 46         ps:false
 47     };
 48 
 49     //检测呈现引擎和浏览器
 50     var ua = navigator.userAgent;
 51     if(window.opera){
 52         engine.ver = browser.ver = window.opera.version();
 53         engine.opera = browser.opera = parseFloat(engine.ver);
 54     }else if(/AppleWebKit\/(\S+)/.test(ua)){
 55         engine.ver = RegExp["$1"];
 56         engine.webkit = parseFloat(engine.ver);
 57 
 58         //确定是Chrome还是Safari
 59         if(/Chrome\/(\S+)/.test(ua)){
 60             browser.ver = RegExp["$1"];
 61             browser.chrome = parseFloat(browser.ver);
 62         }else if(/Version\/(\S+)/.test(ua)){
 63             browser.ver = RegExp["$1"];
 64             browser.safari = parseFloat(browser.ver);
 65         }else{
 66             //近似地确定版本号
 67             var safariVersion = 1;
 68             if(engine.webkit < 100){
 69                 safariVersion = 1;
 70             }else if(engine.webkit < 312){
 71                 safariVersion = 1.2;
 72             }else if(engine.webkit < 412){
 73                 safariVersion = 1.3;
 74             }else{
 75                 safariVersion = 2;
 76             }
 77 
 78             browser.safari = browser.ver = safariVersion;
 79         }
 80     }else if(/KHTML\/(S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
 81         engine.ver = browser.ver = RegExp["$1"];
 82         engine.khtml = browser.konq = parseFloat(engine.ver);
 83     }else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){
 84         engine.ver = RegExp["$1"];
 85         browser.gecko = parseFloat(engine.ver);
 86 
 87         //确定是不是Firefox
 88         if(/Firefox\/(\S+)/.test(ua)){
 89             browser.ver = RegExp["$1"];
 90             browser.firefox = parseFloat(browser.ver);
 91         }
 92     }else if(/MSIE ([^;]+)/.test(ua)){
 93         engine.ver = browser.ver = RegExp["$1"];
 94         engine.ie = browser.ie = parseFloat(engine.ver);
 95     }
 96 
 97     //检测浏览器
 98     browser.ie = engine.ie;
 99     browser.opera = engine.opera;
100 
101     //检测平台
102     var p = navigator.platform;
103     system.win = p.indexOf("Win") == 0;
104     system.mac = p.indexOf("Mac") == 0;
105     system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
106 
107     //检测windows操作系统
108     if(system.win){
109         if(/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
110             if(RegExp["$1"] == "NT"){
111                 switch(RegExp["$2"]){
112                     case "5.0":
113                         system.win = "2000";
114                         break;
115                     case "5.1":
116                         system.win = "XP";
117                         break;
118                     case "6.0":
119                         system.win = "Vista";
120                         break;
121                     case "6.1":
122                         system.win = "7";
123                         break;
124                     default:
125                         system.win = "NT";
126                         break;
127                 }
128             }else if(RegExp["$1"] == "9x"){
129                 system.win = "ME";
130             }else{
131                 system.win = RegExp["$1"];
132             }
133         }
134     }
135 
136     //移动设备
137     system.iphone = ua.indexOf("iPhone") > -1;
138     system.ipod = ua.indexOf("iPod") > -1;
139     system.ipad = ua.indexOf("iPad") > -1;
140     system.nokiaN = ua.indexOf("NokiaN") > -1;
141 
142     //windows mobile
143     if(system.win == "CE"){
144         system.winMobile = system.win;
145     }else if(system.win == "Ph"){
146         if(/Windows Phone OS (\d+.\d+)/.test(ua)){
147             system.win = "Phone";
148             system.winMobile = parseFloat(RegExp["$1"]);
149         }
150     }
151 
152     //检测IOS版本
153     if(system.mac && ua.indexOf("Mobile") > -1){
154         if(/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){
155             system.ios = parseFloat(RegExp.$1.replace("_","."));
156         }else{
157             system.ios = 2;     //不能真正检测出来,所以只能猜测,猜测低版本会更适当点
158         }
159     }
160 
161     //检测Android版本
162     if(/Android (\d+\.\d+)/.test(ua)){
163         system.android = parseFloat(RegExp.$1);
164     }
165 
166     //游戏系统
167     system.wii = ua.indexOf("Wii") > -1;
168     system.ps = /playstation/i.test(ua);
169 
170     //返回这些对象
171     return {
172         engine:engine,
173         browser:browser,
174         system:system
175     };
176 }();

View Code

 

采用方式

采用状态:

1、不能够一直准确地使用力量检测或者大癖检测

2、同一款浏览器在不同平台下拥有不同的力量

3、为了跟分析等目的需要了解适当的浏览器

第10章,DOM

DOM(文档对象模型),针对HTML和xml文档的一个API

DOM可以拿其余HTML和xml文档描绘成一个是因为多重合节点构成的结构

文档节点是每个文档的干净节点,文档元素是文档的尽外层元素,每个文档只能发出一个文档元素,html中文档元素始终是<html>元素,xml中其他因素还或是文档元素

一律种示例文档结构

ECMAScript 3

Node类型

DOM1级定义了一个Node接口,由DOM中享有节点类型实现。在js中作为Node类型实现,除IE外,都得以看这类型。js中持有节点类型且蝉联自Node类型,so,所有节点都生同样之中坚特性和法

每个节点都来nodeType属性,用于表示节点类型,由以下12个常量表示:

Node.ELEMENT_NODE(1)

Node.ATTRIBUTE_NODE(2)

Node.TEXT_NODE(3)

Node.CDATA_SECTION_NODE(4)

Node.ENTITY_REFERENCE_NODE(5)

Node.ENTITY_NODE(6)

Node.PROCESSING_INSTRUCTION_NODE(7)

Node.COMMENT_NODE(8)

Node.DOCUMENT_NODE(9)

Node.DOCUMENT_TYPE_NODE(10)

Node.DOCUMENT_FRAGMENT_NODE(11)

Node.NOTATION_NODE(12)

用nodeName和nodeValue可以了解节点具体信息

每个节点都生childNodes属性,保存在NodeList对象,有length属性,是一个类数组对象。NodeList独特的远在当被,基于DOM结构动态执行查询的结果,因此DOM的别会活动反映到NodeList对象中。可以透过方括号,也可由此item()方法

例:

var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes.item(1);
var count = someNode.childNodes.length;

每个节点还都生parentNode,previousSibling,nextSibling属性,分别拜访父节点,同一列表的前面一个节点,同一列表的产一个节点,列表第一单节点previousSibling和结尾一个节点的nextSibling为null,父节点的firstChild和lastChild属性分别指向childNodes列表中的第一独跟最终一个节点

备节点都发出ownerDocument属性,指向任何文档节点,表示其余节点都属其所当的文档,任何节点都不可知而且是个别只或多只文档中,可以通过此属性直接访问文档节点

操作节点

appendChild(),向childNodes列表末尾添加新的节点,若传入到appendChild的节点都是文档中,则将该结点从原本职位换到新职务,返回新节点

insertBefore方法以childNodes列表中之一位置插入节点,接收两只参数,要插入的节点,作为参照的节点,若参照节点传入null,则操作结果及appendChild结果同样,返回新节点

replaceChild方法接收两独参数,要插入的节点,要替换的节点,返回要替换的节点,并于文档树移除

removeChild方法,接收一个参数,要移除的节点,返回给移除的节点

流动:以上四只点子而动得事先获得父节点

负有品种节点都有艺术:

cloneNode,用于创造当前节点的完全相同的副本,接收一个布尔值参数,true执行深复制,false执行浅复制

流淌:cloneNode不会见复制添加到DOM中的js属性,例如事件处理程序,只复制特性、(在强烈指定情况下)子节点,其他还不会见复制,IE却产生bug,会复制事件处理程序,所以,建议复制前移除事件处理程序

normalize方法,唯一作用是拍卖文档树中之文书节点,合并文本节点

Document类型

js通过Document类型表示文档,浏览器中,document对象是HTMLDocument(继承自Document)的一个实例。特征:

nodeType:9

nodeName:#document

nodeValue:null

parentNode:null

ownerDocument:null

子节点可能是DocumentType(最多一个),Element(最多一个),ProcessingInstruction或Comment

好使documentElement属性(始终对html中的<html>元素)和childNodes列表访问Document节点的子节点

作为HTMLDocument实例,document还产生一个body属性,用于访问body元素

作HTMLDocument实例,document对象还有一部分规范Document对象所没有的性能:

title包含<title>信息,修改title属性会直接改动<title>元素

URL属性包含页面完整的URL

domain属性只包含页面域名

referrer属性保存在连连至手上页面的老大页面的URL

仅仅出domain是不过设置的,却休可知装成外价值。

寻找元素

getElementById(),getElementByTatName()

getElementById接收一个参数,元素ID,必须同页面被的元素ID完全配合,包括大小写,只回去文档中首先不好面世的元素

getElementByTatName接收一个参数,标签名,返回包含零或多独因素的NodeList,在HTML文档中会返回一个HTMLCollection对象,可以运用item或方括号法访问对象中之项。HTMLCollection对象还有一个智:namedItem,通过元素name属性取得集合中之宗

当为getElementByTatName传入*号时,返回页面所有因素,IE会多加返回所有注释节点

横流:在html中传被getElementByTatName的标签名非需分轻重缓急写,在xml包括xhtml,则用区分轻重缓急写

独自发生HTMLDocument类型才有的艺术:getElementByName,返回带有给定name特性的有因素

破例集合:(都是HTMLCollection对象)

document.anchors,所有带有name特性的a标签

document.applets,所有<applets>元素,因为未引进用<applets>元素,所以,不推荐下这聚众

document.forms,包含有<form>元素,与document.getElementByTagName(“form”)返回结果一律

document.images,所有<img>元素

document.links,所有带有href的a元素

DOM一致性检测

document.implementation属性为检测浏览器实现了DOM哪些有提供相应信息和力量对象

DOM1级才规定了一个方式hasFeature,接收两个参数,要检测的DOM功能名称与本子号

注:在应用DOM某些特殊效果前,最好除了检测hasFeature,还同时采用力量检测

文档写入

方法:write,writeln,open,close

write,writeln接收一个字符串参数,写副到输出流的公文

Element类型

Element节点具有特征:

nodeType:1

nodeName:元素标签名

nodeValue:null

parentNode:Document或Element

子节点可能是:Element,Text,Comment,ProcessingInstruction,CDATASection,EntityReference

做客元素标签名:nodeName,tagName属性会回相同之值

html元素

怀有html元素都出于HTMLElement类型表示,不是一直通过者类型,也是透过其的子类型来表示,HTMLElement继承自Element,并加上一些性,添加的特性:

id,元素以文档中之绝无仅有标识符

titile,有关因素的增大说明信息,一般通过工具提示条出来

lang,元素内容的语言代码,很少使

dir,语言方向,ltr(left-to-right),rtl(right-to-left),很少用

className,元素所运用的class特性

得特性

getAttribute()、setAttribute()、removeAttribute(),可针对其他特性应用

getAttribute接收一个参数,要收获之属性名,较少使用getAttribute,而使用对象属性。只有当取自定义特性时使用getAttribute

setAttribute接收两单参数,要设置的性能名与价值,已是则盖现有值,不有新建属性赋值

removeAttribute接收一个参数,要去除的属性名,不仅会去掉特性的价,也会见起要素中了除去特性,不常用,IE6之前不支持

attribute属性

Element类型是唯一一个运用attribute属性的DOM节点类型,attribute包含一个NamedNodeMap,与NodeList类似,元素的各国一个表征都发一个Attr节点表示,每个节点都保存在NamedNodeMap中,方法:

getNamedItem(name):返回nodeName属性等于name的节点

removeNamedItem(name):移除nodeName属性等于name的节点

setNamedItem(name):向列表添加新节点,以节点的nodeName属性为索引

item(pos):返回位于pos位置处于的节点

每个节点的nodeName就是特点名称,nodeValue就是特点值

例:

var id = element.attributes.getNamedItem(“id”).nodeValue;
var id = element.attributes[“id”].nodeValue;

呢可行使上述办法设置特色值

removeNamedItem与removeAttribute效果一样,唯一不同便是碰头回给删去特性的Attr节点

开创元素:

document.createElement()接收一个参数,要开创的因素标签名,也得以用盛传完整的元素标签,例:

var div = document.createElement(“<div id=\”myNewDiv\” class=\”box\”></div>”);

以上措施而免IE7及重新早版本被动态创建元素的一点问题

Text类型

可蕴涵转义后底HTML字符,但切莫克包含HTML代码,特征:

nodeType:3

nodeName:#text

nodeValue:节点所含有文本

parentNode:Element

nodeValue和data属性可以拜Text节点包含的文本

始建文本节点

document.createTextNode(),接收一个参数,要插入节点受到的文本,参数文本会按照HTML或xml格式进行编码

规范化文本节点,对父元素调用normalize,会用富有文件节点合并成为一个节点

相隔文本节点

Text类型提供了一个以及normalize相反的点子splitText(),按照指定位置分割nodeValue值,原文本节点保留开始位置及指定位置之前的价值,新文本节点包含剩下的文书,并回

Comment类型

注在DOM中经Comment类型表示,特征:

nodeType:8

nodeName:#comment

nodeValue:注释的内容

parentNode:可能是Document或Element

非支持子节点

Comment与Text类型继承自相同之基类,为这包含除了splitText之外的有所字符串操作方法

动document.createComment并也那传递注释文本为堪创造注释节点

CDATASection类型

只对xml文档,表示的是CDATA区域,与Text继承同一个基类,拥有除splitText之外所有办法

DocumentType类型

DocumentType包含在文档的doctype有关的享有信息

每当DOM1级中未能够动态创建DocumentType对象

DocumentFragment类型

得当仓库来利用,将有着设加上的节点放到里面,在任何开立了晚联合上加至文档树中

例:

<ul id="myList"></ul>

var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for(var i = 0;i < 3;i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Item"+(i+1)));
    fragment.appendChild(li);
}
ul.appendChild(fragment);

如逐个添加,会招致浏览器反复渲染,以上办法以DocumentFragment类型可以避免欠问题

DOM操作技能

私家知道:实质就是是DOM的操作,对于<script>,<link>,<style>,<table>元素的操作

动态脚本,动态创建js脚本文件(对于<script>要素的操作)

动态样式,动态创建css样式,创建的<link>元素必须加加到<head>中要不是<body>中(对于<link>,<style>**要素的操作)

操作表格,繁琐(对于<table>要素的操作)