js第五周笔记

一、BOM

Browser Object Model：浏览器对象模型：提供专门用操作浏览器的一些对象（属性和方法），没有标准（大部分浏览器还是统一的，唯独老IE与众不同）- 使用率相对较低
      重点：定时器、事件对象event
      DOM：是有标准的：w3c规定的，几乎没有兼容性问题

二、window对象介绍：扮演着两个角色

代替了ES中的global，充当全局对象 - 保存全局变量和全局函数
自己也带有一些属性和方法，指代当前窗口本身

1、网页打开新链接的方式：4种 - 目的：提升用户的体验感
            1）、替换当前页面，可以后退
                HTML：<a href="url">内容</a>
                     JS：open("url","_self");

            2）、替换当前页面，禁止后退 - 场景：电商网站，付款后不允许退回去再次付款
                history对象：记录着【当前窗口】的历史记录，只有有了历史才能前进后退
                location对象：记录着【当前窗口】正在打开的url，而他又一个方法叫做替换，替换是不会产生任何历史记录的，但是url替换后网页必然跳转
                     JS：location.replace("新url")

            3）、新窗口打开，可以打开多个
                HTML：<a href="url" target="_blank">内容</a>
                     JS：open("url","_blank");

            4）、新窗口打开，只能打开一个 - 场景：电商网站，只允许用户打开一个付款页面
                HTML：<a href="url" target="自定义name">内容</a>
                自定义name的意思：每一个窗口底层都有一个名字，target其实就是在设置名字，name如果相同，新打开的窗口就会把旧窗口给替换掉（刷新）
                     JS：open("url","自定义的name");
        
            HTML能做的，JS都能做，JS能做的，HTML不一定可以

            扩展a标签的作用：
                ①、跳转
                ②、锚点
                ③、下载：<a href="xx.exe/zip/rar/7z">内容</a>
                ④、打开：<a href="xx.图片后缀/txt">内容</a>
                ⑥、直接书写js：<a href="javascript:js代码;">内容</a>

2、window提供了属性和方法：
            属性：获取浏览器的完整大小：outerWidth/outerHeight;
                      获取浏览器的文档显示区域的大小：innerWidth/innerHeight
                      获取屏幕的完整大小：screen.width/height;
                 每个人的电脑分辨率是不一样的

            方法：1）、打开窗口：var newWindow=open("url","自定义的name","width=,height=,left=,top=");
                    注意：①、第三个配置参数没有传入时，窗口大小和浏览器一样，并且黏在浏览器上面（融为一体）
                               ②、写入了第三个实参，则会脱离浏览器并且一个独立的小窗口，并且可以保存起来，设置为他绑定事件
                               ③、宽高不能设置的太小了
                      2）、关闭窗口：window/newW.close();
                      3）、修改窗口的大小：newW.resizeTo(new宽,new高);
                      4）、修改窗口的位置：newW.moveTo(x,y);

3、*****定时器：
        1）、周期性定时器
            开启：timer=setInterval(callback,间隔毫秒数);
            停止：clearInterval(timer)

        2）、一次性定时器
            开启：timer=setTimeout(callback,间隔毫秒数);
            停止：clearTimeout(timer)

        注意：一次性和周星期底层都是一样的，甚至可以呼唤，所以你到底以后用哪个无所谓

        面试题：函数 和 循环 和 定时器都能反复执行操作，区别？ - 时机
            ①、函数 - 用户触发、程序员调用
            ②、循环 - 一瞬间基本就结束了
            ③、定时器 - 等待一段时间做一次

两个小案列

1、点不到的小窗口/div（广告）
        有可能下次生成的位置，我的鼠标刚好就在里面
        扩展：*****获取鼠标的位置：
            1）、绑定事件：事件处理函数形参可以写一个e，自动获取到事件对象event - 明日的重点
            2）、获取坐标：3种
                e.screenX/Y - 获取鼠标相对于屏幕的位置
                e.clientX/Y   - 获取鼠标相对于客户端/浏览器的位置
                e.pageX/Y    - 获取鼠标相对于页面的坐标

2、鼠标的跟随动画：
        1）、事件window/document.onmousemove
        2）、js的加载速度比图片的加载速度快，加载事件：onload事件
        3）、删除图片，实在动画开始时开启了定时器

三、BOM的其他对象

1、history对象：保存【当前窗口】的历史记录（打开【过】的url），可用于
        前进：history.go(1);
        后退：history.go(-1);
        刷新：history.go(0);

2、*navigator对象：保存了当前浏览器的基本信息，可以使用js来判断我们是什么浏览器以及版本号 - 类似于css hack（浏览器兼容性问题的，专门针对老IE），但是更强大，单独为老IE写js
        属性：navigator.userAgent;    -   能够得到一个字符串，包含着是什么浏览器以及版本号，想办法去拿到你需要的部分