JavaScript Window Object

JavaScript Window on globaali rajapinta (objektityyppi), jota käytetään selaimen ikkunan elinkaaren hallintaan ja erilaisten operaatioiden suorittamiseen.

Globaalinen muuttuja window, joka edustaa nykyistä selainikkunaa, jossa koodi on käynnissä, on käytettävissä JavaScript-koodissamme, ja sitä voidaan käyttää suoraan window-litteraalin avulla.

Se edustaa ikkunaa, joka sisältää verkkosivun (webpage), joka puolestaan edustaa dokumentti-objektia. Ikkuna voi olla uusi ikkuna, uusi välilehti, kehysjoukko tai yksittäinen JavaScriptillä luotu kehys.

Monivälilehtiselaimessa ikkunaobjekti edustaa yksittäistä välilehteä, mutta jotkin sen ominaisuuksista, kuten innerHeight, innerWidth, ja metodeista, kuten resizeTo(), vaikuttavat koko selainikkunaan.

Aina kun avaat uuden ikkunan tai välilehden, kyseistä ikkunaa/välilehteä edustava ikkunaobjekti luodaan automaattisesti.

Ikkunaobjektin ominaisuuksia käytetään tietojen hakemiseen parhaillaan avoinna olevasta ikkunasta, kun taas sen metodeja käytetään tiettyjen tehtävien suorittamiseen, kuten ikkunan avaamiseen, maksimointiin, minimointiin jne.

Ymmärtääksemme ikkunaobjektin, käytämme sitä joidenkin operaatioiden suorittamiseen ja katsomme, miten se toimii.

Javaskriptin ikkunaobjektin käyttäminen

Luotaan JavaScriptin ikkunaobjektin avulla uusi ikkuna metodia open() käyttäen. Tämä metodi luo uuden ikkunan ja palauttaa objektin, jota voidaan edelleen käyttää kyseisen ikkunan hallintaan.

Yllä olevassa koodissa olemme käyttäneet olemassa olevan ikkunan ikkunaobjektia uuden ikkunan luomiseen open()-metodin avulla. Metodissa open() voimme antaa uudessa ikkunassa avattavan URL-osoitteen (voimme pitää sen myös tyhjänä), ikkunan nimen sekä luotavan ikkunan leveyden ja korkeuden.

Seuraava on ikkunaobjektin open()-metodin syntaksi:

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

Voimme antaa niin monta ominaisuutta kuin haluamme uutta ikkunaa luodessamme.

Kun open()-metodi suoritetaan, se palauttaa luodun uuden ikkunan ikkunaobjektin viitteen, jonka voit määrittää muuttujaan, kuten olemme tehneet yllä olevassa koodissa. Olemme osoittaneet window.open()-metodin palauttaman arvon win-muuttujaan.

Olemme käyttäneet win-muuttujaa uuden ikkunan käyttämiseen, kuten ikkunan nimen saamiseen, uuden ikkunan avanneen ikkunan sijainnin saamiseen jne.

Ikkunaobjektilla on monia ominaisuuksia ja metodeja, jotka olemme listanneet alla.

Ikkunan mittojen löytäminen

Voimme saada ikkunan korkeuden ja leveyden käyttämällä ikkunaobjektin sisäänrakennettuja ominaisuuksia.

Voimme myös käyttää dokumenttiobjektia käyttämällä ikkunaobjektia(window.document), joka antaa meille pääsyn HTML-dokumenttiin, joten voimme lisätä uuden HTML-elementin tai kirjoittaa dokumenttiin mitä tahansa sisältöä, kuten teimme yllä olevassa esimerkissä.

JavaScript-ikkunaobjektin ominaisuudet

Wondow-objektin ominaisuudet viittaavat ikkunaobjektin sisälle luotuihin muuttujiin.

JavaScriptissa kaikki käytettävissä oleva tieto liitetään ikkunaobjektiin ominaisuuksina.

Voimme käyttää ikkunaobjektin ominaisuuksia kuten: window.propertyname missä propertyname on ominaisuuden nimi.

Alhaalla on taulukko suosituimmista ikkunaobjektin ominaisuuksista:

.

