Objekat window
Objekat window je najvažniji objekat DOM-a. Predstavlja sam web čitač i praktično sadrži sve ostale objekte. Toliko je važan da njegova svojstva, pod-objekte i metode možemo pozivati i bez navođenja window objekta.
Važni podobjekti
Objekat window sadrži podobjekte bez kojih ne možemo ni da zamislimo razvoj web aplikacije.
- document - predstavlja samu HTML stranicu i sve pripadajuće elemente
- location - objekat koji predstavlja URL stranice
- screen - objekat koji reprezentuje ekran na kome se nalazi web čitač
- navigator - objekat aplikacije web čitača - daje osnovne informacije o čitaču, platformi i pruža pristup nekim dodatnim mogućnostima
- history - objekat istorije posećenih stranica
- console - konzola za ispis/debugovanje programa
Mogućnosti objekta window
Ovde ćemo samo pomenuti neke od najznačajnijih mogućnosti koje nam pruža ovaj objekat. Svakom od ovih tema ćemo se posebno baviti.
Elementi prozora
Objekat window pre svega pruža neke mogućnosti kontrole nad samim programom. Naravno, zbog bezbednosti i udobnosti samih korisnika, nemoguće je vršiti akcije van njegovog znanja ili odobrenja. Npr. nemoguće je štampati dokument bez prikaza dijaloga za štampu. Nemoguće je prebaciti prozor u fullscreen režim bez obaveštavanja korisnika.
| name | Postavljanje ili čitanje naziva prozora web čitača. |
| menubar | Meni web čitača. |
| toolbar | Toolbar u web čitaču. |
| personalbar | Izdvojeni linkovi. |
| locationbar | Polje sa URL adresom. |
| scrollbars | Scroll-barovi. |
| statusbar | Statusna linija na dnu prozora. |
| status | Postavljanje ili čitanje teksta u statusnoj liniji web čitača. |
| open() | Otvaranje novog prozora. |
| openDialog() | Otvaranje dijalog prozora - neki elementi prozora neće biti prikazani. |
| opener | Objekat prozora iz koga je otvoren trenutni prozor. |
| close() | Zatvaranje trenutnog prozora. |
| stop() | Zaustavljanje učitavanja. |
| blur() | Skida fokus sa prozora. |
| focus() | Fokusira prozor web čitača.. |
| print() | Štampa dokument. |
| find() | Pronalazi zadati string u dokumentu. |
| getSelection() | Pristup selektovanom delu dokumenta u obliku selection objekta. |
Dijalozi
Dijalozi nam pružaju mogućnost da otvorimo prozorčić sa porukom - obaveštenjem ili pitanjem za korisnika.
| alert() | Najjednostavniji prozorčić sa porukom. |
| confirm() | Prozorčić sa porukom koja zahteva potvrdu ili poništavanje (pojavljuju se i dva dugmenceta). |
| prompt() | Prozorčić u kome se zahteva da korisnik unese neki podatak. |
Tajmeri
Tajmeri omogućuju da zadamo neki vremenski period (u milisekundama) i šta će se dogoditi kada taj period istekne. Na taj način možemo zadavati animaciju, razne brojače i merače vremena ili prosto "pauzirati" izvršavanje programa.
| setTimeout() | Zadavanje jednokratnog tajmera. Po isteku vremenskog perioda izvršava se zadata callback funkcija. |
| clearTimeout() | Ukidanje tajmera pre isteka vremena. |
| setInterval() | Zadavanje ponavljajućeg tajmera. Događaj "opaljuje" u jednakim vremenskim intervalima. |
| clearInterval() | Ukidanje ponavljajućeg tajmera. |
| requestAnimationFrame() | Specijalan tip tajmera, pogodan za animaciju. Ne zadajemo vremenski period već "opaljuje" kada je web čitač spreman da osveži prikaz. |
Frejmovi
Frejmovi (okviri) su posebno značajni - suštinski, to je nezavisna web stranica koja se prikazuje u okviru dokumenta.
| top | Pristup najvišem prozoru u hijerarhiji. |
| parent | Nadređeni prozor. |
| frameElement | Frejm element u nadređenom prozoru koji sadrži trenutnu web stranicu. |
| frames | Lista frejmova koji su direktno podređeni trenutnom frejmu. |
| length | Broj frejmova unutar trenutnog web dokumenta. |
Dimenzije
Objekat window nam omogućava da kontrolišemo poziciju web čitača i njegovu veličinu na ekranu. Takođe možemo zadati fullscreen prikaz, saznati dimenzije prikaza i pročitati elemente stila za svaki element stranice.
| screenX | X koordinata prozora web čitača na ekranu. |
| screenY | Y koordinata prozora web čitača na ekranu. |
| moveTo(x,y) | Pomeranje prozora web čitača na tačno određene koordinate ekrana. |
| moveBy(dX,dY) | Pomeranje prozora web čitača za zadati broj piksela po horizontali i vertikali. |
| outerWidth | Ukupna širina prozora web čitača. |
| outerHeight | Ukupna visina prozora web čitača. |
| resizeTo(sir,vis) | Promena veličine prozora na zadatu širinu i visinu. |
| resizeBy(dSir,dVis) | Promena veličine prozora za zadati broj piksela po horizontali i vertikali. |
| fullScreen | Indikator da li je prikaz u fullscreen-u ili ne. |
| minimize() | Minimizovanje prozora web čitača. |
| innerWidth | Širina prikaza koja uključuje i vertikalni scrollbar. |
| innerHeight | Visina prikaza koja uključuje i donji scrollbar, ako ga ima. |
| devicePixelRatio | Odnos između fizičkih piksela na uređaju i piksela prikaza. |
| getComputedStyle(element) | Vraća objekat CSS deklaracije stila iz koga se mogu pročitati realne vrednosti stila. |
| getDefaultComputedStyle(element) | Isto kao prethodni metod, s tim što vraća CSS stil kakv bi element imao u čistom HTML-u. |
Kontrola scrollovanja
Dokument obično ne može da se vidi ceo unutar prozora web čitača i korisnik ga može pomerati korišćenjem scrollbarova sa leve i donje strane dokumenta. Dokument takože možemo scrollovati i programski iz JavaScripta.
| scrollX | Za koliko je dokument pomeren (scrollovan) po horizontali. |
| scrollY | Za koliko je dokument pomeren po vertikali. |
| scrollMaxX | Za koliko maksimalno može da se scrolluje dokument po horizontali (širina dokumenta minus širina prikaza). |
| scrollMaxY | Za koliko maksimalno može da se scrolluje dokument po vertikali (visina dokumenta minus visina prikaza). |
| scroll(x,y) | Scrolluje dokument na zadate koordinate. |
| scrollTo(x,y) | Scrolluje dokument na zadate koordinate. Isto kao scroll() |
| scrollBy(dX,dY) | Scrolluje dokument za zadati broj tačaka po horizontali i vertikali. |
| scrollByLines(num) | Scrolluje dokument za zadati broj linija naniže (ili naviše ako se zada negativna vrednost). |
| scrollByPages(num) | Scrolluje dokument za zadati broj "stranica" naniže (ili naviše). |
Svakoj od tema koje smo ovde samo ukratko predstavili, posvetićemo potrebnu pažnju.
Primer
Primer korišćenja window objekta.
alert("Poruka koja se prikazuje u prozorčiću.");