1.window

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

  1. var age =15;
  2. //声明一个全局变量
  3. window.name="chengchao";
  4. //相当于var name = "chengchao"

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

1.Window对象的方法

  1. window.alert()<br />    window.confirm(“msg”)<br />    window.open("")
  1. 功能:显示一个带有指定消息和包含确定和取消按钮的对话框。点击确定返回true,取消返回false;
  2. eg:点击确定按钮删除小米5
  3. 技术要点:点击确定resutl返回true,取消返回false
  5.     <p>
  6.         <span>小米9</span><button id="btn">删除</button>
  7.     </p>
  8.     <script>
  9.         var res=window.prompt("请输入你的姓名");
  10.         console.log(res)
  11.         var btn=document.getElementById("btn")
  12.         /* perentNode -->亲爸 */
  13.         // console.log(btn.parentNode)
  14.         btn.onclick=function(){
  15.             var isDelete=window.confirm("你确定删除吗");
  16.             if(isDelete){
  17.                 btn.parentNode.style.display="none"
  18.             }
  19.         }
  20.     </script>

2.window对象方法—-定时器

  • 1.超时调用-setTimeout()
  • 2.间歇调用-setInterval()
    1.   <script>
    2.       /* 超时调用 间隔一段时间，执行函数，且只执行一次 */
    3.       /* 异步 */
    4.       console.log(1)
    5.       setTimeout(function(){
    6.           console.log("a")
    7.       },2000)
    8.       console.log(2);
    9.   </script>
    捕获.PNG
    1.   <script>
    2.       /* 间歇调用 间隔一段时间，执行函数 */
    3.       setInterval(function(){
    4.           console.log("b")
    5.       },3000)
    6.   </script>
  1.     <script>
  2.         /* setInterval
  3.         递归 在函数中调用函数自身 */
  4.         function go(){
  5.             // console.log("1")
  6.             setTimeout(function(){
  7.                 console.log("1")
  8.                 go()
  9.             },1000)
  10.         }
  11.         go()
  12.     </script>
  1. 定时器实例
  2.     <!-- 每一秒输出一个数字 0-3 -->
  3.     <script>
  4.         var a = 0;
  5.         function go() {
  6.             setTimeout(function () {
  7.                 console.log(a);
  8.                 a++;
  9.                 if (a <= 3) {
  10.                     go();
  11.                 }
  12.             }, 1000)
  13.         }
  14.         go();
  15.     </script>

捕获.PNG

  1.     <button id="btn">btn</button>
  2.     <script>
  3.         var btn=document.getElementById("btn");
  4.         var timer=setInterval(function(){
  5.             console.log("a")
  6.         },1000)
  7.         /* 清除定时器
  8.         clearInterval() */
  9.         console.log(timer)
  10.         btn.conclick=function(){
  11.             clearInterval(timer)
  12.         }
  13.     </script>

2.location对象

location对象提供了与当前窗口中加载的文档有关信息,还提供了一些导航的功能,他既是window对象的属性,也是document对象的属性。

  1. location.href与window.location.href等价
  2. 语法：location.hash
  3. 功能：返回URL中的hash(#号后跟0或多个字符),如果不包含则返回空字符串
  5. 语法：location.host
  6. 功能:返回服务器名称和端口号
  7. 语法：location.hostname
  8. 功能:返回不带端口号的服务器名称
  9. 语法：location.pathname
  10. 功能：返回URL中的目录和(或)文件名
  11. 语法：location.port
  12. 功能:返回URL中指定的端口号,如果没有,返回空字符串

3.history对象

1.history.back() 回到历史记录的上一步

2.history.forward() 回到历史记录的前一步

  1. history对象保存了用户在浏览器中访问页面的历史记录
  2. 语法：history.back()
  3. 功能:回到历史记录的上一步
  4. 相当于是用了history.go(-1)
  5. //-1表示前一步,-2前两部
  6. 语法：history.go(1)
  7. 功能:回到历史记录的前一步
  8. 相当于history.forward()
  9. 语法：history.go(-n)
  10. 功能:回到历史记录的前n部
  11. 语法:history.go(n)
  12. 功能:回到历史记录的后n步

4.screen对象

  1. screen对象包含有关客户端显示屏幕的信息
  2. screen.availWidth
  3. screen.availHeight

5.navigator对象

  1. 1.掌握Navigator对象的userAgent属性
  2. 2.掌握如何判断浏览器的类型
  3. 3.掌握如何判断设备的终端是移动还是PC
  4. UserAgent:用来识别浏览器名称，版本，引擎以及操作系统等信息的内容。