Frontend-Architekt 09_JavaScript_BOM

1 Was ist ein Stücklistenobjekt?

BOM: Browser Object Model bezieht sich auf das Browser-Objektmodell.

BOM wird zum Bedienen des Browserfensters und der Steuerelemente im Fenster verwendet, um eine dynamische Interaktion zwischen dem Benutzer und der Seite zu erreichen.

Browserobjekte: Ein Sammelname für eine Reihe integrierter Objekte, die vom Browser bereitgestellt werden.

Stücklisten-Browser-Objektmodell: Ein Sammelname für Modelle, die hierarchisch zwischen integrierten Objekten organisiert sind.

Das Fensterobjekt ist das oberste (Kern-)Objekt der Stückliste. Andere Objekte werden dem Fensterobjekt in Form von Attributen hinzugefügt und können auch als untergeordnete Objekte des Fensters bezeichnet werden.

• Dokument (Dokumentobjekt):
• Verlauf (Verlaufsobjekt): Wird hauptsächlich zum Aufzeichnen des Zugriffsverlaufs des Browsers verwendet, dh der Vorwärts- und Rückwärtsfunktionen beim Durchsuchen von Webseiten.
• Standort (Adressleistenobjekt): Wird verwendet, um relevante Daten in der URL-Adressleiste des aktuellen Browsers abzurufen.
• Navigator (Browserobjekt): Wird zum Abrufen browserbezogener Daten wie Browsername, -version usw. verwendet und wird auch als Browser-Sniffer bezeichnet.
• Bildschirm (Bildschirmobjekt): Kann bildschirmbezogene Daten wie Bildschirmauflösung usw. abrufen.

Es gibt keine klare Spezifikation für BOM, daher können Browser-Anbieter BOM frei nach ihren eigenen Vorstellungen erweitern. Von Browsern gemeinsam genutzte Objekte werden zu De-facto-Standards. Bei der Verwendung von BOM zur Implementierung bestimmter Funktionen müssen jedoch Kompatibilitätsprobleme zwischen Browsern basierend auf der tatsächlichen Entwicklungssituation berücksichtigt werden, da sonst unvorhersehbare Situationen auftreten.

2 Fensterobjekte

2.1 Globaler Geltungsbereich

Das Fensterobjekt ist der Kern aller Objekte in der Stückliste und das übergeordnete Objekt aller Objekte in der Stückliste.

Variablen, im globalen Bereich definierte Funktionen und in JavaScript integrierte Funktionen können vom Fensterobjekt aufgerufen werden.

var area = 'Beijing';
function getArea(){
    
    
    return this.area;
}
console.log(area);
console.log(window.area);
console.log(getArea());
console.log(window.getArea());
console.log(window.Number(area));

• Die im globalen Bereich definierte Funktion getArea(), das Schlüsselwort this im Funktionskörper zeigt auf das Fensterobjekt.
• Für die Eigenschaften und Methoden des Fensterobjekts können Sie das Fenster beim Aufruf weglassen und direkt auf dessen Eigenschaften und Methoden zugreifen.

Die direkte Verwendung einer nicht deklarierten Variablen in JavaScript führt zu einem Syntaxfehler. Die Verwendung von „window.variable name“ meldet jedoch keinen Fehler, sondern führt zu einem undefinierten Ergebnis.

Darüber hinaus kann das Schlüsselwort delete nur die Eigenschaften des Fensterobjekts selbst löschen und hat keine Auswirkungen auf die im globalen Bereich definierten Variablen.

2.2 Popup-Dialogfelder und -Fenster

Zusätzlich zu den zuvor erwähnten Methoden „alert()“ und „prompt()“ bietet das Fensterobjekt auch viele Methoden zum Öffnen von Dialogfeldern und Fenstern sowie zugehörige Betriebsattribute.

