你的位置:首页 > Java教程

[Java教程]JavaScript高级程序设计(第三版)学习笔记8、9、10章


第8章,BOM

BOM的核心对象是window,具有双重角色,既是js访问浏览器的一个接口,又是ECMAScript规定的Global对象。因此,在全局作用域中声明的函数、变量都会变成window对象的属性和方法。

例:

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

定义全局变量与在window对象上直接定义属性区别:全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以。

注:尝试访问未声明的变量会抛出错误,但通过查询window对象,可以知道某个未声明变量是否存在

例:

//这里会出错,因为oldValue未定义var value = oldValue;//这里不会抛出错误,因为这是一次属性查询//value的值是undefinedvar 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,ywindow.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操作系统

识别移动设备

识别游戏系统

完整的用户代理检测代码

//完整代码var client = function(){  //呈现引擎  var engine = {    ie:0,    gecko:0,    webkit:0,    khtml:0,    opera:0,    //完整版本号    ver:null  };  //浏览器  var browser = {    //主要浏览器    ie:0,    firefox:0,    safari:0,    konq:0,    opera:0,    chrome:0,    //具体版本号    ver:null  };  //平台、设备和操作系统  var system = {    win:false,    mac:false,    x11:false,    //移动设备    iphone:false,    ipod:false,    ipad:false,    ios:false,    android:false,    nokiaN:false,    winMobile:false,    //游戏系统    wii:false,    ps:false  };  //检测呈现引擎和浏览器  var ua = navigator.userAgent;  if(window.opera){    engine.ver = browser.ver = window.opera.version();    engine.opera = browser.opera = parseFloat(engine.ver);  }else if(/AppleWebKit\/(\S+)/.test(ua)){    engine.ver = RegExp["$1"];    engine.webkit = parseFloat(engine.ver);    //确定是Chrome还是Safari    if(/Chrome\/(\S+)/.test(ua)){      browser.ver = RegExp["$1"];      browser.chrome = parseFloat(browser.ver);    }else if(/Version\/(\S+)/.test(ua)){      browser.ver = RegExp["$1"];      browser.safari = parseFloat(browser.ver);    }else{      //近似地确定版本号      var safariVersion = 1;      if(engine.webkit < 100){        safariVersion = 1;      }else if(engine.webkit < 312){        safariVersion = 1.2;      }else if(engine.webkit < 412){        safariVersion = 1.3;      }else{        safariVersion = 2;      }      browser.safari = browser.ver = safariVersion;    }  }else if(/KHTML\/(S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){    engine.ver = browser.ver = RegExp["$1"];    engine.khtml = browser.konq = parseFloat(engine.ver);  }else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){    engine.ver = RegExp["$1"];    browser.gecko = parseFloat(engine.ver);    //确定是不是Firefox    if(/Firefox\/(\S+)/.test(ua)){      browser.ver = RegExp["$1"];      browser.firefox = parseFloat(browser.ver);    }  }else if(/MSIE ([^;]+)/.test(ua)){    engine.ver = browser.ver = RegExp["$1"];    engine.ie = browser.ie = parseFloat(engine.ver);  }  //检测浏览器  browser.ie = engine.ie;  browser.opera = engine.opera;  //检测平台  var p = navigator.platform;  system.win = p.indexOf("Win") == 0;  system.mac = p.indexOf("Mac") == 0;  system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);  //检测windows操作系统  if(system.win){    if(/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){      if(RegExp["$1"] == "NT"){        switch(RegExp["$2"]){          case "5.0":            system.win = "2000";            break;          case "5.1":            system.win = "XP";            break;          case "6.0":            system.win = "Vista";            break;          case "6.1":            system.win = "7";            break;          default:            system.win = "NT";            break;        }      }else if(RegExp["$1"] == "9x"){        system.win = "ME";      }else{        system.win = RegExp["$1"];      }    }  }  //移动设备  system.iphone = ua.indexOf("iPhone") > -1;  system.ipod = ua.indexOf("iPod") > -1;  system.ipad = ua.indexOf("iPad") > -1;  system.nokiaN = ua.indexOf("NokiaN") > -1;  //windows mobile  if(system.win == "CE"){    system.winMobile = system.win;  }else if(system.win == "Ph"){    if(/Windows Phone OS (\d+.\d+)/.test(ua)){      system.win = "Phone";      system.winMobile = parseFloat(RegExp["$1"]);    }  }  //检测IOS版本  if(system.mac && ua.indexOf("Mobile") > -1){    if(/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){      system.ios = parseFloat(RegExp.$1.replace("_","."));    }else{      system.ios = 2;   //不能真正检测出来,所以只能猜测,猜测低版本会更适当点    }  }  //检测Android版本  if(/Android (\d+\.\d+)/.test(ua)){    system.android = parseFloat(RegExp.$1);  }  //游戏系统  system.wii = ua.indexOf("Wii") > -1;  system.ps = /playstation/i.test(ua);  //返回这些对象  return {    engine:engine,    browser:browser,    system:system  };}();

使用方法

使用情形:

1、不能直接准确地使用能力检测或怪癖检测

2、同一款浏览器在不同平台下具备不同的能力

3、为了跟踪分析等目的需要知道确切的浏览器

第10章,DOM

DOM(文档对象模型),针对HTML和

DOM可以将任何HTML和

文档节点是每个文档的根节点,文档元素是文档的最外层元素,每个文档只能有一个文档元素,html中文档元素始终是<html>元素,

一种示例文档结构

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的标签名不需区分大小写,在

只有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或

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

分隔文本节点

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

Comment类型

注释在DOM中通过Comment类型表示,特征:

nodeType:8

nodeName:#comment

nodeValue:注释的内容

parentNode:可能是Document或Element

不支持子节点

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

使用document.createComment并为其传递注释文本也可以创建注释节点

CDATASection类型

只针对

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>元素的操作)