学习BOM

appVersion: 返回由浏览器声明的版本信息。这个字符串通常包含了浏览器的名称、版本号和渲染引擎等信息。
appCodeName: 通常返回浏览器的代码名称，对于大多数现代浏览器，这个值通常是 "Mozilla"，尽管这个值的历史意义已经淡化，现在主要用于兼容性检测。
userAgent: 返回一个字符串，表示用户代理头的值。这个字符串通常包含了浏览器的名称、版本、渲染引擎、操作系统以及是否包含某些特定的浏览器功能等信息。这个属性常被用于服务器端的用户代理检测，以确定如何为不同的浏览器或设备提供不同的内容或格式。

1.3History 对象：

让你可以与浏览器的历史记录进行交互，比如前进、后退等。

提供了与浏览器历史记录相关的功能。
可以使用back(), forward(), 和 go() 方法进行页面跳转。
history.length 属性表示历史记录中的页面数量。

1.4常用的history的方法和属性:

length: 表示浏览器历史列表中的 URL 数量。这个数量包含了当前加载的页面。
back(): 相当于点击浏览器的“后退”按钮，导航到历史列表中的上一个页面。
forward(): 相当于点击浏览器的“前进”按钮，导航到历史列表中的下一个页面。请注意，如果没有下一个页面，这个方法将不会有任何效果。
go(n): 导航到历史列表中的一个指定页面。参数 n 是一个整数，表示相对于当前页面的位置。例如，history.go(-1) 与 history.back() 效果相同，而 history.go(1) 与 history.forward() 效果相同。

1.4Document 对象：

虽然Document对象属于DOM而非BOM，但是通过window.document可以访问到它，它是DOM树的根节点，代表了加载在窗口中的网页内容。

1.5Screen 对象：

提供了客户端屏幕的信息，如屏幕的宽度和高度等。

1.6console 对象：

提供了浏览器控制台的输出和控制功能。
常用于调试和开发过程中的信息输出。
包含了多种方法，如log(), warn(), error(), time(), timeEnd() 等，用于不同类型的输出和性能测量。

1.6.1常用的console的用法:

1.6.1.1console.log():

在控制台输出信息。这是开发者最常用的方法之一，用于打印变量、对象或其他任何数据类型的值。

1.6.1.2console.assert(condition, message):

如果condition为false，则在控制台输出指定的message。这通常用于在开发过程中进行断言检查。

1.6.1.3console.clear():

清除控制台的内容。这有助于在调试过程中清理屏幕，以便更清晰地查看后续的输出。

1.6.1.4console.count(label):

对以label标记的特定代码段的调用次数进行计数。每次调用此方法时，计数会增加，并显示在控制台上。

1.6.1.5console.countReset(label):

重置通过console.count()方法使用相同label的计数器。这将计数器的值设置回0。

1.6.1.6console.warn(message):

在控制台输出警告信息。这通常用于指示某些可能的问题或异常情况，但不会中断程序的执行。

1.6.1.7console.error(message):

在控制台输出错误信息。虽然这不会停止脚本的执行，但它通常用于指示发生了严重的错误或异常情况。

1.6.1.8console.dir(object):

以类似于文件系统目录列表的方式显示对象的所有属性和方法。这对于查看复杂对象的结构和内容非常有用。

1.6.1.9console.group(title) 和 console.groupEnd():

这两个方法用于将控制台输出分组。console.group()开始一个新组，并可以为其提供一个可选的title。在该组内的所有后续控制台输出都将被缩进，直到调用console.groupEnd()结束该组。

1.6.1.10.console.time(label) 和 console.timeEnd(label):

这两个方法用于测量代码段的执行时间。console.time()开始计时，并接受一个label作为参数。console.timeEnd()停止计时，并在控制台显示经过的时间。这两个方法通常一起使用，以评估特定代码块的性能。

例子:

// Window 对象示例：弹出警告框  
window.alert("Hello, BOM!");  
  
// Location 对象示例：跳转到新页面  
window.location.href = "https://www.example.com";  
  
