Scribd Logo
Upload

Welcome to Scribd!

  • Javascript Tutorijali

    Uploaded by

    Iva Waya Vasiljev
    15 views12 pages
    java

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    java

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    15 views12 pages

    Javascript Tutorijali

    Uploaded by

    Iva Waya Vasiljev
    java

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 12

    JAVASCRIPT TUTORIJALI Va prvi Javascript kod (Hello World) Da biste umetnuli Javascript u va HTML kod morate korisititi <script>

    tag. Evo najjednostavnijeg primjera kako neto napisati pomou Javascripta. Izmeu <body> i </body> napiite sljedee: <script type="text/javascript"> document.write("Hello World!") </script>

    Pogaate, ovaj kod e na ekran ispisati Hello World! Pa da pojasnimo sada dio po dio. Kao to smo ve rekli za umetanje javascripta u va HTML kod koristimo <script> tag. Znai sa <script type="text/javascript"> i </script> govorimo browseru gdje poinje i gdje zavrava Javascript. Komanda document.write je standardna komanda za ispisivanje teksta na ekran. Dakle da bi se neto ispisalo na ekran morate napisati document.write i u zagradu pod navodnicima staviti tekst koji elite da se ispie. Ako elite ispisati neki tekst ali da ga prethodno oblikujete nekim html tagom, to moete uiniti ovako: <script type="text/javascript"> document.write("<h1>Hello World!</h1>") </script>

    Gdje stavljati javascript na stranici Postoje 3 mjesta na koje moete staviti va Javascript kod. Izmeu <head> i </head> elemenata, izmeu <body> i </body> elemenata i kao eksternu skriptu. Head dio Kada skrite stavimo u izmeu head elemenata onda znamo da e nam se skripte uitati prije nego ih pozovemo. Dakle kada stavljate skriptu u Head element onda to radite na ovom principu: <html> <head> <script type="text/javascript"> .... </script> </head>

    Body dio Ove skripte e se izvriti kada se stranica uita. Takve skripte se upisuju na ovaj nain:

    <html> <head> </head> <body> <script type="text/javascript"> .... </script> </body>

    Eksterni Javascript Koristi se kada jednu skriptu trebate ispisati na vie stranica, pa da ju ne piete na svakoj, napravite jednu eksternu i koristite ju za sve stranice. Kada napiete skriptu usnimite ju sa ekstenzijom "*.js" (npr. skripta.js)Takve skripte se pozivaju na sljedei nain: <html> <head> <script src="skripta.js"> </script> </head> <body> </body> </html>

    Znai pod src="..." ide path do vae skripte.

    Varijable Varijable se koriste da u sebi pohrane neki podatak. Evo za poetak jednog primjera pa emo ga postepeno objasniti. <script type="text/javascript"> var stranica = "www.tutorijali.net" document.write(stranica) document.write("<h1>"+stranica+"</h1>") </script>

    Rezultat e biti ispisano prvo malim slovima www.tutorijali.net a zatim velikim slovima taj isti tekst. Kao to smo ve govorili u prolim tutorijalima, skriptu otvaramo tako da napiemo <script type="text/javascript"> Zatim deklariramo varijablu. Varijablu smo nazvali stranica. Zatim smo stavili znak jednakosti i u navodnike upisali vrijednost varijabli. U ovom sluaju je to "www.tutorijali.net". Trei redak normalno ispisuje vrijednost varijable dok trei redak formatira tekst sa html kodom (<h1>). Znai stavite navodnike pa html tag koji formatira tekst, stavite jo jedne navodnike i izmeu pluseva upiete ime varijable. Zatim zatvorite sve to ste otvorili (navodnike, html tag i opet navodnike)

    Vrijednost varijable se tjekom izvravanja skripte moe promijeniti. Ne mora skroz ostati jednaka. Pravila za imenovanje varijabli - Imena varijabli su case sensitive to znai osjetljiva na velika i mala slova, nije isto "var ime" i "var Ime" - Imena varijabli moraju poinjati sa slovom ili crticom dolje ( _ )

    Varijablu moete deklarirati i bez poetnog "var", dakle: var ime = "neko ime" i ime = "neko ime"

    If...Else petlja Ovaj nain se koristi kada elite izvriti jedan dio koda ako je zadovoljen neki uvjet, a drugi dio koda ako nije zadovoljen. Npr. ako je ime Martina onda se ispie reenica "Dobar dan efice!" u suprotnom se ispie "Dobar dan (ime u varijabli) " Pogledajmo primjer: <script type="text/javascript"> ime = "Ivana" if (ime=="Martina") { document.write("<b>Dobar dan sefice!</b>") } else { document.write("<b>Dobar dan "+ime+" !</b>") } </script>

    Dakle u ovom sluaju e se ispisati Dobar dan Ivana jer je ime Ivana to ne zadovoljava prvi uvjet nego se ispisuje reenica Dobar dan i dodaje se sadraj varijable (u ovom sluaju Ivana)

    If...else if...else petlja Ova petlja se koristi kada imate vie moguih uvjeta za zadovoljiti. Kao primjer napravit emo jedan kod koji e provjeravati to pie u varijabli ime i na temelju toga e ispisivati svakom drugaiju reenicu. A na kraju ako nije niti jedno zadano ime onda e se ispisati reenica "Dobar dan (ime u varijabli)" <script type="text/javascript">

    ime = "Katarina" if (ime=="Marina") { document.write("<b>Dobar dan sefice!</b>") } else if (ime=="Marina") { document.write("<b> O mala, sta ima? </b>") } else if (ime=="Monika") { document.write("<b>Dobar dan, kako ste danas Monika?</b>") } else { document.write("<b>Dobar dan "+ime+" !</b>") } </script>

    Switch Switch je vrlo slina stvar kao i If...elseif...else, isto se koristi kada imate vie moguih uvjeta za zadovoljenje. Koristit emo iste reenice za ista imena kao iz prolog tutorijala samo pomou Switch naina. <script type="text/javascript"> ime = "Katarina" switch (ime) { case "Martina": document.write("<b>Dobar dan sefice!</b>") break case "Marina": document.write("<b> O mala, sta ima? </b>") break case "Monika": document.write("<b>Dobar dan, kako ste danas Monika?</b>") break default: document.write("<b>Dobar dan "+ime+" !</b>") } </script>

    Primjetite da iza svakog Casea ide dvotoka ":" i da ime npr. Monika, Marina i sva ostala moraju biti u navodnicima. Ako piete Case 1: Case 2: itd. znai brojevima onda vam navodnici ne trebaju. default: se koristi za ispis ako niti jedan uvjet nije zadovoljen (slino kao Else kod prolog tutorijala).

    Operatori Operatori u javascriptu su slini sa svim ostalim operatorima u drugim programskim jezicima. Matematiki operatori Operator Funkcija Primjer + zbrajanje 1 + 2 - oduzimanje 4 - 3 * mnoenje 5 * 6 / djeljenje 8 / 2 % ostatak 25 % 10 Usporeivajui operatori -koriste se da bi provjerili odnos izmeu varijabli i/ili vrijednosti. Imaju dva rezultata :true i false: Operator Znaenje Primjer Rezultat == jednako $a == $b false != nije jednako $a != $b true < manje od $a < $b true > vee od $a > $b false <= manje ili jednako od $a <= $b true >= vee ili jednako od $a >= $b false

    Funkcije u Javascriptu Ako ve imate programerskog iskustva onda vam ovo nee predstavljati neku novost. Ako nemate, onda paljivo prouite ovaj tutorijal. to je funkcija? Funkcija je dio koda koji neprimjetno eka dok se ne pozove. Funkcije su jako dobra stvar kod nekih zadataka koje stalno treba ponavljati. Funkcija se ne izvrava pri uitavanju stranice zato svaka funkcija mora biti u <head> dijelu stranice. Kreiranje funkcije je vrlo jednostavno i brzo. Pogledajmo primjer: <html> <head> <script type="text/javascript"> <!-function popup() { alert("Pozdrav od Tutorijali.Net tima!") } //--> </script> </head> <body> <input type="button" onclick="popup()" value="Klikni"> </body> </html>

    Stvar je vrlo jednostavna. Kaete browseru da pravite funkciju sa function i dajete neko ime funkciji, u ovom sluaju popup(). Zatim dalje piete normalan Javascript kod. Pripazite na to da ne

    izostavite vitiaste zagrade { i } prije i poslje koda. U sljdeem tutorijalu emo nauiti neto vie o aleritma odnosno popup prozorima.

    Alerti Alert box moe biti veoma koristan kod raznih formulara kod kojih provjerimo da li su sva polja popunjena, ako nisu onda iskoi prozori (alert) i obavijesti korisnika da nisu sva polja popunjena. U predhodnom tutorijalu kod funkcija ste nauili ako napraviti jednostavan alert, a ovdje emo se malo vie pozabaviti s njima. Evo primjera kako napraviti alert box sa vie redova: <html> <head> <script type="text/javascript"> function popup() { alert("Pozdrav svima. Kako ste, sta se radi?" + '\n' + "Evo ovo pisem u novi redak") } </script> </head> <body> <form> <input type="button" onclick="popup()" value="Klikni ovdje"> </form> </body> </html>

    Da pojasnimo. Pravite normalno alert box i onda sa + i + odvajate kod i u jednostruke navodnike piete \n to oznaava novi redak. Confirm box Ovdje e iskoiti alert box gdje moete birati izmeu tipke OK i Cancel: <html> <head> <script type="text/javascript"> function popup() { var ime=confirm("Pritisnite tipku") if (ime==true) { document.write("Pritisnuli ste tipku OK") } else { document.write("Pritisnuli ste tipku Cancel") } } </script> </head> <body>

    <form> <input type="button" onclick="popup()" value="Klikni ovdje"> </form> </body> </html>

    Pogledajte ovdje, definirate varijablu ime sa: var ime=confirm("Pritisnite tipku") i pridodajete joj vrijednost confirm alerta, i onda sa if (ime==true) provjeravate da li je korisnik kliknio na OK tipku, ako je ispisuje reenicu da ste pritisnuli OK, ako nije, kod: else { document.write("Pritisnuli ste tipku Cancel") } ispisuje da ste kliknuli na Cancel. Vjerujem da vam je sve jasno. Prompt box Prompt box vam je prozori gdje trebate neto upisati. Evo primjera: <html> <head> <script type="text/javascript"> function popup() { var ime=prompt("Unesite vase ime") if (ime!=null && ime!="") { document.write("Pozdrav " + ime ) } } </script> </head> <body> <form> <input type="button" onclick="popup()" value="Klikni ovdje"> </form> </body> </html>

    Dakle isto kao i kod confirm boxa i ovdje definirate varijablu ime sa: var ime=prompt("Unesite vase ime") samo to ovdje prije zagrade pie prompt a ne confirm. Zatim sa: if (ime!=null && ime!="") provjeravate ako je ime upisano i ako ime nije prazno neka se ispie reenica. Eto to bi bilo to, nadam se da vam je sve jasno. Ako nije pitajte :)

    For Loop For Loop se kao i u ostalim programskim jezicima koristi za ponavljanje nekog koda. U ovom tutorijalu emo imati primjer ponavljanja jedne reenice uz promjenu broja za svaki novi redak. Evo primjera: <script type="text/javascript"> for (i = 0; i <= 5; i++)

    { document.write("The number is " + i) document.write("<br />") } </script>

    A sada da objasnimo sve to smo napisali. Dakle piemo: for (i = 0; to znai ispisuj i, poetna vrijednost slova i = 0 <= 5; ispisuj sve dok je i manji od 5 i++ poveavaj i za jedan broj zatim piemo vitiastu zagradu i unutra reenicu pomou document.write. Sa navodnicima i znakom + na kraju odvajamo tekst od varijable i, i ispisujemo. Document.write("<br />") pogaate, ispisuje novi red. Zatvaramo vitiastu zagradu i zatvaramo kod sa </script> .

    While Loop While Loop je vrlo slian For Loop nainu. Isto se koristi za ponavljanje ispisa dok se ne zadovolji neki uvjet. Evo primjera: <script type="text/javascript"> i = 0 while (i <= 10) { document.write("The number is " + i) document.write("<br />") i++ } </script>

    Pa da objasnimo. Sa i=0

    Definiramo varijablu "i" i dodajemo joj vrijednost 0. Zatim sa while (i <= 10)

    kaemo kodu da radi "neku radnju" dok je vrijednost varijable "i" manji ili jednak broju 10.

    Zatim otvaramo vitiastu zagradu { i unutra nareujemo ispis reenice koja e se ispisivati kao "neka radnja" iz prolog koraka. Naravno pazite kod ispisa da varijablu "i" stavite iza navodnika u zagradi. Ispod se ispisuje i <br /> to oznaava novi red. Zatim piemo i++

    to govori kodu da poslje svakog ispisanog broja povea vrijednost varijable "i" za jedan broj. Zatim zatvaramo vitiastu zagradu } koja oznaava kraj onoga to je u While Loop petlji.

    Do...While Loop Do...While Loop je jedna vrsta while loop. Kod ovog ponavljanja kod e se izvriti jednom i ponavljat e se toliko dugo dok je odreeni uvjet istinit. Evo primjera: <html> <body> <script type="text/javascript"> var i=0 do { document.write("Broj " + i) document.write("<br />") i=i+1 } while (i<9) </script> </body> </html>

    Dakle, ovako bismo itali ovaj kod: Varijabla i je 0, ispisuj Broj i dodaj vrijednost varijable i, s tim da se kod svakog ispisa varijabla "i" povea za 1.

    Prekidanje i nastavak Loopova (Break - Continue) U Loopovima koristimo Break i Continue da bismo prekinuli i nastavili izvravati Loop. Break Naredbu Break emo iskoristiti da prekinemo Loop kada doe do odreenog uvjeta. Evo primjera:

    <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { if (i==3){break} document.write("Broj " + i) document.write("<br />") } </script>

    Dakle, normalno pravimo For Loop tako da zadamo varijablu i=0 i napravimo da se varijabli i dodaje jedan broj sve dok ne doe do broja 10. Ali pomou If naredbe kaemo kodu da prekine izvravanje koda ukoliko je varijabla i=3. if (i==3){break} Primjetite da je break napisano u vitiastim zagradama. Rezultat e naravno biti: Broj 0 Broj 1 Broj 2 Continue Continue naredba e prekinuti odnosno preskoiti ispis kada doe do odreenog uvjeta i nastaviti dalje. Continue naredba sama prekida pa kada koristite continue nema potrebe da stavljate Break. Evo primjera: <script type="text/javascript"> var i=0 for (i=0;i<=10;i++) { if (i==3){continue} document.write("Broj " + i) document.write("<br />") } </script>

    Sada smo u vitiaste zagrade stavili continue umjesto break to e rezultirati preskakanjem broja 3. Dakle rezultat e biti: Broj Broj Broj Broj Broj Broj Broj Broj Broj Broj 0 1 2 4 5 6 7 8 9 10

    Arrays to su Arrays? Arrays je zapravo skup podataka sauvan u jednoj varijabli. Npr. Ako imate firmu sa 10 zaposlenika u jednoj varijabli ih moete imati ovako: zaposlenik[0] = "Petar" zaposlenik[1] = "Marko" zaposlenik[2] = "Ivana" ... itd. Evo cijelog primjera: <script type="text/javascript"> var zaposlenik = new Array() zaposlenik[0] = "Petar" zaposlenik[1] = "Marko" zaposlenik[2] = "Ivana" { document.write(zaposlenik[1]) } </script>

    To e, pretpostavljate, ispisati na ekran "Marko". Array moete napraviti na jo jedan nain: <script type="text/javascript"> var zaposlenik = new Array("Petar", "Marko", "Ivana") { document.write(zaposlenik[1]) } </script>

    Ovo e takoer na ekran ispisati "Marko", jer je uvijek prvi podatak u arrayu nulti.

    Nasumian odabir slike Siguran sam da ste esto vidjeli, eljeli ili traili skripte iji su poslovi nasumino izabrati komad koda i prikazati ga, bile to slike ili neto drugo. Takvih skripta ima na tone na internetu a u ovom tutorijali u vam pokazati kako napraviti svoju skriptu i objasniti svaki korak. U biti, nema koraka nego objanjenje uz svaku liniju koda. <script language="JavaScript"> /*U sljedeu varijablu unesite broj koji e predstavljati broj slika koje elite

    nasumino prikazati */ var broj=3; /* Deklaracija varijable u kojoj se pomou funkcije nasuminog odabira kod svakog uitavanja pridruuje nasumian broj od 0 do vrijednosti varijable 'broj' */ var nasumicno=Math.floor(Math.random()*broj); /* Sad dolazi dio koda u kojem upisujete kodove za vae slike. */ if(nasumicno==0){ document.write("Ovdje unesite HTML kod za vau prvu sliku"); } else if(nasumicno==1){ document.write("Ovdje unesite HTML kod za vau drugu sliku"); } else if(nasumicno==2){ document.write("Ovdje unesite HTML kod za vau treu sliku"); } //Kraj skripte </script>

    To je to. Sada se sigurno pitate to ako imam vie od 3 slike? Odgovor je sljedei. Prvi korak je promijeniti vrijednost varijable 'broj'. U nju upiite ukupan broj slika od kojih elite jednu nasumino prikazati. Zatim, prepiite kod za ispis vaih slika za svaku dodatnu sliku i izmijenite kod sa odgovarajuim. Takoer, VANO je da promijenite broj u zagradi. Za svaku sljedeu sliku broj se poveava za 1. Npr. (nasumicno==3) u (nasumicno==4) za sljedeu sliku pa onda u (nasumicno==5) za jo jednu sliku itd.

    You might also like