Predavanje iz Dinamičkih web aplikacija, 4. predavanje Video: https://www.youtube.com/watch?v=KujaKkdQ3Ns&list=PLYqeapOP_CtS0kbdbo_GXFgnS81JGAd8L&index=4 Tema: JavaScript Datum snimanja: 24.3.2016

1. JavaScript
Stipe Predanić

2. Povijest
●
1996. Netscape – LiveScript
●
Java? Java? Java?!? => JavaScript
●
ule e M$ => JScriptć
●
1997 ECMA – ECMAScript
●
ECMA-262 (zadnja je verzija 6, lipanj 2015.)
●
svi browseri podržavaju ECMAScript
●
Pitanje koju verziju i koje opcije iz koje verzije
●
https://kangax.github.io/compat-table/es6/

3. Korištenje
●
ECMAScript se ne koristi samo u HTML-u
●
PDF, Flash ActionScript
●
●
u HTML-u JavaScript
<script type=”text/javascript”>
kod programa
</script>
●
u HEAD-u ili BODY-u (razlika!!!!)
●
eksterna datoteka
<script src="skripta.js" type="text/javascript"> </script>

4. Yes, we can?
●
JavaScript može
●
na klijentskoj strani transformirati stranicu
– interaktivno ponašanje
– izmjena stranice u letu
●
na serverskoj strani pripremiti stranicu i obra ivatiđ
primljene podatke (node.js)
●
JavaScript ne može
●
raditi ako klijent to ne želi
●
garantirati da e sve obaviti kako je programer zamislioć
●
varati klijenta (pa...nije baš tako)

5. Zašto JavaScript?

6. A, B, C, C++ (sintaksa)
●
sintaksa JavaScripta je ista kao i u ostalim C-
olikim jezicima
●
varijable su case sensitive, formatiranje teksta
kako želite, komentari su kao u C-u, “;” razdvaja
naredbe
●
if, for, while, switch, operatori, { }
if (x==10) {
for (i=0; i<10; i++)
alert(i);
}
●

7. Sintaksa - novosti
●
loosely typed jezik
●
sve varijable se samo deklariraju sa var, bez tipa
var a=12, x=”Zagreb”;
●
tipovi podataka
●
brojevi
– interno su svi realni (ne-cijeli brojevi)
●
stringovi
●
boolean
– true/false
●
drugi tipovi važni za objektno programiranje
– null, undefined, Objects

8. Rad sa brojevima
●
isNaN()
●
NaN – not a number
●
zanimljivo – isNaN(“4”) daje true
●
Math objekt
●
Math.random()
●
Math.abs(x)
●
Math.round(x)

9. Rad sa stringovima
●
sve sa slovima = string :D
●
“4” - u ve ini slu ajeva e se precastati u brojć č ć
●
spajanje se obavlja sa +
●
x=”Novi ”+ “Zagreb”;
●
Važniji atributi i funkcije
●
“Zagreb”.length (x.length)
●
x.substring(0,3)
●
x.toUpperCase(); x.toLowerCase()
●
x.concat(“!”)
●
Number(“5”) ; String(100)

10. Rad sa booleanima
●
if (true) {}
●
važan problem – usporedbe
== ( != )
if (3+1==”4”) {}
=== ( !== )
if (3+1===”4”) {}
●
pazite na tu razliku!

11. Polja & operatori
var zvijezde=new Array();
zvijezda[0]=”Toni Cetinski”;
zvijezda[1]=”Goran Lisica – Fox”;
zvijezda[2]=”Ivana Mišerić”;
odnosno
var zvijezde=[“Toni”, “Goran”, “Ivana Mišerić”];
●
operatori?
●
in je in, sve ostalo je out..
●
if (“Toni” in zvijezde)
●
for (var zvijezda in zvijezde) { alert(zvijezda);}
●
for (var i=0; i<zvijezde.length; i++)
●
for each (var BBStanar in stanari) { }
●
concat(), push(), pop(),splice(), ...

12. Objekti
var cdLista={
“id”:1,
“izvodjac”: “Renata Končić Minea”,
“album”: “Da me oće Stipe” };
alert(cdLista.izvodjac);
●
postoje i ugra eni objektiđ
●
Date, RegExp itd ...
●
JavaScript i funkcije tretira kao objekte!

13. funkcije
●
function brojevi(x, y, z)
●
JavaScript dopušta poziv
– brojevi(1,2,3,4,5,6)
●
ha?
●
svi argumenti se stavljaju u polje arguments, pa je
– arguments[0]=>1 (i x=1)
– arguments[2]=>3 (i z=3)
– Arguments[3]=>4
– arguments[5]=>6
●
funkcija može nešto vratiti ali ne mora

