JavaScript小白教程7瀏覽器對象模型 BOM

時間 2019-12-09

標籤 javascript 教程瀏覽器對象模型 bom 欄目 JavaScript 简体版

原文原文鏈接

JavaScript Window - 瀏覽器對象模型web

Window 對象

全部瀏覽器都支持 window 對象。它表示瀏覽器窗口。頁面就是一個窗口瀏覽器

全部 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。cookie

全局變量是 window 對象的屬性。app

全局函數是 window 對象的方法。函數

Window 尺寸（窗口的大小：長寬）url

其餘 Window 方法

一些其餘方法：spa

window.open() - 打開新窗口
window.close() - 關閉當前窗口
window.moveTo() - 移動當前窗口
window.resizeTo() - 調整當前窗口的尺寸

JavaScript Window Screen代理

window.screen 對象包含有關用戶屏幕的信息code

window.screen對象在編寫時能夠不使用 window 這個前綴orm

一些屬性：

screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度

JavaScript Window Location

window.location 對象用於得到當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

Window Location

window.location 對象在編寫時可不使用 window 這個前綴。一些例子：

一些實例:

location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口（80 或 443）
location.protocol 返回所使用的 web 協議（http: 或 https:

Window Location Href（方法）

location.href 屬性返回當前頁面的 URL。

<script>

document.write(location.href);

</script>

Window Location Pathname

location.pathname 屬性返回 URL 的路徑名

<script>

document.write(location.pathname);

</script>

Window Location Assign

location.assign() 方法加載新的文檔

下面這是是加載另外一個頁面，url至關於跳轉到那個頁面的連接

<body>
 
<script>
function newDoc(){ window.location.assign("https://www.runoob.com") } </script>
<input type="button" value="加載新文檔" onclick="newDoc()">
 
</body>

JavaScript Window History

window.history 對象包含瀏覽器的歷史

Window History

window.history對象在編寫時可不使用 window 這個前綴。

爲了保護用戶隱私，對 JavaScript 訪問該對象的方法作出了限制。

一些方法：

history.back() - 與在瀏覽器點擊後退按鈕相同
history.forward() - 與在瀏覽器中點擊向前按鈕相同

除此以外能夠用 history.go() 這個方法來實現向前，後退的功能

JavaScript Window Navigator

window.navigator 對象包含有關訪問者瀏覽器的信息

<body>
    
<div id="example"></div>
<script>
txt = "<p>瀏覽器代號: " + navigator.appCodeName + "</p>";
txt+= "<p>瀏覽器名稱: " + navigator.appName + "</p>";
txt+= "<p>瀏覽器版本: " + navigator.appVersion + "</p>";
txt+= "<p>啓用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平臺: " + navigator.platform + "</p>";
txt+= "<p>用戶代理: " + navigator.userAgent + "</p>";
txt+= "<p>用戶代理語言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

</body>

輸出結果：

瀏覽器代號: Mozilla

瀏覽器名稱: Netscape

瀏覽器版本: 5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134

啓用Cookies: true

硬件平臺: Win32

用戶代理: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36 Edge/17.17134

用戶代理語言: undefined

JavaScript 彈窗

能夠在 JavaScript 中建立三種消息框：警告框、確認框、提示框。

警告框

警告框常常用於確保用戶能夠獲得某些信息。

當警告框出現後，用戶須要點擊肯定按鈕才能繼續進行操做

<body>
    
<script>
function myFunction(){
    alert("你好，我是一個警告框！");
}
</script>

<input type="button" onclick="myFunction()" value="顯示警告框" />

</body>

確認框

確認框一般用於驗證是否接受用戶操做。

當確認卡彈出時，用戶能夠點擊 "確認" 或者 "取消" 來肯定用戶操做。

當你點擊 "確認", 確認框返回 true，若是點擊 "取消", 確認框返回 false。

<body>

<p>點擊按鈕，顯示確認框。</p>
<button onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x;
    var r=confirm("按下按鈕!");
    if (r==true){
        x="你按下了\"肯定\"按鈕!";
    }
    else{
        x="你按下了\"取消\"按鈕!";
    }
    document.getElementById("demo").innerHTML=x;
}
</script>

</body>

提示框

提示框常常用於提示用戶在進入頁面前輸入某個值。

當提示框出現後，用戶須要輸入某個值，而後點擊確認或取消按鈕才能繼續操縱。

若是用戶點擊確認，那麼返回值爲輸入的值。若是用戶點擊取消，那麼返回值爲 null。

<body>

<p>點擊按鈕查看輸入的對話框。</p>
<button onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x;
    var person=prompt("請輸入你的名字","Harry Potter");
    if (person!=null && person!=""){
        x="你好 " + person + "! 今天感受如何?";
        document.getElementById("demo").innerHTML=x;
    }
}
</script>

</body>

換行

彈窗使用反斜槓 + "n"(\n) 來設置換行。

<body>

<p>點擊按鈕在彈窗總使用換行。</p>
<button onclick="myFunction()">點我</button>
<p id="demo"></p>
<script>
function myFunction(){
    alert("Hello\nHow are you?");
}
</script>

</body>

語法

window.alert(" sometext");

window.alert() 方法能夠不帶上window對象，直接使用alert()方法。

一般都不帶前面的widow.直接寫成alert();

JavaScript 計時事件

JavaScript 一個設定的時間間隔以後來執行代碼.咱們稱之爲計時事件

JavaScript 計時事件

經過使用 JavaScript，咱們有能力作到在一個設定的時間間隔以後來執行代碼，而不是在函數被調用後當即執行。咱們稱之爲計時事件。

在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

setInterval() - 間隔指定的毫秒數不停地執行指定的代碼。
setTimeout() - 在指定的毫秒數後執行指定代碼。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window對象的兩個方法。

<body>

<p>單擊按鈕每3秒出現一個「Hello」警告框。</p>
<p>再次點擊警告框，通過3秒出現新的警告框，這將一直執行 ...</p>
<button onclick="myFunction()">點我</button>
<script>
function myFunction(){
    setInterval(function(){alert("Hello")},3000);
}
</script>

</body>

<body>

<p>在頁面顯示一個時鐘</p>
<p id="demo"></p>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
</script>

</body>

如何中止執行?

clearInterval() 方法用於中止 setInterval() 方法執行的函數代碼。

<body>

<p>頁面上顯示時鐘：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">中止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
    clearInterval(myVar);
}
</script>

</body>

setTimeout() 方法

<body>

<p>點擊第一個按鈕等待3秒後出現"Hello"彈框。</p>
<p>點擊第二個按鈕來阻止第一個函數運行。（你必須在3秒以前點擊它）。</p>
<button onclick="myFunction()">點我</button>
<button onclick="myStopFunction()">中止彈框</button>
<script>
var myVar;
function myFunction(){
    myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){
    clearTimeout(myVar);
}
</script>

</body>