ECMAScriptJavaScript高等程序设计(第三版)学习笔记捌、玖、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对象始终本着最高(最外)层框架,使用她得以确定保证在3个框架中国科高校学地拜会另1个框架,与top相对的window对象是parent,parent始终本着当前框架的间接上层框架,在少数景况下,parent等于top,未有框架的意况,parent一定等于top。

与框架有关的结尾1个对象是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);

set提姆eout重返三个数值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,调用此情势后,用户不恐怕赶回上3个页面

location.reload()方法,重新加载当前页面,有相当大可能率从缓存加载,传递true之后则从服务注重新加载

navigation对象

对象的质量经常用于质量评定展现网页的浏览器类型

检查实验插件

对于非IE浏览器采纳plugins数组来完成目标

name:插件名字

description:插件描述

filename:插件文件名

length:插件所拍卖的MIME类型数量

screen对象

并不曾多大用处

history对象

用户浏览的历史记录

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

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

length,保存历史记录的数额

第十章,客户端检查评定

尽心尽力不利用客户端检查实验。先规划最通用的方案,再利用一定的浏览器方法进步该方案

力量检查测试

质量评定浏览器是或不是具备某1力量。

尽量使用typeof举行力量检查测试,对所要使用的函数或许性质进行是或不是顺应预期的检查实验,能够下跌出错的危害

并不要求知道用户选取的是如何浏览器,只要求明白用户的浏览器是还是不是享有某个开辟所需的功力就可以,毕竟浏览器的遵循是会转移的,并不可能保险现在独有的属性今后不会有其余浏览器落成。

怪癖检测

检验浏览器的独特表现,与力量检查评定类似,可是,怪癖检查评定是想要知道浏览器存在怎么着毛病。

用户代理检查测试

经过检查实验用户代理字符串来规定实际使用的浏览器。在每3回的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、不能直接准确地行使力量检验或怪癖检验

二、同1款浏览器在不相同平台下具备不相同的力量

三、为了跟踪分析等目标须求通晓适当的浏览器

第10章,DOM

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

DOM能够将其他HTML和xml文书档案描绘成2个由多层节点构成的结构

文书档案节点是种种文书档案的根节点,文书档案成分是文书档案的最外层成分,各个文书档案只可以有一个文书档案成分,html普通话档成分始终是<html>成分,xml中其它因素都或然是文书档案成分

一种示例文书档案结构

ECMAScript 3

Node类型

DOM一级定义了二个Node接口,由DOM中负有节点类型达成。在js中作为Node类型达成,除IE外,都足以访问这么些项目。js中有所节点类型都接二连三自Node类型,so,全数节点都有1致的着力质量和章程

各样节点都有nodeType属性,用于表示节点类型,由以下13个常量表示:

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属性,是1个类数组对象。NodeList独特之处在于,基于DOM结构动态实践查询的结果,因而DOM的转移能够活动反映到NodeList对象中。可以因而方括号,也能够通过item()方法

例:

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

各类节点还都有parentNode,previousSibling,nextSibling属性,分别拜访父节点,同1列表的前一个节点,同一列表的下三个节点,列表第三个节点previousSibling和结尾贰个节点的nextSibling为null,父节点的firstChild和lastChild属性分别指向childNodes列表中的第二个和最终3个节点

负有节点都有ownerDocument属性,指向任何文书档案节点,表示别的节点都属于它所在的文档,任何节点都不可能而且设有三个或两个文书档案中,能够经过此属性间接待上访问文书档案节点

操作节点

appendChild(),向childNodes列表末尾加多新的节点,若传入到appendChild的节点已经存在文书档案中,则将该结点从原先职位转移到新岗位,重临新节点

insertBefore方法在childNodes列表中某些地方插入节点,接收七个参数,要插入的节点,作为参考的节点,若参照节点传入null,则操作结果和appendChild结果一样,重回新节点

replaceChild方法接收五个参数,要插入的节点,要替换的节点,再次来到要替换的节点,并从文书档案树移除

removeChild方法,接收二个参数,要移除的节点,重返被移除的节点

注:以上七个方法要运用必须先得到父节点

全体连串节点都有个别艺术:

cloneNode,用于创建当前节点的完全一样的别本,接收2个布尔值参数,true推行深复制,false实施浅复制

注:cloneNode不会复制加多到DOM中的js属性,比方事件管理程序,只复制天性、(在让人惊叹内定情况下)子节点,其余都不会复制,IE却有bug,会复制事件管理程序,所以,提议复制前移除事件管理程序

normalize方法,唯1功能是管理文书档案树中的文本节点,合并文本节点

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>成分

U昂科威L属性包涵页面完整的URAV4L

domain属性只含有页面域名

referrer属性保存着连连到近年来页面包车型客车万分页面包车型客车UBMWX伍L

唯有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成分

DOM1致性检验

document.implementation属性为质量评定浏览器落成了DOM哪些部分提供对应新闻和效用对象

DOM一级只鲜明了二个方式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,成分在文书档案中的唯1标志符

titile,有关因素的附加表明音信,一般通过工具提醒条出来

lang,成分内容的言语代码,很少使用

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

className,成分所选择的class性格

获取天性

getAttribute()、setAttribute()、removeAttribute(),可针对其余脾性应用

getAttribute接收三个参数,要获得的属性名,较少使用getAttribute,而使用对象属性。唯有在获得自定义本性时采用getAttribute

setAttribute接收四个参数,要安装的属性名以及值,已存在则覆盖现存值,不设有新建属性赋值

removeAttribute接收3个参数,要删减的属性名,不仅会化解本性的值,也会从要素中全然除去性格,不常用,IE陆在此以前不接济

attribute属性

Element类型是绝无仅有1个运用attribute属性的DOM节点类型,attribute包蕴多个NamedNodeMap,与NodeList类似,成分的每3个表征都有1个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(),接收3个参数,要插入节点中的文本,参数文本会根据HTML或xml格式进行编码

标准化文本节点,对父成分调用normalize,会将享有文件节点合并成1个节点

相隔文本节点

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有关的具备新闻

在DOM一级中不可能动态创设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>要素的操作)