JavaScript–BOM

JavaScript–BOM

BOM(browser object model)浏览器对象模型

一、window对象

window是浏览器的一个实例,在浏览器中,window对象有再一次角色,它既是经过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。

1.window指标的法门
①alert(“content”)
语法:window.alert(”content”)
效能:呈现带有一段消息和一个认同按钮的警告框

②confirm(“message”)
语法:window.confirm(“message”)
职能:突显一个蕴含指定信息和OK及吊销按钮的对话框
重回值:假设用户点击确定按钮,则confirm()重回true
如果用户点击裁撤按钮,则confirm()再次回到false

③prompt(“text,defaultText”)
语法:window.prompt(“text,defaultText”)
参数表明:
text:要在对话框中突显的纯文本(而不是HTML格式的文本)
defaultText:默认的输入文本
再次来到值:如果用户单击指示框的撤销按钮,则赶回null
只要用户单击确认按钮,则赶回输入字段当前来得的文书

在意:所有的全局变量和大局方法都被归在window上

<body>
    <div id="box">
        iphone6s
        <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>

全局变量.jpg

大局函数.jpg

④open(pageURL,name,parameters)
语法:window.open(pageURL,name,parameters)
效能:打开一个新的浏览器窗口或探寻一个已命名的窗口
参数表达:
pageURL:子窗口路径
name:子窗口句柄。(name阐明了新窗口的称谓,方便前期通过name对子窗口举办引用)
parameters :窗口参数(各参数用逗号分隔)

⑤close( )
语法:window.close( )
效益:关闭浏览器窗口

index1.html:

<head>
    <meta charset="UTF-8">
    <title>open</title>
</head>
<body>
    <input type="button" value="退 出" id="quit">
    <script>
       window.onload = function(){
          // 打开子窗口,显示newwindow.html
          window.open("newwindow.html","newwindow","width=400,height=200,left=0,top=0,toolbar=no,menubar=no,scrollbars=no,location=no,status=no");
          //name的作用:在引用子窗口的时候通过name引用
          var quit = document.getElementById("quit");
          // 点击关闭当前窗口
          quit.onclick = function(){
              window.close();
          }
       }
    </script>
</body>

newwindow.html:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>hello window.open</h1>
</body>
</html>

安装窗口属性.jpg

⑥定时器

JavaScript是单线程语言,单线程就是所执行的代码必须遵从顺序。

过期调用:
语法:setTimeout(code,millisec)
效用:在指定的纳秒数后调用函数或总结表达式
参数表达:
1、code:要调用的函数或要实施的JavaScript代码串
2、millisec:在进行代码前需等待的飞秒数

表明:set提姆eout()只进行code三次。假若要再三调用,请使用setInterval()或者让code自身再度调用set提姆(Tim)eout()

set提姆(Tim)eout方法再次回到一个ID值,通过它废除超时调用

消除超时调用:
语法:clearTimeout(id_of_settimeout)
功用:废除由set提姆(Tim)eout()方法设置的timeout
参数表达:
1、 id_of_settimeout
:由set提姆eout()再次回到的ID值,该值标识要注销的延期执行代码块

<body>
    <script>
       //setTimeout("alert('hello')",4000);

       //匿名函数
       var timeout1=setTimeout(function(){
          alert("hello");
       },2000)

       //自定义函数
       var fnCall=function(){
          alert("world");
       }
       clearTimeout(timeout1);
        //推荐:
       //setTimeout(fnCall,5000);
    </script>
</body>

暂停调用:
语法:setInterval(code,millisec)
效益:每隔指定的年月实施五次代码
参数表明:
1、code:要调用的函数或要履行的代码串。
2、millisec:周期性执行或调用code之间的日子间隔,以皮秒计

<body>
    <script>
       /* var intervalId=setInterval(function(){
           console.log("您好");
        },1000)

        // 10秒之后停止打印
        setTimeout(function(){
            clearInterval(intervalId);
        },10000);*/

        var num=1,
            max=10,
            timer=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);
    </script>
</body>

二、location对象

location对象提供了与当前窗口中加载的文档有关的信息,还提供了部分导航的职能,它既是window对象的习性,也是document对象的习性。

1.location对象的常用属性
①location.href
语法:location.href
效用:重回当前加载页面的共同体URL
说明: location.href与window.location.href等价

