1

Vježba 2: 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. text

i. ostali atributi:

2

1. name - text1

2. autofocus

b. password

i. ostali atributi:

1. name - password1

c. date

i. ostali atributi:

1. name - date1

2. pattern - \d{4}-\d{2}-\d{2}

3. title - YYYY-MM-DD

d. color

i. ostali atributi:

1. name - color1

2. value - #336699

e. Email

i. ostali atributi:

1. name - email1

2. required

3. multiple

f. number

i. ostali atributi:

1. name - number1

2. min - 1

3. max - 5

4. value 1

g. range

i. ostali atributi:

1. name - range1

2. min - 0

3. max - 100

4. step - 10

5. value - 20

h. search

i. ostali atributi:

1. name - date1

3

i. url

i. ostali atributi:

1. name - url1

j. tag textarea s atributom name=“textarea1“

k. submit

i. ostali atributi:

1. name - submit1

2. value - Big Button

3. onclick – ““

6. Dodavanje input elementa za text:

7. Dodavanje svih input elemenata:

4

8. Nakon sto ste napravili HTML formu potrebno je dodati u drugi article division (div) s atributom id

naziva results.

9. Unutar Visual Studia pritisnite Ctrl i označite mojastranicaFirst.html, te označeno povucite gore ili

dolje kako bi dobili kopiju mojastranicaFirst.html datoteke.

10. Preimenujte mojastranicaFirst - Copy.html u mojaDrugastranica.html.

5

11. Nakon toga u nav tagu mojastranicaFirst.html datoteke, u prvom anchor tagu ispod unutarnjih

linkova umjesto # stavite url koji vodi do datoteke mojaDrugastranica.html a za naziv stavite

Druga stranica.

12. Nakon toga u nav tagu mojaDrugastranica.html datoteke, u prvom anchor tagu ispod unutarnjih

linkova umjesto # stavite url koji vodi do datoteke mojastranicaFirst.html a za naziv stavite Prva

stranica.

13. Zatim u mojaDrugastranica.html datoteci obrišite sve paragraph i input elemente (osim input

elementa s type-om submit) unutar taga form, koji se nalazi u prvom articleu.

14. U form tagu mojaDrugastranica.html datoteke dodajte sljedeće paragraph-e (<p></p>):

a. Checkboxes:

b. Radio buttons:

c. Selection Lists:

d. Multiple selection:

6

15. Kada su se dodali paragraph-i, unutar paragraph-a Checkboxes-a treba dodati sljedeće input

elemente s atributom type:

a. type – checkbox

i. ostali atributi:

1. name - check1

2. checked

3. autofocus

b. type – checkbox

i. ostali atributi:

1. name – check2

c. type – checkbox

i. ostali atributi:

1. name – check3

2. checked

7

16. Unutar paragraph-a Radio buttons-a treba dodati sljedeće input elemente s atributom type:

a. type – radio

i. ostali atributi:

1. name - radio1

2. value – one

b. type – radio

i. ostali atributi:

1. name – radio1

2. value – two

3. checked

c. type – radio

i. ostali atributi:

1. name – radio1

2. value – three

17. Unutar paragraph-a Selection Lists-a treba dodati sljedeće select tag s atributom name naziva

select1.

8

18. Unutar select taga treba dodati option elemente s sljedećim value atributom:

a. "" (NAPOMENA: ovo su navodnici – i ne pisati ovo u zagradama!!)

i. ostali atributi:

1. disabled

2. selected

3. Unutar taga - -- Select a Cat --

b. cheshire

i. Unutar taga - Cheshire Cat (primjer: <option value="cheshire">Cheshire

Cat</option> )

c. hat

i. Unutar taga - The Cat in the Hat

d. bigglesworth

i. Unutar taga - Mr Bigglesworth

e. fritz

i. Unutar taga - Fritz the Cat

f. spot

i. Unutar taga – Spot

19. Unutar paragraph-a Multiple selection-a treba dodati sljedeće select tag s atributima name naziva

multipleselect1 i multiple.

9

20. Unutar select taga treba dodati option elemente s sljedećim value atributom:

a. volvo

i. Unutar taga – Volvo (primjer: <option value="volvo">Volvo</option> )

b. saab

i. Unutar taga - Saab

c. opel

i. Unutar taga - Opel

d. audi

