### 一，window對象概述
BOM的核心對象是Window對象，它表示瀏覽器的一個實例。window對象處于JavaScript結構的最頂層，對于每個打開的窗口，系統都會自動為其創建window對象。所有瀏覽器都支持window對象，它表示瀏覽器窗口。所有JavaScript全局對象、函數以及變量均自動成為window對象的成員。全局變量是?window對象的屬性。全局函數是window對象的方法。甚至HTML DOM的document也是window對象的屬性之一。通過下面的兩句代碼我們可以看出window對象是BOM的頂層(核心)對象，所有對象都是通過它延伸出來的。因此調用它的子對象時可以不顯示的指明window對象：
~~~
window.document.getElementById("test");
~~~
與上述等價的寫法是：
~~~
document.getElementById("test");
~~~
### 二，window對象
(1)window對象的屬性和方法
window對象的屬性
window對象的方法
(2)系統對話框
Window對象可以在JavaScript中創建三種消息框：警告框、確認框、提示框。瀏覽器通過alert()方法，confirm()方法和prompt()方可以調用系網頁統對話框向用戶顯示信息。系統對話框與瀏覽器顯示的網頁沒有關系，也不包含HTML。
1，警告框：警告框經常用于確保用戶可以得到某些信息。當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作。
語法：alert("文本");
2，提示框：提示框經常用于提示用戶在進入頁面前輸入某個值。當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱。如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為null。
語法：prompt("文本");
3，確認框：確認框用于使用戶可以驗證或者接受某些信息。當確認框出現后，用戶需要點擊確定或者取消按鈕才能繼續進行操作。如果用戶點擊確認，那么返回值為 true。如果用戶點擊取消，那么返回值為?false。
語法：confirm("文本");
綜合實例：
~~~
var name=prompt("請輸入您的名字","");
if (confirm(name!=null&&name!=""))
{
alert("你好！"+name);
}
else
{
alert("您沒有輸入名字！");
}
~~~
3，新建窗口
使用window.open()方法可以導航到一個特定的URL，也可以打開一個新的瀏覽器窗口。它可以接受四個參數：
window.open(url,name,feature,replace);
參數解釋：
url:要加載的URL，設置打開窗口中顯示的文檔的URL，如果缺省或者為""，那么新窗口就不顯示任何文檔。
name：窗口的名稱或窗口目標。為新窗口命名。該名稱可以作為標簽和的target屬性值。如果名稱為已經存在的窗口的名稱，那么open方法就不再創建新的窗口，而只返回對指定窗口的引用，這種情況，第三個參數將被忽略。
feature：一個特性字符串，設置新窗口的顯示特性，可選參數。
replace：一個表示新頁面是否取代瀏覽器記錄中當前加載頁面的布爾值。設置是否在窗口的瀏覽歷史中給加載到新頁面的URL創建一個新條目，還是用它替換瀏覽歷史中的當前條目。
第三個特性字符串的參數：
實例：
~~~
open("http://www.baidu.com","百度","width=400,height=400,top=200,left=200,toolbar=yes","_parent");
~~~
4，窗口頁面尺寸
有三種方法能夠確定瀏覽器窗口的尺寸(瀏覽器的視口，不包括工具欄和滾動條)。
a對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
~~~
window.innerHeight;//瀏覽器窗口的內部高度
window.innerWidth;//瀏覽器窗口的內部寬度
~~~
b對于 Internet Explorer 8、7、6、5：
~~~
document.documentElement.clientHeight;
document.documentElement.clientWidth;
~~~
或者
~~~
document.body.clientHeight;
document.body.clientWidth;
~~~
實用的JavaScript方案(涵蓋所有瀏覽器)有兩個：
方案一：
~~~
var pageWidth=window.innerWidth;
var pageHeight=window.innerHeight;
if(typeof pageWidth!="number")
{
if(document.compatMode=="CSS1Compat")//標準模式
{
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeigth;
}
else
{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeigth;
}
}
document.write("瀏覽器的內部窗口寬度：" + p ageWidth + "，高度：" + pageHeight + "。");
~~~
方案二：
~~~
var pageWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var pageHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
document.write("瀏覽器的內部窗口寬度：" + pageWidth + "，高度：" + pageHeight + "。");
~~~
上述兩個方案運行的結果為：
瀏覽器的內部窗口寬度：1366，高度：607。
### 三，screen對象
screen對象包含有關用戶屏幕的信息。Screen對象最常用的兩個屬性是：availWidth(可用的屏幕寬度)和availHeight(可用的屏幕高度)。
screen對象屬性：
實例：
~~~
document.write("可用寬度：" + screen.availWidth+"，");
document.write("可用高度：" + screen.availHeight);
~~~
輸出：可用寬度：1366，可用高度：728
### 四，history對象
history對象是保存上網的記錄，從窗口被打開的那一刻算起，包含瀏覽器的歷史。為了保護用戶隱私，對
JavaScript訪問該對象的方法做出了限制。
history對象的屬性和方法：
實例：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>BOM</title>
<script type="text/javascript">
function goBack()
{
if(history.length!=0)
{
history.back();//加載歷史列表中的前一個 URL
}
}
document.write("這個網頁有"+history.length+"條歷史記錄！");
</script>
</head>
<body>
<input type="button" value="轉到上一頁" onclick="goBack()" />
</body>
</html>
~~~
運行的結果為：
### 五，location對象
location對象是BOM對象之一，它提供了與當前窗口中加載的文檔有關的信息，還提供了一些導航功能。location對象用于獲得當前頁面的地址(URL)，并把瀏覽器重定向到新的頁面。?
location對象的屬性：
location對象的方法：
實例：獲取諸如?name=liu&psw=123這種類型的鍵值對。
~~~
function getArgs()
{
//創建一個存放鍵值對的數組
var args=[];
//去除？號
var qs=location.search.length>0?location.search.substring (1):"";
//按&字符串拆分數組
var items=qs.split("&");
var item =null,name=null,value=null;
//遍歷
for(var i=0;i<items;i++)
{
item=items[i].split("=");
name=item[0];
value=item[1];
//把鍵值對存放到數組中去
args[name]=value;
}
return args;
}
var args=getArgs(); //調用函數
alert(args["name"]);
alert(args["psw"]);
~~~
- 前言
- HTML學習1：Dreamweaver8的安裝
- HTML學習2：初識HTML
- HTML學習3：常用標簽之文本標簽
- HTML學習4：常用標簽之列表標簽
- HTML學習5：常用標簽之圖像標簽
- HTML學習6：常用標簽之超鏈接標簽
- HTML學習7：常用標簽之表格標簽
- HTML學習8：常用標簽之框架標簽
- HTML學習9：常用標簽之表單標簽
- HTML學習10：表單格式化
- HTML學習11：HTTP 方法
- HTML學習12：其他常見標簽之頭標簽
- HTML學習13：其他常見標簽之體標簽
- 輕松學習JavaScript一：為什么學習JavaScript
- 輕松學習JavaScript二：JavaScript語言的基本語法要求
- 輕松學習JavaScript三：JavaScript與HTML的結合
- 輕松學習JavaScript四：JS點擊燈泡來點亮或熄滅這盞燈的網頁特效映射出JS在HTML中作用
- 輕松學習JavaScript五：JavaScript的變量和數據類型
- 輕松學習JavaScript六：JavaScript的表達式與運算符
- 輕松學習JavaScript七：JavaScript的流程控制語句
- 輕松學習JavaScript八：JavaScript函數
- 輕松學習JavaScript九：JavaScript對象和數組
- 輕松學習JavaScript十：JavaScript的Date對象制作一個簡易鐘表
- 輕松學習JavaScript十一：JavaScript基本類型(包含類型轉換)和引用類型
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(一)
- 輕松學習JavaScript十二：JavaScript基于面向對象之創建對象(二)
- 輕松學習JavaScript十三：JavaScript基于面向對象之繼承(包含面向對象繼承機制)
- 輕松學習JavaScript十四：JavaScript的RegExp對象(正則表達式)
- 輕松學習JavaScript十五：JavaScript之BOM簡介
- 輕松學習JavaScript十六：JavaScript的BOM學習(一)
- 輕松學習JavaScript十七：JavaScript的BOM學習(二)
- 輕松學習JavaScript二十九：JavaScript中的this詳解
- CSS基礎學習一：CSS概述
- CSS基礎學習二：如何創建 CSS
- CSS基礎學習三：CSS語法
- CSS基礎學習四：元素選擇器
- CSS基礎學習五：類選擇器
- CSS基礎學習六：id選擇器
- CSS基礎學習七：屬性選擇器
- CSS基礎學習八：派生選擇器
- CSS基礎學習九：偽類
- CSS基礎學習十：偽元素
- CSS基礎學習十一：選擇器的優先級
- CSS基礎學習十二：CSS樣式
- CSS基礎學習十三：盒子模型
- CSS基礎學習十四：盒子模型補充之display屬性設置
- CSS基礎學習十五：盒子模型補充之外邊距合并
- CSS基礎學習十六：CSS盒子模型補充之border-radius屬性
- CSS基礎學習十七：CSS布局之定位
- CSS基礎學習十八：CSS布局之浮動
- CSS基礎學習十九：CSS布局之圖文混排，圖像簽名，多圖拼接和圖片特效
- DIV+CSS實操一：經管系網頁總體模塊布局
- DIV+CSS實操二：經管系網頁添加導航欄和友情鏈接欄
- DIV+CSS實操三：經管系網頁內容模塊添加標題欄和版權信息模塊
- DIV+CSS實操四：經管系網頁內容模塊內容添加(一)
- DIV+CSS實操五：經管系網頁內容模塊內容添加(二)
- DIV+CSS實操六：經管系網頁添加導航欄下拉菜單
- DIV+CSS實操七：中文系內容模塊控制文本不換行和超出指定寬度后用省略號代替
- JS中實現字符串和數組的相互轉化