Elementi di Programmazione

Crossbrowser
Dispense per il corso di Ingegneria del Web


Revisione 05/11
Giuseppe Della Penna (giuseppe.dellapenna@di.univaq.it)
Dipartimento di Informatica
Universit degli studi dell'Aquila

Corso di Ingegneria del Web Programmazione Crossbrowser: Manipolazione degli Elementi

Revisione 05/11 Pagina 2/12

Elementi di Programmazione Crossbrowser
In questa lezione descriveremo una serie di "ricette" base per eseguire le pi utili e comuni
operazioni di modifica e creazione dinamica di documenti HTML con l'ausilio di Javascript.
Partiremo dai molti esempi visti nelle lezioni sul Document Object Model, fornendo prima di
tutto la via "standard" (se esiste) per realizzate quanto richiesto, ma metteremo anche in campo le
problematiche di programmazione crossbrowser, cercando di fornire (e spiegare) funzioni che si
adattino ad ogni tipo di browser, anche i pi datati, e sfruttando a pieno la versatilit di
Javascript.
Nelle sezioni che seguono ripeteremo quindi molti concetti gi visti in altre lezioni, aggiungendo
dettagli importanti di compatibilit crossbrowser.
Manipolazione degli Elementi
In questa sezione vedremo come si realizzano le operazioni fondamentali di inserimento e
rimozione di elementi nella pagina HTML.
Creare un riferimento ad un elemento
Nei browser esiste sempre un oggetto document, che rappresenta il documento HTML caricato.
In generale, tutti i browser moderni permettono di usare le funzioni definite dal DOM, tra cui
getElementById, per ottenere il riferimento ad un elemento del documento, e tutti gli attributi
strutturali DOM (children, nextSibling, ecc.) per navigare la struttura del documento a partire da
questo elemento.
Alcuni browser pi datati dispongono per solo di un sistema di riferimenti proprietario. Il pi
comune quello di IE (versioni precedenti alla 6), che usa l'array document.all per riferirsi a tutti
gli elementi dotati di id.
Netscape utilizza invece l'array ricorsivo document.layers per riferirsi a tutti gli elementi con id
posti all'interno di un layer (un concetto proprio di Netscape, con cui si gestiva la "stratificazione"
della pagina, un po' come oggi si fa comunemente con le div) o del documento. Purtroppo, ogni
layer gestisce un documento separato, quindi necessario scendere in ricorsione per cercare
l'elemento richiesto.
Quanto detto si riassume nella funzione getElementReference, che ritorna un riferimento a un
oggetto della pagina HTML, dato il suo id, praticamente su ogni browser, scegliendo sempre il
metodo pi sicuro e rapido in base al supporto offerto dal browser stesso:
function getElementReference(id) {
//W3C
if( document.getElementById)
return document.getElementById(id);

//IE et al.
else if(document.all)
return document.all[id];

//NS: scendiamo tra i layer con l'aiuto di un helper
Corso di Ingegneria del Web Programmazione Crossbrowser: Manipolazione degli Elementi

Revisione 05/11 Pagina 3/12

else if(document.layers)
return getElementReferenceNN(document,id);

else return null;
}

