Vjezba2

1

Vjeba 2: 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. 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 oznaite mojastranicaFirst.html, te oznaeno 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 obriite 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 sljedee paragraph-e ():

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 sljedee 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 sljedee 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 sljedee select tag s atributom name naziva

select1.

8

18. Unutar select taga treba dodati option elemente s sljedeim 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: Cheshire

Cat )

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 sljedee select tag s atributima name naziva

multipleselect1 i multiple.

9

20. Unutar select taga treba dodati option elemente s sljedeim value atributom:

a. volvo

i. Unutar taga Volvo (primjer: Volvo )

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

11

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

25. Unutar poetnog 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 zapoeti prvo je potrebno definirati par globalnih varijabli:

12

29. Nakon toga treba se napraviti metoda koja e se pozvati s uitavanjem HTML mojastranicaFirst

dokumenta.

30. Metoda InitializeElements treba u globalne varijable eResults i eForm uitati 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

uiniti provjeravajui je li prvi element HTML forme ima validity objekt.

32. S provjerom validacije zavrilo se s dodavanjem globalnih varijable, izradom metode za

inicijalizaciju i pozivanjem te metoda na uitavanju 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

greke (ukoliko ih bude)

c. function clearOutput() metoda brie rezultat ili greke

14

34. U prethodnom koraku je reeno da e navedene metode manipulirati s divom koji ima id naziva

results, taj div je uitan 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 greke kao string koji dobijemo putem parametra s.

37. U metodi clearOutput() briu se elementi u divu, predajui 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 iitati

poruku o greci i tu greku predati metodi errorOutput(s). Takoer 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. Poto 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 iitavati

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 oznaen treba pozvati metodu u varijabli v i predati joj value elementa, a ako

nije treba vratiti prazan string.

45. select-multiple moe imati vie vrijednosti (value) koje mogu biti oznaene, stoga je u tom uvjetu

potrebno imati definiran niz (array) u kojeg se mogu staviti oznaene vrijednosti i for petlju koja e

prolaziti kroz te vrijednosti i gledati koja je oznaena.

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

treba napisati uvjet u for petlji, ako je taj element oznaen - 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 oznaen. Ako je oznaen treba pozvati metodu u varijabli

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

48. Ako se je dolo do else dijela, to znai da element forme nije radio, multiple-select, niti checkbox i

da se onda samo prikae 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 oistiti prethodne rezultate s metodom clearOutput(), provjeriti postoji

li HTML5 validacija na stranici, te zatim pomou for petlje prikazati sve form elemente.

19

52. ienje prethodnih rezultata i provjera validacije:

53. Pomou for petlje treba prikazati sve elemente forme s id-em f1 (forma s id-em f1 je uitana u

globalnu varijablu eForm prilikom uitavanja html dokumenta pomou InitializeElements metode).

54. Elementi forme su takoer na neki nain indeksirani, tj. imaju svoj broj, te se na takav nain 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 zavretka programiranja u javascript fileu, treba otvoriti mojastranicaFirst.html i

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

Takoer isto uiniti i u input elementu type-a submit u atributu onclick.

21

Obraun plae

Plaa predstavlja primanja koja djelatnik dobije na temelju ugovora o radnom odnosu ili ugovora o

djelu. No iako na raun (iro ili tekui) doe novac, to je samo neto iznos. No kako bismo izraunali

neto iznos krenuvi od bruto iznosa? Dijeli nas par koraka.

1. korak

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

mirovinu.

2. korak

Nakon to se bruto plaa umanji za iznos mirovinskog osiguranja, dobije se dohodak. No prije nego se

pone oporezivati dohodak, svaka osoba ima pravo na osobnu poreznu olakicu od 1.800 kn mjeseno

(21.600 kn godinje). To je vrlo dobra stvar jer omoguava plaanje manje poreza, a uvedena je radi

onih koji imaju malu plau. Dakle, nakon umanjivanja dohotka za iznos osobne olakice, 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 izraun prireza. A to je to? E to je novac koja ide "lokalnim strukturama", vezan je uz mjesto

gdje imate prijavljeno prebivalite. Prirez se rauna na iznos poreza.

5. korak

Zadnji korak jest izraun neto plae. Taj iznos dobije se oduzimanjem poreza i prireza od dohotka.

22

1. Unutar Visual Studia pritisnite Ctrl i oznaite mojastranicaFirst.html, te oznaeno 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 izmeu svih stranica!

6. Zatim u mojaTrecastranica.html datoteci obriite sve paragraph i input elemente.

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

8. Unutar HTML forme potrebno je dodati, unutar paragraph-a ( ), sljedee 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 ( ), u div s id-em results sa

sljedeim atributima:

a. atributi:

i. id mirovinsko

24

ii. for - bruto koef postotak

b. atributi:

i. id odbitak


c. atributi:

i. id osnovica


d. atributi:

i. id por


e. atributi:

i. id prirez


f. atributi:

i. id pip


g. atributi:

i. id neto


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 pronaite 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 vriti kalkulacije po navedenim

koracima koracima kod naslova Obrauna plae. Metoda e imati naziv calc()

16. Na poetku metode calc, treba napraviti formule za 1. korak(Od bruto plae prvo se oduzima 20

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

17. Zatim 2. korak(Nakon to se bruto plaa umanji za iznos mirovinskog osiguranja, dobije se

dohodak.)

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

olakicu od 1.800 kn mjeseno (21.600 kn godinje).)

26

19. 2. korak ( Dakle, nakon umanjivanja dohotka za iznos osobne olakice, 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 izraun prireza. A to je to? E to je novac koja ide "lokalnim strukturama", vezan

je uz mjesto gdje imate prijavljeno prebivalite. Prirez se rauna na iznos poreza.)

27

22. 5. korak (Zadnji korak jest izraun neto plae. Taj iznos dobija se oduzimanjem poreza i prireza

od dohotka.)

23. Poslije rjeavanja svih koraka, napraviti e se metoda kojoj e se predati varijable za koje su se

vrili izrauni. Metoda e imati naziv fillElements

24. Metoda e postavljati vrijednosti (value) u output elemente sa sljedeim 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()

Vjezba2

Documents

Transcript of Vjezba2