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.