Što ćete naučiti. Internet općenito HTML CSS XML XHTML Javascript DOM DHTML. AJAX, jquery

Size: px

Start display at page:

Download "Što ćete naučiti. Internet općenito HTML CSS XML XHTML Javascript DOM DHTML. AJAX, jquery"

Rolf Ferguson
6 years ago
Views:

1 AJAX, jquery Što ćete naučiti Internet općenito HTML CSS XML XHTML Javascript DOM DHTML AJAX jquery PHP ASP.NET Ruby On Rails MS Silverlight FLASH, SMIL, SVG

2 AJAX Asynchronous JavaScript and XML Zasnovan na JavaScript i HTTP zahtjevima Nije nova tehnologija, već nova tehnika korištenja AJAX - JavaScript komunicira direktno sa serverom XMLHttpRequest objekt Izbjegnut reload (osvježavanje) stranice 3 AJAX Bazirano na sljedećim web standardima: JavaScript XML HTML CSS AJAX aplikacije su neovisne o pregledniku i o platformi 4 2

3 AJAX XHTML, HTML, CSS Sadržaj i stiliziranje DOM Klijentsko skriptiranje pristupa DOM-u, poput Javascripta, te se dinamički može mijenjati sadržaj na strani klijenta Omogućena interaktivnost 5 AJAX XMLHttpRequest Objekt koji služi za asinkronu razmjenu podataka sa Web serverom XML Služi kao format podataka koji se dobije od Web servera kao povratna informacija (iako može biti bilo koji format) 6 3

AJAX komponente XHTML i CSS Ajax primjenjuje ove Web standarde za stiliziranje i izgled stranice, ali također se koristi i za definiranje elemenata koji će se koristiti kod povratne informacije sa

4 AJAX komponente XHTML i CSS Ajax primjenjuje ove Web standarde za stiliziranje i izgled stranice, ali također se koristi i za definiranje elemenata koji će se koristiti kod povratne informacije sa servera i zapisivanja rješenja DOM (document object model) Ajax koristi DOM za manipuliranje (dohvat i mijenjanje) određenih podataka unutar Web stranice. XML, JSON (Javascript Object Notation), HTML, ili običan tekst Ajax može koristiti bilo koju od ovih tehnologija da bi osigurao strukturu podataka koju prima ili šalje server XMLHttpRequest objekt Javascript objekt ugrađen u većinu modernih preglednika. Služi za zahtjev/odgovor između klijenta i servera Javascript Lightweight programski jezik koji se koristi za povezivanje svih predhodno opisanih komponenti zajedno. 7 Klasični pristup Većina korisničkih interakcija rezultira HTTP zahtjevom prema serveru Server obradi podatke i vrati HTML stranicu klijentu 8 4

5 AJAX pristup Preglednik učita AJAX engine On omogućuje da se komunikacija sa serverom vrši asinkrono Korisnik nema potrebe gledati u prazan ekran 9 Klasični pristup 10 5

6 AJAX pristup 11 AJAX pristup Korisničke akcije koje bi u generirale HTTP request pretvaraju se u Javascript pozive koje pozivaju AJAX engine AJAX engine upravlja svim odgovorima sa servera 12 6

7 Potencijalni problemi Javascript mora biti omogućen Back button ne radi uvijek Stranice nekad teško spremiti u Bookmarks 13 Primjena AJAX-a Provjera grešaka u formama Auto sugestije Drag&Drop funkcionalnosti Dinamičko pokretanje slike ili geokarte Učitavanje sadržaja koji će se prikazati tek naknadno 14 7

8 15 Primjer Google Calendar 16 8

9 AJAX A = Asynchronous Nema čekanja Nastavak interakcije sa stranicom Samo dio stranice se osvježava 17 Pokretanje HTTP zahtjeva 1. Kreiranje i konfiguracija XMLHttpRequest objekta 2. Pokretanje zahtjeva 3. Obrada odgovora 18 9

10 Kreiranje XMLHttpRequest objekta Mozilla: IE: var request = new XMLHttpRequest(); var request = new ActiveXObject("Microsoft.XMLHTTP"); 19 Konfiguracija XMLHttpRequest objekta request.open("method","url",false) Method je GET, POST, itd. URL postoje sigurnosna ograničenja false hoće li se zahtjev izvršiti asinkrono request.setrequestheader("header","value") 20 10

11 Pokretanje zahtjeva request.send(content ) content je poslan u POST zahtjevu content može biti prazan ili "null 21 Obrada odgovora request.responsetext Odgovor kao običan tekst request.responsexml Odgovor je DOM objekt request.status request.statustext request.getallresponseheaders() request.getresponseheader("header") 22 11

