6. pripremno predavanje - fer.hr · 17 otvoreno računarstvo - 6. pripremno predavanje...
TRANSCRIPT
6. pripremno predavanjeo JavaScripto XMLHttpRequest
Otvoreno računarstvo - 6. pripremno predavanje2
6. laboratorijska vježbao Zadnja vježba
o Završno "dotjerivanje" Web aplikacije o Naglasak na:
o klijentskim tehnologijama (JavaScript)o dohvaćanju informacija s poslužitelja
bez osvježavanja stranice (XMLHttpRequest)
o Potrebne (manje) promjene ostalih datotekao promjena HTML-a i CSS-ao izrada manje PHP skripte
Otvoreno računarstvo - 6. pripremno predavanje3
Cilj vježbeo Dopuniti Web aplikaciju promjenjivim elementima
na strani klijenta (DHTML, JavaScript)o iskočni okviri s dodatnim informacijama (tooltips)
o Omogućiti dohvat dodatnih podataka komunikacijom klijent-poslužitelj bez osvježavanja stranice (XMLHttpRequest)
o U Web aplikaciju uključiti vanjske, javno dostupne biblioteke određene namjene (JavaScript)
Otvoreno računarstvo - 6. pripremno predavanje4
Proučiti:o Osnove osnova jezika JavaScript
o uključivanje JavaScripta u HTMLo rad s varijablamao pozivi funkcija
o Koncept DHTML-ao model DOMo rukovanje događajima (event handling)o promjena stilova
o Objekt XMLHttpRequesto slanje zahtjeva s parametrimao obrada - prosljeđivanje odgovora
Otvoreno računarstvo - 6. pripremno predavanje5
Zadatak (1. dio) - tooltipo Prelaskom strelice miša preko pojedinog retka
prikazati tooltip s dodatnim informacijamao promjena HTML/JavaScript kôda kojeg generira
pretraga.phpo informacije se nalaze u JavaScript kôdu, nema ponovne
komunikacije s poslužiteljem!o registracija event handlera za događaj onmouseover
<tr onmouseover="tooltip('[email protected]')"> <td> Osoba A </td>
</tr>
Otvoreno računarstvo - 6. pripremno predavanje6
Zadatak (1. dio) - vanjske biblioteke o Tri predložene biblioteke tooltipa
o možete koristiti i druge (ili ih ostvariti sami )o Uvijek postoji kratki uvod u korištenje bibliotekeo Osnovna ideja:
o preuzeti .js datoteke i uključiti ih u svoj kôdo pri aktivaciji događaja (onmouseover) pozvati
funkciju za prikaz o funkciji predati tekst i argumente prilagodbe
o Tekst se obično predaje kao HTML o (dozvoljena sva formatiranja, definiranje klasa za CSS...)o predaja teksta funkciji izravno preko argumenta ILIo izrada neke strukture (polje?) dostupne iz funkcije
Otvoreno računarstvo - 6. pripremno predavanje7
Zadatak (2. dio) - detaljne informacijeo Tablica rezultata pretraživanja ima novi stupac
"Akcija", s tekstom ("Više o..."), slikom ili gumbom u svakom retkuo klikom na pojedini aktivni element (događaj onclick)
priprema se komunikacija s poslužiteljemo Objekt XMLHttpRequest
o nema osvježavanja straniceo novoj skripti na poslužitelju (detalji.php) treba poslati
parametar (id) pojedinog osnovnog elementao skripta detalji.php vrlo slična skripti pretraga.php
o HTTP zahtjev, metoda GET
Otvoreno računarstvo - 6. pripremno predavanje8
Zadatak (2. dio) - obrada odgovorao Skripta detalji.php pomoću XPatha ili DOM-a
pretražuje XML po id-u, te vraća dodatne informacije o osnovnom elementu određenog id-a
o Izlaz skripte je "mali" HTML kôdo spreman za "ubacivanje" na stranicuo sadrži sve potrebne oznake, poput <table>, <div>,
definicije klasa za CSS i sličnoo Na strani klijenta, po primitku odgovora, JavaScript
prenosi dobiveni kôd u okvir za dodatne informacijeo Obavještavanje korisnika o čekanju odgovora
Otvoreno računarstvo - 6. pripremno predavanje9
Promjene u postojećim datotekamao pretraga.php
o smanjiti tablicu (treba imati 3 - 5 stupaca)o dodati stupac Akcijao dodati JavaScript kôd za prikaz tooltipa za svaki redako ispod navigacije dodati okvir za dodatne podatke
(<div>)o CSS stilovi
o prilagoditi izgled i strukturu
(NOVI)
Okvir za
dodatne podatke
Brzi uvod u:o JavaScripto XMLHttpRequest
Otvoreno računarstvo - 6. pripremno predavanje11
Uključivanje JavaScriptao U <head> ili <body> dijelu
o razlike u trenutku učitavanja i "garanciji" učitavanja prije nekog događaja
o Inlineo Vanjska JavaScript datoteka
<head><script type="text/javascript" src="mojJS.js"></script>
</head>
Otvoreno računarstvo - 6. pripremno predavanje12
Sintaksa JavaScriptao Slična C-u/Javi/PHP-u...
o if, for, pridruživanja... o new (instanciranje objekata)
o Spajanje stringova (+)datum = godina + '-' + mjesec + '-' + dan;
o Varijableo globalne i lokalneo tip nije određen pri deklaraciji, ovisan o vrijednosti
varijable, promjenjivvar id = 5;
o Funkcije function ispisi (mojTekst) { alert(mojTekst); return true;
}
Otvoreno računarstvo - 6. pripremno predavanje13
Događaji (events)o Događaji se odnose na elemente HTML-a
(odlomke teksta, linkove, gumbe, obrasce...)o Događaje okidaju:
o miš (onclick, onmouseover, ondblclick...)o tipkovnica (onkeypress, onkeyup...)o HTML objekti i obrasci (onload, onresize, onsubmit...)
o Povezivanje događaja na nekom elementu s naredbama/funkcijama koje treba izvršiti<a href="link.html" onclick="promijeni()">
Otvoreno računarstvo - 6. pripremno predavanje14
DOM: važna svojstva i metodeo Pristupanje elementima (W3C)
o jednom elementu s definiranim atributom iddocument.getElementById()
o svim elementima s definiranim atributom namedocument.getElementsByName()
o svim elementima iste oznakedocument.getElementsByTagName()
nav = document.getElementById("navigacija");
o Dobro je provjeriti je li element pronađeno ne želimo raditi s null vrijednostima i dobivati JS
pogreške
Otvoreno računarstvo - 6. pripremno predavanje15
DHTML: važna svojstva i metodeo Dinamička promjena svojstava elemenata
o promjena sadržaja elementadocument.getElementById('naslov').innerHTML = 'Novi naslov';
o promjena izgledadocument.getElementById('naslov').style.color = 'red';
o promjena vidljivostidocument.getElementById('naslov').style.visibility = 'hidden';
document.getElementById('naslov').style.display = 'none';
o promjena naziva gumbadocument.getElementById('gumb').value = 'Novi';
Otvoreno računarstvo - 6. pripremno predavanje16
XMLHttpRequest (AJAX)1. Instanciranje objekta2. Povezivanje s URL-om
o odabir metode HTTP zahtjeva3. Slanje zahtjeva4. Čekanje odgovora poslužitelja (asinkrono!)
o "život" stranice za vrijeme čekanja normalno nastavljen5. Ako je odgovor OK, poziv funkcije
za parsiranje odgovora6. (najčešće) Prikaz rezultata unutar Web stranice
Otvoreno računarstvo - 6. pripremno predavanje17
Demistificirani XMLHttpRequest
poveži objekt s URL-om i odaberi metodu zahtjeva
imenuj funkciju koja će se izvršiti po promjeni stanja
zahtjeva
pošalji zahtjev (u metodi POST, ovdje se dodaju
parametri)
if (window.XMLHttpRequest) {var xmlHttp = new XMLHttpRequest();
} else {
var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”):}xmlHttp.open(“GET”, “http://www.primjer.hr”);xmlHttp.onreadystatechange = promijeniStranicu;xmlHttp.send(null);
provjeri tip Web preglednika, instanciraj objekt
Otvoreno računarstvo - 6. pripremno predavanje18
funkcija koja se izvršava pri
promjeni stanja zahtjeva
provjeri je li dovršeno primanje odgovora
provjeri je li odgovor OK
Demistificirani XMLHttpRequest
function promijeniStranicu() {if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {var odgovor = xmlHttp.responseText;alert (“Dobio sam ” + odgovor);
} else {
alert ("Nešto loše se dogodilo"); }}
}
XML zbog DOM parsiranja treba primiti
s .responseXML
Otvoreno računarstvo - 6. pripremno predavanje19
Slanje parametara, primanje podatakao Za metodu GET, parametri se šalju unutar URL-a
o npr. http://www.fer.hr/detalji.php?id=523&show=simple)
o Za metodu POST, parametri se pišu jednako kao i za GET, no šalju se prilikom poziva funkcije send o npr. req.send("id=523&show=simple");
o Primanje podatakao req.responseText -> obično ga se "preseli" u neki <div>o req.responseXML -> obično ga se transformira DOM-om
Otvoreno računarstvo - 6. pripremno predavanje20
Upucavanje nevolja (troubleshooting)o Čudne sintaksne pogreške vezane za stringove
o pomiješali ste jednostruke (') i dvostruke navodnike (")o pazite na navodnike unutar navodnika
o <tr onmouseover="alert('Čiča "Gliša"');">o escape znakovi (\", \')o stavljanje teksta u varijablu (jedna razina navodnika manje) o promjena HTML navodnika u jednostruke
o Prelazak u "novi redak" ne radi. Čak ni \n ne radi.o HTML kôd -> <br /> ili </div>
o XMLHttpRequest mi ne vraća ništa ili nešto krivoo probajte u preglednik upisati izravni URL
(......detalji.php?id=24), zbog lakšeg debugiranja
Otvoreno računarstvo - 6. pripremno predavanje21
Pomoćni alatio Vrlo, vrlo korisni
o JavaScript debuggerio Programi za praćenje prometa protokola HTTP
o Chrome, IE8/9, Safari:o Ugrađeni alati (Developer tools)
o Firefox:o DOM Inspectoro Error Consoleo Firebug
Otvoreno računarstvo - 6. pripremno predavanje
Pitanja?
o Probleme i pitanja možete i naknadno postaviti u forumu na stranicama predmeta