window对象，常见属性，常见方法，定时器，Location对象，history对象，navigator，screen对象

1. 认识DOM和BOM

JavaScript的基本语法好像和做网页没有关系，和HTML、CSS也没有关系?
- 这是因为基本语法属于ECMAScript，也就是JavaScript本身的语法部分
- 除了语法部分之外，还需要学习浏览器提供的DOM、BOM相关的API才能对页面、浏览器进行操作
window的全局对象，window上事实上就包含了这些内容
- JavaScript语法部分的Object、Array、Date等
- 另外还有DOM、BOM部分
DOM
- 文档对象模型(Document Object Model)
- 简称 DOM，将页面所有的内容表示为可以修改的对象
BOM
- 浏览器对象模型(Browser Object Model)
- 简称 BOM，由浏览器提供的用于处理文档(document)之外的所有内容的其他对象
- 比如navigator、location、history等对象

2. 认识BOM

BOM：浏览器对象模型(Browser Object Model)
- 简称 BOM，由浏览器提供的用于处理文档(document)之外的所有内容的其他对象
- 比如navigator、location、history等对象
JavaScript有一个非常重要的运行环境就是浏览器
- 而且浏览器本身又作为一个应用程序需要对其本身进行操作
- 所以通常浏览器会有对应的对象模型(BOM，Browser Object Model)
- 可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁
BOM主要包括一下的对象模型
- window：包括全局属性、方法，控制浏览器窗口相关的属性、方法
- location：浏览器连接到的对象的位置(URL)
- history：操作浏览器的历史
- navigator：用户代理(浏览器)的状态和标识
- screen：屏幕窗口信息

3. window对象

window对象在浏览器中可以从两个视角来看待
- 视角一：全局对象
  - ECMAScript其实是有一个全局对象的
  - 这个全局对象在Node中是global
  - 在浏览器中就是window对象
- 视角二：浏览器窗口对象
  - 作为浏览器窗口时，提供了对浏览器操作的相关的API
当然，这两个视角存在大量重叠的地方，所以不需要刻意去区分
- 事实上对于浏览器和Node中全局对象名称不一样的情况，目前已经指定了对应的标准，称之为globalThis，并且大多数现代浏览器都支持它
- 放在window对象上的所有属性都可以被访问
- 使用var定义的变量会被添加到window对象中
- window默认提供了全局的函数和类
  - setTimeout、Math、Date、Object等

3.1. Window全局对象

在浏览器中，window对象就是全局对象，也就是GO对象
- 比如在全局通过var声明的变量，会被添加到GO中，也就是会被添加到window上
- 比如window默认提供了全局的函数和类：setTimeout、Math、Date、Object等
通过var声明的变量，全局提供的类和方法
这些用法也是作为JavaScript语言本身所拥有的一些特性

3.2. Window窗口对象

事实上window对象上肩负的重担是非常大的
1. 包含大量的属性，localStorage、console、location、history、screenX、scrollX等等(大概60+个属性)
2. 包含大量的方法，alert、close、scrollTo、open等等(大概40+个方法)
3. 包含大量的事件，focus、blur、load、hashchange等等(大概30+个事件)
4. 包含从EventTarget继承过来的方法，addEventListener、removeEventListener、dispatchEvent方法
这些大量的属性、方法、事件在哪里查看呢?
- MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Window
查看MDN文档时，会发现有很多不同的符号
- 删除符号：表示这个API已经废弃，不推荐继续使用了
- 点踩符号：表示这个API不属于W3C规范，某些浏览器有实现(所以兼容性的问题)
- 实验符号：该API是实验性特性，以后可能会修改，并且存在兼容性问题

3.3. window常见的属性

3.3.1. window的宽高

属性	作用
window.innerWidth	获取window窗口的宽度(包含滚动条)
window.innerHeight	获取window窗口的高度(包含滚动条)
window.outerWidth	获取window窗口的整个宽度(包括调试工具、工具栏)
window.outerHeight	获取window窗口的整个高度(包括调试工具、工具栏)
documentElement.clientWidth	获取html的宽度(不包含滚动条)
documentElement.clientHeight	获取html的高度(不包含滚动条)