//funzione ricorsiva per la ricerca tra i layer di Netscape
function getElementReferenceNN(doc,id) {
for (i=0; i<doc.layers.length; ++i) {
if (doc.layers[i].name == id) return doc.layers[i];
else if (doc.layers[i].document.layers.length>0) {
var res = getElementReferenceNS(doc.layers[i].document,id);
if (res) return res;
}
}
return null;
}
Aggiungere e rimuovere un elemento
Per creare un elemento all'interno del documento possibile procedere in vari modi: nei browser
standard-compatibili, pi semplice e corretto utilizzare le funzioni DOM come appendChild.
In IE, possibile scrivere codice HTML direttamente all'interno di un elemento, provocando la
creazione dei corrispondenti oggetti nella pagina, tramite la propriet innerHTML. Questa
propriet diventata via via molto famosa, in quanto permette di generare molto contenuto con
poco codice, essendo necessario solo scrivere una rappresentazione in formato stringa dell'HTML
che si desidera aggiungere alla pagina e "iniettarlo" nel punto giusto. Per questo, anche altri
browser come Firefox supportano la propriet innerHTML. Tuttavia, sempre consigliabile usare
le funzioni DOM ove possibile.
La funzione createElement che segue riassume queste due strategie. Dati il nome di un nuovo
elemento, un riferimento al suo contenitore (se nullo si assume il <body> del documento) e un
oggetto che contiene i suoi eventuali attributi, la funzione usa il DOM per crearlo, o ne costruisce
la rappresentazione HTML e lo inserisce nell'innerHTML del suo parent. In entrambi i casi, viene
restituito un riferimento all'elemento appena creato. Nella versione IE del codice, il riferimento
pu essere restituito solo se l'elemento creato ha un id.
function createElement(name, parent, attributes) {
if (!parent) parent = document.body;

//W3C
if( document.createElement && parent.appendChild) {
var e = document.createElement(name);
for(a in attributes) e.setAttribute(a,attributes[a]);
parent.appendChild(e);
return e;

} else if (parent.innerHTML) {
//IE
var html = "<"+name;
for(a in attributes) html+=" "+a+"= \\" "+attributes[a]+"\\" ";
html+="/>";
perent.innerHTML += s;
if ('id' in attributes) return getElementReference(attributes.id);
else return null;
Corso di Ingegneria del Web Programmazione Crossbrowser: Manipolazione dello Stile

Revisione 05/11 Pagina 4/12

}
}
Cambiare il contenuto testuale di un elemento
Nei browser che supportano il DOM, il contenuto di un elemento pu essere cambiato inserendo
al suo interno dei nodi di tipo testo creati attraverso la funzione document.createTextNode. Se il
browser supporta il DOM di livello 3, anche possibile utilizzare l'attributo textContent per
ottenere lo stesso effetto pi facilmente.
In browser come IE sempre possibile usare la propriet innerHTML o anche la propriet
innerText (che ha il vantaggio di "ignorare" la formattazione HTML presente nel testo fornito, se
necessario).
La funzione setTextContent che segue prende in input il riferimento ad un elemento e la stringa
da scrivere al suo interno ed imposta di conseguenza il contenuto testuale dell'elemento stesso:
//imposta text come contenuto di element
function setTextContent(element, text) {
//W3C L3
if (element.textContent) element.textContent = text;
//IE et al.
else if (element.innerText) element.innerText=text;
else if (element.innerHTML) element.innerHTML=text;
else {
//W3C L1
var t = document.createTextNode(text);
// necessario prima di tutto "svuotare" l'elemento
while(element.hasChildNodes()) element.removeChild(element.firstChild);
//e poi aggiungere il nodo di testo
element.appendChild(t);
}
}
Manipolazione dello Stile
In questa sezione vedremo una serie di tecniche legate alla manipolazione dello stile CSS degli
elementi. L'unico sistema di accesso allo stile la propriet style degli elementi. Questa, in
precedenza, era implementata in molti browser in maniera proprietaria, ma fortunatamente
l'interfaccia CSS2Properties del W3C in gran parte compatibile con queste vecchie
implementazioni.
Modificare lo stile di un elemento
Modificare lo stile (colori, bordi, ecc.) di un elemento non presenta alcuna difficolt: sufficiente
modificare le opportune propriet di stile dell'elemento stesso. E' comunque opportuno verificare
prima che il browser fornisca accesso alla propriet style dell'elemento.
If (e.style) //compatibilit con i browser senza supporto CSS
e.style.width = "10px" //notare l'uso dell'unit di misura
Nota: se necessario modificare in maniera complessa e programmata lo stile di un elemento,
consigliabile (e sicuro) definire delle regole di stile associate a delle classi CSS, e quindi cambiare
semplicemente la classe associata all'elemento tramite il suo attributo className.
Corso di Ingegneria del Web Programmazione Crossbrowser: Manipolazione dello Stile

Revisione 05/11 Pagina 5/12