Einstufung	Name	veranschaulichen
Attribute	geschlossen	Gibt einen booleschen Wert zurück, der angibt, ob das Fenster geschlossen wurde
Attribute	Name	Legt eine Zeichenfolge fest, die den Fensternamen enthält, oder gibt sie zurück
Attribute	Öffner	Gibt einen Verweis auf das Fensterobjekt zurück, das das Fenster erstellt hat
Attribute	Elternteil	Gibt das übergeordnete Fenster des aktuellen Fensters zurück
Attribute	selbst	Ein Verweis auf das aktuelle Fenster, äquivalent zur Fenstereigenschaft
Attribute	Spitze	Gibt das oberste übergeordnete Fenster zurück
Methode	Alarm()	Zeigt ein Warnfeld mit einer Meldung und einer Bestätigungsschaltfläche an
Methode	bestätigen()	Zeigt ein Dialogfeld mit einer Meldung sowie Schaltflächen zum Bestätigen und Abbrechen an
Methode	prompt()	Zeigt ein Dialogfeld an, das den Benutzer zur Eingabe auffordert
Methode	offen()	Öffnen Sie ein neues Browserfenster oder suchen Sie ein benanntes Fenster
Methode	schließen()	Browserfenster schließen
Methode	Fokus()	Geben Sie einem Fenster den Tastaturfokus
Methode	drucken()	Drucken Sie den Inhalt des aktuellen Fensters
Methode	scrollBy()	Scrollen Sie durch den Inhalt entsprechend dem angegebenen Pixelwert
Methode	scrollTo()	Scrollen Sie durch den Inhalt zu den angegebenen Koordinaten

Alle Eigenschaften und Methoden werden in gängigen Browsern (wie IE, Chrome usw.) unterstützt.

prompt()-Methode

Funktion: Ein Dialogfeld zum Generieren von Benutzereingaben.

Der erste Parameter: wird verwendet, um die vom Benutzer eingegebenen Eingabeaufforderungsinformationen festzulegen.

Der zweite Parameter: wird verwendet, um die Standardinformationen im Eingabefeld festzulegen.

prompt('请输入测试的选项');
prompt('请输入测试的选项', '用户名和密码');

bestätigen()-Methode

Funktion: Öffnet ein Bestätigungsdialogfeld, das Aufforderungsmeldungen sowie Schaltflächen zum Bestätigen und Abbrechen enthält.

Parameter: werden zum Festlegen der Eingabeaufforderungsinformationen zur Bestätigung verwendet.

Rückgabewert: Klicken Sie auf die Schaltfläche „OK“, um „true“ zurückzugeben. Klicken Sie auf die Schaltfläche „Abbrechen“, um „false“ zurückzugeben.

confirm('确定要删除吗？')

open()-Methode

Funktion: Wird verwendet, um ein neues Browserfenster zu öffnen oder ein benanntes Fenster zu finden.

Syntax: open(URL, Name, Spezifikationen, Ersetzen).

• Der erste Parameter: Öffnen Sie die URL-Adresse der angegebenen Seite. Wenn nicht angegeben, öffnen Sie ein neues leeres Fenster.
• Zweiter Parameter: Geben Sie das Zielattribut oder den Namen des Fensters an
• Der dritte Parameter: Wird zum Festlegen der Eigenschaften des Browserfensters verwendet (z. B. Größe, Position, Bildlaufleiste usw.). Verwenden Sie Kommas, um mehrere Eigenschaften zu trennen.
• Der vierte Parameter: Auf „true“ setzen, um den aktuellen Eintrag im Browserverlauf zu ersetzen, und auf „false“ (Standardwert) setzen, um einen neuen Eintrag im Browserverlauf zu erstellen.

Nameoptionaler Wert	Bedeutung
_blank	URL wird in ein neues Fenster geladen, ebenfalls die Standardeinstellung
_parent	URL wird in den übergeordneten Frame geladen
_self	URL ersetzt aktuelle Seite
_top	URL ersetzt jedes ladbare Frameset
Name	Fenstername

