JavaScript Window Object

JavaScript Window is een globale Interface (objecttype) die wordt gebruikt om de levenscyclus van het browservenster te regelen en er verschillende bewerkingen op uit te voeren.

Een globale variabele window, die het huidige browservenster vertegenwoordigt waarin de code wordt uitgevoerd, is beschikbaar in onze JavaScript-code en kan direct worden benaderd door window letterlijk te gebruiken.

Het vertegenwoordigt een venster dat een webpagina bevat, die op zijn beurt wordt vertegenwoordigd door het documentobject. Een venster kan een nieuw venster zijn, een nieuw tabblad, een frameset of een individueel frame dat met JavaScript is gemaakt.

In het geval van een browser met meerdere tabbladen vertegenwoordigt een vensterobject een enkel tabblad, maar sommige eigenschappen ervan, zoals innerHeight, innerWidth en methoden zoals resizeTo(), hebben invloed op het hele browservenster.

Wanneer u een nieuw venster of tabblad opent, wordt er automatisch een vensterobject gemaakt dat dat venster/tabblad vertegenwoordigt.

De eigenschappen van een window object worden gebruikt om de informatie op te halen over het venster dat op dat moment geopend is, terwijl de methoden worden gebruikt om specifieke taken uit te voeren, zoals het openen, maximaliseren, minimaliseren van het venster, etc.

Om het window object te begrijpen, laten we het gebruiken om een aantal operaties uit te voeren en te zien hoe het werkt.

Het JavaScript Window Object gebruiken

Laten we het JavaScript window object gebruiken om een nieuw venster te maken, met behulp van de open() methode. Deze methode maakt een nieuw venster en retourneert een object dat verder kan worden gebruikt om dat venster te beheren.

In de bovenstaande code hebben we het window object van het bestaande venster gebruikt om een nieuw venster te maken met behulp van de open() methode. In de methode open() kunnen we de URL opgeven die in het nieuwe venster moet worden geopend (we kunnen deze ook leeg laten), de naam van het venster, de breedte en de hoogte van het venster dat moet worden gemaakt.

Hieronder volgt de syntaxis voor het vensterobject open() methode:

let newWindow = window.open(url, windowName, );

We kunnen zoveel eigenschappen opgeven als we willen, terwijl we een nieuw venster maken.

Wanneer de methode open() wordt uitgevoerd, geeft het de referentie van het vensterobject voor het nieuw gemaakte venster, die u kunt toewijzen aan een variabele, zoals we hebben gedaan in de bovenstaande code. We hebben de waarde die is geretourneerd door de window.open() methode toegewezen aan de win variabele.

We hebben de win variabele gebruikt om toegang te krijgen tot het nieuwe venster, zoals het opvragen van de naam van het venster, het opvragen van de locatie van het venster dat het nieuwe venster heeft geopend, etc.

Er zijn veel eigenschappen en methoden voor het vensterobject, die we hieronder hebben opgesomd.

Vind afmetingen van een venster

We kunnen de hoogte en breedte van een venster krijgen door de ingebouwde eigenschappen van het vensterobject te gebruiken.

We hebben ook toegang tot het document-object met behulp van een window-object(window.document) dat ons toegang geeft tot het HTML-document, zodat we nieuwe HTML-elementen kunnen toevoegen, of inhoud in het document kunnen schrijven, zoals we in het bovenstaande voorbeeld hebben gedaan.

JavaScript Window Object Properties

De eigenschappen van het window-object verwijzen naar de variabelen die in het window-object zijn gemaakt.

In JavaScript zijn alle beschikbare gegevens als eigenschappen aan het window-object gekoppeld.

We kunnen de eigenschappen van het window-object op de volgende manier openen: window.propertyname waarbij propertyname de naam van de eigenschap is.

Een tabel met de meest populaire eigenschappen van vensterobjecten staat hieronder:

