[ New messages · Members · Forum rules · Search · RSS ]
Page 1 of 11
Forum » Web dizajn » Programiranje » JavaScript (Autor: Željko Galetić)
JavaScript
KryptDate: Monday, 2011-11-14, 1:41 PM | Message # 1
Newbie
Group: GFX Admin
Messages: 29
Status: Offline
Potreba za boljom funkcionalnošću sajtova i interaktivnijim sadržajem na web-u postala je sve veća i zahtevnija. Jedan od uslova dobrog web sajta pored njegovog dizajna i sadržaja je i njegova interakcija sa korisnikom. Kao jedna od neizbežnih komponenti sajta je programski jezik JavaScript, bez koga se moderan web ne može ni zamisliti.

U ovom tutorijalu ćemo se upoznati sa osnovama JavaScript programskog jezika. Poželjno je minimalno znanje HTML-a pre početka ovog tutorijala.

Sta je JavaScript?
JavaScript je objektno orjentisan programski jezik namenjen dinamičkoj izradi web sajtova. Koristi se u milionima web sajtova za poboljšanje funkcionalnosti, validaciju formi, detekciju browsera, asinhronu komunikaciju sa serverom i još mnogo toga. Razvijen je 1995. godine od strane Netscape-a i koristi se kao client-side (klijent zasnovan) internet programski jezik. To znači da se njegova obrada vrši na korisnikovom računaru u samom browser-u čime se postiže veća brzina rada, web aplikacije odgovaraju brže na korisnikove akcije i samim tim se postiže veća efikasnost.
Predstavlja skripting jezik, što u prevodu znači lagan programski jezik.

Napomena: JavaScript nije isto što i JAVA programski jezik. Jedine sličnosti koje imaju je početno ime i ništa više.

OSNOVE
JavaScript se u HTML dokument može ubaciti na dva načina. Pisanjem direktno u HTML kod ili smeštanjem u poseban fajl (ekstenzija ".js") koji se potom poziva u HTML dokumentu. Oba načina su pravilna i ne postoji razlika u radu skripta. Pozivanje spoljnog fajla je dobro u slučajevima kada se jedna ista skripta koristi u više stranica.
Browser čita HTML stranicu i prikazuje elemente onako kako oni nailaze. Kada naiđe na skript u stranici, obavlja se njegovo izvršavanje pre nego što se nastavi čitanje ostalih elemenata (tekst, slike...).
SS: http://img507.imageshack.us/img507/8600/5a4a34ea3a324b819457f87.png

JavaScript pisan u HTML dokumentu
SS: http://img37.imageshack.us/img37/705/d2a7e847e43043faa244b42.png

JavaScript pozvan iz zasebnog fajla

Postoje različiti načini pozivanja JavaScript koda, tj. različita mesta gde se on može smestiti u stranici. Prvi način je da se Java Script kod stavi u <head> sekciji, dok je drugi način smeštanje unutar <body> sekcije dokumenta. Kod prvog načina skripta se učitava odmah, još pre učitavanja čitave stranice, dok se kod drugog načina skripta izvršava čim browser naiđe na nju. Moguće je postaviti neograničen broj skripti u stranicu, bilo da se radi o prvom ili drugom slučaju.

Jedna od osnovnih stvari koju morate da znate su komentari unutar koda. Komentari se koriste radi lakšeg snalaženja u kodu, i kao podsetnici. To je način da sami sebi ostavljate poruke u toku programiranja, kao i da olakšate programiranje onome ko nasledi vaš kod.

Mogu se koristiti na dva načina:
SS: http://img41.imageshack.us/img41/3058/3f499d797e78471abb903ae.png

PROMENLJIVE (VARIABLES)
JavaScript kao i ostali programski jezici, koristi promenljive da bi zapamtio vrednosti, tako da se one kasnije mogu koristiti u drugim delovima programa. Promenljive su imena koja se povezuju sa ovim upamćenim vrednostima. Na primer, promenljiva imeKorisnika se može koristiti da čuva vrednost koju korisnik unese.

