Javascript tutorijali

[Grindelwald]

Uvod

Javascript koristimo za manipulisanje, odnosno ponašanje web stranica. Za razliku u HTML-a koji je statičan (nepromenljiv), javascript pruža dinamično okruženje. Javascript predstavlja jedan od tri stuba za web razvoj pored HTML-a i CSS-a. Možemo skladištiti privremene podatke koji su neophodni za izvesne procese na stranici. U zavisnosti šta klijent traži od web stranice, stranica će se ponašati na način kako smo je mi predodredili da se ponaša.

Promenljive i statične vrednosti

Ukoliko želimo da skladištimo neki podatak, moramo kreirati promenljivu. Promenljive nose ime koje im mi definišemo sa ciljem da se vrednost kasnije menja. Zato i nosi reč promenljiva - nešto što je skloni promeni.

let promenljiva = "Pozdrav";

Rezervisana reč let ne može biti korišćena u druge svrhe jer je predefinisana reč. Međutim, let možemo koristiti kao tekst (string) i time ignorisati da je u pitanju rezervisana reč. U primeru iznad vidimo da nakon rezervisane reči let sledi ime promenljive koju mi biramo. Opet naglašavam, samo ime koje nije rezervisana reč. Imena promenljivih možemo pisati samo na sledeći način:
- Može sadržati slova, brojeve, donju crtu i dolar znak
- Ime može početi slovom, dolar znakom ili donjom crtom ( ne tako česta praksa )
- Imena su različita u zavisnosti da li je slovo veliko ili malo. - broj i Broj nisu iste promenljive.
- Imena ne mogu biti rezervisane reči.

Statične vrednosti, kako ime i kaže, jesu podaci koji se ne mogu menjati. To mogu biti vrednosti poput broja Pi. Možemo ga definisati kao:

const PI = 3.14;
PI = 2; // Greška

const je predefinisana reč baš kao i let. Razlika je u tome što let skladišti promenljive vrednosti dok const sadrži nepromenljive vrednosti.

Postoje dve vrste komentara. Komentar u jednom redu i komentar u više reda.

// Ovo je komentar u jednom redu

/*
Ovo je komentar u
više
redova
*/

Komentari u jednom redu pišu se sa početkom // dok komentari u više reda počinjemo sa /* a završavamo sa */ . Svrha komentara je da naznačimo sebi neku bitnu informaciju koja služi kao podsetnik čemu nešto služi. Osim što može pomoći nama, daleko više pomaže drugom programeru koji čita naš kod.

Tipovi podataka

Važno je razumeti da nisu svi podaci istog tipa, kao što ni hrana nije istog tipa. Javascript poznaje sedam osnovnih tipova podataka i to:
- String (tekst)
- Number (broj)
- Boolean (tačno i netačno) - logički tip
- Undefined (nedefinisano)
- Null
- Object (objekat)
- Array (niz)

String - koristimo onda kada želimo prikazati neki tekst, odnosno manipulisati tekstom. Tekst može sadržati bilo koje reči, karaktere, brojeve, rezervisane reči. Jedini "problem" nastaje ako pokušamo da koristimo duple navodnike unutar navodnika. Time dobijamo grešku.

let recenica = "Moje ime je "Stefan" "; // Greška
let ispravno = "Moje ime je \"Stefan\" "; // Ispravno

Ako želimo koristiti navodnike unutar stringa, pre novog navodnika pišemo \ i pre navodnika kojim zatvaramo isti karakter. Stringove možemo pisati i apostrofima:

let ime = 'Tekst';

Number - koristimo radi manipulacije brojevima baš kao u matematici. Ipak, čemu brojevi služe, zar ne? Postoje celi brojevi, decimalni brojevi, heksadecimalni brojevi, oktalni brojevi i binarni brojevi.

let binarni = 0b1111; // 15
let oktalni = 0o17; // 15
let dekadni = 15; // 15
let heksdecimalni = 0xF; // 15
let decimalni = 2.16; // decimalni broj

Primetićemo prefikse pre brojeva. 0b - binarni, 0o - oktalni, dekadni (nema prefiks), heksadecimalni 0x. Više o brojevi u narednim tutorijalima.

Boolean - tip podatka sadrži samo dve vrednosti i to true i false. U pitanju je logički tip podatka i koristi se samo u slučajevima kada želimo proveriti da li je neki izraz tačan ili ne da bi smo u zavisnosti od toga uradili nešto.

let tačno = true; // tačno
let netačno = false; // netačno

Ne možemo pisati TRUE ili True. Isključivo su u pitanju mala slova.

Undefined - je tip podatka koji naznačava da je vrednost promenljive nedefinisana. Promenljive možemo deklarisati i inicijalizovati. Deklarisanje je samo davanje imena promenljivoj bez dodeljivanja vrednosti. Inicijalizacija je deklaracija promenljive i dodeljivanje vrednosti.

let x; // Undefined

NULL - je specifičan tip vrednosti koji predstavlja potpuno odsustvo bilo kakve vrednosti. Čak nije ni nedefinisana vrednost. Null znači da nema vrednosti. Ona nije ekvivalent "" ili 0. Ona je bez vrednosti. Koristi se da isprazni vrednost neke promenljive ili za proveru da li neka promenljiva nema vrednost.

let x = NULL; // NULL
let a = 5; // Number
a = NULL; // NULL

Object - predstavlja najkompleksniji tip podatka u programiranju iz razloga što u sebi može sadržati sve ostale tipove podataka koji postoje.

let objekat = {
ime: "Stefan", // String
starost: 25, // Number
ženjen: false; // Boolean
};

Neću zalaziti u detalje zašto se tako piše i kako objekti rade jer je za početnike to kompleksna materija. To ostavljam za drugi tutorijal. Ono što je očigledno je da pod jednom promenljivom objekat, možemo staviti još promenljivih unutar nje. Osim toga, možemo koristiti i funkcije ali više o tome drugi put.

Array - nizove koristimo kada imamo za cilj ispisati grupu elemenata sa kojom možemo raditi. Niz može sadržati sve tipove podataka, baš kao i objekat, ali ne i funkcije itd.

let niz = [1,2,3]; // niz brojeva
let niz2 = ['a','b','c']; // niz stringova
let niz3 = [1,2,'a',5,'tekst']; // Niz mešanih vrednosti

Vrednosti u nizu pišemo unutar uglastih zagrada, a odvajamo vrednosti zarezom. Vrednosti u nizu nazivamo elementima. Više o nizovima u drugom tutorijalu.

Autor tutorijala: Grindelwald

 

[Grindelwald]

Operatori

Operatori su simboli ili reči koje koristimo radi obavljanje neke akcije. Postoje tipovi operatora u zavisnosti sa kojom grupom podataka rade i šta im je namena. Postoje:
- Aritmetički operatori
- Operatori dodele
- String operatori
- Operatori inkrementacije i dekrementacije
- Logički operatori
- Operatori poređenja

Aritmetički operatori - obavljaju najjednostavnije matematičke operacije sabiranja, oduzimanja, deljenja i množenja. Uz to postoji moduo operator o kome ću takođe govoriti.

let x = 10;
let y = 4;

alert(x + y); // 14
alert(x - y); // 6
alert(x * y); // 40
alert(x / y); // 2.5

Neophodno je spomenuti da sam koristio funkciju alert() koja je definisana kao sastavni deo javascripta i koristi se da prikaze malo prozorce gde saopstava poruku. Prozor zatvaramo klikom na ok. Promenljive prosledjujemo unutar zagrada funkcije i te promenljive sada nazivamo argumentima funkcije. Do sada smatram da je sve vrlo jednostavno i jasno. Preostaje nam moduo operator. On je vrlo specifičan, ali veoma koristan u programiranju.

let x = 10;
let y = 4;

alert(x % y); // 2

Postavlja se pitanje, odakle broj dva? Prvo i očigledno je da moduo operator koristi simbol procenat. A sada kako radi. Funkcioniše po sistemu deljenja ali uradi još nešto dodatno. Kada podelimo brojeve 10 i 4, dobićemo 2.5 . Međutim, moduo na to gleda ovako. 4 + 4 daje osam, ali ako bi dodali još 4 onda prelazi 10. Dake ostajemo na osam. Onda on uzima razliku 10-8. I dobijamo 2. Dakle, moduo uzima onoliko koliko ostaje nakon deljenja. Znamo da je 10 podeljeno sa 4 = 2.5 ali to nije ono što moduo radi. Ne uzima on pet. Samo broj koji bi dopunio do broja sa kojim delimo.

Operatori dodele - čine gotovo istu radnju kao i aritmetički operatori, jedina razlika je što dobijene vrednosti skladište u novu promenljivu. Međutim, da je to tako, mogli bi reći "U redu, znak jednakosti je operator dodele, promenljivoj se prosledjuje vrednost preko njega". Tako je, znak jednakosti jeste operator dodele ali postoji kraći zapis dodele vrednosti na već postojeću.

let x = 0;
let y = 10;

x += 2; // x = x + 2 (2)
x -= 1; // x = x -1 (1)
x *= 10; // x = x * 10 (10)
x /= 2; // x = x / 10 (5)