3.3.2. window的偏移量

属性	作用
window.screenX	浏览器左边到操作系统桌面左边的水平距离
window.screenY	浏览器顶部到操作系统桌面顶部的垂直距离

3.3.3. window的滚动位置

属性	作用
scrollX	X轴滚动的位置(别名pageXOffset)
scrollY	Y轴滚动的位置(别名pageYOffset)

3.4. window常见的方法

3.4.1. close()

关闭该窗口

const btn = document.querySelector(".close");

btn.onclick = function(){
    window.close();
}

3.4.2. scrollBy()

将页面滚动至相对于当前位置的位置

3.4.3. scrollTo()

将页面滚动至绝对坐标
1
window.scrollTo(options)
options是一个包含三个属性的对象
1. top等同于 y-coord
2. left 等同于 x-coord
3. behavior 类型 String，表示滚动行为，支持参数
  - smooth(平滑滚动)
  - instant(瞬间滚动)
  - 默认值 auto

const btn2 = document.querySelector(".scroll");
btn2.onclick = function () {
  window.scrollTo({
    top: 1000,
    left: 0,
    behavior: "smooth"
  });
};

3.4.4. open()

用指定的名称将指定的资源加载到浏览器上下文

_blank 在新的窗口

_self 在原窗口中加载刷新

const btn3 = document.querySelector(".open");
btn3.onclick = function () {
  window.open("https://www.baidu.com","_blank");
};

3.5. 定时器

有时并不想立即执行一个函数，而是等待特定一段时间之后再执行，称之为“计划调用(scheduling a call)”
目前有两种方式可以实现:
- setTimeout 将函数推迟到一段时间间隔之后再执行
- setInterval 允许重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数
并且通常情况下有提供对应的取消方法
- clearTimeout：取消setTimeout的定时器
- clearInterval：取消setInterval的定时器
大多数运行环境都有内置的调度程序，并且提供了这些方法
- 目前来讲，所有浏览器以及 Node.js 都支持这两个方法

3.5.1. setTimeout()

定时器到期后执行调用函数
setTimeout的语法如下
1
var timerId = window.setTimeout(func|code, [delay], [arg1], [arg2], ...);
- window可以省略
- func|code：想要执行的函数或代码字符串
  - 一般传入的都是函数，由于某些历史原因，支持传入代码字符串，但是不建议这样做
  - 函数可以直接写函数，或者函数名，或者取字符串函数名
- delay：执行前的延时，以毫秒为单位(1000 毫秒 = 1 秒)，默认值是 0
- arg1，arg2…：要传入被执行函数(或代码字符串)的参数列表
clearTimeout方法
- setTimeout 在调用时会返回一个“定时器标识符(timer identifier)”，可以使用它来取消执行

1
2
3

var timer = setTimeout(function(a,b){
            alert("触发了",a,b);
        },2000,"Hello","World");

停止定时器

1	clearTimeout(timer);

3.5.2. setInterval()

每隔这个时间，调用一次函数

setInterval 方法和 setTimeout 的语法相同

1	var timerId = setInterval(func\|code, [delay], [arg1], [arg2], ...);

所有参数的意义也是相同的
不过与 setTimeout 只执行一次不同，setInterval 是每间隔给定的时间周期性执行;
clearInterval方法
- setInterval也会返回一个“定时器标识符(timer identifier)”，通过clearInterval来取消这个定时器

3.5.3. 倒计时实现 - floor

// 格式化数字
// 9-> 09 补全0
function padLeft(content, count = 2, padStr = "0") {
  return (content + "").padStart(count, padStr);
}    

