Pripremno predavanje za 6. lab. vježbu

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 Datoteke:o promjena HTML-a, CSS-a i postojeće PHP skripte o izrada manje PHP skripte: detalji.phpo izrada JavaScript skripte: detalji.js


Cilj vježbeo Dopuniti Web aplikaciju promjenjivim elementima

na strani klijenta (DHTML, JavaScript)o iskočni okviri s dodatnim informacijama (tooltips)o U Web aplikaciju uključiti vanjske, javno dostupne

biblioteke određene namjene (JavaScript)

o Omogućiti dohvat dodatnih podataka komunikacijom klijent-poslužitelj bez osvježavanja stranice (XMLHttpRequest)


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


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>


Zadatak (1. dio) - vanjske biblioteke o 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


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


Zadatak (2. dio) - obrada odgovorao Skripta detalji.php

o koristi XPath ili DOM o pretražuje XML po id-u o vraća dodatne informacije o 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čno

o Na strani klijenta, po primitku odgovora, JavaScript prenosi dobiveni kôd u okvir za dodatne informacije

o Obavještavanje korisnika o čekanju odgovora


Promjene u postojećim datotekamao pretraga.php

o smanjiti tablicu (treba imati 3 - 5 stupaca)o dodati stupac Akcijao dodati JavaScript kôd za

o prikaz tooltipa za svaki redako obavještavanje korisnika o čekanju na podatke

o ispod navigacije dodati okvir za dodatne podatke (<div>)

o CSS stilovio prilagoditi izgled i strukturu

(NOVI)

Okvir za

dodatne podatke

Brzi uvod u:o JavaScripto XMLHttpRequest


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>


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;

}


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


Registracija događajao Povezivanje događaja na nekom elementu s

naredbama/funkcijama koje treba izvestio Inline (unutar HTML-a)

o ne razdvaja JavaScript od HTML-a (logika i prezentacija)<a href="link.html" onclick="promijeni()">

o još uvijek vrlo rašireno Uobičajeni (unutar JavaScript kôda)

o razdvaja logiku od prezentacije – preporučenoelement.onclick = promijeni;

o W3C DOM Level 2o dodatne, napredne mogućnostielement.addEventListener('click', promijeni,false)


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


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 - Klijentske tehnologije Weba6. pripremno predavanje17

DOM: primjer dodavanja elementao Dodavanje teksta na stranicu

o Izravni upis – zastarjeli, neispravan načindocument.write("<p>Novi tekst</p>")

o Dodavanje novog elementa u DOMvar element = document.createElement("p");var tekst = document.createTextNode("Novi tekst");

element.appendChild(tekst);document.getElementsByTagName("body").item(0).appendChild(element);

o DOM način je kompliciraniji, no omogućuje pozicioniranje elemenata i kasniju uporabu elementa


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


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


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


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


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), radi lakšeg debugiranja


Pomoćni alatio Vrlo, vrlo korisni

o JavaScript debuggerio Programi za praćenje prometa protokola HTTP

o Firefox:o DOM Inspectoro Error Consoleo Firebug

o Chrome:o JavaScript Consoleo Firebug

Otvoreno računarstvo - 6. pripremno predavanje

Pitanja?

o Probleme i pitanja možete i naknadno postaviti u forumu na stranicama predmeta

Documents

Pripremno predavanje za 6. lab. vježbu