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

1、全局变量/局部变量

在函数外面声明的变量,是一个全局变量，全局变量是window的一个属性

  1. <script>
  2.         var a = 10;
  3.         /* 在函数外面声明的变量,是一个全局变量
  4.         全局变量是window的一个属性
  5.          */
  6.         console.log(window.a)
  7.     </script>
  9.     <script>
  11.         var a = 10;  //全局变量
  12.         function go(){
  13.             var b = 20;   //局部变量
  14.             console.log(b);
  15.         }
  16.         console.log(a);
  17.         console.log(b);
  18.     </script>

1.1、作用域

在函数外面声明的变量,是一个全局变量
作用域: 就是一个变量能够生效的范围

  1.     <script>
  2.         /* 
  3.         在函数外面声明的变量,是一个全局变量
  4.         作用域: 就是一个变量能够生效的范围
  5.          */
  6.         var a = 10;
  7.         function go(){
  8.             var b = 20;
  9.             console.log(b);
  10.         }
  11.         console.log(a)
  12.         console.log(b);
  13.     </script>

1.2、声明提前

JS在执行代码的时候,会将所有使用var声明的变量,放在作用域的顶层集中创建 ,赋值留在原地

  1.     <script>
  2.         /* 
  3.         JS在执行代码的时候,会将所有使用var声明的变量,放在作用域的顶层集中创建
  4.         ,赋值留在原地
  5.          */
  6.         var a,b;
  7.         console.log(a);
  8.         a = 10;
  10.         b = 20;
  11.         console.log(b);
  12.     </script>

2、window对象的方法

window方法的特点:window是可以省略
1、window是访问窗口的一个接口
2、是一个全局对象

2.1、alert

  1.     <script>
  2.         window.alert("hello world");
  3.     </script>

2.2、window.prompt

参数说明
text:在对话框中显示的文本
defaultText:默认输入文本
返回值:点取消按钮,返回null
点确定按钮,返回输入的文本

  1.     <script>
  2.         var b = prompt("请输入你的年龄");
  3.         console.log(b);
  4.         if(b){
  5.             alert("输入成功")
  6.         }else{
  7.             alert("不能没有输入")
  8.         }
  9.     </script>

2.3、window.confirm

功能：显示一个带有指定消息和包含确定和取消按钮的对话框。点击确定返回true,取消返回false;

  1. var value = window.confirm("去不去")
  2. console.log(value)  // true / false

2.4、点击删除，出现弹框，点击确认即删除

  1. <body>
  2.     <ul>
  3.         <li>html <button>删除</button></li>
  4.         <li>css <button>删除</button></li>
  5.         <li>javascript <button>删除</button></li>
  6.     </ul>
  7.     <script>
  8.         var btns = document.getElementsByTagName("button");
  9.         /* 1、给每个btn绑定点击事情 */
  10.         for(var i=0;i<btns.length;i++){
  11.             btns[i].onclick = function(){
  12.                 /* 2、点击对应的元素,将其父元素删除 */
  13.                 var  isShow = confirm("是否删除");
  14.                 console.log(isShow);
  15.                 if(isShow){
  16.                     this.parentNode.style.display="none"
  17.                 }
  18.             }
  19.         }
  20.     </script>

2.5、history 对象

功能:回到历史记录的上一步

  1. <button id="btn">btn</button>
  2.     <script>
  3.        var btn = document.getElementById("btn");
  4.        btn.onclick = function(){
  5.            /* 回退到前一个页面 */
  6.            history.back();
  7.        }
  8.     </script>
  12. history对象保存了用户在浏览器中访问页面的历史记录
  13. 语法：history.back()
  14. 功能:回到历史记录的上一步
  15. 相当于是用了history.go(-1)
  16. //-1表示前一步,-2前两部
  17. 语法：history.go(1)
  18. 功能:回到历史记录的前一步
  19. 相当于history.forward()
  20. 语法：history.go(-n)
  21. 功能:回到历史记录的前n部
  22. 语法:history.go(n)
  23. 功能:回到历史记录的后n步

2.6、screen 对象

  1. <script>
  2.         /* 屏幕的width */
  3.         var sw = screen.availWidth;
  4.         /* 屏幕的高度 */
  5.         var sh = screen.availHeight;
  6.         console.log(sw);
  7.         console.log(sh)
  8.         /* 可视区域的高度 */
  9.         var vh = document.documentElement.clientHeight;
  10.         console.log(vh)
  11.     </script>
  13. screen对象包含有关客户端显示屏幕的信息
  14. screen.availWidth
  15. screen.availHeight
  16. // 获取屏幕的宽度
  17. var screenWidth = window.screen.availWidth;
  18. console.log(screenWidth);
  19. // 获取屏幕的可视区
  20. var viewWidth = document.documentElement.clientWidth;
  21. console.log(viewWidth);

2.7、判断滚动条到达底部

  1. <style>
  2.         *{margin:0;padding:0}
  3.         body{
  4.             height: 2000px;
  5.         }
  6.         div{
  7.             width:300px;
  8.             height: 1700px;
  9.             background-color: red;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div>
  16.     </div>
  17.     <script>
  18.         var bodyH = document.body.clientHeight;
  19.         var vh = document.documentElement.clientHeight;
  20.         // console.log(bodyH)
  21.         console.log(vh)
  22.         /* 滚动条滚动的距离+vh ==bodyH */
  23.         window.onscroll= function(){
  24.             var scrollTop = window.scrollY;
  25.             console.log(scrollTop)
  26.         }
  27.         /* scrollTop+vh ==bodyH   判断页面到底了*/
  28.     </script>
  29. </body>