BOM

Browser Object Model

Window Object

Window 的基本方法

// Console.log(window); and you shall see the details
// Timer function
window.setTimeout();
window.setInterval();
window.clearTimeout();
window.clearInterval();
// Reload or load new document
location.replace();
location.assign();
location.reload();
// The UI Dialogs
window.alert();
window.confirm();
window.prompt();
window.showModalDialog();
// Resize the window
window.sizeToContent();
window.scroll();
window.scrollTo();
// Other Features
window.open();
window.close();
window.stop(); // stop the window loading
// 其它操作
window.document.scrollTo();
window.document.scroll();
window.getSelction();
document.write();
document.writeln();

Window 基本属性

window.name; // 可以用于跨域传输
window.location;
window.history;
window.navigator;
window.screen;

window.devicePixelRatio
window.document
window.frameElements
window.frames
window.fullScreen

window.menubar
window.innerWidth / window.innerHeight
window.outerWidth / window.outerHeight
window.pageXOffset / window.pageYOffset

window.localStorage / window.sessionStorage
window.parent

window.performance

// Size 和 坐标
document.pageXOffset;
window.scrollLeft;
document.pageYOffset;
window.scrollTop;
window.screen; // 查看文档信息
window.innerWidth;
window.innerHeight;
window.outerWidth;
window.outerHeight;
...

Window 事件系统

window.onload
window.onerror
window.onfocus
window.onabort
window.onbeforeunload
window.onblur
window.onchange
window.onclick
window.onkeydown
window.onkeypress
window.onmousedown
window.onmouseup
window.onresize
window.onkeyup
window.onclose
window.onpaint
window.oncontextmenu
window.onhashchange
window.onselect
window.onscroll

// 针对移动端有如下特性
// identifier 手指唯一标识
// target | 客户端/页面/屏幕坐标
// rotationAngle 画出大约相当于手指形状的椭圆形
// 包含三个触摸列表
// touches 当前位于屏幕上的手指列表
// targetTouches
// changedTouches 

window.ontouchstart
window.ontouchend
window.ontouchmove
window.ontouchcancel
...

window.onlanguagechange
window.ondeviceorientation
window.ondevicelight
window.ondevicemotion

Screen Object

Screen.width
Screen.height
Screen.left / top / availTop / availeft / availHeight / availWidth
Screen.colorDepth
Screen.orientation

Screen.locakOrientation()
Screen.unlockOrientation()
Screen.add / remove EventListener();
Screen.dispatchEvent();

History Object

// Handle the history
History.length
History.current
History.next / previous / state

history.back();
history.forward();
history.go();

history.pushState();
history.replaceState();

Location Object

location.href / protocol / host / hostname / port / pathname
location.hash / search / username / password / origin

location.assign();
location.reload();
location.replace();
location.toString();

Navigator Object

navigator.appCodeName / appName / appVersion / battery / connection 
navigator.geolocation / javaEnabled / languages / mimeType / onLine
navigator.oscpu / platform / plugins

navigator.userAgent

Other Object

Ajax API

具体的功能操作和实现可以参考：Developer/JS/Core/Ajax 中的相关文件，这里主要描述核心概念。

/**
 * Created by YQN on 2014.3.20
 */
var option = null;
var request = new XMLHttpRequest(option);

var data = null;
//一个请求通常由四个部分组成：请求方法 | 请求URL | 请求的头的集合（可能包含验证信息）| 可选的请求主体
request.open("GET",'filepath/image.png',true,'','');
request.setRequestHeader('Content-Type','text/plain;charset=UTF-8')
request.send(data);
request.getResponseHeader('Content-Type');
request.abort();


// Value    State    Description
// 0    UNSENT    open()has not been called yet.
// 1    OPENED    send()has not been called yet.
// 2    HEADERS_RECEIVED    send() has been called, and headers and status are available.
// 3    LOADING    Downloading; responseText holds partial data.
// 4    DONE    The operation is complete.


//一个完整的GET请求
function getData () {
    request.open('GET','/cake/file.php',s s,'username','password');
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            var type = request.getAllResponseHeaders();
            var contentType = request.getResponseHeader('Content-type');
            if (contentType.match(/^json/)) {
                callbackFunction(request.responseText);
            }
        } else if (request.readyState === 0) {
            //doSomething here
        }
    };
    request.setRequestHeader('Content-type','application/json');
    request.send(null);
}
function callbackFunction (reseponse) {

}
getData();



//一个完整的POST请求
var postDataJSON = JSON.stringify('{"jsonStyle":"json"}');
function postData (data) {
    request.open('POST','/cake/file/getPOST.php',true,'username','password');
    request.onreadystatechange = function () {
        //According to different .status or .readyState do something
    };
    request.setRequestHeader('Content-type','application/js');
    request.send(data);
}
postData(postDataJSON);


//一个带有终止超时判定的函数
function postData2 (data) {
    var timeOut = false; //判断是否存在超时现象
    var timer = setTimeout(function(){
        timeOut = true;
        request.abort();
    },1200);
    request.open('POST','/cake/page.php',false);
    request.onreadystatechange = function () {
        if (request.readyState !== 4) return null; //忽略未完成的请求
        if (timeOut) return null;
        clearTimeout(timer);
        if (request.readyState === 4 && request.status === 200) {
            //do Something Here
        }
    };
    request.send(data);
}


//其它属性的介绍
var response = request.response,  //返回相应的文本类型
    responseText = request.responseText,

    //可以参考API之中的类型 常见的：'bolb' 'document' 'text' 'json'
    responseType = request.responseType,
    status = request.status,
    statusText = request.statusText;


request.timeout = 1200;
request.ontimeout = function () {
    //do Something Here
};

Cookie

Cookie.set();
Cookie.get();