24/25.3 WEB programiranje 3

Web browser u sebi sadrži skup integrisanih objekata pomoću kojih se može pristupiti strukturi HTML stranice iz JavaScript programa.  Ove objekte možemo podeliti u 3 grupe:

• BOM - Browser Object Model
• DOM - Document Object Model
  
• Globalni JavaScript objekti
  

BOM (Browser Object Model)

BOM sadrži objekte koji predstavljaju prozor web browser-a, odnosno tab koji je trenutno aktivan. Globalni objekat i ujedno objekat koji predstavlja prozor web browsera je objekat window.

Objekat window predstavlja prozor web browsera. Svi globalne promenljive, funkcije i JavaScript objekti automatski postaju deo objekta window.

Browser Object Model  (BOM) predstavlja niz objekata ugnježdenih u window, kojima pristupamo web browseru, ekranu, lokaciji i istoriji.

Kada se JavaScript izvršava u okruženju web browsera, dostupan mu je globalni window objekat, koji postoji za svaki tab, iframe i iskačući prozor. Sve HTML i JavaScript aktivnosti se odvijaju u okviru ovog objekta.

Ukoliko želimo da na stranici prikažemo neku poruku pomoću metode alert objekta window, možemo koristiti sledeća dva potpuno ravnopravna načina:

window.alert("Dobro jutro");
// ovo je isto što i 
alert("Dobro jutro");

DOM (Document Object Model)

DOM (Document Object Model) - predstavlja zapravo hijerhijski prikaz strukture web-stranice, onako kako je vidi web browser (misli se na HTML dokument).

DOM služi za prikaz toga koji se sve elementi nalaze na web stranici i gde se tačno na njoj nalaze. Ujedno predstavlja i interfejs za programiranje (API) kojim se JavaScript programima omogućava da komuniciraju sa HTML dokumentima i njihovim elementima.

Kao što znamo od ranije, HTML se sastoji od elemenata koji predstavljaju objekte koji međusobno stoje u određenom odnosu. Postoji određena hijerarhija između HTML objekata i ona je definisana standardom koji je propisan za HTML. Ono što DOM čini izuzetno važnim jeste mogućnost da se uz pomoć nekog programskog jezika (npr. JavaScript) manipuliše njegovim elementima, tako da se njima pristupa preko DOM-a, a nakon toga radi sa njima na željeni način.

Da bismo koristili DOM u JavaScriptu, ne moramo da zadajemo nikakve specijalne pozive ili naredbe..... Dovoljno je da samo jednostavno koristimo objekte DOM-a kao i sve druge objekte JavaScripta.

Zahvaljujući DOM modelu, JavaScript može da:

• dodaje, menja ili uklanja sve HTML elemente na strani (i njihove atribute)
• menja sve CSS stilove na strani
• reaguje na sve događaje na strani
  
• pravi nove događaje na strani

U nastavku je primer DOM-a, nacrtan kao hijerarhijska struktura. Ceo HTML dokument i svaki element u ovoj strukturi predstavljaju objekte.

DOM predstavlja HTML dokument kao stablo čvorova (node-ova). Svaki deo stranice (kao što su elementi, atributi i tekst) može se smatrati čvorom (node) u tom stablu.

DOM započinje od objekta document i dalje se po hijerarhiji grana na ostale objekte koji čine određeni dokument: ovde su to html element, a nakon toga su head i body, a oni se dalje granaju na niže elemente....

Manipulacija DOM-a je menjanje svojstava web stranice i elemenata koji se nalaze na njoj, pomoću Javascripta. Svaka izmena se odmah uživo prikazuje na stranici.

   // primer menjanja stila tela dokumenta (body)

   document.body.style.background = 'yellow';
   document.body.style.fontSize = '1.4em';

Za složeniju DOM manipulaciju koristimo selektore - tražimo elemente na osnovu neke oznake.

Pristup elementima DOM-a

Ako želimo da pristupimo bilo kojem elementu HTML stranice, uvek moramo da pozovemo objekat document.

Za pristup i manipulaciju HTML elementima koristićemo metode, od kojih su neke navedene u nastavku:

Sem metoda, koristićemo i propertije (svojstva), od kojih su neki navedeni u nastavku:

Iza obojenih delova teksta su primeri (u slikama)  :

Menjanje html-a (innerHTML)

Menjanje html-a (innerHTML) 2

Menjanje atributa elementa html-a

Menjanje stila HTML elementa

Pristup preko id-a

Pristup preko naziva klase

Pristup preko naziva Tag-a

Pristup preko CSS selektora.

Globalni JavaScript Objekti

U sklopu samog JavaScript-a postoje ugrađeni objekti sa svojim svojstvima i metodama, namenjeni da olakšaju programiranje. Navodimo samo neke od njih:

Ovi objekti sa “opremljeni” metodama potrebnim za rad sa odgovarajućim tipom podataka i zamišljeni su da olakšaju rad sa primitivnim tipovima. Kada se pojavi potreba za operacijom nad takvim primitivnim tipom, kompajler automatski “obmotava” prost tip u njegov “parnjak” objekat nakon čega su dostupne sve metode ugradjenog objekta.

Klikom na naziv objekta, otvoriće se stranica na W3Schools-u sa kompletnim objašnjenjem i sa primerima.

Ako želite, možete pogledati kompletnu listu svih objekata sa objašnjenjima i primerima na: https://www.w3schools.com/jsref/default.asp

...

LINKOVI :