|
Uvod |
| Vježba broj 1 |
Uz pomoć JavaScript-a ispisati rečenicu: Naš prvi program u JavaScriptu.
Rješenje:
01.html
|
|
|
|
|
| Vježba broj 2 |
Uz pomoć JavaScript-a definisati varijablu x, pridružiti joj neki broj pa onda ispisati rečenicu “x puta 5 je ___”, gdje će se na mjesto crtice nalaziti izračunata vrijednost.
Rješenje:
02.html
|
|
|
|
|
| Vježba broj 3 |
Uz pomoć JavaScript-a ispisati sljedeću rečenicu:
Napoleon je rekao: "Svijet pati mnogo. Ne zbog nasilja loših ljudi. Nego zbog šutnje dobrih ljudi."
Rješenje:
03.html
|
|
|
|
|
| Vježba broj 4 |
Napraviti JavaScript kod da radi sljedeće: čim se otvori stranica da od korisnika traži da unese svoje ime, pa da poslije toga unese broj godina. Poslije toga u prozoru treba ispisati velikim slovima ime korisnika i koliko ima godina.
Rješenje:
04.html
|
|
|
|
|
| Rad sa dugmadima |
| Vježba broj 5 |
Na stranicu ubaciti dugme sa natpismo „Klikni me ako si sretan“. Napraviti JavaScript kod da radi sljedeće: Poslije napravljenog klika u posebnom prozoru ispisati „Ne znam šta ću od sreće silne“.
Rješenje:
05.html
|
|
|
|
|
| Vježba broj 6 |
Na web stranicu postaviti dva dugmeta, redom, sa natpisima „Klikni me ako si sretan“ i „Klikni me ako si nesretan“. Napraviti JavaScript kod da nakon napravljenog klika na prvo dugme, na prozor ispod i iznad napravljenih dugmadi ispiše rečenicu: „Dešavat će se da ljudi očekuju od vas da baš vi, da baš vi, donesete kafu!“. Ako se napravi klik na drugo dugme na isto mjesto ispisati rečenicu: „Vjerovatno je rano ledeno jutro!“
Rješenje:
06.html
|
|
|
|
|
| Vježba broj 7 |
Na stranici postaviti dugme sa natpisom „Klikni me ako si sretan“. Napraviti JavaScript kod da radi sljedeće: Nakon napravljenog klika izbaciti prozor sa pitanjem „Da li ste stariji od 20 godina“ gdje se mogu kliknuti samo na dugmad OK i Cancel.
Nakon napravljenog klika na OK, iznad i ispod ubačenog dugmeta ispisati rečenicu „Dešavat će se da ljudi očekuju od vas da baš vi, da baš vi, donesete kafu!“. Ako se klik napravi na Cancel, na ista mjesta ispisati rečenicu „Kako niste više u srodstvu sa kapetanom broda, bez položaja ste.“
Rješenje:
07.html
|
|
|
|
|
| Vježba broj 8 |
Na web stranicu postaviti dva polja u koja se mogu ukucati riječi
i ubaciti dugme sa natpisom Spoji riječi. Napraviti JavaScript kod da radi sljedeće: Nakon napravljenog klika na dugme dvije riječi upisane u polja ispisati ispod dugmeta jednu ispod druge sa razmakom između njih.
Rješenje:
08.html
|
|
|
|
|
| do - while petlja |
| Vježba broj 9 |
Na web stranicu postaviti pet tekstualnih polja u koja se mogu upisati brojevi a ispod njih postaviti dugme sa natpisom „Sortiraj brojeve“: Napraviti JavaSkript kod takav da se nakon klika na dugme sortirani brojevi ispišu ispod dugmeta.
Rješenje:
09.html
|
|
|
|
|
| Dugmad i tekstualna polja |
| Vježba broj 10 |
Na web stranicu postaviti dva dugmeta. Napraviti JavaSkript kod takav da se nakon klika na prvo dugme na njemu promjeni riječ, a kada se miš dovuče iznad drugog dugmeta da se natpis tog drugog dugmeta promjeni na neku novu vrijednost.
Rješenje:
10.html
|
|
|
|
|
| Vježba broj 11 |
Na web stranicu ubaciti jedno polje za upis teksta i jedno dugme pored njega. Napraviti JavaSkript kod takav da se nakon svakog napravljenog klika riječ unutar tekstualnog polja promjeni.
Rješenje:
11.html
|
|
|
|
|
| for petlja |
| Vježba broj 12 (prije ove vježbe uraditi 15 i 13 vježbu, pa ovu vježbu ostaviti za razmišljanje) |
Na web stranicu postaviti 10 praznih tekstualnih polja i postaviti dugme sa natpisom „Kreni“ ispod tih polja. Napraviti JavaSkript kod takav da se nakon napravljenog klika na dano dugme sva ubačena polja popune.
Rješenje:
12.html
|
|
|
|
|
| Vježba broj 13 |
Na web stranicu postaviti dva tekstualna polja i dugme ispod njih. Napraviti JavaSkript kod takav da kada se napravi klik na dano dugme da se u dva tekstualna polja pojavi novi sadržaj .
Rješenje:
13.html
|
|
|
|
|
| Vježba broj 14 |
Na web stranicu postaviti šest tekstualna polja i dugme ispod njih sa natpisom „Klikni me ako si sretan“. Napraviti JavaScript kod koji će nakon napravljenog klika popuniti dana polja a ime dugmeta preimenovati u neko novo ime.
Rješenje:
14.html
|
|
|
|
|
| Vježba broj 15 |
Na web stranicu postaviti jedno tekstualna polja i dugme ispod njega sa natpisom "Klikni me ako si sretan". Napraviti JavaScript kod koji će nakon napravljenog klika na u polje ispisati broj 987654321.
Rješenje:
15.html
|
|
|
|
|
| Vježba broj 16 |
Na web stranicu postaviti jedno dugme sa natpisom „Klikni me ako si sretan“. Napraviti JavaScript kod koji će na svaki klik mijenjati ime dugmeta u neko novo ime.
Rješenje:
16.html
|
|
|
|
|
| Vježba broj 17 |
Na web stranicu postaviti deset tekstualnih polja i jedno dugme ispod njih. Napraviti JavaScript kod koji će na napravljeni klik popuniti svih deset tekstualnih polja. Primjetimo da je sličan zadatak već bio, a ovdje dajemo rješenje na drugačiji način.
Rješenje:
17.html
|
|
|
|
|
| Pravljenje linka |
| Vježba broj 18 |
Napraviti dvije web stranice koje će imati naslov i dugme ispod naslova. Napraviti JavaScript kod koji će na klik na dugme iz prve stranice otvoriti drugu stranicu u istom prozoru, a na napravljeni klik na dugme na drugoj stranici, vratiće se na prvu stranicu.
Rješenje:
18.html
|
|
|
|
|
Korišetenje gotovih paketa
(iz ovog dijela je zadaća) |
| Vježba broj 19 (JoxView) |
Ovaj primjer će prezentirati na koji način možemo koristiti gotov JavaScript paket.
Sa web stranice
http://yoxigen.com/yoxview/Download.aspx
skinuti posljednju verziju JoxView paketa i „otpakovati“ je u svoj folder (u trenutku pisanja ovog teksta verzija je jquery.yoxview-2.21.zip).
Rješenje:
19.html
|
|
|
|
|
| Vježba broj 20 (FancyBox) |
Ovaj primjer će prezentirati na koji način možemo koristiti gotov JavaScript paket.
Sa web stranice
http://fancyapps.com/fancybox/
skinuti posljednju verziju JoxView paketa i „otpakovati“ je u svoj folder (u trenutku pisanja ovog teksta verzija je fancyapps-fancyBox-v2.1.5-0-ge2248f4.zip).
Rješenje:
20.html
|
|
|
|
|
| Vježba broj 21 (Zadaća) |
Sa jedne od sljedećih stranica iskoristiti i u obliku gornje dvije vježbe prezentirati gotov JavaScript paket:
1. http://bassistance.de/jquery-plugins/jquery-plugin-validation
2. http://jquery.malsup.com/cycle/
3. http://tablesorter.com/docs/
4. http://tutorialzine.com/2012/04/mobile-touch-gallery/
5. http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
6. http://joelb.me/scrollpath/
7. http://jschr.github.io/textillate/
8. http://johnpolacek.github.io/superscrollorama/
9. http://nick-jonas.github.io/windows/
10.
http://amsul.ca/pickadate.js/
Puno više stvari možete pronaći na
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/
http://speckyboy.com/2008/04/01/top-10-javascript-frameworks-which-do-you-prefer/
|
|
|
|
|
