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()