Slabikář JavaScriptu – DOM, objekt Window

3. května 2002

•

Kromě syntaxe a sémantiky příkazů programovacího jazyka je vždy zapotřebí znát objektový model, který je možné programem ovládat. U JavaScriptu se jedná jednak o jeho vlastní vestavěné objekty a jednak o Document Object Model (DOM) – tedy soubor programovatelných objektů, které podporují jednotlivé prohlížeče. Podívejme se na objekt Window.

Objektový model DOM definuje hierarchii objektů, které podporuje internetový prohlížeč, jejich metod a vlastností. Ačkoli je definice tohoto modelu zastřešena W3C (viz http://www.w3.org/pub/WWW/MarkUp/DOM), pravdou je, že se neustále vyvíjí, je různá pro jiné prohlížeče (Netscape, IE …) a liší se i v jejich jednotlivých verzích. Přesto je jeho znalost pro programování v JavaScriptu nezbytná. Kompletní popis všech využitelných struktur by si vyžádal několik desítek pokračování Slabikáře, a proto se v následujících dílech zaměřme „pouze“ na ty nejpoužívanější. Začněme hierarchickou definicí objektů, kterou budeme dále procházet a popisovat:

Window
- Location
- History
- Navigator
- Event
- Screen
- Layer
- Document
  - Selection
  - Style
  - TextRange
  - All
  - Anchors
  - Applets
  - Areas
  - Cells
  - Embeds
  - Filters
  - Forms
    - Elements
    - Options
  - Frames
  - Images
  - Imports
  - Layers
  - Links
  - Plugins
  - Rows
  - Scripts
  - StyleSheets / StyleSheet Object

Jako nejvyšší objekt celé struktury je Window, ten zde bude popsán podrobně. Tímto objektem může být aktuální okno, v němž je JavaScript odkazující se na tento objekt spouštěn, nebo může být tímto objektem libovolný frame (pokud HTML dokument obsahuje rámy). Pomocí JavaScriptu se lze také odkazovat na jiná okna prohlížeče (opět objekty Window), pokud byla tato okna otevřena metodou open(), viz dále.

Jelikož je Window nejvýše v celém modelu DOM (anglicky top level object) a při provádění JavaScriptu se jeho existence tudíž předpokládá, nemusí se při používání jeho metod a vlastností v kódu explicitně uvádět. Díky tomu si programátoři někdy pletou metody objektu Window s vestavěnými funkcemi JavaScriptu a marně je hledají v helpu k programovacímu jazyku.

Vlastnosti objektu Window:
U popisu vlastností začněme těmi nejjednoduššími. defaultStatus a status jsou vlastnosti, kterými lze nastavit text stavového řádku okna (Status bar). Jejich odlišnost je v tom, že zatímco status nastaví text stavového řádku jen do chvíle, kdy je stavový řádek přepsán jiným textem, defaultStatus definuje implicitní hodnotu, která je ve stavovém řádku zobrazována. Následující řádky jsou funkčně totožné

window.defaultStatus="Vítejte v JavaScriptu";
defaultStatus="Vítejte v JavaScriptu";

Pokud máte nastavenu hodnotu defaultStatus a přejedete myší nad hypertextovým odkazem, změní se text ve stavovém řádku na chvíli na URL odkazu, ale potom se vrátí na původní hodnotu definovanou vlastností defaultStatus.

Existují důležité vlastnosti objektu Window, které odkazují na jiné objekty Window – díky nim je možné předávat například formulářové hodnoty mezi okny nebo se odkazovat na rámce. Těmito technikami se budeme podrobněji zabývat v jednom z následujících dílů.

První takovou vlastností je self. Tato vlastnost odkazuje na objekt Window, v rámci něhož je spouštěn příslušný skript. Například:

self.document.bgColor="Navy"

nastaví hodnotu pozadí aktuálního dokumentu na Navy. Dalšími vlastnostmi jsou parent a top. Obě vlastnosti se používají spolu s rámy a mají stejnou funkci jako hodnoty parametru TARGET v tagu A (hypertextový odkaz) nebo FORM. Odkazují se tedy buď na rodičovský frame (parent) nebo na nejvyšší objekt Window v rámci zanořených rámů (top). Poslední vlastností tohoto typu je opener (objekt Window, který otevřel současný objekt) – odkaz na objekt Window, ze kterého byl metodou open() otevřen objekt window, z něhož se odkazujeme.

Pokud je objekt Window složen z rámů, je možné použít kolekci frames pro odkaz na jednotlivý rám. Na konkrétní rám je možné se odkazovat buď jeho názvem – vlastnost name, která je také přístupná JavaScriptem – nebo pořadovým číslem rámu v kolekci. Počet rámů je obsažen ve vlastnosti length. Podle následujícího příkladu si můžete zobrazit názvy všech rámů v dokumentu:

<html>
<head>
<script language=“JavaScript“>
function Ramy() {
  for (i=0;i<self.length;i++) {
    alert (self.frames(i).name);
  }
  alert (self.frames[‚hlava‘].location);
}
</script>
</head>
<frameset cols=“180,*“ onLoad=“Ramy()“>
  <frameset rows=“100,*“>
    <frame name=“hlava“ src=“hlava.asp“>
    <frame name=“tree“ src=“tree.asp“>
  </frameset>
  <frame name=“texty“ src=“blanc.asp“>
</frameset>

Další vlastnosti odkazují na objekty, které jsou podle hierarchie vnořené do objektu Window, tj. vlastnosti location, history, navigator, event, screen, layer, document.

Metody objektu Window

Jednou z nejznámějších metod je alert. Dosud jsme tento identifikátor chápali intuitivně, nyní si zapamatujme, že se jedná o metodu objektu. Stejné je to i s metodami confirm (dialog pro potvrzení akce – nabízí pouze tlačítka OK a Storno) a prompt (dialog pro zadání dat), které jsou použity v předcházejících dílech také.
Příklady typických použití obou metod:

if (confirm("Opravdu smazat?")) { }
var a = prompt("Zadejte rok", 2002)

Další metody se týkají pozice okna nebo pozice v okně. Metody existují vždy ve dvojici, přičemž jedna metoda se týká pozic relativních a druhá absolutních. Všechny metody mají dva číselné argumenty, jejichž významem je x-ová a y-ová souřadnice udávaná v pixelech.

moveBy – posune okno na pracovní ploše (na monitoru) o specifikovaný počet bodů vpravo a dolů (pokud chceme posunout vlevo resp. nahoru, je nutné zadat první, resp. druhý argument záporný)

self.moveBy (10, -50) – posune aktuální okno o 10 bodů vpravo a 50 nahoru.

moveTo – posune okno na pracovní ploše na pozici danou parametry. Bod (0,0) je levý horní roh obrazovky.
resizeBy – změní velikost okna tím, že posune pravý spodní roh okna o zadaný počet bodů.
resizeTo – změní velikost okna na velikost zadanou argumenty.
scrollBy – naroluje v dokumentu okna o zadaný počet bodů.
scrollTo – naroluje v dokumentu na pozici definovanou zadaným počtem bodů vlevo a shora.

Další důležité metody se týkají časovače. Pomocí některých metod objektu Window lze JavaScriptem spouštět určité akce (typicky funkce JavaScriptu) v definovaných časových intervalech.

setInterval – definuje akci (první argument metody), která se má periodicky opakovat v pravidelných časových intervalech. Tento interval je udáván jako druhý prametr metody v milisekundách.
setTimeout – stejná funkčnost jako setInterval s tím rozdílem, že akce se provede pouze jednou po uplynutí doby dané druhým argumentem metody
clearInterval – metoda zruší korespondující nastavení setInterval. Zastaví se tedy periodické opakování. clearTimeout – metoda zruší nastavení setTimeout.

Nejlépe funkci uvedených metod pochopíte, když vyzkoušíte následující příklad, který spouští ve stavovém řádku prohlížeče digitální hodiny. Příklad ukazuje použití metod setInterval a clearInterval. Syntaxe metod setTimeout a clearTimeout je stejná. Tlačítkem „Zastavit hodiny“ lze hodiny zastavit.

<html>
<head>
<script language=“JavaScript“>
theTime=setInterval(„runClock()“,1000);
function runClock() {
  var today=new Date();
  var display=today.toLocaleString();
  status=display;
}
</script>
</head>
<body>
  <input type=“button“ value=“ Zastavit hodiny “ onClick=“clearInterval(theTime)“>
</body>
</html>

Posledními metodami, které si popíšeme, jsou metody zajišťující otevírání a zavírání nových oken.

open – metoda umožňuje otevřít nové okno prohlížeče, zadat jeho vzhled (velikost, umístění, ovládací prvky) a zadat cestu k dokumentu, který má být do okna natažen.
Syntaxe je: promenna=window.open(„URL“, „nazev_okna“, „vzhled_okna“)
Příklad otevírá okno o velikosti 200×300 pixelů, jehož velikost není možné měnit:
var a = window.open(„http://interval.cz“, „New_window“, „width=200; height=300; resizable=no“)

Pomocí názvu okna je potom možné se na toto okno odkazovat v kódu JavaScriptu.

Metoda close zavírá okno browseru. Pokud chceme zavřít okno, v němž je spouštěn kód zavírající okno, použijeme self.close().

Internet Explorer od verze 4.0 podporuje další užitečnou metodu showModalDialog pro otevírání tzv. modálního okna. Po otevření nového okna prohlížeče touto metodou se do nového okna předá fokus a tento fokus oknu zůstane až do chvíle, než uživatel ukončí práci v tomto okně a zavře ho. Tato vlastnost okna se nazývá modálnost. Význam tohoto slova je stejný, ať používáte jakýkoli programovací jazyk.

Metoda showModalDialog má tři argumenty, z nichž pouze první je povinný:

showModalDialog("URL" [, argumenty [, "vzhled okna"]])

Prvním argumentem je URL dokumentu, který se má do modálního okna natáhnout. Druhým je seznam argumetnů, které mají být do okna předány, posledním je textový řetězec definující vzhled modálního dialogu. Tato metoda může být výhodně použita pro vkládání doplňujících informací do složitějších formulářů. Pro lepší porozumění si vyzkoušejte následující příklad, který tvoří dva dokumenty. První otevírá na kliknutí modální dialog a předává mu hodnotu z textového pole. Druhý dokument představuje HTML kód, který je natažen do modálního okna a při jeho zavření předává zpět do prvního okna browseru návratovou hodnotu, jež opět uživatel může předem vyplnit do textového pole:

<html>
<head>
  <title>Předání hodnot 1</title>
</head>
<body>
  Hodnota pro předání do modálního okna:
  <INPUT TYPE=“Text“ VALUE=“Hodnota pro předání“ ID=“args“>
  <INPUT TYPE=“Button“ VALUE=“Předat“
  ONCLICK=“tmp=showModalDialog(‚predani2.html‘,
  document.all.args.value,’dialogWidth=300pt;dialogHeight=200pt‘);
  alert(‚Byla vrácena hodnota\n‘ + tmp);“>
</body>
</html>

Druhý dokument je zapotřebí nazvat predani2.html a umístit do stejné složky jako první. Pouze tak budou oba HTML dokumenty tvořit jediný funkční příklad.

<HTML>
<HEAD>
  <TITLE>Předání hodnot 2</TITLE>
</HEAD>
<BODY ONUNLOAD=“window.returnValue = document.all.ret.value;“>
  <P>Přijatá hodnota:</P>
  <P ALIGN=CENTER>
  <SCRIPT LANGUAGE=“JavaScript“>
    document.write(window.dialogArguments);
  </SCRIPT>
  </P>
  <P>Vepište návratovou hodnotu:</P>
  <P ALIGN=CENTER>
  <INPUT TYPE=TEXT ID=“ret“ VALUE=“Návrat“>
  <INPUT STYLE=“width:5em“ TYPE=SUBMIT VALUE=“OK“ ONCLICK=“window.close()“>
  </P>
</BODY>
</HTML>

Druhý HTML dokument používá vlastnost dialogArguments, která je opět specifická pro Internet Explorer a obsahuje seznam argumetů, které byly do modálního okna předány metodou showModalDialog.

Pozn. aut.: V článku jsou použity některé příklady z knihy JavaScript – praktické příklady, která vyšla v nakladatelství Grada. Příklady jsou převzaty a pozměněny se souhlasem nakladatele.