y %= 4; // y = y % 4; (2)

U komentarima možemo primetiti da je x = x + 2 isto što i x += 2. To važi za sve aritmetičke operatore. Možda vam ovo izgleda konfuzno i zbog toga se držite jednostavnije prakse, ali kako postajete bolji, držite se ovoga. Zašto? Evo primera:

let x = 2;

x *= 2 + (10 / 2); // x = x * (2 + (10 / 2)) -> x = x * (2 + 5) -> x = x * 7 -> x = 2 * 7 -> x = 14

Mogu se navesti još kompleksniji primeri ali ovo je prikaz kako se nešto može svesti na prostije.

String operatori - koriste se radi upravljanjem stringovima. Tu postoji samo jedan operator i to je simbol + . Njegova primena je konketanacija (spajanje) dva stringa u jedan. Međutim isti taj operator može se koristiti nad stringom sa drugom svrhom.

let recenica = "Moje ime je ";
let ime = "Stefan";
let zajedno = recenica + ime; // "Moje ime je Stefan"

Ovo je vrlo lako razumeti. Imamo jedan string, imamo drugi string, želimo ih spojiti / nadovezati, prosto koristimo plus izmedju njih. Postoji i mogućnost da se koriste i brojevi čime nastaje komplikacija.

let x = 5;
alert("2" * x); // Greška
alert("2" / x); // Greška
alert("2" - x); // Greška
alert("2" + x); // 25

Ukoliko primenjujemo nad stringom (iako taj string sadrži broj u sebi) aritmetičke operacije izbaciće grešku osim u slučaju sabiranja jer javascript pretvara broj u string i time vrši konketanciju, ali ne i stvarno aritmetičko sabiranje. Da li postoji način da string postane broj? Svakako.

let x = "2";
let y = "5";

alert(+x + +y); // 7

Kada napišemo operator + pre imena promenljive koja sadrži neki broj, onda se taj broj od stringa konvertuje u pravi broj. Možda deluje konfuzno zato što sam koristio mnogo pluseva. +x pretvara "2" u 2. Onda imamo aritmetički operator + koji vrši sabiranje. Zatim +y pretvara "5" u broj 5. Upravo zato sabiranje se izvršava, a konketanacija ne postoji.

Operatori inkrementacije i dekrementacije - koristimo onda kada želimo povećati vrednost promenljive za jedan ili oduzeti za jedan. Ovaj operator je koristan u radu sa petljama (više o tome u drugom tutorijalu). Često zovemo ovaj operator kao brojač. On broji nešto jer mu vrednost raste za jedan ili se vrednost smanjuje za jedan.

let x = 5;
let y = 4;

alert(x++); // 5
alert(x); // 6
alert(++y); // 5
alert(y); // 5

Isti princip važi i za operator -- (dekrementacija). U čemu je razlika kada stavimo ++ ispred i iza promenljive? Kada u izrazu imamo x++ to znači da se prvo izvrvšava izraz pa se tek onda povećava vrednost promenljive. Ali ako imamo ++x, onda se vrednost prvo poveća pa se tek onda izvrši izraz.

Logički operatori - koriste se kada želimo vršiti upite. Ako su oba izraza tačan - uradi to. Ako je jedan od izraza tačan - uradi to. I uz to imamo negaciju postojećeg. Imajmo u vidu da ma šta god činili sa ovim operatorima, krajnja vrednost koju dobijamo je true / false.

let x = 16;
let y = (x + x > 12) && (x + x > 13);
alert(y); // true

y predstavlja vrednost logičkog poređenja. Ovde poredimo dva izraza. Prvi izraz je (x + x > 12). Tu pitamo da li je 16 + 16 veće od 32. Pošto je to true, proveravamo drugi izraz. Da li je 16 + 16 > 13 , pošto je to true, operator & postavlja pitanje. Ako je levi izraz i desni izraz tačan onda je true, ukoliko bar jedan nije tačan, onda je false. Dakle, & proverava da li su oba izraza tačna, ako jesu onda je true, ako nisu, onda je false.

let x = 16;
let y = x + x > 12 || x + x > 58;
alert(y);

Sve je isto izuzev operatora || koji funkcioniše po principu, ako je bar jedan od uslova tačan, onda je true, ako su oba tačna, onda je false. Prvi uslov je tačan kao što znamo. Ali drugi uslov nije tačan. 32 nije veće od 58, ali dobijamo vrednost true zato što je bar jedan tačan.

alert(!true); // false
alert(!false); // true

Ovo je krajnje jednostavno za razumeti. Operator negacije ! konvertuje true u false i false u true.

Operatori poređenja - Operatori poređenja su oni operatori kojima utvrđujemo da li je izraz tačan ili nije. U ranijem primeru videli smo samo jedan operator i to > postoji još operatora poređenja.

var x = 25;
var y = 35;
var z = "25";

alert(x == z);  // true
alert(x === z); // false
alert(x != y);  // true
alert(x !== z); // true
alert(x < y);   // true
alert(x > y);   // false
alert(x <= y);  // true
alert(x >= y);  // false

== Ako su obe vrednosti jednake, vrati true.
=== Ako su obe vrednosti strogo jednake po vrednosti i po tipu podatka, vrati true.
!= Ukoliko vrednosti nisu jednake, vrati true.
!== Ukoliko vrednosti strogo nisu jednake po vrednosti i po tipu podatka, vrati true.
< Ukoliko je prva vrednost manja od druge, vrati true.
> Ukoliko je prva vrednost veća od druge, vrati true.
<= Ukoliko je prva vrednost manja ili jednaka drugoj, vrati true.
>= Ukoliko je prva vrednost veća ili jednaka drugoj, vrati true.

Postoji još jedan tip operatori koji vraća kog je tipa neka promenljiva. Pa tako imamo:

alert(typeof "test"); // String
alert(typeof 5); // Number
alert(typeof [1, 2, 3]); // Object
alert(typeof undefined); // Undefined
alert(typeof null); // Object
alert(typeof true); // Boolean
alert(typeof { name: "Stefan" }); // Object

Prosto koristimo rezervisanu reč typeof nad nekom promenljivom i dobićemo njen tip. Primećujete da se u više navrata pojavljuje tip Object, ali ne i konkretno koji je objekat u pitanju.

Autor tutorijala: Grindelwald

 

[Grindelwald]

Uslovi

Kada govorimo o uslovima, prvo što treba da nam padne na pamet jeste kada nam neko ponudi između dva izbora ili više da odaberemo. Recimo, ako bacamo novčić, hoćemo li pesmo ili glavu. To je banalni primer uslova. U programiranju takođe postoje uslovi, ali se odnose na odluke koje se donose u komunikaciji sa klijentom (pretraživač).

let starost = 17;
let punoletan; // Undefined

if( starost >= 18) {
punoletan = "Punoletni ste";
} else {
punoletan = "Niste punoletni";
}
alert(punoletan); // Niste punoletni

Koristimo reyervisane reči if i else . Prvo počinjemo sa pitanjem "Dali je sadržaj promenljive starost veće od 18. Ukoliko jeste, ulazi u blok gde se izvrsava dodeljivanje vrednosti "Punoletni ste" u promenljivu punoletan. Blok podrazumeva sve ono što je između vitičastih zagrada. Ukoliko vrednost promenljive starost nije veće od 18, koristi se else (onda - u suprotnom). Dakle, ako prvi uslov nije ispunjen, preskače se blok koda i odmah ulazi u drugi blok. Takva struktura označava konkretno pitanje: Ako je prvo, uradi to, a ako nije to, odnosno ako je bilo šta drugo, onda uradi ovo ispod.

let starost = 5;
let punoletan; // Undefined

if (starost >= 18) {
punoletan = "Punoletan si";
} else if (starost < 18 && starost > 0) {
punoletan = "Maloletan si";
} else {
punoletan = "Niste rodjeni";
}

alert(punoletan);

Novost ovde je što sam koristio else if čime sam postavio sledeći uslov. Ako nije prvi, hajde da probamo drugi, ako nije drugi, hajde da probamo treći itd. Međutim, postoji razlog zašto sam stavio ovakav uslov. Ukoliko je starost manje od 18 i ukoliko je starost veća od nule, osoba je maloletna. Nalazi se u rasponu između 0 i 18. A treća opcija (else) jeste sve osim navedenog. A to je 0 i svi negativni brojevi. Nebitno je da li ste napisali 0 ili -200, svejedno je vrednost "Niste rođeni". Ovde sam namerno upotrebi i logički operator && sa ciljem praktične primene.

Ternarni operator - koristi se da proveri tačnost izraza i u zavisnosti od toga vrati vrednost ako je true i naravno drugi vrednost ako je false.

let starost = 19;
let punoletan = starost > 18 ? "Punoletni ste" : "Maloletni ste";
alert(punoletan);