specsoptionale Parameter	Wert	veranschaulichen
Höhe	Nummer	Die Höhe des Fensters, der Mindestwert beträgt 100
links	Nummer	Die linke Position des Fensters
Standort	ja|nein|1|0	Ob das Adressfeld angezeigt werden soll, der Standardwert ist „Ja“.
Menüleiste	ja|nein|1|0	Ob die Menüleiste angezeigt werden soll, der Standardwert ist „Ja“.
der Größe veränderbar	ja|nein|1|0	Ob die Größe des Fensters geändert werden kann, der Standardwert ist „Ja“.
Bildlaufleisten	ja|nein|1|0	Ob Bildlaufleisten angezeigt werden sollen, der Standardwert ist „Ja“.
Status	ja|nein|1|0	Ob eine Statusleiste hinzugefügt werden soll, der Standardwert ist „Ja“.
Titelleiste	ja|nein|1|0	Ob die Titelleiste angezeigt werden soll. Wird ignoriert, es sei denn, es wird eine HTML-Anwendung oder ein vertrauenswürdiges Dialogfeld aufgerufen. Der Standardwert ist „Ja“.
Symbolleiste	ja|nein|1|0	Ob die Browser-Symbolleiste angezeigt werden soll, der Standardwert ist „Ja“.
Breite	Nummer	Die Breite des Fensters, der Mindestwert beträgt 100

Die entgegengesetzte Funktion der open()-Methode ist die close()-Methode, mit der das Browserfenster geschlossen wird. Das Objekt, das diese Methode aufruft, ist das Fensterobjekt, das geschlossen werden muss.

2.3 Fensterposition und -größe

Es gibt viele verwandte Eigenschaften und Methoden in der Stückliste, mit denen die Fensterposition, die Fensterhöhe und -breite sowie die Höhe und Breite des Dokumentbereichs ermittelt oder geändert werden.

Einstufung	Name	veranschaulichen
Attribute	screenLeft	Gibt die x-Koordinate relativ zum Bildschirmfenster zurück (in Firefox nicht unterstützt)
Attribute	screenTop	Gibt die y-Koordinate relativ zum Bildschirmfenster zurück (von Firefox nicht unterstützt)
Attribute	screenX	Gibt die x-Koordinate relativ zum Bildschirmfenster zurück (wird von IE8 nicht unterstützt)
Attribute	BildschirmY	Gibt die y-Koordinate relativ zum Bildschirmfenster zurück (wird von IE8 nicht unterstützt)
Attribute	innereHöhe	Gibt die Höhe des Dokumentanzeigebereichs des Fensters zurück (wird von IE8 nicht unterstützt)
Attribute	innerWidth	Gibt die Breite des Dokumentanzeigebereichs des Fensters zurück (wird von IE8 nicht unterstützt)
Attribute	äußereHöhe	Gibt die äußere Höhe des Fensters zurück, einschließlich Symbolleisten und Bildlaufleisten (von IE8 nicht unterstützt)
Attribute	äußere Breite	Gibt die äußere Breite des Fensters zurück, einschließlich Symbolleisten und Bildlaufleisten (von IE8 nicht unterstützt).
Methode	moveBy()	Fenster in relative Position verschieben
Methode	ziehen nach()	Fenster an die angegebene Position verschieben
Methode	resizeBy()	Fenstergröße auf relative Breite und Höhe anpassen
Methode	resizeTo()	将窗口大小调整到指定的宽度和高度

目前只有 window.open() 方法打开的的窗口和选项卡（Tab），FireFox和Chrome浏览器才支持口位置和大小的调整。

2.4 框架操作

window 对象提供的 frames 属性可通过集合的方式，获取 HTML 页面中所有的框架，length 属性就可以获取当前窗口中 frames 的数量。

<body>
    <!-- 设置框架 -->
    <iframe name="frame01"></iframe>
    <iframe name="frame02"></iframe>
    <iframe name="frame03"></iframe>
</body>
<script>
    // 获取窗口对应给定对象的内容
    // 方式1：
    window.frames['frame01'].document.write('frame01 text.');
    // 方式2：
    window.frames.frame02.document.write('frame02 text.');
    // 方式3：
    window.frames[2].document.write('frame03 text.');
