JavaScript

P R E D AVA N J A I VJ E Ž B E I Z KO L E G I J A „ I N T E R N E T I W E B T E H N O L O G I J E ”
Primjer: Koristeći elemente HTML-a, CSS-a i
JavaScripta izraditi jednostavnu statičku web stranicu
koja sadrži funkcionalni kalkulator kao na slici:

2
Korak 1 – kreirati i stilizirati dokument i okvirni div
element

3
Izgled stranice

4
Korak 2 – dodati naslov

5
Izgled stranice

6
Korak 3 – kreirati i stilizirati tablicu za kalkulator

7
Izgled stranice

8
Korak 4 – popuniti sadržajem prvi redak u tablici

9
Izgled stranice

10
Korak 5 – popuniti sadržajem drugi redak u tablici

11
Izgled stranice

12
Korak 6 – popuniti sadržajem treći i četvrti redak u
tablici

13
Izgled stranice

14
Korak 7 – popuniti sadržajem zadnji redak u tablici

15
Izgled stranice

16
Korak 8 – Napisati JavaScript funkciju koja će omogućiti
prikaz kliknutih brojeva u polju za rezultat

17
Korak 8 – Unutar HTML-a na svaki odgovarajući
gumb dodati događaj koji će se izvršiti na klik mišem.

18
 Izgled stranice

Nakon ovoga moguće je klikati brojeve na kalkulatoru, ali i dalje nema rezultata

19
Korak 9 – Napisati JavaScript funkciju koja će omogućiti
prikaz rezultata nakon klika na gumb jednakosti

20
Izgled stranice

Prikazan je rezultat prethodno unesene naredbe (2+3-6) nakon klika na „=”

21
 Korak 9 – Napisati JavaScript funkciju koja će omogućiti
brisanje na gumb „C”

Stranica izgleda isto, ali je moguće obrisati rezultat klikom na gumb „C”.

22
 Korak 10 – Dodati mogućnost automatskog brisanja
rezultata nakon klika na bilo koji gumb
U JS-u kreirati globalnu varijablu naziva “izvrseno” i vrijednost joj postaviti na “false”:

Zatim u funkciju “izvrsiIzraz()” dodati naredbu za promjenu vrijednosti varijable “izvrseno”

na “true”:

23
 Korak 10 – Dodato mogućnost automatskog brisanja
rezultata nakon klika na bilo koji gumb
U funkciju “dodajRezultat()” dodati još i:

Stranica izgleda isto, ali se rezultat briše klikom na bilo koji gumb.

24
Koristeći elemente HTML-a, CSS-a i JavaScripta izraditi jednostavnu
statičku web stranicu koja sadrži funkcionalnu igricu križić-kružić:

25
Korak 1 – pozadina, okvirni div element i zaglavlje

26
Izgled stranice

27
Korak 2 – navigacijski bar i div element sa tekstom

28
Izgled stranice

29
Korak 3 – tablica za igricu - HTML

30
Korak 3 – tablica za igricu - CSS

31
Izgled stranice

32
Korak 4 – JavaScript kod za funkcionalnost igrice

33
Korak 4 – u HTML-u pozvati funkciju „odigraj”

34
Korak 2 – dodati provjeru pobjednika

35
Izgled stranice

36