Ovde možemo odmah promenljivoj punoletan dodeliti vrednost jer se više upita dešava odjednom. Prvo se postavlja uslov (starost > 18), zatim stavlja ? koji predstavlja ternarni operator. Nakon toga imamo dve mogućnosti. Prvo pišemo koja se vrednost dodeljuje promenljivoj punoletan ukoliko je vrednost true, ali ako nije true, nakon dve tačke, dodeljujemo drugu vrednost. Uslov koji je pre upitnika može se pisati unutar zagrada kao u standardnom if-u ako želite preglednost.
Možda se pitate, da li je uopšte moguće dobiti sve ono što smo gore uradili sa ternarnim operatorom? Da, svakako. Mada izgleda konfuzno:

let starost = 20;

let punoletan =
starost >= 18
? "Punolitni ste"
: starost < 18 && starost > 0
? "Maloletni ste"
: "Niste rodjeni";
alert(punoletan);

Kao i malo pre, proveravamo da li je osoba punoletna, ako jeste, napisaćemo da jeste, ali ako nije, odmah nakon dve tačke, ne pišemo vrednost da nije punoletna, nego postavljamo nov upit i zatim opet ternarni operator. Ako je starost u rasponu od 0 do 18, onda je maloletna, a poslednja vrednost nakon dve tačke je ono else.
Svrha je da razumete kako možete neprestano koristiti ternarni operator jedan za drugim dok ne dobijete željeni rezultat, međutim to je vrlo nepregledno i teško razumljivo na prvi pogled. Zapamtite, ternarni operator koristimo samo jednom, nikada ne nadovezujemo drugi nad njim jer to nije praksa. Ako želimo imati više else if, onda to pišemo upravo tako.

Switch - je takođe koristan kao uslov i ima specifičan pristup.

let x = 3;

switch(x) {
case 1:
alert('Jedan je');
break;
case 2:
alert('Dva je');
break;
case 3:
alert('Tri je');
break;
}

switch je rezervisana reč. Unutar zagrada prosledjujemo argument, bilo koji. U našem slučaju to je promenljiva iks. Ovo što vidite case 1: ne znači da je ovo slučaj prvi, a zatim slučaj drugi. Naprotiv, 1 je uslov. U slučaju da je vrednost iksa jednaka broju 1, onda alertuj. Dakle to malo case 1: isto je što i

if(x == 1)

Primetićete da piše rezervisana reč break. Nju koristimo onda kada želimo prekinuti rad u nekom bloku. U ovom slučaju ako je prvi uslov tačan, prekini dalju proveru. Jer switch za razliku od if-a, ide liniju po liniju dok ne pregleda sve slučajeve. Da se to ne bi desilo, pišemo nakon svakog case-a break i time izlazimo iz switch-a ako je vrednost true. Na sve ovo možemo dodati i rezervisanu reč default koja uvek ide na kraju switch-a.

let x = 5;

switch(x) {
case 1:
alert('Jedan je');
break;
case 2:
alert('Dva je');
break;
case 3:
alert('Tri je');
break;
default:
alert("Nije ni jedan, ni dva, ni tri");
break;
}

Dakle, ako nije ni jedan ni dva, a ni tri, onda je ono default. Isto kao else koje smo koristili pre. Kako pomoću switch-a dobiti isto ono što smo dobili sa if, else if i else? Pa, to je prosto.

let x = 19;

switch (true) {
case x <= 0:
alert("Niste rodjeni");
break;
case x >= 18:
alert("Punoletni ste");
break;
default:
alert("Maloletni ste");
break;
}

Primetićete ovde nešto što se čini nelogičnim. Zašto je argument switch-a true? Zato što moramo ući u switch, jer ako je false on se neće pokrenuti. I kada uđemo u switch, za prvi case pitamo da li je x (broj godina) manji ili jednak nuli, ako jeste kažemo da niste rodjeni. Zašto to prvo? Pa switch, kao što sam napomenuo, ide linijski. Ako to nije tačno, pitamo da li je osoba možda punoletna, ako jeste to i kažemo. E sada, imamo default odnosno isto što i else. Za razliku od if-a i njegove logike, ovde je, zbog linijske provere, else ono što je preostalo.
Pošto broj nije manji ili jednak nuli. Da li je veći od 18 ili jednak? Nije, i šta nam preostaje? Sve između.

Autor tutorijala: Grindelwald

 

[Grindelwald]

Rad sa Stringovima

String može biti skup bilo kojih karaktera koji ignorišu rezervisane reči, a možemo ih inicijalizovati na tri načina.

let x = '5';
let y = "5";
let y = `5`;

Sva tri načina su ispravna, međutim treži način ima jednu zgodnu caku koju možemom koristiti na jedan veoma lukav način. Umesto korišćenja konketanacije čime bi komplikovali kod, promenljivu možemo integrisati direktno u string.

let x = 10;
alert(`5 + 5 = ${x}`);

Ovde je novima to što piše ${x} . Sve što se nalazi unutar vitičastih zagrada upisuje se baš onakvim kakvo jeste.

Operacije nad stringom

- length

Možemo pronaći kolika je dužina stringa na sledeći način. Koristićemo se svojstvom length (dužina).

let ime = 'Stefan';
alert(ime.length); // 6

Ovo može biti korisno kada radimo sa petljama ili nizovima itd.

- indexOf i lastIndexOf

let recen
ica = 'Sunce je lepo. A svi volimo Sunce';
alert(recenica.indexOf('Sunce')); // 0
alert(recenica.lastIndexOf('Sunce')); // 28

Metoda indexOf() pokazuje na kojem broju počinje naš string koji pretražujemo. Brojanje počinje od 0. S obzirom da se Sunce javlja odmah na početku, onda je 0. Prvi karakter je na nultoj poziciji. Međutim, metoda lastIndexOf() vraća poslednje javljanje datog stringa. U našem slučaju, ako brojimo karakter po karakter (računajući u razmak) dobićemo broj 28.

- slice

let recenica = 'Ja volim Jabuke';
alert(recenica.slice(9,13)); // Jabuke

Ako koristimo metodu slice() nad stringom, imamo dva parametra. Prvi je od kojeg mesta u stringu počinje da seče i drugi parametar je do kog mesta u stringu prekida sečenje. U mom slučaju isekao sam reč Jabuka. Naravno, postoje više načina za korišćenje ove metode i to:

let recenica = 'Stefan voli jabuke';
alert(recenica.slice(12)); // jabuke

U ovom slučaju imamo samo jedan parametar kojim označavamo od koje pozicije da započne sečenje, a drugi parametar je prazan što znači da seče do kraja stringa. I postoji treća primena:

let recenica = "Stefan voli jabuke";
alert(recenica.slice(-6, recenica.length)); // jabuke

Ako unesemo negativan broj kao prvi argument, onda se broji od poslednjeg karaktera u stringu, a drugi argument treba biti što manji u minusu jer se približava kraju stringa. Međutim, ako želimo da dođemo do kraja stringa, ne može stojati 0 jer je to početak. Dok -1 ne ide do kraja. Zato pišemo celu dužinu niza da bi stigli do zadnjeg karaktera.

- substring
Substring radi identično što i slice sa razlikom:
- Ako je bilo koj argument manji od nule ili je NaN, tretira se kao 0.
- Ako je bilo koj argument veći od dužine stringa, tretira se kao dužina stringa.
- Ukoliko je početni index veći od krajnjeg indexa, onda se vrednosti indexa zamenjuju

rec.substring(5,0) == rec.substring(0,5)

Primeri:

var recenica = "Stefan voli jabuke";
alert(recenica.substring(12, recenica.length+100)); // jabuke
alert(recenica.substring(7, 0)); // Stefan
alert(recenica.substring(-5, -6)); // Vraćaju ništa

Prvi primerje prost kao i ranije. Jedino pravilo koje se poštuje jeste da ako je jedan od elemenata veći od maksimalne dužine stringa, on se vraća nazad na maksimalnu dužinu niza. Drugi je drugačiji zato što piše da počinjemo od sedmon karaktera, ali idemo ka prvom. Kako je gore navedeno pravilo, u tom slučaju se vrednosti zamenjuju i postaje 0, 7. Poslednji primer je opet praćen pravilom da ako su brojevi negativni, dobijamo 0. Tako da 0 i 0 vraćaju ništa.

- toUpperCase , toLowerCase
Ove dve metode čine da string ili promeni svaslova kao velika slova, ili sva slova kao mala slova.

let recenica = 'Stefan Voli Jabuke';
alert(recenica.toUpperCase()); // 'STEFAN VOLI JABUKE'
alert(recenica.toLowerCase()); // 'stefan voli jabuke'

- charAt
Koristimo onda kada želimo uzeti samo jedan karakter iz niza.

let ime = 'Stefan';
alert(ime.charAt(2)); // e

Međutim postoji bolji način da se pristupa istom zato što se od E5 standarda (trenutni je E6) string tretira i kao niz.

let ime = 'Stefan';
alert(ime[2]); // e

Isti je princip. Pristupamo trećem elementu u nizu (u nizu brojanje počinje od 0).

- split
Uz pomoć metode split možemo string konvertovati u niz zavisno od separatora koji se prosleđuje kao argument.

let recenica = 'Kupina,Malina,Jagoda,Banana';
let niz = recenica.split(',');
alert(niz[0]); // Kupina
alert(niz[1]); // Malina
alert(niz[2]); // Jagoda
alert(niz[3]); // Banana

