JavaScript的BOM又是個啥-有解無憂

BOM
掌握什么是BOM
掌握BOM對核心：-window物件
掌握window物件的控制，彈出視窗方法

BOM(Browser Object Model)瀏覽器物件模型
它提供的物件主要有：
window navigator screen history location document event
在這里插入圖片描述
全域變數：腳本的任何一個地方都能呼叫的變數

所有的全域變數和全域方法都被歸在window上

<body>
	<div id="box">
		<span>iphone6s</span>
		<input type="button" value="洗掉" id="btn">
	</div>
	<script>
       var age=15;
       function sayAge(){
       	  alert('我'+window.age);
       }
       // 宣告一個全域變數
       window.username="marry";   //相當于 var username="marry";
       // 宣告一個全域方法
       window.sayName=function(){
       	  alert("我是"+this.username);
       }
       //sayAge();
       //window.sayName();

       // confirm()
       // 獲取按鈕,系結事件
       var btn=document.getElementById("btn");
       btn.onclick=function(){
       	   // 彈出確認對話框
       	   var result=window.confirm("您確定要洗掉嗎？洗掉之后該資訊\n將不可恢復！");
       	   if(result){
              document.getElementById("box").style.display="none";
       	   }
       }
       // 彈出輸入框
       //var message=prompt("請輸入您的星座","天蝎座");
       //console.log(message);
	</script>
</body>

在這里插入圖片描述
回傳值：布林值，當點確定時，comfirm()回傳true，否則回傳false

<body>
	<input type="button" value="退 出" id="quit">
	<script>
       window.onload = function(){
       	  // 打開子視窗，顯示newwindow.html
       	  window.open("D:/little_tools/vip/html/test.html","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
       	  var quit = document.getElementById("quit");
       	  // 點擊關閉當前視窗
       	  quit.onclick = function(){
       	  	  window.close();
       	  }
       }
	</script>
</body>

在這里插入圖片描述

JavaScript是單執行緒語言，單執行緒就是所執行的代碼必須按照順序執行，

掌握超時呼叫和間歇呼叫，

在這里插入圖片描述

       //setTimeout("alert('hello')",4000);
       var fnCall=function(){
       	  alert("world");   //自定義函式
       }
       var timeout1=setTimeout(function(){
          alert("hello");   //匿名函式
       },2000)

//SetTimeout方法回傳一個ID值，通過它用clearTimeout()取消超時呼叫
       clearTimeout(timeout1);

       //setTimeout(fnCall,5000);

setTimeout()只執行code一次，如果要多次呼叫，可以讓code自己再次呼叫setTimeout（）

在這里插入圖片描述
周期性執行的間歇呼叫

       /* var intervalId=setInterval(function(){
           console.log("您好");   //列印9次
        },1000)

        // 10秒之后停止列印
        setTimeout(function(){
            clearInterval(intervalId);
        },10000);*/
        
        var num=1,
            max=10,
            timer=null;// 超時呼叫的ID是個物件，null釋放記憶體
       
       // 每隔1秒針num遞增一次，直到num的值等于max清除
      /* timer=setInterval(function(){
           console.log(num);
           num++;
           if(num>max){
              clearInterval(timer);
           }
       },1000)*/

       // 使用超時呼叫實作
       function inCreamentNum(){
           console.log(num);   // 1 2 3 10 
           num++;      
           if(num<=max){
              setTimeout(inCreamentNum,1000); //
           }else{
           	  clearTimeout(timer);
           }
       }
       timer=setTimeout(inCreamentNum,1000);

location物件
location物件提供了與當前視窗中加載的檔案有關的資訊，還提供了一些
導航的功能，它既是window物件的屬性，也是document物件的屬性，
在這里插入圖片描述

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .box1{height:400px;background:#ccc;}
       .box2{height:600px;background:#666;}
	</style>
</head>
<body>
	<div class="box1" id="top"></div>
	<div class="box2"></div>
	<input type="button" id="btn" value="回傳頂部">
	<script>
       //console.log(location.href);
       //console.log(location.hash); //給網頁后加#top可以取到#top
       var btn=document.getElementById("btn");
       btn.onclick=function(){
          location.hash="#top";
       }
       console.log(location.pathname);
	</script>
</body>

在這里插入圖片描述

location改變瀏覽器的位置
掌握位置操作，location.replace()和location.reload()函式

	<input type="button" value="重繪" id="reload">
	<script>
      /*  setTimeout(function(){
            //location.href='index6.html';
            // window.location='index6.html'; 這兩種會產生回退按鈕，下面replace則不會
            location.replace("index6.html");
        },1000)*/
         document.getElementById("reload").onclick=function(){
         	 location.reload(true);
         }
	</script>

在這里插入圖片描述
BOM中的history物件
history物件保存了用戶在瀏覽器中訪問頁面的歷史記錄

<p><input type="button" value="后退" id="btn"></p>
<script>
	var btn=document.getElementById("btn");
	btn.onclick=function(){
		history.back();
		history.go(-2);//回退2步
	}
</script>

Screen物件包含有關客戶端顯示螢屏的資訊，
在這里插入圖片描述

  console.log("頁面寬："+screen.availWidth);
  console.log("頁面高："+screen.availHeight);

  console.log("pageWidth:"+window.innerWidth);
  console.log("pageHeight:"+window.innerHeight);

navigator物件
在這里插入圖片描述
UserAgent:用來識別瀏覽器名稱、版本、引擎以及作業系統等資訊的內容，

       //console.log(navigator.userAgent);
       // 判斷瀏覽器
       function getBrowser(){
           var explorer = navigator.userAgent,
              browser;
           if(explorer.indexOf("MSIE")>-1){
              browser = "IE";
           }else if(explorer.indexOf("Chrome")>-1){
              browser = "Chrome";
           }else if(explorer.indexOf("Opera")>-1){
              browser = "Opera";
           }else if(explorer.indexOf("Safari")>-1){
              browser = "Safari";
           }
           return browser;
       }
       var browser = getBrowser();
       console.log("您當前使用的瀏覽器是："+browser);
       // 判斷終端
       function isPc(){
          var userAgentInfo = navigator.userAgent,
              Agents = ["Andriod","iPhone","symbianOS","windows phone","iPad","iPod"],
              flag = true,i;
              console.log(userAgentInfo);
           for(i=0;i<Agents.length;i++){
              if(userAgentInfo.indexOf(Agents[i])>-1){
                 flag = false;
                 break;
              }
           }
           return flag;
       }
       var isPcs = isPc();
       console.log(isPcs);

indexOf(）方法回傳某個指定的字串值在字串中首次出現的位置，如果沒有出現過，回傳-1

IE不支持console.log()，用alert()

NEXT:
一個小栗子！

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/153671.html

標籤：python

上一篇：dom模型介紹

下一篇：「CSS深度指北」前端知識梳理之CSS篇（中秋國慶特別篇）