Vjezba3

1

Vjeba 3: JavaScript vjebe

1. Skinite arhiviranu datoteku JavaScriptVjezbe.zip sa stranice Kolegiji, te je raspakirajte u vau 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

izmeu komentara.

4. Izmeu 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 ( ), sljedee 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 ( ), u div s id-em results sa

sljedeim 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 (slino kako se je pozivala i css datoteka).

4

12. U head dijelu, ispod pozvanja css datoteke, mojastranicaFirst.html treba napraviti tag script.

13. Unutar poetnog taga script treba dodati dva atributa:

a. type - text/javascript

b. src elasticnost.js

5

Cjenovna elastinost 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. Raunanje, odnosno formule za elastinost

c. Postavljanje izraunatih vrijednosti u output elemente

16. Uzimanje vrijednosti iz input elemenata:

6

17. Raunanje:

18. Dosad napravljena metoda:

7

19. Postavljanje izraunatih vrijednosti u output elemente:

20. Nastavak postavljanja izraunatih vrijednosti u output elemente:

8

21. Na kraju je stavljeno return false zbog istih razloga kao i u vjebi 2.

22. Prikaz cijele metode elasticnost:

9

23. Na kraju je ostala metoda koja treba obrisati rezultat i oistiti vrijednosti iz input elemenata forme

s id-em f1:

24. Nakon dovretka programiranja u JavaScript datoteci, potrebno je jo pozvati metodu elasticnost

u HTML formi:

11

Bitne DOM metode

1. Za poetak uzmite vau HTML5/CSS stranicu iz prve vjebe i otvorite je u Visual Studio-u.

2. Odaberite File/Open/Web site i otvorite navedenu mapu s vaom prvom vjebom.

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 (slino kako se je pozivala i css datoteka).

6. U head dijelu, ispod pozvanja css datoteke, mojastranicaFirst.html treba napraviti tag script.

7. Unutar poetnog 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 postojee i buduih 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. Trea 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 naite ul tag i dodajte mu

atribut id naziva list

19. Vratite se u dommetode.js datoteku i napravite treu metodu:

20. Gotova trecaDomMetoda treba izgledati ovako:


treu 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:


petu metodu.

17

Samostalni zadatak

Napravite HTML formu u prvom articleu postojee web stranice, koja treba imati sljedee 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 pojedinano) upisati ocjene kolegija. (Ako

elite, moete 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 oznaen u select listi

2. Samo godina oznaena u select listi

3. Prosjek ocjena izraunan na temelju pet upisanih ocjena u input elementima number.

Vjezba3

Documents

Transcript of Vjezba3