i. Unutar taga – Audi

21. Cijela HTML forma na mojaDrugastranica.html izgleda ovako:

10

22. Nakon što je HTML datoteka pripremljena, treba pritisnuti Ctrl+Shift+A, odabrati JavaScript File i

pod Name upisati forms (Bez razmaka !!).

23. Nakon što je napravljena JavaScript datoteka, potrebno ju je u mojastranicaFirst.html datoteci

pozvati (slično kako se je pozivala i css datoteka).

11

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

25. Unutar početnog taga script treba dodati dva atributa:

a. type - text/javascript

b. src – forms.js

26. Nakon pozivanja vanjske js datoteke, treba otvoriti forms.js datoteku.

27. Prvo što treba napraviti u javascriptu je standardna validacija HTML forms elemenata.

28. Kako bi se moglo započeti prvo je potrebno definirati par globalnih varijabli:

12

29. Nakon toga treba se napraviti metoda koja će se pozvati s učitavanjem HTML mojastranicaFirst

dokumenta.

30. Metoda InitializeElements treba u globalne varijable eResults i eForm učitati HTML elemente s id-

evima:

a. eResults – results

b. eForm – f1

31. Nakon toga u metodi InitializeElements treba provjeriti je li postoji HTML5 validation API, to će se

učiniti provjeravajući je li prvi element HTML forme ima validity objekt.

32. S provjerom validacije završilo se s dodavanjem globalnih varijable, izradom metode za

inicijalizaciju i pozivanjem te metoda na učitavanju dokumenta; prethodno navedeno izgleda

ovako:

13

33. Sada je potrebno napraviti metode koje će biti vezane za div s id-em results. Trebaju tri metode:

a. function output( s ) – ova metoda će primiti string putem parametra s i prikazati rezultat

b. function errorOutput( s ) – ova metoda će primiti string putem parametra s i prikazivati

greške (ukoliko ih bude)

c. function clearOutput() – metoda briše rezultat ili greške

14

34. U prethodnom koraku je rečeno da će navedene metode manipulirati s divom koji ima id naziva

results, taj div je učitan u globalnu varijablu eResults u InitializeElements metodi, stoga se zapravo

manipulira s HTML-om unutar globalne varijable eResults (odnosno u kodu eResults.innerHTML).

NAPOMENA: text (odnosno string mora biti u paragraph tagovima).

35. U metodi output(s) prikazujemo rezultat kao string koji dobijemo putem parametra s.

36. U metodi errorOutput(s) prikazujemo greške kao string koji dobijemo putem parametra s.

37. U metodi clearOutput() brišu se elementi u divu, predajući prazan string ('').

38. Nakon metoda koje će manipulirati divom s idom results, treba napraviti metodu koja će

provjeravati za svaki pojedini element je li je njegov value ispravan ili ne.

39. Za provjeru ispravnosti value-a napraviti će se if..else uvjet.

40. Ako je element (u metodi parametar e) ispravan treba vratiti boolean true, ako nije treba iščitati

poruku o grešci i tu grešku predati metodi errorOutput(s). Također treba staviti globalnu varijablu

validOkay na false i vratiti false.

15

41. Treba napraviti i metodu koja će prikazivati vrijednosti ovisno o kojem je elementu riječ. Zvati će

se dispValue i dobivati će element kao parametar.

42. Pošto treba vratiti ime elementa i vrijednost (value), u dispValue će se napraviti još jedna metoda,

staviti će se staviti u varijablu v, koja će dobivati putem parametara s vrijednost, a ime će iščitavati

iz parametra e (e.name) dispValue metode.

43. Sada u metodu dispValue treba staviti uvjete za radio, multiselect i checkbox elemente.

16

44. Ako je radio element označen treba pozvati metodu u varijabli v i predati joj value elementa, a ako

nije treba vratiti prazan string.

45. select-multiple može imati više vrijednosti (value) koje mogu biti označene, stoga je u tom uvjetu

potrebno imati definiran niz (array) u kojeg se mogu staviti označene vrijednosti i for petlju koja će

prolaziti kroz te vrijednosti i gledati koja je označena.

46. Svi elementi u select-multiple-u su na neki način indeksirani (i), odnosno imaju svoj broj, stoga sada

treba napisati uvjet u for petlji, ako je taj element označen - da se njegova vrijednost doda u niz

