BOM模型
BOM：浏覽器對象模型（Browser Object Model）
BOM提供了獨立于内容的、可以與浏覽器視窗進行互動的對象結構
BOM可實作功能
1.彈出新的浏覽器視窗
2.移動、關閉浏覽器視窗以及調整視窗的大小
3.頁面的前進、後退
window對象
1.常用的屬性
文法：window.屬性名= "屬性值"
示例：window.location="http://www.bdqn.cn" ; 【表示跳轉到百度首頁】
2.常用的方法
1.confirm()方法
confirm()：将彈出一個确認對話框
confirm("對話框中顯示的純文字")
<script type="text/javascript">
var flag=confirm("确認要删除此條資訊嗎？");
if(flag==true)
alert("删除成功！");
else
alert("你取消了删除");
</script>
confirm( )與alert ( )、 prompt( )差別：
alert( )：一個參數，僅顯示警告對話框的消息，無傳回值，不能對腳本産生任何改變
prompt( )：兩個參數，輸入對話框，用來提示使用者輸入一些資訊，單擊“取消”按鈕則傳回null，單擊“确定”按鈕則傳回使用者輸入的值，常用于收集使用者關于特定問題而回報的資訊
confirm( )：一個參數，确認對話框，顯示提示對話框的消息、“确定”按鈕和“取消”按鈕，單擊“确定”按鈕傳回true，單擊“取消”按鈕傳回false，是以與if-else語句搭配使用
2.open( )：打開彈出網頁
window.open("彈出視窗的url","視窗名稱","視窗特征”)
視窗特征：
| 屬性名稱 | 說 明 |
| height、width | 視窗文檔顯示區的高度、寬度。以像素計 |
| left、top | 視窗的x坐标、y坐标。以像素計 |
| toolbar=yes | no |1 | 0 | 是否顯示浏覽器的工具欄。黙認是yes |
| scrollbars=yes | no |1 | 0 | 是否顯示滾動條。黙認是yes |
| location=yes | no |1 | 0 | 是否顯示位址地段。黙認是yes |
| status=yes | no |1 | 0 | 是否添加狀态欄。黙認是yes |
| menubar=yes | no |1 | 0 | 是否顯示菜單欄。黙認是yes |
| resizable=yes | no |1 | 0 | 視窗是否可調節尺寸。黙認是yes |
| titlebar=yes | no |1 | 0 | 是否顯示标題欄。黙認是yes |
| fullscreen=yes | no |1 | 0 | 是否使用全屏模式顯示浏覽器。黙認是no。處于全屏模式的視窗必須同時處于劇院模式 |
3.close( )：網頁的關閉
window. close( );
history對象：
常用方法：
方法中的等價關系：
location對象
常用屬性：
常用方法：
location和history對象的應用
首頁面使用href實作跳轉和重新整理本頁
<a href="javascript:location.href='flower.html'" target="_blank" rel="external nofollow" >檢視鮮花詳情</a>
<a href="javascript:location.reload()" target="_blank" rel="external nofollow" >重新整理本頁</a>
<a href="javascript:history.back()" target="_blank" rel="external nofollow" >傳回首頁面</a>
Document對象
常用屬性
文法：
document.referrer
document.URL
Document對象應用
判斷頁面是否是連結進入
自動跳轉到登入頁面
var preUrl=document.referrer; //載入本頁面文檔的位址
if(preUrl==""){
document.write("<h2>您不是從領獎頁面進入，5秒後将自動
跳轉到登入頁面</h2>");
setTimeout("javascript:location.href='login.html'",5000);
}
Document對象的常用方法
Document對象通路頁面元素：
動态改變層、标簽中的内容：
document.getElementById("book").innerHTML="現象級全球暢銷書";
通路相同name的元素：
var aInput=document.getElementsByName("season");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" "; }
document.getElementById("replace").innerHTML=sStr;
通路相同标簽的元素：
var aInput=document.getElementsByTagName("input");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+" "; }
document.getElementById("replace").innerHTML=sStr;
JavaScript内置對象
1.Array：用于在單獨的變量名中存儲一系列的值
2.String：用于支援對字元串的處理
3.Math：用于執行常用的數學任務，它包含了若幹個數字常量和函數
4.Date：用于操作日期和時間
Date對象
文法：
var 日期對象=new Date(參數)
參數格式：MM DD,YYYY,hh:mm:ss
示例：
var today=new Date(); //傳回目前日期和時間
var tdate=new Date("september 1,2013,14:58:12");
常用方法
制作時鐘特效
使用Date對象的方法顯示目前時間的小時、分鐘和秒
示例
function disptime(){
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
//獲得小時、分鐘、秒數
document.getElementById("myclock").innerHTML="現在是:"+hh +":"+mm+": "+ss; }
disptime();
<div id="myclock"></div>
Math對象-常用方法
| 方法 | 說 明 | 示例 |
| ceil() | 對數進行上舍入 | Math.ceil(25.5);傳回26 Math.ceil(-25.5);傳回-25 |
| floor() | 對數進行下舍入 | Math.floor(25.5);傳回25 Math.floor(-25.5);傳回-26 |
| round() | 把數四舍五入為最接近的數 | Math.round(25.5);傳回26 Math.round(-25.5);傳回-26 |
| random() | 傳回0~1之間的随機數 | Math.random();例如：0.6273608814137365 |
如何實作傳回的整數範圍為2~99？
var iNum=Math.floor(Math.random()*98+2);
随機選擇顔色
function selColor(){
var color=Array("紅色","黃色","藍色","綠色","橙色","青色","紫色");
var num=Math.ceil(Math.random()*7)-1;
document.getElementById("color").innerHTML=color[num];
}
定時函數
1.setTimeout()
文法：setTimeout("調用的函數",等待的毫秒數)
示例：
最終代碼：
<div id="myclock"></div>
<input name="s" type="button" value="顯示提示消息" onclick="timer()" />
<script>
function timer(){
var t=setTimeout("alert('3 seconds')",3000);
}
function disptime(){
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="現在的時間是："+hh+"："+mm+"："+ss;
var myTime＝setTimeout("disptime() ", 1000 ); }
disptime()
【如果要多次調用，使用setInterval( )或者讓disptime( )自身再次調用setTimeout( )】
</script>
2.setInterval( )
文法：setInterval("調用的函數",間隔的毫秒數)
示例：
<div id="myclock"></div>
<input name="s" type="button" value="顯示提示消息" onclick="timer()" />
<script>
function timer(){
var t= setInterval ("alert('3 seconds')",3000);
}
function disptime(){
var today = new Date();
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
document.getElementById("myclock").innerHTML="現在的時間是："+hh+"："+mm+"："+ss; }
var myTime＝setInterval ("disptime() ", 1000 );
</script>
清除函數：
1.clearTimeout( )
文法：clearTimeout(setTimeOut()傳回的ID值)
示例：
var myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；
2.clearInterval ()
文法：clearInterval(setInterval()傳回的ID值)
示例：
var myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；