Metoda split() sadrži separator kojim će vršiti razdvajanje, u našem slučaju je to zarez. Čim naiđe na zarez, on ukloni zarez i uzme vrednost pre njega i postavi ga kao prvi element. I tako redom sakuplja elemente. Kada pozivamo elemente niza, vidimo da imamo svako voće zasebno.

Autor tutorijala: Grindelwald

 

[Grindelwald]

Rad sa Brojevima

Brojevi su sastavni deo života oko nas. Pitagora je rekao "Sve je broj". Visina, dužina, širina, ugao, zapremina, kilaža itd. Sve možemo izraziti brojevima. Postoji i druga izreka: "Ne stvaramo mi matematiku, mi je otkrivamo jer je ona svuda oko nas". Započnimo sa primerima zapisa brojeva:

let a = 5;
let b = 3.14;
let c = 0b10; // 2

// Rad sa vecim brojevima
let d = 1.25e4; // 12500
let e = 12.55e-3; // 0.01255

U prvom tutorijalu prikazao sam da se broj može izraziti na različitim bazama (binarno, oktalno, dekadno..) zbog toga o tome neću govoriti. Novina su promenljive d i e. Ono što je specifično za njih je dodatak e nakon broja, a zatim opet broj nakon karaktera e. Sve ispred broja e je samo broj, dok iza e imamo broj za kojim množimo osnovni broj. Ali ne množimo ga recimo broj 4. Već brojem 1000. U pitanju je ukupan broj cifara gde se nule nadovezuju od jedinice. To je množenje brojem deset iznova i iznova. Imamo 1, zatim 10, zatim 100, zatim 1000. (to je množenje brojem deset 3 puta).
Ako je e negativan, onda se deli sa osnovnim brojem. U slučaju promenljive e, deli se sa 100. Time se zarez pomera 3 polja na levo.

Operacije brojeva i stringova

let a = 10;
let b = 20;
let c = '30';

// Ukoliko je u pitanju samo operator sabiranja
alert(a + b); // 30
alert(c + c); // 3030
alert(a + c); // 1030
alert(c + a); // 3010
alert('Zbir od 10 + 20 je ' + a + b); // 'Zbir od 10 + 20 je 1020'
alert('Zbir od 10 + 20 je ' + (a + b)); // 'Zbir od 10 + 30 je 30'
alert(a + b + c); // 3030

Promenljive a i b su tipa broj. Promenljiva c je tipa string (iako unutar nje postoji vrednost broja). Svaki put kada vršimo sabiranje sa strungom, ne dešava se matematička operacija, već konketanacija (spajanje) brojne vrednosti sa stringom. Postoje izuzeci koji su napisani u primeru iznad. U pitanju su poslednja tri alerta. U prvom od poslednja tri izražavamo da je zbir a + b nešto. Ali pošto je string došao na prvom mestu (počeli smo izraz stringom) zbog toga se sve kasnije pretvara u string. Zato a + b više nisu brojevi nego su postali stringovi. Međutim, u narednoj liniji koda, vidimo da a + b stoje unutar zagrada, zbog čega ignorišemo prednost stringa i ipak izvršavamo operaciju. I zato dobijamo vrednost 30. U poslednjem alertu imamo zbir od a, b i c. Međutim, vodimo računa o tome da unutar alerta izraz počinje prvo brojevima, a zatim se završava stringom. U takvom slučaju, mogu se vršiti matematičke operacije, pa tek onda se vrši na kraju konketanacija.

A sada ostale matematičke operacije (izuzev moduo).

let a = 10;
let b = 20;
let z = '30';

alert(b - a); // 10
alert(c - a); // 20
alert(a * c); // 300
alert(c / a); // 3

U slučaju operatora koji nisu plus, a koriste se nad stringom, string postaje broj (ukoliko je njegova vrednost zaista broj) i onda se vrši matematička operacija. Svaki od navedenih primera je tačan kada se izvrše operacije.

Beskonačnost

U drugim programskim jezicima ako delimo sa nulom dolazi do greške jer se dobija nešto što nije moguće izračunati, odnosno prikazati na ekranu. Jer je beskonačnost nepojmljiva ljudskom umu. Zato u matematici beskonačnost zovemo "brojem". Javascript je to lukavo izbegao.

let x = 5;

alert(x / 0); // Infinity
alert(-x / 0); -Infinity

Na ovaj način izbegavamo suvišnu proveru da li je broj podeljen nulom jer ako jeste uradi to i to.

Parsiranje brojeva

Imamo integer parsiranje i float parsiranje. Pod ovim se podrazumeva da string konvertujemo u broj.

alert(parseInt('3.14')); // 3
alert(parseInt('50px')); // 50
alert(parseInt('20 godina')); // 20
alert(parseInt('Godina 2020')); // NaN
alert(parseInt('10 10 2020')); // 10

parseInt() je metoda kojom se string konvertuje u broj (celi broj). Decimalni broj uzima samo vrednost pre tačke. Broj nakon kojeg sledi tekst, odstranjuje tekst i uzima samo broj. Ako je string prvi, pa tek onda ide broj, onda vraća NaN (nije broj). Ako imamo više brojeva razdvojena razmakom, vraća samo prvi broj.

alert(parseFloat('3.14')); // 3.14
alert(parseFloat('50px')); // 50
alert(parseFloat('Godina 2020')); // NaN

Isto kao i parseInt, samo što zadržava decimalne brojeve. A pravila ostaju ista.

Konvertovanje brojeva u string

let x = 10;
let t = x.toString();
alert(t); // '10'
alert(typeof t); // string
alert(typeof x); // number

alert((12).toString()); // '12'
alert((25.6).toString()); // '25.6'
alert((6).toString(2)); // '110'

Metoda toString() koja se primenjuje nad nekom promenljivom konvertuje je u string. Na početku imam promenljivu sa imenom x i njenom vrednošću 10. Kada tu vrednost konvertujem u string i vrednost prebacim u novu promenljivu pod imenom t, dobijam da više nije broj, nego string. To možemo videti kada koristimo operator typeof.
U drugom delu koristim literale (vrednosti koje su direktne vrednosti, koje nisu unutar promenljive i koje po završetku sa radom nad njima nestaju), i to u zagradama da bih mogao da primenim metodu toString. Postoji opcioni parametar metode a to je na kojoj bazi konvertujemo u string dati broj. Ako sam napisao 6, a kao argument stavio 2, time sam rekao: Konvertuj mi 6 u binarni broj i napravi string od toga. Piše dva jer je osnova 2.

Maksimalne i minimalne vrednosti brojeva

let x = Number.MAX_VALUE;
alert(x); // 1.7976931348623157e+308

let t = Number.MIN_VALUE;
alert(t); // 5e-324

alert(Number.MAX_VALUE * 2); // Infinity
alert(-1 * Number.MIN_VALUE * 2); // -Infinity

