1 BOM

1.1 BOM的技術定位

ECMAScript,DOM,BOM三者互有、共有交集，共同完成web互動的實現。

1.2 BOM的結構圖

1.3 BOM屬性

1.3-A navigator

在console面板中輸入navigator，就可以得到[Object.navigator]，包括：appCodeName,platform,userAgent等。

/* navigator.userAgent */
//chrome [-***-]
Mozilla/5.0(Windows NT 6.1;WOW64)[-AppleWebKit/537.36-](KHTML,like Gecko)
Chrome/40.0.2214.115 Safari/537.36

//firefox [-***-]
Mozilla/5.0(Windows NT6.1;WOW64;rv:36.0)[-Gecko/20100101-]Firefox36.0

//IE [-***-]
"Mozilla/5.0 (Windows NT 6.1; WOW64; [-Trident/7.0-]; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; rv:11.0) like Gecko"
 

1.3-B location

在console面板中輸入location，就可以得到[Object.location],包括href,host,hash等。

/* location */
{hash: "", host: "", hostname: "", href: "file:///D:/...", origin: "file://",
pathname: "/D:/盧萬林.致庸....", port: "", protocol: "file:", search: ""}

/* location的操作 */
//載入新的URL，記錄瀏覽歷史
assign(url)

//載入新的URL，不記錄瀏覽歷史
replace(url)

//過載當前頁面
reload()
 

1.3-C history

在console面板中輸入history，就可以得到[Object.History],記錄了length,state;

/* history */
{constructor: History {...}, length: 1, state: null}

/* history的方法 */
//回退
back();

//前進
forward();

//轉到
go();

1.3-D screen

在console面板中輸入screen，就可以得到[Object.screen],記錄了availHeight
,availWidth,height,width等。

1.4 windows物件

1.4-A windows方法

1.4-B 三種對話方塊

//alert
alert("nihao");

//confirm
confirm("真的要上嗎？");

//prompt
prompt("請輸入你的名字");

1.4-C 開關新視窗

//open()
var w = window.open("subwin.html","subwin","width=400,height=350,status=yes,resizable=yes");

//close()
w.close();

1.4-D 事件