// Navigator 对象示例：检测用户的浏览器类型  
var browserName = navigator.appName;  
console.log(browserName);  
  
// History 对象示例：后退到上一个页面  
window.history.back();  
  
// Screen 对象示例：获取屏幕宽度和高度  
var screenWidth = window.screen.width;  
var screenHeight = window.screen.height;  
console.log("Screen Width: " + screenWidth + ", Screen Height: " + screenHeight);

2.定时器详解:

定时器在JavaScript中是一个非常重要的功能，它允许你在指定的时间后执行某个函数或代码块，或者周期性地执行某个函数。JavaScript提供了两个主要的定时器函数：setTimeout 和 setInterval。

2.1setTimeout:

setTimeout 函数用于在指定的毫秒数后执行一个函数。它返回一个定时器ID，这个ID可以用于在之后清除定时器。

// 设置一个定时器，在2000毫秒（2秒）后执行  
var timeoutId = setTimeout(function() {  
    console.log('这个消息将在2秒后打印出来');  
}, 2000);  
  
// 如果需要取消这个定时器，可以使用clearTimeout函数  
// clearTimeout(timeoutId);

2.2setInterval:

setInterval 函数用于周期性地执行一个函数，间隔时间是指定的毫秒数。它也返回一个定时器ID。

// 设置一个周期性定时器，每隔2000毫秒（2秒）执行一次  
var intervalId = setInterval(function() {  
    console.log('这个消息将每隔2秒打印一次');  
}, 2000);  
  
// 如果需要停止这个周期性定时器，可以使用clearInterval函数  
// clearInterval(intervalId);

2.3清除定时器:

当你不再需要定时器继续执行时，可以使用 clearTimeout 或 clearInterval 函数来清除它，这样可以防止内存泄漏和不必要的计算。

// 假设你已经有了一个定时器ID：timeoutId 或 intervalId  
clearTimeout(timeoutId); // 清除setTimeout设置的定时器  
clearInterval(intervalId); // 清除setInterval设置的定时器

2.4注意事项:

定时器ID是唯一的，并且可以被用于清除特定的定时器。
如果设置的定时器回调函数执行时间较长，可能会影响定时器的准确性。
JavaScript的定时器并不是精确的，它们受到页面的渲染、其他代码的运行和许多其他因素的影响。因此，定时器应该用于非精确的时间操作。
在使用定时器时要小心，避免创建大量的定时器，这可能会导致性能问题。

2.5BOM的其他常用功能

除了定时器功能外，BOM还提供了许多其他与浏览器交互的功能，例如：

`2.5.1window.location`：

用于获取或设置当前窗口的URL地址，并可以实现页面的刷新和跳转。window.location 对象用于获取或设置当前窗口的URL，并可以解析URL的不同部分，如协议、主机名、路径等。此外，它还提供了一些方法用于页面的跳转和刷新。

// 获取当前页面的完整URL  
var currentURL = window.location.href;  
  
// 设置新的URL，导致浏览器跳转到该地址  
window.location.href = 'https://www.example.com';  
  
// 重新加载当前页面  
window.location.reload();

`2.5.2window.history`：

提供了与浏览器历史记录相关的功能，如前进、后退等。window.history 对象提供了与浏览器历史记录交互的功能。可以使用它来实现页面的前进、后退，以及添加新的历史记录点。

// 后退到前一个页面  
window.history.back();  
  
// 前进到下一个页面  
window.history.forward();  
  
// 跳转到历史记录中的某个点（如果可用）  
window.history.go(-2); // 后退两步

`2.5.3window.navigator`：

包含了关于浏览器的信息。window.navigator 对象包含了关于浏览器的信息，比如浏览器的名称、版本、操作系统、是否启用了Cookie等。

// 获取浏览器名称  
var browserName = navigator.appName;  
  
// 获取浏览器版本  
var browserVersion = navigator.appVersion;  
  
// 检查用户代理字符串  
var userAgent = navigator.userAgent;  
  
// 检查是否启用了Cookie  
var cookiesEnabled = navigator.cookieEnabled;

