Web DOM Vežba 2
Ova vežba služi da utvrdimo znanje vezano za korišćenje mogućnosti iz uvodnih lekcija. Proširujemo znanje, ali ne novim metodima i događajima, već pre novim idejama. Vežba je prilično laka, a videćemo da sa skoro istim JavaScriptom i Web DOM objektima, svojstvima i metodima možemo dinamizirati sasvim drugačiju stranicu. Od novih stvari, naučićemo kako da iskoristimo specifična svojstva img objekta (konkretno svojstvo width) i kako da utičemo na izvršavanje funkcije prosleđivanjem različitih parametara.
Ako ste propustili uvodne lekcije, podsetite se na sledećim linkovima, koji 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 funkciju gasi(slika) koja se izvršava u trenutku kada se miš ukloni sa slike i to tako da se prilikom poziva prosleđuje sam element.
- Funkcija gasi(slika) menja boju okvira slike u "grey", klasu uvodnog teksta u "neutral" a tekst opisa u "...".
- Kreirati funkciju pali(slika,txt) koja se izvršava u trenutku kada se miš postavi iznad bilo koje slike i to tako da se prilikom poziva prosleđuje sam element i tekst 'LETO', odnosno 'ZIMA'.
- Funkcija pali(slika,txt) menja boju okvira slike u "white", klasu uvodnog teksta u "LETO" ili "ZIMA" a tekst opisa u "Naš odgovor je: LETO" ili "Naš odgovor je: ZIMA", zavisno od prosleđenog teksta.
- Kreirati funkciju leto() koja se izvršava u trenutku kada se klikne na H2 naslov "Leto bez kraja".
- Kreirati funkciju zima() koja se izvršava u trenutku kada se klikne na H2 naslov "Zimaska idila".
- Funkcija leto() menja naziv (title) celog dokumenta u "Letnja oluja", prvoj slici postavlja širinu na 350, drugoj na 250, prikazuje pasuse ispod naslova Leto bez kraja i skriva pasuse ispod naslova Zimska idila.
- Funkcija zima() menja naziv (title) celog dokumenta u "Dolazi zima", prvoj slici postavlja širinu na 250, drugoj na 350, skriva pasuse ispod naslova Leto bez kraja i prikazuje pasuse ispod naslova Zimska idila.
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;
Podrazumevamo da ste uradili ili makar razumeli kako se rade zadaci iz prve vežbe, pošto slične zadatke nećemo detaljno objašnjavati.
Zadatak 1
Kreirati odeljak za JavaScript unutar zaglavlja stranice.
Kreiranje JavaScript odeljka na HTML stranici nam je već poznato. Dodaćemo <script> oznaku unutar zaglavlja stranice.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web stranica</title>
<link rel="stylesheet" href="stil.css" />
<script>
</script>
</head>
<body>
...
</body>
</html>
Zadatak 2
Kreirati funkciju gasi(slika) koja se izvršava u trenutku kada se miš ukloni sa slike i to tako da se prilikom poziva prosleđuje sam element.
Kreiranje funkcije sa parametrom nam je već poznato. Funkcija gasi() treba da ima jedan parametar slika i takvu je i kreiramo.
Funkcija se poziva kada se miš ukloni sa slike. U ovom slučaju misli se na obe slike iz dokumenta. Koristimo događaj onmouseout koji dodajemo slikama i u njemu poziv funkcije. Traži se da slika prosleđuje samu sebe, kao parametar, što znači da u pozivu funkcije kao parametar zadajemo objekta this.
...
<script>
function gasi(slika) {
}
</script>
</head>
<body>
<div class="kont">
<h1>Godišnja doba</h1>
<p class="neutral">Koliko puta...</p>
<div class="slike">
<img src="pic-leto.jpg" width="300" onmouseout="gasi(this)" />
<img src="pic-zima.jpg" width="300" onmouseout="gasi(this)" />
<p>...</p>
</div>
<div class="deo">
<div>
<h2>Leto bez kraja</h2>
<div><p>Leto je mnogo...</div>
</div>
</div><div class="deo">
<div>
<h2>Zimska idila</h2>
<div><p>Zima je mnogo...</div>
</div>
</div>
</div>
...
Zadatak 3
Funkcija gasi(slika) menja boju okvira slike u "grey", klasu uvodnog teksta u "neutral" a tekst opisa u "...".
Funkcija gasi() u stvari "vraća" elemente stranice u početno stanje (pošto se svašta dešava kada korisnik dovede miš iznad slike, što ćemo videti u narednim zadacima).
Dakle promena boje okvira slike je izmena na CSS atributu border-color, tj. u JavaScriptu predstavlja izmenu svojstva borderColor podobjekta style, objekta slika. Zašto baš slika? Pa sama slika nad kojom je nastao događaj je "ulovljena" parametrom slika prilikom poziva funkcije (to je onaj this objekat u pozivu funkcije).
Ako je promena izgleda slike mogla da se reši i korišćenjem :hover pseudo-klase, promena izgleda i sadržaja nekog drugog elementa je mnogo lakša korišćenjem JavaScripta. Pasus sa uvodnim tekstom treba da dobije klasu "neutral". Za to koristimo svojstvo className objekta koji predstavlja sam taj pasus, a do koga dolazimo korišćenjem metoda getElementById() objekta document. Ovaj pasus mora da bude jedinstveno identifikovan da bismo ga "dohvatili", pa mu dodeljujemo id="uvod".
Na kraju treba da promenimo i sadržaj pasusa sa opisnim tekstom koji se nalazi ispod slika. Koristimo svojstvo innerHTML objekta koji predstavlja taj pasus, a isto kao malopre, moramo da ga identifikujemo. Ovaj pasus identifikujemo kao "opis".
...
<script>
function gasi(slika) {
slika.style.borderColor = "grey";
document.getElementById("uvod").className = "neutral";
document.getElementById("opis").innerHTML = "...";
}
</script>
...
<div class="kont">
<h1>Godišnja doba</h1>
<p id="uvod" class="neutral">Koliko puta...</p>
<div class="slike">
<img src="pic-leto.jpg" width="300" onmouseout="gasi(this)" />
<img src="pic-zima.jpg" width="300" onmouseout="gasi(this)" />
<p id="opis">...</p>
</div>
<div class="deo">
<div>
<h2>Leto bez kraja</h2>
<div><p>Leto je mnogo...</div>
</div>
</div><div class="deo">
<div>
<h2>Zimska idila</h2>
<div><p>Zima je mnogo...</div>
</div>
</div>
</div>
...
Zadatak 4
Kreirati funkciju pali(slika,txt) koja se izvršava u trenutku kada se miš postavi iznad bilo koje slike i to tako da se prilikom poziva prosleđuje sam element i tekst 'LETO', odnosno 'ZIMA'.
U zadatku se traži da napravimo novu funkciju pali() koja ima dva parametra slika i txt, pa tako i radimo. Pozivi ove funkcije treba da se dese kada se miš dovede iznad slike (znači važi i za jednu i za drugu sliku). U obe slike dodajemo događaj onmouseover. U događaju se poziva funkcija pali(), kojoj se zadaju dva parametra. Prvi je sam element (slika) nad kojim je nastupio događaj, pa zadajemo objekat this. Drugi parametar je običan tekst koji za prvu sliku glasi 'LETO', a za drugu 'ZIMA'.
Tekst moramo da zadamo baš kako se tražilo (velikim slovima), pošto se klase koje ćemo zadavati u sledećem zadatku zovu upravo tako. Takođe, moramo da koristimo apostrofe, jer se poziv funkcije već nalazi unutar navodnika.
...
<script>
function gasi(slika) {
slika.style.borderColor = "grey";
document.getElementById("uvod").className = "neutral";
document.getElementById("opis").innerHTML = "...";
}
function pali(slika, txt) {
}
</script>
...
<div class="kont">
<h1>Godišnja doba</h1>
<p id="uvod" class="neutral">Koliko puta...</p>
<div class="slike">
<img src="pic-leto.jpg" width="300" onmouseover="pali(this, 'LETO')" onmouseout="gasi(this)" />
<img src="pic-zima.jpg" width="300" onmouseover="pali(this, 'ZIMA')" onmouseout="gasi(this)" />
<p id="opis">...</p>
</div>
<div class="deo">
<div>
<h2>Leto bez kraja</h2>
<div><p>Leto je mnogo...</div>
</div>
</div><div class="deo">
<div>
<h2>Zimska idila</h2>
<div><p>Zima je mnogo...</div>
</div>
</div>
</div>
...
Zadatak 5
Funkcija pali(slika,txt) menja boju okvira slike u "white", klasu uvodnog teksta u "LETO" ili "ZIMA" a tekst opisa u "Naš odgovor je: LETO" ili "Naš odgovor je: ZIMA", zavisno od prosleđenog teksta.
Slično kao u trećem zadatku, menjamo boju okvira oko slike nad kojom je nastao događaj. Potrebno je promeniti i klasu uvodnog pasusa zavisno od toga iznad koje slike je nastao događaj. Upravo zbog toga se funkciji pali() prosleđuje i određen tekst. Upravo zbog toga smo prilagodili i naš CSS da se klase koje se zadaju upravo i zovu .LETO i .ZIMA. Tako se svojstvu className zadaje upravo zadati tekst u parametru txt.
Vrlo je slično i sa sadržajem pasusa sa opisom. Tekst se razlikuje samo u reči "LETO" ili "ZIMA", pa tako kreiramo sadržaj pasusa tako što na tekst "Naš odgovor je: " dodajemo reč koju smo dobili u parametru txt.
...
<script>
function gasi(slika) {
slika.style.borderColor = "grey";
document.getElementById("uvod").className = "neutral";
document.getElementById("opis").innerHTML = "...";
}
function pali(slika, txt) {
slika.style.borderColor = "white";
document.getElementById("uvod").className = txt;
document.getElementById("opis").innerHTML = "Naš odgovor je: " + txt;
}
</script>
...
<div class="kont">
<h1>Godišnja doba</h1>
<p id="uvod" class="neutral">Koliko puta...</p>
<div class="slike">
<img src="pic-leto.jpg" width="300" onmouseover="pali(this, 'LETO')" onmouseout="gasi(this)" />
<img src="pic-zima.jpg" width="300" onmouseover="pali(this, 'ZIMA')" onmouseout="gasi(this)" />
<p id="opis">...</p>
</div>
<div class="deo">
<div>
<h2>Leto bez kraja</h2>
<div><p>Leto je mnogo...</div>
</div>
</div><div class="deo">
<div>
<h2>Zimska idila</h2>
<div><p>Zima je mnogo...</div>
</div>
</div>
</div>
...
Zadatak 6
Kreirati funkciju leto() koja se izvršava u trenutku kada se klikne na H2 naslov "Leto bez kraja".
Kreiramo novu funkciju leto() bez parametara. U prvom <h2> elementu zadajemo događaj onclick i u njemu poziv funkcije leto().
...
<script>
function gasi(slika) {
slika.style.borderColor = "grey";
document.getElementById("uvod").className = "neutral";
document.getElementById("opis").innerHTML = "...";
}
function pali(slika, txt) {
slika.style.borderColor = "white";
document.getElementById("uvod").className = txt;
document.getElementById("opis").innerHTML = "Naš odgovor je: " + txt;
}
function leto() {
}
</script>
...
<div class="kont">
<h1>Godišnja doba</h1>
<p id="uvod" class="neutral">Koliko puta...</p>
<div class="slike">
<img src="pic-leto.jpg" width="300" onmouseover="pali(this, 'LETO')" onmouseout="gasi(this)" />
<img src="pic-zima.jpg" width="300" onmouseover="pali(this, 'ZIMA')" onmouseout="gasi(this)" />
<p id="opis">...</p>
</div>
<div class="deo">
<div>
<h2 onclick="leto()">Leto bez kraja</h2>
<div><p>Leto je mnogo...</div>
</div>
</div><div class="deo">
<div>
<h2>Zimska idila</h2>
<div><p>Zima je mnogo...</div>
</div>
</div>
</div>
...
Zadatak 7
Kreirati funkciju zima() koja se izvršava u trenutku kada se klikne na H2 naslov "Zimaska idila".
Sve je isto kao u prethodnom zadatku. Kreiramo novu funkciju zima() i u drugom <h2> podnaslovu zadajemo adekvatan onclick događaj.
...
<script>
function gasi(slika) {
slika.style.borderColor = "grey";
document.getElementById("uvod").className = "neutral";
document.getElementById("opis").innerHTML = "...";
}
function pali(slika, txt) {
slika.style.borderColor = "white";
document.getElementById("uvod").className = txt;
document.getElementById("opis").innerHTML = "Naš odgovor je: " + txt;
}
function leto() {
}
function zima() {
}
</script>
...
<div class="kont">
<h1>Godišnja doba</h1>
<p id="uvod" class="neutral">Koliko puta...</p>
<div class="slike">
<img src="pic-leto.jpg" width="300" onmouseover="pali(this, 'LETO')" onmouseout="gasi(this)" />
<img src="pic-zima.jpg" width="300" onmouseover="pali(this, 'ZIMA')" onmouseout="gasi(this)" />
<p id="opis">...</p>
</div>
<div class="deo">
<div>
<h2 onclick="leto()">Leto bez kraja</h2>
<div><p>Leto je mnogo...</div>
</div>
</div><div class="deo">
<div>
<h2 onclick="zima()">Zimska idila</h2>
<div><p>Zima je mnogo...</div>
</div>
</div>
</div>
...
Zadatak 8
Funkcija leto() menja naziv (title) celog dokumenta u "Letnja oluja", prvoj slici postavlja širinu na 350, drugoj na 250, prikazuje pasuse ispod naslova Leto bez kraja i skriva pasuse ispod naslova Zimska idila.
Poslednji napor je definisanje šta se dešava u funkciji leto(). Prvo je potrebno promeniti naziv dokumenta, i za to koristimo svojstvo title objekta document.
Zatim treba promeniti veličine slika - bez obzira na koji podnaslov se klikne, menjaju se i prva i druga slika - samo se dimenzije menjaju. Ovde je potrebno promeniti širine slika i za to koristimo svojstvo width koje imaju svi objekti koji predstavljaju <img> elemente. Za obe slike, ovom svojstvu zadajemo nove vrednosti. Naravno koristimo metod getElementById() kako bismo pristupili odgovarajućoj slici, a zbog toga slike moraju da budu identifikovane. Ovaj put smo slikama dodelili id="pic1" i id="pic2".
Isto tako, određeni tekst treba prikazati, a drugi sakriti. Najlakše je da iskoristimo CSS svojstvo display, koje može imati vrednosti "none" i "block" (u ovom slučaju). Isto kao malopre, morali smo da dodelimo posebne identifikacije "txt1" i "txt2" odgovarajućim <div> elementima, kako bismo mogli da ih "dohvatimo" iz JavaScripta.
...
<script>
function gasi(slika) {
slika.style.borderColor = "grey";
document.getElementById("uvod").className = "neutral";
document.getElementById("opis").innerHTML = "...";
}
function pali(slika, txt) {
slika.style.borderColor = "white";
document.getElementById("uvod").className = txt;
document.getElementById("opis").innerHTML = "Naš odgovor je: " + txt;
}
function leto() {
document.title = "Letnja oluja";
document.getElementById("pic1").width = 350;
document.getElementById("pic2").width = 250;
document.getElementById("txt1").style.display = "block";
document.getElementById("txt2").style.display = "none";
}
function zima() {
}
</script>
...
<div class="kont">
<h1>Godišnja doba</h1>
<p id="uvod" class="neutral">Koliko puta...</p>
<div class="slike">
<img id="pic1" src="pic-leto.jpg" width="300" onmouseover="pali(this, 'LETO')" onmouseout="gasi(this)" />
<img id="pic2" src="pic-zima.jpg" width="300" onmouseover="pali(this, 'ZIMA')" onmouseout="gasi(this)" />
<p id="opis">...</p>
</div>
<div class="deo">
<div>
<h2 onclick="leto()">Leto bez kraja</h2>
<div id="txt1"><p>Leto je mnogo...</div>
</div>
</div><div class="deo">
<div>
<h2 onclick="zima()">Zimska idila</h2>
<div id="txt2"><p>Zima je mnogo...</div>
</div>
</div>
</div>
...
Zadatak 9
Funkcija zima() menja naziv (title) celog dokumenta u "Dolazi zima", prvoj slici postavlja širinu na 250, drugoj na 350, skriva pasuse ispod naslova Leto bez kraja i prikazuje pasuse ispod naslova Zimska idila.
Ovaj zadatak se rešava isto kao prethodni, s tim što sada već imamo identifikacije u elementima. Sve je isto, samo se "obrću" vrednosti koje se dodeljuju svojstvima, pošto sada treba povećati "zimsku" sliku i prikazati "zimski" tekst.
...
<script>
function gasi(slika) {
slika.style.borderColor = "grey";
document.getElementById("uvod").className = "neutral";
document.getElementById("opis").innerHTML = "...";
}
function pali(slika, txt) {
slika.style.borderColor = "white";
document.getElementById("uvod").className = txt;
document.getElementById("opis").innerHTML = "Naš odgovor je: " + txt;
}
function leto() {
document.title = "Letnja oluja";
document.getElementById("pic1").width = 350;
document.getElementById("pic2").width = 250;
document.getElementById("txt1").style.display = "block";
document.getElementById("txt2").style.display = "none";
}
function zima() {
document.title = "Dolazi zima";
document.getElementById("pic1").width = 250;
document.getElementById("pic2").width = 350;
document.getElementById("txt1").style.display = "none";
document.getElementById("txt2").style.display = "block";
}
</script>
...
<div class="kont">
<h1>Godišnja doba</h1>
<p id="uvod" class="neutral">Koliko puta...</p>
<div class="slike">
<img id="pic1" src="pic-leto.jpg" width="300" onmouseover="pali(this, 'LETO')" onmouseout="gasi(this)" />
<img id="pic2" src="pic-zima.jpg" width="300" onmouseover="pali(this, 'ZIMA')" onmouseout="gasi(this)" />
<p id="opis">...</p>
</div>
<div class="deo">
<div>
<h2 onclick="leto()">Leto bez kraja</h2>
<div id="txt1"><p>Leto je mnogo...</div>
</div>
</div><div class="deo">
<div>
<h2 onclick="zima()">Zimska idila</h2>
<div id="txt2"><p>Zima je mnogo...</div>
</div>
</div>
</div>
...
Rešenje
Ako niste sigurni kako da uradite neki zadatak, kompletno rešenje možete odmah pogledati ovde...
- U vežbi su korišćeni kadrovi iz open source web stripa Pepper&Carrot, autora Davida Revoya