Ominaisuus	Kuvaus
suljettu	palauttaa boolean-arvon, joka määrittelee, onko ikkuna suljettu vai ei
dokumentti	määrittelee ikkunassa olevan dokumenttiobjektin.
history	määrittää ikkunan historiaobjektin.
frames	määrittelee nykyisen ikkunan kaikkien kehysten joukon
defaultStatus	määrittelee oletusviestin, joka on näytettävä ikkunan tilarivillä.
innerHeight	määrittää ikkunan sisältöalueen sisäisen korkeuden.
innerWidth	määrittää ikkunan sisältöalueen sisäisen leveyden.
length	määrittää ikkunan sisältämien kehysten määrän.
location	määrittää ikkunan sijaintiobjektin
name	määrittää ikkunan nimen
top	määrittää ylimmän selainikkunan viittauksen.
self	palauttaa nykyisen aktiivisen kehyksen tai ikkunan viitteen.
parent	palauttaa nykyisen ikkunan vanhemman kehyksen tai ikkunan.
status	määrittää viestin, joka näytetään ikkunan tilarivillä, kun ikkunassa suoritetaan toiminto.
screenleft	määrittää ikkunan x-koordinaatin suhteessa käyttäjän näytön näyttöön
screenTop	määrittää ikkunan y-koordinaatin suhteessa käyttäjän näytön näyttöön
screenX	määrittää ikkunan x-koordinaatin suhteessa käyttäjän monitorinäyttöön
screenY	määrittää ikkunan y-koordinaatin suhteessa käyttäjän monitorinäyttöön

Katsotaanpa muutama esimerkki, jossa nähdään muutama näistä ominaisuuksista toiminnassa:

Yllä olevassa esimerkissä olemme luoneet uuden ikkunan, jotta uuden ikkunan luominen tulisi tutuksi ja jotta ymmärtäisit myös, että kun luomme uuden ikkunan, niin nykyisellä ikkunalla on eri ikkunaobjekti ja uudella ikkunalla on erillinen ikkunaobjekti.

Olemme sitten yrittäneet päästä käsiksi uuden luodun ikkunan joihinkin ominaisuuksiin.

TÄHTÄVÄ: Kokeile vielä joitakin ikkunan ominaisuuksia yllä olevassa koodileikkipaikassa harjoitellaksesi ja ymmärtääksesi, miten ikkunan ominaisuudet toimivat.

JavaScriptin ikkunaobjektin metodit

Ikkunaobjektin metodit viittaavat ikkunaobjektin sisälle luotuihin funktioihin, joita voidaan käyttää erilaisten toimintojen suorittamiseen selainikkunassa, kuten esimerkiksi siihen, miten selainikkunassa näytetään viestiä tai miten se vastaanottaa syötettä käyttäjältä.

Alhaalla on lueteltu joitakin yleisimmin käytettyjä ikkunaobjektin metodeja:

.

.

.

Method	Description
alert()	määrittelee metodin, joka näyttää hälytyslaatikon, jossa on viesti OK-painike.
blur()	määrittelee metodin, joka poistaa tarkennuksen nykyisestä ikkunasta.
clearInterval()	määrittelee metodin, joka tyhjentää ajastimen, joka on asetettu setInterval()-metodilla.
close()	määrittää metodin, joka sulkee nykyisen ikkunan.
confirm()	määrittelee metodin, joka näyttää valintaikkunan, jossa on viesti ja kaksi painiketta OK ja Peruuta
focus()	määrittelee metodin, joka asettaa fokuksen nykyiseen ikkunaan.
open()	määrittelee metodin, joka avaa uuden selainikkunan
moveTo()	määrittelee metodin, joka siirtää ikkunan määritettyyn asentoon
moveBy()	määrittelee metodin, joka siirtää ikkunan nykyiseen asentoon nähden.
prompt()	määrittelee metodin, joka pyytää syötettä.
print()	määrittelee metodin, joka lähettää tulostuskomennon nykyisen ikkunan sisällön tulostamiseksi.
setTimeout()	määrittää metodin, joka arvioi lausekkeen tietyn millisekuntimäärän jälkeen.
setInterval()	määrittää metodin, joka arvioi lausekkeen tietyin aikavälein (millisekunteina)
resizeBy()	määrittää määrän, jolla ikkunan kokoa muutetaan
resizeTo()	käytetään ikkunan dynaamiseen koon muuttamiseen
scroll()	vierittää ikkunan tiettyyn kohtaan asiakirjassa
scrollBy()	vierittää ikkunan annetulla arvolla
stop()	tämä metodi pysäyttää ikkunan lataamisen

Katsotaanpa esimerkin avulla muutama edellä mainituista metodeista toiminnassa:

Yllä olevassa esimerkissä olemme käyttäneet joitakin ikkunametodeja, voit kokeilla muitakin metodeja. Seuraavassa opetusohjelmassa tutustumme History-olioon, joka on ikkuna-olion ominaisuus.