Property	Description
closed	retourneert een boolean-waarde die aangeeft of een venster al dan niet is gesloten
document	specificeert een documentobject in het venster.
historie	specifieert een geschiedenis object voor het venster.
frames	specifieert een array van alle frames in het huidige venster
defaultStatus	specifieert het standaardbericht dat in de statusbalk van het venster moet worden weergegeven.
innerHeight	specifieert de binnenhoogte van het inhoudsgebied van het venster.
innerWidth	specifieert de binnenbreedte van het inhoudsgebied van het venster.
length	specifieert het aantal frames dat zich in het venster bevindt.
location	specifieert het locatie object voor window
name	specifieert de naam voor het window
top	specifieert de referentie van het bovenste browser window.
self	retourneert de referentie van het huidige actieve frame of window.
parent	returns het parent frame of window van het huidige window.
status	specifieert het bericht dat wordt weergegeven in de statusbalk van het venster wanneer een activiteit wordt uitgevoerd op het venster.
screenleft	specifieert de x-coördinaat van het venster ten opzichte van het beeldscherm van een gebruiker
screenTop	specifieert de y-coördinaat van het venster ten opzichte van het beeldscherm van een gebruiker
screenX	specifieert de x-coördinaat voor venster ten opzichte van het beeldscherm van een gebruiker
screenY	specifieert de y-coördinaat voor venster ten opzichte van het beeldscherm van een gebruiker

Laten we eens een voorbeeld nemen om een paar van deze eigenschappen in actie te zien:

In het bovenstaande voorbeeld hebben we een nieuw venster gemaakt, gewoon om u vertrouwd te maken met het maken van nieuwe vensters en ook, om u te laten begrijpen dat wanneer we een nieuw venster maken, dan heeft het huidige venster een ander vensterobject en het nieuwe venster zal een apart vensterobject hebben.

We hebben vervolgens geprobeerd om toegang te krijgen tot enkele eigenschappen van het nieuw gecreëerde venster.

TASK: Probeer wat meer windows property in de bovenstaande code playground om te oefenen en te begrijpen hoe window properties werken.

JavaScript Window Object Methods

De window object methods verwijzen naar de functies die binnen het Window Object zijn gemaakt, die kunnen worden gebruikt om verschillende acties op het browser window uit te voeren, zoals hoe het een bericht weergeeft of input krijgt van de gebruiker.

Hieronder staan enkele van de meest gebruikte methoden van het vensterobject:

Method	Description
alert()	specifieert een methode die een waarschuwingsvenster met een bericht en een OK-knop weergeeft.
blur()	specifieert een methode waarmee de focus van het huidige venster wordt verwijderd.
clearInterval()	specifieert een methode waarmee de timer wordt gewist, die is ingesteld met de methode setInterval().
close()	specifieert een methode waarmee het huidige venster wordt gesloten.
confirm()	specifieert een methode die een dialoogvenster weergeeft met een bericht en twee knoppen OK en Annuleren
focus()	specifieert een methode die de focus op het huidige venster zet.
open()	specifieert een methode waarmee een nieuw browservenster wordt geopend
moveTo()	specifieert een methode waarmee een venster naar een opgegeven positie wordt verplaatst
moveBy()	specifieert een methode waarmee een venster ten opzichte van de huidige positie wordt verplaatst.
prompt()	specifieert een methode die om invoer vraagt.
print()	specifieert een methode die een afdrukopdracht verzendt om de inhoud van het huidige venster af te drukken.
setTimeout()	specifieert een methode die een expressie na een gespecificeerd aantal milliseconden evalueert.
setInterval()	specifieert een methode die een uitdrukking evalueert met gespecificeerde tijdsintervallen (in milliseconden)
resizeBy()	specificeert de hoeveelheid waarmee de grootte van het venster wordt gewijzigd
resizeTo()	gebruikt voor het dynamisch wijzigen van de grootte van het venster
scroll()	scrollt het venster naar een bepaalde plaats in het document
scrollBy()	scrollt het venster met de opgegeven waarde
stop()	deze methode stopt het laden van het venster

Laten we eens een voorbeeld nemen en een paar van de bovenstaande methoden in actie zien:

In het bovenstaande voorbeeld hebben we enkele window methodes gebruikt, je kunt meer methodes proberen. In de volgende tutorial zullen we leren over het History object, dat een eigenschap is van het window object.