JavaScript入门4

BOM

BOM是浏览器对象模型。与DOM（文档对象模型）不同，BOM在浏览器窗口和浏览器窗口中的脚本进行交互---->BOM允许JavaScript与浏览器窗口及其组件（如导航栏、地址栏、书签等）进行交互。

Window 对象：这是BOM的顶层对象，代表了浏览器窗口。它提供了很多全局函数和变量

方法：

• alert(message): 显示一个带有指定消息和确定按钮的警告框。
• confirm(message): 显示一个带有指定消息、确定按钮和取消按钮的对话框，并返回用户的选择。
• prompt(text, defaultText): 显示一个带有文本字段和确定/取消按钮的对话框，并返回用户在文本字段中输入的文本。
• setTimeout(function, delay): 在指定的延迟后执行函数。
• clearTimeout(timeoutID): 取消由setTimeout()设置的定时器。
• setInterval(function, delay): 每隔指定的延迟重复执行函数。
• clearInterval(intervalID): 取消由setInterval()设置的间隔执行。
• scrollBy(x-coord, y-coord): 根据指定的x和y坐标值滚动窗口内容。
• scrollTo(x-coord, y-coord): 将窗口内容滚动到指定的x和y坐标位置。

Location 对象：用于获取或设置窗口的URL地址，并可以解析URL的各个组成部分。

• assign(URL): 加载新的文档。
• reload(forceReload): 重新加载当前文档。如果forceReload为true，则忽略缓存。
• replace(URL): 用新的文档替换当前文档在历史记录中的位置

Navigator 对象：包含了有关浏览器的信息。

• userAgent: 返回用户代理头的字符串表示（即浏览器类型和版本）。
• cookieEnabled: 返回一个布尔值，表示是否启用了cookie。
• language: 返回浏览器的主要语言。

Screen 对象：提供了关于用户屏幕的信息。

• availWidth: 返回屏幕的可用宽度（排除任务栏）。
• availHeight: 返回屏幕的可用高度。
• width: 返回屏幕的宽度。
• height: 返回屏幕的高度。
• colorDepth: 返回屏幕的颜色深度（通常以每像素的位数表示）。

History 对象：用于操作浏览器的历史记录。

• back(): 加载历史列表中的前一个URL。
• forward(): 加载历史列表中的下一个URL。
• go(delta): 加载历史列表中的某个具体页面，其中delta表示相对于当前页面的偏移量。

出于隐私原因，脚本不能获取用户访问过的URL地址，但可以通过history.back()和history.forward()方法来导航到前一个或后一个页面。

Document 对象：尽管DOM也包含了一个Document对象，但BOM中的Window对象也提供了对它的访问。

以下为常用的DOM方法：

• getElementById(id): 通过元素的ID获取元素。
• getElementsByTagName(name): 返回带有指定标签名的所有元素的NodeList。
• createElement(tagName): 创建一个新的元素节点。
• createTextNode(data): 创建一个新的文本节点。
• appendChild(node): 将一个节点添加到指定元素的子节点列表的末尾。
• removeChild(node): 从元素的子节点列表中删除一个节点。

本地储存

cookie方式:

Cookies 是一种存储在用户浏览器上的小型文本文件。Cookies 主要用于存储小量的会话数据或用

户偏好设置。

创建：document.cookie = "username=   ; expires=     ; path=   "  ;

expires属性设置了Cookie的过期日期和时间，path属性设置了Cookie在哪个路径下可用。

删除：要删除一个Cookie，即设置它的过期日期为一个过去的时间。这样，当浏览器检查Cookie时，它会看到它已经过期，并将其删除。

localStorage方式:

Session Storage 的主要优点是其数据只在当前浏览器会话中有效，这有助于保护用户隐私。

localStorage没有过期时间，数据会一直存在，除非被手动删除。

存储数据  
localStorage.setItem('myKey', 'myValue');  
获取数据  
var data = localStorage.getItem('myKey');   
删除数据  
localStorage.removeItem('myKey');  
清除所有数据  
localStorage.clear();

sessionStorage方式:

Local Storage 没有生命周期的限制，因此可以存储大量的数据。sessionStorage存储的数据只在

当前浏览器窗口或标签页的生命周期内有效。当用户关闭窗口或标签页后，数据会被删除。

存储数据  
sessionStorage.setItem('myKey', 'myValue');  
获取数据  
var data = sessionStorage.getItem('myKey');  
删除数据  
sessionStorage.removeItem('myKey');  
清除所有数据  
sessionStorage.clear();

数组map和join方法

map方法

let numbers = [1, 2, 3, 4, 5];

let doubled = numbers.map(function(number) {
  return number * 2;
});

console.log(doubled);  // 输出 [2, 4, 6, 8, 10]

join方法

let fruits = ["apple", "banana", "cherry"];

默认分割
let fruitNew = fruits.join();
console.log(fruitString); /*输出"apple,banana,cherry"*/

自定义分割
let fruitNew2 = fruits.join(" ");
console.log(fruitStringWithSpaces); /*输出"apple banana cherry"*/