红宝书阅读笔记!第五天_BOM

161 阅读3分钟
虽然ECMAScript把浏览器对象模型(BOM,Browser Object Model)描述为JavaScript的核心,但实际上BOM是使用JavaScript开发web应用程序的核心。BOM提供了与网页无关的浏览器功能对象。

window对象

BOM的核心是window对象,表示浏览器的实例。window对象在浏览器有两重身份👇

1.ECMAScript中的Global对象。

2.浏览器窗口的JavaScript接口。

1.Global作用域

因为window对象被复用为ECMAScript的Global对象,所以通过var声明的所有全局变量和函数都会变成window对象的属性和方法。

2.窗口关系

top对象始终指向最上层(最外层)窗口,即浏览器窗口本身。而parent对象始终指向当前窗口的父窗口。如果当前窗口是最上层窗口,则parent等于top(都等于window)。最上层的window,如果不是通过window.open()打开的,那么其name属性就不会包含值。

3.窗口位置与像素比

window.moveTo(0,0)把窗口移动到左上角

window.moveBy(0,100)把窗口向下移动100像素

window.moveTo(200,300)把窗口移动到坐标位置(200,300);

window.moveBy(-50,0)把窗口向左移动50像素

像素比:想不想知道什么是像素比,那我给你举个🍟:16px的字体,在手机和电脑上的显示大小是否相同?那在4k屏和2k屏下显示大小是否相同?是不是更想知道了,那就去百度吧!

4.窗口大小

outerWidthouterHeight返回浏览器窗口自身的大小。

innerWidthinnerHeight返回浏览器窗口中页面视口的大小。

resizeTo resizeBy

5.视口位置

window.scrollBy({ left:100, top:100, behavior:'auto/smooth' })

window.ScrollTo(x,y)

还可以通过Behavior属性控制是否平滑滚动。

6.导航与打开新窗口

window.open()可以接受四个参数:url、目标窗口、特性字符串和什么什么看不懂的东西。通常调用方法时只传前三个参数。

window.open('http://supersky.fun','topFrame')

第二个参数,如果有一个窗口名叫topFrame那就在该窗口打开,否则就会打开一个新窗口。第二个参数还可以传入特殊的窗口名,比如👇

_self _parent _top _blank

7.定时器

JavaScript在浏览器中是单线程执行的,但是允许定时器每隔一段时间就执行相应的代码。

setTimeout()用于指定在一定时间后来执行某些代码。

setInterval()用于指定每隔一段时间来执行某些代码。

setTimeout(()=>alert('Hello world!'),1000);

setTimeout()方法通常包含两个参数。第一个参数可以是包含JavaScript代码的字符串,或者一个函数。第二个参数是要等待的毫秒数。 调用setTimeout时,会返回一个表示超市排期的数值ID,调用clearTimeout()可以用于取消该任务。

let TimeoutID = setTimeout(()=>alert('Hello world!'),1000);
clearTimeout(TimeoutID);

setInterval()的方法和上面的差不多,调用时会返回一个循环定时ID,调用clearInterval()来终止。

8.系统对话框

一共有如下三种: alert()

confirm()确认框,返回0,1

prompt()提示框,prompt接受两个参数,要显示给用户的文本,以及文本框的默认值(可以是空字符串)。prompt()会返回用户输入的值或者null。

文章内容参考:JavaScript高级程序设计(第四版)

标题样式来自:juejin.cn/post/684490…

哪里写错了就联系我🐧:54269504