②语法:location.hash
功能:返回URL中的hash(#号后 跟零或三个字符),虽然不分包
则赶回空字符串。

<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);
       //file:///E:/BaiduNetdiskDownload/JavaScript/js%E8%B5%84%E6%96%99%E5%92%8C%E6…E5%9F%BA%E7%A1%80%EF%BC%88%E6%BA%90%E4%BB%A3%E7%A0%81%EF%BC%89/index6.html
       //console.log(location.hash); 
       //在连接中加入锚点 打印锚点#top
       var btn=document.getElementById("btn");
       btn.onclick=function(){
          location.hash="#top";
       }
       console.log(location.pathname);
    </script>
</body>

③location.host
语法:location.host
意义:重返服务器名称和端口号(倘使有)

④location.hostname
语法:location.hostname
效用:再次回到不带端口号的服务器名称。

⑤location.pathname
语法:location.pathname
职能:重返URL中的目录和(或)文件名。

⑥location.port
语法:location.port
效果:再次回到URL中指定的端口号,假若没有,重临空字符串。

⑦location.protocol
语法:location.protocol
效益:再次回到页面使用的商事。

⑧location.search
语法:location.search
效率:重临URL的询问字符串。那么些字符串以问号起先。

xxxx?id=55&name=marry;
location.search;
"?id=55&name=marry;"

2.locating目标的职务操作
更改浏览器地点的方法:
location.href属性
location对象其他属性也可改变URL:
location.hash
location.search

①location.replace()
语法:location.replace(url)
效益:重新定向URL。
阐明: 使用location.replace不会在历史记录中生成新记录。

②location.reload()
语法:location.reload()
效能:重新加载当前彰显的页面。
说明:
• location.reload()有可能从缓存中加载
• location.reload(true)从服务器重新加载

<body>
    <input type="button" value="刷新" id="reload">
    <script>
      /*  setTimeout(function(){
            //location.href='index6.html';
            // window.location='index6.html';
            location.replace("index6.html");
        },1000)*/
         document.getElementById("reload").onclick=function(){
             location.reload(true);
         }
    </script>
</body>

三、history对象

history对象保存了用户在浏览器中访问页面的历史记录

①history.back()
语法:history.back()
意义:回到历史记录的上一步
申明:相当于接纳了history.go(-1)

②history.forward()
语法:location.forward()
职能:回到历史记录的下一步
阐明:相当于采纳了history.go(1)

③history.go(-n)
语法:history.go(-n)
效果:回到历史记录的前n步

④history.go(n)
语法:history.go(n)
效益:回到历史记录的后n步

<body>
    <p>这是index11.html</p>
    <p><input type="button" value="后退" id="btn"></p>
    <p><input type="button" value="前进" id="btn2"></p>
    <p><input type="button" value="前进两步" id="btn3"></p>
    <script>
        var btn=document.getElementById("btn");
        var btn2=document.getElementById("btn2");
        var btn3=document.getElementById("btn3");
        //点击btn按钮时回到历史记录的上一步
        btn.onclick=function(){
            //history.back();
            //history.go(-1);
            history.go(-2);//回到前两步
        }
        //点击btn2按钮来到历史记录的下一步
        btn2.onclick=function(){        
            //history.forward();
            history.go(1);
        }
        //点击btn3按钮来到历史记录的下一步
        btn3.onclick=function(){        
            history.go(2);
        }
    </script>
</body>

四、Screen对象

饱含关于客户端显示屏幕的音讯
①screen.availWidth
语法:screen.availWidth
功能:再次回到可用的屏幕宽度

②screen.availHeight
语法:screen.availHeight
职能:再次回到可用的屏幕低度

<body>
    <script>
        //获取屏幕的宽和高
        console.log("页面宽:"+screen.availWidth);
        console.log("页面高:"+screen.availHeight);
        //获取窗口的宽和高
        console.log("pageWidth:"+window.innerWidth);
        console.log("pageHeight:"+window.innerHeight);
    </script>
</body>

五、Navigator对象

UserAgent:用来分辨浏览器名称、版本、引擎 以及操作系统等音信的情节。
可以看清浏览器的类型
判断设备的顶点是活动如故PC

<head>
    <meta charset="UTF-8">
    <title>Navigator</title>
</head>
<body>
    <script>
       //console.log(navigator.userAgent);
       // 判断浏览器
       function getBrowser(){
           var explorer = navigator.userAgent,browser;
           //indexOf():返回某个指定的字符串值在字符串中首次出现的位置,如果没有出现过,返回-1
           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);
    </script>
</body>