Kada zapisujemo Number.MAX_VALUE onda dobijamo maksimalnu vrednost broja koji se može zabeležitu u računaru.
Kada zapisujemo Number.MIN_VALUE onda dobijamo minimalnu vrednost broja koji se može zabeležiti u računaru.
Ako datu maksimalnu vrednost pomnožimo sa dva, dobićemo beskonačnost jer kapacitet memorije je prevaziđen. Takav broj se ne može zapisati.
Ako datu minimalnu vrednost prvo pomnožimo sa minuj jedan (radi dobijanja negativne vrednosti a zatim nju pomnožimo sa 2, dobijamo negativnu beskonačnost.

Autor tutorijala: Grindelwald

 

[Grindelwald]

Petlje

Petlja (eng. loop) koristi se za ponavljanje bilo kojeg bloka koda. Petlje su esencijalne u programiranju jer nam omogućavaju da ponavljamo neku radnju x puta sa ciljem da se izvrši zadatak. Ukoliko želimo da pitamo korisnika koliko puta želi da alert kaže ime "Stefan". On može uneti bilo koji broj. Mi ne možemo ručno pisati hiljadu puta alert za istu stvar. Takođe mi i ne znamo koji će on broj uneti. Tu dolaze petlje u pomoć. Petlje se izvršavaju sve dok je neki uslov ispunjen, odnosno dok je tačan. Razlikujemo:
- While - Ponavlja blok koda sve dok je specifičan uslov tačan (true).
- Do...while - Ponavlja blok koda jednom (sigurno - čak iako uslov nije tačan), a zatim se uslov proverava kao i kod while petlje.
- For - Ponavlja blok koda sve dok se ne dostigne specifičan broj.
- For...in - Koristi se da prođe kroz sva svojstva objekta ma koliko god da ih ima.
- For...of - Korisi se nad objektima koji dozvoljavaju sami po sebi da se nad njima vrši ponavljanje (ovo su nizovi, mape, setovi itd). Biće vam jasnije kada prođemo sve to.

While petlja

while(uslov) {
// Izvrsi kod
}

Sama reč kaže - sve dok taj i taj uslov važi, onda izvrši taj blok koda. Često se u programiranju koristi promenljiva koja predstavlja osnovu od koje se započinje brojanje i gotovo uvek je to slovo i. Zašto i? Zato što je to prvo slovo od reči (increment) odnosno povećat / uvećati.

let i = 0;
while(i < 3) {
document.write(i); // Ponovice radnju tri puta
i++;
}

Idemo redom. Najpre definišemo brojač (tako je, u programiranju se i zove brojač), a zatim unesemo uslov koristeći brojač. U konkretnom primeru, uslov je da sve dok je 0 manje od 3, ponavljaj radnju. Kako petlja radi? Prvo postavlja (kao i uslovi) pitanje, da li je 0 manje od 3. Vraća true i onda izvrašava dati blok koda. Na kraju mi samostalno povećamo brojač za jedan i opet proveravamo uslov. Da li je sada jedan manje od 3? Da, jeste, i opet tako u krug sve dok brojač ne postane 3. Kada proveravamo da li je 3 manje od 3, vraća false i više ne ulazi u petlju.

0 < 3 // Prvi put
1 < 3 // Drugi put
2 < 3 // Treci put
3 < 3 // Prekid

Postoji još nešto što nisam spomenuo. Umesto alert, koristim objekat document nad kojim primenjujem metodu write(). Dokument kao objekat obuhvata vašu celokupnu web stranicu i omogućava radnje nad njom. Postoji nešto što se naziva DOM (Document Object Module). Pod njim se podrazumevanju svi mogući elementi koji postoje na našoj stranici (tipa paragrafi su deo dokumenta, atributi i tako dalje). Njima se može pristupiti i dalje raditi sa njima. Mogu se kreirati, mogu se dodavati događaji koji se mogu izvešiti nad njima.
Svaki put kada izvršimo metodu write(), dobićemo na našoj web stranici, na dnu (nakon svih elemenata) najjednostavniji tekst.
Obratite pažnju da uslov jednom prilikom mora biti false, u suprotnom postaje beskonačna petlja (petlja bez izlaza), pri čemu će stranica blokirati.

Do...while petlja

do {
// Kod koji se izvrsava
} while(uslov);

U odnosu na while petlju, do while počinje sa do {}, a zatim pišemo while. Ovim podrazumevamo da se blok koda ivrši sigurno jednom, a tek nakon toga proverava se da li je uslov tačan ili ne.
JavaScript:
let i = 0;
do {
document.write(i);
i++;
} while(i < 3);

Primetimo da se odmah ispisuje broj 0, a zatim se brojač poveća za jedan. Onda se proverava uslov. Dakle, ne proveravamo da li je 0 manje od 3, već, da li je 1 manje od tri. Tako da sledeći put kada uđe u blok koda, izvršiće ispisivanje jedinice, a zatim proveriti da li je 2 manje od 3. I tako dalje, sve dok uslov ne bude netačan. Krajnji ishod je (0, 1, 2)

For petlja

for( inicijalizacija; uslov; inkrementacija){
// Klod koda koji se izvrsava
}

Prvo pišemo rezervisanu reč for a zatim Unutar zagrada moramo napisati 3 stvari odvojene tačka-zarez karaktera. Prvi je inicijalizacija odnosno davanje neke vrednosti od koje se počinje brojanje. Vrednost koja je neophodna tokom rada sa uslovom. Drugi deo je sama provera uslova. To je identično kao i za dve prethodne petlje. Treći deo je inkrementacija. Umesto da pišemo i++ nakon koda koji se izvršava, i for petlji to pišemo unutar zagrada.

for(i = 0; i < 3; i++) {
document.write(i); // Izvrsava se tri puta
}

Prvi parametar je brojač. Mogli smo zapisati kao let i = 0. Ali radiće i bez let. Promenljive možemo inicijalizovati i bez let, osim u slučaju kada želimo naznačiti da li je promenljiva globalna ili konstantna vrednost itd. Drugi deo nam je uslov koji je identičan kao u prvoj while petlji. I na kraju imamo brojač koji se baš kao i u while petlji povećava. Osim što ne stoji ispod koda, stoji kao treći parametar unutar zagrada. Ishod je (0, 1, 2).
For petlja je jako korisna kada se vrši ponavljanje nad nizom. Ali da bi ste razumeli o čemu govorim, u narednom tutorijalu govoriću o nizovima.

For...in petlja

for(promenljiva in obekat) {
// Blok koda koji se izvrsava
}

Imamo tri "elementa". Prvi nosi naziv promenljiva. Njeno ime biramo mi sami, a intuitivno treba biti logički povezano sa objektom sa kojim radimo. Imamo rezervisanu reč in. Ponavljamo radnju dok nešto postoji u nečemu.

let niz = [1,2,3];

for(element in niz) {
document.write(niz[element]);
}

Kako je ovo specifična petlja moram koristiti bar jedan primer sa nizom. O nizovima sam govorio nešto kratko u prvom tutorijalu kada sam napisao na koji način pravimo niz. Kao što se da videti iz primera gore, imamo promenljivu niz, koja jeste niz i sadrži elemente (u našem slučaju brojeve) jedan, dva i tri. Obratimo pažnju na intuitivno pisanje. Najpre imenujemo promenljivu element u (in) niz. Kako 1,2,3 jesu elementi niza, zato je ispravno napisati ime promenljive element. Zašto ne elementi? Zato što prolazimo element po element, korak po korak kroz niz.
Tako pišemo niz, a unutar uglastih zagrada promenljivu element. Ovim govorimo da će se promenljiva element menjati svaki put kada se "brojač" pokrene. Ova radnja izvršava se sve dok se ne prikaže poslednji element niza.

Autor tutorijala: Grindelwald

 

[Grindelwald]

Nizovi

Niz je kompleksna promenljiva koja u sebi može sadržati proste tipove podataka, zatim objekte, funkcije čak i pod nizove. Pretpostavimo da nam je potrebno da napišemo tri promenljive čije su vrednosti brojevi. To bi bez nizova izgledalo ovako:

let a = 1;
let b = 2;
let c = 3;

Ako želimo vrednosti napisati kao niz vrednosti, onda to prostije zapisujemo pod imenom jedne promenljive.

let niz = [1,2,3];

Međutim, postavlja se pitanje kako pristupiti vrednostima koje se nalaze u nizu ako svoje ime noze kao niz. Nemaju drugo ime kao u prethodnom primeru. Tačno je da sve ima svoje prednosti, ali i mane. Ukoliko želimo ispisati sve vrednosti niza moramo koristiti petlju.

Izvlačenje vrednosti iz elementa niza

let niz = [1, 2, 3];

for (i = 0; i < niz.length; i++) {
alert(niz[i]);
}

Kako smo u prethodnom tutorijalu objasnili rad petlji, nema potrebe da činimo isto. Ono što je važno je razumeti da niz ima elemente. Ti elementi su označavaju brojevima. Ako bih napisao niz[0] time bih pristupio prvom elementu niza. Mesto članova u nizu počinje od nule. Kada sam napisao niz time sam naglasio da će se element kome pristupam menjati u zavisnosti kako se menja promenljiva i. Kako se brojač povećava za jedan po iteraciji, onda će se i elementi niza prikazivati jedan za drugim.
Ono što je novina u odnosu na prethodnu lekciju jeste svojstvo length. Kada na ime niza primenimo svojstvo, ono nam vraća dužinu niza, odnosno broj elemenata u nizu. Postoji još jedan način da izvučemo vrednosti elemenata i to for-of petljom i for-in petljom. Preporučuje se da se for-in petlja ne koristi nad nizovima, već nad objektima. U tom slučaju koristićemo for-of.

let niz = [1, 2, 3];

for (broj of niz) {
alert(broj);
}

Princip je isti kao i sa standardnom for petljom izuzev što nema potrebe za brojačem. On se automatski u pozadini izvršava. Ovo je korisno ako se brojač povećava za jedan. Ukoliko u nekom slučaju brojč zaste na sebi svojstven način, onda se ne koristi ova petlja.

Dodavanje novih elemenata u niz

niz.push(vrednost);

let niz = [1, 2, 3];
niz.push(4);

for (broj of niz) {
alert(broj);
}

Metoda push()dodaje nove vrednosti nizu na samom kraju. Ne na početku, ne na sredini, već tamo gde se nalazi poslednji element niza. Mogu se dodati više vrednosti odjednom kao argumenti metode push.

let niz = [1, 2, 3];
niz.push(4, 5, 6);

for (broj of niz) {
alert(broj);
}

Možemo dodati novi element na prvom mestu niza, što podrazumeva da će svi ostali elementi pomeriti svoje mesto za jedno sa leva na desno.

let niz = [1, 2, 3];
niz.unshift(5);
for (broj of niz) {
alert(broj); // 5,1,2,3
}

Uklanjanje elemenata iz niza

niz.pop();

Metoda pop() uklanja poslednji element u nizu. Nakon izvršavanja akcije, vraća vrednost koju je uklonila.

let niz = [1, 2, 3];
let x = niz.pop();
alert(x); // 3

Ukoliko želimo ukloniti prvi element niza koristimo metodu shift() koja takođe vraća vrednost elementa koji je uklonjen.

let niz = [1, 2, 3];
let x = niz.shift();
alert(x);

Dodavanje i brisanje elemenata niza na bilo kojoj poziciji
Metoda splice()je vrlo fleksibilna metoda koja omogućava odabir odakle se počinje brisanje, koliko se elemenata briše ali isto tako radi i suprotno.

let niz = [1, 2, 3];
niz.splice(0,1); // Brise samo prvi element niza

Počinje na indeksu 0, briše jedan element. Dakle upravo taj element, prvi.

let niz = [1, 2, 3];
niz.splice(3, 0, 4, 5); // Na cetvrtoj poziciji dodaje dva elementa i to 4,5
for (broj of niz) {
alert(broj); // 1,2,3,4,5
}

Ovog puta primećujemo da je indeks 3 (četvrto mesto u nizu), briše 0 elemenata što govori metodi da sledi dodavanje. Nakon drugog argumenta sve što usledi nakon njega su vrednosti koje se dodeljuju nizu.

Kreiranje stringa od niza
Kao što znamo, niz se sastoji od elemenata koji su međusobno nezavisni po vrednostima. Ako želimo da ih spojimo, da postanu string, da postanu celina koristimo metodu join().

let niz = ["Ja", "se", "zovem", "Stefan"];
let recenica = niz.join(" ");
alert(recenica); // Ja se zovem Stefan

Spajanje elemenata niza join metodom čiji je argument razmak pod navodnicima. To znači da će sve elemente sklopiti, ali svaki odvojiti zarezom. Da je umesto razmaka bila crtica ili kosa crta ili samo string bez razmaka, elementi bi postali spojeni na taj način.

Izvlačenje dela niza
Možemo izvući vrednosti iz niza tako što koristimo metodu slice() . Ona ima dva argumenta. Početni indeks i završni indeks. Međutim, metoda uzima vrednosti, ali ne menja originalni niz.

let niz = ["Ja", "se", "zovem", "Stefan"];
let x = niz.slice(0, 2); // Ja se
alert(x);

Dakle, od prvog, elementa, uzeti dva elementa. Samo prvi i drugi. Ne vodi se logikom od prvog pa još dva. Već od prvog, pa još jedan, ali ne u poslednji koji je naveden kao zadnji indeks. Slice može raditi i sa negativnim argumentom

let niz = [1, 2, 3, 4, 5, 6];
let x = niz.slice(-2);
alert(x); // 5,6

Uzima dve poslednje vrednosti iz niza s desna na levo.

Spajanje dva ili više niza
Kao što imamo konketanaciju kod stringova, tako postoji konketanacija i kod nizova. Primenjujemo metodu concat().

let x = [1, 2, 3];
let b = [4, 5, 6];
let c = x.concat(b); // Pravi nov niz ne menjajuci stare.
alert(c); // [1,2,3,4,5,6]

Napravimo novu promenljivu, napišemo ime prvog niza, metodu concat i kao argument ime niza koji spajamo. Imajte u vidu da možemo nadovezati više od jednog niza

let x = x.concat(niz1,niz2,niz3, nizN);

Pretraga kroz niz
Ukoliko želimo pronaći neku vrednost unutar niza, odnosno saznati na kojem se indeksu ona nalazi, možemo se koristiti metodama indexOf() i lastIndexOf().
Ukoliko element koji pretražujemo ne postoji u nizu, vratiće vrednost -1.

let a = [1, 2, 3, 1, 4, 5, 1];
let b = a.indexOf(1); // 0
let c = a.lastIndexOf(1); // 6
let d = a.indexOf(10); // -1

Kod prve pretrage vraća poziciju vrednosti broja 1. To je prva pozicija (0) . Kod druge pretrage traži vrednost 1 ali poslednje javljanje vrednosti jedan u nizu. Jedan se javlja na mestima 0, 3 i 6. Poslednje javljanje je 6 i to nam vraća. Treća pretraga je vrednost 10 koja ne postoji u nizu i time dobijamo -1 kao znak da ne postoji.

Pretragu kroz niz možemo vršiti metodom includes()koja može sadržati dva argumenta od kojih je drugi opcioni.

let a = [1, 2, 3, 1, 4, 5, 1];
let b = a.includes(2); // true
let c = a.includes(6); // false
let d = a.includes(1, 2); // true - Da li sadrzi broj 1 do pozicije 2
let e = a.includes(3, 3); // false - Da li sadrzi broj 3 do pozicije 3

Niz možemo pretražiti i metodama find() i findIndex(). Imaju sličan način rada izuzev što vraćaju različite vrednosti. Metodu find koristimo da pretražujemo vrednost u nizu u zavisnosti od uslova. Dok findIndex koristimo da vrati index gde se nalazi element u nizu ali ne i njegovu vrednost. Ukoliko vrednost ne postoji, vraća undefined.

let niz = [1, 0, 3, 1, false, 5, 1, 4, 7];

let rezultat = niz.find(function (element) {
return element > 4; // Vrati element iz niza koji je veci od 4.
});
alert(rezultat); // Vraca broj pet. Iako je 7 veca vrednost, on se zaustavlja kod prve vrednosti.

Kada pišemo find metodu, unutar nje možemo pisati anonimnu funkciju kao što smo sada uradili. Funkcija se piše rezervisanom rečju function, a zatim se upisuje opcioni parametar. U našem slučaju to smo nazvali element. Funkcija mora da vrati neku vrednost. U našem slučaju vraća onu vrednost koja je veća od elementa. Find metoda predstavlja svojevrsnu petlju koja pretražuje niz sve dok se ne ispusti uslov koji se traži.

let niz = [1, 0, 3, 1, false, 5, 1, 4, 7];

let rezultat = niz.findIndex(function (element) {
return element > 6;
});
alert(rezultat); // Vraca : 8

Kao što sam pomenuo. Vraća indeks gde se nalazi element koji se pretražuje ali ne i njegova vrednost. Kako metoda find ima ograničenje jer nalazi samo prvi element koji ispunjava uslov, postoji metoda filter()koja vraća nov niz sa elementima koji su prošli dati test.

let niz = [1, 0, 3, 1, false, 5, 1, 4, 7];

let rezultat = niz.filter(function (element) {
return element > 4;
});
alert(rezultat); // Vraca: 5,7
alert(rezultat.length); // Vraca: 2

Autor tutorijala: Grindelwald

 

[Grindelwald]

Sortiranje nizova

Prethodni tutorijal ticao se nizova i različitim metodama koje se mogu primeniti nad njima. Ovo je samo produžetak rada sa nizovima.

let niz = ["J", "E", "A", "C"];
niz.sort();
alert(niz); // A C E J

Primenjujemo metodu sort() koja sortira elemente po abecednom redu. Ne moraju biti samo sloba, mogu biti i reči,ali se gleda prvo slovo.

let niz = [1, 2, 3, 4, 5];
niz.reverse();
alert(niz); // 5 4 3 2 1

Imamo metodu reverse() kojom pomeramo elemente na način da poslednji postane prvi, predposlednji postaje drugi i tako dalje.
Kod:
[b1,b2,b3...bN] - > [bN...b3,b2,b1]

Međutim, metoda reverse() radi samo sa slovima, ali kako sortirati brojeve? Oni ne mogu biti sortirani po slovu.

let niz = [1, 2, 100, 4, 20];
niz.sort();
alert(niz); // 1 - 100 - 2 - 20 - 4

Primetićete da nešto nije u redu. Kako 100 može biti manje od 2, 20 ili 4. Problem je što metoda sort konvertuje brojeve u stringove. Pa tako se gleda prvi "broj" u stringu, a ti brojevi su u početnom nizu: "1" / "2" / "1" / "4" / "2"
Otklanja se ostatak broja i ostajemo samo sa ciframa. Logično je sada sortirati kao 1 - 1 - 2 - 2 - 4. U našem slučaju to je: "1, 100, 2, 20, 4". Ukoliko želimo da istinski sortiramo brojeve onda pišemo:

let niz = [1, 2, 100, 4, 20];
niz.sort(function (a, b) {
return a - b;
});
alert(niz); // 1, 2, 4, 20, 100

Šta je poenta sa ovim argumentima a i b? Zašto se vraća vrednost oduzimanja prema kojoj poredimo? Kako uopšte dobijamo redosled time?
Prilikom poređenja postavlja pitanja:
Ako je tokom poređenja a manje od nula, onda je a najmanja vrednost
Ako je tokom poređenja b veće od nula, onda je to najmanja vrednost
Ako je tokom poređenja vrednost 0, onda su vrednosti jednake i ne menjaju im se mesta.
Postupak provere:

let niz = [1, 2, 100, 4, 20];
niz.sort(function (a, b) {
return a - b;
});

// [a - b] = [1 - 2] = -1 | a je manje od nule i zato je najmanji element
// [a - c] = [1 - 100] = -99 | a je manje od nule i zato je najmanji element
// [a - d] = [1 - 4] = -3 | a je manje od nule i zato je najmanji element
// [a - e] = [1 - 20] = -19 | a je manje od nule i zato je najmanji element

// [b - c] = [2 - 100] = -98 | b je manje od nule i zato je najmanji broj na toj poziciji
// [b - d] = [2 - 4] = -2 | b je manje od nule i zato je najmanji broj na toj poziciji
// [b - e] = [2 - 20] = -18 | b je manje od nule i zato je najmanji broj na toj poziciji

// [c - d] = [100 - 4] = 96 | c je veca vrednost i zato je vrednost broja d manja i menjaju mesta [1,2,4,100,20]
// [c - e] = [4 - 20] | = -16 | c je manji od nule i zato je najmanja vrednost na datoj poziciji

// [d - e] = [100 - 20] = 80 | d je vece od e i zato se menaju mesta [1,2,3,20,100]

Naći maksimum i minimum u nizu brojeva

let niz = [1, 2, 100, 4, 20];
let max = Math.max.apply(null, niz); // 100
let min = Math.min.apply(null, niz); // 1

Ukoliko bi koristili samo Math.max(niz) i onda očekivali rezultat, dobili bi smo vrednost NaN. Ali ako bi uneli literalne vrednosti tipa Math.max(100,2,3) dobijamo vrednost 100. Math je objekat koji sadrži svoje metode koji su programeri predefinisali radi lakše upotrebe jezika. Zato je moramo pozvati, a zatim pozvati metodu. Otkud sada ovo null? To null uzima sve elemente i pretvara ih kao što smo videli u primeru iznad, kao literal koji traži maksimalnu vrednost.

let niz = [1, 2, 100, 4, 20];
// Math.max.apply(null,niz) = Math.max(...niz)

Ovde sam čisto naveo primer da se i bez apply može primeniti metoda max ali samo ako koristimo spread operator o kojem ću govoriti neki drugi put.

Autor tutorijala: Grindelwald

 

[Grindelwald]

Funkcije

Šta je funkcija? Funkcija je grupa izraza koja izvršava zadatak kojem je namenjena, a sa ciljem da se može održavati u skladu sa njenom svrhom.
- Funkcije smanjuju pisanje koda koji se ponavlja
- Funkcije je lako održavati i prilagoditi po potrebama
- Koristeći funkcije lako možemo u kodu ukloniti grešku

function imeFunkcije() {
// Kod koji se izvrsava
}

Definišemo funkciju tako što prvo pišemo rezervisanu reč "function", a zatim imenujemo funkciju prema nameni. Ako funkcija sabira dva broja, onda je ime sabiranje. Funkcija predstavlja blok koda koji se izvršava i kao takav predstavlja celinu u funkciji. Ako želimo vršiti kompleksne operacije iznova i iznova u našem kodu, bez funkcija bi ponavljali kod i vrlo lako bi se izgubili u moru koda. Ako imamo funkciju, pozovemo je po imenu i čitav blok koda se izvrši. Funkcije mogu imati parametre (kada definišemo funkciju, i stavimo unutar zagrada imena promenljivih, to su parametri. Kada se poziva funkcija, onda se prosleđuju parametri. Imena parametara i argumenata ne moraju biti ista.

Parametri funkcije

function saberi(a, b) {
return a + b;
}
alert(saberi(2, 8)); // 10

Imamo funkciju koja ima dva parametra. Njihova imena su a i b. Funkcija vraća vrednost korišćenjem rezervisane reči "return". Ono što vraća je zbir argumenata koji će biti prosleđen. Ovo je trivijalan primer kako funkcije rade.Kod iznad mogli smo pisati postupno:

function saberi(a, b) {
let c = a + b;
return c;
}
alert(saberi(2, 8)); // 10

Međutim, imajte u vidu da kao budući programeri kod pišete što kraće i što jasnije, da izbegavate suvišno pisanje koje je očigledno svima. Preglednost koda nekada je suvišna kada su ovakvi primeri u pitanju.

Predefinisan parametar
Može se dogoditi da želimo imati opcioni parametar. To znači da ako želimo pomnožiti neki broj, množićemo uneti argument sa brojem 1, recimo. A šta ako nije unet argument? Čime ću množiti broj koji imam u funkciji?

function pomnozi(a = 1) {
return 1 * a;
}
alert(pomnozi()); // 1
alert(pomnozi(4)); // 4

Možete videti da je parametar funkcije a dobio vrednost 1 u slučaju da se ne unese vrednost. Time bih mogao da izvršim operaciju množenja. Kao što se videti iz poziva dole sa argumentom i bez.

Opseg (scope) promenljive u radu sa funkcijama
Opseg predstavlja vidljivost promenljive u kodu. Postoji lokalna i glovalna promenljiva. Svaka promenljiva koja se definiše izvan bilo koje funkcije naziva se globalnom jer joj se može pristupiti unutar svake funkcije. Imajte u vidu da kada globalnu promenljivu koristimo unutar funkcije, njena vrednost se menja globalno, a ne lokalno. Vrednost joj trajno ostaje. Dok lokalna postoji samo u funkciji i nakon izlaska iz funkcije ona više ne postoji.

let a = 5;

function test() {
let b = 10;
a += 5;
return b;
}

alert(a); // 10
alert(b); // b nije definisano

U ovom primeru imamo globalnu promenljivu i jednu lokalnu promenljivu. Promenljiva a je globalna i ima vrednost 5. Promenljiva b je lokalna i ima vrednost 10. Unutar funkcije, promenljivoj a menjamo vrednost, ali je ne vraćamo nigde, dok funkcija vraća vrednost lokalne promenljive. Po pozivu promenljiva a pod tim imenom i dalje postoji dok promenljiva b ne postoji. Dakle, funkcija vraća samo broj, ali ne i ime promenljive koja je taj broj vratila.

Niz u funkciji
Kao parametar funkcije možemo koristiti svaki tip primitivne vrednost, objekte, nizove pa čak i druge funkcije.

let niz = [1, 2, 3, 4];

function suma(niz) {
let suma = 0;
for (broj of niz) {
suma += broj;
}
return suma;
}

alert(suma(niz)); // 10

Deklarišemo niz i dodeljujemo vrednosti. Kreiramo funkciju koja prima jedan argument. Ne mora se specifično naznačiti da je u pitanju niz, prosto se prosledjuje ime promenljive, a funkcija će sama prepoznati šta je. Kreiramo promenljivu suma kako bi unutar nje sabirali vrednosti iz niza. Prolazimo kroz sve elemente niza uz for-of petlju i na sumu dodajemo svaki broj. Na kraju funkcija nama vraća tu vrednost i dobijamo 10.

Primeri rada sa funkcijama

1. Dopuniti postojeći niz vrednostima 4,5,6

let niz = [1, 2, 3];

function dopuniti(arr) {
arr.push(4, 5, 6);
return arr;
}

alert(dopuniti(niz)); // [1,2,3,4,5,6]

Kreiramo niz, prosledjujemo ga unutar funkcije. Obratimo pažnju. Ime niza je niz, dok je ime parametra arr (array). Uzimamo vrednosti iz prosledjenog niza, dodajemo im nove vrednosti (4,5,6) i vraćamo niz nazad. Funkcija vraća nov niz. Dakle funkcija vraća niz, a ne primitivnu vrednost.

2. Napisati funkciju koja kao prvi argument ima niz, a kao drugi broj kori pretražuje u nizu. Ukoliko postoji, vrati true, ukoliko ne postoji, vrati false.

let niz = [1, 2, 3, 4, 5];

function dopuniti(p1, p2) {
return p1.includes(p2);
}
alert(dopuniti(niz, 4)); // true

Opet imamo niz, ovoga puta funkcija ima dva parametra, prvi je namenjen nizu dok je drugi namenjen broju koji želimo naći u nizu, odnosno proveriti da li dati broj postoji u nizu. Nemojte pisati imena parametara kao i ja osim ako niste apsolutno sigurni šta ti parametri znače u daljem radu. Funkcija odmah vraća vrednost izraza. Pitamo da li niz sadrži argument p2. Ako sadrži, vratiće nam true, ako ne sadrži vratiće nam false.

3. Napisati funkciju koja vraca zbir kvadrata. Pod tim se podrazumeva da se svaki broj u nizu kvadrira i kao takav doda na sumu

let niz = [1, 2, 3, 4];

function zbirKvadrata(arr) {
let zbir = 0;

for (broj of arr) {
zbir += broj * broj;
}

return zbir;
}
alert(zbirKvadrata(niz)); // 30

Zamislimo da se od nas trazi da svaki broj iz niza kvadriramo, a zatim saberemo sve vrednosti koje smo dobili. To je funkcija gore i uradila. Prolazila je kroz niz, dodeljivala na zbir vrednosti broja na koji je naišla, a koji se množio samim sobom. Ako je naišao na broj tri, onda se 3 množi sa 3, i dodaje se 9 na zbir.

Autor tutorijala: Grindelwald

 

[Grindelwald]

Objekti

Objekat je najsloženiji tip podatka jer može sadržati sve druge tipove podataka uključujući i druge objekte. Objekti su bairani na ključ:vrednost parovima (key:value) od kojih je ključ reprezentacija čemu pristupamo, a vrednost , pa i sama reč govori šta je. Key je praktično ime promenljive.

let serbianforum= {
imeForuma: "Serbian Forum",
URLforuma: "https://https:/serbianforum.org/",
autor: "Grindelwald",
};

console.log(serbianforum);

Samo jedna mala napomena pre objašnjenja kako funkcioniše gore napisan primer, umesto alert, od sada pa nadalje koristiću console.log(nesto) . Ovim putem je lakše testirati kod. Da bi smo pristupili vrednosti konzole, otvorimo stranicu na kojoj testiramo kod, Ctrl+Shift+I (Chrome) i otvaramo direktno konzolu.
Dakle, ime promenljive je serbianforum, to je ime objekta. Objekat otvaramo bitičastim zagradama kao i funkcije, ali je ovde svrha sasvim drugačija. Kako sam i rekao, imamo ključ:vrednost parove. Ključevi su imena promenljivih. Imamo tri promenljive (imeForuma, URLforuma, autor). I imamo njihove tri vrednosti. U našem slučaju sve vrednosti su string. Ako prosledim objekat u konzolu, dobijam konkretno i sadržaj objekta.

Pristupanje vrednostima objekta prema ključu
Kako sam rekao na samom početku, ključevi su promenljive i samo treba da izvučemo ime promenljive i time pozivamo i vrednost.

let serbianforum= {
imeForuma: "Serbian Forum",
URLforuma: "https://https:/serbianforum.org/",
autor: "Grindelwald",
};

console.log(serbianforum.imeForuma); // Serbian Forum
console.log(serbianforum.autor); // Grindelwald

Prosto napišemo ime objekta, a zatim tačku i ime promenljive unutar objekta.

Dodavanje funkcije u objekat
JavaScript:

let serbianforum= {
imeForuma: "Serbian Forum",
URLforuma: "https://https:/serbianforum.org/",
autor: "Grindelwald",
funkcija: function () {
console.log(this.autor);
},
};

serbianforum.funkcija(); // Grindelwald

Ovo postaje tako uzbudljivo, mi stvarmo sopstvene objekte i dodeljujemo im sopstvenu svrhu. Kao što vidite, ja sam imenovao promenljivu "funkcija" i napisao da je njena vrednost funkcija koja izvršava nešto. U našem slučaju ispisuje u konzoli vrednost ključa. E vidite, moramo koristiti this rezervisanu reč da bi mi rekli kako je vrednost promenljive iz samog objekta. Ako bih napisao ime promenljive, onda ona nije iz tog objekta nego izvan njega. Zato je bitno naznačiti da li koristim promenljivu iz sopstvenog objekta ili neku vrednost koja je izvan objekta. Evo primer bez this:
JavaScript:

let autor = "Banana";
let serbianforuom = {
imeForuma: "Serbian Forum",
URLforuma: "https://https:/serbianforum.org/",
autor: "Grindelwald",
funkcija: function () {
console.log(autor);
},
};

serbianforum.funkcija(); // Banana

Sada imamo na početku promenljivu koja nosi identično ime kao i ključ, ali bez this, objekat uzima onu spoljašnju vrednost, a ne unutrašnju.
Šta je ovde još zanimljivo primetiti? Setimo se kada smo pisali Math.max(nešto). Math je objekat. A max() je metoda / funkcija. A kada smo mi kreirali naš objekat, mi radimo isto to. Pišemo ime objekta i ime funkcije (metode) i dobijamo isto što i oni. Zar to nije kul?
A šta ako želimo praktičnu funkciju sabiranja?

let serbianforum= {
imeForuma: "Serbian Forum",
URLforuma: "https://https:/serbianforum.org/",
autor: "Grindelwald",
funkcija: function (a, b) {
return a + b;
},
};

console.log(serbianforum.funkcija(2, 3)); // 5

Zar nije sve tako elegantno? Prosto napišem dva parametra kao što bih radio i u funkciji izvan. Isti postupak vraćanja zbira. I pozivamo našu funkciju kojoj prosleđujemo dva parametra. I dobijamo zbir. Uzmite i ovo u obzir što je jako kul kod objekata. Ime ključa može biti bilo koja rezervisana reč. Mogao sam umesto funkcija napisati function. Mogao sam napisati i this, ili let. Objekat to sve ignoriše jer su ključevi stringovi. Dokaz:

let serbianforum= {
imeForuma: "Serbian Forum",
URLforuma: "https://https:/serbianforum.org/",
autor: "Grindelwald",
function: function (a, b) {
return a + b;
},
};

for (key in serbianforum) {
console.log(typeof key); // 4x string
}

Dole sam prošao sa for in petljom kroz sve ključeve objekta i primenio typeof da bih video kog je tipa uopšte ključ. Vratiće mi sva četiri puta string. Što je kul. Međutim, ako bih konkretno pitao koja je vrednost ključeva, dobio bih da je vrednost ključa "function" zapravo function tip podatka.

for (key in serbianforum) {
console.log(typeof serbianforum[key]); // 3x string / function
}

Dodeljivanje vrednosti objektima
Kada ovo kažem, govorim o dodavanju novog (key : value para).

let serbianforum= {};
serbianforum.autor = "Grindelwald";
serbianforum.imeForuma = "Serbian Forum";
serbianforum["test"] = "Banana";
console.log(serbianforum); // autor:"Grindelwald" , imeForuma:"Serbian Forum", test:"Banana"

Imamo prazan objekat. Nove (key,value) parove dodajemo tako što napišemo ime objekta, napišemo tačka i znak jednakosti. Odnosno, čemu je dati ključ jednak. Možemo isto to uraditi tako što bi zapisali unutar uglastih zagrada ime ključa (pod navodnicima) i vrednost ključa.
Iste vrednosti možemo menjati time što ćemo napisati objekat, tačka, ime ključa i napišemo novu vrednost. Ukoliko želimo ukloniti key iz objekta pišemo

let serbianforum= {};
serbianforum.autor = "Grindelwald";
serbianforum.imeForuma = "Serbian Forum";
serbianforum["test"] = "Banana";
console.log(serbianforum); // autor:"Grindelwald" , imeForuma:"Serbian Forum", test:"Banana"
delete serbianforum.autor; // Brise kljuc autor kao i njenu vrednost
console.log(serbianforum); // autor:"Grindelwald" , imeForuma:"Serbian Forum"

Koristimo rezervisanu reč "delete".

Vrednost prema referenci
Kada smo radili sa primitivnim tipovima podataka onda se vrednosti u memoriji nisu računali kao referentne vrednosti, već je svaka promenljiva imala svoje mesto u memoriji.

let a = 5;
let b = a;
b = 11;

console.log(a); // 5
console.log(b); // 11

Iako je promenljiva b uzela inicijativno vrednost promenljive a, ona je nakon toga promenila vrednost. Zašto? Zato što se obe promenljive vrednosti nalaze na različitim adresama u memoriji, nisu povezane. Tako da se njihove vrednosti mogu menjati zasebno i nisu ničim povezane. Međutim, kod objekta su stvari nešto drugačije.

let serbianforum= {
imeForuma: "Serbian Forum",
autor: "Grindelwald",
voce: "Banana",
};

let forum = serbianforum;
forum.autor = "Patofna";
console.log(forum.autor); // Patofna
console.log(serbianforum.autor); // Patofna

Imamo objekat kao i ranije, serbianforum sa njenim (key:value) parovima. Nakon toga pišemo promenljivu "forum" kojoj dodeljujemo vrednost ime našeg objekta "serbianforum". Odmah ispod menjamo vrednost za ključ autor, ali to menjamo na promenljivoj forum. Nismo menjali i na našem objektu. Međutim, nekim čudom vrednost se promenila i na našem objektu. Šta se to desilo?

Kada se promenljivoj dodeli vrednost objekta, to znači da preuzimamo ADRESU na nekoj memorijskoj lokaciji. Dakle, ta nova promenljiva pokazuje na naš objekat. Nije kreirao nov objekat od našeg, već je samo pokazao gde se naš nalazi, pa je sklopljen dogovor da dele zajedničk rad. Time, ako menjam vrednost novoj promenljivoj, ja nemam novu memorijsku lokaciju za promenljivu "forum". Njena memorijska lokacija je ista kao i memorijska lokacija za objekat.

Onda postavljamo logično pitanje, pa dobro, ako ću ja dobiti dva imena za jedan isti objekat koja je uopšte poenta? Tako je, nema poente za tako nečim. Mi želimo da kopiramo objekat i time napravimo novi.

Kopiranje objekta
JavaScript:

let serbianforum= {
imeForuma: "Serbian Forum",
autor: "Grindelwald",
voce: "Banana",
};

let forum = Object.assign({}, serbianforum);
forum.autor = "Patofna";
console.log(forum.autor); // Patofna
console.log(serbianforum.autor); // Grindelwald

Ovde je jedina novina u odnosu na prethodne primere sledeća linija koda: Object.assign({}, serbianforum) . Object je ime objekta (ovo je generalni objekat koji postoji u javascriptu), metoda assign kojom kopiramo vrednosti. Obratimo pažnju kako ih kopiramo. Unutar zagrada imamo dva argumenta. Prvi su samo dve vitičaste zagrade što pokazuje da govorimo o praznom objektu. Drugi argument je ime objekta koji kopiramo u taj prazan.
E sada, kada pogledamo kod, i kada vidimo da iako smo promenili vrednost autora kod forum objekta, serbianforum objekat ne menja vrednost svog ključa.

Autor tutorijala: Grindelwald