12 Primjer 23 XMLHttpRequest onreadystatechange xmlhttp.onreadystatechange=function() { if(xmlhttp.readystate==4) { // Neki kod } } 0 Zahtjev nije inicijaliziran 1 Zahtjev je postavljen 2 Zahtjev je poslan 3 Zahtjev se obrađuje 4 Zahtjev je izvršen 24 12

13 onreadystatechange xmlhttp.onreadystatechange=function() { if(xmlhttp.readystate==4) { document.myform.time.value=xmlhttp.responsetext; } }

14 AJAX auto sugestija 27 AJAX auto sugestija 28 14

15 AJAX auto sugestija Ako u input polju ima nešto zapisano: Definira URL (filename) koji će se poslati serveru Dodaje parametar (q) tom URL-u sa sadržajem input polja Dodaje random broj da bi se spriječio caching Kreira XMLHTTP objekt te se pokreće funkcija statechanged kad se dogodi promjena Otvara XMLHTTP objekt sa danim URL-om Šalje HTTP zahtjev na server 29 AJAX auto sugestija Serverski dio pogledati na:

16 jquery jquery je JavaScript biblioteka jquery pojednostavljuje programiranje u Javascriptu jquery jednostavan za naučiti 31 jquery HTML - odabir elemenata HTML - događaji i funkcije HTML - manipulacija elementima CSS - manipulacija JavaScript - efekti i animacije HTML DOM - šetnja stablom i modifikacije AJAX 32 16

17 jquery učitavanje biblioteke Sve u jednoj datoteci jquery.js <head> <script type="text/javascript" src="jquery.js"></script> </head> 33 jquery učitavanje biblioteke Alternativni načini učitavanja: <head> <script type="text/javascript" src=" </head> <head> <script type="text/javascript" src=" </head> 34 17

18 jquery sintaksa jquery sintaksa je izrađena za: Pronalazak HTML elemenata Izvršavanje akcija nad tim elementima $(query).action() $ -> označava da je riječ o jquery (query) za pronalazak HTML elemenata jquery action() koji se izvrše nad elementima 35 Primjeri sintakse $(this).hide() sakriva trenutni element $("p").hide() sakriva sve paragrafe $("p.test").hide() sakriva paragrafe klase "test" $("#test").hide() sakriva element sa id="test CSS selektor? 36 18

19 jquery selektor jquery Element Selektori jquery Atribut Selektori jquery CSS Selectori 37 jquery Element Selektori CSS stil dohvaćanja elemenata: $( h1") dohvaća sve <h1> elemente $( h1.x") dohvaća sve <h1> elemente klase x". $( h1#y") dohvaća <h1> element sa id= y"

20 jquery Atribut Selektori XPath stil dohvaćanja elemenata sa atributima $("[href]") dohvaća sve elemente sa href atributom $("[href='#']") dohvaća sve elemente sa href vrijednosti "#" $("[href!='#']") dohvaća sve elemente sa href atributom vrijednosti <> "#" $("[href$='.jpg']") dohvaća sve elemente sa href atributom koji sadrži ".jpg". 39 jquery CSS Selectori jquery CSS selektori se mogu koristiti da se promijeni CSS svojstvo HTML elemenata $( h1.x").css("background-color", blue") 40 20

21 Dodatni primjeri $("ul li:first") Prvi <li> element svakog <ul> $("div#intro.head") Svi elementi klase "head" unutar <div> elementa čiji je id="intro" 41 Events i jquery Događaji (events) su dobro podržani u jquery-u Ponoviti što su događaji (events)! $("button").click(function() {..neki kod... } ) 42 21

jquery Vlastite jquery skripte u eksternoj datoteci: <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="my_jquery.

22 jquery Vlastite jquery skripte u eksternoj datoteci: <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="my_jquery.js"></script> </head> Sukob kod imenovanja (npr. jquery i Prototype istovremeno) $ kao shortcut koriste i neke druge biblioteke noconflict() var $jq=jquery.noconflict() 43 jquery Events 44 22

23 jquery Events 45 Efekti u jquery Hide and Show Toggle Slide Functions - slidedown, slideup, slidetoggle Fade Functions - fadein(), fadeout(), fadeto() Vlastite animacije 46 23

24 Hide i Show $("#hide").click(function(){ $("p").hide() }) $("#show").click(function(){ $("p").show() }) Sintaksa: $(selector).hide(speed,callback) $(selector).show(speed,callback) Callback nakon izvršenja može se pozvati nova funkcija 47 Hide i Show 48 24

25 Toggle $(selector).toggle(speed,callback) $("button").click(function(){ $("p").toggle() }) 49 Toggle 50 25

26 slidedown, slideup, slidetoggle (selector).slidedown(speed,callback) (selector).slideup(speed,callback) (selector).slidetoggle(speed,callback) 51 slidedown, slideup, slidetoggle 52 26

27 fadein(), fadeout(), fadeto() (selector).fadein(speed,callback) (selector).fadeout(speed,callback) (selector).fadeto(speed,opacity,callback) 53 fadein(), fadeout(), fadeto() 54 27

28 Vlastite animacije <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow") $("#box").animate({width:300},"slow") $("#box").animate({height:100},"slow") $("#box").animate({width:100},"slow") }); }); </script>

29 HTML i jquery Mijenjanje HTML sadržaja (selector).html(content) Dodavanje HTML sadržaja (selector).append(content) (selector).prepend(content) (selector).after(content) (selector).before(content) 57 CSS i jquery (selector).css(name,value) $("p").css("background-color","yellow") (selector).css({properties}) $("p").css({"background-color":"yellow","fontsize":"200%"}) (selector).css(name) $(this).css("background-color") 58 29

30 CSS i jquery (selector).height(value) $("#id100").height("200px") (selector).width(value) $("#id200").width("300px") 59 jquery $( li:odd ).prepend( <span>changed</span> ).css({background: red }); <ul> <li> First item </li> <li> Second item </li> <li> Third item </li> </ul> <ul> <li> <span>changed</span> First item </li> <li> Second item </li> <li> <span>changed</span> Third item </li> </ul> <ul> <li style= background:red; > <span>changed</span> First item </li> <li> Second item </li> <li style= background:red; > <span>changed</span> Third item </li> </ul> 60 30

31 jquery & AJAX jquery poziva higher level.load AJAX funkciju 61 Što ćete naučiti Internet općenito HTML CSS XML XHTML Javascript DOM DHTML AJAX jquery PHP ASP.NET Ruby On Rails MS Silverlight FLASH, SMIL, SVG

Introduction to. Maurizio Tesconi May 13, 2015

Introduction to. Maurizio Tesconi May 13, 2015 Introduction to Maurizio Tesconi May 13, 2015 What is? Most popular, cross- browser JavaScript library Focusing on making client- side scripcng of HTML simpler Open- source, first released in 2006 Current