BOM
BOM的概念
BOM(Browser Object Model) 是指瀏覽器物件模型，瀏覽器物件模型提供了獨立于內容的、可以與瀏覽器視窗進行互動的物件結構，BOM由多個物件組成，其中代表瀏覽器視窗的Window物件是BOM的頂層物件，其他物件都是該物件的子物件，
我們在瀏覽器中的一些操作都可以使用BOM的方式進行編程處理，
比如：重繪瀏覽器、后退、前進、在瀏覽器中輸入URL等
BOM的頂級物件window
window是瀏覽器的頂級物件，當呼叫window下的屬性和方法時，可以省略window 注意：window下一個特殊的屬性 window.name
之前用的 docuement完整寫法：
window.document.getElementById("xx");
window.alert(); --> alert();
全域變數函式和隱式變數
我們定義的全域變數,函式，隱式變數其實默認都是window的屬性和方法，
<script>
// 全域變數
var x = 100; // -- > window.x = 100
// 全域的函式
function fu(){ // window.fu = function(){...}
console.log(11);
// 隱式變數 （不使用var申明）
stuName = "旗木卡卡西"; // window.stuName="xxxxx"
// 區域變數，根window沒有關系
var st = "abc";
console.log("window.st="+window.st)// undefined
}
// 呼叫的時候
fu();// --> window.fu();
console.log(window);
if(1==1){
var score = 100;
}
console.log("score="+score);// 100
var y = 100;// window.y = 100;
var y = 10000;// window.y = 10000;
console.log(y);
</script>
對話框
-
alert() ： 不太友好的提示
-
prompt() ： 可輸入的提示框
-
confirm() ： 有確定和取消按鈕的確認框
案例：
<h2>window的彈窗</h2>
<input type="button" value=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"alert" id="alertBtn">
<input type="button" value=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"prompt" id="promptBtn">
<input type="button" value=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"confirm" id="confirmBtn">
<script>
document.getElementById("alertBtn").onclick=function(){
window.alert("就是一個提示，你只能點擊確定按鈕");
}
document.getElementById("promptBtn").onclick=function(){
// 兩個引數：
// 第一個引數：彈窗框的標題
// 第二個引數： 彈出框中的輸入框的默認值
var result = window.prompt("請輸入你的年齡",18);
// result : 確定按鈕，得到輸入框的值， 取消：null
console.log(result);
}
document.getElementById("confirmBtn").onclick=function(){
var result =confirm("今天你是加班還是回家");
// result： 確定true， 取消false
if(result){
alert("你是一個好員工！老板明年換大奔！");
}else{
alert("你是一個好老公！明年帶上好帽子！");
}
}
// window.open("http://www.baidu.com")
function removeFriend(){
if(confirm("您確定要洗掉好友[法外狂徒-張三]嗎？")){
// 開始洗掉
document.querySelector("li").remove();
}
}
</script>
<ul>
<!-- 使用超鏈接呼叫javascript函式-->
<li>張三 <a href=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"javascript:removeFriend()">洗掉</a></li>
</ul>
頁面加載事件
-
onload
window.onload = function () {
// 當頁面加載完成執行
// 當頁面完全加載所有內容（包括影像、腳本檔案、CSS 檔案等）執行
}
-
onunload
window.onunload = function () {
// 當用戶退出頁面時執行
}
window的其他屬性
Window.innerHeight 獲得瀏覽器視窗的內容區域的高度，包含水平滾動條(如果有的話)， Window.innerWidth 獲得瀏覽器視窗的內容區域的寬度，包含垂直滾動條(如果有的話)，
Window.outerHeight 回傳瀏覽器視窗的外部高度， Window.outerWidth 回傳瀏覽器視窗的外部寬度， Window.pageXOffset window.scrollX的別名， Window.pageYOffset window.scrollY的別名， Window.parent 回傳當前視窗或子視窗的父視窗的參考，
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
border: 0px;
}
</style>
</head>
<body>
<script>
// 全域變數
var x = 100; // -- > window.x = 100
// 全域的函式
function fu(){ // window.fu = function(){...}
console.log(11);
// 隱式變數 （不使用var申明）
stuName = "旗木卡卡西"; // window.stuName="xxxxx"
// 區域變數，根window沒有關系
var st = "abc";
console.log("window.st="+window.st)// undefined
}
// 呼叫的時候
fu();// --> window.fu();
console.log(window);
if(1==1){
var score = 100;
}
console.log("score="+score);// 100
var y = 100;// window.y = 100;
var y = 10000;// window.y = 10000;
console.log(y);
</script>
<hr>
<h2>window的彈窗</h2>
<input type="button" value=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"alert" id="alertBtn">
<input type="button" value=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"prompt" id="promptBtn">
<input type="button" value=https://www.cnblogs.com/xiaoxiaodeboke/archive/2022/01/25/"confirm" id="confirmBtn">
<script>
document.getElementById("alertBtn").onclick=function(){
window.alert("就是一個提示，你只能點擊確定按鈕");
}
document.getElementById("promptBtn").onclick=function(){
// 兩個引數：
// 第一個引數：彈窗框的標題
// 第二個引數： 彈出框中的輸入框的默認值
var result = window.prompt("請輸入你的年齡",18);
// result : 確定按鈕，得到輸入框的值， 取消：null
console.log(result);