JavaScriptのBOMとは何ですか?

BOM
マスター
コアへのBOMマスターBOMとは:-ウィンドウオブジェクト
マスターウィンドウオブジェクトの制御、ポップアップウィンドウメソッド

BOM(ブラウザオブジェクトモデル)ブラウザオブジェクトモデル
主なオブジェクトを提供します:
ウィンドウナビゲーター画面履歴場所ドキュメントイベント
ここに写真の説明を挿入
グローバル変数:スクリプト内のどこからでも呼び出すことができる変数
ここに写真の説明を挿入
すべてグローバル変数とグローバルメソッドはウィンドウにグループ化されます

<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()はコードを1回だけ実行します。複数回呼び出す場合は、コードで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);

ロケーションオブジェクト
ロケーションオブジェクトは、現在のウィンドウにロードされているドキュメントに関連する情報を提供し、いくつかの
ナビゲーション機能も提供します。これは、ウィンドウオブジェクトの属性であるだけでなく、ドキュメントオブジェクトの属性でもあります。
ここに写真の説明を挿入

<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の履歴オブジェクト
履歴オブジェクトは、ブラウザでページにアクセスしたユーザーの履歴を保存します
ここに写真の説明を挿入
ここに写真の説明を挿入
ここに写真の説明を挿入

<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);


ここに写真の説明を挿入
ナビゲーターオブジェクト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()を使用してください

次へ:
小さな栗!

おすすめ

転載: blog.csdn.net/qq_44682019/article/details/108899427