深入浅出JavaScript8章节第06章BOM事件

什么是BOM?


BOM

window

window是浏览器的一个实例,在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,有是ECMAScript规定的Global对象
Global对象 --> 全局对象


Global对象 --> 全局对象

Window对象的方法
01
语法window.alert("content");
功能显示带有一段消息和一个确认按钮的警告框
02
语法:window.confirm("message")
功能:显示一个带有指定消息和OK与取消按钮的对话框
03
语法:window.prompt("text,defaultText")
参数说明:
text:纯文本
defaultText:默认输入文本(可不填)
返回值:如果用户点击提示框取消按钮,则返回null
如果用户单击确认按钮,则返回输入字段当前显示文本
04
语法window.open(pageURL,name,parameyers);
功能:打开一个新的浏览器窗口或查找一个已命名的窗口。
参数:
pageURL:子窗口路径
name:子窗口句柄(name声明了新窗口的名称,方便后期通过name对子窗口进行引用)
parameters:窗口参数(各参数用逗号隔开)


parameters:窗口参数

05
语法:window.close()
功能:关闭当前浏览器窗口

定时器
注释:JS是单线程语言,单线程就是所有执行代码必须按照顺序执行
01.超时调用
语法:setTimeout(code,millisec)
功能:在指定的毫秒数后调用函数或计算表达式
参数说明:
1.code:要调用的函数或要执行的JS代码串
2.millisec:执行代码前等待的毫秒数
02.清除超时调用
语法:clearTimeout(id_of_settimeout)
功能:取消setTimeout()方法设置的timeout
参数说明:
1.id_of_settTiemout:由setTimeout()返回的ID值,改值标识要取消的延迟执行代码快
提示:setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

间隔调用
01语法:setInterval(code,millisec)
功能:每隔指定时间执行一次代码
参数说明:
1.code:代码
2.millisec:周期执行or调用code间隔,以毫秒计算
02语法:clearInterval()
功能:结束间隔调用

03Location对象常用属性
01
语法:location.href
功能:返回当前加载页面完整的URL
说明:location.href与window.location.href等价
02
语法:location.hash //(获取锚点#)
功能:返回URL中的hash(#号后跟零或多个字符),如果不包含返回空中飞车
03
语法:location.host
功能:返回服务器名称和端口号(如果有)
04
语法:location.houstname
功能:返回不带端口号的服务器名称
05
语法:location.pathname
功能:返回URL中的目录和(或)文件名
06
语法:location.port
功能:返回指定URL中指定的端口号,如果没有,返回空字符串
07
语法:location.protocol
功能:返回页面使用协议
08
语法:location.search
功能:返回URL的查询字符串。这个字符串以问好开头
09
语法:location.replace(url)
功能:重新定义URL
说明:不会在历史记录中生成新记录
10
语法:location.reload()
功能:重新加载当前页面
说明:
location.reload() 重缓存中加载
location.reload(true)重服务器中重新请求页面

history对象
保存用户在浏览器上的访问页面历史记录
01
语法:history.back()
功能:回到历史记录上一步
说明:相当于使用了history.go(-1)
02
语法:history.forward()
功能:回到历史纪录的下一步
说明:相当于使用了history.go(1)
03
语法history.go(-n)
功能:回到历史记录的前N步
语法history.go(n)
回到历史纪录的后n步

Navigator对象(OS)
UserAgent:用来识别浏览器名称,版本,引擎,and,OS等信息

Screen
包含客户端显示屏幕信息
01.语法screen.availWidth
返回可用屏幕宽度
02语法screen.availHeight
返回可用屏幕高度


image.png
<body>
        <div id="box">
            Google大法
            <input type="submit" value="删 除" id="subMT"/>
        </div>
        <script type="text/javascript">
            var get_subMT = document.getElementById('subMT');
            get_subMT.onclick=function(){
                var get_box = document.getElementById('box');
                var c = confirm("你确定要删除吗?");
//              console.log(c);
                if(c==true){
                    box.style.display='none';
                }else{
                    var sd=prompt("输入修改这里的内容");
                    box.innerHTML=sd;
                }
            }
            
        </script>
    </body>
<script type="text/javascript">
            window.onload=function(){
                window.open("https://www.google.com","Google",'heigth:450px,width:450px,left:450px,top:450px,toolbar=no,menubar=no,scrollbars:no,location:no,status:no');
            }
        </script>
<script type="text/javascript">
            window.onload=function(){
                var stime=setTimeout(function(){setTimeout(console.log("STEtimeout")},1000 );
                setTimeout(function(){clearTimeout(stime)},5000);
            }
        </script>
<script type="text/javascript">
            var c=setInterval(function(){console.log("hello")},1000);
            clearInterval(c);
        </script>
location

location
<body>
    <input type="button" name="" id="but" value="BU KK" style="background: aquamarine;"/>   
    <script type="text/javascript">
        var get_but=document.getElementById('but');
        get_but.onclick=function(){
            sq = confirm("是否刷新页面");
            if(sq == true){
            location.reload();
            }else{
                location.replace('https://www.adapa.online');
            }
        }
    </script>
    </body>
<script type="text/javascript">
        //检查浏览器类型
        function getBrowser(){
            var explorer = navigator.userAgent.toLowerCase();
            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 explorer = getBrowser();
        alert(explorer);
    </script>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ★【知识点】: 1、掌握什么是BOM2、掌握BOM的核心-window对象3、掌握window对象的控制、弹出窗口...
    越IT阅读 7,142评论 0 2
  • js是前端工程师的核心,只有掌握了它才算进入真真的编程,代码虐我千百遍,我视代码如初恋。。。。 什么是javasc...
    jia林阅读 3,811评论 2 2
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 7,744评论 0 8
  • DOM DOM查找方法 document.getElementById()返回对拥有指定ID的第一个对象的引用返回...
    greenteaObject阅读 1,930评论 0 5
  • 【打卡始于2017.10.14持续于2017.10.22】 【知~学习】 《六项精进》3遍,能背诵第2-3-4-5...
    lovelyfener阅读 1,027评论 0 1