1
Vježba 3: JavaScript vježbe
1. Skinite arhiviranu datoteku JavaScriptVjezbe.zip sa stranice Kolegiji, te je raspakirajte u vašu mapu
na D disku.
2. Pokrenite Visual Studio 2012, odaberite File/Open/Web site… i otvorite navedenu mapu.
3. Nakon toga otvorite mojastranicaFirst.html datoteku, te se s kursorom pozicionirajte u prvi article
između komentara.
4. Između komentara potrebno je napraviti HTML formu s atributima:
a. id – f1
b. onsubmit - ““
c. method - “post“
5. Unutar HTML forme potrebno je dodati, unutar paragraph-a (<p> </p>), sljedeće input elemente s
atributom type:
a. number
i. ostali atributi:
1. id – q1
2
b. number
i. ostali atributi:
1. id – q1
c. number
i. ostali atributi:
1. id – p1
d. number
i. ostali atributi:
1. id – p2
e. submit
i. ostali atributi:
1. name - submit1
2. value - Big Button
3. onclick – ““
6. Dodavanje svih input elemenata:
7. Nakon sto ste napravili HTML formu potrebno je dodati u drugi article division (div) s atributom id
naziva results.
3
8. Potrebno je dodati i output elemente, unutar paragraph-a (<p> </p>), u div s id-em results sa
sljedećim atributima:
a. atributi:
i. id – cERez
b. atributi:
i. id – lCERez
c. atributi:
i. id – pon
d. button element
i. Atributi:
1. id – btnClear
2. onclick - clearElements()
9. Dodavanje svih output elemenata:
10. Nakon što je HTML datoteka pripremljena, treba pritisnuti Ctrl+Shift+A, odabrati JavaScript File i
pod Name upisati elasticnost (Bez razmaka !!).
11. Nakon što je napravljena JavaScript datoteka, potrebno ju je u mojastranicaFirst.html datoteci
pozvati (slično kako se je pozivala i css datoteka).
4
12. U head dijelu, ispod pozvanja css datoteke, mojastranicaFirst.html treba napraviti tag script.
13. Unutar početnog taga script treba dodati dva atributa:
a. type - text/javascript
b. src – elasticnost.js
5
Cjenovna elastičnost ponude
Razlikujemo elasticnu, jedinicno-elasticnu i neelasticnu ponudu:
Elasticna je kada je postotna promjena (1%) cijene pracena promjenom trazene ili ponudene
kolicine vece od jedan (3%), (Es > 1).
Jedinicno-elasticna - kada je postotna promjena (1%) cijene pracena istom promjenom
trazene ili ponudene kolicine (1%), (Es = 1).
Neelasticna - kada je postotna promjena (1%) cijene pracena promjenom trazene ili
ponudene kolicine manjom od jedan (-0,4%), (Es < 1).
14. Nakon što otvorite elasticnost.js datoteku, definirajte dvije metode:
a. elasticnost
b. clearElements
15. U metodi elasticnost biti će obavljene sve radnje kako bi se dobio rezultat:
a. Uzimanje vrijednosti iz input elemenata
b. Računanje, odnosno formule za elastičnost
c. Postavljanje izračunatih vrijednosti u output elemente
16. Uzimanje vrijednosti iz input elemenata:
6
17. Računanje:
18. Dosad napravljena metoda:
7
19. Postavljanje izračunatih vrijednosti u output elemente:
20. Nastavak postavljanja izračunatih vrijednosti u output elemente:
8
21. Na kraju je stavljeno return false zbog istih razloga kao i u vježbi 2.
22. Prikaz cijele metode elasticnost:
9
23. Na kraju je ostala metoda koja treba obrisati rezultat i očistiti vrijednosti iz input elemenata forme
s id-em f1:
24. Nakon dovršetka programiranja u JavaScript datoteci, potrebno je još pozvati metodu elasticnost
u HTML formi:
10
11
Bitne DOM metode
1. Za početak uzmite vašu HTML5/CSS stranicu iz prve vježbe i otvorite je u Visual Studio-u.
2. Odaberite File/Open/Web site… i otvorite navedenu mapu s vašom prvom vježbom.
3. Otvorite zatim mojastranica.html.
4. Nakon što je HTML datoteka pripremljena, treba pritisnuti Ctrl+Shift+A, odabrati JavaScript File i
pod Name upisati dommetode (Bez razmaka !!).
5. Nakon što je napravljena JavaScript datoteka, potrebno ju je u mojastranicaFirst.html datoteci
pozvati (slično kako se je pozivala i css datoteka).
6. U head dijelu, ispod pozvanja css datoteke, mojastranicaFirst.html treba napraviti tag script.
7. Unutar početnog taga script treba dodati dva atributa:
a. type - text/javascript
b. src – dommetode.js
12
8. Prva DOM metoda koja će se obraditi je getElementById.
9. Otvorite dometode.js datoteku i napravite metodu naziva prvaDomMetoda:
10. Unutar prvaDomMetoda dohvatiti će se element s id-em Container i urediti njegov style:
11. Nakon toga potrebno se je vratiti u mojastranica.html i u prvom article-u ispod header elementa
napraviti univerzalni button za pozivanje postojeće i budućih dom metoda.
13
12. Nakon napravljenog buttona, spremite sve promjene, otvorite stranicu i kliknite na Button za DOM
metode.
13. Vratite se u dommetode.js datoteku i napravite drugu metodu za getElementsByTagName .
14. U drugoj metodi dohvatiti će se svi HTML tagovi li
15. Kao i u prethodnoj metodi, treba promjeniti style:
16. Nakon toga u mojaStranica.html datoteci u buttonu promijenite da u onclick metodi sada poziva
drugu metodu.
17. Treća stvar koja će se obraditi u DOM metodama su:
a. createElement
b. appendChild
c. innerHTML
14
18. Zbog ovog primjera u mojaStranica.html datoteci u drugom article-u nađite ul tag i dodajte mu
atribut id naziva list
19. Vratite se u dommetode.js datoteku i napravite treću metodu:
20. Gotova trecaDomMetoda treba izgledati ovako:
21. Nakon toga u mojaStranica.html datoteci u buttonu promijenite da u onclick metodi sada poziva
treću metodu.
22. Poslije navedene tri metode, bitno je spomenuti i removeChild DOM metodu.
15
23. U dommetode.js datoteci i napravite četvrtu metodu:
24. Gotova četvrta metoda treba izgledati ovako:
25. Zadnje dvije bitne DOM metode su getAttribute i setAttribute .
26. Zbog potreba ovog primjera otvorite mojstylesheet.css datoteku, te na kraju datoteke kreirajte
novu klasu:
27. Novokreirana klasa će imati jedno svojstvo:
28. U dommetode.js datoteci i napravite petu metodu:
16
29. Gotova peta metoda:
30. Nakon toga u mojaStranica.html datoteci u buttonu promijenite da u onclick metodi sada poziva
petu metodu.
17
Samostalni zadatak
Napravite HTML formu u prvom articleu postojeće web stranice, koja treba imati sljedeće input
elemente:
1. select listu s pet predefiniranih studenata
2. select listu s godinama studija (od 1 do 5)
3. pet input elemenata number u koje se trebaju (u svaki pojedinačno) upisati ocjene kolegija. (Ako
želite, možete prije tog elemenata napisati naziv kolegija).
Klikom na submit u drugom articleu u div-u s id-em results se treba prikazati:
1. Ime i prezime studenta koji je označen u select listi
2. Samo godina označena u select listi
3. Prosjek ocjena izračunan na temelju pet upisanih ocjena u input elementima number.