Imena promenljivih mogu da počinju velikim slovima (A - Z), malim slovima (a - z), ili donjom crtom (_). Preostali karakteri mogu da se sastoje od malih i velikih slova, donje crte, ili cifara od 0 do 9.

Primeri naziva promenljivih:

brojPorudzbina
_id123
ZBIR
Slika5
form_submit
JavaScript je case-sensitive, što znači da obraća pažnju na velika i mala slova. To znači da promenljiva nazvana zbir ukazuje na različitu vrednost od promenljivih ZBIR, Zbir, itd. Zbog toga je veoma važno obratiti pažnju na korišćenje malih i velikih slova u nazivima promenljivih.

JavaScript za razliku od nekih drugih programskih jezika ne zahteva specificiranje tipa vrednosti promenljive, on to čak i ne dozvoljava. Ista promenljiva može da se koristi za smeštanje različitih tipova vrednosti u njoj, kao što su redosled simbola koji u stvari predstavljaju string (Hello world!), celi brojevi (52), vrednosti realnog broja (3.14) ili logičke vrednosti (true, false). Java Script interpretator automatski konvertuje tip podataka koji se nalazi u promenljivoj.

Deklarisanje promenljivih se vrši oznakom var:
SS: http://img404.imageshack.us/img404/5559/67fe46d203ea462a92b4cef.png

Prilikom pravljenja promenljivih, moguće ih je napraviti prazne ili im odmah dodeliti vrednost, kao što je prikazano u primeru. Kod dodeljivanja teksta vrednost se stavlja između navodnika, dok se kod brojeva i logičkih vrednosti navodnici ne koriste.

Promena vrednosti u promenljivoj se vrši ponovnim dodeljivanjem nove vrednosti toj promenljivoj.