(a), a da ih metoda vrati odvojene zarezom.

17

47. Zadnji uvjet provjerava je li je ti checkbox označen. Ako je označen treba pozvati metodu u varijabli

v i vratiti text „on“, a ako nije treba vratiti text „off“.

48. Ako se je došlo do else dijela, to znači da element forme nije radio, multiple-select, niti checkbox i

da se onda samo prikaže vrijednost koja se nalazi u elementu (e.value) – isto putem metode u

varijabli v.

18

49. Cijela metoda dispValue:

50. Na kraju treba još samo napraviti metodu koja će se pozivati na klik buttona na formi, odnosno

input elementa tipa submit.

51. Metoda display treba prvo očistiti prethodne rezultate s metodom clearOutput(), provjeriti postoji

li HTML5 validacija na stranici, te zatim pomoću for petlje prikazati sve form elemente.

19

52. Čišćenje prethodnih rezultata i provjera validacije:

53. Pomoću for petlje treba prikazati sve elemente forme s id-em f1 (forma s id-em f1 je učitana u

globalnu varijablu eForm prilikom učitavanja html dokumenta pomoću InitializeElements metode).

54. Elementi forme su također na neki način indeksirani, tj. imaju svoj broj, te se na takav način i ide

kroz petlju. Prije samog ispisa postoje dva uvjeta tj. provjere ispravnosti.

20

NAPOMENA:

if (!haveValidation) je isto što i if (haveValidation === false)

if (haveValidation && isValid(e)) je isto što i if (haveValidation === true && isValid(e) ===

true)

55. Na kraju metoda ako postoji serverski kod i ima se gdje spremiti:

56. Nakon završetka programiranja u javascript fileu, treba otvoriti mojastranicaFirst.html i

mojaDrugastranica.html te u form tagu naći atribut onsubmit i u njega staviti return display().

Također isto učiniti i u input elementu type-a submit u atributu onclick.

21

Obračun plaće

Plaća predstavlja primanja koja djelatnik dobije na temelju ugovora o radnom odnosu ili ugovora o

djelu. No iako na račun (žiro ili tekući) dođe novac, to je samo neto iznos. No kako bismo izračunali

neto iznos krenuvši od bruto iznosa? Dijeli nas par koraka.

1. korak

Od bruto plaće prvo se oduzima 20 % (slovima: dvadeset posto) za mirovinsko osiguranje! Odnosno za

mirovinu.

2. korak

Nakon što se bruto plaća umanji za iznos mirovinskog osiguranja, dobije se dohodak. No prije nego se

počne oporezivati dohodak, svaka osoba ima pravo na osobnu poreznu olakšicu od 1.800 kn mjesečno

(21.600 kn godišnje). To je vrlo dobra stvar jer omogućava plaćanje manje poreza, a uvedena je radi

onih koji imaju malu plaću. Dakle, nakon umanjivanja dohotka za iznos osobne olakšice, dobije se

porezna osnovica.

3. korak

Porezi se dijele u 3 skupine:

do 2.200 kn porez je 12%,

od 2.200 do 8.800 kn porez je 25%,

a preko 8.800 porez je 40%

4. korak

Slijedi izračun prireza. A što je to? E to je novac koja ide "lokalnim strukturama", vezan je uz mjesto

gdje imate prijavljeno prebivalište. Prirez se računa na iznos poreza.

5. korak

Zadnji korak jest izračun neto plaće. Taj iznos dobije se oduzimanjem poreza i prireza od dohotka.

22

1. Unutar Visual Studia pritisnite Ctrl i označite mojastranicaFirst.html, te označeno povucite gore ili

dolje kako bi dobili kopiju mojastranicaFirst.html datoteke.

2. Preimenujte mojastranicaFirst - Copy.html u mojaTrecastranica.html.

3. Nakon toga u nav tagu mojastranicaFirst.html datoteke, u prvom anchor tagu ispod unutarnjih

linkova umjesto # stavite url koji vodi do datoteke mojaTrecastranica.html a za naziv stavite Treca

stranica.

4. Nakon toga u nav tagu mojaDrugastranica.html datoteke, u prvom anchor tagu ispod unutarnjih

linkova umjesto # stavite url koji vodi do datoteke mojaTrecastranica.html a za naziv stavite

Treca stranica.

