JavaScript¶

Šta je JavaScript?¶

JavaScript je nastao 1995 kao jezik koji uvodi interakciju u HTML stranice. To je skript jezik koji je obično deo HTML stranice i koji se izvršava od strane brauzera ( web klijenta ). JavaScript može da čita, piše i menja HTML elemente ( DOM objekte ), da validira ulazne podatke, da detektuje vrstu brauzera, da kreira kolačiće ( cookies )…

Treba imati na umu da JavaScript nema nikakve veze sa programskim jezikom Java. U novije vreme, JavaScript se sve više koristi i kao jezik na serverskoj strani, a pre svega na Node.js platformi, koja polako, zbog svoje efikasnosti, preuzima primat za mrežne i web aplikacije.

Gde se nalaze JavaScript programi?¶

Kada se koristi na klijentskoj strani ( u brauzerima ), JavaScript programi se obično nalaze kao deo same HTML stranice, i/ili posebni fajlovi sa ekstenzijom .js, na koje se HTML strane pozivaju, kao što to pokazuje sledeći primer:

<html>
<head>

<script type="text/javascript" src="http://neki-sajt/program.js"> </script>
<script type="text/javascript" src="lokalni-folder/program.js"> </script>

<script type="text/javascript">
...
</script>

</head>
<body>

<script type="text/javascript">
...
</script>

</body>
</html>

Varijable¶

Varijable su kao memorija. Kreiramo varijable da u njima pamtimo podatke. Najbolje je da varijablama dajemo imena koja ćemo lako pamtiti i koja će nas podsećati na podatke koje su u tim varijablama zapamćene. Na primer, ako želite da napravite program kojim ćete deliti jedan broj sa nekim drugim brojem najbolje je da varijable koje ćete kreirati nazovete deljenik, delioc i kolicnik, a ne recimo broj1, broj2, broj3.

Važno je znati ispravnu sintaksu koja se mora poštovati pri kreiranju naziva varijabli:

Naziv (ime) varijable mora počinjati slovom ili donjom crtom (“_”)
Svaki sledeći znak u imenu varijable može biti cifra (0-9) ili slovo (A-Z i/ili a-z).
Imajte na umu da je JavaScript osetljiv na velika i mala slova (case-sensitive). To znači da MojaVarijabla i mojaVarijabla su dva različita imena zbog velikog i malog slova M na početku imena.

Primeri ispravnih imena varijabli su temperatura99, i _ime, Broj_pogodaka.

Kada kreirate varijablu van neke funkcije, takva varijabla se naziva globalnom varijablom zato što je ona dostupna iz celog HTML dokumenta. Kada se varijabla kreira unutar neke funkcije, onda se ona naziva lokalnom varijablom i na raspolaganju je samo JavaScript naredbama iz te funkcije.

Varijable mogu da sadrže sve vrste podataka. Da nekoj varijabli zadate vrednost koristite sledeću notaciju:

var deljenik = 8;
var delioc = 4;
var poruka = "Ovu ću poruku koristiti više puta";

Recimo da želimo da u programu podelimo deljenik sa deliocem i da rezultat zapamtimo u varijabli količnik. To ćemo uraditi sledećom naredbom:

var kolicnik = deljenik/delioc;

Važno je da pre nego što počnte da pišete program razmislite o njegovoj strukturi. Dobro je da unapred definišete i kreirate varijable koje će biti korišćene u programu. Na primer, ako znate da ćete više puta u programu koristiti jednu te istu tekstualnu poruku, onda je korisno da odmah kreirate varijablu poruka i odmah joj zadate predviđeni tekst. Tako ćete moći da ovu varijablu koristite kad god vam je potrebna bez ponovnog ukucavanja teksta koji ona sadrži, a ako poželite da promenite tekst poruke onda ćete to uraditi samo na jednom mestu - tamo gde je poruka kreirana.

Podaci¶

JavaScript razlikuje sledeće tipove podataka:

Brojeve, kao 42 ili 3.14159
Logičke vrednosti, true ili false
Stringovi, kao što je “Pozdrav svima!”
Objekti,
Funkcije
null, specijalna vrednsot koja znači ništa.
undefined, nedefinisan podatak

