🌟前言
哈喽小伙伴们，本文将收录在JavaScript【前端童子功】这个专栏里；这个专栏里边会收录一些JavaScript的基础知识和项目实战；希望大家可以多多支持，你们的支持就是我创作的动力；让我们一起来看看吧🤘
🌟 Bom（浏览器对象模型）
BOM是浏览器对象模型，主要用于管理窗口与窗口之间的通信，核心对象是window。
浏览器对象模型（Browser Object Model，简称 BOM）是 JavaScript 的组成部分之一，BOM 赋予了 JavaScript 程序与浏览器交互的能力。
window 对象是 BOM 的核心，用来表示当前浏览器窗口，其中提供了一系列用来操作或访问浏览器的方法和属性。另外，JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象，甚至我们前面介绍的 document 对象也属于 window 对象。
🌟window对象：
🌟属性：
innerWidth浏览器的宽度innerHright浏览器的高度screen.width屏幕分辨率的宽度
screen.height屏幕分辨率的高度
🌟 方法：
alert()弹出框prompt()输入框comfirm()带有确定取消按钮的对会话框。返回布尔值close()关闭浏览器open(url)打开新窗口srtInterval(回调函数，时间ms)间隔一定的时间重复不断的执行回调函数clearInterval(id)清除时间函数
setTimeout(回调函数，时间ms)间隔一定的时间只执行一次回调函数clearTimeout(id)清除时间函数
🌟 获取元素:
document.querySelector(选择器)
🌟 添加点击事件：
元素.onclick=function(){
}
🌟 获取表单的值：用来连接js和html
表单元素.value
🌟 设置普通元素：
元素.innerHTML
🌟 console对象：
浏览器控制台。属于window对象的子对象。window.console
🌟console对象方法
| 属性 | 参数 | 返回值 | 功能 | 兼容性 |
| log | msg | undefined | 向 Web 控制台输出一条消息 | 全部 |
| dir | object | undefined | 打印出对象的所有属性和属性值 | >ie8 |
| error | msg | undefined | 向 Web 控制台输出一条错误消息 | >ie7 |
| warn | msg | undefined | 向 Web 控制台输出一条警告信息 | >ie7 |
| time | timerName | undefined | 启动一个计时器（timer）来跟踪某一个操作的占用时长 | >ie10 |
| timeEnd | timerName | undefined | 停止一个通过 console.time() 启动的计时器 |
>ie10 |
| table | tabledata, tablecolumns | undefined | 用于在控制台输出表格信息。 | >ie12 |
🌟console.log
console.log() 方法用于在控制台输出信息。
该方法对于开发过程进行测试很有帮助。
提示: 在测试该方法的过程中，控制台需要可见 (浏览器按下 F12 打开控制台)。
语法
console.log(message)
参数说明
| 参数 | 类型 | 描述 |
| message | String 或 Object | 必需，控制台上要显示的信息 |
🌟 console.time
console.time()和console.timeEnd()这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。
console.time方法是开始计算时间，console.timeEnd是停止计时，输出脚本执行的时间:
// 启动计时器 console.time('testForEach'); // (测试用代码) // 停止计时，输出时间 console.timeEnd('testForEach'); // testForEach 4522.303ms
参数说明
| 参数 | 类型 | 描述 |
| label | String | 可选，用于给计算器设置标签。 |
| tablecolumns | Array | 可选，一个数组，表格标题栏的名称。 |
这两个方法中都可以传入一个参数，作为计时器的名称，它的作用是在代码并行运行时分清楚各个计时器。所以两个方法的参数必须相同。
对console.timeEnd的调用会立即输出执行总共消耗的时间，单位是毫秒
for 循环测试
var i; console.time("for 循环测试"); for (i = 0; i < 100000; i++) { // 代码部分 } console.timeEnd("for 循环测试");
测试ajax请求所需时间：
console.time("ajax请求时间") $.ajax({ url:"https://zhihu-daily.leanapp.cn/api/v1/last-stories", success(res){ console.timeEnd("ajax请求时间") } }) // ajax请求时间: 189.089111328125ms
🌟console.table
console.table() 方法用于在控制台输出表格信息。
第一个参数是必需的，且对象类型需要是对象或数组，对应的数据会填充到表格中。
提示: 在测试该方法的过程中，控制台需要可见 (浏览器按下 F12 打开控制台)。
语法
console.table(tabledata, tablecolumns)
参数说明
| 参数 | 类型 | 描述 |
| tabledata | Array 或 Object | 必需，填充到表格中的数据。 |
| tablecolumns | Array | 可选，一个数组，表格标题栏的名称。 |
console.table(["king", "lilei", "susan"]);
🌟 location 对象
JavaScript location 对象中包含了有关当前页面链接（URL）的信息，例如当前页面的完整 URL、端口号等，我们可以通过 window 对象中的 location 属性来获取 location 对象。由于 window 对象是一个全局对象，因此在使用window.location时可以省略 window 前缀，例如window.location.href可以简写为location.href。
🌟 location属性
当前文档的地址对象。也是window的子对象，window.location
一个完整的url 包括9个部分 协议://用户名：密码@域名：端口/路径；参数？查询#片段 不过几乎没有哪个url包含这些所有组件，最重要的三部分是协议，域名和路径:
以该url为例：
http://www.baidu.com:80/javascript/?file=001/BOM/README.md/#location对象 协议 域名 |端口号| 路径 |查询字符串| |哈希|
| 性 | 描述 | 可读写性 | 结果 |
| href | 包含整个URL的一个字符串 | 读写 | http://www.baidu.com:80/javascript/001/BOM/?file=README.md#location对象 |
| origin | 包含页面来源的域名的标准形式字符串 | 只读 | http://www.baidu.com:80 |
| protocol | 包含URL对应协议的字符串，最后有一个":" | 只读 | http: |
| ost | 包含了域名和端口号的字符串，如没有端口号则只有域名 | 只读 | www.baidu.com:80 |
| hostname | 包含URL域名的字符串 | 只读 | www.baidu.com |
| port | 包含端口号的字符串 | 只读 | 80 |
| pathname | 包含URL中路径部分的字符串，开头有一个"/" | 只读 | /javascript/001/BOM/ |
| search | 包含URL参数（查询字符串）的字符串，开头有一个“?” | 只读 | ?file=README.md |
| hash | 包含块标识符的字符串，开头有一个"#" | 只读 | #location对象 |
🌟 location方法
| 属性 | 参数 | 返回值 | 功能 | 兼容性 |
| assign | url | undefined | 加载给定URL的内容资源 | 全部 |
| reload | Boolean | undefined | 重新加载来自当前 URL的资源(刷新本页) | 全部 |
| replace | url | undefined | 用给定的URL替换掉当前的资源 | 全部 |
| toString | 无 | 包含整个URL的字符串 | 获取本窗口的url，将地址转换成字符串(只能获取，无法修改，读取效果与location.href相同) |
全部 |
location.assign 与 location.replace的区别: replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面
location.reload 的参数：
- false或未写参数：检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
- true：那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
🌟 history 对象
history 对象是 windows子对象。history 接口允许操作浏览器的曾经在标签页或者框架里访问的历史记录,这些方法和事件能够帮助我们优雅的实现单页面应用，同时又不会影响搜索引擎对我们网站的搜录。现在所有的现代浏览器都已经支持这些新的特性，并且涌现出大量的路由框架，都内置集成了这些新的特性。比方说著名的vue框架里面的 vue-route等路由框架。
🌟 history 对象属性
| 属性 | 描述 | 可读写性 | 兼容性 |
| length | 包含当前页面在内的历史记录个数 | 只读 | 全部 |
🌟 history 对象方法
| 属性 | 参数 | 返回值 | 功能 | 兼容性 |
| back | 无 | undefined | 加载 history 列表中的前一个 URL(等价于history.go(-1)) | 全部 |
| forward | 无 | undefined | 加载 history 列表中的下一个 URL(等价于history.go(1)) | 全部 |
| go | number | undefined | 通过当前页面的相对位置从浏览器历史记录加载页面 | 全部 |
| pushState | state, title, url | undefined | 无刷新的向浏览器 历史最前方 加入一条记录 | >ie9 |
| replaceState | state, title, url | undefined | 无刷新的使用一条记录替换当前的历史记录 | >ie9 |
history.go方法
- history.go(-1)： 加载上一个历史记录
- history.go(1)： 加载下一个历史记录
- history.go(0) 或不传参： 刷新本页 类似地，你可以传递参数值2并向前移动2个页面，等等。
如果已经没有页面，该方法不会报错，页面不会发生任何变化； 如果参数不是整数，页面也不会发生任何变化。
history.pushState 和 history.replaceState 方法有3个参数
- 状态对象state —— 需要保存的数据，这个数据在触发
popstate事件时保存在event.state上 - 标题title —— 浏览器目前不识别该参数，传入一个空字符串
- 地址URL —— 需要更改的url地址
window.onpopstate事件： 浏览器点击前进后退(或者在js中调用history.back()、history.forward()、history.go()方法)时触发的事件。event.state可以获取当前url下设置的state。注：
pushState和replaceState方法只能加载同源下的资url源（存在跨域问题）
window.onpopstate = function (event) { console.log("location: " + document.location + ", state: " + JSON.stringify(event.state)); }; //绑定事件处理函数. history.pushState({ page: 1 }, "title 1", "?page=1"); //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1 history.pushState({ page: 2 }, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2 history.replaceState({ page: 3 }, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3 history.back(); // 输出 "location: http://example.com/example.html?page=1, state: {"page":1}" history.back(); // 输出 "location: http://example.com/example.html, state: null history.go(2); // 输出 "location: http://example.com/example.html?page=3, state: {"page":3}
🌟 总结
- js刷新本页面方法汇总：
- history.go(0)
- location.reload()
- js跳转页面方法汇总：
- window.open(url)
- location.href = “”
- location.assign(url)
🌟 Navigator 对象
Navigator 对象包含有关浏览器的信息,是window对象的属性，中文是"导航器"的意思
🌟 Navigator的属性
| 属性 | 描述 | 值 |
| language | 返回当前浏览器的语言 | “zh-CN”、"en"等 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 | true,false |
| onLine | 返回指明系统是否处于联网状态的布尔值 | true,false |
| platform | 返回运行浏览器的操作系统平台。 | “Win32”, “Linux i686”, “MacPPC”, “MacIntel”, 等 |
🌟 检测浏览器
检测浏览器版本：
function getExplorerInfo() { var explorer = window.navigator.userAgent.toLowerCase(); //ie if (explorer.indexOf("msie") >= 0) { var ver = explorer.match(/msie ([\d.]+)/)[1]; return { type: "IE", version: ver }; } else if (explorer.indexOf("edge") >= 0) { var ver = explorer.match(/edge\/([\d.]+)/)[1]; return { type: "Edge", version: ver }; } //firefox else if (explorer.indexOf("firefox") >= 0) { var ver = explorer.match(/firefox\/([\d.]+)/)[1]; return { type: "Firefox", version: ver }; } //Chrome else if (explorer.indexOf("chrome") >= 0) { var ver = explorer.match(/chrome\/([\d.]+)/)[1]; return { type: "Chrome", version: ver }; } //Opera else if (explorer.indexOf("opera") >= 0) { var ver = explorer.match(/opera.([\d.]+)/)[1]; return { type: "Opera", version: ver }; } //Safari else if (explorer.indexOf("safari") >= 0) { var ver = explorer.match(/safari\/([\d.]+)/)[1]; return { type: "Safari", version: ver }; } }
检测浏览器是否为PC端
function getExplorerType(){ var explorer = window.navigator.userAgent.toLowerCase(); return explorer.indexOf('mobile') === -1 }
结果：true PC , false 为 Mobile
检测当前网络状态
//浏览器在线 window.ononline = function(){ console.log(window.navigator.onLine) } //浏览器离线 window.onoffline = function(){ console.log(window.navigator.onLine) }
h5相机拍照
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script> window.addEventListener("DOMContentLoaded", function () { var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function (error) { console.log("Video capture error: ", error.code); }; $("#snap").click(function () { context.drawImage(video, 0, 0, 330, 250); }) if (navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia(videoObj) .then(function (stream) { video.srcObject = stream; video.play(); }) .catch(errBack) } else if (navigator.webkitGetUserMedia) { navigator.webkitGetUserMedia(videoObj, function (stream) { video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } }, false); </script> </head> <body> <div id="contentHolder"> <video id="video" width="320" height="320" autoplay></video> <input type="button" id="snap" style="width:100px;height:35px;" value="拍 照" /> <canvas style="" id="canvas" width="320" height="320"></canvas> </div> </body> </html>
🌟 Vibration（震动）
// 可以传入一个大于0的数字，表示让手机震动相应的时间长度，单位为ms navigator.vibrate(100) // 也可以传入一个包含数字的数组，比如下面这样就是代表震动300ms，暂停200ms，震动100ms，暂停400ms，震动100ms navigator.vibrate([300,200,100,400,100]) // 也可以传入0或者一个全是0的数组，表示暂停震动 navigator.vibrate(0)
🌟 用途
使手机震动，用来给用户一个提示，例如说数据校验失败。
🌟写在最后
更多JavaScript知识以及API请大家持续关注，尽请期待。各位小伙伴让我们 let’s be prepared at all times！
