JavaScript入门4

最新推荐文章于 2024-09-24 11:55:49 发布

沼泽里的森林

最新推荐文章于 2024-09-24 11:55:49 发布

阅读量857

点赞数 22

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2301_79742908/article/details/136105878

版权

本文详细介绍了浏览器对象模型(BOM)中的Window对象，涵盖了其提供的各种对象（如document、location、history等），以及它们在JavaScript中的使用，包括常用的API如定时器、本地存储、网络请求等。

摘要由CSDN通过智能技术生成

Window对象

BOM（浏览器对象模型）

BOM（浏览器对象模型）是指浏览器提供的一组对象，用于与浏览器窗口进行交互。它允许 JavaScript 通过特定的对象访问和操作浏览器窗口及其内容。BOM 提供了一组对象，包括 window、document、location、history、navigator 等，这些对象可以用来操作浏览器窗口的各个部分。

以下是一些常用的 BOM 对象及其作用：

document：提供了当前窗口或框架的文档对象（DOM）的引用，可以用来操作页面内容。
location：代表当前窗口的 URL，并且提供了操作浏览器地址栏的方法。
navigator：包含有关浏览器的信息，如浏览器的名称、版本和操作系统等。
history：用于访问浏览器的历史记录，可以通过它来实现前进和后退导航。
screen：提供了有关用户屏幕的信息，如分辨率和颜色深度等。
localStorage 和 sessionStorage：提供了在浏览器中存储数据的能力，可以用来保存本地数据。
console：用于在浏览器控制台中输出信息，方便调试和日志记录。

Window对象的常用方法：

alert()、confirm() 和 prompt()：用于显示警告框、确认框和提示框，与用户交互。
setTimeout() 和 setInterval()：用于设置定时器，分别在指定时间后执行一次或者每隔一段时间执行一次指定的函数。
open() 和 close()：分别用于打开和关闭新的浏览器窗口。
scrollTo() 和 scrollBy()：用于控制窗口滚动的位置。
print()：用于打印当前窗口的内容。
focus() 和 blur()：用于将焦点设置到当前窗口或者从当前窗口上移除焦点。

`document` 对象的常用方法：

getElementById()：通过元素的 ID 获取元素对象。
getElementsByClassName()：通过类名获取元素对象集合。
getElementsByTagName()：通过标签名获取元素对象集合。
querySelector() 和 querySelectorAll()：通过 CSS 选择器获取元素对象。

`location` 对象的常用方法：

assign()：加载新的文档。
reload()：重新加载当前文档。
replace()：替换当前文档的 URL。

`history` 对象的常用方法：

back()：后退到上一个访问的页面。
forward()：前进到下一个访问的页面。
go()：在浏览历史记录中移动指定的步数。

`navigator` 对象的常用方法：

getUserMedia()：用于请求使用用户媒体设备，如摄像头或麦克风。

`screen` 对象的常用方法：

availWidth 和 availHeight：获取屏幕可用的宽度和高度。
colorDepth：获取屏幕颜色深度。

`localStorage` 和 `sessionStorage` 对象的常用方法：

setItem()：将数据存储在本地存储中。
getItem()：从本地存储中获取数据。
removeItem()：从本地存储中移除数据。

定时器

setTimeout()

setTimeout()函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

setTimeout(function, delay);

setTimeout函数可以接受两个参数，第一个参数为将要推迟的函数名或者一段代码，第二个参数为推迟执行的毫秒数

setTimeout(function() {
    alert('欢迎访问我们的网站！');
}, 3000); // 3秒后执行

如果回调函数是对象的方法，那么setTimeout使得方法内的this关键词指向全局环境，而不是定义时所在的那个对象。

const obj = {
    name: '对象',
    greet: function() {
        const self = this;
        setTimeout(function() {
            console.log('你好，' + self.name);
        }, 1000);
    }
};
obj.greet(); // 输出：你好，对象

setInterva()

setInterva函数的用法与setTimeout函数用法完全一致，区别仅仅在于setInterva指定某个任务每隔一段时间就执行一次，也就无限次的执行。

var intervalId = setInterval(function() {
    console.log('1');
}, 1000); // 每隔1秒输出内容

本地存储

Cookie：

Cookie 是一种小型的文本文件，由服务器发送给浏览器并存储在用户设备上。
Cookie 主要用于跟踪用户会话状态、实现记住登录状态等功能。
Cookie 的特点包括：
- 最大存储容量较小（一般为4KB）。
- 每次请求时都会被发送到服务器。
- 可设置过期时间，可以长期存储数据。
- 可以通过设置域名和路径限制访问范围。
- 不同浏览器之间可以共享。

设置 Cookie：使用 JavaScript 可以通过 document.cookie 属性设置 Cookie。

document.cookie = "name=value; expires=date; path=path; domain=domain; secure";

其中，name 是 Cookie 的名称，value 是 Cookie 的值，expires 是 Cookie 的过期时间，path 是限制访问 Cookie 的路径，domain 是限制访问 Cookie 的域名，secure 表示 Cookie 只在加密的 HTTPS 连接中传输。

读取 Cookie：使用 JavaScript 可以通过 document.cookie 属性读取 Cookie。

var cookieValue = document.cookie;

localStorage：

localStorage 是一种持久化的本地存储方式，数据存储在浏览器的本地中，并且不会随着页面关闭而清除。
localStorage 主要用于持久化保存用户的偏好设置、缓存数据等。
localStorage 的特点包括：
- 最大存储容量较大（通常为5MB或更大）。
- 数据仅在客户端存储，不会发送到服务器。
- 数据会一直保留，除非被显式删除或者浏览器清除缓存。
- 仅在相同域名下共享。

存储数据

localStorage.setItem("username", "John");

获取数据

var username = localStorage.getItem("username");

删除数据

localStorage.removeItem("username");

sessionStorage：

sessionStorage 是一种临时的本地存储方式，数据存储在浏览器的本地中，但在页面会话结束时会被清除。
sessionStorage 主要用于临时保存会话相关的数据，如表单数据、页面状态等。
sessionStorage 的特点包括：
- 最大存储容量与 localStorage 相同。
- 数据仅在客户端存储，不会发送到服务器。
- 数据只在当前会话有效，在页面关闭或者标签页关闭时会被清除。
- 仅在相同域名下共享。

存储数据

sessionStorage.setItem("username", "John");

获取数据

var username = sessionStorage.getItem("username");

删除数据

sessionStorage.removeItem("username");

存储复杂数据类型

储存数据

复杂数据类型存储时必须转化为JSON字符串储存

var person = { name: "Bob", age: 25 };
localStorage.setItem("username", JSON.stringify(person));

获取数据

var person = { name: "Bob", age: 25 };
localStorage.setItem("username", JSON.stringify(person));
console.log(JOSN.parse(localStorage.getItem("username")));

map 方法：

map 方法是 JavaScript 数组对象的一个内置方法，它会创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。在实际应用中，map 方法通常用于对数组中的每个元素进行处理，生成一个新的数组。

// 使用 map 方法将数组中的每个元素乘以 2
var numbers = [1, 2, 3, 4, 5];
var doubledNumbers = numbers.map(function(number) {
  return number * 2;
});
console.log(doubledNumbers); // 输出：[2, 4, 6, 8, 10]

join 方法：

join 方法将数组中所有元素连接成一个字符串，并返回这个字符串。可以指定一个分隔符作为参数，该分隔符将在连接元素的时候放置在它们之间。

// 使用 join 方法将数组中的元素以逗号分隔连接成一个字符串
var colors = ["red", "green", "blue"];
var result = colors.join(", ");
console.log(result); // 输出："red, green, blue"