Web DOM Vežba 1
Ova vežba služi da isprobamo neke mogućnosti iz uvodnih lekcija, u kojima učimo kako da se "snađemo" sa JavaScriptom i Web DOM programiranjem. Vežbamo uvođenje JavaScripta na web stranu pomoću <script> oznake, kreiranje funkcija, događaje onload, onclick, onmouseover i onmouseout, pozivanje HTML elementa pomoću metoda getElementById(), promenu inline CSS stila pomoću podobjekta style, promenu klase elementa (className) i promenu njegovog sadržaja (innerHTML). Promenićemo i naziv samog dokumenta pomoću svojstva document.title. Pošto je ovo prva vežba, posvetićemo joj dosta pažnje.
Bilo bi lepo da ste savaldali JavaScript i dobar deo web DOM-a, ali ako niste, pročitajte bar nekoliko uvodnih lekcija koje pokrivaju početak web DOM programiranja:
- Šta je to Web DOM
- JavaScript podsetnik za Web DOM
- Prvi koraci u Web DOM programiranju
- Rad sa JavaScriptom i DOM događajima (makar prvi podnaslov Definisanje događaja preko HTML parametara)
Zadaci
Preuzmite arhivu sa fajlovima za vežbu i raspakujte je na svom računaru. Zadatke radite tako što menjate fajl index.html. Kompletno rešenje je dato na kraju ovog teksta, ali i kao fajl index-res.html u okviru arhive.
Postavku zadatka (HTML koji zahteva editovanje), možete otvoriti u Web Frontu na START platformi i odmah vežbati u njemu. Vežbu radite tako što menjate početni dokument, sledeći zadatke. U ovoj vežbi ćete koristiti JavaScript prozor koji je integrisan u Web Front i u kome možete kreirati tražene funkcije.
Ovo su zadaci koji treba da se urade:
- Kreirati odeljak za JavaScript unutar zaglavlja stranice.
- Kreirati JavaScript funkciju pocetak(), koja se izvršava kada se stranica učita.
- Funkcija pocetak() menja tekst naziva iz zaglavlja dokumenta u "JS primer".
- Kreirati funkciju promena() koja se izvršava u trenutku kada se klikne na H1 naslov dokumenta.
- Funkcija promena() menja izgled teksta "Korekcija izgleda", tako što postavlja boju pozadine na #ffc, boju slova na crvenu, slova postaju podebljana i ispisana fontom sans-serif.
- Kreirati funkcije ulaz(obj) i izlaz(obj) koje se izvršavaju u trenutku kada se miš postavi iznad pasusa "Promena klase i sadržaja", odnosno kada se miš ukloni i to tako da se prilikom poziva funkcije prosleđuje sam elemenat.
- Funkcija ulaz(obj) zadatom objektu postavlja klasu "aktivan" i menja mu sadržaj u tekst "Miš preko elementa".
- Funkcija izlaz(obj) zadatom objektu postavlja klasu "obican" i menja mu sadržaj u tekst "Promena klase i sadržaja".
Rešenja
Ovde ćemo detaljno predstaviti način izrade vežbe, zadatak po zadatak. Za svaki zadatak smo naveli objašnjenje i rešenje. Ono što treba da se "otkuca" u tom zadatku, markirano je žutom bojom.
naredba;
nova naredba;
naredba;
Delovi koji su do tog zadatka urađeni u okviru vežbe, naglašeni su drugačijom bojom.
Zadatak 1
Kreirati odeljak za JavaScript unutar zaglavlja stranice.
JavaScript bismo trebali da pravimo kao zaseban fajl, ali ako ga već ubacujemo kao odeljak, bar ćemo ga ubaciti u <head>, kako bismo dokument održali što je moguće čistijim. Ovo je jednostavan zadatak - samo ubacujemo elemenat <script> (deo za otvaranje i zatvaranje oznake).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web stranica</title>
<style>
...
</style>
<script>
</script>
</head>
<body>
...
</body>
</html>
U ovim objašnjenjima nećemo pisati ceo HTML kod, već samo ono što nam je važno za orijentaciju. Otuda one tri tačkice ("...") koje se javljaju na nekoliko mesta.
Zadatak 2
Kreirati JavaScript funkciju pocetak(), koja se izvršava kada se stranica učita.
Sav JavaScript kod ubacujemo unutar <script> elementa. Tako na tom mestu i kreiramo deklaraciju funkcije pocetak(). Funkcija je za početak prazna, tj. ima samo otvorenu i zatvorenu vitičastu zagradu {}. Pošto funkcija treba da se pozove u trenutku kada se ceo dokument učita, koristićemo događaj "load" na elementu <body>. Ubacujemo HTML parametar onload u <body> oznaci, a vrednost tog parametra treba da bude poziv funkcije pocetak() (linija 10).
Ovako smo efektivno kreirali početnu tačku za izvršenje našeg JavaScripta. Ono što je bitno je da program počinje da se izvršava tek kada se svi elementi (tj. cela stranica) učitaju.
<!doctype html>
<html>
<head>
...
<script>
function pocetak() {
}
</script>
</head>
<body onload="pocetak()">
...
</body>
</html>
Zadatak 3
Funkcija pocetak() menja tekst naziva iz zaglavlja dokumenta u "JS primer".
Sada je došlo vreme da isprogramiramo šta se dešava kada se funkcija pozove, odnosno da dodamo "telo" funkcije. Zadatak je jednostavan - potrebno je promeniti naziv dokumenta, odnosno tekst koji je zadat kao <title>. Bez ove funkcije, u kartici web čitača se vidi tekst "Web stranica". Pošto se funkcija pokreće čim se dokument učita, korisnik bi praktično odmah umesto tog teksta trebao da vidi "JS primer".
Tekst naziva je "pokriven" svojstvom title objekta document. Ovo svojstvo se može čitati, ali i menjati, što odmah daje efekat promene naziva. Upravo to i radimo unutar funkcije (linija 9).
<!doctype html>
<html>
<head>
...
<title>Web stranica</title>
...
<script>
function pocetak() {
document.title = "JS primer";
}
</script>
</head>
<body onload="pocetak()">
...
</body>
</html>
Zadatak 4
Kreirati funkciju promena() koja se izvršava u trenutku kada se klikne na H1 naslov dokumenta.
Ovde ne bi trebalo da nam bude bilo šta nepoznato. Kreiramo novu funkciju promena(), odmah posle funkcije pocetak() (inače redosled nije bitan, važno je samo da greškom ne ubacimo funkciju-unutar-funkcije). Pošto funkcija promena() treba da se pozove kada korisnik klikne na glavni naslov, moramo da zadamo događaj click koji se odnosi na elemenat <h1>. Tako u taj element ubacujemo parametar onclick čija je vrednost JavaScript kod kojim se poziva funkcija promena() (linija 14).
<!doctype html>
<html>
<head>
...
<script>
function pocetak() {
document.title = "JS primer";
}
function promena() {
}
</script>
</head>
<body onload="pocetak()">
<h1 onclick="promena()">Naslov</h1>
...
</body>
</html>
Zadatak 5
Funkcija promena() menja izgled teksta "Korekcija izgleda", tako što postavlja boju pozadine na #ffc, boju slova na crvenu, slova postaju podebljana i ispisana fontom sans-serif.
Sada "popunjavamo" funkciju promena(). U HTML-u postoji pasus sa tekstom "Korekcija izgleda", kome treba promeniti nekoliko CSS atributa. Prvo je bitno da pristupimo samom pasusu. Znamo da se to radi pomoću metoda getElementById() objekta document. Da bi ovo funkcionisalo, kao argument metoda moramo da zadamo identifikaciju elementa, koju pasus nema. To znači da takođe moramo da ubacimo HTML parametar id, po kome ćemo u JavaScriptu pozvati pasus. Odlučili smo se za identifikaciju "pasus" (linija 21).
U samoj funkciji promena() sada možemo da pristupimo tom elementu (linija 10). Umesto da bilo šta uradimo direktno sa elementom, referencu smeštamo u promenljivu x. U preostalim linijama funkcije koristimo podobjekat style elementa (čija referenca je u promenljivoj x) i njegova svojstva da promenimo tražene CSS atribute.
<!doctype html>
<html>
<head>
...
<script>
function pocetak() {
document.title = "JS primer";
}
function promena() {
var x = document.getElementById("pasus");
x.style.backgroundColor = "#ffc";
x.style.color = "red";
x.style.fontWeight = "bold";
x.style.fontFamily = "sans-serif";
}
</script>
</head>
<body onload="pocetak()">
<h1 onclick="promena()">Naslov</h1>
...
<p id="pasus">Korekcija izgleda</p>
...
</body>
</html>
Zadatak 6
Kreirati funkcije ulaz(obj) i izlaz(obj) koje se izvršavaju u trenutku kada se miš postavi iznad pasusa "Promena klase i sadržaja", odnosno kada se miš ukloni i to tako da se prilikom poziva funkcije prosleđuje sam elemenat.
Ovaj zadatak ne bi trebao da nam predstavlja problem, pošto smo slične već radili. Sada se traži da napravimo dve funkcije obrade događaja - ulaz() i izlaz(). Razlika je u tome što sada ove funkcije imaju i jedan argument (parametar) koji im se prosleđuje. U zadatku je objašnjeno i koja vrednost se prosleđuje kroz taj argument - onaj element na kome je nastupio događaj.
U situaciji kada umemo da "reagujemo" na događaje samo pomoću specijalnih HTML parametara, to za nas znači da pri pozivu funkcije prosleđujemo objekat this. Tako u poslednji pasus dokumenta dodajemo parametre onmouseover i onmouseout koji definišu reagovanje na događaje "ulaska" miša nad elementom i "napuštanja" elementa. Za prvi događaj treba pozvati funkciju ulaz(), a za drugi izlaz() i u obe zadati objekat this, koji se odnosi na sam pasus kada se događaji dese (linija 26).
<!doctype html>
<html>
<head>
...
<script>
function pocetak() {
document.title = "JS primer";
}
function promena() {
var x = document.getElementById("pasus");
x.style.backgroundColor = "#ffc";
x.style.color = "red";
x.style.fontWeight = "bold";
x.style.fontFamily = "sans-serif";
}
function ulaz(obj) {
}
function izlaz(obj) {
}
</script>
</head>
<body onload="pocetak()">
<h1 onclick="promena()">Naslov</h1>
...
<p id="pasus">Korekcija izgleda</p>
<p class="obican" onmouseover="ulaz(this)" onmouseout="izlaz(this)">Promena klase i sadržaja</p>
</body>
</html>
Zadatak 7
Funkcija ulaz(obj) zadatom objektu postavlja klasu "aktivan" i menja mu sadržaj u tekst "Miš preko elementa".
U ovom zadatku definišemo šta se dešava kada se miš postavi iznad elementa (događaj mouseover). Najpre je potrebno promeniti klasu elementa u "aktivan" - efektivno, tako mu menjamo izgled i to efikasnije nego sa gomilom uzastopnih izmena u style objektu. Pošto smo unapred pripremili klase u CSS odeljku <style>, ovo nije problem. Da bismo promenili klasu elementa, koristimo svojstvo className. Ovo svojstvo menjamo za objekat obj koji pri izvršenju funkcije predstavlja referencu na sam pasus nad kojim je izazvan događaj (linija 17).
Takođe je potrebno promeniti sadržaj pasusa. Za ovo koristimo svojstvo innerHTML, koje reprezentuje kompletan HTML sadržaj elementa. Njegovom promenom menjamo i sadržaj (linija 18). Inače ovo svojstvo je mnogo moćnije u odnosu na ono kako ga mi kristimo u ovom zadatku - ubacujemo samo običan tekst, a mogli bismo čitav HTML kod.
<!doctype html>
<html>
<head>
...
<script>
function pocetak() {
document.title = "JS primer";
}
function promena() {
var x = document.getElementById("pasus");
x.style.backgroundColor = "#ffc";
x.style.color = "red";
x.style.fontWeight = "bold";
x.style.fontFamily = "sans-serif";
}
function ulaz(obj) {
obj.className = "aktivan";
obj.innerHTML = "Miš preko elementa";
}
function izlaz(obj) {
}
</script>
</head>
<body onload="pocetak()">
<h1 onclick="promena()">Naslov</h1>
...
<p id="pasus">Korekcija izgleda</p>
<p class="obican" onmouseover="ulaz(this)" onmouseout="izlaz(this)">Promena klase i sadržaja</p>
</body>
</html>
Zadatak 8
Funkcija izlaz(obj) zadatom objektu postavlja klasu "obican" i menja mu sadržaj u tekst "Promena klase i sadržaja".
Ovaj zadatak je praktično isti kao prethodni. Jedino što je potrebno da dodamo naredbe u funkciju izlaz(), koja je praktično ista kao funkcija ulaz(), s tim što su vrednosti koje se zadaju svojstvima drugačije. Suštinski ova funkcija služi da kada se miš skloni sa elementa, sve vrati u početno stanje - to se inače ne dešava automatski.
<!doctype html>
<html>
<head>
...
<script>
function pocetak() {
document.title = "JS primer";
}
function promena() {
var x = document.getElementById("pasus");
x.style.backgroundColor = "#ffc";
x.style.color = "red";
x.style.fontWeight = "bold";
x.style.fontFamily = "sans-serif";
}
function ulaz(obj) {
obj.className = "aktivan";
obj.innerHTML = "Miš preko elementa";
}
function izlaz(obj) {
obj.className = "obican";
obj.innerHTML = "Promena klase i sadržaja";
}
</script>
</head>
<body onload="pocetak()">
<h1 onclick="promena()">Naslov</h1>
...
<p id="pasus">Korekcija izgleda</p>
<p class="obican" onmouseover="ulaz(this)" onmouseout="izlaz(this)">Promena klase i sadržaja</p>
</body>
</html>
Rešenje
Ako niste sigurni kako da uradite neki zadatak, kompletno rešenje možete odmah pogledati ovde...