Objektový model prohlížeče
Aby bylo možné pomocí JavaScriptu ovládat chování prohlížeče a vzhled HTML dokumentu, je definován takzvaný objektový model prohlížeče, několik automaticky tvořených objektů, obsahujících informace popisující stav prohlížeče a zobrazovaných HTML dokumentů. Objekty, které jsou součástí objektového modelu prohlížeče obsahují často vlastnosti, jejichž hodnotami jsou odkazy na další objekty a vytvářejí tak dosti složitou hierarchii, pomocí níž lze přistupovat v JavaScriptu k jakémukoli objektu.
Některé vlastnosti objektů tvořících objektový model prohlížeče jsou pouze pro čtení (označeny /ro/ na konci popisu vlastnosti), použití některých metod a změna hodnot některých vlastností objektů je z bezpečnostních důvodů možná pouze po přidělení určitých privilegií části kódu JavaScriptu (označeno na konci popisu vlastnosti, viz. Příloha 3).
Objekt window
Objekty window reprezentují okna prohlížeče a jejich případné rámy. Při natažení HTML dokumentu do prohlížeče jsou automaticky vytvořeny všechny objekty popisující otevřená okna a rámy oken. Všechny automaticky vytvořené objekty window jsou vzájemně propojeny pomocí odkazů a tvoří opět jakousi hierarchii objeků window uvnitř hierarchie objektů objektového modelu prohlížeče. Hlavní okno prohlížeče je přístupné přes identifikátor window, pokud však přistupujeme k vlastnostem nebo metodám hlavního okna, je použití identifikátoru window nepovinné.
Vlastnosti objektů window
- closed – vlastnost obsahuje logickou hodnotu udávající, zda je okno zavřeno /ro/.
- crypto – vlastnost obsahuje odkaz na objekt obsahující některé bezpečnostní metody Netscape Navigatoru /ro/.
- defaultStatus – vlastnost obsahuje řetězec, který je vypsán na stavové řádce, není–li vypsán status:
<INPUT TYPE = "button" VALUE = "Tlačítko"
onMouseOver = "window.status = this.value"
onMouseOut = "window.status = window.defaultStatus">
<!-- při posunu kurzoru myši nad tlačítko program zobrazí "Tlačítko" na stavové řádce -->
- document – vlastnost obsahuje odkaz na objekt document představující HTML dokument natažený do aktuálního okna.
- frames – vlastnost obsahuje pole, jehož prvky jsou odkazy na případné rámy aktuálního okna – objekty window /ro/:
var Prvni_ram_hlavniho_okna = window.frames[0]
- history – vlastnost obsahuje odkaz na objekt History, ve kterém je uložena historie obsazení aktuálního okna.
- innerHeight – vlastnost udává výšku obsahu okna v pixelech, pro nastavení extrémních hodnot je třeba mít zápisové právo UniversalBrowserWrite:
var Vyska_obsahu_okna = window.innerHeight
- innerWidth – vlastnost udává šířku obsahu okna v pixelech, pro nastavení extrémních hodnot je třeba mít zápisové právo UniversalBrowserWrite:
var Sirka_obsahu_okna = window.innerWidth
- length – vlastnost obsahuje počet rámů aktuálního okna /ro/.
var Pocet_ramu = window.length
- location – vlastnost obsahuje odkaz na objekt Location, který reprezentuje adresu natažené stránky:
var URL_natazene_stranky = window.location
- locationbar.visible – vlastnost obsahuje logickou hodnotu udávající, zda je zobrazena lišta pro zadání adresy, pro nastavení hodnoty této vlastnosti je třeba mít zápisové právo UniversalBrowserWrite.
- menubar.visible – vlastnost obsahuje logickou hodnotu, zda je zobrazeno ikonové menu, pro nastavení hodnoty této vlastnosti je třeba mít zápisové právo UniversalBrowserWrite.
- name – vlastnost obsahuje jméno aktuálního okna, jménem hlavního okna je prázdný řetězec.
- offscreenBuffering – vlastnost obsahuje logickou hodnotu udávající, zda jsou zobrazovaná data nejdříve zapsána do bufferu a poté najednou vypsána na obrazovku.
- opener – vlastnost obsahuje odkaz na okno, které způsobilo otevření aktuálního okna.
- outerHeight – vlastnost udává výšku okna v pixelech:
var Celkova_vyska_okna = window.outerHeight
- outerWidth – vlastnost udává šířku okna v pixelech.
- pageXOffset – vlastnost udává souřadnici x bodu dokumentu, který je vidět v okně jako první /ro/:
var X_prvniho_bodu = window.pageXOffset
- pageYOffset – vlastnost udává souřadnici y bodu dokumentu, který je vidět v okně jako první /ro/.
- parent – vlastnost obsahuje odkaz na rodičovské okno v případě, že aktuální okno je rámem některého okna /ro/.
- personalbar.visible – vlastnost obsahuje logickou hodnotu udávající, zda je zobrazeno adresářové menu, pro nastavení hodnoty této vlastnosti je třeba mít zápisové právo UniversalBrowserWrite.
- screenX – vlastnost obsahuje souřadnici x horního levého rohu okna, pro nastavení hodnoty je třeba mít zápisové právo UniversalBrowserWrite:
var X_souradnice = window.screenX
- screenY – vlastnost obsahuje souřadnici y horního levého rohu okna, pro nastavení hodnoty je třeba mít zápisové právo UniversalBrowserWrite.
- scrollbars.visible – vlastnost obsahuje logickou hodnotu udávající, zda je zobrazen posuvník, pro nastavení hodnoty této vlastnosti je třeba mít zápisové právo UniversalBrowserWrite.
- self – vlastnost obsahuje odkaz na aktuální okno /ro/.
- status – vlastnost obsahuje řetězec, který je vypsán ve stavové řádce prohlížeče:
window.status = "Zdravím všechny příznivce!"
- statusbar.visible – vlastnost obsahuje logickou hodnotu udávající, zda je zobrazena stavová řádka, pro nastavení hodnoty této vlastnosti je třeba mít zápisové právo UniversalBrowserWrite.
- toolbar.visible – vlastnost obsahuje logickou hodnotu udávající, zda je zobrazena nástrojová lišta, pro nastavení hodnoty této vlastnosti je třeba mít zápisové právo UniversalBrowserWrite.
- top – vlastnost obsahuje odkaz na nejvyšší okno v hierarchii rámů /ro/:
for(var i = 0; i < top.frames.length; i++) {
příkaz prováděný pro všechny rámy hlavního okna, na rámy se odkazujeme: top.frames[ i]
}
- window – vlastnost obsahuje odkaz na aktuální okno /ro/.
Metody objektů window
- alert(řetězcový_výraz) – metoda zobrazí okno se zprávou zadanou jako parametr:
alert("Pozor! Došlo k chybě.")
- atob(kódovaná_data) – metoda rozkóduje data kódovaná pomocí metody btoa:
var Kodovano = window.btoa('Tajná data…')
var Dekodovano = window.atob(Kodovano)
- back( ) – metoda způsobí návrat v historii obsazení okna na předposlední stranu.
- blur( ) – metoda zruší zaměření okna.
- btoa(řetězec) – metoda provede zakódování řetězce.
- captureEvents(událost) – metoda určí oknu aby zachytávalo všechny události specifikovaného typu, pro provedení této akce je třeba mít zápisové právo UniversalBrowserWrite.
window.captureEvents(Event.MOUSEMOVE)
- clearInterval(identifikátor_intervalu) – metoda zruší naplánování akce pomocí metody setInterval:
clearInterval(interval)
/* zruší akci naplánovanou časovačem interval */
- clearTimeout(identifikace_timeoutu) – metoda zruší naplánování akce pomocí metody setTimeout:
clearTimeout(casovac)
/* zruší akci naplánovanou časovačem casovac */
- close( ) – metoda zavře okno nad kterým je volána, pro provedení této akce je třeba mít zápisové právo UniversalBrowserWrite.
self.close()
/* zavře atuální okno (self je nepovinné) */
- confirm(řetězcový_výraz) – metoda zobrazí okno se zprávou a žádá o potvrzení, zobrazí tlačítka OK a Cancel, pokud klikneme na OK, je vrácena hodnota true, jinak false:
if confirm('Přejete si provést akci?'){
seznam_příkazů_prováděné_akce
}
- crypto.random(počet_bajtů) – metoda vrací pseudo–náhodný řetězec znaků specifikované délky.
- crypto.signText(řetězec, ask|auto, seznam_certifikátů) – metoda umožňuje odeslat na server kódovaný podpis.
- disableExternalCapture( ) – metoda zamezí zachytávání událostí, které generují dokumenty z cizích serverů umístěné v některém z rámů okna.
- enableExternalCapture( ) – metoda povolí zachytávání událostí, které generují dokumenty z cizích serverů umístěné v některém z rámů okna, pro provedení této akce je třeba mít zápisové právo UniversalBrowserWrite.
- find([řetězcový_výraz [, logický_výraz, logický_výraz]) – metoda provede hledání řetězcového_výrazu v obsahu okna, další dva parametry, které musí být uvedeny společně, udávají zda bude hledání citlivé na velikost písmen a zda bude probíhat směrem vzad. Pokud je hledaný text nalezen, vrací metoda true, jinak false, pokud uvedeme metodu bez parametrů, je zobrazen dialog pro hledání:
var Nalezeno = window.find("JavaScript", true, false)
/* program vrací true, je–li nalezeno slovo "JavaScript" v textu zobrazeném v okně prohlížeče */
nebo:
window.find()
- focus( ) – metoda zaměří okno.
- forward ( ) – metoda provede postup na další stranu v historii obsazení okna:
window.forward()
- handleEvent(událost) – metoda umožňuje vyvolat ovladač specifikované události.
window.handleEvent(Event.MOUSEMOVE)
- home( ) – metoda zobrazí v okně dokument s domovskou stránkou.
- moveBy(číselný_výraz, číselný_výraz) – metoda posune okno o specifikovaný počet pixelů horizontálně a vertikálně, pro provedení této akce je v některých případech třeba mít zápisové právo UniversalBrowserWrite:
window.moveBy(100, -10)
/* program posune okno prohlížeče o 100 pixelů doprava a 10 pixelů nahoru */
- moveTo(číselný_výraz, číselný_výraz) – metoda přesune levý horní roh okna na specifikované souřadnice, pro provedení této akce je v některých případech třeba mít zápisové právo UniversalBrowserWrite:
window.moveTo(100, 100)
/* program přesune okno prohlížeče na pozici 100 pixelů od horního i levého okraje zobrazovací plochy */
- navigate(řetězcový_výraz) – metoda způsobí natažení stránky identifikované adresou uvedenou jako parametr do okna.
- open(řetězcový_výraz, řetězcový_výraz, řetězcový_výraz) – metoda vytvoří nové okno, natáhne do něj stránku s adresou zadanou jako první parametr metody, jméno okna je zadáno jako druhý parametr, dalším parametrem je seznam parametrů oddělených čárkami:
height = počet_pixelů
location [ = ( yes | no | 0 | 1 ) ]
menubar [ = ( yes | no | 0 | 1 ) ]
resizable [ = ( yes | no | 0 | 1 ) ]
scrollbars [ = ( yes | no | 0 | 1 ) ]
status [ = ( yes | no | 0 | 1 ) ]
toolbar [ = ( yes | no | 0 | 1 ) ]
width = počet_pixelů
Implicitně jsou hodnoty těchto parametrů nastaveny na no, pokud uvedeme pouze název parametru bez přiřazení hodnoty, nastavíme tím jeho vlastnost na yes:
var Nove_okenko = window.open("blank.html", "Nove",
"resizable, scrollbars, width=200, height=100")
/* program vytvoří okénko 200x100 pixelů s rolovacími lištami, myší lze měnit jeho velikost*/
- print( ) – metoda vytiskne obsah okna na tiskárně.
- prompt(řetězcový_výraz, řetězcový_výraz) – metoda zobrazí okno, do kterého je možné zadat krátký text. Prvním parametrem metody je nápověda, která je zobrazena v záhlaví okna, druhým parametrem je implicitní hodnota vstupu. Pokud klikneme Storno, je vracenou hodnotou null:
var Jmeno = prompt("Zadejte své jméno", "John Doe")
- releaseEvents(událost) – metoda určí oknu, aby zachycené specifikované události předávalo dále podle hierarchie zachytávání událostí.
window.releaseEvents(Event.MOUSEMOVE)
- resizeBy(číselný_výraz, číselný_výraz) – metoda změní rozměry okna tak, že posune pravý dolní roh okna o specifikovaný počet pixelů, pro provedení této akce je v některých případech třeba mít zápisové právo UniversalBrowserWrite:
window.resizeBy(-100, -100)
/* program zmenší okno o 100 pixelů svisle i vodorovně, poloha levého horního rohu zůstane zachována */
- resizeTo(číselný_výraz, číselný_výraz) – metoda změní rozměry okna tak, že přesune pravý dolní roh okna na specifikované souřadnice, pro provedení této akce je v některých případech třeba mít zápisové právo UniversalBrowserWrite:
window.resizeTo(600, 400)
/* program přesune pravý dolní roh na pozici 600 pixelů od levého okraje a 400 pixelů od horního okraje zobrazovací plochy */
- routeEvent(událost) – metoda pošle událost ke zpracování dalšímu objektu v hierarchii zachytávání událostí.
window.routeEvent(Event.MOUSEMOVE)
- scroll(číselný_výraz, číselný_výraz) – metoda nastaví obsah okna na pozici udanou parametry jako souřadnicemi x a y, levý horní roh HTML dokumentu odpovídá souřadnicím [0, 0]:
window.scroll(0,100)
/* program posune obsah okna na pozici 100 pixelů od horního okraje */
- scrollBy(číselný_výraz, číselný_výraz) – metoda posune obsah okno o specifikovaný počet pixelů:
window.scrollBy(0, 100)
/* program posune obsah okna o 100 pixelů směrem nahoru */
- scrollTo(číselný_výraz, číselný_výraz) – provede stejnou akci jako metoda scroll (použití doporučeno).
- setHotKeys(true | false) – metoda nastavuje povolení klávesových zkratek v oknech, která nemají menu, pro nastavení hodnoty je třeba mít zápisové právo UniversalBrowserWrite.
- setInterval(řetězcový_výraz, číselný_výraz) – metoda provede akci uvedenou jako první parametr vždy když uplyne počet milisekund uvedený jako druhý parametr metody, metoda vrací identifikátor, pomocí nějž lze akci zrušit metodou clearInterval:
setInterval("alert('Uplynulo 15 vteřin!')", 15000)
/* program každých 15 vteřin zobrazí hlášení, identifikátor je ztracen a tuto akci nepůjde zrušit*/
- setResizable(logický_výraz) – metoda umožní uživateli měnit velikost okna, pokud je parametrem true.
- setTimeout(akce, prodleva) – metoda naplánuje akci uvedenou jako první parametr (řetězec, například volání funkce) k vykonání po časové prodlevě uvedené v milisekundách jako druhý parametr. Metoda vrací identifikaci timeoutu, jíž lze použít v metodě clearTimeout:
var casovac = setTimeout("alert('Ahoj!')",3000)
/* program provede akci za 3 vteřiny, toto lze zrušit */
- setZOption(alwaysLowered | alwaysRaised | z–lock) – metoda nastaví zda okno bude stále pod nebo nad ostatními okny nebo bude ve stále stejné pozici.
- stop( ) – metoda zastaví právě probíhající natahování dat do prohlížeče.
Události generované objekty window
- dragdrop – událost nastane při přetažení objektu nad okno prohlížeče.
- load – událost nastane při natažení HTML dokumentu do okna.
- focus – událost nastane, vybereme–li okno.
function Vitej(){
alert("Vítejte v seanci prohlížeče!")
}
window.onfocus = Vitej
/* kdykoli zaměříme okno prohlížeče, zobrazí program zprávu */
- blur – událost nastane při zrušení vybrání okna.
- error – událost nastane, když JavaScript hlásí chybu při výpočtu nebo natahování stránky.
- move – událost nastane při změně pozice okna.
- resize – událost nastane při změně velikosti okna.
- unload – událost nastane při zavírání okna.
Objekt document
Objekty document reprezentují obsah oken prohlížeče nebo vrstev, nejčastěji tedy HTML dokumenty nebo obrázky či prostý text. Objekt document tak nejčastěji reprezentuje použití HTML značky <BODY>.
Vlastnosti objektů document
- alinkColor – vlastnost odpovídá atributu ALINK značky <BODY>:
document.alinkColor = "#0000FF"
- anchors – vlastnost obsahuje pole odkazů na objekty Anchor vytvořené značkou <A...> /ro/:
document.anchors[0]
/* odkaz na první kotvu v dokumentu */
- applets – vlastnost obsahuje pole odkazů na objekty Applet vytvořené značkou <APPLET...> /ro/.
- bgColor – vlastnost odpovídá atributu BGCOLOR značky <BODY>.
document.bgColor = "#FFFFF0"
- classes – vlastnost obsahuje pole odkazů na objekty Style, které lze využít uvedením atributu CLASS v HTML značkách.
- cookie(obsah_cookie) – vlastnost obsahuje tzv. cookie (vysvětleno dále).
- domain – vlastnost obsahuje název domény serveru, na kterém je dokument umístěn.
- embeds – vlastnost obsahuje pole odkazů na objekty vytvořené značkami <EMBED> /ro/.
- fgColor – vlastnost odpovídá atributu TEXT značky <BODY>.
- forms – vlastnost obsahuje pole odkazů na objekty Form vytvořené značkami <FORM> /ro/.
- height – vlastnost obsahuje výšku dokumentu v pixelech.
- ids – vlastnost obsahuje pole odkazů na objekty Style.
- images – vlastnost obsahuje pole odkazů na objekty Image vytvořené značkami <IMAGE> /ro/.
- lastModified – vlastnost obsahuje datum, kdy byl dokument naposledy změněn /ro/.
- layers – vlastnost obsahuje pole odkazů na objekty Layer vytvořené značkami <LAYER> nebo <ILAYER>.
- linkColor – vlastnost obsahuje hodnotu atributu LINK značky <BODY>.
- links – vlastnost obsahuje pole odkazů na objekty Link vytvořené značkami <A> s atributem HREF /ro/:
var Odkazu = document.links.length
alert("Dokument obsahuje " + Odkazu + " odkazů.")
/* program zobrazí počet odkazů v dokumentu */
- plugins – vlastnost obsahuje pole odkazů na objekty Plugin umístěné v dokumentu /ro/.
- referrer – vlastnost obsahuje adresu stránky, pomocí jejíhož odkazu byla aktuální stránka natažena /ro/.
- tags – vlastnost osahuje pole odkazů na objekty Style.
- title – vlastnost obsahuje jméno dokumentu uvedené ve značce <TITLE>, pokud není jméno uvedeno, je hodnotou vlastnosti title hodnota vlastnosti URL /ro/.
var Titulek = document.title
- URL – vlastnost obsahuje URL dokumentu /ro/.
- vlinkColor – vlastnost odpovídá atributu VLINK značky <BODY>.
- width – vlastnost obsahuje šířku dokumentu v pixelech.
Metody objektů document
Metody objektů document umožňují dynamicky vytvářet obsah dokumentu zobrazeného v okně prohlížeče.
- captureEvents(událost) – metoda určí dokumentu aby zachytával všechny události specifikovaného typu.
- close( ) – metoda uzavírá tvorbu dokumentu a zobrazí jej v okně prohlížeče:
document.close()
- contextual(ovlivňující_objekt_Style, ovlivněný_objekt_Style) – metoda umožní ovlivnit styl značky, jestliže se tato značka nachází uvnitř značky ovlivňující (použito u objektů Style):
document contextual(document.tags.H1,
document.tags.EM).color = "red"
/* cokoli bude psáno kurzívou a bude současně nadpisem 1.velikosti, bude psáno červenou barvou */
- getSelection( ) – metoda vrací text, který byl označen uživatelem.
- handleEvent(událost) – metoda umožňuje vyvolat ovladač specifikované události.
- open([MIME–typ]) – metoda otevírá dokument pro zápis. MIME–typ je řetězcový výraz, který udává formát vytvářeného dokumentu:
“text/html” – implicitní HTML formát
“text/plain” – prostý text, značky HTML se neinterpretují
“image/gif” – obrázek ve formátu GIF
“image/jpeg” – obrázek ve formátu JPEG
“image/x–bitmap” – obrázek ve formátu x–bitmap
Dalšími MIME–typy jsou identifikace formátů pro instalovaná rozšíření plug–in, která se pak starají o jejich interpretaci sama.
- releaseEvents(událost) – metoda určí dokumentu, aby zachycené specifikované události předával dále podle hierarchie zachytávání událostí.
- routeEvent(událost) – metoda pošle událost ke zpracování dalšímu objektu v hierarchii zachytávání událostí.
- write(řetězcový–výraz) – metoda zapíše do dokumentu hodnotu zadaného řetězcového_výrazu.
- writeln(řetězcový–výraz) – metoda zapíše do dokumentu hodnotu zadaného řetězcového_výrazu a přejde na novou řádku. Přechod na novou řádku je uskutečněn pouze ve zdrojovém textu dokumentu, nikoli v jeho zobrazení v prohlížeči:
var Nove = window.open("","","height=200, width=400")
Nove.document.open("text/plain")
Nove.document.write(
"<A HREF='http://www.seznam.cz'>Seznam</A>")
Nove.document.close()
/* program otevře další okno prohlížeče, ale značky HTML interpretuje jen jako prostý text: text–plain */
Události objektů document
- click – událost nastane při kliknutí tlačítka myši.
- dblclick – událost nastane při dvojitém kliknutí tlačítka myši.
- keydown – událost nastane při stisku klávesy.
- keypress – událost nastane při stisknutí klávesy.
- keyup – událost nastane při uvolnění klávesy.
- mousedown – událost nastane při stisknutí tlačítka myši.
- mouseup – událost nastane při uvolnění tlačítka myši.
Vlastnost cookie
Vlastnost cookie je další vlastností objektů document. Jde o jednoduchou řetězcovou vlastnost, která však prohlížeči umožňuje ukládat na straně klienta data trvanlivým způsobem, odtud název cookie – sušenka. Vlastnost cookie umožňuje manipulovat s daty mezi jednotlivými WWW stránkami, CGI skript na straně serveru může hodnotu cookie číst i zapisovat. Mimo to, že systém cookie byl navržen pro programátory CGI, je možné s hodnotami cookie manipulovat programově také pomocí JavaScriptu. Veškerá manipulace v JavaScriptu tak probíhá pomocí čtení a zápisu řetěcové hodnoty vlastnosti document.cookie
Hodnota cookie má následující strukturu:
název=hodnota
[;EXPIRES=datum_GMT]
[;DOMAIN=název_domény]
[;PATH=cesta]
[;SECURE]
Základem cookie je její povinný název, a povinná hodnota cookie, takže nejjednodušší zápis cookie může vypadat takto:
document.cookie = "heslo=pejsek"
Takový zápis vytvoří pouze dočasnou cookie, jejíž hodnota bude ztracena při ukončení prohlížeče. Další částí řetězce cookie je část EXPIRES, která značí dobu platnosti cookie, která je udána jako časový okamžik vyjádřený formátem GMT (univerzální čas), k jehož získání je možné použít metodu toGMTString( ) objektu Date:
var vyprseni=new Date("December 31,2000")
document.cookie='heslo=pejsek;EXPIRES=' +
vyprseni.toGMTString()
Pokud je třeba některou cookie odstranit, lze znovu nastavit její hodnotu EXPIRES na některý okamžik v minulosti.
Část řetězce cookie obsahující slovo DOMAIN udává rozsah platnosti cookie. Zde je možné specifikovat internetovou doménu, odkud bude hodnota cookie viditelná:
… ;DOMAIN=moje.cz; …
Takto nastavená cookie bude viditelná na všech stránkách domény moje.cz, jejichž umístění v doméně odpovídá nastavení v části PATH.
Část řetězcové hodnoty cookie PATH pak stejně určuje pro které dokumenty bude hodnota cookie přístupná na základě umístění dokumentu v cestě ve webové doméně:
… ;PATH=/novinky; …
Nastavená hodnota cookie je viditelná pro dokumenty uložené v moje.cz/novinky, cookie platí do 31. 12. 2000, název cookie je heslo a hodnotou je pejsek.
Poslední částí řetězce cookie je slovo SECURE, které, pokud je uvedeno, určuje, že při komunikaci se serverem bude cookie přenášena zabezpečeným spojením, implicitně není tato možnost použita.
Objekt Location
Objekty Location reprezentují adresy dokumentů natažených do oken prohlížečů, objekty jsou přístupné pomocí vlastnosti location objektů window. Natažení dokumentu do okna prohlížeče způsobíme jednoduše přiřazením nové hodnoty do vlastnosti location daného okna:
window.location = "www.seznam.cz"
Vlastnosti objektů Location
Každá z vlastností objektů Location reprezentuje některou část URL.
- hash – vlastnost reprezentuje kotvu v dokumentu, která může být součástí URL, začíná znakem “#”:
<A NAME="kotva">text_označený_kotvou</A>
<SCRIPT>
window.location.hash="kotva"
</SCRIPT>
<!-- program přesune obsah okna tak aby byl zobrazen text označený kotvou kotva -->
- host – vlastnost reprezentuje spojení hostname:port.
- hostname – vlastnost reprezentuje jméno hostitelského serveru a domény.
- href – vlastnost reprezentuje kompletní URL.
<FORM>
<INPUT TYPE="text" NAME="cislo" VALUE="21">
<INPUT TYPE="submit" VALUE="Odešli!">
</FORM>
<SCRIPT>
document.write('Hodnota vlastnosti <B>search</B>: ' +
window.location.search)
</SCRIPT>
<!-- program zobrazí hodnotu odeslanou pomocí formuláře -->
- pathname – vlastnost reprezentuje adresářovou cestu v URL.
- port – vlastnost reprezentuje číslo portu použitého pro komunikaci.
- protocol – vlastnost reprezentuje protokol, jehož specifikace je součástí adresy: http, ftp, file, mailto, news, gopher, javascript, about.
- search – vlastnost reprezentuje dotaz na server, který může být součástí URL, začíná znakem “?”:
Metody objektů Location
- reload([logický_výraz]) – metoda způsobí znovunatažení dokumentu do okna prohlížeče bez ohledu na nastavení cache paměti prohlížeče pokud má logický_výraz hodnotu true, pokud má logický_výraz hodnotu false, řídí se znovunatažení dokumentu podle konfigurace paměti cache prohlížeče:
window.location.reload(true)
- replace(řetězcový_výraz) – metoda způsobí natažení dokumentu s adresou specifikovanou jako parametr metody do okna prohlížeče a zároveň přepíše aktuální položku historie obsazení okna:
window.location.replace("http://www.seznam.cz")
Objekt History
Objekty History obsahují seznam adres dokumentů, které byly zobrazeny v daném okně. Historie obsazení okna dokumenty je přístupná přes vlastnost history příslušného objektu window, ve které je uložen odkaz na objekt History.
Vlastnosti objektu History
- current – vlastnost obsahuje URL aktuální položky historie obsazení okna /ro/, pro čtení této hodnoty je třeba mít čtecí právo UniversalBrowserRead.
- length – vlastnost obsahuje počet položek historie obsazení okna /ro/, pro čtení této hodnoty je třeba mít čtecí právo UniversalBrowserRead.
- next – vlasnost obsahuje URL další položky historie obsazení okna /ro/, pro čtení této hodnoty je třeba mít čtecí právo UniversalBrowserRead.
- previous – vlasnost obsahuje URL předchozí položky historie obsazení okna /ro/, pro čtení této hodnoty je třeba mít čtecí právo UniversalBrowserRead.
Metody objektu History
- back( ) – metoda způsobí natažení dokumentu, jehož adresa je v historii uložena na následující pozici.
<INPUT TYPE="button" VALUE="Zpět"
onClick="History.back()">
<!-- tlačítko odpovídá tlačítku Zpět v prohlížeči -->
- forward( ) – metoda způsobí natažení dokumentu, jehož adresa je v historii uložena na předchozí pozici.
- go(číselný_výraz | řetězcový_výraz) – metoda umožňuje natáhnout do okna dokument, jehož adresa je uložena v historii obsazení okna. Číselný výraz udává pořadí dokumentu v historii (0 způsobí znovunačtení aktuální stránky), pokud je zadán řetězcový výraz, hledá metoda go v historii nejbližší adresu, která obsahuje zadaný řetězec jako podřetězec:
History.go("seznam")
/* metoda přejde na již navštívenou stránku, jejíž adresa obsahuje slovo seznam */
Objekt navigator, MimeType a Plugin
Jediný existující objekt navigator popisuje konfiguraci prohlížeče, je přístupný pomocí vlastnosti navigator objektu window.
Vlastnosti objektu navigator
- appCodeName – vlastnost obsahuje kódové označení prohlížeče /ro/.
var Prohlizec = navigator.appCodeName
- appName – vlastnost obsahuje aplikační název prohlížeče /ro/.
- appVersion – vlastnost obsahuje platformu a verzi prohlížeče /ro/.
- language – vlastnost obsahuje 2 nebo 5 znaků určujících jazyk používaný prohlížečem /ro/:
var Jazyk = navigator.language
- mimeTypes – vlastnost obsahuje pole, jehož položky jsou odkazy na objekty MimeType reprezentující další typy souborů podporovaných prohlížečem /ro/.
- platform – vlastnost obsahuje značení platformy, na které prohlížeč běží /ro/:
var Platforma = navigator.platform
- plugins – vlastnost obsahuje pole, jehož položky reprezentují instalované plug–in součásti /ro/.
- userAgent – vlastnost obsahuje hodnotu, kterou prohlížeč používá k zastoupení uživatele v HTTP žádostech /ro/.
Metody objektu navigator
- javaEnabled( ) – metoda testuje, zda je povoleno provádění Javovských appletů, vrací logickou hodnotu:
var Java_povolena = navigator.javaEnabled()
- plugins.refresh(logická_hodnota) – metoda umožní použití nově instalovaných rozšíření plug–in a pokud je parametrem true, znovu načte dokument.
- preference(jméno_vlastnosti[, hodnota]) – metoda číst a nastavovat některé vlastnosti prohlížeče, které lze nastavit v menu Netscape Navigatoru, pro čtení těchto hodnot je třeba mít čtecí právo UniversalBrowserRead, pro zápid hodnot je třeba mít zápisové právo UniversalBrowserWrite.
- savePreferences( ) – metoda ukládá nastavení vlastností prohlížeče do souboru prefs.js, pro provedení této akce je třeba mít zápisové právo UniversalBrowserWrite.
- taintEnabled( ) – metoda testuje, zda je povoleno užívání bezpečnostních funkcí taint( ) a untaint( ):
var Taint_povoleno = taintEnabled()
Objekt MimeType
Objekt MimeType je objekt automaticky tvořený prohlížečem, popisující MIME typ (typ dat) rozpoznatelný prohlížečem. Objekty MimeType jsou dostupné pomocí pole mimeTypes, které je vlastností objektu navigator nebo Plugin.
Vlastnosti objektů MimeType
- description – vlastnost obsahuje řetězec popisu příslušného MIME typu /ro/:
var Popis = navigator.mimeTypes[0].description
- enabledPlugin – vlastnost obsahuje odkaz na objekt Plugin, který popisuje rozšíření (Plug–In), které je zodpovědné za zpracování příslušného MIME typu, obsahuje null, pokud žádné rozšíření není konfigurováno /ro/:
if(navigator.mimeTypes[0].enabledPlugin != null)
var Odpovedny_plugin =
navigator.mimeTypes[0].enabledPlugin.description
else
var Odpovedny_plugin = "Plug-in není instalován"
/* program uloží do proměnné Odpovedny_plugin název Plug-in instalovaného pro zobrazení prvního MIME-typu */
- suffixes – vlastnost obsahuje řetězec obsahující přípony souborů příslušného MIME typu /ro/:
var Pripony = navigator.mimeTypes[0].suffixes
- type – vlastnost obsahuje řetězec udávající jedinečné označení MIME typu (například “text/html” nebo “video/mpeg”) /ro/.
Objekt Plugin
Objekty Plugin jsou objekty automaticky tvořené prohlížečem, obsahující informace o rozšířeních instalovaných pro zpracování MIME typů. Objekt Plugin je zároveň pole odkazů na objekty MimeType, které rozšíření popisované příslušným objektem Plugin zpracovává.
Vlastnosti objektů Plugin
- description – vlastnost obsahuje řetězec popisu příslušného rozšíření /ro/.
- filename – vlastnost obsahuje řetězec názvu souboru rozšíření, jak je uloženo na disku /ro/:
var Soubor = navigator.plugins[0].filename
/* do proměnné Soubor je uloženo jméno souboru s prvním Plug-in */
- length – vlastnost obsahuje délku pole objektů MimeType, na které odkazuje příslušný objekt Plugin /ro/.
- name – vlastnost obsahuje řetězec názvu rozšíření /ro/.
Objekt event
Objekty event jsou objekty automaticky tvořené prohlížečem kdykoli nastane událost JavaScriptu, příslušný objekt event pak obsahuje vlastnosti popisující onu událost. Odkaz na objekt event je předáván jako parametr funkce ovladače události:
function ovladac_udalosti(udalost) {
}
window.onclick = ovladac_udalosti
Vlastnosti objektů event
- data – vlastnost obsahuje pole řetězců obsahujících URL objektů které vyvolaly událost DragDrop, pro čtení této hodnoty je třeba mít čtecí právo UniversalBrowserRead a pro zápis hodnoty je třeba mít zápisové právo UniversalBrowserWrite:
for(var i = 0; i<udalost.data.length; i++) {
akce s URL objektů
}
- height – vlastnost obsahuje výšku okna prohlížeče v pixelech, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite:
var Vyska_okna = udalost.height
- layerX – vlastnost obsahuje šířku vrstvy v pixelech při události Resize nebo vodorovnou pozici kurzoru myši na vrstvě, která událost generuje, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite.
- layerY – vlastnost obsahuje výšku vrstvy v pixelech při události Resize nebo svislou pozici kurzoru myši na vrstvě, která událost generuje, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite.
- modifiers – vlastnost obsahuje řetězec popisující, které funkční klávesy byly při události vyvolané myší nebo klávesou stisknuty (ALT_MASK, CONTROL_MASK, SHIFT_MASK nebo META_MASK) , pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite:
var Funkcni_klavesy = udalost.modifiers
- pageX – vlastnost obsahuje vodorovnou pozicici kurzoru myši vůči dokumentu, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite.
- pageY – vlastnost obahuje svislou pozici kurzoru myši vůči dokumentu, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite.
- screenX – vlastnost obsahuje vodorovnou pozici kurzoru myši na obrazovce, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite.
- screenY – vlastnost obsahuje svislou pozici kurzoru myši na obrazovce, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite.
- target – vlastnost obsahuje řetězec, jehož hodnotou je název prvku, který událost generoval, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite:
var Generoval = udalost.target
- type – vlastnost obsahuje řetězec, jehož hodnotou je typ události, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite.
- which – vlastnost udává buď pořadové číslo stisknutého tlačítka myši nebo ASCII kód stisknuté klávesy, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite:
var Tlacitko_mysi = udalost.which
- width – vlastnost obsahuje šířku okna prohlížeče v pixelech, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite.
- x – vlastnost obsahuje šířku prvku, který generuje událost Resize nebo vlastnost obsahuje vodorovnou pozici kurzoru myši na vrstvě, která událost generuje, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite.
- y – vlastnost obsahuje výšku prvku, který generuje událost Resize nebo vlastnost obsahuje vodorovnou pozici kurzoru myši na vrstvě, která událost generuje, pro zápis této hodnoty je třeba mít zápisové právo UniversalBrowserWrite.
Objekt Form, Reset, Submit a Hidden
Objekty Form reprezentují formuláře v HTML dokumentu vytvořené značkami <FORM...> a </FORM>, které jsou základním způsobem komunikace mezi klientem, u kterého je formulář zobrazen, a serverem. Formulář může obsahovat různé komunikační elementy: Button, Checkbox, fileUpload, Hidden, Password, Radio, Reset, Select, Submit, Text a Textarea pro zadávání dat do formuláře. Odeslání dat z formuláře na server je provedeno pomocí volání metody submit nad formulářem. Objekty Form jsou v JavaScriptu dostupné více způsoby:
- jako vlastnost objektu document, jméno vlastnosti odpovídá atributu NAME značky <FORM>.
document.jméno_formuláře
- jako prvek pole forms, které je vlastností objektů document, indexem prvku je buď číslo pořadí v poli forms nebo jméno formuláře dané atributem NAME značky <FORM...>:
document.forms[číselný_index]
document.forms[řetězcový_výraz]
Dostupnost ovládacích prvků formuláře
- jako vlastnost objektů Form, jméno vlastnosti odpovídá atributu NAME příslušné značky:
document.formulář.jméno_elementu
- jako prvek pole elements, které je vlastností objektů Form, indexem je buď číslo pořadí elementu v poli elements nebo jméno elementu dané atributem NAME příslušné značky:
document.formulář.elements[číselný_výraz]
document.formulář.elements[řetězcový_výraz]
Vlastnosti objektů Form
- action – vlastnost obsahuje URL serveru, kam jsou zaslána data při odeslání formuláře, odpovídá atributu ACTION značky <FORM>, pro uvedení mailto: je třeba mít právo UniversalSendMail:
var CGI_skript = formulář.action
- elements – vlastnost obsahuje pole odkazů na všechny komunikační elementy ve formuláři /ro/:
<FORM NAME="formular">
<INPUT TYPE="text" NAME="textik" VALUE="Ahoj!">
<INPUT TYPE="button" NAME="knoflik" VALUE="Klikni!">
</FORM>
<SCRIPT>
document.formular.elements[0].value = "Nazdar!"
var Jmeno_tlacitka = document.formular.elements[1].name
</SCRIPT>
<!-- program změní popisek prvního tlačítka na "Nazdar!" a do proměnné Jmeno_tlacitka vloží hodnotu popisku druhého tlačítka
-->
- encoding – vlastnost reprezentuje způsob kódování přenášených dat, odpovídá atributu ECTYPE značky <FORM>.
- length – vlastnost obsahuje délku pole ve vlastnosti elements objektu Form /ro/:
document.formulář.length ==
document.formulář.elements.length
- method – vlastnost reprezentuje způsob přenosu dat na server, implicitně jsou data přenášena jako dotazovací část URL (způsob GET), a nebo jsou data přenášena jako samostatný blok dat (způsob POST), odpovídá atributu METHOD značky <FORM>.
- name – vlastnost obsahuje jméno formuláře, odpovídá atributu NAME značky <FORM>.
- target – vlastnost obsahuje jméno okna, kde bude zobrazena odpověď serveru, odpovídá atributu TARGET značky <FORM>.
Metody objektů Form
- handleEvent(událost) – metoda umožňuje vyvolat ovladač specifikované události.
- reset – metoda způsobí obnovení počátečního stavu komunikačních elementů formuláře.
- submit – metoda způsobí zaslání dat z formuláře na server uvedený v atributu ACTION značky <FORM>.
<INPUT TYPE="button" VALUE="Odeslat data"
onClick="document.formular.submit()">
<!-- takto vytvoříme z normálního tlačítka umístěného ve formuláři odesílací tlačítko -->
Události generované objekty Form
- reset – událost nastane při kliknutí na tlačítko reset ve formuláři nebo při volání metody reset nad formulářem, implicitní reakcí je návrat stavu komunikačních elementů do počátečního stavu.
- submit – událost nastane při kliknutí na tlačítko submit ve formuláři nebo při volání metody submit nad formulářem, implicitní reakcí je zaslání dat z formuláře na server.
Objekty Reset, Submit, Hidden a FileUpload
Objekty Reset, Submit, FileUpload a Hidden jsou formulářové elementy přístupné jako automaticky přidávané prvky pole elements formuláře.
- Reset – objekt reprezentuje tlačítko ve formuláři, které při kliknutí vrací všechny ovládací prvky formuláře do původní polohy, v HTML tvořené značkou <INPUT TYPE=“reset”>.
- Submit – objekt reprezentuje tlačítko ve formuláři, které při kliknutí způsobí odeslání dat z formuláře na server, v HTML tvořené značkou <INPUT TYPE=“submit”>.
- Hidden – objekt reprezentuje neviditelný objekt ve formuláři užívaný k předávání některé konstantní hodnoty, v HTML tvořený značkou <INPUT TYPE=“hidden”>.
- FileUpload – objekt reprezentuje prvek ve formuláři sloužící k odeslání souboru na server, v HTML tvořený značkou <INPUT TYPE=“file”>.
Vlastnosti objektů Reset, Submit, Hidden a FileUpload
- form – vlastnost obsahuje jméno formuláře, ve kterém je prvek umístěn /ro/.
- name – vlastnost obsahuje jméno prvku, odpovídá hodnotě atributu NAME příslušné značky /ro/.
- type – vlastnost obsahuje typ prvku, odpovídá hodnotě atributu TYPE příslušné značky /ro/.
- value – vlastnost zrcadlí hodnotu atributu VALUE příslušné značky /ro/.
Metody objektů Reset, Submit a FileUpload
- blur( ) – metoda odstraní zaměření z příslušného objektu.
- click( ) – metoda umožňuje programově kliknout na tlačítko (pouze Reset a Submit).
- focus( ) – metoda zaměří příslušný objekt.
- handleEvent(událost) – metoda umožňuje vyvolat ovladač specifikované události.
- select( ) – metoda vybere celý obsah pole pro zadání cesty k souboru (pouze fileUpload).
Události generované objekty Reset, Submit a FileUpload
- blur – událost nastane, je–li pozornost přenesena na jiný objekt.
- change – událost nastane při změně obsahu pole (pouze fileUpload).
- click – událost nastane při kliknutí na tlačítko (pouze Reset a Submit).
- focus – událost nastane, je–li pozornost přenesena na tento objekt.
Objekt Button
Objekty Button reprezentují tlačítka ve formulářích v HTML dokumentu vytvořená pomocí značek <INPUT TYPE=“button” ...>. Odkaz na objekt Button reprezentující tlačítko je automaticky přidán do pole elements, které je vlastností příslušného formuláře.
Vlastnosti objektů Button
- form – vlastnost obsahuje odkaz na formulář, ve kterém je tlačítko umístěno /ro/.
- name – vlastnost obsahuje jméno tlačítka, odpovídá atributu NAME značky <INPUT>.
- type – vlastnost má hodnotu “button”, odpovídá atributu TYPE značky <INPUT> /ro/.
- value – vlastnost obsahuje popis tlačítka, odpovídá atributu VALUE značky <INPUT>.
Metody objektů Button
- blur( ) – metoda odstraňuje zaměření z tlačítka.
- click( ) – metoda umožňuje programově kliknout na tlačítko:
document.formulář.tlačítko.click()
- focus( ) – metoda zaměřuje tlačítko.
- handleEvent(událost) – metoda umožňuje vyvolat ovladač specifikované události.
Události generované objekty Button
- blur – událost nastane při ztrátě zaměření.
- click – událost nastane při kliknutí na tlačítko nebo volání metody click( ):
function kliknuti() {
alert("Někdo stisknul tlačítko!")
}
…
<FORM NAME="formular">
<INPUT TYPE = "button" NAME="tlacitko" VALUE="Tlačítko">
</FORM>
<SCRIPT>
document.formular.tlacitko.onclick = kliknuti
document.formular.tlacitko.click()
</SCRIPT>
- focus – událost nastane při získání zaměření.
- mousedown – událost nastane při stisknutí tlačítka myši.
- mouseup – událost nastane při uvolnění tlačítka myši.
Objekt Checkbox
Objekty Checkbox reprezentují zaškrtávací políčka ve formulářích v HTML dokumentu vytvořená pomocí značky <INPUT TYPE=“checkbox” ...>. Odkaz na objekt Checkbox je automaticky přidán do pole elements, které je vlastností příslušného formuláře.
Vlastnosti objektů Checkbox
- checked – vlastnost obsahuje logickou hodnotu, zda je zaškrtávač zaškrtnut:
var Zaskrtnut = document.formulář.zaškrtávač.checked
- defaultChecked – vlastnost obsahuje logickou hodnotu, zda byl použit atribut CHECKED příslušné značky <INPUT>.
- form – vlastnost obsahuje odkaz na formulář, ve kterém je zaškrtávač umístěn /ro/:
var Jmeno_formulare = document.formulář.zaškrtávač.form
- name – vlastnost obashuje jméno zaškrtávače, odpovídá atributu NAME značky <INPUT>.
- type – vlastnost má hodnotu “checkbox”, odpovídá atributu TYPE značky <INPUT> /ro/.
- value – vlastnost odpovídá atributu VALUE značky <INPUT>.
Metody objektů Checkbox
- blur( ) – metoda odstraňuje zaměření zaškrtávače.
- click( ) – metoda umožňuje programově kliknout na zaškrtávač.
- focus( ) – metoda zaměřuje zaškrtávač:
document.formulář.zaškrtávač.focus()
- handleEvent(událost) – metoda umožňuje vyvolat ovladač specifikované události.
Události generované objekty Checkbox
- blur – událost nastane při ztrátě zaměření.
- click – událost nastane při kliknutí myší na zaškrtávač.
- focus – událost nastane při získání zaměření.
Objekt Radio
Objekty Radio reprezentují přepínače ve formulářích HTML dokumentu vytvořené pomocí značek <INPUT TYPE=“radio”...>. Odkaz na objekt Radio je automaticky vložen do pole elements, které je vlastností příslušného formuláře, odkaz je ve skutečnosti pole objektů Radio, kde lze k jednotlivým objektům přistupovat pomocí číselného indexu, protože radiotlačítka vždy tvoří skupinu (stejná hodnota atributu NAME):
document.formulář.skupina_radiotlačítek[index]
Vlastnosti objektů Radio
- checked – vlastnost obsahuje logickou hodnotu, zda je radiotlačítko vybráno:
var Vybrano = document.formulář.radiotlačítko[0].checked
- defaultChecked – vlastnost obsahuje logickou hodnotu, zda použito atributu CHECKED v příslušné značce <INPUT>.
- form – vlastnost obsahuje odkaz na formulář, ve kterém je radiotlačítko umístěno /ro/.
- name – vlastnost obsahuje jméno radiotlačítka, odpovídá atributu NAME značky <INPUT>:
var Jmeno = document.formulář.radiotlačítko[0].name
- type – vlastnost má hodnotu “radio”, odpovídá atributu TYPE značky <INPUT> /ro/.
- value – vlastnost obsahuje popisek radiotlačítka, odpovídá atributu VALUE značky <INPUT> /ro/.
Metody objektů Radio
- blur( ) – metoda odstraňuje zaměření z radiotlačítka.
- click( ) – metoda umožňuje programově kliknout na radiotlačítko:
document.formulář.radiotlačítko[0].click()
- focus( ) – metoda zaměřuje radiotlačítko.
- handleEvent(událost) – metoda umožňuje vyvolat ovladač specifikované události.
Události generované objekty Radio
- blur – událost nastane při ztrátě zaměření.
- click – událost nastane při kliknutí myší na radiotlačítko.
- focus – událost nastane při získání zaměření.
Objekty Select a Option
Objekty Select a Option reprezentují výběrová pole a volby ve formulářích v HTML dokumentu vytvořená značkami <SELECT…> a <OPTION…>. Odkaz na objekty Select a Option je automaticky uložen do pole elements příslušného formuláře. Objekty Option (jednotlivé volby objektů Select) lze také tvořit dynamicky pomocí konstruktoru Option:
Option([text[, hodnota[, defaultSelected[, selected]]]])
například:
var Nova_volba = new Option("Jablko", 1)
Vlastnosti objektů Select
- form – vlastnost obsahuje odkaz na formulář, kde je objekt umístěn /ro/.
- length – vlastnost obsahuje počet voleb ve výběru, odpovídá počtu značek <OPTION> uvnitř značky <SELECT> /ro/:
var Počet_voleb = document.formulář.výběr.length
- name – vlastnost obsahuje jméno výběru, odpovídá hodnotě atributu NAME značky <SELECT>.
- options – vlastnost obsahuje pole objektů Option /ro/:
var Text_druhe_polozky =
document.formulář.výběr.options[1].text
/* proměnná obsahuje text 2. položky výběru */
- selectedIndex – vlastnost obsahuje index vybrazné položky:
var Index_vybrane_polozky =
document.formulář.výběr.selectedIndex
- type – vlastnost má hodnotu “select”, odpovídá atributu TYPE značky <SELECT> /ro/.
Vlastnosti objektů Option
- defaultSelected – vlastnost obsahuje logickou_hodnotu určující zda byla položka implicitně vybrána pomocí atributu SELECTED značky <OPTION>.
- index – vlastnost číselný index volby ve vlastnosti options objektu Select.
- length – vlastnost obsahuje počet voleb ve vlastnosti options objektu Select /ro/.
- selected – vlastnost obsahuje logickou hodnotu, zda je volba vybrána.
- text – vlastnost obsahuje text volby.
- value – vlastnost obsahuje hodnotu volby, odpovídá atributu VALUE značky <OPTION> /ro/.
Metody objektů Select
- blur( ) – metoda odstraní zaměření z výběrového políčka.
- focus( ) – metoda zaměří výběrové políčko.
- handleEvent(událost) – metoda umožňuje vyvolat ovladač specifikované události.
Události generované objekty Select
- blur – událost nastává, pokud se výběr stane neaktivním.
- change – událost nastává při změně vybrané položky.
- focus – událost nastává, pokud se výběr stane aktivním.
Objekty Text, Textarea a Password
Objekty Text, Textarea a Password reprezentují vstupní elementy formuláře textová řádka, textové pole a heslo, vytvořené značkami <INPUT TYPE=”text”>, <TEXTAREA> a <INPUT TYPE=“password”>. Objekty Text, Textarea a Password umožňují vkládání textu (text je u objektů Password zobrazován jako řada hvězdiček). Odkazy na objekty Text, Textarea a Password jsou automaticky ukládány do pole elements příslušného formuláře.
Vlastnosti objektů Text, Textarea a Password
- defaultValue – vlastnost obsahuje počáteční hodnotu elementu, odpovídá atributu VALUE značky <INPUT> nebo textu mezi značkami <TEXTAREA> a </TEXTAREA>.
- form – vlastnost obsahuje odkaz na příslušný formulář, ve kterém se objekt nalézá /ro/.
- name – vlastnost obsahuje jméno elementu, odpovídá atributu NAME příslušné značky.
- type – vlastnost značí typ elementu, odpovídá atributu TYPE příslušné značky /ro/.
- value – vlastnost určuje hodnotu zobrazenou v textové řádce nebo poli.
Metody objektů Text, Textarea a Password
- blur( ) – metoda odstraní zaměření z příslušného objektu:
- focus( ) – metoda zaměří příslušný objekt.
- handleEvent(událost) – metoda umožňuje vyvolat ovladač specifikované události.
- select( ) – metoda vybere celý obsah textové řádky nebo pole.
Události generované objekty Text, Textarea a Password
- blur – událost nastane, je–li pozornost přenesena na jiný objekt.
- change – událost nastane při změně obsahu (pouze Text a Textarea).
- focus – událost nastane, je–li pozornost přenesena na tento objekt.
- keydown – událost nastane při stisku klávesy (pouze Textarea).
- keypress – událost nastane při stisknutí klávesy (pouze Textarea).
- keyup – událost nastane při uvolnění klávesy (pouze Textarea).
- select – událost nastane, je–li vybrána některá část textu uvnitř elementu (pouze Text a Textarea).
Objekt Link a Anchor
Objekty Link reprezentují odkazy na jiné dokumenty HTML, v dokumentu definované značkami <A HREF=”…”…> a </A>. Objekty Link jsou dostupné pomocí pole odkazů na objekty Link, které je vlastností objektu document:
- indexem je pořadové číslo odkazu v dokumentu
document.links[číselný_výraz]
Vlastnosti objektů Link
- objekt Link má všechny vlastnosti objektu Location.
- target – vlastnost obsahuje jméno okna nebo rámu, kam bude natažen dokument specifikovaný atributem HREF značky <A>, odpovídá atributu TARGET značky <A>.
- text – vlastnost obsahuje text zobrazený jako odkaz mezi značkami <A> a </A>.
- x – vlastnost udává horizontální vzdálenost v pixelech od okraje dokumentu /ro/.
- y – vlastnost udává vertikální vzdálenost v pixelech od okraje dokumentu /ro/:
document.write("Odkaz na " + document.links[1].text +
" má souřadnice [" + document.links[1].x + ", " +
document.links[1].y + "].")
/* program zobrazí jméno odkazu a jeho souřadnice v pixelech vůči levému hornímu rohu okna prohlížeče */
Metody objektů Link
- handleEvent(událost) – metoda umožňuje vyvolat ovladač specifikované události.
Události generované objekty Link
- click – událost nastane při kliknutí na odkaz.
- dblclick – událost nastane při dvojitém kliknutí na odkaz.
- keydown – událost nastane při stisku klávesy.
- keypress – událost nastnane při stisknutí klávesy.
- keyup – událost nastane při uvolnění klávesy.
- mousedown – událost nastane při stisknutí tlačítka myši.
- mouseover – událost nastane, když se kurzor myši nachází nad odkazem.
- mouseout – událost nastane, když je kurzor myši přesunut z odkazu.
- mouseup – událost nastane při uvolnění tlačítka myši.
Objekt Anchor
Objekty Anchor reprezentují kotvy v HTML dokumentu vytvořené značkou <A> nebo pomocí JavaScriptové metody String.anchor( ), objekty Anchor jsou dostupné jako položky pole document.anchors (současně i document.links, jsou–li zároveň odkazy). Položky pole anchors lze ndexovat číslem nebo řetězcem obsahujícím jméno kotvy:
document.anchors[číselný_výraz]
document.anchors[řetězcový_výraz]
Vlastnosti objektů Anchor
- name – vlastnost obsahuje jméno kotvy, odpovídá atributu NAME značky <A> /ro/.
- text – vlastnost obsahuje text kotvy, odpovídá textu uvnitř značky <A> /ro/.
- x – vlastnost udává vodorovnou vzdálenost kotvy od levého okraje dokumentu /ro/.
- y – vlastnost udává svislou vzdálenost kotvy od horního okraje dokumentu /ro/.
Objekt Image
Objekty Image reprezentují obrázky umístěné do stránky značkami <IMG…> a jsou dostupné několika způsoby:
- pomocí jména uvedeného jako hodnota atributu NAME značky <IMG>.
document.jméno_obrázku
- pomocí řetězcového nebo číselného indexu v poli obrázků HTML dokumentu – images.
document.images[řetězcový_výraz]
document.images[číselný_výraz]
Vlastnosti objektů Image
- border – vlastnost udává šířku okraje obrázku v pixelech, odpovídá atributu BORDER značky <IMG> /ro/.
- complete – vlastnost obsahuje logickou hodnotu, zda byl obrázek natažen do dokumentu /ro/:
var Natazen = document.obrazek.complete
- height – vlastnost udává výšku obrázku, odpovídá atributu HEIGHT značky <IMG> /ro/.
- hspace – vlastnost udává velikost vodorovného odsazení od textu, odpovídá atributu HSPACE značky <IMG> /ro/.
- lowsrc – vlastnost obsahuje adresu předběžného obrázku, odpovídá atributu LOWSRC značky <IMG>.
- name – vlastnost obsahuje jméno obrázku, odpovídá atributu NAME značky <IMG> /ro/.
- src – vlastnost obsahuje adresu obrázku, přiřazením nové adresy do této vlastnosti docílíme změny obrázku, vlastnost odpovídá atributu SRC značky <IMG>:
document.obrazek.src = "obrazek.jpg"
- vspace – vlastnost udává svislé odsazení od textu, odpovídá atributu VSPACE značky <IMG> /ro/.
- width – vlastnost udává šířku obrázku, odpovídá atributu WIDTH značky <IMG> /ro/.
Metody objektů Image
- handleEvent(událost) – metoda umožňuje vyvolat ovladač specifikované události.
Objekt Image je možno vytvořit také voláním konstruktoru Image, jehož parametry jsou rozměry obrázku:
var Obrazek = new Image(100, 100)
Obrazek.src = "obrazek.jpg"
Takový obrázek není sice možné zobrazit na stránce a nelze s ním provádět žádné operace, ale vytvořením objektu Image je umístěn patřičný grafický soubor do cache paměti prohlížeče a pokud je pak tentýž obrázek zobrazován pomocí značky <IMG> v HTML dokumentu, není třeba grafický soubor přenášet znovu po síti.
Události generované objekty Image
- abort – událost nastane při přerušení natahování grafického souboru.
- error – událost nastane při chybě natahování grafického souboru.
- keydown – událost nastane při stisku klávesy.
- keypress – událost nastnane při stisknutí klávesy.
- keyup – událost nastane při uvolnění klávesy.
- load – událost nastane při dokončení natahování grafického souboru.
Objekt Style
Objekty Style reprezentují styl zobrazení prvků HTML zapisovaný pomocí JavaScriptové syntaxe jako hierarchie objektů Style, namísto speciální syntaxe kaskádových stylů (CSS). Objekty Style jsou dostupné jako prvky polí classes, ids a tags objektu document:
document.tags.H1.color = "red"
Jakákoli značka HTML tvoří v takovém zápisu objekt Style, jehož vlastnosti obsahují hodnoty popisující styl zobrazení příslušné značky. JavaScriptový zápis definice kaskádových stylů je možné vložit kromě značky <SCRIPT> i do značky <STYLE TYPE=“text/javascript”>:
<STYLE TYPE = "text/javascript">
document.tags.P.fontSize = "18pt"
document.tags.P.backgroundColor = "#C0C0C0"
document.tags.P.borderStyle = "outset"
document.tags.P.borderWidths(50,50,50,50)
</STYLE>
…
<P>Toto je text odstavce</P>
Objekty Style jsou přístupné také pomocí polí objektů Style, které jsou obsahem vlastností classes a ids objektu document. Styly zobrazení nastavené pomocí document.classes jsou pak použity v HTML značkách hodnotou jejichž atributu CLASS je jméno příslušné třídy stylů, styly nastavené pomocí document.ids pak tvoří výjimky z těchto tříd stylů (HTML prvky s atributem ID):
<STYLE TYPE="text/javascript">
document.classes.Ruzova.P.color = "pink"
document.ids.Specialni.fontSize = "18pt"
</STYLE>
…
<P CLASS="Ruzova">Růžový text odstavce</P>
<P CLASS="Ruzova" ID="Specialni">Velký růžový text odstavce</P>
Definice stylů nemusí být, stejně jako zdrojový text JavaScriptu, uložena v jednom souboru s HTML dokumentem:
<LINK REL="STYLESHEET" HREF="definice.css"
TYPE="text/javascript">
…
<P CLASS="Ruzova">Růžový text odstavce</P>
<P CLASS="Ruzova" ID="Specialni">Velký růžový text odstavce</P>
obsah souboru definice.css:
document.classes.Ruzova.P.color = "pink"
document.ids.Specialni.fontSize = "18pt"
Vlastnosti objektů Style
- align – vlastnost obsahuje řetězcovou hodnotu popisující zarovnání prvku (left, right, none).
- backgroundColor – vlastnost obsahuje řetězecovou hodnotu podkladové barvy prvku.
- backgroundImage – vlastnost obsahuje URL obrázku použitého jako pozadí prvku.
- borderBottomWidth – vlastnost obsahuje šířku spodního okraje prvku.
- borderColor – vlastnost obsahuje řetězcovou hodnotu barvy okraje prvku.
- borderLeftWidth – vlastnost obsahuje šířku levého okraje prvku.
- borderRightWidth – vlastnost obsahuje šířku pravého okraje prvku.
- borderStyle – vlastnost obsahuje řetězcovou hodnotu popisující styl okraje prvku (double, groove, inset, none, outset, ridge, solid).
- borderTopWidth – vlastnost obsahuje šířku horního okraje prvku.
- clear – vlastnost obsahuje řetězcovou hodnotu popisující styl obtékání prvku (left, right, both, none).
- color – vlastnost obsahuje řetězcovou hodnotu barvy textu prvku.
- display – vlastnost obsahuje řetězcovou hodnotu popisující styl zobrazení prvku (block, inline, list–item, none).
- fontFamily – vlastnost obsahuje řetězcovou hodnotu popisující seznam názvů fontů oddělených čárkou nebo název rodiny fontů (serif, sans–serif, cursive, monospace, fantasy).
- fontSize – vlastnost obsahuje velikost fontu písma prvku uvedenou v bodech, procentech nebo řetězcovými konstantami (xx–small, x–small, small, medium, large, x–large, xx–large, smaller, larger).
- fontStyle – vlastnost obsahuje řetězcovou hodnotu popisující řez písma prvku (normal, italic).
- fontWeight – vlastnost obsahuje hodnotu popisující řez písma prvku (normal, bold, lighter, bolder) nebo číselnou hodnotu.
- lineHeight – vlastnost obsahuje hodnotu popisující řádkování v počet_řádek, procentech, bodech nebo normal.
- listStyleType – vlastnost obsahuje řetězcovou hodnotu popisující styl odrážek v seznamech (disc, circle, square, decimal, lower–roman, upper–roman, lower–alpha, upper–alpha, none).
- marginBottom – vlastnost obsahuje hodnotu popisující mezeru pod prvkem vyjádřenou v bodech, procentech nebo auto.
- marginLeft – vlastnost obsahuje hodnotu popisující mezeru nalevo od prvku vyjádřenou v bodech, procentech nebo auto.
- marginRight – vlastnost obsahuje hodnotu popisující mezeru napravo od prvku vyjádřenou v bodech, procentech nebo auto.
- marginTop – vlastnost obsahuje hodnotu popisující mezeru nad prvkem vyjádřenou v bodech, procentech nebo auto.
- paddingBottom – vlastnost obsahuje hodnotu popisující množství místa mezi spodním okrajem prvku a obsahem prvku vyjádřenou v bodech nebo procentech.
- paddingLeft – vlastnost obsahuje hodnotu popisující množství místa mezi levým okrajem prvku a obsahem prvku vyjádřenou v bodech nebo procentech.
- paddingRight – vlastnost obsahuje hodnotu popisující množství místa mezi pravým okrajem prvku a obsahem prvku vyjádřenou v bodech nebo procentech.
- paddingTop – vlastnost obsahuje hodnotu popisující množství místa mezi horním okrajem prvku a obsahem prvku vyjádřenou v bodech nebo procentech.
- textAlign – vlastnost obsahuje řetězcovou hodnotu popisující zarovnání textu v prvku (left, right, center, justify).
- textDecoration – vlastnost obsahuje řetězcovou hodnotu popisující dekoraci textu v prvku (none, underline, line–through, blink).
- textIndent – vlastnost obsahuje hodnotu popisující odsazení první řádky textu vyjádřené v bodech nebo procentech.
- textTransform – vlastnost obsahuje řetězcovou hodnotu popisující transformaci textu (none, capitalize, uppercase, lowercase).
- whiteSpace – vlastnost obsahuje řetězcovou hodnotu popisující jak zobrazovat šířku bílých znaků (normal, pre).
- width – vlastnost obsahuje šířku prvku vyjádřenou v bodech, procentech nebo auto.
Metody objektů Style
- borderWidths(nahoře, vpravo, dole, vlevo) – metoda nastaví šířku okrajů prvku na specifikované hodnoty, metoda nastavuje hodnoty vlastností borderTopWidth, borderRightWidth, borderBottomWidth a borderLeftWidth objektu Style:
document.tags.P.borderWidths(50,50,50,50)
- margins(nahoře, vpravo, dole, vlevo) – metoda nastaví šířku mezer kolem prvku na specifikované hodnoty, metoda nastavuje hodnoty vlastností marginTop, borderRight, borderBottom a borderLeft objektu Style.
- paddings(nahoře, vpravo, dole, vlevo) – metoda nastaví šířku místa mezi okrajem prvku a jeho obsahem na specifikované hodnoty, metoda nastavuje hodnoty vlastností paddingTop, paddingRight, paddingBottom a paddingLeft objektu Style.
Objekt Layer
Objekty Layer reprezentují vrstvy v HTML dokumentu vytvořené značkami <LAYER> nebo <ILAYER>. Objekty Layer tvoří vlastní hierarchii objektů. Každý objekt Layer obsahuje svůj vlastní objekt document, který má všechny své obvyklé vlastnosti a metody, včetně vlastnosti layers, která obsahuje odkazy na vrstvy – potomky této vrstvy.
Objekt Layer lze vytvořit také dynamicky pomocí JavaScriptu voláním konstruktoru Layer, jehož prvním parametrem je šířka nové vrstvy a druhým, nepovinným parametrem je odkaz na již existující vrstvu, které bude nová vrstva potomkem (vrstvy lze dynamicky vytvářet až po skončení načítání stránky):
var potomek = new Layer(200, rodic)
Odkazy na objekty Layer jsou dostupné více způsoby:
- jako vlastnost objektu document, pojmenovaná hodnotou atributu ID příslušné HTML značky:
document.jméno_vrstvy
- jako prvky pole document.layers, číselným (pořadové číslo vrstvy) nebo řetězcovým (hodnota atributu ID příslušné HTML značky) indexem:
document.layers[pořadové_číslo_vrstvy]
document.layers["jméno_vrstvy"]
Příklad:
<LAYER ID="vrstva" TOP="100" LEFT="100"
WIDTH="100" HEIGHT="100" BGCOLOR="red">
</LAYER>
Vlastnosti objektů Layer
- above – vlastnost obsahuje odkaz na objekt Layer ležící nad příslušnou vrstvou /ro/:
var Lezi_nad = vrstva.above
- background – vlastnost obsahuje odkaz na objekt Image reprezentující obrázek podkladu vrstvy:
document.vrstva.background.src = "obrazek.jpg"
- below – vlastnost obsahuje odkaz na objekt Layer ležící pod příslušnou vrstvou /ro/.
- bgColor – vlastnost obsahuje řetězec popisující barvu podkladu vrstvy:
document.vrstva.bgColor = "green"
- clip.bottom – vlastnost obsahuje souřadnici spodního okraje viditelné plochy příslušné vrstvy:
document.vrstva.clip.bottom = 150
- clip.height – vlastnost obsahuje výšku viditelné plochy příslušné vrstvy:
document.vrstva.clip.height = 30
- clip.left – vlastnost obsahuje souřadnici levého okraje viditelné plochy příslušné vrstvy.
- clip.right – vlastnost obsahuje souřadnici pravého okraje viditelné plochy příslušné vrstvy:
document.vrstva.clip.right = 150
- clip.top – vlastnost obsahuje souřadnici horního okraje viditelné plochy příslušné vrstvy.
- clip.width – vlastnost obsahuje šířku viditelné plochy příslušné vrstvy.
- document – vlastnost obsahuje odkaz na objekt document, který je obsahem příslušné vrstvy /ro/:
document.vrstva.document.write("Ahoj!")
- left – vlastnost obsahuje souřadnici levého okraje vrstvy vůči vrstvě, ve které je příslušná vrstva umístěna.
- name – vlastnost obsahuje jméno vrstvy, odpovídá atributu ID značky <LAYER> /ro/.
- pageX – vlastnost obsahuje vodorovnou souřadnici levého horního rohu vrstvy vůči dokumentu:
var x_na_strance = document.vrstva.pageX
- pageY – vlastnost obsahuje svislou souřadnici levého horního rohu vrstvy vůči dokumentu.
- parentLayer – vlastnost obsahuje odkaz na objekt Layer nebo window, ve kterém je příslušná vrstva umístěna /ro/:
var Rodic = document.vrstva.parentLayer
- siblingAbove – vlastnost obsahuje odkaz na objekt Layer ležící nad příslušnou vrstvou a který leží ve stejné vrstvě jako příslušná vrstva /ro/:
document.vrstva.siblingAbove.parentLayer
je ekvivalentní:
document.vrstva.parentLayer
- siblingBelow – vlastnost obsahuje odkaz na objekt ležící pod příslušnou vrstvou a který leží ve stejné vrstvě jako příslušná vrstva /ro/.
- src – vlastnost obsahuje URL zdroje vrstvy, odpovídá atributu SRC značky <LAYER>:
document.vrstva.src = "stránka.html"
- top – vlastnost obsahuje souřadnici horního okraje vrstvy vůči vrstvě, ve které je příslušná vrstva umístěna.
- visibility – vlastnost obsahuje řetězec show, hide nebo inherit určující zda je vrstva viditelná, neviditelná nebo dědí viditelnost od vrstvy, ve které je umístěna:
document.vrstva.visibility = "hide"
- window – vlastnost obsahuje odkaz na objekt window, který příslušnou vrstvu obsahuje /ro/.
- x – vlastnost obsahuje vodorovnou pozici levého horního rohu vrstvy vůči vrstvě, ve které je příslušná vrstva umístěna:
var Posunuti_x = document.vrstva.x
- y – vlastnost obsahuje svislou pozici levého horního rohu vrstvy vůči vrstvě, ve které je příslušná vrstva umístěna.
- zIndex – vlastnost obsahuje číselné vyjádření pozice příslušné vrstvy nad vrstvami, které leží pod ní.
Metody objektů Layer
- captureEvents(typ_události) – metoda nastaví vrstvu aby zachytávala specifikované události.
- handleEvent(typ_události) – metoda vyvolá specifikovanou událost.
- load(zdroj_vrstvy, šířka_vrstvy) – metoda nahraje zdroj_vrstvy a nastaví novou šířku_vrstvy:
document.vrstva.load("zdroj.html", 150)
- moveAbove(vrstva) – metoda přemístí příslušnou vrstvu nad specifikovanou vrstvu:
document.vrstva.moveAbove(jiná_vrstva)
- moveBelow(vrstva) – metoda přemístí příslušnou vrstvu pod specifikovanou vrstvu.
- moveBy(x_pixelů, y_pixelů) – metoda přesune vrstvu o x_pixelů vodorovně a y_pixelů svisle:
document.vrstva.moveBy(10, 10)
- moveTo(x_pixelů, y_pixelů) – metoda přesune levý horní roh vrstvy na souřadnice x_pixelů vodorovně a y_pixelů svisle vrstvy, v níž se příslušná vrstva nachází.
- moveToAbsolute(x_pixelů, y_pixelů) – metoda přesune levý horní roh vrstvy na souřadnice x_pixelů vodorovně a y_pixelů svisle dokumentu, v němž se příslušná vrstva nachází:
document.vrstva.moveToAbsolute(150, 100)
- releaseEvents(typ_události) – metoda nastaví vrstvu tak, aby specifikované události předávala ke zpracování dalším objektům v objektové hierarchii.
- resizeBy(šířka, výška) – metoda posune pravý dolní roh o šířka pixelů doleva a výška pixelů nahoru:
document.vrstva.resizeBy(10, 10)
- resizeTo(šířka, výška) – metoda přesune pravý dolní roh tak, aby vrstva měla rozměry šířka, výška.
- routeEvent(typ_události) – metoda předá zachycenou událost dalšímu objektu v objektové hierarchii zpracovávání událostí.
Události generované objekty Layer
- blur – událost nastane, je–li pozornost přenesena z vrstvy jinam.
- focus – událost nastane, je–li pozornost přenesena na vrstvu.
- load – událost nastane při dokončení natahování obsahu vrstvy.
- mouseover – událost nastane, když se kurzor myši nachází nad vrstvou.
- mouseout – událost nastane, když je kurzor myši přesunut z vrstvy.
Objekt Area
Objekty Area reprezentují oblasti citlivé na kliknutí či přejezd myši, tvořené v HTML dokumentu značkami <MAP…> a <AREA>. Pro každou citlivou oblast vytvořenou značkou <AREA> je automaticky vytvořen objekt Area dostupný pomocí pole document.links, které obsahuje odkazy na všechny objekty Link v dokumentu.
Vlastnosti a metody objektů Area
Objekty Area mají všechny vlastnosti a metody shodné s objekty Link.
Události generované objekty Area
- dblclick – událost nastane při dvojitém kliknutí na citlivou oblast.
- mouseover – událost nastane při přesunu kurzoru myši nad citlivou oblast.
- mouseout – událost nastane při opuštění citlivé oblasti kurzorem myši.
Objekt Frame
Objekty Frame reprezentují rámy umístěné v okně prohlížeče vytvořené HTML značkami <FRAMESET> a <FRAME>. Rámy okna prohlížeče jsou však z pohledu objektového modelu prohlížeče zároveň objekty window. Objekty Frame (window) jsou dostupné pomocí pole frames, které je vlastností každého objektu window, objekty jsou dostupné přes číselný i řetězcový index vyjadřující jméno objektu (atribut NAME):
window.frames[číselný_výraz]
window.frames[řetězcový_výraz]
Objekt Applet
Objekty Applet jsou zvláštní objekty, protože implicitně nemají žádné vlastnosti ani metody, objekty Applet slouží pro spolupráci JavaScriptu s applety napsané v jazyce Java a objekty Applet tak dědí všechny veřejné vlastnosti a metody příslušného Java appletu, který v objektovém modelu prohlížeče reprezentují. Objekty Applet jsou dostupné přes odkazy uložené v poli ve vlastnosti document.applets, položky pole lze indexovat číselně nebo řetězcovým indexem vyjadřujícím jméno objektu (atribut NAME):
document.applets[číselný_výraz]
document.applets[řetězcový_výraz]