01-重新认识window

 JS的运行环境有两个：
       1）浏览器  把JS代码运行在浏览器上的     window
       2）Node  Node也是JS代码的运行环境      global     在node中是没有window
       但是现在统一了，不管是在浏览器中还是在node中，统一叫globalthis
       
       window上有大量的属性

window对象在浏览器中可以从两个视角来看待

视角一：全局对象 GO

视角二：浏览器窗口对象, 提供了对浏览器操作的相关的API

   window.onfocus = function(){
       console.log("浏览器窗口获取到了焦点...");
   }
   window.onblur = function(){
       console.log("浏览器窗口失去到了焦点...");
  }

 // 一个URL后面，可以跟一个#  #后面的值，叫hash值
 window.onhashchange = function(){
     console.log("hash值变了~");
 }

02-location对象

     URL:
        统一资源定位符（Uniform Resource Locator  URL）
        利用URL，就可以定位互联网上的一个资源

        如：
            https://www.baidu.com:443/phone/11?name="wc"&age=18#abc

        URL的组成(重要)：
            https://          协议   
            www.baidu.com   主机（IP）   host
            :443         端口    https协议端口默认是443     http协议端口默认是80    
            443和80通常不用写
            /phone/11    路径名
            ?name="wc"&age=18   查询字符串   query  querystring  
            #abc   hash值   锚点

location对象用于表示window上当前链接到的URL信息

常见的属性有哪些

href: 当前window对应的超链接URL, 整个URL；
protocol: 当前的协议；
host: 主机地址；
hostname: 主机地址(不带端口)；
port: 端口；
pathname: 路径；
search: 查询字符串；
hash: 哈希值；

常见的方法有哪些

assign：赋值一个新的URL，并且跳转到该URL中
replace：打开一个新的URL，并且跳转到该URL中（不同的是不会在浏览记录中留下之前的记录）
reload：重新加载页面，可以传入一个Boolean类型

URLSearchParams常见的方法

get：获取搜索参数的值；
set：设置一个搜索参数和值；
append：追加一个搜索参数和值；

has：判断是否有某个搜索参数；

  <button>打开新网页</button>
  <button>替换新网页</button>
  <button>网页重新加载</button>
<script>
   // 得到的是编码之后的URL  没有编码，浏览器会自动编码
  console.log(location.href);
  console.log(decodeURIComponent(location.href)); // 解码
  console.log(location.protocol); // 获取协议
  console.log(location.hostname); // 主机地址(不带端口)
  console.log(location.host); // 主机地址
  console.log(location.port); // 端口
  console.log(location.pathname); // 路径名
  console.log(location.search); // 查询字符串
  console.log(location.hash); // 哈希值

  let btns = document.querySelectorAll("button");
  btns[0].onclick = function(){
      location.assign("http://www.baidu.com") // 入栈
  }
  btns[1].onclick = function(){
      location.replace("http://www.baidu.com") // 替换
  }
  btns[2].onclick = function(){
      location.reload(true) // 刷新
  }

  let queryString = "?name=wc&age=18&address=bj";
  let searchParams = new URLSearchParams(queryString); // URLSearchParams是一个类
  console.log(searchParams.get("name")); // 获取
  console.log(searchParams.get("age"));
  console.log(searchParams.get("address"));

  searchParams.append("score",100); // 追加
  console.log(searchParams.get("score"));
  console.log(searchParams.has("score")); // 判断有没有score这个参数
  searchParams.set("score",50); // 设置
  console.log(searchParams.get("score"));
</script>

03-history对象

history对象允许我们访问浏览器曾经的会话历史记录

常见属性

length：会话中的记录条数
state：当前保留的状态值

常用方法

back()：返回上一页，等价于history.go(-1)；
forward()：前进下一页，等价于history.go(1)；
go()：加载历史中的某一页；
pushState()：打开一个指定的地址；

replaceState()：打开一个新的地址，并且使用replace；

  <button>修改history</button>
  <button id="out">去out.html网页</button>
  <button id="go">go</button>
  <button id="forward">forward</button>
  <button id="back">back</button>
<script>
   console.log(history.length); // 记录次数
   console.log(history.state); // 当前保留的状态值

   let out = document.getElementById("out")
   let go = document.getElementById("go")
   let forward = document.getElementById("forward")
   let back = document.getElementById("back")

   out.onclick = function(){
       location.href="./05-out.html"
   }
   go.onclick = function(){
       // history.go(1) 等价于 forward
       // history.go(-1) 等价于  history.back()
       history.go(1)
   }
   forward.onclick = function(){
       history.forward();
   }
   back.onclick = function(){
       history.back();
   }

   let btnEle = document.querySelector("button");
   btnEle.onclick = function(){
       // history.pushState 通过它可以修改路径，但是页面没有刷新
       history.pushState({a:"110"},"","/baidu")
       console.log(history.state);
   }
</script>

04-navigator对象(了解)

navigator 对象表示用户代理的状态和标识等信息。

<script>
  // 得到浏览器的信息
  console.log(navigator.userAgent); // 返回浏览器的用户代理字符串
  console.log(navigator.platform); // 返回浏览器运行的系统平台
 console.log(navigator.oscpu); // 返回浏览器运行设备的操作系统和(或)CPU
</script>

05-screen对象(了解)

screen主要记录的是浏览器窗口外面的客户端显示器的信息

比如屏幕的逻辑像素 screen.width、screen.height

<script>
  console.log(screen.width); // 屏幕像素宽度
  console.log(screen.height); // 屏幕像素高度
</script>

BOM

01-重新认识window

02-location对象

03-history对象

04-navigator对象(了解)

05-screen对象(了解)