</script>

除此之外，还可以利用 parent 获取当前 window 对象所在的父窗口。

window.parent;         // 如果在框架中，获取父级窗口，否则返回自身引用
window.parent.frames;  // 获取同级别的框架

2.5 定时器

JavaScript 中可通过 window 对象提供的方法实现在指定时间后执行特定操作，也可以让程序代码每隔一段时间执行一次，实现间歇操作。

方法	说明
setTimeout()	在指定的毫秒数后调用函数或执行一段代码
setInterval()	按照指定的周期（以毫秒计）来调用函数或执行一段代码
clearTimeout()	取消由setTimeout()方法设置的定时器
clearInterval()	取消由setInterval()设置的定时器

setTimeout() 和 setInterval() 方法区别：

• 相同点：都可以在一个固定时间段内执行 JavaScript 程序代码。
• 不同点：setTimeout() 只执行一次代码，setInterval() 会在指定的时间后，自动重复执行代码。

// 只执行一次代码
setTimeout(echoStr, 3000);
function echoStr() {
    
    
    console.log('JavaScript');
}
// 重复执行代码
setInterval(echoStr, 3000);
function echoStr() {
    
    
    console.log('JavaScript');
}

• setTimeout() 方法在执行一次后即停止了操作；setInterval() 方法一旦开始执行，在不加干涉的情况下，间歇调用将会一直执行到页面关闭为止。
• 若要在定时器启动后，取消该操作，可以将 setTimeout() 的返回值（定时器ID）传递给 clearTimeout() 方法；或将 setInterval() 的返回值传递给 clearInterval() 方法。

2.6 练习作业

• 限时秒杀
  • 指定限时秒杀的结束时间，及其对应的毫秒数。
  • 获取当前时间的毫秒数。
  • 计算当前与秒杀结束的时间差，大于0，计算剩余的天时分秒；否则结束秒杀。
  • 利用定时器完成秒杀的倒计时功能。
  • 利用两位数字显示秒杀的时间。

3 location 对象

3.1 更改 URL

URL：Uniform Resource Locator，统一资源定位符。

在 Internet 上访问的每一个网页文件，都有一个访问标记符，用于唯一标识它的访问位置，以便浏览器可以访问到，这个访问标记符称为URL。

// http://www.example.com:80/web/index.html?a=3&b=4#res
// http 传输数据所使用的协议
// www.example.com 服务器主机名
// 80 端口号
// /web/index.html 要请求的资源
// a=3&b=4 用户传递的参数
// #res 页面内部的锚点

// 由于80是Web服务器的默认端口号，因此可以省略URL中的“:80”
// 即：http://www.example.com/web/index.html?a=3&b=4#res

location 对象提供的用于改变 URL 地址的方法，所有主流的浏览器都支持。

名称	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

reload() 方法的唯一参数，是一个布尔类型值，将其设置为 true 时，它会绕过缓存，从服务器上重新下载该文档，类似于浏览器中的刷新页面按钮。

3.2 获取 URL 参数

Web开发中，经常通过URL地址传递的参数执行指定的操作，如商品的搜索，排序等。此时，可以利用location对象提供的search属性返回URL地址中的参数。

• 用户访问该URL地址。
• 获取带有?的请求参数。

获取URL的指定部分：location.属性名。

设置URL的指定部分：location.属性名 = 值。

属性	说明
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回URL的路径名
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议

3.3 练习作业

• 定时跳转
  • 编写定时跳转的HTML页面。
  • 获取指定的秒数，并减1写入页面。
  • 当秒数大于0时，利用 setTimeout() 循环倒计时。
  • 当秒数小于等于0时，利用 location.href 跳转到指定的URL地址中。

4 history 对象

4.1 历史记录跳转

history对象可对用户在浏览器中访问过的URL历史记录进行操作。

出于安全方面的考虑，history对象不能直接获取用户浏览过的URL，但可以控制浏览器实现“后退”和“前进”的功能。

