1. Going deep: Javascript i jQuery
Antonio Pavlinović

2. Uvodna riječ
Dobar dan svima

3. Plan za danas
1. Uvodna riječ
2. Moderni web: jQuery i Javascript
Motivacija za današnje predavanje
3. Osnova svakog frameworka i kako to jQuery radi?
1. Prototipovi, nasljeđivanje i ekstenzibilnost
2. Closures i scope
3. Obećanja i asinkronost
4. UG framework 

4. Moderni web: jQuery i Javascript
Zašto danas pričamo o ovome?

5. Moderni web: jQuery i Javascript
„Sustainable development is like teenage sex - everybody
claims they are doing it but most people aren’t, and those
that are, are doing it very badly”
A lecture slide, originally Chris Spray (Northumbrian Water) in a Design Council piece about sustainability

6. Prototipovi, nasljeđivanje ekstenzibilnost
prototype , __proto__ , new

7. Prototipovi, nasljeđivanje i ekstenzibilnost
• Javascript prototipovi su obični objekti
– Može ih se modificirati i proširivati
– Objekt može imati samo jedan prototip
– Prototip može imati svoj prototip
– Sve u Javascriptu ima prototip, osim primitivnih vrijednosti
– Bazni prototip svakog objekta je Object
• Dostupni preko ime_objekta.prototype

8. Prototipovi, nasljeđivanje i ekstenzibilnost
function Mammal(name) {
this.name = name;
this.offspring = [];
};
Mammal.prototype.haveABaby = function() { };
Cat.prototype = new Mammal();
Cat.prototype.constructor = Cat;
var macka = new Cat('Felix');
macka.haveABaby();

9. Prototipovi, nasljeđivanje i ekstenzibilnost
• Ključna riječ new
– Ako se new nalazi prije poziva funkcije, funkcija se poziva u kontekstu
konstruktora
– Poziv funkcije kao konstruktora uzrokuje
1. Stvaranje praznog Object
2. Interni property objekta (__proto__) pokazuje na prototype funkcije
3. Poziva se funkcija, a this se postavlja na kreirani prazni objekt
4. Objekt se vraća
var macka = new Cat('Felix');
macka.haveABaby();

10. Prototipovi, nasljeđivanje i ekstenzibilnost
function Mammal(name) {
this.name = name;
this.offspring = [];
};
Mammal.prototype.haveABaby = function() { };
Mammal.prototype.isOnFire = false;
Mammal.prototype.setOnFire = function() { };
Mammal.methods = Mammal.prototype;
// Ekstenzija prototipa
Mammal.methods.setOnIce = function() { };

11. Closures i scope
Muke po this-u

12. Closures i scope
• Funkcije u Javascript-
u pružaju scope
• Objekti ne pružaju
scope, ali ključna riječ
this pokazuje na
najbliži objekt
• Privatne stvari moraju
biti unutar funkcije
– Wrapping
scope
Funkcija

13. Obećanja i asinkronost
resolve, rejected, always, then

14. Obećanja i asinkronost
• U slučaju zahtjevne ili dugotrajne operacije, ne blokiraju daljnje
izvršavanje skripte
• Funkcija koja koristi promise i vraća promise
• Na promise registriramo callback-ove
.reject() .resolve() .always()
var promise = $.Deferred();

15. UG Framework
Demo time

16. Hvala na pažnji!
Pozdrav!