JavaScript
JavaScript
JS
Pregled
1 Uvod
2 Node.js
3 Deklaracija varijabli
4 Tipovi podataka
5 Operatori
7 Objekti
8 Funkcije
9 Nizovi
10 Klase
11 Izuzeci
12 Asihrono programiranje
2
1. Uvod
• Programski jezik
– Nije strogo tipiziran
– Interpretiran
• Podržan je od strane svih browser-a
– Funkcionalan i imperativan
• Even-driven
– Objektno-orijentisan
• Klase su dodati u kasnijim verzijama
– Sa HTML-om i CSS-om čini osnovu www tehnologije
• Omogućava da web stranice budu zapravo interaktivne
– Inicijalno nastao radi dinamičnosti stranica na klijentskoj
strani
3
1. Uvod
1. Uvod
<!DOCTYPE html>
<html>
<body>
</body>
</html>
5
2. Node.js
• Node.js
– Do pojave ovog alata JS je korišćen isključivo na strani
klijenta
• 2009. godine se pojavila prva verzija
– Omogućava da se JS koristi i za programiranje izvan
browser-a
• programski jezik opšte namjene
• Najveću primjenu je našao u server-side programiranju
– Zasniva se na V8 JS engine
• Chrome
– Glavni principi
• Asinhronost
• Single-thread
• Brzina
6
2. Node.js
• Instalacija
– Preuzeti odgovarajuću verziju programa sa sajta
https://nodejs.org/en/
– CLI okruženje
– U komandnom prozoru kucati
• node –v
– Provjera koja je verzija instalirana
• pokrenuti prvi program
– node hello.js
hello.js:
console.log('Hello world');
7
3. Deklaracija varijabli
3. Deklaracija varijabli
var a;
var b = 0;
var c = a + b;
console.log(a);
console.log(b);
console.log(c);
9
3. Deklaracija varijabli
if (true){
var x = 10;
}
console.log(x);
if (true){
let x = 10;
}
console.log(x);
10
4. Tipovi podataka
• Primitivni tipovi
– Number
– Boolean
– String
• Tekst se može zadati i sa jednostrukim i dvostrukim znacima navoda
• Specijalni simboli i Unicode
– \r, \n, \t, '\u00A9' itd
• Objekti
– Funkcije
– Nizovi
– Regularni izrazi
– Date
• Specijalni literali
– null i undefined
11
4. Tipovi podataka
• Numerički literali
– Uvijek se svode na 64-bitne realne brojeve
• ekvilentno sa double u Javi
4. Tipovi podataka
• Stringovi
– Tekst se može zadati i sa jednostrukim i dvostrukim znacima navoda
• const dialog = 'Sam looked up, and said "hello, old friend!", as Max walked in.’;
• const imperative = "Don't do that!";
– Specijalni simboli i Unicode
• \r, \n, \t, '\u00A9' itd
– Šabloni
• let currentTemp = 19.5;
const message = `The current temperature is ${currentTemp}\u00b0C`;
• Backtick
– Moguće je zadati string u više redova
• multiline
• Na kraju reda treba dodati simbol /
– const multiline = "line1\
line2";
13
4. Tipovi podataka
• Literali
– Specijalni literali
• null
– Koristi se od strane programera da se označi da je
neka niz nedefisana
• Npr. prazan niz
• undefined
– Vrijednost je još uvijek nepoznata
• Varijabla je deklarisana ali joj nije dodijeljena
vrijednost
• Argument prilikom poziva nije definisan
– Preporučuje se da se ne koristi eksplicitno od strane
programera
• Bolje koristiti null
14
5. Operatori
• Operatori
– Aritmetički
• +, -, *, /, %, ++, --
– Dodjele
• =, +=, *= itd
– Poređenje
• ==, !=, >=, <=, ===
– Obratiti pažnju na razliku izmedju == i ===
• Konverzija tipova
– Logički
• &&, ||, !
15
6. Kontrolne naredbe
• Kontrolne naredbe
– Slično kao u programkom jeziku Java
• if, while, for, case
7. Objekti
• Objekti
– Skup parova ključ:vrijednost
• var car = {type:"Fiat", model:"500",
color:"white"};
– Svojstvima se pristupa koristeći OO notaciju
• objectName.propertyName
• car.model
– Mogu sadržati i funkcije
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
17
7. Objekti
• Objekti
– Članovim objekta može se pristupati i putem operatora []
• computed member access
• Npr. person[“firstName”]
– Dozovljeno je i ugnježdavanje
const sam3 = {
name: 'Sam',
classification: {
kingdom: 'Anamalia’,
phylum: 'Chordata’,
class: 'Mamalia’,
order: 'Carnivoria’,
family: 'Felidae’,
subfaimily: 'Felinae’,
genus: 'Felis’,
species: 'catus’,
},
};
18
8. Funkcije
• Funkcije
– Glavna organizaciona jedinica programskog koda
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
19
8. Funkcije
• Funkcije
– U JS funkcije su zapravo objekti
• Drugim riječima, može se deklarisati varijabla tipa funkcije
• Mogu se predavati kao argmenti drugim funkcijama
• Razlika između poziva i referenciranja
– getGreeting();
• Poziv funkcije
– getGreeting;
• referenca
8. Funkcije
• Funkcije
– Nema preklapanja funkcija kao u drugim programskim
jezicima
• Preklapanje je koncept u programskom gdje mogu da se
definišu dvije funkcije istog imena
– Razlikuju se na osnovu broja i tipa argumenata
– U JS kada jednom definišete funkciju, npr.
getGreetings, svaki poziv funkcije pod tim imenom se
odnosi na tu jednu funkciju
• Možete pozvati funkciju sa bilo kojim brojem argumenata
– Npr. Ako funkcija ima dva argumenta, a prilikom poziva
je predat samo jedan, onda će drugi imati vrijednost
undefined
21
8. Funkcije
• Funkcije
– Dozvoljeno je ugnježdavanje
• Tijelo jedne funkcije definiše su unutar druge funkcije
console.log(max3(4, 5, 1));
22
8. Funkcije
• Funkcije
– Argumenti mogu da imaju i svoje podrazumijevane
vrijednosti
• U slučaju da argument nije definisan, onda on uzima svoju
podruzumijevani vrijednost navedenu prilikom deklaracije
8. Funkcije
• Funkcije
– Mogu da budu i članovi (property) objekata
• U tom slučaju se nazivaju metode
const o = {
name: 'Wallace’,
bark: function() { return 'Woof!'; },
}
24
8. Funkcije
• this pokazivač
– Sličan pojmu this pokazivača iz drugih jezika kao što je Java
• Pokazivač na objekat koji je pozvao funkciju
8. Funkcije
• this pokazivač
– U nekim slučajevima moguće je da se izgubi informacija o
tome gdje this pokazuje
• Npr. Sačuva se pokazivač na funkciju u neku varijablu
8. Funkcije
• this pokazivač
– U nekim sutiuacijam zna da se izgubi informacija o tome
gdje this pokazuje
• Problem je naročito izražen kod ugnježednih funkcija
const o = {
name: 'Julie',
greetBackwards: function() {
function getReverseName() {
let nameBackwards = '';
for(let i=this.name.length-1; i>=0; i--) {
nameBackwards += this.name[i];
}
return nameBackwards;
}
return getReverseName() + " si eman ym ,olleH";
},
};
console.log(o.greetBackwards());
27
8. Funkcije
• Neimenovane funkcije
const f = function() {
return "message in a bottle";
}
console(f());
function max(a, b){ 28
if (a >= b) return true; Outline
else return false;
}
8.
function min(a, b){
if (a >= b) return false;
Funkcije
else return true;
}
console.log(arr);
30
8. Funkcije
• Arrow notation
– Definisane u standardu ES6
• Uvijek su anonimne
• Suštinski je samo sintaksna olakšica
– Uz jedan bitan izuzetak
• this pokazivač kod ugnježdenih funkcija
• Pojednostavljuje sintaksu na tri načina
– Može se izostaviti function
– Ako funkcija ima jedan argument mogu se izostaviti
zagrade
– Ako tijelo funkcije ima samo jednu naredbu mogu se
izostaviti vitičaste zagrade
31
8. Funkcije
• Arrow notation
8. Funkcije
• Arrow notation
– Bitna razlika je this pokazivač
• Automatski povezan
const o = {
name: 'Julie',
greetBackwards: function() {
const getReverseName = () => {
let nameBackwards = '';
for(let i=this.name.length-1; i>=0; i--) {
nameBackwards += this.name[i];
}
return nameBackwards;
}
return getReverseName() + " si eman ym ,olleH";
},
};
console.log(o.greetBackwards());
34
9. Nizovi
• Nizovi
– var array_name = [item1, item2, ...];
– Elementima se slično pristupa kao i u drugim jezicima
• Preko indeksa koji počinje od 0
– Heterogeni
• Mogu sadržati više elemenata različitog tipa
– Slično kao u Javi imaju properti length
– Ako se postavi element koji je izvan granica ne dolazi do greške
• Niz se proširuje
– Elementi između dobijaju vrijednost undefined
// array literals 35
const arr1 = [1, 2, 3]; // array of numbers Outline
const arr2 = ["one", 2, "three"]; // nonhomogeneous array
const arr3 = [[1, 2, 3], ["one", 2, "three"]];
const arr4 = [ { name: "Fred", type: "object", luckyNumbers = [5, 7,
13] },
9. Nizovi
[
{ name: "Susan", type: "object" },
{ name: "Anthony", type: "object" },
],
1,
function() { return "arrays can contain functions too"; },
"three",
];
// accessing elements
arr1[0]; // 1
arr1[2]; // 3
arr3[1]; // ["one", 2, "three"]
arr4[1][0]; // { name: "Susan", type: "object" }
// array length
arr1.length; // 3
arr4.length; // 5
arr4[1].length; // 2
// increasing array size
arr1[4] = 5;
arr1; // [1, 2, 3, undefined, 5]
arr1.length; // 5
36
7. Nizovi
7. Nizovi
7. Nizovi
10. Klase
• Klase
– Noviji standard (ECMAScript2015)
– Uvodi se principi OO
• Više paradigmi programiranja
– Funkcionalno, OO proramiranje itd
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return "I have a " + this.carname;
}
}
10. Klase
• Klase
– Propertiji putem get i set metoda
class Car {
constructor(make, model) {
this.make = make;
this.model = model;
this._userGears = ['P', 'N', 'R', 'D’];
this._userGear = this._userGears[0];
}
get userGear() { return this._userGear; }
set userGear(value) {
if(this._userGears.indexOf(value) < 0)
return;
this._userGear = vaule;
}
shift(gear) { this.userGear = gear; }
}
44
• Obrasci
– Vrše provjeru da li se zadati string uklapa po obrascu
– Moguće je i vršiti zamjenu podstringa
• Tranformacije
– Predstavljaju se klasom RegExp
• Često su u upotrebi da je i sintaksa jezika prilagođena da je
moguće regularni izraz zadati kao literal
– Koristi se forward slash
• Deklaracije const re2 = new RegExp("going"); i
const re1 = /going/; su ekvivalentne
– Provjerava da li strng sadrži podstring going
45
• Metode
– match
• Vraća sve podstringove koji zadovoljavaju reg. izraz
– search
• Vraća prvi podniz koji zadovoljava uslov
– test
• provjerava da li postoji poklapanje i vraća boolean vrijednost
– Koristi se forward slash
– exec
• Nalazi tekuće pojavljivanje
– Kada se pozove prvi put vraća prvo pojavljivanje
– replace
• Vrši zamjenu
const input = "As I was going to Saint Ives"; 46
const re = /\w{3,}/ig; Outline
// starting with the string (input)
input.match(re); // ["was", "going", "Saint", "Ives"]
input.search(re); // 5 (the first three-letter word starts at 13.
index 5)
Datumi
// starting with the regex (re)
re.test(input); // true (input contains at least one three-
letter word)
re.exec(input); // ["was"] (first match)
re.exec(input); // ["going"] (exec "remembers" where it is)
re.exec(input); // ["Saint"]
re.exec(input); // ["Ives"]
re.exec(input); // null -- no more matches
• Formiranje izraza
– Alternative (ili) |
• /ab|cd/ig
– ^
• Negacija, tj. sve osim
– Cifre se predstavljaju sa[0-9]
• Može i \d
– Bjeline (\n \t itd) se predstavljaju sa \s
– Slova se predstavaljaju sa [a-zA-Z_]
• Može i \w
48
• Kardinalitet
– Moguće ga je zadati u {} zagradama
• {n} – tačno n pojavljivanja
– Npr. /d{5}/ match-uje brojeve od tačno 5 cifara
• {n,} – n ili više pojavljivanja
• {n,m} – između n i m pojavljivanja
– ?
• Opciono, tj. 0 ili 1 pojavljivanje
– *
• Nula ili više pojavljivanja
– +
• Barem jedno pojavljivanje
const stuff = 49
'hight: 9\n' + Outline
'medium: 5\n' +
'low: 2\n';
const levels = stuff.match(/:\s*[0-9]/g); 13.
const input = "Address: 333 Main St., Anywhere, NY, 55532.
Datumi
Phone: 555-555-2525.";
const match = input.match(/\d{5}.*/);