Leggere lo stile di un elemento
Ricordiamo che la lettura delle propriet dell'oggetto style associato a un elemento restituisce
solo i valori impostati dall'utente attraverso l'attributo stesso o tramite lo scripting. Gli attributi di
stile impostati tramite regole CSS o calcolati dal browser possono essere invece letti, nei browser
standard-compatibili, utilizzando la funzione window.getComputedStyle.
In IE, questa funzione assente, anche nelle versioni che supportano largamente gli standard, ed
sostituita dalla propriet currentStyle dell'elemento stesso.
La funzione getStyle che segue restituisce il valore corrente (eventualmente calcolato) di un dato
attributo di stile per un elemento.
function getStyle(element, attribute) {
//W3C
if( window.getComputedStyle)
return window.getComputedStyle(element,"")[attribute]
//IE
else if (element.currentStyle)
return element.currentStyle[attribute];
//user-set
else if (e.style)
return e.style[attribute];
//nessun supporto allo stile
else return "";
}
Leggere la posizione e le dimensioni di un elemento
Gli attributi CSS left, top, right, e bottom possono essere utilizzati per conoscere la posizione di
un elemento solo nel caso in cui questo sia stato esplicitamente posizionato dall'utente. I due
attributi non-normativi offsetLeft e offsetTop forniscono invece la posizione dell'elemento rispetto
all'offsetParent, indipendentemente dal sistema di posizionamento, ma sono di sola lettura.
Stesso discorso vale per gli attributi CSS width e height per quel che riguarda le dimensioni di un
elemento. Il loro valore, tuttavia, pu essere espresso in diverse unit di misura, anche relativa (ad
esempio percentuale), per cui non opportuno prenderlo in considerazione. In questo caso le
propriet non-normative corrispondenti sono offsetWidth e offsetHeight.
La funzione getElementPosition che segue restituisce la posizione di un elemento sotto forma di
un oggetto avente due propriet x e y. Viene provata prima la soluzione non-normativa, poi si
cercano di leggere gli attributi di posizionamento CSS, se presenti ed espressi in pixel.
function getElementPosition(e) {
if (e.offsetLeft && e.offsetTop)
return {x: e.offsetLeft, y: e.offsetTop};
else if (getStyle(e,"position") == "relative" ||
getStyle(e,"position") == "absolute") {
if (getStyle(e,"left").match(/\d+px$/) &&
getStyle(e,"left").match(/\d+px$/))
return {x: parseInt(getStyle(e,"left")),
y: parseInt(getStyle(e,"top"))};
} else return {x:0, y:0};
}
Corso di Ingegneria del Web Programmazione Crossbrowser: Manipolazione dello Stile

Revisione 05/11 Pagina 6/12

La funzione che segue restituisce invece le dimensioni di un elemento, sotto forma un oggetto
avente le propriet w e h. Vengono utilizzati, se necessario, anche gli attributi CSS width e height,
se espressi in pixel.
function getElementSize(e) {
if (e.offsetWidth && e.offsetHeight)
return {w: e.offsetWidth, h: e.offsetHeight};
else if (getStyle(e,"width").match(/\d+px$/) &&
getStyle(e,"height").match(/\d+px$/))
return {w: parseInt(getStyle(e,"width")),
h: parseInt(getStyle(e,"height"))};
else return {w:0, h:0};
}
Calcolare la posizione assoluta di un elemento
La posizione assoluta di un elemento, cio la sua posizione rispetto alla pagina, si pu calcolare
iterativamente avvalendosi degli attributi non-normativi offsetLeft, offsetTop e offsetParent, come
illustrato dalla funzione getElementWindowPosition che segue.
function getElementWindowPosition(e) {
if (!e.offsetTop) return null;
var coords = {x: e.offsetLeft, y: e.offsetTop};
while(e.offsetParent) {
var pcoords = {x: e.offsetParent.offsetLeft,
y: e.offsetParent.offsetTop};
coords.x+=pcoords.x;
coords.y+=pcoords.y;
e=e.offsetParent;
}
return coords;
}
Spostare un elemento
Solo gli elementi posizionati, cio con l'attributo di stile position impostato a absolute (o relative)
possono essere spostati. In questo caso, sufficiente agire sulle propriet di stile left, right, top e
bottom. Bisogna tuttavia considerare che tali coordinate sono offset relativi a:
la posizione del primo antenato dell'elemento con posizionamento non statico (o al body,
se non ce ne sono), se il posizionamento assoluto.
la posizione normale che l'elemento avrebbe nel flusso del documento, se il
posizionamento relativo.
La funzione setElementPosition che segue imposta le nuove coordinate di un oggetto se questo
ha un posizionamento non statico.
function setElementPosition(e,offsetX,offsetY) {
if (e.style && (getStyle(e,"position") == "relative" ||
getStyle(e,"position") == "absolute")) {
e.style.left = offsetX+"px";
e.style.top = offsetY+"px";
}
}
Corso di Ingegneria del Web Programmazione Crossbrowser: Manipolazione dello Stile

Revisione 05/11 Pagina 7/12

