Python学习第81天（js的BOM对象）

Posted 2021-02-18 崆峒山肖大侠

　　今天的主要内容是JavaScript部分的BOM对象，和部分函数作用域的问题　　

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

　　　　使 JavaScript 有能力与浏览器“对话”。 其实都是属于window对象，只是进行了部分的细分

　　　　（一）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和Flase

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

　　　　setInterval clearInterval

　　　　实现在文本输入框内每隔一秒显示一次时间，按停止后停止显示

　　　　期间出现了三次问题：

　　　　　　1.启动数值后需要1秒后才能显示，解决方法是在begin函数内增加showtime（）

　　　　　　2.clock会被多次启动，导致无法正常关闭，解决方法，增加判断，只有clock=undefined的时候才能被重新赋值

　　　　　　3.clock在停止后需要被重新赋值为undefined，否则无法重新开始，在end（）后面增加clock = undefined

<input id="ID1" type="text" onclick="begin()">
<button onclick="end()">停止</button>
<script>
    function showTime(){
           var nowd2=new Date().toLocaleString();
           var temp=document.getElementById("ID1");
           temp.value=nowd2;
    }

    var clock;
    function begin(){
        if (clock==undefined){
             showTime();
             clock=setInterval(showTime,1000);
        }
    }

    function end(){
        clearInterval(clock);
        clock==undefined；
    }
</script>

　　　　setTimeout clearTimeout

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

　　　　

　　（二）history对象

　　　　History 对象包含用户（在浏览器窗口中）访问过的 URL。

　　　　History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

　　　　就是我们经常在左上角用到的前进和后退

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

　　　　History 对象方法

　　　　　　back() 加载 history 列表中的前一个 URL。

　　　　　　forward() 加载 history 列表中的下一个 URL。

　　　　　　go() 加载 history 列表中的某个具体页面。测试后发现参数只能是1或者-1　　　　

<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) 跳转至链接页面，可使用history的前进和返回

　　　　　　location.reload()    刷新

　　　　　　location.replace(newURL)//注意与assign的区别　覆盖至链接页面，无法使用前进后退　　　　

    function f() {
        location.reload()
        location.assign("http://www.baidu.com")
        location.replace("http://www.baidu.com")
    }

　　　　关于BOM对象就是以上内容，主要是setInterval clearInterval还是蛮重要和蛮实用的

　　　　关于作用域的问题，其实和Python是差不多的。

　　　　以上就是今天的全部。