Prvi koraci u Web DOM programiranju

Ovde imamo jednostavan slučaj kada želimo da promenimo formatiranje dva DIV bloka. Ono što nam je bitno je da su oba identifikovana pomoću id parametra kao prvi i drugi.

  <div id="prvi">
    Prvi DIV blok.
  </div>
  <div id="drugi">
    Drugi DIV blok.
  </div>

U JavaScript delu želimo da promenimo samo boju pozadine prvog bloka, unosom nove vrednosti u svojstvo backgroundColor podobjekta style koji postoji u svim HTML elementima. Pristupamo elementu identifikovanom kao "prvi" korišćenjem metoda getElementById() objekta document. Rezultat ovog metoda je referenca na taj element, i možemo odmah da koristimo njegova svojstva i metode.

  document.getElementById("prvi").style.backgroundColor = "black";

  var blok = document.getElementById("drugi");
  
  blok.style.fontWeight = "bold";
  blok.style.border = "2px solid red";
  blok.style.borderRadius = "10px";

Zašto smo onda radili drugačije za drugi blok? Tu smo mu pristupili na isti način, ali umesto da ga odmah menjamo, zapamtili smo referencu u promenljivoj blok. Tek onda smo koristili razna svojstva objekta style da mu promenimo izgled.

Upravo to "razna svojstva" je i razlog zašto smo radili na ovaj način - program je čistiji (i brži) ako prvo zapamtimo referencu, pa onda radimo sa HTML elementom, umesto da mu stalno pristupamo po identifikaciji. Ovaj način je uvek bolji kada sa istim elementom treba da obavimo više od jedne stvari.

Hajde da pokušamo da napravimo efekat koji se u CSS-u lako postiže pseudoklasom :hover, ali samo pomoću JavaScripta.

Element koji se menja kada pređemo mišem preko njega je DIV blok sa dve moguće klase (.neaktivan kada miš nije iznad njega i .aktivan kada jeste). Ove dve klase smo, naravno, ranije definisali u CSS-u.

Samom elementu smo dodali dva događaja - onMouseOver koji poziva funkciju pali() i onMouseOut koji poziva funkciju gasi(). Za obe funkcije se prosleđuje sam objekat nad kojim je nastao događaj (this - sam DIV blok).

Inicijalno, ovaj element ima klasu neaktivan, pošto je "ugašeno stanje" ono kako treba da izgleda na početku.

  <style>
    .aktivan {...}
    .neaktivan {...}
  </style>
  
  <div onmouseover="pali(this)" onmouseout="gasi(this)" class="neaktivan">
    Sadržaj DIV bloka...
  </div>

U JavaScriptu imamo deklarisane ove dve funkcije koje dobijaju parametar elem (to je onaj this iz poziva funkcije, odnosno elemenat koji je aktivirao događaj). Ove dve funkcije su jako jednostavne - sve što rade je da menjaju klasu zadatom elementu elem, tako što menjaju njegovo svojstvo className koje predstavlja njegovu klasu.

  function pali(elem) {
    elem.className = "aktivan";
  }

  function gasi(elem) {
    elem.className = "neaktivan";
  }

Zašto bi iko pri zdravoj pameti koristio ovakav način umesto pseudoklase :hover? Moguće je da kada pređemo mišem preko nekog elementa treba da promenimo izgled ne tog, već nekog drugog elementa, što bi moglo da nam bude teško ili čak nemoguće preko CSS-a. U tom slučaju, DOM programiranje priskače u pomoć!

Recimo da u HTML kodu imamo elemenat kome želimo da promenimo sadržaj i to kada kliknemo na neki drugi DIV element. Tada se poziva se funkcija brojac(), sa parametrom 'blok', što je u stvari identifikacija elementa koji se menja.

Svaki put kada kliknemo na taj DIV blok, u bloku koji se menja treba da nam se ispiše koliko puta smo to uradili.

  <div onclick="brojac('blok')">
    <p>Kliknite ovde.</p>
  </div>
  <div id="blok">
    <p>Ovaj sadržaj se menja.</p>
  </div>

U JavaScript odeljku se ovim bavi funkcija brojac(). Kao parametar ident joj se prosleđuje identifikacija elementa koji se menja.

  var broj = 0;
  
  function brojac(ident) {
    broj++;
    
    var tx = '<p class="kliknuto">';
    tx += 'Ovaj element je kliknut ' + broj + ' puta.';
    tx += '</p>';
    
    document.getElementById(ident).innerHTML = tx;
  }

U ovom slučaju smo odlučili da u lokalnoj promenljivoj tx "napravimo" ceo HTML kod koji želimo da ubacimo u željeni element. Da bi program bio pregledniji, dodajemo HTML u tx-u iz nekoliko delova. Operator += služi za "nadodavanje" na već postojeću vrednost. Stringovi koji predstavljaju novi HTML su označeni apostrofima, zato što unutar njih imamo i neke navodnike.

