2018-07-26 22:03 东北大学前端工程师

关注

【有书共读】《JS高级程序设计》读书笔记03

第八章

在 Web 中使用 JavaScript ，BOM 是真正的核心。BOM 提供了很多对象，用于访问浏览器的功能。

window对象

var age = 29;
window.color = "red";

delete window.age;
delete window.error;   //returns true

alert(window.age);    //29
alert(window.color);  //undefined

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

//抛出错误，因为 oldValue 未定义
var newValue = oldValue;
//不会抛出错误，因为这是属性查询，
var newValue = window.oldValue;   //undefined
窗口关系及框架
<html>
  <head>
    <title>Frameset Example</title>
  </head>
  <frameset rows="160,*">
    <frame src="frame.htm" name="topFrame">
    <frameset cols="50%,50%">
      <frame src="anotherframe.htm" name="leftFrame">
      <frame src="yetanotherframe.htm" name="rightFrame">
    </frameset>
  </frameset>
</html>

top对象始终指向最高（最外层）的框架，也就是浏览器窗口。

窗口位置

确定和修改 window 对象位置的属性，表示窗口相对于屏幕左边和上边的位置

screenLeft，screenTop：IE，Safari，Opera 和 Chrome 支持

screenX，screenY：Firefox，Safari，Opera 和 Chrome 支持

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

窗口大小

innerWidth，innerHeight，outerWidth，outerHeight：Firefox，IE，Safari 中outerWidth和outerHeight返回浏览器窗口本身尺寸；innerWidth和innerHeight表示该容器页面视图区大小（减去边框宽度）。Chrome 中它们均返回视口（viewport）大小而非浏览器窗口大小。

document.documentElement.clientWidth
document.documentElement.clientHeight
document.body.clientWidth，document.body.clientWidth

最终取得浏览器视口大小的代码：

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;

