JS-BOM对象(一)_window、location

BOM/浏览器对象模型

他给js提供了可以操作浏览器的实现

BOM可以做什么？

1. 可以操作window对象

2. 提供导航对象

3. 提供定位对象

4. 提供了历史对象

5. 提供了屏幕对象

window: 它是最顶层的对象：

1. document 文档对象 ： 对应 页面

2. Loction 定位对象 : 对应 地址栏

3. histroy 历史对象 ： 对应 向前 向后和刷新的那个按钮

4. Navigator 导航对象 ： 对应 客户端浏览器的信息（比如：浏览器的类型, 浏览器的版本等等的）

5. Screen 屏幕对象 : 对应 屏幕

6. frame 框架对象 （*** 用的不多）

window对象的方法

//当调用window对象的方法时  window是可以省略的

//------警告框-----
    window.alert("警告文字");

// -----确认框( 当点击确认是 返回true   点击取消时 返回  false)----
    let result =   window.confirm("确定要删除吗?");

// ----输入框-----（很少用,基本不用）
    let result = prompt("请输出一个整数");  
    // 凡是从客户端获得数据都是一个字符串，参与运算花，都需要数据类型转换
   
// ---open--- 方法: 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口
    /* open 有4个参数，都是可选的：     
        1  url: 链接的网页的地址
        2  name: 窗体的名字  主要是用于超链接中的 target属性。
        3 窗口的特征： 用来设置窗体的大小，位置，显示内容等等
        4 换浏览历史中的当前条目（基本不用）
    */       
    // 当打开一个窗体的时候  它会返回一个新的窗体对象               
    let new_window = window.open("网页地址","窗体名字","窗体特征");

// --close()-- 关闭窗体： 一定要确定你关闭的是哪一个窗体
     
// 时间间隔函数
    window.setInterval()   
    window.setTimeout()  
//  当启动 时间间隔函数 时  该函数会返回一个 时间id 给我们。我们可以用来取消时间间隔函数   

//  --------开启时间间隔--------------
//    setInterval()  
//    按照指定的周期（以毫秒计）来调用函数或计算表达式。 每隔多少毫秒执行一次，（它会重复执行）
//    setTimeout()   
//在指定的毫秒数后调用函数或计算表达式。  多少毫秒后执行一次（ 它值执行一次）
//--------清理时间间隔---------------
    clearInterval( 时间id )  
    clearTimeout(时间id)

window对象的属性

 //获得窗体的内部和外部的高度和宽度

    window.innerWidth
    window.innerHeight  
    // 窗体可视区域的宽度和高度

    window.outerWidth
    window.outerHeight
    // 窗体和宽度和高度

    document.documentElement.clientWidth   
    document.documentElement.clientHeight
    //窗体可视区域的宽度和高度,不属于window但是简单

//opener   返回对创建此窗口的窗口的引用。

Location

Location对象 : 该对象主要是操作浏览器中的地址栏的

Location 对象包含有关 当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

一个完整的url地址的组成部分：

1. 协议： http://

   http : 超文本传输协议 （http协议其实就是tcp/ip协议的封装）

   https : 超文本传输协议（安全机制的）

   tcp/ip： 互联网协议

   ftp： 文件传输协议

   smtp: 简单邮件传输协议

2. 主机地址： localhost:8080（127.0.0.1:8080） ip地址+端口号

   一台电脑上可以安装多个服务器

3. 主机下的项目的名称

4. 项目的名称下面的资源

5. 查询字符串 作用： 传递参数给网后台使用的。 ？ 多个参数使用 & 符号.

url与uri

url: 统一资源定位符 作用： 用来获得和访问互联网上的资源

uri: 统一资源标识符 uri 可以认为他是url的一个组成部分: 除去了 协议和主机地址后面的部分 就是 uri

Location的使用

// 如何获得location对象
    var  locationObj = window.location;

//操作location对象的属性
    //获得主机地址
     var  host_val =  locationObj.host;

    //获得主机名
    var hostname = locationObj.hostname;

    //获得端口号
    var port_val = locationObj.port;

    //获得地址栏上的完整的url 地址（ 常用 常用 常常用****）
    var url_val = locationObj.href;

    //获得路径部分(uri)
    var path_val = locationObj.pathname;
    
    //获得协议
    var  protocol_val = locationObj.protocol;

    //获得查询字符串
    var str = locationObj.search;

location的方法

//assign()   加载新的文档。  它跳转页面时 会产生历史记录。
    window.location.assign("https://www.baidu.com");

//reload(布尔值)  刷新  如果 设置为 true  则表示一直从服务器上获取。
    window.location.reload();

//replace()  可用一个新文档取代当前文档。 它跳转页面时 不不不会产生历史记录。
    window.location.replace("https://www.baidu.com");

// 跳转我们常用设置 href属性的方法。
    window.location.href="https://www.baidu.com";
    //window.location.href="#";不跳转