3.27 学前端 JavaScript之BOM对象

BOM对象

• BOM（浏览器对象模型），可以对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
• 使 JavaScript 有能力与浏览器“对话”。

window对象

window对象

• 所有浏览器都支持 window 对象。
• 概念上讲.一个html文档对应一个window对象.
• 功能上讲: 控制浏览器窗口的.
• 使用上讲: window对象不需要创建对象,直接使用即可.

Window 对象方法

alert()            //显示带有一段消息和一个确认按钮的警告框。
confirm()          //显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           //显示可提示用户输入的对话框。

open()             //打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            //关闭浏览器窗口。
setInterval()      //按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    //取消由 setInterval() 设置的 timeout。
setTimeout()       //在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     //取消由 setTimeout() 方法设置的 timeout。
scrollTo()         //把内容滚动到指定的坐标。

• 交互方法：

//方法讲解:    
//----------alert confirm prompt----------------------------
alert('aaa');

var result = confirm("您确定要删除吗?");
alert(result); //为 true 或者false

//prompt 参数1 : 提示信息.   参数2:输入框的默认值. 返回值是用户输入的内容.

var result = prompt("请输入一个数字!","haha");
alert(result);/为 对方输入的值，取消为null


//方法讲解:    
//open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.
//调用方式1
open("http://www.baidu.com");
//参数1 什么都不填 就是打开一个新窗口.  参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.
open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口
//close方法  将当前文档窗口关闭.
close();

• 练习：

var num = Math.round(Math.random()*100);
function acceptInput(){
    //让用户输入(prompt)    并接受 用户输入结果
    var userNum = prompt("请输入一个0~100之间的数字!","0");
    //将用户输入的值与 随机数进行比较
    if(isNaN(+userNum)){
        //用户输入的无效(重复2,3步骤)
        alert("请输入有效数字!");
        acceptInput();
    }
    else if(userNum > num){
        //大了==> 提示用户大了,让用户重新输入(重复2,3步骤)
        alert("您输入的大了!");
        acceptInput();
    }
    else if(userNum < num){
        //小了==> 提示用户小了,让用户重新输入(重复2,3步骤)
        alert("您输入的小了!");
        acceptInput();
    }
    else{
        //答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).
        var result = confirm("恭喜您!答对了,是否继续游戏?");
        if(result){
            //是 ==> 重复123步骤.
            num = Math.round(Math.random()*100);
            acceptInput();
        }
        else{
            //否==> 关闭窗口(close方法).
            close();
        }
    }
}

• setInterval clearInterval周期执行与停止

<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>

<script>
    function showTime(){
        var nowd2=new Date().toLocaleString();
        var temp=document.getElementById("ID1");//选择input标签
        temp.value=nowd2;//赋值
    } 
    var clock; //定义一个局部变量
    function begin(){
        if (clock==undefined){//如果没有，多次点击begin会出错，没有办法终止
            showTime();//一点击就显示
            clock=setInterval(showTime,1000);//创建周期执行对象，周期调用showTime
        }
    }
    function end(){
        clearInterval(clock);//停止clock这个周期执行对象
        clock==undefined
    }
</script>

setTimeout clearTimeout

var ID = setTimeout(abc,2000); // 只调用一次对应函数.
clearTimeout(ID);
function abc(){
    alert('aaa');
}

History 对象

History 对象属性

• History 对象包含用户（在本浏览器窗口中）访问过的 URL。类似后退
• History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

length  返回浏览器历史列表中的 URL 数量。

History 对象方法

history.length;//一个属性 有多少个url
back()    //加载 history 列表中的前一个 URL。
forward() //加载 history 列表中的下一个 URL。
go()      //加载 history 列表中的某个具体页面。参数是数字 正的是向前，负的是向后

<a href="rrr.html">click</a>
<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>
<button onclick="history.go()">back</button>

Location 对象

Location //对象包含有关当前 URL 的信息。
Location //对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
Location //对象方法
location.assign(URL);
location.reload();//重载，刷新页面
location.replace(newURL);//注意与assign的区别
location.herf='http://www.baidu.com';//跳转页面