JavaScript je “loosely typed” jezik - slabo vodi računa o tipovima podataka. To znači da ne morate da specificirate tip podataka koje će varijabla sadržati (kod jezika kao sto su C, C++, C# uvek morate pri kreiranju varijable da kažete i kakvu vrstu podataka će varijabla moći da sadrži).

Na primer, možete kreirati neku varijablu na sledeći način:

var odgovor = 42

a kasnije istoj toj varijabli možete zadati string (tekstualnu) vrednost:

var odgovor = "Hvala vam na svemu..."

Pošto je JavaScript “loosely typed” jezik , gornja naredba neće proizvesti grešku (kao što bi bio sličaj u C jezicima). No i pored toga ovo nije primer dobrog programiranja. Bolje je da varijable kreirate tako da sadrže uvek istu vrstu podataka ( brojeve, tekst, logičke podatke i sl.) i da ih konzistentno koristite u programu (da ne mešate tipove podataka u istoj varijabli). To vam može znatno olakšati testiranje i debagiranje vašeg programa.

U naredbama koje uključuju brojčane i string vrednosti svi podaci se konvertuju u tip string. Na primer, posmatrajmo sledeće naredbe:

var x = "Odgovor je " + 42
var y = 42 + " je odgovor"

Ovde će znak + označavati operaciju spajanja dva stringa, a ne sabiranje, jer se 42 konvertuje u string “42”.

Na primer ako napišete:

var poruka = "Pozdrav" + "svima"

…onda će varijabla poruka dobiti vrednost “Pozdrav svima”.

Literali¶

Literali se korste da predstavljaju vrednosti u JavaScript programima. To su fiksne vrednosti, za razliku od varijabli, koje mogu da se menjaju. Primeri literala su: 1234, “Ovo je literal” i true.

Celi brojevi

Celi brojevi mogu biti izraženi u dekadnom (baza 10), heksadecimalnom (baza 16), i oktalnom (baza 8) sistemu. U dekadnom sistemu celi broj se prikazuje bez vodećih nula. Ako se na početku pojavi nula, onda se smatra da sledi oktalni broja, a ako se pjavi 0x to označava pojavu heksadecimalnog broja.

Primeri celobrojnih literala su: 42, 0xFFF, and -345.

Decimalni brojevi

Decimalan broj može imati sledeće delove: ceo broj, decimalna tačka, ostatak iza decimalne tačke, eksponent. Eksponent je slovo “e” ili “E” iza kojeg se nalazi ceo broj sa ili bez znaka.

Primeri decimalnih brojeva su: 3.1415, -3.1E12, .1e12, and 2E-12

Logički podaci

Logički podaci imaju samo dve vrednosti: true i false.

Stringovi (tekstualni podaci)

String je literal sa 0 ili više slovnih znakova ograničenih dvostrukim (“) ili jednsotrukim (‘) navodnicima. Evo nekoliko primera string literala:

"bla bla bla"
'bla bla bla'
"1234"
"prva linija \n druga linija"

Uz uobičajene slovne znake, mogu se koristiti i specijalni znakovi kao u poslednjem primeru gore. U sldeećoj tabeli data je lista specijalnih znakova koje možete koristiti JacaScript stringovima.

Znak	Znacenje
\b	backspace
\f	form feed
\n	new line
\r	carriage return
\t	tab
\	backslash

Escape

Za sve slovne znake osim za one prikazane u gornjoj tabeli, kosa crta (backslash) nema nikakvo značeneje osim za navodnike i samu kosu crtu.

Moguće je ubaciti navodnik kao deo stringa ako se ispred njega stavi kosa crta.To se naziva escaping (zaobilaženje) navodnika. Na primer:

var navod = "On čita roman \"Zlatno runo\" od Borislava Pekića"
document.write(navod)

Rezltat ovog programskog segmenta biće:

On čita roman "Zlatno runo" od Borslava Pekića

A ako želite da se kosa crta nađe u stringu, onda takođe koristite kosu crtu kao escape znak. Na primer ako želite da nekoj varijabli zadate putanju do datoteke c:temp onda to zapisujete ovako:

var home = "c:\\temp"

Operatori¶

JavaScript ima više operatora za razne aritmetičke, logičke i string operacije. Mi ćemo ovde navesti samo najznačajnije operatore za pridruživanje, komparaciju, kao i aritmetičke i logičke operatore.

Pridruživanje¶

Operatorom pridruživanja zadaje se vrednost varijabli sa leve strane od operatora ( = ), tako što se izračunava vrednost izraza sa desne strane operatora.

Na primer:

x = y + 10;

označava naredbu kojom će se najpre izračunati zbir vrednosti koju trentno sadrži varijabla y i broja 10, pa će se tako izračunata vrednost memorisati u varijabli x.

Moguće je skraćeno pisanje za naredbe pridruživanja kako pokazuje sledeća tabela:

Skraćeno Značenje

x += y x = x + y

x -= y x = x - y

x * = y x = x * y

x /= y x = x / y

x++ x = x + 1

x- - x = x - 1

Uočite da znak = ovde označava pridruživanje i da to nije matematički znak za jednako. Ako je x jednako 5 a y jednako 7, onda bi x = x + y bio pogrešan matematički izraz, ali u JavaScript programu je potpuno legitiman. Njime se varijabli x dodeljuje vrednost x + y (12 u ovom slučaju, 5+7).

Operatori poređenja¶

Operatorima poređenja se vrši upoređivanje dve vrednosti i na osnovu rezultata poređenja dobija logička vrednost true ili false u zavisnoti da li je poređenje tačno ili netačno. Vrednosti koje se porede mogu biti brojevi ili stringovi. Kada se porede stringovi, poređenje se vrši na osnovu standardng leksikografskog redoslede slova. Operatori poređenja opisani su u sledećoj tabeli.

Operator	Opis	Primer
===	Daje logičku vrednost true ako su operandi jednaki	x == y je true ako je x jednako y
!==	Daje logičku vrednost true ako operandi nisu jednaki	x ! = y je true ako x nije jednako y
>	Daje true ako je levi operand veći od desnog	x > y je true ako je x veće od y
>=	Daje true ako je levi operand veći ili jednak desnom	x >= y je true ako je x veće ili jednako y
<	Daje true ako je levi operand manji od desnog	x < y je true ako je x manje od y
<=	Daje true ako je levi operand manji ili jednak desnom	x <= y je true ako je x manje ili jednako y

Aritmetički operatori¶

Aritmetički operatori za operande imaju numeričke vrednosti (literale ili varijable) a kao rezultat se dobija jedna numerička vrednsot. Standardni aritmetički operatori su sabiranje (+), oduzimanje (-), množenje (*), deljenje (/) i ostatak pri deljenju (%). Ovi operatori imaju isto značenje i u ostalim programskim jezicima, a takođe i u matematici.

Pošto programeri često dodaju i oduzimaju 1 od varijabli, JavaScript ima skraćenicu za te operacije, pa tako mojaVarr++ dodaje 1 na varijablu mojaVar, dok mojaVar– oduzima 1 od mojaVar.

Logički operatori¶

Logički operatori za operande imaju logičke (Boolean) vrednosti, a kao rezltat operacije ponovo se dobija logička vrednost. Posmatrajmo sledeću tabelu:

Operator	Upotreba	Opis
&&	izraz1 && izraz2	rezultat je true ako su oba izraza true
\|\|	izraz1 \|\| izraz2	rezultat je true ako je jedan od izaza true
!	!izraz	rezultat je false akoje izraz true, i obrnuto

PRIMERI: Pošto smo naučili korišćenje osnovnih aritmetičkih i logičkih operatora sada ih možemo koristiti i zajedno. Pokušajte da razumete sledeće primere:

Ako je x = 4 i y = 7, onda ((x + y + 2) == 13) && (((x + y) / 2) == 2) daje false. Zašto?

Ako je x = 4 i y = 7, onda ((y - x + 9) == 12) || ((x * y) == 2) daje true. Zašto?

Ako je x = 4 i y = 7,onda !((x/2 + y) == 9) || ((x * (y/2)) == 2) daje false. Zašto?

Funkcije¶

Funkcije su jedan od fundamentalnih gradivnih blokova JavaScript programa. Funkcija je skup naredbi koje izvršavaju neki specifičan zadatak. Funkcija se sastoji od sledećih delova:

Ključne reči : function
Naziva funkcije
Liste argumenata smeštene u malim zagradama i sa zapetama kao separatorima
Niza nardebi unutar velikih zagrada: { }

Definisanje funkcije¶

Kada se definiše funkcija, veoma je važno da se vodi računa o sintaksi. Za razliku od HTML-a, JavaScript je osetljiv na velika i mala slova, pa je važno da funkcijske naredbe budu unutar velikih zagrada{ }, da argumenti budu razdvojeni zapetama, kao i da koristite tačka zarez na kraju svake naredbe.

Takođe je važno da uočite razliku između definisanja i pozivanja funkcije.

Definisanje funkcije imenuje funkciju i specificira šta će biti urađeno kada se funkcija pozove.

Evo jednog jednostavnog primera definicije funkcije:

function poruka() {
        alert('Ovo je tekst poruke');
}

Uočite zagrade koje se nalaze odmah posle naziva funkcije. One su obavezne čak i kada između njih nema ništa. Ako želite da pri pozivanju funkcije prenesete neki parametar (argument), onda takve parametre stavljate između ovih zagrada. Parametri su dodatne informacije koje mogu biti različite pri raznim pozivima funkcije. Parametri se smeštaju u varijablama i njima se pristupa kao i svim drugim varijablama. Evo primera funkcije sa parametrima:

function drugaporuka(rec) {
        alert(rec + ' je reč na koju ste kliknuli');
}

Kad pozivate ovu funkciju morate joj preneti i parametar (recimo reč koju je korisnik kliknuo). Zatim će funkcija koristiti tu reč. Pri svakom pozivu funkcije može se prenosti druga reč kao parametar, pa će u skladu sa tim i alert poruka biti svaki put drugačija. Može se prenositi i više parametara ako se razdvoje zapetama. Sledi primer funkcije sa više parametara:

function trecaporuka(word,password) {
        confirm(word + ' is the word that you clicked on. The secret password is ' + password);
}

Pozivanje funkcije¶

Pozivanjem funkcije se zapravo izvršava akcija koju ona definiše. Kada pozovete funkciju, to se obično čini u BODY delu HTML stranice, i obično se funkciji prenosi i parametar. Parametar je varijabla koja dobija vrednost van same funkcije a funkcija je može koristiti tokom izvršavanja. Evo primera pozivanja funkcije:

poruka();

Kao drugi primer posmatrajmo poziv funkcije iz nekog HTML elementa:

<a href="#top" onClick="drugaporuka('top')">top</a>

Ovo će vas vratiti na početak strane uz pojavu poruke: “top je reč koju ste kliknuli”. A evo još jednog primera sa više parametara:

<a href="#top" onClick="trecaporuka('awesome','pandas')">awesome</a>

Funkcije kao objekti¶

Pošto su funkcije objekti, one se mogu koristiti i kao i svi ostali podaci. Funkcije se mogu smeštati u varijablama, drugim objektima i nizovima. Funkcije se mogu prenosti kao argumenti drugih funkcija, a takođe se mogu vraćati iz funkcija ( naredbom return ). Takođe, pošto su funkcije objekti, one mogu imati i svoje metode.

Primer funkcije kreirane kao objekat pridružen varijabli:

// Kreiranje varijable add i pridruživanje funkcije koja sabira dva broja.

var add = function (a, b) {
        return a + b;
};

Objekti¶

Osnovni koncept¶

Prosti tipovi podataka u JavaScript-u su brojevi, stringovi, true i false, null i undefined. Sve ostalo su objekti.

Objekta je kontejner svojstava objekta (properties), gde svako svojstvo ima naziv i vrednost. Naziv može biti bilo kakav string, a vrednost može biti bilo koja JavaScript vrednost, osim specijalnog podatka undefined.

Objekti u JavaScript-u su besklasni, to jest nemaju posebnu definiciju klase iz koje se izvode.

Kreiranje objekata¶

Objekti se kreiraju korišćenjem velikih zagrada {}.

Na primer:

var prazan_objekat = {};

var imenik = {
        "ime": "Jovan",
        "prezime": "Markovic"
};

Navodnici u nazivu svojstva su opcioni i ne moraju se koristiti ako naziv nije neka od službenih reči JavaScript-a. Vrednosti svojstava objekta mogu biti bilo kakav izraz uključujući i druge objekte.

Pogledajmo sledeći složeniji primer:

var flight = {
        airline: "Oceanic",
        number: 815,
        departure: {
                IATA: "SYD",
                time: "2004-09-22 14:55",
                city: "Sydney"
        },
        arrival: {
                IATA: "LAX",
                time: "2004-09-23 10:42",
                city: "Los Angeles"
        }
};

Pristupanje svojstvima objekta¶

Vrednosti svojstava nekog objekta se mnogu dobiti ili pomoću srednjih zagrada [ ], ili pomoću dot (.) notacije. Dot notacija je kompaktnija i preglednija.

Evo kako bi se moglo pristupati vrednostima iz objekta flight:

imenik["ime"]           // "Jovan"
flight.departure.IATA   // "SYD"

Promena vrednosti svojstva¶

Vrednost svojstva objekta može da se menja neredbom za pridruživanje ( = ). Ako je naziv svojstva već kreiran u objektu, pridruživanjem će se promeniti vrednost tog svojstva, kao u primeru:

imenik['ime'] = 'Marko';

Ako objekat ne sadrži naziv svojstva, kreiraće se novo svojstvo, kao u primeru:

imenik['srednje-slovo'] = 'L';
imenik.nadimak = 'Mare';
flight.equipment = {
        model: 'Boeing 777'
};
flight.status = 'kasni';

Enumeracija¶

Ako želimo da saznamo koja sve svojsva ima neki objekat to možemo da uradimo sledećim programom:

var name;
for (name in naziv-objekta) {
        document.writeln(name + ': ' + naziv-objekta[name]);
}

DOM objekti¶

Kada pomoću vašeg pretraživača (browser-a) pristupite nekom HTML dokumentu na web-u, onda se kreira niz JavaScript objekata sa svojstvima i mogućnostima koje se baziraju na HTML-u i drugim delovima sadržaja učitanog dokumenta. Ovi objekti su povezani hijerarhijski u skaldu sa strukturom HTML stranice.

Sledeća slika prikazuje hijerarhiju window objekata:

Detaljan opis DOM-a (Document Object Model) i JavaScript interfejs možete da nađete ako kliknete ovde

Od svih objekata najčešće su u upotrebi objekti window i document.

Objekat window¶

Objekat window ima metod koji vam omogućava da kreirate novi prozor pomoću open() i close() methoda. On vam takođe omogućava da kreirate male prozore (message boxes) korišćenjem alert(), confirm(), i prompt() metoda. Svaki od ovih malih prozora prikazuje tekst koji stavljate između zagrada. Na primer, sledeća naredba:

alert("Ovo je boks za prikaz poruke")

…otvara mali prozor sa porukom.

Objekat document¶

Objekat document predstavlja HTML stranicu. Objekat document sadrži nizove u kojima su memorisane sve komponente od kojih se sastoji sadržaj vaše web stranice kao što su slike, linkovi, forme itd. Vi možete pristupati svim tim elementima i sa njima povezanim metodama preko ovih nizova.

Objektima iz ove pre-definisane hijerarhije se može pristupati, i mogu se modifikovati. Da pristupite nekom od elemenata, morate specificiratinjegov naziv kao i nazive svih njegovih predaka unazad sve do objekta document. Tačka, ‘.’, se koristi kao separator u toj hijerarhiji imena. Generalno govoreći, svaki element ili objekat ima ono ime koje je dato u NAME atributu oodgovarajućeg HTML taga. Na primer, sledeća konstrukcija se odnosi na vrednost (value) tekstualnog podatka (text1) koji je deo forme čije je ime mojaforma a koja je deo tekućeg dokumenta.

document.mojaforma.text1.value

Istom tom elementu se može pristupiti i preko gore pomenutih nizova. U gornjem primeru, ako je forma mojaforma bila prva forma u dokumentu i ako je text1 bio treće polje u formi, onda bi isti element moga da bude referisan i na sledeći način:

document.forms[0].elements[2].value

Funkcije (metode) objekata mogu biti pozivane na sličan način. Na primer, sledeća naredba resetuje (briše) drugu formu u dokumentu. document.forms[2].reset();

Nizovi¶

Niz je objekat u kojem može da se memoriše više vrednosti i koji ima više svojstava (properties). Kada kreirate niz, možete da mu date naziv, a zatim i koliko će vrednosti niz sadržati. Važno je razumeti da će svaka pojedinačna vrednost biti memorisana u po jednom elementu niza, kao i da elemeti počinju od indeksa 0. To znači da će prva vrednost u nizu biti smeštena u 0-tom elementu, druga u prvom elementu i tako dalje. Na primer, ako želimo da smestimo 10 vrednosti u neki niz, onda će indeksi niza biti u opsegu od 0 do 9. Kreiranje niza se vrši na sledeći način:

var mojNiz = new Array(10);

Inicijano, svi elementi niza dobijaju vrednost null. Ako želimo da elementima niza zadamo vrednosti onda to radimo naredbama kao što su:

mojNiz[0] = 56;
mojNiz[1] = 23;
mojNiz[9] = 44;

Stavljajući u uglaste zagrade [ ] indeks elemetna, možemo svakom elementu zadati željenu vrednost. Uočite da u gornjem primeru ne postoji element mojNiz [10 ], jer se indeksi elemenata kreću od 0 do 9. U JavaScript programima, međutim, dužina niza se automatski povećava ako zadamo vrednost nekom indeksu koja je veća od trenutne dužine niza. U sledećem primeru najpre ćemo kreirati jedan niz sa početnom dužinom 0, a zatim ćemo dodeliti vredost elementu 99. To će automatski povećati dužinu niza na 100 elemenata:

boja = new Array();
boja[99] = "blue";

Kreiranje nizova¶

Nizove možete kreirati na više načina. Jedan način smo već videli:

niz = new Array()

Kod ovog načina moguće je odmah i zadati vrednosti elemenata niza kao u sledećim primerima:

    niz_brojeva = new Array(2,5,14,32)
niz_stringova = new Array("jabuke", "kruske", "sljive")

Nizove je moguće kreirati i na sledeći način:

    niz_brojeva = [1, 3, 18, 25, 3.124];
niz_stringova = ["jabuke", "kruske", "jagode"];

Metode sa nizovima¶

Pošto su nizovi objekti, oni imaju niz svojstava (properties) koje su unapred definisana.Na primer, možete pronaći koliko niz mojNiz ima elemenatan i zapamtiti tu vrednost u varijabli brojElemenata pomoću naredbe:

brojElemenata = mojNiz.length;

Nizovi imaju puno metoda. Ovde ćemo navesti neke od najčešće korišćenih:

concat()                Joins two or more arrays, and returns a copy of the joined arrays
copyWithin()            Copies array elements within the array, to and from specified positions
every()                 Checks if every element in an array pass a test
fill()                  Fill the elements in an array with a static value
filter()                Creates a new array with every element in an array that pass a test
find()                  Returns the value of the first element in an array that pass a test
findIndex()             Returns the index of the first element in an array that pass a test
forEach()               Calls a function for each array element
indexOf()               Search the array for an element and returns its position
isArray()               Checks whether an object is an array
join()                  Joins all elements of an array into a string
lastIndexOf()           Search the array for an element, starting at the end, and returns its position
map()                   Creates a new array with the result of calling a function for each array element
pop()                   Removes the last element of an array, and returns that element
push()                  Adds new elements to the end of an array, and returns the new length
reduce()                Reduce the values of an array to a single value (going left-to-right)
reduceRight()           Reduce the values of an array to a single value (going right-to-left)
reverse()               Reverses the order of the elements in an array
shift()                 Removes the first element of an array, and returns that element
slice()                 Selects a part of an array, and returns the new array
some()                  Checks if any of the elements in an array pass a test
sort()                  Sorts the elements of an array
splice()                Adds/Removes elements from an array
toString()              Converts an array to a string, and returns the result
unshift()               Adds new elements to the beginning of an array, and returns the new length
valueOf()               Returns the primitive value of an array

Stringovi¶

String metode¶

Stringovi koji su na neki način slični nizovima (sastavljeni su od niza slovnih znakova), imaju takođe niz korisnih metoda prikzanih kako sledi:

charAt()        Returns the character at the specified index (position)
charCodeAt()    Returns the Unicode of the character at the specified index
concat()        Joins two or more strings, and returns a new joined strings
endsWith()      Checks whether a string ends with specified string/characters
fromCharCode()  Converts Unicode values to characters
includes()      Checks whether a string contains the specified string/characters
indexOf()       Returns the position of the first found occurrence of a specified value in a string
lastIndexOf()   Returns the position of the last found occurrence of a specified value in a string
localeCompare()         Compares two strings in the current locale
match()         Searches a string for a match against a regular expression, and returns the matches
repeat()        Returns a new string with a specified number of copies of an existing string
replace()       Searches a string for a specified value, or a regular expression, and returns a new string where the specified values are replaced
search()        Searches a string for a specified value, or regular expression, and returns the position of the match
slice()         Extracts a part of a string and returns a new string
split()         Splits a string into an array of substrings
startsWith()    Checks whether a string begins with specified characters
substr()        Extracts the characters from a string, beginning at a specified start position, and through the specified number of character
substring()     Extracts the characters from a string, between two specified indices
toLocaleLowerCase()     Converts a string to lowercase letters, according to the host's locale
toLocaleUpperCase()     Converts a string to uppercase letters, according to the host's locale
toLowerCase()   Converts a string to lowercase letters
toString()      Returns the value of a String object
toUpperCase()   Converts a string to uppercase letters
trim()  Removes whitespace from both ends of a string
valueOf()       Returns the primitive value of a String object

Programski koraci¶

JavaScript program je niz naredbi. Svaku naredbu možemo svrstati u jednu od sledećih kategorija:

Naredba pridruživanja ( = )
Poziv funkcije - f(parametri)
Selekcija ( if i switch naredbe )
Iteracija ( for, while i do..while naredbe)

Naredba za pridruživanje¶

Naredba za pridruživanje ima sledeći opšti oblik:

varijabla = izraz

gde ge varijabla ime varijable, a izraz bilo koji od legitimnih JacaScript izraza ( sa brojevima, stringovima, logičkim vrednostima, objektima i funkcijama ).

Primeri naredbe pridruživanja:

var x = (a+b)*(a-b+c)            // aritmetički izraz
var ime = imenik.ime             // preuzimanje string iz objekta
var uslov = a || b && ( c > 0)   // logicki izraz
var polinom = f(a,x)             // poziv funkcije

if naredba¶

if …else naredba izvršava jedan niz komandi ako je zadati uslov ispunjen, a drugi niz ako uslov nije ispunjen Osnovna ideja if naredbe se može slikovito objasniti sledećom rečenicom: “Ako sutra bude lepo vreme ići ćemo na piknik, ako ne bude lepo vreme gledaćemo televiziju.”

Kao što vidite ideja je sasvim intuitivna, a takva je i sintaksa if naredbe:

if (izraz) {
  blok-naredbi
}

ili u proširenom obliku:

if (izraz) {
  blok-naredbi-1
}
else {
  blok-naredbi-2
}

uslov može biti bilo koji JavaScript logički izraz koji kao rezultat daje true ili false. Oko uslova se stavljaju male zagrade. Evo primera:

if (vreme == 'dobro') {
  idemo_na_izlet(mi);
  pravimo_piknik(mi);
}
else {
  ostajemo_kod_kuce(mi);
  gledamo_TV(mi);
}

switch naredba¶

switch naredba se koristi kada imamo više od dva izbora. U takvim slučajevima bi morali da ponavljamo if naredbu, pa switch naredba na neki način predstavlja pročirenje if naredbe.

U opštem obliku switch naredba izgleda ovako:

switch(izraz) {
  case v1:
    blok-naredbi-1
    break;
  case v2:
    blok-naredbi-2
    break;
  default:
    default-blok-naredbi
}

Koji od blokova naredbi će biti izvršen zavisi od vrednosti izraza. Ako je vrednost izraza jednaka v1 biće izvršen prvi blok, ako je v2 drugi blok, a ako nije ni v1 ni v2 onda se izvršava takozvani default blok ( što bi odgovaralo opciji else u if naredbi).

Uočite reč break posle svakog bloka naredbi. Ova reč je zapravo naredba da se prekine sa daljim izvršavanjem switch naredbe. Da nje nema, program bi posle izvršavanja određenog bloka nastavio sa izvršavanjem sledećeg sve do kraja switch naredbe. Ovo je čest uzrok grešaka u programima, kada se nepažnjom ne postavi naredba break tamo gde je potrebno.

Evo i jednog primera:

var a = 2 + 2;
switch (a) {
  case 3:
    alert( 'Malo' );
    break;
  case 4:
    alert( 'Tačno!' );
    break;
  case 5:
    alert( 'Više' );
    break;
  default:
    alert( 'Nepoznat rezultat' );
}

Iteracija¶

Iteracije (ponavljanje naredbi) su izuzetno korisno sredstvo za programiranje. Iteracijama se lako upravlja repetitivnim radnjama. Nizovi nam ovde odmah padaju na um kao struktura pogodna za obradu u petlji. Recimo da želimo da svakom elementu niza dodamo 1. Odmah je intuitivno jasno da je taj zadatak najlakše ostvariti korišćenjem ponavljanja u petlji.

Dva najčešća oblika petlje su for i while petlja.

for petlja¶

for petlja se sastoji od tri izraza zatvorena u male zagrade i razdvojena tačka-zarezom (;) iza čega sledi blok naredbi koje se u petlji izvršavaju. Ovo vam može izgledati malo konfuzno. I stvarno, teško je razumeti for petlju dok se ne vidi primer.

Opšti oblik for petlje je:

for (inicijalni-izraz; uslov-zavrsetka; inkremetacioni-izraz) {

  blok-naredbi

}

inicijalni-izraz se tipično koristi da se inicijalizuje brojač varijabla. U tom izrazu se najčešće i deklariše varijabla brojača ključnom rečju var.

uslov-zavrsetka se ispituje pri svakom prolasku kroz petlju. Ako je uslov ispunjen (true), nardbe će biti izvršene. Kada uslov prestane da bude ispunjen (postane false) prestaje i izvršavanje petlje.

inkrementacioni-izraz se koristi najčešće za povećanje vrednosti brojača.

blok-naredbi predstavlja blok naredbi koje se izvršavaju sve dok je uslov ispunjen. Taj blok se može sastojati od jedne ili više naredbi.

Posmatrajmo sledeći primer petlje. Petlja počinje deklarisanjem varijable i i inicijalizacijom njene vrednosti na 0. Dalje se proverava uslov da li je vrednost varijable i manja od 3, pa ako jeste izvršavaju se dve naredne jedna za drugom, nakon čega se vrednost varijable i uvećava za 1. Ovaj proces se nastavlja sve dog varijabla i ne dobije vrednost 4 kada se prekida dalji rad petlje.:

var n = 0;
for (var i = 0; i < 3; i++) {
  n += i;
  alert("The value of n is now " + n);
}

For petlja ima još dva oblika:

Petlja for…in iterira verijablu petlje za sve atribute (properties) nekog objekta. Petlja for…in ima sledeću sintaksu:

for (varijabla in objekat) {
        neredbe
}

Primer:

objekat = {ime: "Petar", prezime: "Petrovic", starost: 20}
for ( v in objekat) {
    conslole.log(v,objekat[v])
}

Petlja for…of iterira varijablu petlje za sve vrste obkejata koji se mogu iterirati (nizovi, skupovi, itd.).

Sintaksa:

for (variable of object) {
  statement
}

Sledeći primer pokazuje razliku između for…in i for…of petlji:

var arr = [3, 5, 7];
arr.foo = 'hello';

for (var i in arr) {
   console.log(i); // logs "0", "1", "2", "foo"
}

for (var i of arr) {
   console.log(i); // logs 3, 5, 7
}

Iz primera se vidi kako for…in iterira kroz nazive atributa (properties) a for…of kroz njihove vrednosti.

while petlja¶

while petlja, iako na prvi pogled tako ne izgleda je zapravo bliznakinja for petlje. Ove dve petlje mogu zamenjjivati jedna drugu - i stvar je u tome što je nekada pogodnije korišćenje jedne a nekada druge petlje.

while naredba kreira petlju u kojoj se ispituje uslov i ako je ispunjen izvršava blok naredbi. Petlja se onda ponavlja sve dok je uslov ispunjen (true).

Sintaksa while petlje se razlikuje od for petlje i izgleda ovako:

while (izraz) {

  blok-naredbi

}

izraz se izračunava pre svakog prolaska kroz petlju. Ako izraz ima vrednost true izvršavaju se naredbe iz bloka unutar vitičastih zagrada. Kada izraz postane false, petlja se prekida i nastavlja se sa izvršavanjenaredbi koje slede iza petlje.

U sledećem primeru while petlja se ponavlja sve dok je n manje od tri.:

var n = 0;
var x = 0;
while(n < 3) {
  n++;
  x += n;
  alert("Vrednost varijable n je " + n + ". Vrednost varijable x je " + x);
}

do..while petlja¶

do..while petlja je veoma slična while petlji. Zapravo jedina razlika je u ispitivanju uslova za nastavak petlje. Kod while naredbe se uslovni izraz izračunava pre nego što se blok naredbi izvrši, dok se kod do..while petlje izraz izračumava nako što se blok naredbi izvrši.

Sintaksa je sledeća:

do {

  blok-naredbi

} (izraz)

Dakle, kod do..while petlje će blok naredbi biti izvršen bar jedanput, dok se kod while petlje ne mora izvršiti ni jedanput. Zato se while naredbu kaže da “pita pa puca”, dok while..do naredba “puca pa pita”.

I for i while petlje mogu sadržati naredbe za prekeid (break) i za nastavak petlje (continue), kao što je prikazano u sledećim primerima.

Primer 1:

for (var i = 0; i < a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}

Primer 2:

var i = 0;
var n = 0;
while (i < 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
  console.log(n);
}
//1,3,7,12

Komentari¶

Komentari vam omogućavaju da stavljate beleške u vaš program. Beleške su važne jer omogućavaju drugima da razumeju vaš program - recimo da saznaju šta je zadatak funkcija koje ste definisali ili varijabli koje ste deklarisali. Beleške će i vama pomoći da se podsetite ako duže vreme niste gledali svoj program, pa ste mnoge detalje zaboravili.

U JavaScript programima, možete imati jednolinijske ili višelinijske komentare. Jednolinijski komentari se označavaju sa dve kose crte, // koje se nalaze na početku komentara . To označava da sve što bude napisano u toj liniji, posle //, jeste komentar i neće se tretirati kao program.

Za višelinijske komentare koristi se za početak kosa crta i zvezda ‘/*’ a za kraj zvezda i kosa crta ‘*/’ . Između ove dve oznake može da stoji bilo kakav tekst koji se tretira kao komentar a ne kao program Evo nekoliko primera komentara u JavaScript-u.:

// Ovo je primer jednolinijskog komentara
/* Ovo je primer višelinijskog komentara, ali u jednoj liniji. */
/****************************************************************
*                                                               *
*               Jedan komentar u boksu                          *
*                                                               *
****************************************************************/

Konzola¶

Za prikaz na JavaScript konzoli koristi se naredba:

console.log(obj1,obj2,...)

Zadaci za vežbanje¶

Definišite funkciju max() koja ima dva argumenta i koja vraća vrednost većeg od njih. Koristite if-then-else konstrukciju koja postoji u JvaScript-u.
Definišite funkciju maxOfThree() koja ima tri argumenta i vraća najveći od njih.
Napišite funkciju koja uzima jedan karakter ( string dužine 1) i vraća true ako je taj karakter samoglasnik, a false ako je suglasnik.
Napišite funkciju translate() koja prevodi tekst tako što duplira svaki suglasnik u tekstu, a između njih umetne slovo “o”. Na primer tekst “ovo je tesko” prevodi u tekst “ovovo joje totesoskoko”.
Definisite funkciju suma() i funkciju proizvod() kojim se sumiraju i množe svi brojevi u nizu brojeva. Na primer, suma([1,2,3,4]) treba da vrati 10, a proizvod([1,2,3,4]) vraća 24.
Definišite funkciju reverse() koja vraća string u obrnutom redosledu karaktera. Na primer, reverse(“moj primer”) treba da vrati string “remirp jom”.
Predstavite jedan mali rečnik kao JavaScript objekat na sledeći način: {“happy”: “srećna”, “new”: “nova”, “year”: “godina”}. Iskoristite ovaj rečnik za prevod novogodišnje čestitke sa engleskog na srpski jezik.
Napišite funkciju najduzaRec() koja uzima niz reči i vraća najdužu među njima.
Napišite funkciju filtrirajReci() koja uzima niz reči i jedan ceo broj i, pa vraća niz reči koje su duže od i.
Napišite funkciju frekSlova() koja uzima string i pravi listu frekvencija slova koja se pojavljuju u stringu. Listu frekvencija predstavite kao JavaScript objekat. Testirajte program sa frekSlova(“abbabcbdbabdbdbabababcbcbab”).

Zadaci sa rešenjima: http://www.w3resource.com/javascript-exercises/