BOM · TUNA-daily

[TOC] ## 1.BOM ### 1.1. 什么是BOM編程 >* BOM是（Broswer Object Model）瀏覽器對象模型編程，JavaScript是由瀏覽器中內置的javascript腳本解釋器程序來執行javascript腳本語言的。為了便于對瀏覽器的操作，javascript封裝了對瀏覽器的各個對象使得開發者可以方便的操作瀏覽器。其中包括： 1. 窗口：window對象 2. 地址欄：location對象 3. 屏幕：screen對象 4. 歷史記錄欄：history對象 5. 瀏覽器的版本所有信息的對象。Navigator對象： >* 瀏覽器對象模型（BOM）以 window 對象為基礎，window表示在瀏覽器中打開的一個界面（表示瀏覽器窗口以及頁面可見區域） ![](https://box.kancloud.cn/61641edc55523552484b6ac0ad95dc32_663x400.png) ### 1.2 window 對象 > 1. Window 對象是 JavaScript 層級中的頂層DOM對象。 > 2. Window 對象代表一個瀏覽器窗口或一個框架。 > 3. Window 對象會在` <body>` 或` <frameset> `每次出現時被自動創建。 #### 1.2.1. window的常用方法 ##### 1. alert() 顯示一個警告框。 ##### 2. confirm() 選擇確定框。var flag = window.confirm("確認刪除？"); 會返回用戶的選擇，確定（true），取消（false） ~~~ <!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=utf-8" /> <title>window對象</title> <script type="text/javascript"> function testConfirm(){ /* 返回值就是用戶操作 true: 點擊了確定 false：點擊了取消 */ var flag = window.confirm("確認刪除？"); if(flag){ alert("確定刪除"); }else{ alert("取消操作"); } } </script> </head> <body> <input type="button" value="confirm()" onclick="testConfirm()"/> </body> </html> ~~~ ![](https://box.kancloud.cn/458a17a00fe39b2320475227b81ed001_798x568.png) 點擊確定就會彈出缺框 ![](https://box.kancloud.cn/49029b57388bb967bea60925361e0702_157x175.png) ##### 3. prompt() 輸入框。 ~~~ <!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=utf-8" /> <title>window對象</title> <script type="text/javascript"> function testPrompt(){ /* 輸入提示框 */ var flag = window.prompt("請輸入你的密碼"); if(flag){ alert("密碼正確"); }else{ alert("取消操作"); } } </script> </head> <body> <input type="button" value="testPrompt()" onclick="testPrompt()"/> </body> </html> ~~~ ![](https://box.kancloud.cn/380ff211c6417c58ef6857772603f161_911x309.png) ##### 4. moveto() 將窗口左上角的屏幕位置移動到指定的 x 和 y 位置。 ##### 5. moveby() 相對于目前的位置移動。 ##### 6. resizeTo() 調整當前瀏覽器的窗口。 ##### 7. open() 打開新窗口顯示指定的URL（有的瀏覽器中是打一個新的選項卡） window.open(),這個有三個參數： > 1. 參數一：打開的頁面 > 2. 參數二：打開的方式。 _self: 本窗口 _blank: 新窗口（默認） > 3. 參數三：設置窗口參數。比如窗口大小，是否顯示任務欄 ~~~ !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=utf-8" /> <title>window對象</title> <script type="text/javascript"> function testOpen(){ /* 參數一：打開的頁面參數二：打開的方式。 _self: 本窗口 _blank: 新窗口（默認）參數三：設置窗口參數。比如窗口大小，是否顯示任務欄 */ window.open("02.廣告頁面.html","_blank","width=300px;height=300px;toolbar=0"); } </script> </head> <body> <input type="button" value="open()" onclick="testOpen()"/> </body> </html> ~~~ ![](https://box.kancloud.cn/b6e060f37b3578100958ef6f4582d03c_1249x269.png) ##### 8. setTimeout(vCode, iMilliSeconds) 超時后執行代碼（只執行一次）。 ##### 9. setInterval(vCode, iMilliSeconds) > 定時執行代碼，第一次也是先待，到時再執行。taskId = window.setInterval("testOpen()",3000); 返回一個taskid，可以根據taskid去取消任務 ~~~ <!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=utf-8" /> <title>window對象</title> <script type="text/javascript"> var taskId; function testInterval(){ /* 定時器：每隔n毫秒調用指定的任務（函數）參數一：指定的任務（函數）參數二：毫秒數 */ taskId = window.setInterval("testOpen()",3000); } function testClearInterval(){ /*清除任務參數一：需要清除的任務ID */ window.clearInterval(taskId); } </script> </head> <body> <input type="button" value="setInteval()" onclick="testInterval()"/> <input type="button" value="clearInteval()" onclick="testClearInterval()"/> </body> </html> ~~~ ![](https://box.kancloud.cn/47260616e7071df438a72e2abe59bfad_827x583.png) 可以點擊取消定時任務 ### 1.3 location 對象 Location 對象是由 JavaScript runtime engine 自動創建的，包含有關當前 URL 的信息。提供兩個操作url的方法 > 1. href屬性設置或獲取整個 URL 為字符串。 > 2. reload() 重新裝入當前頁面 > ~~~ <!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=utf-8" /> <title>location對象</title> <script type="text/javascript"> /* href屬性：代表的是地址欄的URL，可以獲取和設置URL。URL表示統一資源定位符 reload方法：刷新當前頁面 */ function testHref(){ //alert(window.location.href); /* 通過修改location對象的href屬性來實現頁面的跳轉 */ window.location.href="02.廣告頁面.html"; } function testReload(){ //刷新當前頁面 window.location.reload(); } window.setTimeout("testReload()",1000); </script> </head> <body> <a href="02.廣告頁面.html">超鏈接</a> <input type="button" value="跳轉" onclick="testHref()"/> <input type="button" value="實現定時刷新" onclick="testRefresh()"/> </body> </html> ~~~ ### 1.4 screen 對象 Screen 對象是由 JavaScript runtime engine 自動創建的，包含有關客戶機顯示屏幕的信息。屬性： > 1. availHeight 獲取系統屏幕的工作區域高度，排除 Microsoft Windows 任務欄。 > 2. availWidth 獲取系統屏幕的工作區域寬度，排除 Windows 任務欄。 > 3. height 獲取屏幕的垂直分辨率。 > 4. width 獲取屏幕的水平分辨率。 ~~~ /* availHeight和availWidth是排除了任務欄之后的高度和寬度 */ document.write(window.screen.availWidth + "<br/>"); document.write(window.screen.availHeight + "<br/>"); document.write(window.screen.width + "<br/>"); document.write(window.screen.height + "<br/>"); ~~~ 任務欄 ![](https://box.kancloud.cn/e4a38623d9a6baa83087eb7292f19e4d_1920x482.png) ## 2. 事件 ### 2.1 事件說明大部分的HTML元素中都可以指定事件屬性。所有的事件屬性都是以on開頭，后面的是事件的觸發方式，如： onclick，表示單擊 onkeydown，表示鍵按下 ... ### 2.2 常用的事件類型： #### 2.2.1 鼠標點擊相關： > 1. onclick 在用戶用鼠標左鍵單擊對象時觸發。 > 2. ondblclick 當用戶雙擊對象時觸發。 > 3. onmousedown 當用戶用任何鼠標按鈕單擊對象時觸發。 > 4. onmouseup 當用戶在鼠標位于對象之上時釋放鼠標按鈕時觸發。 #### 2.2.2 鼠標移動相關： > 1. onmouseout 當用戶將鼠標指針移出對象邊界時觸發。 > 2. onmousemove 當用戶將鼠標劃過對象時觸發。 #### 2.2.3 焦點相關的： > 1. onblur 在對象失去輸入焦點（光標）時觸發。 > 2. onfocus 當對象獲得焦點（光標）時觸發。 #### 2.2.4 按鍵相關的： > 1. onkeydown 當用戶按下鍵盤按鍵時觸發。 > 2. onkeyup 當用戶釋放鍵盤按鍵時觸發。 > 3. onkeypress 當用戶按下字面鍵時觸發。 #### 2.2.5 內容 onchange 當對象或選中區的內容改變時觸發。 onload 在瀏覽器完成對象的裝載后立即觸發。 onsubmit 當表單將要被提交時觸發。