14. Lude funkcije
●
anonimne funkcije
●
Koriste se kad nam jednokratno, samo na tom mjestu,
zbog predvi enog API-ja, treba funkcijađ
●
A možemo je definirati kao varijablu (to nije – kao objekt)č
●
var djeljenje=function(x,y) {return x/y;}
●
var z=djeljenje(4,2);
●
ugra ene dialog funkcijeđ
●
alert, prompt, confirm
●
alert(“Upomoć!”);
●
var text=prompt(“Ime?”);
●
if (confirm(“Si ziher?”)) {}

15. Lude funkcije
●
možemo definirati funkciju u funkciji (paziti na scope varijabli)
function moja(){
var tvoja=10;
function njegova(){
alert(tvoja);
}
return njegova();
}
●
closure problem ..

16. Objekti
●
Objekte emo raditi kad do emo do OO, no...ć đ
●
window objekt
●
document, frames, history, location, navigator,
screen, window
●
imaju svoje atribute i event-e
●
npr.
– screen.height;
– navigator.appName;
– history.back();
– location.href; location.reload();

17. Document Object Model
●
DOM – vezan uz objekt document :D
●

18. DOM
●
odabirom elementa možemo mu mjenjati
ponašanje i izgled
●
getElementById()
<form>
<input type=”text” id=”name” name=”ime”>
<input type=”text” id=”surname” name=”prezime”>
</form>
var ime=document.getElementsById(“name”);
ime.style.color=”red”;

19. DOM
●
getElementsByTagName()
var images=document.getElementsByTagName(“img”);
var numOfImages=images.length;
for (var i=0; i<numOfImages; i++)
images[i].href=”http://www.tvz.hr”;
●
za neke tagove postoje kolekcije bez potrebe za pokretanjem gornje
naredbe:
– document.forms , document.images, document.links,
document.achors
–
●
HTML5 uveo i getElementsByClassName()

20. DOM
●
querySelector()
●
Vra a prvi element koji odgovara CSS selektoruć
●
QuerySelectorAll()
●
Vra a sve elemente koji odgovaraju CSS selektoruć
var imageBox=document.querySelectorAll(“div img”);
var numOfImages=images.length;
for (var i=0; i<numOfImages; i++)
imagesBox[i].href=”http://www.tvz.hr”;
●
Uvijek pitanje – Vanilla JS vs framework (npr. Jquery)
– http://vanilla-js.com/

21. DOM atributi
var x=images[i].getAttribute(“href”);
var x=images[i].href;
images[i].setAttribute(“href”,”http://www.tvz.hr);
images[i].href=”http://www.tvz.hr”;
●
innerHTML
●
P, span, div
●
preporu eno koristiti DOM naredbe (č createElement(),
appendChild(), removeChild())
●
ali tako je lako...
document.getElementById(“mojDiv”).innerHTML=”<a
href='www.imdb.com'> IMDB </a>”;

22. Veliki festival je doga aj!đ
●
DOM za neke element nudi doga aje (events)đ
●
onclick(), onfocus(), onblur(), onload(),
onsubmit()
●
postavljanjem funkcije za neki doga aj mjenjamođ
ponašanje elementa
<div onmouseover='this.style.backgroundColor="red";'
onmouseout='this.style.backgroundColor="yellow";'>
Neki tekst
</div>

23. Još doga ajađ
●
izmjena i obrada eventa u eksternoj .js datoteci?
element.addEventListener(event, function,capture/bubble)
ha?
<body>
<form>
<input type="text" id="ime" name="name" value="Unesi ime">
</form>
<script type="text/javascript">
function modifyText(){
document.getElementById("ime").value="";
}
var el = document.getElementById("ime");
el.addEventListener("click", modifyText, false);
</script>
</body>

24. IE events
●
prošli slide ne radi na starijem IE?
●
IE koristi attachEvent
el.addEventListener("click", modifyText, false);
el.attachEvent(“onclick”, modifyText);
●
kako provjeriti što podržava?
if (document.addEventListener) { ..}
else if (document.attachEvent) { .. }
else { // ne podržava evente ili su isključeni }

25. Doga ajiđ
●
skidanje doga ajađ
●
element.removeEventListener(event,
function,capture/bubble);
●
el.detachEvent(event,function);
●
pogledati W3Schools DOM oko mogu ih doga aja i atributa zać đ
pojedine elemente
●
JavaScript frameworkci omogu uju lak rad sa doga ajima ić đ
selekcijom elemenata.

26. Node.js
● Upotreba JavaScripta na serverskoj strani
– Google V8 JavaScript engine (iz Chrome
pretraživača) s asinkronim I/O API-jem
– Event-driven arhitektura servera
● Pogodno za real-time web sustave

27. Node.js

28. Idu e predavanjeć
●
Pristup bazama (ORM) i rad s kola i imač ć