`2.5.4window.document`：

提供了对DOM的访问。window.document 主要是DOM的一部分，但它是通过BOM的window对象来访问的。document对象代表了加载在浏览器窗口中的网页内容，并提供了许多方法和属性来操作和查询DOM。

// 获取文档的标题  
var title = document.title;  
  
// 修改文档的标题  
document.title = 'New Page Title';  
  
// 查询DOM元素  
var element = document.getElementById('myElement');

`2.5.5window.screen`：

提供了关于客户端屏幕的信息。window.screen 对象提供了关于客户端屏幕的信息，如屏幕的宽度、高度、可用宽度和高度等。

// 获取屏幕的宽度和高度  
var screenWidth = screen.width;  
var screenHeight = screen.height;  
  
// 获取屏幕的可用宽度和高度（减去任务栏、Dock栏等占用的空间）  
var availWidth = screen.availWidth;  
var availHeight = screen.availHeight;

3.浏览器窗口及与窗口交互的元素:

3.1浏览器的尺寸数据和方法:

3.1.1.innerWidth 和 innerHeight：

这两个属性分别表示浏览器视口（viewport）的宽度和高度，包括滚动条，但不包括浏览器的工具栏、标签页等界面元素。
这些尺寸是用来描述网页内容区域的可用空间。

3.1.2.screenLeft 和 screenTop（或 screenX 和 screenY）：

这两个属性（screenLeft/screenX 和 screenTop/screenY）提供浏览器窗口左上角在屏幕上的位置。
不同的浏览器可能会实现不同的属性名称，但功能上是等价的。

`3.1.3.outerHeight` 和 `outerWidth`：

这两个属性表示浏览器窗口的整体尺寸，包括所有界面元素，如书签栏、地址栏、状态栏等。
这些尺寸描述了浏览器窗口在屏幕上占据的总空间。

`3.1.4.scrollX` 和 `scrollY`（或 `pageXOffset` 和 `pageYOffset`）：

这两个属性表示当前页面在水平方向和垂直方向上的滚动量。
当用户滚动页面时，这些值会发生变化，反映了页面的滚动位置。

3.2名词解释:

3.2.1screen：

“屏幕”通常指的是计算机显示器或移动设备的整个显示区域。
在Web开发中，screen 对象提供了访问客户端屏幕信息的接口，比如屏幕的宽度和高度（screen.width 和 screen.height），这些信息与浏览器窗口的大小或位置无关。

3.2.2client：

“当前选中区域元素”在这个上下文中可能有些模糊，但“client”通常指的是浏览器窗口的视口（viewport），即不包括工具栏、滚动条等浏览器界面元素的显示区域。
在JavaScript中，clientWidth 和 clientHeight 属性通常用于获取一个元素（包括浏览器窗口本身，通过document.documentElement或window对象）的内部宽度和高度，不包括边框、滚动条等。

3.2.3offset：

“偏移”指的是一个元素相对于其定位父元素（或相对于整个文档，如果没有定位的父元素）的位置。
在JavaScript中，可以通过元素的offsetLeft和offsetTop属性来获取这个偏移量。

3.2.4scroll：

“卷轴、卷动”在这里指的是与页面滚动相关的属性和方法。
当页面内容超出视口大小时，浏览器会显示滚动条以允许用户滚动查看隐藏的内容。
JavaScript中的scrollTop和scrollLeft属性表示当前滚动的位置，而scrollWidth和scrollHeight则表示整个内容的宽度和高度（包括不可见的部分）。

3.2.5inner：

“内部”指的是一个元素的内部尺寸，不包括边框、外边距和内边距（但可能包括滚动条，这取决于具体的属性和浏览器）。
例如，在JavaScript中，innerWidth和innerHeight（如果是获取浏览器窗口的尺寸）通常包括滚动条的宽度或高度。而对于HTML元素，clientWidth和clientHeight则不包括滚动条，它们表示元素内容区域的宽度和高度（包括内边距，但不包括边框、外边距和滚动条）。