分类	名称	说明
属性	length	返回历史列表中的网址数
方法	back()	加载history列表中的前一个URL
方法	forward()	加载history列表中的下一个URL
方法	go()	加载history列表中的某个具体页面

• go()方法可根据参数的不同设置，完成历史记录的任意跳转。当参数值是一个负整数时，表示“后退”指定的页数；当参数值是一个正整数时，表示“前进”指定的页数。
• 当go()方法的参数为1或-1时，与forward()和back()方法的作用相同。

4.2 无刷新更改 URL 地址

HTML5为history对象引入了history.pushState()和history.replaceState()方法，用来在浏览历史中添加和修改记录，实现无刷新更改URL地址。

pushState(state, title, [url])     // 添加历史记录
replaceState(state, title, [url])  // 修改历史记录

• 参数state：表示一个与指定网址相关的状态对象，此处可以填null或空字符串。
• 参数title：表示新页面的标题，可以填null或空字符串。
• 参数url：表示新的网址，并且必须与当前页面处在同一个域中。

history.pushState(null, null, "?a=check");
history.pushState(null, null, "?a=login");
history.replaceState(null, null, "?p=1");

• pushState()方法会改变浏览器的历史列表中记录的数量。
• replaceState()方法仅用于修改历史记录，历史记录列表的数量不变，与location.replace()方法的功能类似。

5 navigator 对象

navigator对象提供了有关浏览器的信息，主流浏览器中存在的属性和方法如下。

分类	名称	说明
属性	appCodeName	返回浏览器的内部名称
属性	appName	返回浏览器的名称
属性	appVersion	返回浏览器的平台和版本信息
属性	cookieEnabled	返回指明浏览器中是否启用cookie的布尔值
属性	platform	返回运行浏览器的操作系统平台
属性	userAgent	返回由客户端发送服务器的User-Agent头部的值
方法	javaEnabled()	指定是否在浏览器中启用Java

6 screen 对象

screen对象用于返回当前渲染窗口中与屏幕相关的属性信息，如屏幕的宽度和高度等。以下展示主流浏览器中支持的screen属性。

名称	说明
height	返回整个屏幕的高
width	返回整个屏幕的宽
availHeight	返回浏览器窗口在屏幕上可占用的垂直空间
availWidth	返回浏览器窗口在屏幕上可占用的水平空间
colorDepth	返回屏幕的颜色深度
pixelDepth	返回屏幕的位深度/色彩深度

7 练习作业

• 红绿灯倒计时
  • 横向三色交通信号灯的亮灯的顺序一般为“绿->黄->红->绿”依次循环。
  • 亮灯时长需根据路口的实际情况等因素来考虑设置，如红灯亮设置为30秒，绿灯亮设置为35秒，黄灯亮设置为5秒。
  • 编写HTML，设置红黄绿灯及倒计时的显示页面。
  • 创建红、黄、绿灯对象lamp，保存相关的数据。
  • 创建倒计时的元素对象count，实现倒计时的时间设置。
  • 根据lamp和count对象获取并设置绿灯亮时页面初始化效果。
  • 利用setInterval()函数完成信号灯倒计时的动态改变效果。
    水平空间 |
    | colorDepth | 返回屏幕的颜色深度 |
    | pixelDepth | 返回屏幕的位深度/色彩深度 |

7 练习作业

• 红绿灯倒计时
  • 横向三色交通信号灯的亮灯的顺序一般为“绿->黄->红->绿”依次循环。
  • 亮灯时长需根据路口的实际情况等因素来考虑设置，如红灯亮设置为30秒，绿灯亮设置为35秒，黄灯亮设置为5秒。
  • 编写HTML，设置红黄绿灯及倒计时的显示页面。
  • 创建红、黄、绿灯对象lamp，保存相关的数据。
  • 创建倒计时的元素对象count，实现倒计时的时间设置。
  • 根据lamp和count对象获取并设置绿灯亮时页面初始化效果。
  • 利用setInterval()函数完成信号灯倒计时的动态改变效果。