JavaScript Window Object

JavaScript Window je globální rozhraní (typ objektu), které slouží k řízení životního cyklu okna prohlížeče a provádění různých operací s ním.

V našem JavaScriptovém kódu je k dispozici globální proměnná window, která reprezentuje aktuální okno prohlížeče, ve kterém je kód spuštěn, a lze k ní přímo přistupovat pomocí literálu window.

Představuje okno obsahující webovou stránku, která je zase reprezentována objektem document. Oknem může být nové okno, nová karta, sada rámců nebo jednotlivé rámy vytvořené pomocí JavaScriptu.

V případě prohlížeče s více kartami reprezentuje objekt okna jednu kartu, ale některé jeho vlastnosti jako innerHeight, innerWidth a metody jako resizeTo() ovlivní celé okno prohlížeče.

Při každém otevření nového okna nebo karty se automaticky vytvoří objekt okna reprezentující toto okno/kartu.

Vlastnosti objektu okna slouží k získání informací o právě otevřeném okně, zatímco jeho metody slouží k provádění konkrétních úloh, jako je otevření, maximalizace, minimalizace okna atd.

Abychom pochopili objekt okna, použijeme jej k provedení některých operací a uvidíme, jak funguje.

Použití objektu okna v jazyce JavaScript

Použijeme objekt okna v jazyce JavaScript k vytvoření nového okna pomocí metody open(). Tato metoda vytvoří nové okno a vrátí objekt, který lze dále použít ke správě tohoto okna.

V kódu výše jsme použili objekt okna existujícího okna k vytvoření nového okna pomocí metody open(). V metodě open() můžeme zadat adresu URL, která se má otevřít v novém okně (můžeme ji nechat i prázdnou), název okna, šířku a výšku vytvářeného okna.

Následující syntaxe metody open() objektu okna:

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

Při vytváření nového okna můžeme zadat libovolný počet vlastností.

Když se metoda open() provede, vrátí odkaz na objekt okna pro nově vytvořené okno, který můžete přiřadit do proměnné, jako jsme to udělali v kódu výše. Hodnotu vrácenou metodou window.open() jsme přiřadili proměnné win.

Proměnnou win jsme použili k přístupu k novému oknu, jako je získání názvu okna, získání umístění okna, které nové okno otevřelo, atd.

Pro objekt okno existuje mnoho vlastností a metod, které jsme uvedli níže.

Zjištění rozměrů okna

Výšku a šířku okna můžeme získat pomocí vestavěných vlastností objektu okno.

Můžeme také přistupovat k objektu dokumentu pomocí objektu window(window.document), který nám poskytuje přístup k dokumentu HTML, tudíž můžeme přidat nový prvek HTML nebo zapsat do dokumentu libovolný obsah, jako jsme to udělali v příkladu výše.

Vlastnosti objektu okna v jazyce JavaScript

Vlastnosti objektu okna se vztahují k proměnným vytvořeným uvnitř objektu okna.

V jazyce JavaScript jsou všechna dostupná data připojena k objektu okna jako vlastnosti.

Můžeme přistupovat k vlastnostem objektu okna, např: window.propertyname kde propertyname je název vlastnosti.

Níže je uvedena tabulka nejoblíbenějších vlastností objektu okna:

.

Vlastnost	Popis
uzavřeno	vrací logickou hodnotu, která určuje, zda bylo okno uzavřeno nebo ne
dokument	určuje objekt dokumentu v okně.
historie	určuje objekt historie okna.
frames	určuje pole všech rámců v aktuálním okně
defaultStatus	určuje výchozí zprávu, která se má zobrazit ve stavovém řádku okna.
innerHeight	určuje vnitřní výšku oblasti obsahu okna.
innerWidth	určuje vnitřní šířku oblasti obsahu okna.
length	určuje počet rámců obsažených v okně.
location	určuje objekt umístění okna
name	určuje název okna
top	určuje odkaz na nejvyšší okno prohlížeče.
self	vrací odkaz na aktuální aktivní rám nebo okno.
parent	vrací rodičovský rám nebo okno aktuálního okna.
status	určuje zprávu, která se zobrazí ve stavovém řádku okna, když je s oknem prováděna nějaká činnost.
screenleft	určuje souřadnici x okna vzhledem k obrazovce monitoru uživatele
screenTop	určuje souřadnici y okna vzhledem k obrazovce monitoru uživatele
screenX	určuje souřadnici x okna vzhledem k obrazovce monitoru uživatele
screenY	Určuje souřadnici y okna vzhledem k obrazovce monitoru uživatele

Podívejme se na příkladu na několik těchto vlastností v akci:

V uvedeném příkladu jsme vytvořili nové okno jen proto, abychom vás seznámili s vytvářením nových oken a také proto, abyste pochopili, že když vytvoříme nové okno, pak aktuální okno má jiný objekt okna a nové okno bude mít samostatný objekt okna.

Poté jsme se pokusili přistupovat k některým vlastnostem nově vytvořeného okna.

Úkol: Vyzkoušejte si na výše uvedeném hřišti kódu některé další vlastnosti oken, abyste si procvičili a pochopili, jak vlastnosti oken fungují.

Metody objektu okna v jazyce JavaScript

Metody objektu okna odkazují na funkce vytvořené uvnitř objektu okna, které lze použít k provádění různých akcí s oknem prohlížeče, například jak zobrazit zprávu nebo získat vstup od uživatele.

Níže uvádíme některé z nejčastěji používaných metod objektu okna:

.

.

.

Metoda	Popis
alert()	určuje metodu, která zobrazí okno upozornění se zprávou tlačítko OK.
blur()	určuje metodu, která odstraní fokus z aktuálního okna.
clearInterval()	určuje metodu, která vymaže časovač, který je nastaven pomocí metody setInterval().
close()	určuje metodu, která zavře aktuální okno.
confirm()	určuje metodu, která zobrazí dialogové okno se zprávou a dvěma tlačítky OK a Storno
focus()	určuje metodu, která nastaví fokus na aktuální okno.
open()	určuje metodu, která otevře nové okno prohlížeče
moveTo()	určuje metodu, která přesune okno na zadanou pozici
moveBy()	určuje metodu, která přesune okno vzhledem k jeho aktuální pozici.
prompt()	určuje metodu, která vyzve k zadání vstupu.
print()	určuje metodu, která odešle příkaz k vytištění obsahu aktuálního okna.
setTimeout()	určuje metodu, která vyhodnotí výraz po zadaném počtu milisekund.
setInterval()	určuje metodu, která vyhodnocuje výraz v zadaných časových intervalech (v milisekundách)
resizeBy()	určuje velikost, o kterou se změní velikost okna
resizeTo()	používá se pro dynamickou změnu velikosti okna
scroll()	posune okno na určité místo v dokumentu
scrollBy()	posune okno o danou hodnotu
stop()	tato metoda zastaví načítání okna

Ukážeme si na příkladu několik výše uvedených metod v akci:

V uvedeném příkladu jsme použili několik metod okna, můžete vyzkoušet i další metody. V příštím tutoriálu se seznámíme s objektem Historie, který je vlastností objektu okno.