// 倒计时
function countdown(time) {
  // 新时间
  var d1 = new Date(time);
  // 当前时间
  var d2 = new Date();

  // 时间差 - 秒
  var date = Math.floor((d1.getTime() - d2.getTime())/1000);
  var flag = true;
  if(date<0){
      date = -date;
      flag = false;
  }

  var year = padLeft(Math.floor(date / (60 * 60 * 24 * 30 * 12)));
  var month = padLeft(Math.floor(date / 60 / 60 / 24 / 30) % 12);
  var day = padLeft(Math.floor(date / 60 / 60 / 24) % 30);
  var hour = padLeft(Math.floor(date / 60 / 60) % 24);
  var minute = padLeft(Math.floor(date / 60) % 60);
  var second = padLeft(date % 60);

  var str = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
  return flag ? "剩余 " + str : "过去 " + str;
}

var dayStr = "2088-08-08 00:00:00";
// 插入网页中
var p = document.createElement("p"); 
p.innerText = countdown(dayStr);
document.body.append(p);

// 时间间距1s运行一次
setInterval(function(){
  p.innerText = countdown(dayStr);
},1000);

3.5.4. 倒计时实现-parseInt

const p = document.querySelector("p");
const checkTime = new Date("2018-06-02 00:00:00");
getTime();
function getTime() {
  const now = new Date();
  let diff = checkTime - now;
  if (diff < 0) {
    diff = -diff;
  }
  const num = diff / 1000;
  const y = parseInt(num / 60 / 60 / 24 / 365);
  const year = y > 9 ? y + "" : "0" + y;
  const d = parseInt(num / 60 / 60 / 24 % 365);
  const day = d > 9 ? d + "" : "0" + d;
  const h = parseInt(num / 60 / 60 % 24);
  const hour = h > 9 ? h + "" : "0" + h;
  const m = parseInt(num / 60 % 60);
  const minute = m > 9 ? m + "" : "0" + m;
  const s = parseInt(num % 60);
  const second = s > 9 ? s + "" : "0" + s;

  p.innerHTML =
    year +
    " 年 " +
    day +
    " 天 " +
    hour +
    " 时 " +
    minute +
    " 分 " +
    second +
    " 秒";
}
setInterval(getTime, 1000);

4. Location对象

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

1
2
3

console.log(window.location);
// true
console.log(location === window.location);

4.1. Location常见的属性

值	说明
href	当前window对应的超链接URL, 整个URL
protocol	当前的协议
host	主机地址
hostname	主机地址(不带端口)
port	端口
pathname	路径
search	查询字符串
hash	哈希值
username	URL中的username(很多浏览器已经禁用)
password	URL中的password(很多浏览器已经禁用)

4.2. Location常见的方法

location其实是URL的一个抽象实现

location有如下常用的方法

方法	说明
assign	赋值一个新的URL，并且跳转到该URL中，覆盖原URL(可返回)
replace	打开一个新的URL，并且跳转到该URL中(不会在浏览记录中留下之前的记录)
reload	重新加载页面，相当于刷新按钮或者f5，如果参数为true，强制刷新ctrl+f5

4.3. URLSearchParams

URLSearchParams 定义了一些实用的方法来处理 URL 的查询字符串
- 可以将一个字符串转化成URLSearchParams类型
- 也可以将一个URLSearchParams类型转成字符串
URLSearchParams常见的方法有如下
- https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams
方法说明

get 获取搜索参数的值

set 设置一个搜索参数和值

append 追加一个搜索参数和值

has 判断是否有某个搜索参数
中文会使用encodeURIComponent和decodeURIComponent进行编码和解码

方法	说明
get	获取搜索参数的值
set	设置一个搜索参数和值
append	追加一个搜索参数和值
has	判断是否有某个搜索参数

var urlSearch = new URLSearchParams("?name=code&age=18&height=1.88");
console.log(urlSearch.get("name"));
urlSearch.append("id","0002");
// name=code&age=18&height=1.88&id=0002
console.log(urlSearch.toString())

5. history对象

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

5.1. history常见的属性

值	说明
length	会话中的记录条数
state	当前保留的状态值，如果网页进行了刷新，值为null

