Uvod
Pomenuli smo u prvom članku uvodnog serijala o web dizajnu da HTML i CSS nisu jedini jezici koji se koriste u kreiranju internet stranica i da se pored pored pomenutih jezika koristi još i jezik JavaScript, kome do sada nismo posvećivali pažnju (a naravno i mnogi drugi jezici).
Članak koji je pred Vama, posvećujemo upravo JavaScript-u, a, da bismo najbolje razumeli ovaj jezik, razmotrićemo i način na koji JavaScript pristupa strukturi HTML elemenata.
Neko manje upućen bi možda rekao da se JavaScript povezuje direktno sa HTML tekstom i - ne bi baš bio u pravu. JavaScript zapravo obavlja operacije nad strukturom podataka koja nastaje iz HTML koda pri učitavanju HTML dokumenta u browser, ali - nije obična niska znakova (za razliku od HTML-a). Ova struktura nosi naziv Document Object Model, ili skraćeno - DOM.
Document Object Model (DOM)
U uvodnom članku serijala o web dizajnu, naveli smo HTML kao osnovni jezik koji se koristi u izradi internet stranica i njegovo svojstvo da sadržaj stranica definiše preko teksta (niza znakova), međutim, ne bi bilo praktično da sadržaj stranice ostane običan tekst po učitavanju u browser.
Ako bi HTML tekst zadržao svoj izvorni tekstualni oblik (da ne govorimo o tome da je veliko pitanje kako bi se uopšte stranice "iscrtavale" u programima za pregled na ovaj način), svaki put kada želimo da pristupimo nekom elementu stranice, morali bismo ponovo da "prolazimo" kroz ceo tekst (makar u najgorem slučaju), a budući da se elementima pristupa često (na nekim sajtovima i više desetina ili stotina puta), nije teško zaključiti da ovakav pristup (kao što smo već naveli) nije ni malo praktičan.
Umesto učestalog "prečešljavanja" niske znakova koja predstavlja HTML kod, browseri kreiraju specijalizovano stabla koje beleži strukturu i sadržaj stranice:
Kada program za pregled internet sadržaja (Mozilla, Chrome, Opera ....) primi sadržaj HTML dokumenta, dolazi do kreiranja stabla u čijem je korenu čvor koji predstavlja sam dokument. Odmah ispod, nalazi se čvor koji predstavlja HTML sadržaj dokumenta, a direktno ispod njega, čvorovi koji predstavljaju tagove "head" i "body" i tako redom, do nižih nivoa hijerarhije, to jest, do čvorova koji nemaju svoju "decu", odnosno, predstavljaju "listove" ovakvog stabla. Takođe, svakom čvoru, osim "dece" (koja postoje ili ne postoje), pripisan je i sadržaj. Naravno, ukoliko postoji.
Da bismo ovo što bolje razumeli, razmotrićemo sledeći jednostavan HTML kod ....
<!DOCTYPE html>
<html>
<head>
<title>DOM Struktura</title>
<meta charset='UTF-8'>
<link rel='stylesheet' href='stil.css'/>
</head>
<body>
<h1>DOM Struktura</h1>
<p>
Prvi pasus
</p>
<p>
Drugi pasus
</p>
</body>
</html>
.... i DOM stablo koje nastaje iz ovakve HTML strukture:
Ovakvo stablo sadrži celokupnu strukturu dokumenta, tekstualni sadržaj svih tagova i vrednosti svih atributa. Ali, što je mnog važnije, ovakva struktura omogućava brži i efikasniji pristup elementima nego što bi to bio slučaj sa običnim HTML tekstom.
Programski jezik koji tipično obavlja zadatak pristupa elementima unutar DOM stabla i obavljanja različitih operacija nad njima je JavaScript (da ponovimo, nema veze sa popularnim jezikom Java), jedan od jezika koij čine "sveto trojstvo" Internet jezika.
JavaScript
JavaScript je skriptni jezik koji, preko DOM modela, omogućava pristup elementima stranice, njihovu izmenu / obradu, kao i druge zahvate (povezivanje sa sistemskim resursima i slično).
Kada kažemo da je u pitanju skriptni jezik, mislimo na njegovu osobinu da se izvršava "instrukciju-po-instrukciju" (onda kada zatreba), za razliku od programskih jezika kakvi su recimo C i C++, kod kojih se napisani programski kod prvo kompajlira, posle čega se kreira izvršna datoteka.
Naravno, JavaScript sadrži i kontrolne strukture kakve srećemo u drugim programskim jezicima (matematički operatori, operatori poređenja, uslovne naredbe i petlje, if, while, for, kao i mnogo šta još), odnosno preciznije, ima gotovo istovetne kontrolne strukture kao programski jezik C (od koga je osnovna struktura jezika i preuzeta).
JavaScript je izuzetno popularan programski jezik, koji ima ogromnu podršku u vidu biblioteka i drugih dodataka.
Da bismo mogli koristiti JavaScript, povezaćemo HTML dokument sa JavaScript dokumentom (JS dokument je, kao i HTML i CSS dokumenti koji smo do sada koristili, takođe običan tekstualni dokument, sa ekstenzijom "js") preko "script" tagova:
<script src='skripta.js'></script>
(JavaScript kod možemo pisati i unutar script tagova, ali, koristićemo, kao i sa CSS-om, elegantniji pristup koji podrazumeva da je JS kod zapisan u zasebnu datoteku.)
Tagove "script" smestićemo, za potrebe primera u ovom članku, unutar body tagova - posle svih ostalih sadržaja (videćemo uskoro i zašto), dok je drugo uobičajeno mesto za smeštanje script tagova kojima se HTML dokument povezuje sa java scriptom odeljak "head" (naravno, objasnićemo i taj pristup).
Ukoliko unutar JS dokumenta koji smo naveli, unesemo sledeći programski kod
document.write("Dobar dan!");
.... nećemo se previše "usrećiti", budući da će JavaScript poništiti strukturu našeg dokumenta, ali ćemo nešto odmah uvideti i naučiti (nešto što smo već nagovestili): JavaScript ima direktan pristup DOM strukturi.
U našem slučaju, problem je bio u tome što smo prisupili korenu stabla (document) i, budući da smo upisali novi sadržaj (preko komande za upis write) - praktično smo postojeći sadržaj poništili!
Dakle - moramo biti precizniji.
Pristup DOM elementima preko id-a (getElementById)
Verovatno najkorišćeniji način pristupa elementima podrazumeva da elemente potražujemo preko pripisanih id-ova. Budući da naši elementi nemaju pripisan id, to je prvo što ćemo prepraviti:
<body>
<h1>DOM Struktura</h1>
<p id='prvi_pasus'>
Prvi pasus
</p>
<p id='drugi_paus'>
Drugi pasus
</p>
</body>
.... pri čemu će se i DOM struktura takođe promeniti (prikazujemo samo delimičnu strukturu):
Sada možemo pristupiti (na primer) prvom pasusu:
document.getElementById("prvi_pasus").innerHTML = "Dobar dan! :) Ovo je prvi pasus.";
Koristili smo u svemu svojstvo innerHTML i zaista, ono što unosimo je HTML kod
Da bismo to što bolje razumeli, razmotrićemo jedan jednostavan primer, preko koga ćemo se upoznati sa kontrolnim strukturama JavaScript jezika i upotrebom promenljivih.
Kontrolne strukture JavaScript jezika i globalne promenljive (var)
Pre nego što se upoznamo sa navedenim, dodaćemo u dokument "stil.css" (da vas podsetimo, već smo naveli link tag koji poziva upravo dokument "stil.css"), sledeći CSS kod:
.plavi_pasus {
width: 120px;
height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #7788ee;
color: #fff;
font-family; Arial, sans-serif;
font-size: 18pt;
margin: 0 12px 0 0;
}
.... posle čega se možemo vratiti na JavaScript i uneti sledeće izmene:
var i;
var brojPasusa = 4;
var sadrzajPasusa = "";
for(i = 1; i <= brojPasusa; i++) {
sadrzajPasusa += "" + i + "\n";
}
document.getElementById("prvi_pasus").innerHTML = sadrzajPasusa;
Kao što možete videti, JavaScriptu ne podrazumeva navođenje tipova podataka (da, znamo, deluje pomalo "zabrinjavajuće" pri prvom susretu), već, umesto toga, program sam određuje tip promenljive (koja se deklariše preko rezervisane reči "var"), najčešće u skladu sa prvom dodelom ("ipod haube", promenljive svakako jesu "intovi", "float-ovi", "char-ovi" i slično, ali, mi nemamo direktan uticaj na to).
Sledeće što možemo zapaziti je "liberalno" povezivanje string konstanti (običnog teksta koji smo mi sami ispisali) i vrednosti promenljivih brojevnog tipa koje se u toku izvršavanja JS-a pretvaraju u tekst. Mislimo pri tom na ovaj odeljak:
sadrzajPasusa += "<div class='plavi_pasus'>" + i + "</div>\n";
.... i na korišćenje vrednosti promenljive i koja se u svakoj iteraciji for petlje uvećava za 1 i čija se vrednost pretvara u tekst (naizgled je isto, ali, broj 1 i tekst "1", koji označava taj broj, su podaci koje se zapisuju na potpuno drugačiji način) i dodaje unutar div elemenata - koji se na kraju smeštaju unutar prvog pasusa.
Ovakav JS kod funkcioniše, ali, pokreće se uvek (i obavezno) pri svakom učitavanju stranice, a to možda nije ono što želimo
Događaji (events), funkcije i lokalne promenljive (let)
Ukoliko želimo da se JS kod izvršava pod nekim drugim okolnostima (a ne isključivo pri pokretanju stranice, kao do sada), koristićemo drugi pristup.
Ako recimo želimo da pokretanje JS koda bude povezano sa klikom na određeno dugme, kreiraćemo dugme i usmeriti ga da prati klikove:
<body>
<p>
Prvi pasus
</p>
<p>
Drugi pasus
</p>
<button onclick='dodavanjePasusa()'>KLIK</button>
</body>
Preko ovako zapisanog koda, dugme pozva JavaScript funkciju "dodavanjePasusa", pri svakom kliku.
Da bi takvi klikovi imali pravog smisla (da bi se nešto zapravo dešavalo "na klik"), unutar JS-a ćemo definisati navedenu funkciju i u telo funckije premestiti celokupan kod iz prethodnog JS odeljka:
function dodavanjePasusa() {
let i;
let brojPasusa = 4;
let sadrzajPasusa = "";
for(i = 1; i <= brojPasusa; i++) {
sadrzajPasusa += "" + i + "\n";
}
document.getElementById("prvi_pasus").innerHTML = sadrzajPasusa;
}
Ovoga puta, koristili smo za deklaraciju promenljivih rezervisanu reč "let" (umesto "var"), što znači da smo deklarisali lokalne promenljive funkcije dodavanjePasusa, dok smo u prethodnom slučaju, kada smo za deklaraciju koristili rezervisanu reč "var", deklasrisali globalne promenljive (promenljive koje se mogu koristiti u svim funkcijama).
Pozicija script tagova unutar HTML dokumenta
Pozicija script tagova unutar HTML dokumenta ima uticaja na korektnost izvršavanja JS koda. Da smo na početku script tagove smestili unutar head tagova, JavaScript kod bi bio učitan odmah, a budući da je zapisan izvan funkcija, bio bi i pokrenut odmah (!), što bi značilo da sledeća naredba ....
document.getElementById("prvi_pasus")
.... praktično traži element koji ne postoji!
Ukoliko se kod nalazi unutar definicija funkcija, neće biti pokrenut pri učitavanju skripte navedene u script tagovima, tako da sada u našem primeru (ako žalimo), script tag u HTML dokumentu možemo smestiti unutar head tagova.
Za kraj, pogledaćemo i ostale načine pristupa elementima DOM stabla.
Pristup DOM elementima preko CSS selektora (querySelector i querySelectorAll)
Sledeći prograsmki kod ....
document.querySelectorAll("div > img.slika_sa_okvirom")
.... tražiće unutar DOM stabla, sve img tagove sa klasom "slika_sa_okvirom", koji se nalaze direktno unutar div tagova. Međutim, budući da takvih elemenata može biti više, pristup nije jednostavan kao u slučaju kada smo element tražili preko id-a.
Kada koristimo naredbu querySelectorAll, JavaScript će napraviti listu elemenata koji odgovaraju kriterijumu pretrage. Da bismo što bolje razumeli šta je potrebno uraditi da bismo mogli pristupiti takvoj listi, pogledaćemo konkretan primer.
var slike = document.querySelectorAll("div > img.slika_sa_okvirom");
var i;
for(i = 0; i < slike.length; i++) {
slike[i].style.border = "solid 2px #77ee88";
}
Objekat "slike" predstavlja listu pronađenih elemenata (elemenata koji odgovaraju navedenom CSS selektoru), pri čemu se lista kreira u sva tri karakteristična slučaja:
- U slučaju kada nema elemenata za koje selektor važi (u takvom slučaju lista će biti prazna)
- U slučaju kada postoji samo jedan element za koji selektor važi (u takvom slučaju lista ima jedan element)
- U slučaju kada postoji više elemenata za koje selektor važi
Ukoliko smo skroz sigurni da postoji samo jedan element koji može biti pronađen, možemo mu pristupiti na jednostavniji način:
var slika = document.querySelector("div > img.slika_sa_okvirom");
Čak i ako se "pređemo" sa ovakvim pristupom, neće biti strašno (ali, već smo rekli, ovakav pristup koristićemo kada smo sigurni da element koji tražimo preko selektora zapravo postoji i da nema duplikata):
- Ukoliko ne postoji ni jedan element koji odgovara navedenom selektoru, objekat slika imaće vrednost null
- Ukoliko postoji više elemenata koji odgovaraju selektoru, biće izabran prvi (opet, na nama je da pazimo da se to ne desi, ako nam trebaju svi elementi, a ne samo jedan/prvi)
Pomenimo i ostale načine pristupa elemtnima preko DOM strukture (princip rada sa kreiranim listama je isti).
Pristup DOM elementima preko pripisane klase (getElementsByClass)
Elementima možemo pristupati i preko pripisane klase (s tim da u prkasi, budući da je princip rada isti, većina programera koristi naredbu querySelectorAll).
Primera radi, sledeći kod:
var nav_linkovi = document.getElementsByClass("nav_linkovi");
.... pronaći će sve elemente kojima je pripisana navedena klasa i kreirati listu.
Pristup DOM elementima preko imena tagova (getElementsByTagName)
Na kraju, elementima možemo pristupati i preko imena tagova (opet, i ovo možemo postići korišćenjem naredbe querySelectorAll).
Sledeći kod:
var naslovi_h2 = document.getElementsByTagName("h2");
.... pronaći će sve h2 naslove unutar dokumenta.
Zaključak
Ono što smo prikazali u članku je (kao što verovatno možete pretpostaviti) samo mali deo onog što JavaScript jezik nudi, a kada se tome dodaju i brojne biblioteke koje proširuju osnovnu funkcionalnost jezika, nije teško razumeti da je u pitanju jezik koji zaista pruža brojne mogućnosti.
U našem novozapočetom serijalu tutorijala, često ćemo posvećivati pažnju jeziku JavaScript i onome što se taj jezik nud.