if (typeof pageWidth != "number"){
    if (document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

导航和打开窗口

使用window.open()方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。这个方法可以接受 4 个参数：

URL
窗口目标，可以是已存在的窗口或者框架，如"topFrame"、_self、_parent、_top、_blank
一个特性字符串，包括height,left,location,menubar,resizable,scrollbars,status,toolbar,top,width
一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
window.open("http://www/wrox.com/", "wroxWindow", "height=400, width=400, top=10, left=10, resizable=yes");

间歇调用和超时调用

JavaScript 是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。

setTimeout()
```javascript
clearTimeout()：传入超时调用 ID，取消该调用。
var timeoutId = setTimeout(function (){
alert("Hello World!");
}, 1000);

clearTimeout(timeoutId);

- setInterval()
- clearInterval()

```javascript
var num = 0;
var max = 10;
var intervalId = null;

function incrementNumber() {
    num++;

    if (num == max) {
        clearInterval(intervalId);
        alert("Done");
    }
}

intervalId = setInterval(incrementNumber, 500);
以上代码也可以用超时调用实现：
var num = 0;
var max = 100;

function incrementNumber() {
    num++;

    if (num < max) {
        setTimeout(incrementNumber, 500);
    } else {
        alert("Done");
    }
}

系统对话框

alert()
confirm()
prompt()
window.print()：显示“打印”对话框
window.find()：显示“查找”对话框

location 对象

查询字符串参数

function getQueryStringArgs(){    
    var qs = location.search.length > 0 ? location.search.substring(1) : "",
        args = {},
        items = qs.length ? qs.split("&") : [],
        item, name, value,
        i = 0,
        len = items.length;

    for (i = 0; i < len; i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);

        if (name.length){
            args[name] = value;
        }
    }
    return args;
}
//query：?q=javascript&num=10
var args = getQueryStringArgs();

alert(args["q"]);     //"javascript"
alert(args["num"]);   //"10"

位置操作

location.assign()：接受一个 URL 作为参数，可以立即打开新 URL 并在浏览器历史记录中生成一条记录。如果是将location.href或window.location设置为一个URL值，也会以该值调用assign()方法。
location.replace()：接受一个 URL 作为参数，可以立即打开新 URL ，但是不会生成历史记录。
location.reload()：重新加载页面，如果不传递参数，浏览器就会以最有效的方式重新加载，如果该页面自上次请求后没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需要传递参数true。

navigator对象

navigator 对象已经成为识别客服端浏览器的事实标准
appCodeName 浏览器的名称，通常都是Mozilla
appName 完整的浏览器名称
appVersion 浏览器版本
cookieEnabled 表示cookie是否启用
javaEnabled() 表示当前浏览器中是否启用的Java
language 浏览器的主语言
mimeTypes 在浏览器中注册的MIME类型数组
onLIne 表示浏览器是否链接到了因特网
platform 浏览器所在的系统平台
plugins 浏览器中安装的插件信息的数组
userAgent 浏览器的用户***字符串
vendor 浏览器的品牌
product 产品名称
registerContentHandler() 针对特定的MIME类型将一个站点注册为处理程序
registerProtocolHandler() 针对特定的协议将一个站点注册为处理程序

screen 对象

screen 对象使用率不是特别高，比较常见的使用场景是移动端。

availHeight 屏幕像素高度减系统部件高度之后的值（只读）
availLeft 未被系统部件占用的最左侧的像素值（只读）
availTop 未被系统部件占用的最上方的像素值（只读）
availWidth 屏幕像素宽度减系统部件宽度之后的值（只读）
colorDepth 用于表示颜色的位数（只读）
height 屏幕像素高度
width 屏幕像素宽度
pixelDepth 屏幕的位深（只读）

history 对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。
go()：使用go()方法可以在用户的历史记录中任意跳转，可以向前也可以向后，只接受一个参数。传递整数，表示向后或者向前跳转的页面的一个整数值。负数表示后退，整数表示前进。也可以传递字符串，此时浏览器会跳转到历史记录中包含该字符串的第一个位置。
```
history.go(-1);   //后退一页
history.go(1);    //前进一页
history.go(2);    //前进两页
history.go("wrox.com") // 跳转到最近的wrox页面
```
back()，forward()：后退和前进，用来代替go()。
length：history 对象还有一个length属性，保存着历史记录的数量。对于加载到窗口、标签页或者框架中的第一个页面，history.length 等于 0。

第九章

由于浏览器间存在差别，通常要根据不同浏览器的能力分别编写不同的代码。

能力检测

if (object.propertyInQuestion) {
    // 使用 object.propertyInQuestion
}


function getElement(id){
    if(document.getElementById){
        return document.getElementById(id);
    } else if (document.all) {
        return document.all[id];
    } else {
        throw new Error("No way to retrieve element!")
    }
}

怪癖检测

一般来说，“怪癖”都是个别浏览器的个别版本独有的，一般被归为 bug。在新版本中可能会也可能不会被修复。由于检测“怪癖”涉及运行代码，因此我们建议仅检测那些对你有直接影响的“怪癖”。而且最好在脚本一开始就执行此类检测，以遍今早解决问题。

用户***检测

var ua = navigator.userAgent;

Opera,WebKit(Chrome, Safari),KHTML,Gecko(Firefox),MSIE(IE),OS（操作系统）,Mobile,Game

第十章

DOM 是针对 HTML 和 XML 文档的一个API。DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。

节点层次

Node 类型

DOM1 级定义了一个 Node 接口，该接口将由 DOM 中的所有节点实现。JS 中所有节点类型都继承自 Node 类型，因此所有节点类型都共享着相同的基本属性和方法。

nodeType

每个节点都有一个nodeType属性，用于表明节点的类型，由 12 个数值常量表示。

nodeName和nodeValue

这两个属性的值完全取决于节点的类型

childNodes

每个节点都有一个childNodes属性，其中保存着一个NodeList对象。NodeList是一种类数组对象，用于保存一组有序的节点。可以用方括号语法和item()方法。

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

其余属性

parentNode：指向文档树中的父节点。
previousSibling,nextSibling：可以访问同一childNodes列表中的其他节点，列表中第一个节点的previousSibling属性值为null，列表中最后一个节点的nextSibling属性值为null。
firstChild,lastChild：父节点的firstChild和lastChild指向childNodes列表第一个节点和最后一个节点。
ownerDocument：指向表示整个文档的文档节点。

操作的节点的方法

appendChild(node)
insertBefore(newNode, node)
replaceChild(newNode, node)
removeChild(node)
cloneChild(isDeepCopy)
normalize()

Document 类型

浏览器中，document对象是HTMLDocument的一个实例，表示整个 HTML 页面。Document 节点有下列特征：

nodeType的值为 9。
nodeName的值为 "#document"。
nodeValue的值为null。

文档（document）的子节点和属性

documentElement：文档中只包含一个子节点，即<html>元素。可以通过document.documentElement来访问这个元素。
body：document.body直接指向<body>元素。
doctype：可以通过document.doctype可以取得<!DOCTYPE>的引用。
title：文档标题
URL：包含页面完整的 URL
domain：包含页面的域名
referrer：保存着来源页面的 URL

查找元素

getElementById(id)
getElementsByTagName(tagName)
getElementsByName(name)

特殊集合

document.anchors
document.forms
document.images
document.links

Element 类型

Element 类型用于表现 XML 或 HTML 元素，提供了对元素标签名、子节点及特性的访问。

Text 类型

Comment 类型, CDATASection 类型,DocumentType 类型,Attr 类型

DocumentFragment 类型

DOM 规定文档片段（document fragment）是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外资源。

nodeType的值为 11。
nodeName的值为"#document-fragment"。
nodeValue的值为null。

文档片段不能直接添加到文档中，但可以保存将来可能会添加到文档的节点。要创建文档片段通过document.createDocumentFragment()方法:

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);

#笔记##读书笔记##设计#