Postoje dve vrste promenljivih:
  • Lokalne promenljive
  • Globalne promenljive

    Lokalne promenljive se oznakom var definišu unutar neke funkcije i dostupne su samo unutar iste, dok se globalne promenljive definišu izvan funkcije i njima se može pristupiti iz bilo koje funkcije. Ukoliko se pak promenljiva definiše unutar funkcije bez oznake var, ona će tada biti globalna.

    Pre ovog primera pogledajte prvo šta su funkcije.

    SS: http://img690.imageshack.us/img690/2024/b8edfa0cc5954695b5506b7.png

    Ovde imamo primer lokalne promenljive a koja je definisana unutar funkcije test(). Samim tim ova promenljiva a će biti dostupna samo unutar te funkcije. Ukoliko se pozove izvan funkcije test() ona neće biti dostupna i doći če do pucanja koda, tj. do prestanka izvršenja skripte.

    Medjutim, ukoliko promenljivu a definišemo izvan funkcije, ona će biti globalna i moći će joj se pristupiti iz bilo koje funkcije.

    SS: http://img408.imageshack.us/img408/5012/fda39b07be3c4b7086cde1d.png

    Takodje, ako promenljivu a definišemo unutar funkcije, ali bez oznake var ona će biti dostupna iz bilo kog dela skripte.

    SS: http://img28.imageshack.us/img28/5972/c1e42235b17b4daba1dbbdf.png

    Nastavak u sledecim postovima...
  •  
    KryptDate: Monday, 2011-11-14, 1:49 PM | Message # 2
    Newbie
    Group: GFX Admin
    Messages: 29
    Status: Offline
    NIZOVI (ARRAYS)
    Nizovi su objekti koji imaju mogućnost smeštanja višestrukih vrednosti. Dakle, to je posebna promenljiva koja može da sadrži više od jedne vrednosti u isto vreme.

    Sastoje se iz naziva niza i indeksa koji predstavlja element niza i koji je uvek broj. Indeks drugim rečima predstavlja redni broj niza i nalazi se izmedju uglastih zagrada.

    niz[0]
    niz[1]
    niz[2]
    niz[3]
    ...
    Nizovi se mogu deklarisati na više načina. Možete im dodeljivati vrednosti odmah prilikom deklaracije ili naknadno u toku daljeg programiranja. Što se tiče indeksa, indeksni brojevi se mogu definisati svojevoljno ili se mogu numerisati automatski. Prilikom automatskog indeksiranja indeksni brojevi imaju rastuću vrednost i uvek nastavljaju od poslednjeg definisanog indeksnog broja.

    Napomena: kod automatskog indeksiranja, indeks uvek počinje od 0

    SS: http://img651.imageshack.us/img651/6861/949dd68a17524176999c6ab.png

    Pristupanje elementu u nizu se vrši preciziranjem imena niza i rednog broja elementa u njemu.
    Promena vrednosti u nizu sa odredjenim indeksom se vrši isto kao i kod promenljivih, ponovnim dodeljivanjem nove vrednosti nizu sa željenim indeksom.

    Ukoliko niste upoznati sa radom ni jednog drugog programskog jezika, isprva najverovatnije nećete shvatiti svrhu nizova, medjutim nizovi su od izuzetnog značaja u svim programskim jezicima. Više o njihovom konkretnom korišćenju u naprednijem tutorijalu.

    OPERATORI
    Operator se koristi za transformisanje jedne ili više vrednosti u jednu rezultujuću vrednost. Vrednosti na koje se operator primenjuje nazivaju se operandi. Kombinacija operatora i njegovih operanada poznata je kao izraz.

    JavaScript radi sa operatorima koji su podeljeni u sledeće kategorije:

    aritmetički operatori
    logički operatori
    operatori poređenja
    operatori stringova
    operatori dodele

    ARITMETICKI OPERATORI
    Aritmetički operatori u stvari predstavljaju matematičke operatore koji se koriste za razna izračunavanja.

    SS: http://img210.imageshack.us/img210/2532/c15148ae0b2e45afbb21d34.png

    LOGICKI OPERATORI
    Logički operatori se koriste za izvođenje logičkih (Boolean) operacija nad logičkim operandima.

    SS: http://img713.imageshack.us/img713/1852/2a5b78987d68461ba3b3b13.png

    OPERATORI POREDJENJA
    Operatori poređenja se koriste za određivanje kada su dve vrednosti jednake, ili za poređenje numeričkih vrednosti, na primer da bi se ustanovilo koja je vrednost veća od druge.

    SS: http://img35.imageshack.us/img35/1740/5f055c8f9bb34767b052d0d.png

    OPERATORI STRINGOVA
    String operatori se koriste za izvođenje operacija nad stringovima. Trenutno je u upotrebi samo jedan operator (+). Koristi se za spajanje dva stringa nadovezivanjem. Na primer, "ab" + "cd" proizvodi "abcd".

    OPERATORI DODELE
    Operatori dodele se koriste za dodeljivanje i ažuriranje vrednosti promenljivih.

    SS: http://img717.imageshack.us/img717....mg]

    LOGIČKI ISKAZI
    Logički iskazi predstavljaju logičke konstrukcije za proveru odredjenih uslova.

    Najjednostavniji oblik logičkog iskaza je if iskaz. On koristi operatore poredjenja kako bi izvršio proveru uslova, i veoma je jednostavan za korišćenje. Dakle, ukoliko je ispunjen uslov iz zagrade izvršava se kod.

    SS: http://img545.imageshack.us/img545/4792/fc06cccfefa24c72bf7a1ae.png

    Proširena verzija ovog iskaza je if...else iskaz. Radi isto kao i običan if iskaz, stim što ima dodatu opciju else koja omogućava izvršenje nekog koda ukoliko uslov iz if iskaza nije ispunjen.

    SS: http://img607.imageshack.us/img607/614/1d2a3f8b6c5547bfb9c413f.png

    Još naprednija varijanta if iskaza je if...else if...else iskaz. On predstavlja ništa drugo do kombinovanje gore navedenih iskaza.

    SS: http://img404.imageshack.us/img404/4594/1ea2c0404fc54f3ab8af347.png

    Drugi logički iskaz je switch iskaz, koji je po svojoj funkciji veoma sličan if iskazu. Koristi se ukoliko imamo više provera odredjenih vrednosti. Prvo mu prosledjujemo neku promenljivu koja se zatim uporedjuje sa različitim vrednostima. Ukoliko se vrednost poklapa izvršava se zadati kod. Koristimo break naredbu da sprečimo nepotrebni nastavak ostalih poredjenja. Naredba default je ekvivalent naredbi else iz if iskaza i služi da izvrši neki kod ukoliko ni jedan od uslova nije ispunjen.

    SS: http://img208.imageshack.us/img208/8374/b8ba60476ceb44e2b3dc8c3.png
     
    KryptDate: Monday, 2011-11-14, 1:57 PM | Message # 3
    Newbie
    Group: GFX Admin
    Messages: 29
    Status: Offline
    PETLJE
    Petlje predstavljaju naprednije logičke iskaze. One imaju sposobnost da istu radnju ponavljaju dok god je neki uslov ispunjen. Postoje dve vrste petlji, for i while petlje.

    For petlja se koristi kada unapred znate koliko puta bi radnja trebalo da se ponavlja. Sintaksa for petlje izgleda ovako:
    SS: http://img507.imageshack.us/img507/3681/366329eca3324a25863a536.png

    U for petlji postoje tri parametra koji su odvojeni tačkom i zarezom. Prvi parametar predstavlja promenljivu koja ima neku početnu vrednost. Drugi parametar predstavlja uslov izvršenja petlje. Treći parametar predstavlja uvećanje vrednosti. Pošto sve ovo verovatno izgleda konfuzno, pogledajmo konkretan primer:
    SS: http://img824.imageshack.us/img824/818/9d81e82fb42f45cdbedd641.png

    Dakle, promenljivoj i smo dodelili početnu vrednost 0. Petlja će se izvršavati samo ukoliko je i manje ili jednako 10. Nakon svakog izvršenja petlje i se povećava za 1, što znači da će petlja biti izvršena 11 puta jer je početna vrednost 0 koju takodje brojimo.

    Napredniji vid for petlje je for...in petlja. Ona se koristi za operacije nad elementima niza ili objekta, stoga pogledajte prvo šta su objekti. Sintaksa izgleda ovako:

    SS: http://img37.imageshack.us/img37/7066/9032723de2c342708b5bfe4.png

    Dakle, ova petlja se izvršava za svaki element u nizu ili objektu. Ukoliko niz ili objekat sadrži 20 elemenata, petlja će se izvršiti 20 puta.

    While petlja se koristi kada je potrebno da izvršavate neki kod dok god je uslov istinit. Petlja će biti izvršena samo ako je uslov ispunjen. Sintaksa izgleda ovako:
    SS: http://img821.imageshack.us/img821/8435/c80e20d7375647b681daaec.png

    Uslov može biti bilo kakva provera, kao kod if iskaza. Primeri:
    SS: http://img689.imageshack.us/img689/8736/0e13cb4b466e43e9a22eed2.png

    Dakle, petlja će se izvršavati dok god je uslov ispunjen, tj. dok god promenljiva ne promeni vrednost unutar petlje. Zbog toga pazite da ne napravite beskonačnu petlju koja će blokirati browser.

    Još jedna varijanta while petlje je do...while petlja. Razlika izmedju obične while petlje i do...while petlje je u tome što se kod while petlje ona izvršava samo ako je uslov ispunjen, dok se do...while petlja izvrši jednom pre provere uslova.
    SS: http://img823.imageshack.us/img823/16/fee45e0a072c4148bd54182.png

    FUNKCIJE
    Da bi sprečili da se ceo kod JavaScript-a izvrši prilikom učitavanja stranice koriste se funkcije. Funkcije su delovi programskog koda koji se izvršavaju samo kada su pozvani. Funkcije mogu biti pozvane sa bilo kojeg mesta na stranici. Mogu biti smeštene i u <head> i u <body> odeljak, s tim da je bolje smeštati ih u <head> sekciju, kako bi bili sigurni da je skripta učitana od strane browser-a pre nego što je pozvana.

    Funkcije se definišu oznakom function i sastoje se od imena funkcije, prosledjenih parametara koji se nalaze izmedju zagrada, i izraza funkcije koji se nalaze izmedju vitičastih zagrada. Parametri funkcije su u stvari promenljive koje se prosledjuju datoj funkciji prilikom njenog pozivanja.
    SS: http://img508.imageshack.us/img508/7120/c0fb96018dbd4099a5bfa3e.png

    Funkcija može biti pozvana bilo kad i bilo gde u dokumentu. Može se pozivati iz HTML elemenata ili iz drugih funkcija u samom JavaScriptu. Često se prave funkcije koje imaju generalnu svrhu i mogu se koristiti u drugim skriptama (primer validacija formi), ili se zbog lakoće pisanja ili same potrebe, skripta deli u odeljke tj. više funkcija, koje se izvršavaju jedna za drugom ili po potrebi pozivaju jedna drugu.
    SS: http://img39.imageshack.us/img39/3716/87db5c81dacf49ce85580c7.png

    Mogu da se koriste za kao povratne i nepovratne, tj. one koje vraćaju obradjeni podatak ili one koji imaju namenu da samo izvrše nešto bez povratne informacije.

    Ukoliko su povratne, koriste naredbu return kojom vraćaju odredjeni podatak.
    SS: http://img207.imageshack.us/img207/5299/614091593cd1464f9027a0b.png

    OBJEKTI
    Objekat predstavlja elemente sa skupom vrednosti. Ove vrednosti mogu biti primitivni tipovi podataka, drugi objekti ili funkcije.

    Najbolje objašnjenje kako se prave i izgledaju objekti možete videti kroz primer.
    SS: http://img254.imageshack.us/img254/5095/ad6fe8d12d9d4d72b05156e.png

    METODE
    Kao što smo rekli objekat u sebi može da sadrži funkcije. Ove funkcije nazivaju se motode. Njima, kao i svim ostalim elementima iz objekta se pristupa pomoću tačke (.), tj. dodavanjem tačke i imena željenog metoda iza imena objekta.

    SS: http://img840.imageshack.us/img840/7904/dd8d73e0cd5f4871bad7491.png

    OBJEKTI KAO ASOCIJATIVNI NIZOVI
    Elementima unutar objekta možemo pristupiti i pomoću uglastih zagrada [ ] na sledeći način:
    SS: http://img573.imageshack.us/img573/7748/e0a4c320a5044a92b5d2559.png

    BIBLIOTEKE
    Kao i u većini ostalih jezika i u JavaScript-u postoje biblioteke. Biblioteka predstavlja skup gotovih funkcija koje imaju širu primenu, i time omogućava korisniku lakše programiranje.

    Primenjuju se kod DOM pristupa i manipulacija, olakšavanja i ubrzavanja programiranja, proširivanja funkcionalnosti pomoću gotovih komponenti, itd...
    Zahvaljujući bibliotekama, ne moramo više da pišemo višenamenske funkcije od nule.

    Neke od popularnijih JavaScript biblioteka su jQuery, MooTools, Prototype, i mnoge druge...
     
    KryptDate: Thursday, 2012-03-01, 0:07 AM | Message # 4
    Newbie
    Group: GFX Admin
    Messages: 29
    Status: Offline
    Uradjen edit biggrin
     
    Forum » Web dizajn » Programiranje » JavaScript (Autor: Željko Galetić)
    Page 1 of 11
    Search:

    Our poll
    Šta mislite o sajtu?
    Total of answers: 61
    Login form
    Statistics
    Hosted by uCoz