HTML koji se tako formira je pasus klase "kliknuto" i tekstom "Ovaj element je kliknut X puta", gde X predstavlja broj puta koliko smo kliknuli na element. Da bi se prebrojalo, koristimo globalnu promenljivu broj u kojoj čuvamo koliko puta smo kliknuli. Zašto ovo mora da bude globalna promenljiva, a ne lokalna? Prosto - lokalna promenljiva gubi vrednost čim se funkcija završi. Na početku funkcije se ovaj brojač uvek poveća za jedan (operator ++).

Na kraju, tako formiran sadržaj u promenljivoj tx ubacujemo, pomoću svojstva innerHTML, u DIV element kome smo pristupili metodom getElementById() objekta document. Kao parametar smo zadali promenljivu ident, u kojoj se u ovom slučaju nalazi tekst "blok", koji je originalno prosleđen funkciji brojac().

U sledećem primeru radimo sa slikom koja je identifikovana kao "ilustracija".

  <img id="ilustracija" src="neka-slika.jpg" width="150" height="340" />

Pošto ćemo isprobati više stvari, referencu na sliku ćemo smestiti u promenljivu slika. Tako nećemo morati svaki put da je "dovlačimo" sa getElementById().

  var slika = document.getElementById("ilustracija");
  
  slika.src = "druga-slika.jpg";  // promena same slike
  slika.width = 125;              // promena širine slike
  slika.style.width = "180px";    // promena CSS širine elementa

Najpre smo promenili samu sliku, korišćenjem svojstva src, a onda i širinu, pomoću svojstva width. Može da vas zbuni to što svaki element omogućava i promenu dimenzija pomoću CSS-a (podobjekat style). Ni slika nije izuzetak, s tim što se onda njena "width dimenzija" gleda kao "realna" veličina slike, a CSS dimenzija kao "uvećana/umanjena" varijanta. Primetite razliku između načina kako se navode vrednosti. Za svojstvo width se zadaje numerički podatak (broj), a za style.width tekst koji predstavlja CSS metriku.

Evo jednostavnog primera koji obuhvata i čitanje i promenu naziva dokumenta. Recimo da u HTML dokumentu imamo definisan neki naziv dokumenta, npr. "Potrebne stvari".

  <head>
    <title>Potrebne stvari</title>
    ...
  </head>

Pomoću JavaScripta možemo na taj naziv dodati neki prefiks, npr. "Ne". Napravićemo to tako da funkcioniše za bilo koji naziv dokumenta.

  document.title = "Ne" + document.title;

Kao što vidite, jako je jednostavno. Prvo kreiramo novi tekst koji se dobija spajanjem stringa "Ne" i naziva dokumenta kome pristupamo preko svojstva title objekta document (kako god da on glasi). Onda se taj novi tekst zadaje kao nova vrednost svojstva title.

Rezultat će u ovom slučaju biti "NePotrebne stvari".

Evo primera kako možemo da "isfoliramo" link na web stranici, bez pravog linka. U HTML delu imamo običan pasus, ali u njemu definisan događaj onclick, drugim rečima - šta se dešava kada korisnik klikne mišem na ovaj pasus.

To što se dešava je jedan-jedini poziv funkcije goWebnstudy().

  <p onclick="goWebnstudy()">
    WEBnSTUDY
  </p>

  function goWebnstudy() {
    location.href = "http://webnstudy.com";
  }

U JavaScript delu imamo deklaraciju same funkcije goWebnstudy(), koja je prilično jednostavna. Zadajemo novu vrednost svojstva href objekta location. Ta nova vrednost je URL na koji želimo da web čitač pređe. Efektivno, cela ova skalamerija je umesto običnog linka. Ovo je relativno beskoristan primer, pošto funkcija služi da se pozove uvek jedan te isti sajt.

Možda bi bilo bolje da koristimo parametar u pozivu funkcije i kroz njega odredimo koji URL treba da se otvori. Znači sada možemo napraviti i više ovakvih "lažnih linkova", s tim da svaki poziv funkcije prosleđuje drugačiji URL.

Primetite da smo koristili apostrofe za zadavanje URL-a, zato što je to tekstualni podatak, a poziv funkcije se već nalazi unutar navodnika. Da smo i URL naveli pod navodnicima, napravili bismo grešku - vrednost onclick parametra bi se prerano završila i glasila bi: "otvori(". Upravo zbog toga string literali u JavaScriptu mogu biti zadati pod navodnicima ili apostrofima - šta god nam u tom trenutku odgovara.

  <p onclick="otvori('http://webnstudy.com')">
    WEBnSTUDY
  </p>
  <p onclick="otvori('https://www.wikipedia.org')">
    Wikipedia
  </p>

U JavaScriptu se deklaracija funkcije samo malo menja. Funkcija sada ima parametar sajt kojim "hvata" zadati URL. Onda se href svojstvo menja tako što mu se zadaje vrednost zadatog parametra. Samim tim, web čitač može da "skoči" na bilo koju adresu, zadatu kao sajt.

  function otvori(sajt) {
    location.href = sajt;
  }

Ovo je jedan od najglupljih načina da se prave linkovi. Ovakav način je potpuno neopravdan sa stanovišta SEO prakse, pošto Internet pretraživači (poput Google-a) niti slede, niti indeksiraju ovakve "linkove". Sa druge strane, ako želite da sakrijete neki link od pretraživača i drugih botova, samo navalite.