5.2. history常见的方法

方法	说明
back()	返回上一页，等价于history.go(-1)
forward()	前进下一页，等价于history.go(1)
go()	加载历史中的某一页
pushState()	打开一个指定的地址，`不进行请求新资源，不进行网页刷新`
replaceState()	打开一个新的地址，并且使用replace，不能返回

代码

// pushState(data: any, unused: string, url): void
history.pushState({name:"why"},"","/detail");

// {name:'why'}
console.log(history.state);

history和hash目前是vue、react等框架实现路由的底层原理

6. navigator

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

属性/方法	说明
locks	返回暴露 Web Locks API 的 LockManager对象
mediaCapabilities	返回暴露 Media Capabilties API 的 MediaCapabilities对象
mediaDevices	返回可用的媒体设备
maxTouchPoints	返回设备触摸屏支持的最大触点数
mimeTypes	返回浏览器中注册的MIME类型数组
onLine	返回布尔值，表示浏览器是否联网
oscpu	返回浏览器运行设备的操作系统和(或)CPU
permissions	返回暴露 Permissions API 的 Permissions 对象
platform	返回浏览器运行的系统平台
plugins	返回浏览器安装的插件数组。在IE中，这个数字包含页面中所有embed元素
product	返回产品名称（通常是“Gecko”）
productSub	返回产品的额外信息（通常是Gecko的版本）
registerProtocolHandler()	将一个网站注册为特定协议的处理程序
requestMediaKeySystemAccess()	返回一个期约，解决为requestMediaKeySystemAccess对象
sendBeacon()	异步传输一些小数据
serviceWorker	返回用来与ServiceWorker实例交互的ServiceWorkerContainer
share()	返回当前平台的原生共享机制
storage	返回暴露 Storage API 的 StorageManager 对象
userAgent	返回浏览器的用户代理字符串
vendor	返回浏览器的厂商名称
vendorSub	返回浏览器厂商的更多信息
vibrate()	触发设备振动
webdriver	返回浏览器当前是否被自动化程序控制

有关浏览器的信息，可以判断用户打开页面的终端是手机还是pc

if((navigator.userAgent.match(/(phone|pad|iphone|ipod|Abdroid)/i))){
  //手机
  window.location.href="";
}else{
  //电脑
  window.location.href="";
}

7. screen对象

screen主要记录的是浏览器窗口外面的客户端显示器的信息
- 比如屏幕的逻辑像素 screen.width、screen.height

属性	说明
availHeight	屏幕像素宽度减去系统组件高度(只读)
availWidth	屏幕像素宽度减去系统组件宽度(只读)
availLeft	没有被系统组件占用的屏幕的最左侧像素(只读)
availTop	没有被系统组件占用的屏幕的最顶端像素(只读)
colorDepth	表示屏幕颜色的位数：多数系统是32(只读)
pixelDepth	屏幕的位深(只读)
height	屏幕像素高度
width	屏幕像素宽度
left	当前屏幕左边的像素距离
top	当前屏幕顶端的像素距离
orientation	返回 Screen Orientation API 中屏幕的朝向

W.T.的博客

前端-JS学习笔记-BOM

1. 认识DOM和BOM

2. 认识BOM

3. window对象

3.1. Window全局对象

3.2. Window窗口对象

3.3. window常见的属性

3.3.1. window的宽高

3.3.2. window的偏移量

3.3.3. window的滚动位置

3.4. window常见的方法

3.4.1. close()

3.4.2. scrollBy()

3.4.3. scrollTo()

3.4.4. open()

3.5. 定时器

3.5.1. setTimeout()

3.5.2. setInterval()

3.5.3. 倒计时实现 - floor

3.5.4. 倒计时实现-parseInt

4. Location对象

4.1. Location常见的属性

4.2. Location常见的方法

4.3. URLSearchParams

5. history对象

5.1. history常见的属性

5.2. history常见的方法

6. navigator

7. screen对象