Modificare le dimensioni di un elemento
Per ridimensionare un elemento si possono assegnare dei valori alle propriet di stile width e/o
height (badando a specificare anche l'unit di misura), come nella funzione setElementSize che
segue:
function setElementSize(e,SizeX,SizeY) {
if (e.style) {
e.style.width = SizeX+"px";
e.style.height = SizeY+"px";
}
}
Mostrare e nascondere un elemento
Per nascondere un elemento sufficiente impostare la sua propriet di stile display su none. Per
mostrare un elemento nascosto, si dovr invece reimpostare la sua propriet di stile display su
block o, pi in generale, sul valore che aveva precedentemente.
Le tre funzioni hideElement, showElement e toggleElement che seguono, dato un elemento,
rispettivamente lo nascondono, lo rendono visibile o cambiano il suo stato di visibilit.
function hideElement(e) {
if (e.style) e.style.display = "none";
}

function showElement(e,inline) {
//default su block, specificare true come secondo parametro per inline
if (e.style) e.style.display = (inline?"inline":"block");
}

function toggleElement(e,inline) {
if (e.style) {
if (getStyle(e,"display") == "none")
e.style.display = (inline?"inline":"block");
else e.style.display = "none";
}
}
Impostando la propriet di stile visibility su hidden si rende l'oggetto invisibile, ma lo spazio da
esso occupato rimane vuoto. L'uso dei valori visible/hidden per visibility invece utile per creare,
ad esempio, degli effetti di lampeggiamento.
La funzione blinkElement che segue usa l'attributo CSS visibility per far lampeggiare un elemento
(imitando l'effetto del vecchio elemento <blink> dell'HTML 1). Ciascun lampeggiamento ha una
durata di duration millisecondi e l'intero effetto ha durata complessiva di duration millisecondi
(l'ultimo parametro times per uso interno e non va specificato nella chiamata).
function blinkElement(e,speed,duration,times) {
toggleVisibility(e);
if (times) {
if (duration/speed > times)
setTimeout(blinkElement,speed,e,speed,duration,times+1);
else setVisible(e,true);
} else setTimeout(blinkElement,speed,e,speed,duration,1);
}

Corso di Ingegneria del Web Programmazione Crossbrowser: Manipolazione degli Eventi

Revisione 05/11 Pagina 8/12

function toggleVisibility(e) {
if (e.style) {
if (getStyle(e,"visibility")=="hidden")
e.style.visibility="visible";
else e.style.visibility="hidden";
}
}

function setVisible(e) {
if (e.style) e.style.visibility="visible";
}
Manipolazione degli Eventi
La gestione degli eventi standard e quella di IE presentano molte differenze. Per creare uno script
crossbrowser, necessario usare qualche trucco di Javascript per equalizzare i due modelli di
eventi.
Associare un event listener ad un evento
IE non supporta il sistema standard di assegnazione degli eventi tramite il metodo
addEventListener, ma ha un suo metodo proprietario chiamato attachEvent (pi limitato, ma
sintatticamente simile a addEventListener). Per ovviare a queste differenze, la funzione
appendEventListener qui riportata individua il sistema di gestione degli eventi pi avanzato
supportato dal browser e lo usa per applicare il listener dato all'evento e all'oggetto richiesti. Se
nessuno dei modelli (standard o IE) disponibile, la funzione tenta di imitare la semantica di
addEventListener costruendo una funzione che esegue in serie il vecchio listener impostato
sull'oggetto (se presente) e quello nuovo, ed assegnandola alla propriet evento dell'oggetto DOM
(le propriet evento "onX" sono il metodo di assegnazione di event listener pi supportato, anche
nei browser pi datati.).
function appendEventListener(listener,obj,event,usecapture) {
if (obj.addEventListener) {
//W3C
obj.addEventListener(event,listener,usecapture);
} else if(obj.attachEvent) { //IE
obj.attachEvent("on"+event,listener);
} else { //ultima possibilit: costruiamo una funzione listener globale
event= "on"+event;
var oldlistener = obj[hnd];
if (typeof(oldlistener) != 'function') {
obj[event] = listener;
} else {
obj[event] = function() {
var lr1= oldlistener();
var lr2 = listener();
return (lr1 && lr2);
}
}
}
}
Nota: anche per la rimozione di event listener, IE utilizza un metodo chiamato detachEvent con la
stessa sintassi di removeEventListener.
Corso di Ingegneria del Web Programmazione Crossbrowser: Manipolazione degli Eventi

Revisione 05/11 Pagina 9/12

Leggere le informazioni su un evento
Quando si verifica un evento, IE non lo passa al listener ma lo rende globalmente accessibile
attraverso la propriet window.event. Per avere accesso all'oggetto Event relativo all'evento
corrente in maniera crossbrowser possibile quindi chiamare la funzione getEvent qui riportata
function getEvent(e) {
e = (window.event?window.event:e);
return e;
}
Ogni event listener "normalizzato" dovr quindi accettare (almeno) un parametro ed eseguire
una chiamata a getEvent in questa forma:
function(e) {
e = getEvent(e);
...
}
Catturare gli eventi del mouse
Come gi discusso nelle lezioni sul DOM, la posizione del mouse riportata negli eventi (clientX e
clientY) sempre relativa alla finestra del browser (client). La posizione degli elementi, invece, di
solitamente relativa alla pagina, che pu essere solo parzialmente visibile nella finestra. Per
ottenere la posizione del mouse rispetto alla pagina necessario quindi prendere il considerazione
le coordinate di scrolling della pagina stessa.
In IE e altri browser gli eventi comprendono gi due propriet non standard, chiamate pageX e
pageY, che riportano le coordinate dell'evento in relazione alla pagina. In caso contrario, per avere
queste coordinate bisogna sommare alle propriet di base clientX e clientY i valori di alcune altre
propriet non standard, come scrollLeft e scrollTop, lette dagli opportuni elementi della pagina.
La funzione getEventPagePosition che segue cerca di calcolare le coordinate di pagina di un
evento mouse utilizzando tutte le combinazioni di attributi non standard note nei browser
moderni. Le coordinate sono restituite sotto forma di un oggetto con due propriet x e y.
function getEventPagePosition(e) {
if (!(e.pageX && e.pageY)) {
if( document.documentElement && (document.documentElement.scrollTop ||
document.documentElement.scrollLeft)) {
return {x: e.clientX + document.documentElement.scrollLeft,
y: e.clientY + document.documentElement.scrollTop};
} else if( document.body && (document.body.scrollTop ||
document.body.scrollLeft )) {
return {x: e.clientX + document.body.scrollLeft,
y: e.clientY + document.body.scrollTop};
} else {
return {x: e.clientX, y: e.clientY};
}
} else {
return {x: e.pageX, y: e.pageY};
}
}
Corso di Ingegneria del Web Programmazione Crossbrowser: Manipolazione degli Eventi

Revisione 05/11 Pagina 10/12

Catturare gli eventi della tastiera
Come sappiamo, il modello di evento standard non include attualmente informazioni sugli eventi
della tastiera. I singoli browser hanno quindi implementato metodi proprietari per segnalare e
documentare questi eventi. Gli eventi generalmente supportati da tutti i browser, soprattutto in
associazione a campi interattivi come <input> o <textarea>, sono i seguenti
keydown (l'utente ha premuto, ma non ancora rilasciato, un tasto)
keyup (l'utente ha rilasciato un tasto premuto: si verifica sempre dopo un corrispondente
keydown)
keypress (l'utente da premuto un tasto: si verifica dopo una sequenza keydown+keyup).
IE, Firefox ed altri browser segnalano il codice del carattere premuto attraverso la propriet
keyCode dell'evento. Le vecchie versioni di NS usano invece la propriet which. Altri browser usano
infine la propriet charCode (Firefox utilizza sia charCode che keyCode). La funzione
getEventKeyCode che segue determina il codice del tasto premuto controllando tutte queste
propriet:
function getEventKeyCode(e) {
if (!e.keyCode) {
//old NS
if (e.which) return e.which;
//some others
else return e.charCode;
} else {
//IE et al.
return e.keyCode;
}
}
Da notare che gli eventi keydown e keyup restituiscono il codice di ogni tasto premuto,
compresi quelli non alfabetici come Shift o CTRL. Se ad esempio si preme Shift+1, la sequenza di
eventi riporter il codice di Shift e il codice ASCII del numero 1. L'evento keypress, invece,
riporter solo il codice del carattere "!" (cio il carattere corrispondete alla combinazione
premuta).
L'esempio che segue mostra un listener che "lascia passare" solo i tasti numerici. Associando
questo listener all'evento keydown di un <input> testuale, si blocca (ritornando false)
l'elaborazione di default (che provoca la scrittura del carattere nel campo) di tutti gli eventi in cui il
codice carattere non corrisponde al codice ASCII di un numero o di un tasto di servizio (backspace,
cursori).
function onlyNumericListener(e) {
e = getEvent(e);
var k = getEventKeyCode(e);
if ((k>=48 && k <=57) || //numeri
k == 8 || //backspace
(k>=37 && k <=40)) //tasti cursore
return true;
//blocchiamo la gestione di tutti gli altri tasti
return false;
}
Per provarlo, possiamo scrivere questo semplice frammento di HTML
Corso di Ingegneria del Web Programmazione Crossbrowser: Manipolazione degli Eventi

Revisione 05/11 Pagina 11/12

<html>
<head>
<title>Prova</title>
</head>
<body>
<form action="pippo.php" method="get">
<input type="text" id="numero" name="numero"/>
</form>
</body>
</html>
Quindi inseriamo nella <head> gli script per getEvent, getEventKeyCode, onlyNumericListener e
inizializziamo la gestione degli eventi nella maniera consueta:
window.onload= function() {
document.getElementById("numero").onkeydown=onlyNumericListener;
}
Oggetto Event normalizzato
Come abbiamo avuto modo di vedere, la struttura degli oggetti Event di IE molto diversa da
quella standard. Altre differenze includono ad esempio il fatto che in IE l'elemento che ha attivato
l'evento indicato dalla propriet srcElement e non da target.
In alcuni browser, inoltre, i nodi di testo possono essere target degli eventi, ma questo
comportamento inutile e non standard, per cui conveniente ridirigere questi eventi sul
contenitore del testo stesso.
Esistono infine poi informazioni importanti, come quelle che riguardano gli eventi di tastiera, che
non sono contenute nell'oggetto Event standard.
E' comodo quindi incorporare nell'oggetto Event una logica comune, anche se non
completamente standard, per avere a disposizione degli oggetti con un'interfaccia completamente
crossbrowser e contenente tutte le informazioni utili alla gestione di ogni evento.
La funzione getW3CEvent riportata qui, se chiamata in un listener, utilizza tutte le funzioni
crossbrowser viste finora per restituire un oggetto Event modificato la cui interfaccia
totalmente aderente allo standard, con in pi le propriet non standard pageX, pageY e keyCode
correttamente impostate.
function getW3CEvent(e) {
//l'evento IE una propriet di window
e = getEvent(e);
//l'attributo target di IE si chiama scrElement
if (e.srcElement) e.currentTarget = e.target = e.srcElement;
//il testo non un target valido!
if (e.target.nodeType == 3) e.target = e.target.parentNode;
//posizione del mouse rispetto alla pagina
if (!(e.pageX && e.pageY)) {
var mousepos = getEventPagePosition(e);
e.pageX = mousepos.x;
e.pageY = mousepos.y;
}
//keyboard key pressed
if (!e.keyCode) e.keyCode = getEventKeyCode(e);
return e;
}
Corso di Ingegneria del Web Programmazione Crossbrowser: Librerie Javascript Crossbrowser

Revisione 05/11 Pagina 12/12

Librerie Javascript Crossbrowser
Tutte le funzioni helper per la programmazione crossbrowser viste finora sono disponibili in una libreria
Javascript di esempio disponibile tra il materiale online del corso.
Una volta comprese e imparate e gestire le problematiche di compatibilit tra i browser, utile
imparare anche ad utilizzare nei propri script alcune librerie di supporto alla programmazione
Javascript crossbrowser presenti in rete, che sono pi complete e sempre aggiornate, garantendo
un supporto esteso (e testato) a moltissimi browser e una serie di funzioni helper utili nella
programmazione.
A questo scopo, vi consiglio vivamente di provare la libreria JQuery. Si tratta di una libreria molto
completa, ottimamente supportata e di larghissimo utilizzo. Supporta tutti i browser pi diffusi, ad
esempio IE dalla versione 6, Forefox dalla 2, Opera, Safari e Google Chrome, ed offre non solo
ottime funzionalit di base, ma anche numerose utilit, soprattutto per l'uso di HTML dinamico e
AJAX. Notate, per, che alcune delle tecniche che abbiamo visto in questa lezione potrebbero
esservi utili persino col supporto di JQuery!
Potete scaricare JQuery e la sua documentazione (molto completa) dal sito ufficiale
http://jquery.com/. Potete provare anche come funziona JQuery in maniera interattiva dal sito
Visual JQuery (http://visualjquery.com/).
Come informazione tecnica di base, considerate che tutta la "magia" di questa libreria si
concentra nell'uso della speciale funzione "$" definita da JQuery. Passate a questa funzione un
qualsiasi oggetto del DOM, o persino una stringa HTML, e otterrete in risposta l'oggetto DOM
corrispondente "arricchito" di una serie di funzionalit, ottenute grazie all'estendibilit degli
oggetti Javascript. Molte di queste funzionalit sostituiscono quelle standard del DOM,
potenziandole e rendendole crossbrowser.


This work is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported
License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/ or send a
letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.