5. u nav tagu mojaTrecastranica.html datoteke, u prvom anchor tagu ispod unutarnjih linkova

umjesto # stavite url koji vodi do datoteke mojaTrecastranica.html a za naziv stavite Treca

stranica.

23

NAPOMENA: Provjerite radi li vam navigacija između svih stranica!

6. Zatim u mojaTrecastranica.html datoteci obrišite sve paragraph i input elemente.

7. U form tagu obrišite i atribute: id, onsubmit, method, te dodajte atribut oninput="".

8. 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 - bruto

2. value - 0

3. autofocus

b. number

i. ostali atributi:

1. id - koef

2. value – 0

c. number

i. ostali atributi

1. id - postotak

2. value – 0

9. 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 – mirovinsko

24

ii. for - bruto koef postotak

b. atributi:

i. id – odbitak

ii. for - bruto koef postotak

c. atributi:

i. id – osnovica

ii. for - bruto koef postotak

d. atributi:

i. id – por

ii. for - bruto koef postotak

e. atributi:

i. id – prirez

ii. for - bruto koef postotak

f. atributi:

i. id – pip

ii. for - bruto koef postotak

g. atributi:

i. id – neto

ii. for - bruto koef postotak

10. Nakon što je HTML datoteka pripremljena, treba pritisnuti Ctrl+Shift+A, odabrati JavaScript File i

pod Name upisati placaOutput (Bez razmaka !!).

11. U head dijelu mojaTrecaStranica.html datoteke pronađite script tag i u atribut src umjesto

forms.js, stavite placaOutput.js

12. Nakon toga otvorite placaOutput.js datoteku i definirajte 3 globalne varijable.

25

13. Treba se definirati metoda koja će dohvatiti vrijednosti (value) iz HTML elemenata pomocu id-a i

napuniti globalne varijable. Ta metoda će imati naziv getValues()

14. U toj metodi trebaju se napuniti globalne varijable.

15. Nakon punjenja globalnih varijabli treba napraviti metodu koja će vršiti kalkulacije po navedenim

koracima koracima kod naslova Obračuna plaće. Metoda će imati naziv calc()

16. Na početku metode calc, treba napraviti formule za 1. korak(Od bruto plaće prvo se oduzima 20

% (slovima: dvadeset posto) za mirovinsko osiguranje! Odnosno za mirovinu.).

17. Zatim 2. korak(Nakon što se bruto plaća umanji za iznos mirovinskog osiguranja, dobije se

dohodak.)

18. 2. korak (No prije nego se počne oporezivati dohodak, svaka osoba ima pravo na osobnu poreznu

olakšicu od 1.800 kn mjesečno (21.600 kn godišnje).)

26

19. 2. korak ( Dakle, nakon umanjivanja dohotka za iznos osobne olakšice, dobije se porezna

osnovica.)

20. 3. korak (Porezi se dijele u 3 skupine:

1. do 2.200 kn porez je 12%,

2. od 2.200 do 8.800 kn porez je 25%,

3. a preko 8.800 porez je 40%)

21. 4. korak (Slijedi izračun prireza. A što je to? E to je novac koja ide "lokalnim strukturama", vezan

je uz mjesto gdje imate prijavljeno prebivalište. Prirez se računa na iznos poreza.)

27

22. 5. korak (Zadnji korak jest izračun neto plaće. Taj iznos dobija se oduzimanjem poreza i prireza

od dohotka.)

23. Poslije rješavanja svih koraka, napraviti će se metoda kojoj će se predati varijable za koje su se

vršili izračuni. Metoda će imati naziv fillElements

24. Metoda će postavljati vrijednosti (value) u output elemente sa sljedećim id-evima:

a. mirovinsko

b. odbitak

c. osnovica

d. por

e. prirez

f. pip

g. neto

25. Metodu fillElements treba pozvati na kraju metode calc (odmah ispod varijable neto) i predati joj

varijable koje zahtjeva.

28

26. Cijela calc metoda:

27. Na kraju treba napraviti metodu koja će pozvati metode getValues() i calc(), ta metoda će se zvati

getNCalc()

29

28. Pozivanje prethodno navedenih metoda.

29. Nakon pozivanja treba u mojaTrecastranica.html datoteci u form tag-u u oninput atributu pozvati

metodu getNCalc()