Model BOM

Objektový model prohlížeče

V objektovém programování je nutné si uvědomit, že prohlížeč je výchozím bodem programování. Model BOM vytváří stromovou strukturu objektů, z nichž mnohé nabízí programátorovi v JavaScriptu atributy a metody. Samotný prhlížeč je repreklzentován jediným objektem a to je objekt window. Objekt window je rodičovským objektem několika dalších objektů. K dceřinkým objektům objektu window není nutné přistupovat pomocí přefixu, ale k dceřiným objektům dceřiných objektů window, už ano. Např.: 

            //Není nutné přistupovat takto
            window.document  //Ale stačí pouze document
            //Je nutné přistupovat k podobjektům dceřiných objektů takto
            document.write

Události

V programování se události nepužívají pouze k funkcím formulářů, ale jsou i v mnoha jiných odvětvích. Události můžou vyvolat akci při stisknutí tlačítka, najetí na odkaz, přesunutím myši nad objekt či dokonce z objektu pryč.

Objekt window

Objekt window je globální objekt momentálně otevřeného okna v prohlížeče. Jelikož je objekt window globálním objektem, není nutné k jeho dceřiným objektům přistupovat pomoci přefixu, ale je možné přistupovat přímo, tak jak jsme si již ukázali u jeho metody alert(). Objekt window místo dceřiných objektů nabízí i atributy a metody viz. tabulky.

Atribut Popis
closed Po zavření okna je nastaven na hodnotu true
defaultStatus Používá se k nastavení textu ve výchozím stavu stavového řádku prohlížeče
name Název okna nastavený při prvním otevření
opener Odkaz na okno, které otevřelo toto okno
parent Odkázání na okno, které vytvořilo toto okno nebo je o jednu úroveň výše nad rámec
screenLeft Definuje pozici levého okraje na obrazovce uživatele
screenTop Definuje pozici horního okraje na obrazovce uživatele
status Pro nastavení textu zobrazovaného ve stavovém řádku, když uživatel přejede myší nad elementem
top Odkazuje se na rodičovské okno na nejvyšší úrovni
Metoda Popis
addEventListener Metoda pro obsluhu událostí podporována všemi kprohlížeči kromě IE.
attachEvent Metoda pro obsluhu události v IE.
blur Odstraní focus pro vstup z klávesnice daného objektu
focus Nastaví fokus pro vstup z klávesnice daného objektu
close Zavře okno prohlížeče
detachEvent Verze metory removeEventListener pro IE
removeEventListener Metoda pro odstranění obsluhy událostí pro všechny prohlížeče kromě IE
open Otevře okno
print Zavolá funkci tisku prohlížeče

Některé metody objektu window umožňují přesouvání a změnu velikosti okna. Tyto metody ukazuje tabulka níže:

Metoda Popis
moveBy Používá se pro přeusn okna na relativní pozici
moveTo Používá se pro přesun okna na absolutní pozici
resizeBy Používá se pro relativní změnu velikosti okna
resizeTo Používá se pro absolutní změnu velikosti okna

Objekt screen

Objekt screen ukazuje způsob jak získat informace o obrazovce uživatele. Tyto informace se můžou hodit například k tomu, abychom věděli jaké obrázky máme použít, jak velká stránka může být apod. Dobrý návrh CSS by měl však zvládnou všechny rozměry obrazovky. Dostupné atributy:

Můžete se prát jaký je rozdíl mezi atributy availHeight/availWidth a atributy height/width. Atributy availHeight/availWidth obsahují šířku a výšku obrazovky, ale bez hlavního panelu obrazovky a atributy height/width udávají skutečnou výšku a šířku obrazovky. Ukázka: 

            alert("Šířka obrazovky bez panelu: " + screen.availWidth);
            alert("Výška obrazovky bez panelu: " + screen.availHeight);
            alert("Šířka obrazovky: " + screen.width);
            alert("Výška obrazovky: " + screen.height);

Objekt navigator

Objekt navigator obsahuje několik atributů, které mohou pomoci při získání informací o prohlížeči uživatele.

Poznámka: objekt navigator se v minulosti používal za účelem vytvořit kompatibilní stránjky ve všech prohlížečích, ale poté se zjistilo, že ínformace získávané od uživatele lze velmi snadno podvrhnout např. Firefox má zásuvný modul snímž lze informace podvrhnou velmi snadno, takže doporučuji nespoléhat na plno této možnosti. Níže ukázka, která nám vypíše všechny atributy objektu navigator: 

            //Tuto funkci nastavíme na událost onload u body
            <script type="text/javascript">
            function Attributy() {
                    var telo = document.getElementsByTagName("body")[0];
                    for (var attribut in navigator) {
                        var element = document.createElement("p");
                        var text = document.createTextNode(attribut + ": " + 
                                                        navigator[attribut]);
                        element.appendChild(text);
                        body.appendChild(element);
                    }
            }
            <script>

Objekt location

Objekt location umožňuje přístup k aktuálnímu identifikátoru URI, včetně informací o použitém protokolu a dalších komponentách. Následující příklad opět vypíše všechny atributy objektu location: 

            //Funkci opět nastavíme na událost onload u body
            <script type="text/javascript">
                function Attributy() {
                    var telo = document.getElementsByTagName("body")[0];
                    for (var attribut in location) {
                        var element = document.createElement("p");
                        var text = document.createTextNode(attribut + ": " + 
                                                            location[attribut]);
                        element.appendChild(text);
                        body.appendChild(element);
                    }
                }
            <script>

Objekt history

Objekt history poskytuje možnosti pohybu zpět a vpřed historií navštívených stránek prohlížeče. Z bezpečnostních důvodů nepodporuje objekt history přímý přístup k indentifikátoru URI, ael procházení stránek umožňují metody back, forward a go.