Web Design: Programmare in HTML, CSS, Javascript, Jquery, PHP, XML, Ajax

LEZIONI DI PROGRAMMAZIONE PER IL WEB
back to HomePage
INDICE
GENERALI
Note per la lettura di questo documento

Dove posso trovare documentazione online sui linguaggi php, javascript e html?
Come posso ottenere una perfetta copia pdf di una pagina internet che contiene un articolo di web design
che mi interessa?
Esistono libri consigliabili a chi si avvicina per la prima volta a php, ajax, mySQL?
SITI INTERNET IN HOSTING GRATUITO (ES. ALTERVISTA.ORG)
Utilizzare un hosting gratuito per disporre di un server php che consenta di sperimentare il linguaggio e
le sue potenzialit
Cos' un programma FTP? Qual il miglior programma FTP scaricabile gratuitamente consigliato in
alternativa a quello di altervista.org?
HTML & CSS
Come funziona un browser

La dichiarazione DOCTYPE
Visualizzare il codice di una pagina web
Gli elementi della pagina web
Come centrare orizzontalmente e verticalmente un elemento nella pagina web
Come si crea e si configura una tabella con i fogli di stile
JAVASCRIPT & JQUERY
I malfunzionamenti pi gravi di Explorer di cui il programmatore javascript dovrebbe essere a conoscenza

Come rilevare le versioni di Explorer e in particolare quelle anteriori a Explorer 9
Cos' javascript
Cos' jQuery
Cos' il DOM che viene utilizzato da javascript?
Acquisire e manipolare gli elementi di una pagina tramite javascript e jQuery
Come si costruisce un oggetto javascript
Racchiudere un contenuto troppo grande per lo spazio assegnato nella pagina entro un box con barre di
scorrimento verticali e orizzontali
La propriet documentElement
Subordinare l'apertura di un link al valore vero/falso di una funzione javascript
Tracciare la posizione relativa e assoluta del mouse entro la finestra, indipendentemente dallo scrolling
Acquisire la posizione di un elemento entro il documento
Fare lo scrolling fino a portare un elemento della pagina in vista
Dotare una pagina web di ToolTip (box informativi che appaiono quando il mouse passa sopra ad un
elemento)
Inserire nel campo "title" dei vostri link, al caricamento della pagina, informazioni che verranno
visualizzate dal browser al passaggio del mouse, utilizzando XML, javascript e php
Alcune cose che javascript non fa o fa solo a prezzo di una programmazione complicata e poco pulita
PHP & MYSQL
Una pagina php che cambia aspetto ogni volta che la si ricarica
Un codice php per consentire agli utenti del vostro sito il download di qualsiasi tipo di file
Una pagina in cui una routine php genera una tabella che mostra il contenuto di un database
Come importare una tabella Access nel database MySQL del vostro server, utilizzando XML e php
Alcune cose che php non fa, anche se sembrerebbe possibile
AJAX
Introduzione ad ajax
Inviare dati al server tramite i metodi GET e POST e gestirli con una routine php
Acquisire un documento XML dal server e metterlo a disposizione di javascript
Acquisire codice javascript dal server ed eseguirlo immediatamente tramite la funzione eval()
Creare un oggetto javascript che incorpori una pagina html esterna e manipolarla
Come ottenere l'esatto indirizzo di una pagina internet che si vuole utilizzare con javascript
Una pagina per sperimentare semplice codice javascript, jQuery, ajax, php
Alcune cose che con ajax non si possono fare, anche se apparentemente sembrerebbero semplici
XML & XPATH & SIMPLEXML
Cos' un documento XML e come lo si pu gestire

Leggere un documento XML posto sul server e farne apparire il contenuto nella pagina web
VARIE
Suggerimenti vari
Argomenti vari
Note per la lettura di questo documento

back to Index
Come gi detto, questo documento in via di completamento entro gennaio 2016. Controllate
quindi, dopo questa data, se siano presenti altri articoli di vostro interesse.
Controllate alla fine di ogni articolo se sono presenti riferimenti a risorse internet che potrebbero
esservi utili riguardo l'argomento ("ULTERIORE DOCUMENTAZIONE CONSULTABILE").
Se viene riportato un codice di pi righe con una riga colorata:

<style type ="text/css">
.TableCell {
border : 1px solid black;
text-align : center;
padding : 10px;
}
</style>
se la riga viene riportate e commentata singolarmente pi in basso, essa avr lo stesso colore, per
facilitare la sua identificazione nel codice:
All'interno di un articolo eventuali sottotitoli in rosso:

ULTERIORE DOCUMENTAZIONE CONSULTABILE
servono ad illustrare la ripartizione dei contenuti.
Dove posso trovare documentazione sui linguaggi php, javascript e html?

back to Index
Google una delle principali fonti di informazione: sufficiente premettere nel box di ricerca il
nome del linguaggio e scrivere del problema (ad esempio: "php string functions"): appariranno
subito le ricerche pertinenti il nostro caso che sono state fatte da altri programmatori. Questo il
sistema pi comunemente usato da molti sviluppatori.
Un consiglio: chi conosce bene l'inglese dovrebbe digitare i suoi quesiti in questa lingua, perch
le risorse internet in lingua anglosassone sono molto pi complete e approfondite di quelle in
lingua italiana.
Il sito W3schools.com (in lingua inglese) offre pagine chiare e corredate di esercizi pratici su
javascript, php, html
Il sito stackoverflow.com (in lingua inglese) non personalmente quel che consiglierei per
acquisire i rudimenti, perch riporta semplicemente domande e risposte di programmatori, con
poche righe di esplicazione. Molti post sono inutili o poco comprensibili. Ma con pazienza si
possono trovare soluzioni interessanti a problemi particolari.
Il forum del sito altervista.org fornisce molte utili risposte a problemi di programmazione
riguardanti siti gestiti con php e MySQL
www.developer.mozilla.org (inglese) contiene numerosi esempi e soluzioni scritte e indirizzate a
sviluppatori in ambito Firefox, ma normalmente anche con gli altri browser
Controllate alla fine di ogni articolo di questo documento se sono presenti riferimenti a risorse
internet che potrebbero esservi utili riguardo l'argomento ("ULTERIORE
CONSULTABILE").
DOCUMENTAZIONE
Come posso ottenere una perfetta copia pdf di una pagina internet che contiene un
articolo di web design che mi interessa?
back to Index
Sar capitato a tutti di imbattersi in un interessantissimo articolo di programmazione, e di non avere

il tempo di esaminarlo sul momento. Come salvarlo per poterlo poi rileggere in tutta calma?
L'opzione "Salva pagina con nome" "Solo HTML" rende necessario ricollegarsi ad internet (e
nel frattempo la pagina potrebbe essere stata tolta o cambiata)
L'opzione "Salva pagina con nome" "Pagina web completa" riproduce sul vostro computer la
pagina intera, ma il download lento e il file ingombrante.
Google Chrome mette a disposizione una funzionalit incredibilmente utile, che non posseduta
dagli altri browser: la possibilit di creare in pochi secondi una perfetta copia pdf di qualsiasi pagina.
E' sufficiente selezionare dal menu la voce "stampa", cliccare sul bottone "modifica" e selezionare,
invece di una stampante, l'opzione "Salva come PDF".
Chrome, invece di procedere alla stampa chieder dove salvare il documento PDF, che potrete aprire
tranquillamente in seguito.
Esistono libri consigliabili a chi si avvicina per la prima volta a php, ajax, mySQL?
back to Index
Una premessa importante: i libri in lingua inglese sono spesso indispensabili, per completezza e per
chiarezza che purtroppo mancano a non pochi libri italiani. Oltre a ci, il loro prezzo decisamente
pi contenuto di questi ultimi. Moltissimi testi inglesi sono disponibili in ebook, il che ne abbassa
ulteriormente il costo. Quasi tutti forniscono un indirizzo internet da cui scaricare le pagine con il
codice gi scritto.
Ecco, senza alcuna pretesa di esaustivit, un elenco di libri che sono stati utilissimi a chi scrive e
sufficienti a fargli apprendere come creare e gestire il suo sito internet:
Lemay-Colburn, HTML & CSS, McGraw-Hill
Beighley, jQuery for Dummies, Wiley Publishing Inc.
Libro in lingua inglese. Disponibile versione ebook
Holzner, Ajax: A Beginner's Guide, McGraw-Hill
Libro assolutamente consigliabile: contiene una descrizione passo-passo di XML, javascript e
DOM, ajax, php. Il codice commentato riga per riga e niente lasciato senza spiegazione. Viene
fornito un link per scaricare tutti i file di esempio.
Nixon, Learning PHP, MySQL, JavaScript, and CSS: A Step-by-Step Guide to Creating Dynamic
Websites, O'Reilly.
Amedeo, JQuery, Apogeo Pocket
Rubini, MySQL versione 5, Apogeo Pocket
Rubini, Javascript, Apogeo Pocket
Canducci, PHP 5, Apogeo Pocket
Flanagan, Javascript Pocket Reference, Tecniche Nuove-O'Reilly

Ferrero, SQL, Apogeo Pocket
Powers, Programmare in Javascript, Tecniche Nuove-O'Reilly
Contiene anche una trattazione di ajax
Meyer, Cascading Style Sheets, Tecniche Nuove-O'Reilly
Bodensiek, Effetti speciali per il web, Jackson Libri
Schafer, HTML e CSS, Mondadori
Kofler, MySQL5, Guida completa, Apogeo
Nikolassy, Manuale di Javascript, Hoepli
Libro validissimo, completo e letteralmente infarcito di codice e di esercizi.
Tutti i libri Apogeo sono disponibili in versione ebook. Molti sono libri pocket, economici ma
completi per un apprendimento di medio livello.
Personalmente, tra gli editori italiani, chi scrive si trovato bene con Apogeo, Mondadori e
McGraw-Hill, mentre considera Jackson Libri di qualit inferiore e talvolta alquanto scadente.
Utilizzare un hosting gratuito per disporre di un server php che consenta di

sperimentare il linguaggio e le sue potenzialit
back to Index
Il sito www.altervista.org uno dei siti di hosting gratuiti europei pi importanti. Mette a
disposizione degli utenti un nome di dominio e uno spazio sul server di 2 Gb, con un traffico di 30
Gb al mese, 20mila query all'ora per il database mySQL.
Tra i linguaggi che vengono supportati dai suoi server c' php versione 5, MySQL versione 5, un
programma FTP per fare l'upload e il download dei files sul server.
Il database MySQL gestibile in modo semplicissimo con codice php e dal proprio account
altervista tramite PhpMyAdmin, un programma open source di gestione del database che consente
di creare tabelle e collegamenti e fare delle query.
Anche www.xoom.virgilio.it un hosting gratuito di buon livello, dotato di php, MySQL e di spazio
illimitato su server
Cos' un programma FTP? Qual il miglior programma FTP scaricabile

gratuitamente in alternativa a quello di altervista.org?
back to Index
Un programma FTP, tipicamente, consente di effettuare l'upload e il download di files (pagine web,
files di testo o di altro tipo) dall'hard-disk del proprio computer al server che ospita il proprio sito e
viceversa.
Uno dei migliori programmi scaricabili gratuitamente senz'altro Filezilla di SourceForge. Per
semplicit d'uso e di interfaccia e per completezza di funzionalit semplicemente insuperato per
gli utenti alle prime armi, ma anche per quelli esperti estremamente potente.
Come funziona un browser

back to Index
L'utente digita un URL (acronimo di "Uniform Resource Locator"), cio l'indirizzo di una pagina
web nella barra degli indirizzi del browser, come ad esempio: "http://www.server.com".
Il browser cerca l'IP corrispondente a quell'URL. Ogni computer collegato ad internet ha un indirizzo
IP ("Internet Protocol address"), incluso il vostro (esistono anche altri significati di IP che non vanno
confusi con questo: "Internet Provider", ad esempio la societ che vi fornisce l'accesso ad internet).
Il browser consulta il DNS ("Domain Name Service") per trovare l'indirizzo IP del server associato
a "server.com".
Il browser, utilizzando l'IP address, invia una richiesta al server corrispondente a quell'indirizzo, di
inviare l'home page.
Il server, ricevuta la richiesta, cerca la home page sul suo hard disk. I server web sono configurati
in modo da inviare una pagina di default (il file-indice) ogni volta che un browser richiede un nome
di directory. Per esempio, se il vostro link "www.example.com/about/", un tipico server web
cercher in quella directory un file chiamato "index.html". I nomi pi comuni, sono
"index.htm", "index.html", "index.php", "index.asp". Moltissimi indirizzi ufficiali
internet forniti da societ o siti, come: "www.usatoday.com" o "www.flowersgallery.com"
sono solo indirizzi di directory all'interno delle quali si trova la pagina di default, non di rado
annidato in sottodirectory. Molti server impediscono al browser di visualizzare nella barra degli
indirizzi il nome del file-indice.
Se il server si accorge che nella pagina incorporato del codice server-side come php, lo esegue
prima di inviare la pagina web (es. si collega ad un database per recuperare dei dati da mostrare nella
pagina; configura elementi della pagina in base al tipo di utente che ha fatto la richiesta; ecc.).
Il server invia la pagina al browser.
Il browser mostra la pagina sul vostro computer.
Normalmente questo processo si ripete per ogni elemento della pagina web: un grafico, un video,
una pagina di stile CSS.
Se il browser si accorge che nella pagina incorporato del codice client-side (tipicamente javascript)
lo esegue immediatamente dopo il caricamento della pagina, a meno che si tratti di funzioni da
attivare solo a seguito di un evento.
La dichiarazione DOCTYPE
back to Index
E' importante porre, all'inizio del documento, prima del tag <html>, la seguente dichiarazione:
<!DOCTYPE HTML>
che pu scriversi anche in minuscolo:

<!doctype html>
Questo elemento della pagina dice al browser quale versione del linguaggio HTML usata nel
codice che segue. Senza questa indicazione, il browser costretto ad indovinare a quale versione si
riferiscano i comandi, e questo non molto raccomandabile.
Commentiamo la seguente dichiarazione:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
HTML : il linguaggio utilizzato HTML
PUBLIC : il documento pubblico; in alternativa viene dichiarato "SYSTEM" (il documento una
risorsa privata)
"-//W3C//DTD XHTML 1.0 Strict//EN" : si tratta di una DTD ("Document Type Declaration") in
forma di FPI ("Formal Public Identifier"). In alternativa ad una DTD in forma di FPI si pu usare
una DTD in forma di URL del tipo: "http://www.w3.org/DTD/xhtml1.dtd".
Commentiamo qui sotto i singoli elementi della dichiarazione:
//W3C : il documento fa riferimento alle specifiche del consorzio W3C. Il segno meno (" - ") indica
che le specifiche non sono registrate all'ISO (International Standardization Organization,
Organizzazione di Standardizzazione Internazionale). Se lo fossero state ci sarebbe un " + "
//DTD XHTML 1.0 Strict : la definizione vera e propria del tipo di documento (DTD). Il linguaggio
XHTML l'immediato successore del linguaggio HTML 4.1, e ha due versioni: "XHTML
transitional", che maggiormente compatibile con il vecchio HTML 4.1 e "XHTML strict", che
contiene diverse caratteristiche incompatibili con HTML 4.1.
//EN : la lingua in cui scritta la DTD l'inglese
Con l'avvento di HTML5 non pi necessaria una DTD in forma di FPI o di URL, e la dichiarazione
semplicemente:
<!DOCTYPE HTML>
Ecco i vari tipi di dichiarazioni per i diversi linguaggi che si sono succeduti nel tempo:
Tipo di documento
HTML5
XHTML 1.1
XHTML 1.1 Strict
XHTML 1.1 Transitional
XHTML 1.1 Frameset
XHTML 1.0 Strict
XHTML 1.0 Transitional
XHTML 1.0 Frameset
HTML 4.01 Strict
HTML 4.01 Transitional
HTML 4.01 Frameset
HTML 3.2
HTML 2.0
Dichiarazione:
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "htt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Frameset//EN" "h
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "htt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "h
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "h

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
HTML5, il linguaggio pi comunemente utilizzato attualmente, una evoluzione del linguaggio

HTML che supporta tra l'altro anche elementi audio e video
ULTERIORE DOCUMENTAZIONE CONSULTABILE:
https://en.wikipedia.org/wiki/Document_type_declaration : Pagina Wikipedia che spiega come

funziona una dichiarazione DOCTYPE (in inglese)
Visualizzare il codice di una pagina web

back to Index
Con Chrome, tasto destro del mouse, opzione "visualizza sorgente pagina"
Con Mozilla, tasto destro del mouse, opzione "visualizza sorgente pagina"
Con Explorer, tasto destro del mouse, opzione "HTML"
Gli elementi della pagina web

back to Index
Cominciamo col distinguere block-elements e inline-elements, distinzione che ci sar utile nel
prosieguo. Ogni elemento della pagina html ha un valore display che pu essere modificato col
foglio CSS, e il valore di default per molti elementi block o inline.
Un block-level element inizia sempre con una nuova linea, seguito da un'altra linea e si estende a
sinistra e a destra quanto pu (provate a settare il bordo con l'istruzione CSS: border : 1px solid
black e vedrete che il box si estende per tutta la larghezza della pagina). Sono esempi di block-level
elements:
<div>, <table>, <h1> <h6>, <p>, <form>
Un block-element ha le seguenti caratteristiche:
Si espande automaticamente entro il suo parent container

Pu avere margini o padding
Se non settata la propriet width, o settata ad auto si espande naturalmente ad incorporare gli
elementi figli (es. dei paragrafi entro un <div>)
Di default posto al disotto degli altri elementi della pagina, nell'ordine stabilito entro il codice
html o dal posizionamento assoluto
Ignora la propriet vertical-align
un inline element non inizia con una nuova linea e ha la larghezza strettamente necessaria. Ad
esempio gli elementi:
<span>, <a>, <img>, <button>, <input>, <label>, <select>, <textarea>, </br>
sono inline elements. La maniera migliore di descrivere un simile elemento di pensarlo come un
box che si comporta come una stringa di testo.
Un inline element ha le seguenti caratteristiche:
E' contenuto nell'eventuale testo del blocco, e non provoca al suo interno un ritorno a capo
E' soggetto alle propriet CSS white space
Non accetta le propriet top margin e bottom margin, ma accetta le propriet padding, left margin,
right margin
Non accetta le propriet width ed height
Accetta la propriet vertical-align
Consideriamo la seguente rappresentazione di un box in una pagina web:
Come si vede, qualsiasi box ha una area del contenuto, un margine, che segna l'area pi esterna, un
border, che individua il confine che pu essere visualizzato come linea, un padding, cio una
distanza tra il border e il contenuto. Ciascuno di questi elementi (margin, border, padding) pu
essere trattato separatamente rispetto al lato destro (right segment), lato sinistro (left segment), lato
superiore (top segment), lato inferiore (bottom segment), ma spesso utile generare il padding o i
margini o lo spessore del bordo sui 4 lati mediante istruzioni come:
margin : 5 px;
padding : 5px;
border : 5 px;
Il limite del margine si chiama outer edge o margin edge; il limite che segna la fine del bordo il
border edge; il limite dove cessa l'effetto del padding il padding edge, e finalmente abbiamo l'inner
edge o content edge, che circonda immediatamente il contenuto. Per ciascuno si ha un top edge,
bottom edge, right edge, left edge.
I valori possono essere dati in percentuale, in pixel o settati come "auto".
E' possibile dare un valore negativo ai margini: questo vuol dire che gli altri contenuti web
"entreranno" nel box invece di esserne distanziati (con il margine positivo)
Consideriamo ad esempio il seguente codice:
<div id="parent" style="margin-left:auto;margin-right:auto;textalign:center;border:1px solid black;width:400px;height:50px;lineheight:auto;vertical-align:middle;padding:5px;">
<div id="child" style="border:1px solid red;margin-left:auto;marginright:auto;margin-bottom:-10px;height:30px;">
</div>
Questa una linea di testo!
</div>
Esso genera la seguente immagine nella pagina web: il box nero delimita il div "parent", mentre il
box rosso delimita il div "child", che ha un margine negativo di -10 pixels: si vede chiaramente che
in tal caso la linea di testo "invade" lo spazio dell'elemento.
Le propriet di larghezza del bordo per i vari lati sono espresse da border-top-width, border-bottomwidth, border-left-width, border-right-width, che, anzich in pixels o percentuale, possono essere
settati con i valori predefiniti thick, medium, thin.
Le propriet di colore sono espresse da border-top-color, border-bottom-color, border-left-color,
border-right-color.
Lo stile della linea del bordo viene settata normalmente a border : none, oppure a border : solid (a
cui si aggiunge il colore)
Passiamo ora ad illustrare una propriet importantissima di ogni elemento della pagina: position.
static : il valore di default; gli elementi vengono posizionati secondo l'ordine in cui appaiono
nel codice della pagina web, uno dopo l'altro, verticalmente:
relative : l'elemento viene posizionato relativamente alla sua posizione static, precisando l'offset
rispetto ad essa:
Il codice CSS corrispondente alla disposizione visualizzata sopra il seguente:
#box-1 {
width: 150px;
}
#box-2 {
width: 150px;
position: relative;
left: 10px;
top: 10px;
}
#box-3 {
width: 150px;
}
absolute : posiziona l'elemento rispetto al documento, con le istruzioni:

position: absolute;
right: 10px;
bottom: 10px;
fixed : posiziona l'elemento rispetto alla finestra. Questo vuol dire che lo scrolling non sposta
l'elemento, come invece fa nel caso di position absolute:
position: fixed;
top: 0px;
Qualsiasi contenuto della pagina, secondo le specifiche CSS, racchiuso in un rettangolo chiamato
CSS box. Nel caso di block-elements come <div> l'elemento stesso a formare il rettangolo,
chiamato block box. Ma nel caso di un inline element e contiene un testo lungo, richiede pi
rettangoli per essere mostrato. Questi rettangoli sono chiamati anonymous boxes. Si vede cos che i
contenuti di un elemento possono consistere di un solo rettangolo o di rettangoli multipli. E' possibile
acquisire tutti questi rettangoli con la funzione element.getClientRects(), mentre il metodo
element.getBoundingClientRect() restituisce un unico elemento, che il pi piccolo rettangolo che
contiene tutti quelli contenuti in element.getClientRects().
Come centrare orizzontalmente e verticalmente un elemento nella pagina web

back to Index
Per la terminologia che sar utilizzata (block element e inline element) si veda il paragrafo sugli
elementi della pagina web. Sinteticamente si pu dire che un block element un riquadro che pu
contenere altri riquadri o linee di testo, mentre un inline element un elemento che una linea di
testo o pu essere inserito entro una linea di testo senza produrre un ritorno a capo.
Come regola generale, si pu porre un block element o un inline element all'interno di un altro blockelement e un inline element all'interno di un altro inline element, ma non un block element entro un
inline element.
Il primo metodo per centrare orizzontalmente si impiega quando un elemento inline (da centrare)
all'interno di un block-element come <p> o <div>. Si consideri il seguente codice:
<div align="center">
Hello World!
</div>
o, in alternativa, ricorrendo alle propriet di stile:

<div style="text-align:center">
Hello World!
</div>
Esso centrer orizzontalmente il testo "Hello World!" nella pagina. Ma consideriamo il seguente
codice:
<div style="text-align:center; width:300px;">
Hello World!
</div>
In questo caso il testo non sar centrato, perch l'elemento <div>, che prima occupava tutta la
larghezza della pagina, ora largo solo 300 pixel e per default viene posizionato a sinistra. Per
centrare l'elemento inline (il testo) occorre in questo caso prima centrare il box-element (il tag div),
come viene mostrato qui di seguito.
Il secondo metodo per centrare orizzontalmente si pu impiegare per posizionare nella pagina un
block-element come:
<div id="MyDiv" class="MyDivClass">
Questo il testo da centrare
</div>
sufficiente, nel foglio di stile, settare ad "auto" sia margin-left che margin-right: il browser capir
automaticamente di dover centrare orizzontalmente:
.MyDivClass {
margin-left: auto;
margin-right: auto;
}
</style>
Se si tratta di un inline element un metodo quello di agire sull'elemento-genitore (parent element)

e settare la propriet align:
<div id="MyDiv" align="center">
<p>Questo il testo da centrare</p>
</div>
Centrare invece l'elemento verticalmente molto pi complicato. In particolare l'istruzione:

vertical-align: middle;
Ma valign agisce solo su celle di tabella, mentre vertical-align agisce solo su celle di tabella e su
certi elementi inline. I suoi valori hanno senso rispetto ad un elemento-parent inline.
Ma sfortunatamente vertical-align non si applica a block-level elements, come un paragrafo entro
un <div>, che il caso tipico in cui si ha bisogno di centrare verticalmente.
Il primo metodo per centrare verticalmente si pu impiegare quando entro il <div> esiste una sola
linea di testo. Si pu settare la propriet css line-height ad un valore superiore a quello reso
necessario dal font. Questo spazio aggiuntivo sar ripartito equamente al disopra e al disotto del
testo, che ne risulter centrato verticalmente. Al limite si pu settare l'altezza della linea ad un valore
pari a quello dell'elemento <div> che lo contiene, ma questo non necessario. Ecco un codice tipico:
html:
<div id="parent">
<div id="child">Content here</div>
</div>
css:
#child {line-height: 200px;}
Come gi detto, questo codice non funziona se ci sono pi linee di testo.

Il secondo metodo per centrare verticalmente non altro che una applicazione del primo metodo
agli elementi <img> che contengono una immagine.
html:
div id="parent">
<img src="image.png" alt="" />
</div>
css:
#parent {
line-height: 200px;
}
#parent img {
}
Il terzo metodo per centrare verticalmente consiste nel settare mediante css il <div> genitore come
tabella e l'elemento-figlio come cella di tabella. In tal modo possiamo utilizzare l'istruzione verticalalign: middle ed essa funzioner.
html:
<div id="parent">
</div>
css:
#parent {display: table}
#child {
display: table-cell;
}
Il quarto metodo per centrare verticalmente ricorre al posizionamento assoluto dell'elemento-figlio

(mentre l'elemento-genitore ha posizionamento relativo). Esso funziona per block-elements
all'interno di un altro block-element.
html:
<div id="parent">
<div id="child"></div>
</div>
css:
#parent {position: relative}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Il quinto metodo per centrare verticalmente impiega anch'esso il posizionamento relativo

dell'elemento-genitore e il posizionamento assoluto dell'elemento-figlio. In questo caso noterete che
i valori del posizionamento assoluto sono "0". Ma quando il browser incontra l'istruzione margin :
auto, che si riferisce ai 4 margini, forzato a distribuirli uniformemente, a destra/sinistra e in
alto/basso, centrando l'elemento-figlio.
html:
div id="parent">
</div>
css:
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
Il sesto metodo per centrare verticalmente consiste nello stabilire i valori del padding (bottom, top,
left, right) sia per l'elemento-genitore che per l'elemento-figlio. Questo centrer il contenuto
dell'elemento-figlio e l'elemento-figlio all'interno dell'elemento genitore.
html:
<div id="parent">
</div>
css:
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
I valori di larghezza e altezza dei block-elements sono, nel codice sottostante, non dichiarati. Se si
stabilisce un valore per i box occorre fare calcoli pi accurati. Per esempio, se l'altezza del genitore
400 px e del figlio 100 px noi dobbiamo settare sia padding-top che padding-bottom ad un valore
di 150, perch 150 + 150 + 100 = 400.
Invece di operare sul padding si possono settare margini eguali per l'elemento figlio.
Il settimo metodo per centrare verticalmente richiede un <div> vuoto che viene posizionato col
metodo del floating, che normalmente viene usato per le immagini.
Con questa propriet possibile rimuovere un elemento dal normale flusso del documento e
spostarlo su uno dei lati (destro o sinistro) del suo elemento contenitore. Il contenuto che circonda
lelemento scorrer intorno ad esso sul lato opposto rispetto a quello indicato come valore di float
Ad esempio, con l'istruzione: float : right, l'immagine sar posizionata nello stesso contenitore allo
stesso livello del testo, ma a destra. Pi floating elements possono essere disposti uno accanto
all'altro con l'istruzione: float : left.
Posizioniamo il floating div a sinistra o a destra e gli diamo un'altezza del 50% del genitore. Il testo
viene posto da css al disotto del floating div. Il margin-bottom negativo serve a creare un vuoto sotto
il floating element, dove il testo pu fluire (altrimenti il testo verr spinto a destra del floating
element).
html:
<div id="parent">
<div id="floater"></div>
</div>
css:
#parent {height: 250px;}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}
Una compagna quasi inseparabile della propriet float la propriet clear che, se applicata ad un
elemento successivo ad uno reso float, impedisce che questo subisca il float. Lorigine di tale
propriet questa: visto che il float sposta un elemento dal flusso normale del documento, possibile
che esso venga a trovarsi in posizioni non desiderate, magari al fianco di altri elementi che vogliamo
invece tenere separati. clear risolve questo problema. Nell'esempio sopra riportato, l'istruzione
clear : both, impedisce che il floating si trasmetta sia da destra che da sinistra.
Come si crea e si configura una tabella con i fogli di stile

back to Index
Ecco la struttura essenziale di una tabella con due righe e due colonne:
<table>
<tr>
<td>
Questa
</td>
<td>
Questa
</td>
</tr>
<tr>
<td>
Questa
</td>
<td>
Questa
</td>
</tr>
</table>
la cella della prima colonna, prima riga

la cella della seconda colonna, prima riga
la cella della prima colonna, seconda riga

la cella della seconda colonna, seconda riga
I tag <td> rappresentano le celle della tabella, e il testo va inserito al loro interno.
Non si pu scrivere direttamente all'interno di un tag <tr>; occorre sempre inserirvi un tag <td> in
cui scrivere. In altre parole, non funziona un codice come:
<table>
<tr>
Questo non funziona
</tr>
</table>
mentre funziona un codice come:

<table>
<tr>
<td>
Questo funziona
</td>
</tr>
</table>
All'interno di un tag <td> pu essere inserita un'altra tabella. Attenzione: non si pu semplicemente
creare un'altra riga e inserire la tabella direttamente nella riga:
...
<tr>
<table>
...
</table>
</tr>
...
Occorre sempre inserire la sotto-tabella in un elemento <td> della tabella principale:

<table>
<tr>
<td>
<table>
...
</table>
</td>
</tr>
</table>
In altre parole, un codice come il seguente, che inserisce la tabella direttamente in una nuova riga,
non funziona:
<table>
<tr>
<table>
...
</table>
</tr>
</table>
A meno che non si voglia configurare diversamente ogni singola cella, per la loro configurazione
(margini, ecc.) si impone l'uso di un foglio di stile. Il seguente foglio riquadra ogni cella con un
margine in nero (esistono margini separati per la tabella e le celle: settare un margine per la tabella
non equivale a settarlo per le celle):
css
.TableCell
{
border : 1px solid black
}
</style>
html
<td class="TableCell"> ... </td>
Il valore "1px" indica lo spessore del bordo in pixel.

Il valore "solid" indica che il bordo una linea continua.
Il valore "black" indica il colore. Per i codici dei principali colori si pu consultare la pagina internet
http://www.w3schools.com/html/html_colornames.asp.
In alternativa, si dovrebbe introdurre in ciascun tag <td> una dichiarazione di stile del tipo:
<td style="border : 1px solid black;">
Quando i settaggi del foglio di stile diventano numerosi, questo sistema risulta assai scomodo,
perch le stringhe di stile diventano eccessivamente lunghe, ed preferibile inserire nel tag solo il
richiamo ad un foglio di stile.
Chi scrive consiglia, in fase di creazione di una tabella, di inserire sempre margini visibili, perch
aiuta notevolmente a capire dove siano situate le celle e gli effetti dei vari comandi di centraggio
ecc. (Si tenga presente che possibile inserire un bordo alle tabelle e alle celle ma non alle righe).
Come si centra orizzontalmente una tabella? E' sufficiente inserire la propriet align="center":
<table align="center">
Ecco ora la struttura della tabella arricchita con i fogli di stile:

css:
.Table {
border : 1px solid red;
padding : 10px;
border-collapse : separate;
border-spacing : 10px;
}
.TableCell {
padding : 10px;
}
</style>
html:
<table class="Table" align="center">
<tr>
<td class="TableCell" style="border-color:blue;">
Questa la cella della prima colonna, prima riga
</td>
<td class="TableCell">
Questa la cella della seconda colonna, prima riga
</td>
</tr>
<tr>
Questa la cella della prima colonna, seconda riga
</td>
Questa la cella della seconda colonna, seconda riga
</td>
</tr>
<tr>
<td class="TableCell" colspan="2">
<table align="center" style="border:1px solid red;padding:10px;">
<tr>
Questa la cella della tabella contenuta nella terza riga

</td>
</tr>
</table>
</td>
</tr>
</table>
Ed ecco come appare la tabella nella pagina (i bordi delle tabelle sono in rosso, mentre i bordi delle
celle sono in nero, tranne quelli della prima, che sono in blu):
Analizziamo il foglio di stile della tabella pi esterna:

.Table {
border : 1px solid red;
padding : 10px;
border-collapse : separate;
border-spacing : 10px;
}
padding : 10px (stabilisce la distanza tra i margini della tabella e i margini delle celle)
border-spacing : 10px (stabilisce la distanza intorno a ciascuna cella) (l'attributo
"cellspacing" non pi supportato da HTML5)
border-collapse : separate (stabilisce che i bordi della tabella e delle celle appariranno
distinti; va sempre settata come "separate" perch la propriet "border-spacing" funzioni)
Si noti come la distanza del bordo delle celle dal bordo della tabella pi esterna doppia rispetto
alla distanza interna tra i bordi delle celle. Questo perch il valore di "padding" si somma a quello
di "border-spacing".
Si noti l'istruzione (evidenziata con lo stesso colore nel codice):
<td class="TableCell" colspan="2">
Il numero di celle delle righe successive identico a quello delle righe precedenti, quindi la sottotabella verrebbe inserita a sinistra (cella di sinistra della terza riga) e non sarebbe centrabile. Per
centrare la sotto-tabella occorre unificare le due righe settando la propriet "colspan" in modo che
la cella si estenda per due colonne.
Analizziamo il foglio di stile delle singole celle:
.TableCell {
padding : 10px;
}
text-align : center (centra il testo all'interno della cella)

padding : 10px (stabilisce una distanza di 10 pixel tutto intorno al testo, rispetto ai margini
della cella: a destra, sinistra, in alto e in basso)
Si noti che sia nel caso della tabella che nel caso della cella, la propriet "padding" pu essere
specificata rispetto ad un singolo lato: "padding-left", "padding-right", "padding-top",
"padding-bottom".
Anche la propriet "border-spacing" della tabella pu essere settata orizzontalmente e
verticalmente inserendo due valori:
border-spacing : 10px 20px;
Prendiamo in esame ora il modo in cui la tabella esterna stata centrata orizzontalmente. Questo
stato fatto inserendo " align = 'center' " entro il tag <table>:
<table class="Table" align="center">
ma questo metodo ufficialmente sconsigliato (in gergo, "deprecated") a favore dell'uso dei fogli di
stile (CSS). La tabella si pu centrare orizzontalmente aggiungendo al foglio di stile le istruzioni:
margin-left : auto;
margin-right : auto;
che fanno capire al browser che lo spazio a destra e a sinistra deve essere identico.
Per operare entro una sola cella una variazione rispetto allo stile assegnato tramite CSS con una
dichiarazione di classe sufficiente inserirvi una dichiarazione di stile del tipo:
<td class="TableCell" style="border-color:blue;">
con cui abbiamo colorato di blu il bordo della prima cella. La dichiarazione style="" prevale su
quella contenuta nel foglio CSS associato all'elemento tramite la dichiarazione
class="TableCell".
Esistono anzi attributi che non possono essere inseriti in un CSS e necessitano di essere inseriti
direttamente nel tag. Questo il caso ad esempio degli attributi:
align = "center"
colspan = "2"
che non possono essere inseriti in un CSS come

align : center;
colspan : 2;
Riprendiamo ora in esame l'attributo "colspan" e il suo analogo per le righe: "rowspan".
L'attributo "colspan" utilizzato per raggruppare due celle di colonne adiacenti. Si supponga di
avere una tabella composta da due colonne e tre righe. Il suo aspetto normale sarebbe:
Applicando l'attributo "colspan", invece, potremmo ottenere una struttura del genere:
L'attributo "rowspan" identico al precedente con la differenza che il raggruppamento delle celle
non avviene in orizzontale (per colonne) ma in verticale (per righe). Segue un esempio:
Possono sorgere problemi con l'uso ad esempio di "colspan" quando in un foglio di stile stato
settata la larghezza delle celle ad un valore definito:
width : 350px
L'effetto che ne risulta il seguente:
Come si vede, ora la tabella nella terza riga non occupa l'intera larghezza della riga, come vorremmo,
perch, anche se le celle della terza riga sono state ridotte ad una sola cella, questa avr comunque
la stessa larghezza delle altre: 350px, che rappresenta solo met della larghezza della riga. Per
rimediare, si pu inserire una variazione di stile nel tag della cella che occupa due colonne,
stabilendo una larghezza doppia (700px):
<td class="TableCell" colspan="2" style="width:700px;">
Una soluzione pi elegante sarebbe quella di inserire nei CSS una variazione dello stile
"TableCell" limitatamente alle celle con l'attributo " colspan='2' ":
.TableCell[colspan="2"] {
width: 700px;
}
Si noti che, in alternativa a nomi di vostra creazione per gli stili di cella, c' un nome standard ("td")
che pu essere utilizzato:
td {
padding : 10px;
}
Ma gli attributi si applicherebbero a tutte le celle di tutte le tabelle della pagina web. In alternativa,
come abbiamo fatto noi, si pu utilizzare un nome di nostra creazione come ".TableCell" per le
celle di ciascuna tabella, oppure utilizzare un selettore, come abbiamo visto fare sopra con
"colspan":
td[colspan="2"] {
width: 700px;
}
I malfunzionamenti pi gravi di Explorer di cui il programmatore javascript dovrebbe

essere a conoscenza
back to Index
Tutte le maggiori applicazioni web, da Yahoo a Google a Facebook ad EBay utilizzano

massicciamentte, oltre che il linguaggio html, anche css e javascript, nonch Ajax e PhotoShop.
Microsoft sempre stata accusata di scarsa attenzione al rispetto degli standard, e lo sviluppo con
Internet Explorer 5 e 6 si rivelato in passato decisamente problematico. Con l'uscita delle versioni
7, 8, 9 le cose sono migliorate, ma ancora oggi siamo lontani da una piena compatibilit e anzi,
specifiche CSS ormai molto datate continuano a non essere supportate correttamente nei browser di
casa Microsoft.
Quanto ai problemi di compatibilit con le vecchie versioni di Explorer, ormai si pu dire che essi
sono stati risolti nel senso di un unanime rigetto di tali piattaforme. Ormai tutti gli sviluppatori, dai
programmatori indipendenti alle grandi software houses, hanno abbandonato il supporto alle
versioni di Internet Explorer (IE) anteriori alla 9, per numerose ragioni: presenza di bachi, problemi
di sicurezza, incompleto supporto alle specifiche HTML e javascript, caratteristiche custom non
utilizzabili con gli altri browser, e chi pi ne ha pi ne metta.
Purtroppo, le vecchie versioni di Explorer sono ancora relativamente diffuse; ma siete comunque
caldamente sconsigliati dal provare a far funzionare le vostre pagine web con tali versioni. L'unica
cosa da fare far apparire un messaggio che dichiara che il vostro programma non supportato dalla
versione di Explorer presente sul browser, perch anteriore alla 9, e stabilire una istruzione
condizionale che disattiva automaticamente il funzionamento delle routine critiche del vostro sito,
mantenendo solo quelle basilari. Ad esempio, il sito dello scrivente blocca l'esecuzione del codice
delle ToolTips per timore che possa provocare blocchi o apparizione di fastidiosi messaggi di errore.
L'utilizzo di ajax con Explorer presenta alcuni problemi che illustreremo qui di seguito.
Le versioni precedenti a Explorer 9 non hanno un oggetto XMLHttpRequest nativo incorporato
nel modello javascript di documento, quindi necessario aggiungere all'inizio della propria routine
ajax un codice per testare se un tale oggetto esista, e in caso contrario ricorrere al vecchio codice
Microsoft ActiveX per crearlo:
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
Il codice Ajax per fare il download dal server di documenti XML non funziona correttamente con
Explorer, persino con le versioni pi aggiornate. Consideriamo un codice come il seguente:
<script language = "javascript">
XMLHttpRequestObject.open("GET", "colors.xml");
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200)
{
var xmlDocument=XMLHttpRequestObject.responseXML;
var colors = xmlDocument.getElementsByTagName("color");
alert(colors.length);
}
}
XMLHttpRequestObject.send(null);
}
}
</script>
Questo codice, che funziona perfettamente con Chrome e Firefox, generando un alert box che indica
il numero dei tag <color> contenuti nel file colors.xml con Explorer non funziona, per
problemi di cache. Internet Explorer l'unico browser che fa una copia cache automatica di tutti i
download effettuati con ajax. Il problema sorge per il fatto che, quando con GET si va a caricare il
file colors.xml, Explorer preleva immancabilmente dalla memoria del computer client i dati
dell'ultimo download corrispondente alla stessa URL, senza collegarsi al server per acquisire dati
aggiornati. Questo provoca immancabilmente malfunzionamenti, e nell'alert compare come numero
dei nodi <color> il numero "0", che vuol dire che Explorer considera i dati in formato errato e non
li legge.
Per evitare questo inconveniente sufficiente rendere la URL di ogni chiamata diversa dall'altra
aggiungendo ad esempio come parametro una stringa con il tempo del momento in cui viene fatta la
chiamata (si veda la riga rossa nel codice di cui sopra):
XMLHttpRequestObject.open("GET", "colors.xml?timestamp=" + new
Date().getTime());
{
{
}
}
}
}
</script>
Persino jQuery non funziona se la cache non disabilitata. Il codice per disabilitarla il seguente:
$.ajax(
cache: false,
url: 'http://myurl',
data: {}
);
Oppure si pu disabilitarla una volta per tutte per le chiamate ajax:

$.ajaxSetup({ cache: false });
Altri sistemi che si possono provare consistono nella disabilitazione del controllo del tipo di dati che
viene fatta da Explorer tramite l'istruzione:
XMLHttpRequestObject.overrideMimeType("text/xml");
{
{
}
}
}
}
</script>
Si pu anche indicare ad Explorer che si sta scaricando dati in formato xml:

XMLHttpRequestObject.setRequestHeader('Content-Type', 'text/xml');
{
{
}
}
}
}
</script>
Con Explorer non funziona sempre l'istruzione jQuery:

$("#mydiv").load("student.html");
e anche in questo caso va disattivata la copia cache automatica (vedi sopra)
Come rilevare le versioni di Explorer e in particolare quelle anteriori a Explorer 9

back to Index
Ecco un semplice codice consigliato nel sito Microsoft per stabilire se il browser Explorer ed
eventualmente la versione di Explorer:
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
var rv = -1; // Return value assumes failure.
if (navigator.appName == 'Microsoft Internet Explorer')
{
var ua = navigator.userAgent;
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null)
rv = parseFloat( RegExp.$1 );
}
return rv;
}
function checkVersion()
{
var msg = "You're not using Internet Explorer.";
var ver = getInternetExplorerVersion();
if ( ver > -1 )
{
if ( ver >= 8.0 )
msg = "You're using a recent copy of Internet Explorer."
else
msg = "You should upgrade your copy of Internet Explorer.";
}
alert( msg );
}
L'unico problema che questo codice non funziona: infatti, la stringa navigator.appName,
anche se il browser Explorer, (quasi) invariabilmente "Netscape". Infatti le specifiche del
linguaggio HTML5 consentono a qualsiasi browser di dichiarsi "Netscape", ufficialmente per
ragioni di compatibilit.
La verit invece un'altra: sempre pi programmatori utilizzavano il codice di rilevazione del tipo
e versione del browser per escludere quelli che ritenevano malfunzionanti con il proprio software. I
creatori di browser si resero rapidamente conto che se ingenuamente e onestamente dichiaravano il
nome e la versione del loro browser nella stringa userAgent, esso rischiava di essere escluso dai
programmatori. In particolare Microsoft, il cui browser era all'epoca pieno di caratteristiche
customizzate e non supportava pienamente gli standard HTML e javascript era il fornitore che aveva
pi da temere al riguardo. Ad esempio la stringa userAgent di Explorer 5 la
seguente: "Mozilla/4.0 (compatible; MSIE 5.01; Windows NT)". I browser diversi
da Explorer, temendo al contrario di essere discriminati, riportavano stringhe userAgent
indistinguibili da quelle di Explorer. Il risultato pratico di tutto questo che le stringhe userAgent
sono inservibili e prive di significato.
I programmatori pi esperti utilizzano la feature detection, cio scrivono un codice che controlla
specificamente se l'istruzione o la caratteristica che a loro interessa sia supportata dal browser, ma
le istruzioni sono lunghe, complesse, numerose, e non sono alla portata del programmatore alle
prime armi. Dato che ormai, come gi detto, quasi tutti gli sviluppatori hanno deciso di abbandonare
il supporto alle versioni di Explorer anteriori alla 9, sar per la maggior parte delle necessit
sufficiente sincerarsi che la versione del proprio browser non sia anteriore alla 9. Ecco un semplice
codice per rilevare se la versione del browser che riceve la pagina precedente a IE 9:
function CheckExplorerVersion()
{
var div = document.createElement("div");
div.innerHTML = "";
var isIeLessThan9 = (div.getElementsByTagName("i").length == 1);
if (isIeLessThan9) {return false;}
else {return true;}
}
Ecco una versione pi sofisticata, in grado di rilevare tutte le versioni fino alla 9:
function CheckExplorerVersion()
{
var undef;
var v = 3;
var div = document.createElement('div');
while
(
div.innerHTML = '
dove HTML pu essere qualsiasi blocco di codice html, comprensivo di tag e di testo. Le principali
espressioni standard per testare le versioni di Explorer sono illustrate dai seguenti esempi:
[if
[if
[if
[if
[if
IE] ("se il browser Explorer")

!IE] ("se il browser non Explorer")
IE 7] ("se il browser Explorer 7")
lt IE 5.5] ("se il browser una versione di Explorer inferiore a 5.5") ("lt" = "less than")
lte IE 6] ("se il browser una versione di Explorer inferiore o uguale a 6 ") ("lte" = "less
than or equal")
[if gt IE 5] ("se il browser una versione di Explorer superiore a 5 ") ("gt" = "greater than")
[if gte IE 7] ("se il browser una versione di Explorer superiore o eguale a 5") ("gte" = "greater
than or equal")
Il codice non fa altro che creare in memoria (senza inserirlo nel documento) un tag <div> che
contiene un commento condizionale che crea un elemento <i></i> vuoto (se contenesse qualcosa
i caratteri potrebbero essere visualizzati con effetto antiestetico), e poi testare l'esistenza nel tag
<div> dell'elemento <i> mediante il codice:
div.getElementsByTagName('i')[0]
Nelle versioni anteriori alla 5 e successive alla 8 i commenti condizionali non funzionano, e quindi
l'espressione ha valore null, che l'istruzione while() trasforma in false.
Cos' javascript
back to Index
Javascript un linguaggio client-side, cio che viene eseguito dal computer di chi riceve i contenuti
web, e che pu essere inserito all'interno di una pagina web (normalmente nella sezione head) tra
due tag, con istruzioni separate da puntoevirgola, come ad esempio:
<script type="text/javascript">
prima istruzione;
seconda istruzione;
..................
ultima istruzione;
</script>
oppure entro un tag html, come ad esempio:

<p onclick="alert('Hello
messaggio</p>
World');">Clicca
qui
per
far
apparire
il
Un tag <script> pu contenere sia istruzioni separate, che vengono eseguite automaticamente al
caricamento della pagina web, che la definizione di funzioni, che vengono invece eseguite quando
richiamate:
alert("Hai aperto la pagina web");
function MyFunction()
{
document.write("La funzione stata richiamata");
}
</script>
La prima istruzione alert viene eseguita immediatamente: al caricamento appare il messaggio

"Hai aperto la pagina web", mentre la funzione MyFunction viene richiamata in seguito e scrive
una riga di testo nel documento.
Una funzione ha una struttura tipica:
function MyFunction(var1, var2, ...,
{
return(var1*var2*...*varN);
}
varN)
Possono esserle passati dei parametri che sono specificati nella parentesi che la segue o non avere
parametri (la parentesi deve comunque essere presente, anche se vuota)
Pu restituire un valore con l'istruzione return e/o compiere delle operazioni sul documento o far
apparire messaggi.
La struttura tipica di javascript il richiamo di una funzione al verificarsi di un evento, che consiste
principalmente in un evento di tastiera (onKeyDown, onKeyPress, onScrolling) o in un
evento di mouse (onMouseOver, onClick, onMouseOut) o in un evento riguardante l'apertura
o la chiusura del documento (onLoad, OnUnLoad). Al verificarsi dell'evento viene richiamata una
funzione.
Ecco un elenco degli eventi pi comunemente utilizzati:
Si verifica quando
una azione interrotta
un elemento perde la propriet focus
si verifica un cambiamento nel contenuto di un elemento, come ad es. un box
onchange
di testo
onclick
si cliccato su un elemento
ondblclick
si cliccato due volte su un elemento
stata eseguita una operazione drag-and-drop (un elemento stato trascinato
ondragdrop
nella pagina)
onerror
si verificato un errore javascript
onfocus
un elemento acquisisce la propriet focus
onkeydown
un tasto premuto
onkeyup
un tasto rilasciato dopo essere stato premuto
onload
viene caricata la pagina
onmousedown premuto un bottone del mouse
onmousemove il mouse spostato sulla pagina
onmouseout
il mouse esce da un elemento della pagina
Evento
onabort
onblur
onmouseover
onmouseup
onreset
onresize
onsubmit
onunload
onscrolling
il mouse entra nella zona di un elemento della pagina

rilasciato un bottone del mouse dopo essere stato premuto
viene cliccato il bottone di reset
vengono modificate le dimensioni o la posizione di un elemento della pagina
l'utente clicca un pulsante di tipo "submit"
la pagina scaricata
si effettuato lo scrolling della pagina
Il codice contenuto nella funzione o in genere in uno script pu accedere in lettura e in modifica al
contenuto e agli attributi interni (es. l'attributo href e l'attributo title di un tag <a>) di un tag e
ai fogli di stile tramite il modello DOM (Document Object Model: vedi pi avanti). Pu inoltre aprire
e leggere files, acquisire data e ora e altri dati riguardanti il sistema, pu fare apparire messaggi e
ricevere input tramite box di dialogo e di input. Inoltre, javascript implementa un set completo di
istruzioni per la lettura di documenti XML.
Ecco di seguito l'esempio di una pagina html in cui cliccando su un elemento si attiva una funzione
che dichiara il nome di quell'elemento.
<html>
<head>
function MyFunction(MyDiv)
{
alert("hai cliccato sul " + MyDiv.innerHTML);
}
</script>
</head>
<body>
<div onclick="MyFunction(this)">
BOX1
</div>
</br>
BOX2
</div>
</br>
BOX3
</div>
</body>
</html>
Alla funzione MyFunction viene inviato come argomento il parametro this, che un oggetto
corrispondente al div in cui inserita l'istruzione onclick. Questo oggetto consente l'accesso a
tutte le propriet del tag <div>, incluso il testo compreso al suo interno, tramite l'istruzione:
MyDiv.innerHTML
L'output nella finestra, cliccando su BOX1 il seguente:
Aprite la pagina Experiments_1.htm , per osservare altre cose che possono fare le routines javascript
e visualizzatene il codice.
Cos' jQuery
back to Index
Javascript un linguaggio potente e molto migliorato col tempo in termini di performance e di

affidabilit, ma il codice risulta piuttosto ingombrante, anche perch col tempo funzionalit non
essenziali della pagina, come effetti grafici e animazione, che prima erano affidate a tecnologie
differenti come immagini animate o flash, ora sono gestite con javascript. Inoltre, l'accesso alla
struttura DOM (Document Object Model) del documento al fine di manipolare gli elementi della
pagina avviene attraverso un insieme di API (Application Programming Interface), che sono oggetti
e metodi di interfaccia, il cui uso non affatto banale. La natura fortemente strutturata e gerarchita
dei documenti HTML e XML si riflette sulla struttura del DOM, la cui interrogazione e modifica
richiede verbose operazioni di iterazione e ricorsione. Il necessario traversamento dell'albero che
rappresenta gli oggetti del documento pu quindi richiedere una quantit significativa di codice.
Javascript un linguaggio alquanto laborioso, con un debugging difficile, che non perdona il minimo
errore di sintassi (a differenza di HTML) e il minimo scambio di maiuscole e minuscole, e le cui
istruzioni sono a volte poco intuitive.
Si aggiunga che ormai diventato indispensabile al programmatore l'utilizzo di codice Ajax
(Asynchronous Javascript and XML): un mix di javascript, xml e php che risulta complicato e poco
gestibile se scritto in javascript puro.
Infine, il fatto che esistano pi browser e pi sistemi operativi rende necessario scrivere altro codice
ingombrante (e difficilmente alla portata di un programmatore alle prime armi) per assicurare un
minimo di compatibilit della propria pagina con i principali browser.
I programmatori, che in un primo tempo avevano sviluppato soluzioni javascript ciascuno

indipendentemente dall'altro, si resero ben presto conto della follia di costruire da soli un sito internet
partendo da zero, e sentirono sempre di pi la necessit di condividere le routine utilizzate.
Per ovviare a questi inconvenienti sono state rese disponibili in rete, gratuitamente o a pagamento,
delle librerie javascript, che racchiudono funzionalit studiate per superare queste limitazioni.
Una delle pi affermate appunto jQuery (http://jquery.com). L'home page del progetto
afferma che si tratta di "una libreria JavaScript veloce e concisa che semplifica il traversamento dei
documento HTML, la gestione degli eventi, l'animazione e le interazioni Ajax per uno sviluppo web
rapido". Al difuori delle parole dei suoi stessi autori, jQuery comunemente considerato uno dei
protagonisti della rinascita della tecnologia javascript soprattutto per via di tre caratteristiche
fondamentali: la buona capacit di nascondere le peculiarit dei browser offrendo un'interfaccia e
funzionalit omogenee; la possibilit di accedere a elementi della struttura DOM attraverso selettori
CSS e la semplicit d'uso. Con jQuery possibile utilizzare tecnologie all'ultimo grido, come Ajax
e CSS, anche su browser che non le supportano direttamente.
Sicuramente, frequentando i blog di argomento tecnico, avrete sentito decantare le potenzialit
strepitose di altre librerie javascript, anche in confronto a jQuery. Come scegliere la libreria giusta?
Quando si sceglie una libreria per integrare un linguaggio di programmazione, occorre considerarne
attentamente il grado di diffusione, perch librerie molto valide ma poco utilizzate finiscono ben
presto per non essere supportate dagli sviluppatori e costringono a riscrivere completamente il
codice per eliminarle. Da questo punto di vista, jQuery una libreria affermata sulla Rete da diversi
anni e vanta il fatto di essere utilizzata da molte organizzazioni di primaria importanza, come
Google, Dell, Bank of America, NBC, CBS, Netflix, Technorati, Mozilla.org, WordPress e Drupal,
per citare solo i riferimenti pi importanti indicati nell'home page del sito ufficiale della libreria.
Infine, jQuery estremamente leggera (la versione compatta richiede solo 32 Kb, corrispondenti
alla quantit di dati di una foto di media qualit).
E' possibile scaricare jQuery dal sito http://jquery.com. L'installazione molto facile e veloce
perch, a differenza di altre complicate librerie, si tratta di un unico file. Viene offerta una scelta di
versioni meno recenti e pi recenti, tutte perfettamente funzionanti. Ognuna di tali librerie viene resa
disponibile in due versioni: quella minifilizzata, da cui sono stati rimossi tutti gli spazi inutili e i
ritorni a capo, rendendola praticamente illeggibile ma molto compatta, e quella per lo sviluppo,
dotata di ampio commento, che occupa 247 Kb ed costituita da pi di 9400 righe di codice. Sono
inoltre disponibili i file migrate, che, scaricati insieme alle librerie pi recenti, risolvono tutti i
problemi di compatibilit con quelle meno recenti, evitando di dover riscrivere il codice ad ogni
aggiornamento.
Nel momento in cui scriviamo la versione pi recente la 1.11.2, (contenuta nel file jquery1.11.2.min.js) che viene fornita con un file di compatibilit (jquery-migrate1.2.1.js).
Per poter utilizzare jQuery all'interno della vostra pagina web sufficiente inserire nell'<head> del
documento i seguenti due script:
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-migrate-1.2.1.js"></script>
Un modo alternativo e ancora pi facile (senza bisogno di scaricare nulla) per includere la libreria
jQuery nelle proprie pagine HTML quello di utilizzare una delle copie gestite dai diversi Content
Delivery Network (CDN, network di distribuzione dei contenuti). Un CDN un sistema distribuito
di grande estenzione, costituito da un numero significativo di server ospitati presso pi data center
sulla Rete. Lo scopo di un CDN di fornire contenuto agli utenti finali in un contesto di alta
affidabilit e in modo performante. I CDN oggi rendono disponibili gran parte dei contenuti della
rete, come elementi grafici, script, file multimediali, applicazioni o anche dati in streaming (come
musica e video). Su internet esiste un certo numero di CDN commerciali, utilizzati da grandi aziende
per la distribuzione di risorse critiche. jQuery ospitato su diversi CDN, che offrono accesso
pubblico e gratuito alla libreria. Ecco tre script alternativi, che fanno riferimento a tre CDN diversi,
ciascuno dei quali pu essere inserito nel documento risparmiandovi persino la fatica di scaricare il
file sul server del vostro sito:
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"><
/script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery1.11.2.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
Convenienza di jQuery rispetto a javascript puro

JQuery rende pi robuste istruzioni come:
var target = document.getElementById("targetDiv");
target.innerHTML = "<p>Hello World</p>";
che non funzionano con diverse versioni di explorer, sostituendole con:

$("#targetDiv").html("<p>Hello World</p>");
che funziona con tutti i browser.

jQuery semplifica istruzioni verbose come:
var target = document.getElementById( "targetDiv" );
var newElement = document.createElement( "div" );
target.parentNode.insertBefore( newElement, target.nextSibling );
sostituendole con istruzioni pi semplici come:

$("#targetDiv").after($("<div></div>"));
Tanto per fare un esempio del grado di semplicit che si pu ottenere con jQuery, ecco qui due
blocchi di codice Ajax, uno in javascript puro, l'altro in jQuery, che fanno esattamente la medesima
cosa (aprono in modo asincrono il file MyScript.php e mostrano il testo ricevuto entro il
documento HTML)
codice javascript
{
}
{
}
function getData()
{
if(XMLHttpRequestObject)
{
var obj = document.getElementById("targetDiv");
XMLHttpRequestObject.open("GET", "MyScript.php");
{
{
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
}
}
codice jQuery
$.get("MyScript.php",function(Response)
{
document.getElementById("targetDiv")= Response;
},"text");
Alcune difficolt e cautele nell'uso di jQuery

Non assolutamente facile scoprire quale parte del vecchio codice sia incompatibile con le
nuove versioni di jQuery, perch, duole dirlo, le indicazioni delle novit e delle incompatibilit
sono a dir poco lacunose e difficili da trovare. Lo scrivente si trovato a dover utilizzare un file di
compatibilit accanto a una delle ultime versioni, che altrimenti non funzionava, malgrado abbia
tentato con tutti i mezzi di scoprire quali erano le istruzioni da riscrivere:
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-migrate-1.2.1.js"></script>
Sebbene venga unanimemente raccomandato di inserire il codice jQuery entro lo spazio di

esecuzione condizionale della funzione $(document).ready(), dato da:
$(document).ready(function(){...});
certe routine non funzionano se poste in tale spazio, mentre funzionano se poste al difuori.
Purtroppo, impossibile sapere a priori quando necessario mettere del codice entro o fuori tale
spazio condizionale.
Prendete ad esempio la seguente pagina internet:
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
$(document).ready(function(){
alert(document.getElementById("MyIframe").childNodes.length);
});
</script>
</head>
<body>
<iframe id="MyIframe" style="position:absolute;left:30%;top:35%;"
src="http://www.w3schools.com"></iframe>
</body>
</html>
Sembrerebbe logico porre l'istruzione:

entro la funzione $(document).ready(), per la ragione, raccomandata dal sito jQuery, che il
codice potrebbe altrimenti essere eseguito prima che tutti gli elementi della pagina siano stati
caricati, e quindi non potrebbe leggere entro "MyIframe".
Ma in realt accade esattamente il contrario! Posto entro $(document).ready() l'istruzione non

funziona, mentre se posta all'esterno funziona.
Cos' il DOM che viene utilizzato da javascript?

back to Index
Il DOM (Document Object Model) un modo di rappresentare un documento e i suoi elementi

tramite "oggetti" che possiedono attributi e propriet di lettura/scrittura, metodi e oggetti-figli
(parent). il DOM uninterfaccia, o meglio una API (Application Programming Interface) ideata
dal consorzio W3C, che permette di accedere agli elementi di una pagina.
Chi ha gi lavorato con Visual Basic for Application Microsoft (VBA) conosce gi il tipico codice
per esprimere un oggetto. Ecco un tipico oggetto VBA:
ActiveDocument.Range.Paragraphs(1)
l'oggetto che si riferisce al primo paragrafo di una selezione in un documento Word. I punti di
separazione introducono tipicamente una propriet, un metodo o un oggetto-parent (figlio).
Ecco un tipico oggetto DOM javascript, che consente di accedere al valore del rientro destro nel
corpo del documento:
document.body.style.paddingLeft
Consideriamo il seguente tag HTML:

<a id="MyAnchor" name="MyLink" href="MyFile.htm">Clicca qui per aprire il
file</a>
Ecco l'oggetto che permette di manipolare il testo "Clicca qui per aprire il file" incluso nel tag:
document.getElementById("MyAnchor").innerHTML
Ecco l'oggetto che permette di accedere agli attributi "name" e "href" contenuti nel tag:
document.getElementById("MyAnchor").attr("name").value
document.getElementById("MyAnchor").attr("href").value
Ecco il metodo che consente di scrivere nell'oggetto document

document.write("Hello World")
Acquisire e manipolare gli elementi di una pagina tramite javascript e jQuery

back to Index
In javascript si chiamano "selettori" le espressioni che permettono di ottenere un singolo elemento

o un gruppo omogeneo di elementi del DOM.
Per selezionare tutti i tag <img> con class="class1" oppure class="class2":
$("img.class1, img.class3")
Per selezionare tutti i paragrafi con tag <p> all'interno dell'elemento con id="MyTag":
$(#MyTag p")
$(#MyTag).find(" p")
Per selezionare tutti i tag <input> del documento:
$("input")
Per selezionare tutti i tag con class="MyClass" del documento:
$(".MyClass")
Per selezionare i tag che hanno un certo valore dell'attributo "name" (o qualsiasi altro attributo)
$("[name=MyTagName]")
Per selezionare tutti i tag con la propriet di stile "hidden":
$(":hidden")
Per selezionare tutti i tag hidden del tag con id="MyTag":
$("#MyTag").find(":hidden")
Il metodo find() svolge una ricerca sui nodi contenuti in quello considerato. Accetta gli stessi
argomenti di $(). Se scriviamo .find("*") otteniamo tutti i discendenti di un elemento.
Consideriamo i seguenti elementi di una pagina HTML:
<style type="text/css">
.MyBoxClass{
width : 200px;
height : 25px;
background-color : white;
font-family : "Times New Roman";
color : red;
font-size : 100%;
vertical-align : center;
}
</style>
<a id="MyAnchor" name="MyLink" href="MyFile.htm">Clicca qui per aprire il
file</a>
<table>
<tr>
<td id="MyBox" class="MyBoxClass" title="Questo il mio box">
QUESTO E' IL MIO BOX
</td>
</tr>
</table>
<p>
SCRIVI NEL BOX SOTTOSTANTE </br>
<input id="MyTextBox" type="text" >
</p>
<div id="MyDiv">
</div>
Ecco, di seguito, una serie di modi in cui tali elementi possono essere manipolati.
Ottenere (javascript) il testo "Clicca qui per aprire il file" incluso nel tag <a>:
$("#MyAnchor").text()
Cambiare (javascript) il testo "Clicca qui per aprire il file" incluso nel tag <a>:
contenuto del tag";
Far sparire e riapparire il tag <a>:

$('#MyAnchor').hide();
"Questo
il
nuovo
$('#MyAnchor').show();
$('#MyAnchor').attr("visibility","hidden");
$('#MyAnchor').attr("visibility","displayed");
L'istruzione "show" funziona anche se il tag <a> stato dichiarato come invisibile, con l'istruzione
di stile:
<a style="display:none;">Clicca qui per aprire il file</a>
Questo codice ha una interessante applicazione pratica: se si vuole creare un bottone che richiama
routine diverse in relazione a due situazioni diverse, invece di scrivere complicate istruzioni
condizionali si possono creare due bottoni identici, e far apparire quello che richiama la routine
adatta alla circostanza, facendo sparire quello che richiama la routine non adatta alla circostanza.
Modificare il colore del testo contenuto nel tag <a>:
document.getElementById("MyAnchor").style.color = "red";
Leggere (javascript) gli attributi "name" e "href" contenuti nel tag <a>:
document.getElementById("MyAnchor").attr("name").value
document.getElementById("MyAnchor").attr("href").value
Leggere (jQuery) gli attributi "name" e "href" contenuti nel tag:

$("#MyAnchor").attr("name")
$("#MyAnchor").attr("href")
Acquisire i dati presenti nel CSS di MyBox:

$("#MyBoxClass").css('height')
$(".MyBox").css('height')
(il risultato "25px")

Modificare il contenuto del tag <a> con jQuery:
$("#MyAnchor").html("Questa la nuova stringa inserita nel tag");
Cambiare il valore dell'attributo title del box MyBox con jQuery:

$("#MyBox").attr("title", "Questo sempre il mio box");
Leggere il valore dell'attributo title:

$("#MyBox").attr('title')
Leggere l'eventuale valore di un campo testo dell'oggetto (es. un box di informazioni):

$("#MyBox").text()
Cambiare l'impostazione di stile contenuta nel foglio CSS abbinato all'elemento con id="MyTag":
$("#MyBox").css({width:30});
Cancellare tutte le ricorrenze della stringa "px" nel campo che contiene il valore CSS dell'altezza
del Box con id="MyTag":
$("#MyBox").css('height').replace("px","");
Acquisire il contenuto di quanto stato scritto nel box di testo MyTextBox:

document.getElementById("MyTextBox").value
$("#MyTextBox").val()
$("MyTextBox").attr("value")
Acquisire la lunghezza della stringa che stata immessa in MyTextBox (ad es. per controllare se sia
stato correttamente digitato il numero di una carta di credito):
$('#MyInputBox').attr('value').length
Immettere del testo nel box MyTextBox

$('#MyTextBox').val("Hello World");
Non solo possibile, sia con javascript che con jQuery, immettere nella pagina una semplice stringa
di testo, ma anche altri tag, come paragrafi, e persino tabelle, dotati delle caratteristiche di stile
desiderate.
Ecco ad esempio, come far comparire in MyDiv un paragrafo con una riga di testo:
$('#MyDiv').html("<p style='font-size:150%;color:blue;font-weight:bold;'>"
+'ABRACADABRA'+"</p>");
oppure:
document.getElementById("MyDiv").innerHTML = "<p style='fontsize:150%;color:blue;font-weight:bold;'>" +'ABRACADABRA'+"</p>");
to be continued
Come si costruisce un oggetto javascript

back to Index
Un oggetto una entit javascript che pu essere dotata di propriet e metodi definiti dal
programmatore, mediante la dot notation. Ad es. possiamo avere la propriet MioGatto.nome, o
MioGatto.razza, il metodo MioGatto.apprezza().
Un primo modo di creare oggetti javascript di utilizzare il costruttore predefinito Object(), che
crea oggetti vuoti, ovvero privi di propriet e metodi. Le propriet degli oggetti costruiti con
Object() devono essere definite successivamente alla creazione.
Creiamo ad esempio un nuovo oggetto di nome mioCell, con 4 propriet:
var mioCell = new Object;
mioCell.marca = "LG";
mioCell.colore = "bianco";
mioCell.display = 16000colori";
mioCell.mms = "si";
mioCell.camera = "si";
Un secondo modo di creare oggetti tramite un costruttore personalizzato:

function Automobile(marca, modello, colore, cilindrata)
{
this.marca=marca;
this.modello=modello;
this.colore=colore;
this.cilindrata = cilindrata;
this.trazione;
this.carburante = 5;
}
Si notino le propriet "trazione" e "carburante": il valore di "trazione" verr assegnato in

seguito, all'istanza dell'oggetto:
var punto = new Automobile;
punto.trazione = "integrale";
Alla propriet "carburante" assegnato sin dall'inizio un valore di default che pu essere
cambiato una volta creata una istanza dell'oggetto.
che pu essere scritta/letta ma non necessita di inizializzazione al momento della creazione
dell'oggetto. Si noti la propriet "carburante", che viene inizializzata dal codice dell'oggetto.
Disponendo del costruttore, si pu creare una istanza del tipo di oggetto definito, che quanto stiamo
cercando:
var punto = new Automobile("Fiat", "Punto", "rosso", "1200");
Queste propriet possono essere modificate in modo molto semplice:

punto.colore = "argento";
utilizzando la dot notation.

Una volta che si istanziato un nuovo oggetto Automobile, si possono aggiungere altre propriet,
che non sono proprie della classe, ma solo di quell'oggetto:
punto.alimentazione = "gasolio";
Per costruire un metodo si ricorre alla definizione di una funzione. Sviluppando l'esempio della
classe "Automobile", definiamo :
function Automobile(marca, modello, colore, cilindrata)
{
this.marca = marca;
this.modello = modello;
this.colore = colore;
this.cilindrata = cilindrata;
this.trazione;
this.rifornimento = function(litri)
{
if(this.carburante + litri * 1 >=50)
{
this.carburante=50;
}
else
{
this.carburante = this.carburante + (litri*1);
}
operazione.value = this.carburante + " Litri";
}
this.pieno = function()
{
operazione.value = 50 + " Litri";
}
this.viaggia = function(km)
{
if (this.carburante - (km/10) >=0)
{
this.carburante = this.carburante - km/10;
}
else
{
this. carburante = 0;
}
operazione.value = this.carburante + "Litri";
}
}
Per vedere come funzionano i metodi, creiamo un nuovo oggetto "punto" corrispondente alla classe
"Automobile":
var punto = new Automobile("Fiat", "Punto", "rosso", 1200);
Inoltre, inseriamo una textbox in cui inserire il livello del serbatoio:

Litri serbatoio: <input type="text" id="operazione" size="3" value="5
Litri">
Il metodo Automobile.rifornimento (evidenziato in rosso) viene richiamato dal bottone:

<input type="button" value="Rifornisci"
onclick="punto.rifornimento(prompt('litri?',''))">
che fa apparire un prompt che chiede quanti litri di rifornimento sono stati aggiunti al serbatoio, vi
aggiunge la quantit di carburante gi presente nel serbatoio (che compare nel box di testo), e fa
apparire nel box di testo i litri totali immessi.
Il metodo Automobile.pieno (evidenziato in viola) viene richiamato dal bottone:
<input type="button" value="Rifornisci"
onclick="punto.rifornimento(prompt('litri?',''))">
che fa apparire un prompt che chiede quanti litri di rifornimento sono stati aggiunti al serbatoio, vi
aggiunge la quantit di carburante gi presente nel serbatoio (che compare nel box di testo), e fa
apparire nel box di testo i litri totali immessi.
<input type="button" value="Fai il pieno" onclick="punto.pieno()">
e si limita a visualizzare "50 Litri" nel box di testo.

Il metodo Automobile.viaggia (evidenziato in verde) viene richiamato dal bottone:
<input type="button" value="Viaggia" onclick="punto.viaggia(prompt('Km
percorsi',''))">
fa apparire un prompt che richiede il numero di kilometri percorsi e sottrae ai litri del serbatoio (nel
box di testo) quelli consumati in relazione ai kilometri percorsi.
Un oggetto pu essere definito e instanziato contestualmente tramite un codice come il seguente:
trapezio =
{
BaseMinore : 10;
BaseMaggiore : 20;
Altezza : 15;
area : function()
{
return (this.BaseMinore + this.BaseMaggiore) * this.Altezza / 2;
}
}
La propriet "prototype" di un oggetto un modo per riferirsi globalmente alle propriet e ai

metodi di quell'oggetto. Per capire a cosa serva la propriet "prototype", creiamo due oggetti
(costruttori). Creiamo dapprima l'oggetto "EssereVivente":
EssereVivente = function()
{
this.nome="";
this.cosaMangia="";
this.setCosaMangia = function(cibo)
{
this.cosaMangia=cibo;
}
}
Creiamo poi l'oggetto "Mammifero":

Mammifero = function()
{
this.razza="";
this.dataNascita="";
}
Come fare per far ereditare tutte le propriet e i metodi di "EssereVivente" a "Mammifero"?
Semplice: facendo riferimento al "prototype" di "Mammifero" e inserendovi le propriet e i
metodi di "EssereVivente":
Mammifero.prototype = new EssereVivente;
In tal modo ogni istanza dell'oggetto "Mammifero" erediter anche le propriet di

"EssereVivente".
Se si vuole inserire una singola propriet o metodo ad un oggetto si deve prima crearla:
function DisplayRazza()
{
alert("La razza di questo animale : " + this.razza);
}
Successivamente si inserisce il metodo DisplayRazza nell'oggetto "Mammifero":

Mammifero.prototype.DisplayRazza = DisplayRazza;
In questo modo tutte le istanze dell'oggetto mammifero create successivamente alla inclusione di
questo metodo, avranno la possibilit di utilizzarlo, ma non quelle create anteriormente.
Racchiudere un contenuto troppo grande per lo spazio assegnato nella pagina entro un
box con barre di scorrimento verticali e orizzontali
back to Index
Osservate questa pagina web:
essa corrisponde al seguente codice:

<html>
<head>
<style>
#myDIV {
border:1px solid black;
height: 250px;
width: 250px;
overflow: auto;
position:absolute;
top:20%;
left:35%;
}
#content {
height: 800px;
width: 2000px;
background-color: HoneyDew;
}
</style>
</head>
<body>
<div id="myDIV">
<div id="content">
Il contenuto dell'elemento
esterno</br>
esterno</br>
esterno</br>
esterno</br>
esterno</br>
interno eccede quello dell'elemento

Il contenuto
esterno</br>
Il contenuto
esterno</br>
Il contenuto
esterno</br>
Il contenuto
esterno</br>
Il contenuto
esterno</br>
Il contenuto
esterno</br>
Il contenuto
esterno</br>
Il contenuto
esterno</br>
Il contenuto
esterno</br>
Il contenuto
esterno</br>
Il contenuto
esterno</br>
Il contenuto
esterno</br>
Il contenuto
esterno</br>
Il contenuto
esterno</br>
</div>
</div>
dell'elemento interno eccede quello dell'elemento

</body>
</html>
La riga di codice responsabile dell'effetto scrolling evidenziata in colore rosso scuro (vedi):
overflow: auto;
La propriet overflow pu avere diversi valori, i pi utili dei quali sono:

overflow: visible|hidden|scroll|auto;
overflow : visible avrebbe fatto "fuoriuscire" il contenuto dell'elemento interno dai limiti
dell'elemento esterno, invadendo la pagina. Questo il valore di default. Per impedire questo,
normalmente si setta il margine dell'elemento esterno come auto, in modo che si adatti all'elemento
interno.
overflow : hidden taglia semplicemente il contenuto eccedente le dimensioni dell'elemento esterno,
rendendolo invisibile e irraggiungibile (non c' scrolling)
overflow : scroll taglia il contenuto eccedente le dimensioni dell'elemento esterno, ma lo rende
accessibile dotando quest'ultimo di barre per lo scrolling verticale e orizzontale.
overflow : auto se il contenuto eccede le dimensioni dell'elemento esterno, fa apparire delle barre
per lo scrolling. Rispetto all'opzione overflow : scroll, pi conveniente, perch, mentre in quel caso
le barre appaiono sempre, anche se il contenuto compreso nei limiti dell'elemento, con overflow :
auto esse compaiono solo se il contenuto eccede le dimensioni assegnate.
La propriet documentElement
back to Index
Quando si dispone di un documento strutturato mediante tag, come una pagina web:
<html>
<head> </head>
<body> </body>
</html>
oppure come un documento xml:

<catalogo>
<scheda>
<autore> </autore>
<titolo> </titolo>
<editore> </editore>
<scheda>
<scheda>
<autore> </autore>
<titolo> </titolo>
<editore> </editore>
<scheda>
</catalogo>
E' possibile leggerne il contenuto tramite apposite istruzioni, che fanno riferimento ai nodi del
documento. Un nodo un tag o il contenuto (testo o immagine) di un tag. Per poter fare questo
occorre acquisirlo come documento strutturato con una istruzione del tipo:
var mydocument = document.documentElement
(caso di un file con il codice di una pagina web)

oppure con una istruzione del tipo:
xmlDoc=loadXMLDoc("books.xml");
mydocument=xmlDoc.documentElement;
(caso di un file xml)

Proviamo ad esempio ad acquisire la seguente pagina html come documento strutturato in nodi:
<html>
<head>
</head>
<body>
<div id="MyDiv">
Questo il testo contenuto nel tag div
</div>
<table id="MyTable">
<tr>
<td>
Questo il testo contenuto nel tag td
</td>
</tr>
</table>
</body>
</html>
Con la propriet .documentElement si acquisisce il nodo principale, che racchiude gli altri nodi. Ecco
il codice per leggere il testo contenuto nel tag <div> e farlo apparire entro un alert box:
alert(document.documentElement.getElementsByTagName("div")[0].firstChild
.nodeValue);
Ecco il codice per leggere il testo contenuto nel tag <td> della tabella e farlo apparire entro un alert
box:
alert(document.documentElement.getElementsByTagName("div")[0].firstChild
.nodeValue);
L'output che otteniamo in questo secondo caso nella pagina web :
Con apposite istruzioni possiamo navigare attraverso i nodi per acquisirne il valore. Ecco ad esempio
il codice per acquisire il nome del tag <head> del documento html e farlo apparire in un alert box:
alert(document.documentElement.firstChild.nodeName);
L'output che otteniamo il seguente:
Riguardo il nodo si possono ottenere tra le altre le propriet .nodeName, nodeValue e nodeType, su
cui ci soffermeremo in seguito
Subordinare l'apertura di un link al valore vero/falso di una funzione javascript

back to Index
Osservate il codice seguente:

<html>
<head>
<script text="javascript">
function Controllo(){
return true;
}
</script>
</head>
<body>
<a href="MyFile.htm" onclick="return Controllo();">Clicca qui per aprire il
file</a>
</body>
</html>
Il file MyFile.htm, a cui fa riferimento il link <a></a> si aprir solo se la funzione

"Controllo()" restituisce "true" (come in questo caso), mentre se restituisce "false" il link
rimarr inattivo.
Tracciare la posizione relativa

indipendentemente dallo scrolling
e assoluta
del mouse
entro
la
finestra,
back to Index
Aprite il documento MouseTracking.htm e visualizzate il codice con l'opzione "visualizza sorgente

pagina" del tasto destro del mouse (per Explorer l'opzione "HTML").
Al passare del mouse su uno dei box una funzione jQuery visualizza le informazioni di posizione
del mouse:
$('.MyBox').mousemove
(
function(event)
{
log2("Window Height : "+window.innerHeight+
"</br>Top Box : "+Math.floor($(this).offset().top)+
"</br>Left Box : "+Math.floor($(this).offset().left)+
"</br>Box Height : "+$(this).css('top')+
"</br>Box Width : "+$(this).css('top')+
"</br>Window Width : "+window.innerWidth+
"</br>Absolute Mouse X : "+event.pageX+
"</br>Absolute Mouse Y : "+event.pageY+
"</br>Window Mouse X : "+event.pageX+
"</br>Window Mouse Y : "+(event.pageY-document.VerticalScrollValue));
}
);
Window Width la larghezza utile (innerWidth) della finestra in punti

Window Height l'altezza utile (innerHeight) della finestra in punti
(provate ad aumentare l'ingrandimento della finestra con CTRL+rotella del mouse e noterete che
Window Width si riduce quando l'ingrandimento aumenta, e cos pure capita a Window Height)
Top Box la distanza in punti del margine superiore del box dall'inizio del documento (non della
finestra)
Left Box la distanza in punti del margine sinistro del box dal lato sinistro del documento (non della
finestra)
Box Height l'altezza del box in punti, letta nel foglio CSS
Box Width la larghezza del box in punti, letta nel foglio CSS
Absolute Mouse X la distanza in punti del mouse rispetto al lato sinistro del documento (non della
finestra)
Absolute Mouse Y la distanza in punti del mouse rispetto al lato superiore del documento (non
della finestra)
Window Mouse X la distanza in punti del mouse rispetto al lato sinistro della finestra, cio tenendo
conto dello scrolling
Window Mouse Y la distanza in punti del mouse rispetto al lato superiore della finestra, cio
tenendo conto dello scrolling
Un'altra funzione jQuery fa apparire invece, in un'altra finestra, i dati dello scrolling verticale e
orizzintale in punti, che sono indispensabili per ottenere la posizione del mouse relativa alla finestra,
e non al documento:
$(window).scroll(function(event)
{
log1("Scrolling verticale: "+$(window).scrollTop()+"</br>Scrolling
orizzontale : "+$(window).scrollLeft());
document.VerticalScrollValue=$(window).scrollTop();
document.HorizontalScrollValue=$(window).scrollLeft();
});
Chi ha esperienza di javascript non mancher di notare la maggiore facilit di acquisizione dei dati
con jQuery, che permette persino di accedere alle misure di larghezza e altezza del box.
Acquisire la posizione di un elemento entro il documento

back to Index
Consideriamo la seguente rappresentazione di un box come visualizzato in una pagina web:
Questo box corrisponde al seguente codice:

html:
<div id="container">
</div>
css:
#container {
padding: 24px;
margin: 24px;
border: 50px #ccc solid;
left: 10px;
top: 200px;
position: absolute;
}
I valori padding, margin, border, left, top influiscono tutti sulla posizione che il contenuto del box
ha nella pagina: ad esempio, aumentando il padding o il margine, una eventuale linea di testo
scender pi in basso nella pagina.
Un elemento immagine invece avr una struttura pi semplice:
La nostra immagine situata nel suo contenitore e non ha valori definiti per padding, margin o
border.
Consideriamo ora una pagina web che mostra elementi annidati:
I bordi rossi sono quelli di una tabella, mentre i bordi neri sono quelli di una cella della tabella.
Abbiamo tre tabelle annidate che contengono altrettante celle.
Questa visualizzazione corrisponde al codice seguente:
<table align="center" style="border:1px solid
red;width:auto;height:auto;padding:20px;">
<tr>
<td style="border:1px solid black;width:300px;height:200px;padding:20px;">
<tr>
<td style="border:1px solid black;width:300px;height:200px;padding:20px;">
<tr>
<td id="MyBox" style="border:1px solid
black;width:300px;height:200px;text-align:center;font-size:120%;fontweight:bold;">
MyBox
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Come si pu acquisire la posizione della cella MyBox all'interno del documento? Ecco un codice che
lavora risalendo dall'elemento interno a quelli pi esterni, sommando via via le posizioni all'interno
dell'oggetto contenitore (parent):
function getPosition(element)
{
var xPosition = 0;
var yPosition = 0;
while(element)
{
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
L'argomento della funzione un elemento della pagina; nel nostro esempio essa richiamata
dall'istruzione:
function getPosition(document.getElementById("MyBox"));
Il loop while inizia con l'elemento designato, ed aggiunge a xPosition e yPosition i valori che
andiamo a commentare:
Le propriet offsetLeft e offsetTop restituiscono la posizione a sinistra e dall'alto relativa
all'elemento-genitore pi prossimo, cio la distanza dell'angolo superiore sinistro dell'elemento
considerato rispetto all'angolo superiore sinistro dell'elemento-genitore. Normalmente il valore di
padding che fa s che questi due angoli non coincidano, facendo rientrare l'elemento-figlio.
Le propriet clientLeft e clientTop tengono conto dello spessore rispettivamente del bordo sinistro e
del bordo superiore dell'elemento (che sono quelli rilevanti per il posizionamento)
Le propriet scrollLeft e scrollTop riguardano il contenuto di ogni elemento, e misurano lo scrolling
interno di tale contenuto. Questa la ragione per cui i relativi valori vengono sottratti, piuttosto che
addizionati.
Un altro modo, pi veloce, di ottenere lo stesso risultato, quello di utilizzare il metodo
getBoundingClientRect(), che supportato attualmente da tutti i browser.
Il metodo viene applicato ad un elemento, ad esempio con l'istruzione:
document.getElementById("MyBox").getBoundingClientRect()
Per capire l'oggetto che si ottiene, occorre premettere che, secondo le specifiche CSS, qualsiasi
contenuto della pagina web racchiuso in un rettangolo chiamato "CSS box". Nel caso di un blockelement come <div> l'elemento stesso che forma un simile rettangolo, chiamato block box. Nel
caso di un inline element, ogni ritorno a capo genera un box: ogni linea un rettangolo e questi
rettangolo sono chiamati anonymous boxes. In tal modo il contenuto di un elemento pu consistere
di un unico rettangolo o di rettangoli multipli, che possibile richiamare con il metodo
element.getClientRects(). Il metodo element.getBoundingClientRect() restituisce il minimo
rettangolo che racchiude tutti i rettangoli che sono in element.getClientRects().
La funzione che consente di ottenere la posizione dell'elemento per questa via si presenta nel modo
seguente:
function getOffsetRect(elem)
{
// (1)
var box = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
// (2)
var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;
// (3)
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
// (4)
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left) };
}
Si notino le istruzioni condizionali come:

var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
Il significato delle due sbarre verticali "||" simile a quello logico "or", in quanto acquisisce il primo
elemento non nullo dell'insieme. Cos, una istruzione come:
alert("" || "paperino" || "pluto");
restituir "paperino", mentre l'istruzione:

alert("pippo" || "paperino" || "pluto");
restituir "pippo".
Consideriamo ora il documento web prodotto dal seguente codice:
<html>
<head>
</head>
<body>
<p id="MyParagraph" align="center" style="border:1px solid black;">
Questo il mio paragrafo
</p>
</body>
</html>
Con la propriet offset() di jQuery possiamo ottenere la posizione del box che racchiude l'elemento
relativa al documento:
$("#MyParagraph").offset().top
Si pu vedere come la propriet offset() ha due valori: offset().top e offset().left, che determinano la
posizione del box.
Questa istruzione fornisce il valore "8", e non "0", come ci si sarebbe aspettato per il primo elemento
della pagina, perch il browser normalmente pone una piccola distanza tra l'elemento e il margine
superiore della finestra.
Il metodo offset() pu essere utilizzato sia in lettura che scrittura, cio per settare le coordinate. Ad
esempio l'istruzione:
$("#MyParagraph").offset({top: 200,left:200});
sposta l'elemento alle coordinate 200, 200.

Gli stessi risultati si possono ottenere con position():
$("#MyParagraph").position().top
La differenza tra i metodi position() e offset() di jQuery sta nel modo con cui vengono
calcolate le coordinate restituite. Nel primo caso, le coordinate vengono calcolate sempre rispetto al
genitore dellelemento, mentre nel secondo caso tali coordinate possono essere calcolate rispetto
alloffset dellelemento genitore rispetto alla pagina quando il genitore posizionato, ossia ha un
valore CSS diverso da static. Se il genitore non posizionato, entrambi i metodi restituiscono gli
stessi valori.
Un'altra utile propriet offsetParent. Consideriamo il seguente elemento:
<div id="MyDiv" style="position:absolute;top:200px;left:100px;">
<p id="MyParagraph" class="paragraph" align="center">
</p>
</div>
Consideriamo la seguente istruzione:

alert($(document.getElementById("MyParagraph").offsetParent).offset().top);
Il valore che sar mostrato nel box di dialogo 200, perch l'elemento parent di MyParagraph il
<div> che lo contiene, e che ha un posizionamento assoluto dato dai valori:
top : 200px
left : 100px.
Un'altra propriet utile per calcolare la posizione di un elemento .clientTop, che indica lo
spessore del bordo superiore dell'elemento, in pixel (per il bordo sinistro si utilizza .clientLeft).
Considerando l'elemento:
<div id="MyDiv" style="border:10px">
<p id="MyParagraph" class="paragraph" align="center">
</p>
</div>
l'istruzione:
alert(document.getElementById("MyParagraph").offsetParent.clientTop);
d come valore "10", che corrisponde al valore dato alla propriet border-top di MyDiv. Come si
vede questa istruzione non appartiene a jQuery, ma a javascript, quindi non funziona se associata ad
un identificatore jQuery:
alert($("#MyParagraph").offsetParent.clientTop);
Tuttavia clientTop non tiene conto degli effetti della propriet padding, n della propriet
margin. Al suo posto si pu usare la propriet .style.borderTopWidth.
Fare lo scrolling fino a portare un elemento della pagina in vista

back to Index
Consideriamo la seguente pagina web Scrolling.htm :

<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></
script>
$("#MyButton").offset({top: 200, left: 600});
$("html,body").scrollTop(0);
});
function MyFunction()
{
var offset = $("#MyButton").offset();
offset.top = offset.top - 50;
$("html,body").scrollTop(offset.top);
}
</script>
</head>
<body>
<div style="height:1000px;"></div>
<p align=center>
<input id = "MyButton" type="button" value="INVIO"
onclick="MyFunction();">
</p>
<div style="height:1000px;"></div>
</body>
</html>
Le istruzioni javascript utilizzano la propriet .scrollTop() associata ad un qualsiasi elemento, che

permette di leggerne o settarne lo scrolling interno. Quest'ultimo rilievo vuol dire che non riusciremo
a muovere in alto di 50 pixels il bottone con l'istruzione:
$("#MyButton").scrollTop(50);
bens con l'istruzione:

$("html,body").scrollTop(50);
perch lo scrolling si riferisce ad un eventuale contenuto dell'elemento, e quindi l'elemento a cui

dobbiamo associare l'istruzione non il tag del bottone ma il tag <body>, all'interno del quale si
trova il bottone.
Nel documento appare un bottone:
<input id = "MyButton" type="button" value="INVIO"
onclick="MyFunction();">
che viene posizionato 200 punti in basso a partire dall'inizio del documento e 600 punti a destra a
partire dal lato sinistro del documento:
$("#MyButton").offset({top: 200, left: 600});
L'evento onclick del tag MyButton richiama una funzione:

onclick = "MyFunction();"
La funzione MyFunction acquisisce la posizione verticale del bottone mediante :

var offset = $("#MyButton").offset();
Se noi facessimo lo scrolling in basso pari a tale valore (cio 200 punti), il bottone salirebbe fino a
sparire dalla vista.
Poich vogliamo che dopo lo scrolling il bottone sia posizionato 50 punti pi in basso dell'inizio
della finestra, occorre fare lo scrolling di un valore pari alla posizione dell'elemento meno 50 punti:
offset.top = offset.top - 50;
Ora, facendo lo scrolling del documento, il bottone verr posizionato esattamente 50 punti in basso
a partire dall'inizio della finestra.
Dotare una pagina web di ToolTip (box informativi che appaiono quando il mouse
passa sopra ad un elemento)
back to Index
Cos' una "tooltip"? E' un box informativo che compare quando il mouse passa sopra un elemento
della pagina, che potrebbe essere un link, un tag <td> di una tabella o un altro tag (jQuery permette
di dotare di tooltip un tag qualsiasi).
La soluzione che proponiamo qui dovuto ad Alessio Atzeni, e si pu trovare sul suo sito
www.alessioatzeni.com.
ATTENZIONE:
Se dopo aver dotato la vostra pagina di tooltips voleste automatizzare le operazioni di

inserzione delle informazioni nel campo "title", scrivendole in un documento XML e inserendole
nel tag al momento del caricamento della pagina, consultate in questo documento l'articolo "Inserire
nel campo 'title' dei vostri link le informazioni visualizzate dal browser al passaggio del mouse
utilizzando XML, javascript e php"
Per creare le tooltips vengono utilizzati i seguenti linguaggi o funzionalit: html, css, javascript,
jQuery.
Noi abbiamo apportato diversi miglioramenti al codice, di cui diamo un sintetico elenco (ciascuno
sar spiegato in dettaglio pi avanti):
Alcune istruzioni sono state sostituite da altre pi comprensibili per i principianti e il codice
stato lievemente modificato e indentato in modo da renderlo pi leggibile.
E' stata aggiunta una condizione che fa apparire la ToolTip solo per i box con campo "title" non
vuoto (il codice di Atzeni faceva comparire un antiestetico box vuoto)
Il codice funziona con elementi appartenenti a classi diverse, non solo con con elementi di una
sola classe.
L'inserzione del testo nei tooltip stata razionalizzata tramite caricamento da un file xml
(questa funzionalit non sar implementata in questo articolo, ma sar oggetto di una trattazione
indipendente)
La ToolTip si autoconfigura in relazione al contenuto, in modo da avere una larghezza doppia
dell'altezza
Il testo della ToolTip stato formattato in modo pi elegante, con giustificazione dei margini
La posizione della ToolTip si modifica rispetto a quella di default (in basso e a destra rispetto al
box) ogni volta che, data la posizione del box, rischia di uscire dallo schermo.
Per vedere il codice javascript, aprite il file PaginaConTooltip.htm dal sito learningsources e fate
visualizzare al browser il sorgente nel seguente modo:
Con Chrome, tasto destro del mouse, opzione "visualizza sorgente pagina"
Con Mozilla, tasto destro del mouse, opzione "visualizza sorgente pagina"
Con Explorer, tasto destro del mouse, opzione "HTML"
Esponiamo in breve la struttura del codice che consente di creare tooltips. Il file
PaginaConTooltip.htm visualizza dei box costituiti da celle di tabella generate dal seguente
codice:
<td class="MyBox" title="Questo un box di informazioni">
</td>
Come si vede ogni tag <td> ha al suo interno l'attributo "title", in cui viene inserito il testo da
visualizzare nella tooltip. Quando il mouse passa sul box, si attiva una routine jQuery collegata
all'evento mouseover, che genera e fa apparire la tooltip InfoBox, che non altro che un semplice
paragrafo di testo formattato con il foglio di stile .tooltip, che ne definisce il bordo, il colore di
background, la giustificazione e il font del testo, setta il posizionamento come assoluto (position
: absolute) e la non-visibilit (display : none):
InfoBox =$("<p class='tooltip'></p>");
Subito dopo viene posto all'interno della tooltip InfoBox il testo che contenuto nell'attributo
"title" del box:
InfoBox.text(title)
La tooltip InfoBox viene poi inserita nel documento con l'istruzione .appendTo() e fatta apparire
con fadeIn(), e posizionata in modo assoluto a sinistra e in basso rispetto alla posizione corrente
del mouse, tramite il seguente codice:
$('.tooltip').offset({top: mousey,left: mousex});
dove mousex e mousey definiscono lo scostamento orizzontale e lo scostamento verticale del

margine superiore sinistro di InfoBox rispetto alla posizione del mouse.
Dopo questi brevi cenni introduttivi, passiamo ad analizzare nel dettaglio il codice di
PaginaConTooltip.
Si noti anzitutto, nella sezione <head>, il richiamo alle libreria jQuery, indispensabile per scrivere
un codice compatto ed efficiente:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
In questo caso, per evitare di dover scaricare sul proprio computer il file jquery-1.11.2.min.js,
si utilizzato un CDN (Content Delivery Network), cio si fatto riferimento, nel link, a una copia
della libreria ospitata su server che la mettono a disposizione gratuitamente degli utenti di internet
(in questo caso si tratta dei server Google):
Diamo un'occhiata al codice che genera i box: si tratta di tre fogli CSS posti nella sezione <head>
e di una tabella posta nella sezione <body>.
I fogli CSS definiscono tre classi: una per i box veri e propri (classe .MyBox), una per gli interstizi
verticali tra i box (classe .hspacing) e una per gli interstizi orizzontali tra i box (classe
.vspacing):
.MyBox{
width:200px;
height:50px;
background-color:ivory;
}
.hspacing{
width:auto;
}
.vspacing{
height:40px;
}
</style>
Qui sotto riportato il codice che genera una delle numerose righe della tabella. Questo codice viene
ripetuto identicamente, in modo da generare tutte le linee orizzontali ciascuna composta da 4 box
affiancati:
<table align="center" style="width:140%">

<tr>
<td
class="MyBox"
title="Questo un box di informazioni. Questo un box
informazioni. Questo un box di informazioni. Questo un
informazioni. Questo un box di informazioni.";
align="left">
</td>
<td class="hspacing"></td>
<td
class="MyBox"
align="center">
</td>
<td
class="MyBox"
align="right">
</td>
<td
class="MyBox"
align="center">
</td>
</tr>
<tr><td class="vspacing"></td></tr>
di
box di
di
box di
di
box di
di
box di
..................................................................
</table>
Il tag <td> che corrisponde al box vero e proprio contiene nel campo title il testo che verr
visualizzato nella Tooltip:
title = "Questo un box di informazioni. Questo un box di informazioni.
Questo un box di informazioni. Questo un box di informazioni. Questo
un box di informazioni."
Ciascuno, ovviamente, inserir il proprio testo al posto di quello mostrato.

Il foglio di stile CSS della Tooltip il seguente:
.tooltip {
display:none;
position:absolute;
word-wrap: normal;
width:8cm;
height:auto;
border:2px solid red;
background-color:papayawhip;
border-radius:5px;
padding:10px;
padding-top:4px;
padding-bottom:5px;
color:black;
font-size:14px
font-family: "Times New Roman";
font-weight:normal;
text-align:justify;
text-justify:inter-word;
}
La tooltip non appare finch non si verifica l'evento del passaggio del mouse su uno dei box, e quindi
viene dichiarata invisibile:
display:none;
Il testo al suo interno viene giustificato con le due istruzioni:

text-align:justify;
text-justify:inter-word;
Poich la tooltip deve essere spostabile in qualsiasi parte della finestra, la sua posizione viene
dichiarata assoluta:
position:absolute;
Le posizioni top e left che sono associate ad una posizione assoluta non vengono precisate: lo
saranno al momento del verificarsi del passaggio del mouse su un box. A differenza del valore
fixed, il valore absolute di position fissa la posizione del box rispetto al documento e non alla
finestra, e quindi il box si muove (teoricamente) con lo scrolling, mentre nel caso di posizione fixed
lo scrolling non modifica la sua posizione nella finestra.
La prima istruzione che compare nello script che si occupa di gestire le tooltip la seguente:
$(document).ready(function()
{
.........
.........
.........
});
Si tratta di una tipica istruzione jQuery: tutto il codice jQuery viene normalmente eseguito solo dopo
che il codice HTML per la visualizzazione della pagina sia stato eseguito; in altre parole solo dopo
che tutti gli elementi del documento siano stati mostrati nella pagina, per impedire il
malfunzionamento delle istruzioni che li manipolano.
Passiamo ora alla descrizione delle routine che gestiscono gli eventi relativi al mouse.
Quando il mouse passa su un box si attiva una funzione collegata all'evento mouseover:
$('.MyBox,.MyAnchor').mouseover
(
function(event)
{
var title = $(this).attr('title');
if(title != null && title.length > 0)
{
$(this).data('tipText', title);
$(this).removeAttr('title');
var InfoBox=$("<p class='tooltip'></p>");
InfoBox
.text(title)
.appendTo($(this))
.fadeIn('fast');
InfoBoxWidth=InfoBox.css('width').replace("px","");
InfoBoxHeight=InfoBox.css('height').replace("px","");
while(InfoBoxWidth < (InfoBoxHeight*(200/100)))
{
InfoBoxWidth=InfoBoxWidth*(105/100);
InfoBox.css({width:InfoBoxWidth});
}
document.InfoBoxWidth=InfoBoxWidth;
document.InfoBoxHeight=InfoBoxHeight;
InfoBoxOffsetX = 30;
InfoBoxOffsetY = 40;
RelativeToWindowMouseX=event.pageX-document.HorizontalScrollValue;
RelativeToWindowMouseY=event.pageY-document.VerticalScrollValue;
if(RelativeToWindowMouseY+InfoBoxOffsetY+5 > document.WindowHeight
- document.InfoBoxHeight){InfoBoxOffsetY=-(InfoBoxOffsetY)document.InfoBoxHeight;}
if(RelativeToWindowMouseX+InfoBoxOffsetX+5 > document.WindowWidth InfoBoxWidth){InfoBoxOffsetX=-(InfoBoxOffsetX)-InfoBoxWidth;}
mousex=event.pageX+InfoBoxOffsetX;
mousey=event.pageY+InfoBoxOffsetY;
}
}
);
Il codice jQuery per l'attivazione di una funzione al verificarsi di un evento ha la seguente struttura:
$('.MyBox').mouseover
(
function(event)
{
........
........
........
}
)
dove $('.MyBox').mouseover rappresenta l'evento del passaggio del mouse su un elemento

di classe "MyBox" e function(event){...} contiene le istruzioni che devono essere eseguite.
Si noti l'uso dell'oggetto "this", che in jQuery pu rappresentare cose diverse in contesti diversi, ma
qui rappresenta il box a cui si ricollega l'evento (passaggio del mouse). Perci l'istruzione:
var title = $(this).attr('title');
legge la stringa che costituisce il valore dell'attributo "title" del box in cui si verificato
l'evento.
Se nel codice del box non stato inserito un attributo "title":
<td class="MyBox"> </td>
ovvero se l'attributo consiste di una stringa vuota perch non stato riempito:
<td class="MyBox" title=""> </td>
allora la funzione non esegue alcuna istruzione. Questa condizione espressa da:
if(title != null && title.length > 0){...}
dove le eventuali istruzioni vanno a posto dei puntini. Senza questa istruzione, quando il mouse
passa su un box con title="" verrebbe visualizzata una antiestetica tooltip vuota.
La prima istruzione inserisce l'attributo 'tipText' e gli d come valore la stringa contenuta
nell'attributo titolo:
$(this).data('tipText', title);
il metodo data(NomeElemento, dati) di jQuery collega dei dati ad un qualsiasi elemento

DOM, che possono essere letti con una istruzione del tipo:
$(this).data('tipText');
Dopo che il valore dell'attributo "title" stato salvato in "tipText", viene rimosso l'attributo
"title":
$(this).removeAttr('title');
Questo per evitare che, subito dopo che apparsa la tooltip, compaia anche il piccolo box che
Explorer associa all'eventuale presenza di un attributo "title".
Viene quindi creata la variabile InfoBox, che rappresenta un paragrafo di classe .tooltip,
che il nostro box informativo, che faremo apparire al momento giusto:
var InfoBox=$("<p class='tooltip'></p>");
Il testo che era contenuto nell'attributo "title" e che ora nella variabile "title" viene scritto in
InfoBox:
InfoBox.text(title)
Il box InfoBox viene posizionato al disotto del box rappresentato dall'oggetto "this" (vale a dire
dove sarebbe posizionato se il suo codice fosse posto sotto il codice del box rappresentato dalla
variabile "this"):
InfoBox.appendTo($(this))
Il box InfoBox viene reso visibile:

InfoBox.fadeIn('fast');
Vengono acquisite la larghezza e l'altezza del box:

Attraverso un ciclo while vengono modificate larghezza e altezza di InfoBox in modo che la
larghezza abbia misura doppia dell'altezza:
{
}
Vengono settati i valori dello spostamento di InfoBox rispetto alla posizione del mouse:
Vengono acquisiti i valori dello scrolling verticale e dello scrolling orizzontale, cio della distanza
in pixel tra l'inizio del documento e il punto del documento che corrisponde al margine superiore
della finestra (scrolling verticale) e la distanza in pixel tra il margine sinistro del documento e il
punto della riga in cui inizia la visualizzazione della finestra (scrolling orizzontale):
Viene controllato se la linea inferiore di InfoBox all'interno della finestra:

if(RelativeToWindowMouseY+InfoBoxOffsetY+5 > document.WindowHeight document.InfoBoxHeight)
{
InfoBoxOffsetY=-(InfoBoxOffsetY)-document.InfoBoxHeight;
}
La posizione verticale della linea inferiore di InfoBox rispetto al lato superiore della finestra data
dalla somma della posizione del mouse rispetto all'angolo superiore della finestra
(RelativeToWindowMouseY) pi la distanza verticale dell'angolo superiore sinistro di InfoBox
rispetto al mouse (InfoBoxOffsetY) pi l'altezza di InfoBox (document.InfoBoxHeight).
Se questo valore superiore all'altezza della finestra (document.WindowHeight):
RelativeToWindowMouseY + InfoBoxOffsetY + document.InfoBoxHeight >
document.WindowHeight
allora vuol dire che InfoBox fuoriesce in tutto o in parte inferiormente dalla finestra e una parte
del suo contenuto non visibile. In questo caso, InfoBox viene "ribaltato" in senso verticale:
anzich essere posizionato al disotto della posizione del mouse, viene posizionato al disopra del
mouse, con il margine inferiore ad una distanza dalla posizione del mouse pari in valore assoluto a
quella che esisteva tra la posizione del mouse e il margine superiore di InfoBox prima della
rettifica:
Viene poi controllato se la linea laterale destra di InfoBox sia all'interno della finestra:
if(RelativeToWindowMouseX+InfoBoxOffsetX+5 > document.WindowWidth InfoBoxWidth)
{
InfoBoxOffsetX=-(InfoBoxOffsetX)-InfoBoxWidth;
}
La posizione orizzontale della linea destra di InfoBox rispetto al lato sinistro della finestra data
dalla somma della posizione del mouse rispetto al lato sinistro della finestra
(RelativeToWindowMouseX) pi la distanza orizzontale dell'angolo superiore sinistro di
InfoBox rispetto al mouse (InfoBoxOffsetX) pi la larghezza di InfoBox (InfoBoxWidth).
Se questo valore superiore alla larghezza della finestra (document.WindowHeight) allora vuol
dire che InfoBox fuoriesce in tutto o in parte dal lato destro della finestra, e una parte del suo
contenuto non visibile. In questo caso InfoBox viene "ribaltato" orizzontalmente: anzich essere
posizionato a destra della posizione del mouse, viene posizionato a sinistra del mouse, con il
margine destro ad una distanza dalla posizione del mouse pari in valore assoluto a quella che esisteva
tra la posizione del mouse e il margine sinistro di InfoBox prima della rettifica:
InfoBoxOffsetX=-(InfoBoxOffsetX)-InfoBoxWidth;
Dopo questi aggiustamenti, si procede a modificare effettivamente la posizione di InfoBox:

Consideriamo ora il codice che viene chiamato al verificarsi dello spostamento del mouse entro uno
dei box:
$('.MyBox,.MyAnchor').mousemove
(
function(event)
{
if(RelativeToWindowMouseY + InfoBoxOffsetY + 5>
document.WindowHeight - document.InfoBoxHeight){InfoBoxOffsetY=(InfoBoxOffsetY)-document.InfoBoxHeight;}
if(RelativeToWindowMouseX+InfoBoxOffsetX + 5 > document.WindowWidth
- document.InfoBoxWidth){InfoBoxOffsetX=-(InfoBoxOffsetX)document.InfoBoxWidth;}
}
);
Vengono settati i valori dello spostamento di InfoBox rispetto alla posizione del mouse:
Viene acquisita la posizione del mouse rispetto alla finestra (non al documento):
La posizione orizzontale del mouse rispetto alla finestra data dalla posizione del mouse rispetto al
documento
(event.pageX)
meno
il
valore
dello
scrolling
orizzontale
(document.HorizontalScrollValue).
La posizione verticale del mouse rispetto alla finestra data dalla posizione del mouse rispetto al
documento
(event.pageY)
meno
il
valore
dello
scrolling
verticale
(document.VerticalScrollValue):
Seguono istruzioni simili a quelle che abbiamo gi commentato nel caso dell'evento mouseover,
per posizionare correttamente InfoBox, in modo che tutto il suo contenuto risulti in vista:
if(RelativeToWindowMouseY + InfoBoxOffsetY + 5> document.WindowHeight document.InfoBoxHeight)
{
}
if(RelativeToWindowMouseX+InfoBoxOffsetX + 5 > document.WindowWidth document.InfoBoxWidth)
{
InfoBoxOffsetX=-(InfoBoxOffsetX)-document.InfoBoxWidth;
}
Quando il mouse esce dal box, si attiva la funzione collegata all'evento mouseout:
$('.MyBox,.MyAnchor').mouseout
(
function()
{
$(this).attr('title', $(this).data('tipText'));
$('.tooltip').remove();
}
);
Viene ripristinato il valore dell'attributo "title" del box (che era stato rimosso quando il mouse
era entrato nel box):
$(this).attr('title', $(this).data('tipText'));
Vengono rimossi i dati associati temporaneamente al box per ospitare il contenuto dell'attributo
"title":
$('.tooltip').remove();
Il codice che abbiamo esaminato sinora fa riferimento in alcuni casi a valori ottenuti direttamente
con metodi e propriet jQuery, come ad esempio:
event.pageX
event.pageY
mentre in altri casi fa riferimento a variabili globali dichiarate al momento del caricamento della
pagina
document.InfoBoxHeight=0;
document.InfoBoxWidth=0;
document.WindowHeight=window.innerHeight;
document.WindowWidth=window.innerWidth;
document.VerticalScrollValue=0;
document.HorizontalScrollValue=0;
document.RelativeToWindowMouseX=0;
document.RelativeToWindowMouseY=0;
Alcune di queste variabili sono acquisite al caricamento del documento e non cambiano:
Altre variabili sono ricalcolate ad ogni spostamento del mouse tramite apposite istruzioni:
document.VerticalScrollValue=0;
document.HorizontalScrollValue=0;
document.RelativeToWindowMouseX=0;
document.RelativeToWindowMouseY=0;
L'altezza e larghezza di InfoBox vengono aggiornate, nella routine mouseover, una volta che le
proporzioni di InfoBox sono state modificate con il ciclo while che abbiamo gi commentato:
{
}
La posizione del mouse rispetto alla finestra viene calcolata entro la routine mouseover e la routine
mousemove:
E questo tutto.
ATTENZIONE: Se volete automatizzare le operazioni di inserzione delle informazioni nel campo
"title", scrivendole in un documento XML e inserendole nel tag al momento del caricamento della
pagina, consultate in questo documento l'articolo "Inserire nel campo 'title' dei vostri link le
informazioni visualizzate dal browser al passaggio del mouse utilizzando XML, javascript e php"
Inserire nel campo "title" dei vostri link, al caricamento della pagina, informazioni che
verranno visualizzate dal browser al passaggio del mouse, utilizzando XML, javascript
e php
back to Index
Tutti i principali browser dispongono di una funzionalit che verifica se un tag disponga al suo
interno di un campo "title" e in caso affermativo fa apparire, dopo una frazione di secondo, un
minuscolo box informativo con la stringa inserita in "title". Ad esempio, nel caso del seguente tag:
<a title="Questa la pagina del principale giornale statunitense
online" href="usatoday.com">USA Today</a>
al passaggio del mouse sul link apparir un piccolo box con la spiegazione: "Questa la pagina del
principale giornale statunitense online".
Se volete che tutti i vostri link siano dotati di un simile box informativo, dovreste inserire un campo
"title" in ciascuno di essi, seguito da una stringa illustrativa.
Questo crea qualche difficolt nel momento in cui volete aggiornare la descrizione di qualche link,
perch dovrete aprire con un editor il codice della pagina internet, cercare al suo interno il link - che
non facile quando essa ne contiene parecchie decine - e modificare l'attributo "title", salvando poi
il tutto. Inoltre, se le descrizioni sono lunghe, questo affoller di stringhe il codice HTML rendendolo
poco leggibile.
L'alternativa che vi proponiamo qui di dotare ogni tag <a> di un id univoco che consente di capire
immediatamente di quale link si tratti, e di raccogliere tutte le descrizioni in un file XML posto sullo
stesso server dove la vostra pagina web, dove ognuna di esse facilmente ritrovabile, perch
associata all'id del link. Ogni tag <a> avrebbe allora un id e un campo "title" vuoto:
<a id="UsaToday" title="" href="usatoday.com">USA Today</a>
Per vedere all'opera questo sistema, apriamo la pagina TitlesLoadingExample.htm, e

osserviamone il codice.
Entro una tabella abbiamo 4 box il cui codice (in questo caso si tratta del Box 1):
<td id="Box1"
BOX 1
</td>
class="MyBox" title="">
Come si vede l'attributo "title" esiste ma vuoto. Esso destinato ad essere riempito con la
stringa "Questo e' il Box 1" contenuta nel file titles.xml. In altre parole, il testo da visualizzare
nella tooltip, anzich inserito nel codice della pagina html entro il tag con l'istruzione title = ""
viene, pi ordinatamente, letto da una routine javascript/jQuery dal file titles.xml al
momento del caricamento della pagina:
<?xml version='1.0' encoding='utf-8'?>
<documenti>
<documento>
<titolo>Box1</titolo>
<presentazione>
Questo e' il Box 1
</presentazione>
</documento>
<documento>
<presentazione>
Questo e' il Box 2
</presentazione>
</documento>
<documento>
<presentazione>
Questo e' il Box 3
</presentazione>
</documento>
<documento>
<presentazione>
Questo e' il Box 4
</presentazione>
</documento>
<documento>
<presentazione>
Questo e' il Box 5
</presentazione>
</documento>
</documenti>
Ecco il codice ajax che consente di leggere il file xml in cui sono contenuti i testi da inserire nei
campi "title":
function FillTitleAttribute()
{
var mozillaFlag = false;
{
XMLHttpRequestObject.overrideMimeType("text/xml");
mozillaFlag = true;
}
{
}
{
XMLHttpRequestObject.open("GET", "titles.xml", true);
XMLHttpRequestObject.setRequestHeader('Content-Type', 'text/xml');
{
{
var xmlDocument = XMLHttpRequestObject.responseXML;

if(mozillaFlag)
{
removeWhitespace(xmlDocument);
}
WriteTitles (xmlDocument);
}
}
}
}
function WriteTitles(xmldoc)
{
var documenti = xmldoc.documentElement;
var LoopIndex;
var BoxName;
for(LoopIndex = 0; LoopIndex<documenti.childNodes.length; LoopIndex++)
{
BoxName=documenti.childNodes[LoopIndex].firstChild.firstChild.nodeValue;
if (document.getElementById(BoxName) != null &&
documenti.childNodes[LoopIndex].lastChild.firstChild.nodeValue.length >
8)
{
try
{
document.getElementById(BoxName).attributes["title"].value=documenti.chi
ldNodes[LoopIndex].lastChild.firstChild.nodeValue;
}
catch(err){}
}
}
}
function removeWhitespace(xml)
{
var loopIndex;
for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++)
{
var currentNode = xml.childNodes[loopIndex];
if (currentNode.nodeType == 1)
{
removeWhitespace(currentNode);
}
if (((/^\s+$/.test(currentNode.nodeValue))) && (currentNode.nodeType
== 3))
{
xml.removeChild(xml.childNodes[loopIndex--]);
}
}
}
</script>
La funzione FillTitleAttribute() viene richiamata al caricamento della pagina mediante

l'istruzione:
<body onload="FillTitleAttribute();">
La funzione FillTitleAttribute() acquisisce con una chiamata asincrona il file titles.xml,

ne elimina gli spazi e i ritorni a capo che potrebbero provocare malfunzionamenti, richiamando
la funzione removeWhitespace(xml), e poi passa il documento alla funzione
WriteTitles(xmldoc) perch riempia i campi "title".
Il codice, dopo aver letto il documento titles.xml, entra in un loop che scorre uno alla volta
gli elementi <documento>...</documento> di titles.xml, ne legge il campo
<titolo>...</titolo> e se trova un tag di TitlesLoadingExample.htm che ha
l'attributo "id" coincidente, provvede a riempire l'attributo "title" con l'istruzione:
document.getElementById($(this).find('titolo').text()).attributes['title
'].value=$(this).find('presentazione').text();
Quando non esiste un tag di TitlesLoadingExample.htm con l'identificativo corrispondente

a quello letto nel file titles.xml viene generato errore, ma l'errore catturato dalle istruzioni:
try
{
document.getElementById(BoxName).attributes["title"].value=documenti.chi
ldNodes[LoopIndex].lastChild.firstChild.nodeValue;
}
catch(err){}
in modo che il programma non si arresti e il loop prosegua.

Il codice per leggere il file xml funziona sia client-side (sul vostro computer non collegato alla
rete) sia server-side (con la pagina html e il file xml sul server).
Nel caso di un sito internet di poca utilit un codice che funziona in locale sul vostro computer,
ma tuttavia utile per il debugging, perch per testarne il funzionamento non necessario rifarne
ogni volta l'upload.
Ecco la versione del codice utilizzando invece jQuery:
{
$.get("titles.xml",function(xmlDoc)
{
$(xmlDoc).find('documento').each
(
function()
{
try
{
document.getElementById($(this).find('titolo').text()).attributes['title
'].value=$(this).find('presentazione').text();
}
catch(err){}
}
);
},"xml");
});
</script>
Vi proponiamo infine un terzo modo di inserire il testo di titles.xml nei tag che si vogliono dotare
di tooltip, nella pagina TitlesLoadingExample.php (cliccate per visualizzarla) mediante codice
php.
Osserviamo la diversa struttura di uno dei box nel <body> del documento:
<tr>
<td <?W('Box1');?> class="MyBox">
BOX 1
</td>
</tr>
Come si vede, invece dell'attributo title = " ... " si ha un frammento di codice php:
<?W('Box1');?>
che richiama la funzione W($NomeFile) definita nell'<head> della pagina:

<?php
function W($NomeFile)
{
$title = simplexml_load_file('titles.xml');
$MyArray=$title->xpath('//documento[titolo="'.$NomeFile.'"]');
$presentazione = $MyArray[0]->presentazione;
print("title=\"".$presentazione."\"");
}
?>
la quale apre il file ToolTipText.xml, cerca l'elemento <documento></documento> il cui

titolo coincide con la stringa passata come argomento e provvede a scrivere entro il tag
<td></td> la seguente stringa:
title="..."
dove il contenuto di title il campo <presentazione></presentazione> dell'elemento di

ToolTipText.xml.
In tal modo la pagina html viene inviata dal server al vostro computer gi completa con gli
attributi "title" riempiti.
Ricordiamo che anche in questo caso il file ToolTipPage.php non funziona sul vostro computer,
ma su un server php, e quindi per vederla dovete farne l'upload sul vostro server o installare un
server php sul vostro computer.
Alcune cose che javascript non fa o fa solo a prezzo di una programmazione complicata
e poco pulita
back to Index
Javascript non pu assolutamente scrivere o leggere dei files che sono sul client, cio sull'hard-disk
dell'utente a cui viene inviata la pagina web, e ci per ovvi motivi di sicurezza.
L'unica maniera di memorizzare dati nelle variabili della pagina, dando loro nomi come
window.MyVariable o document.MyVariable, oppure in qualche attributo di un tag (ad es.
nell'attributo title o nell'attributo value di un box di testo con la qualit "display:hidden", che risulta
nascosto all'utente, ma leggibile da javascript.
Ma questi dati spariranno con la chiusura della sessione web.
Altri dati possono essere scritti nei cookies, e possono rimanere sul computer ospite, ma non tutti i
computer accettano cookies, e quindi il codice scritto basandosi suo cookies assolutamente
inaffidabile
Far aprire un documento nella stessa finestra da cui lo si richiama con il comando:
window.open("NomeFile");
estremamente difficile: il documento si apre immancabilmente in un'altra finestra. A meno che

non abbiate diverse ore da perdere o un suggerimento funzionante di un programmatore esperto (che
chi scrive non ha trovato), lasciate perdere per il momento.
I box di messaggio javascript sono molto rudimentali; ad esempio nel box di input che compare con
la seguente istruzione:
Password = prompt("DIGITA LA PASSWORD","");
non possibile modificare l'avviso "la pagina all'indirizzo dice:" che precede il testo del nostro
prompt, n possibile cambiare la modalit di inserimento di una parola entro il box in modo che
durante la digitazione della password vengano mostrati solo asterischi.
Malgrado abbia ottime funzionalit di gestione di un file XML, javascript non pu caricarlo
direttamente, ma lo deve trovare come variabile globale della pagina, e procurarglielo in questa
forma alquanto laborioso, e richiede l'uso di altri linguaggi (ad esempio php e ajax)
Una pagina php che cambia aspetto ogni volta che la si ricarica
back to Index
Aprite la pagina IndexRandom.php e date un'occhiata al codice, riportato qui sotto (in particolare
agli script php, che non compaiono nel codice della pagina web):
<html>
<head>
<?php
function DisplayTitle($elemento)
{
$nomi = array("DI BIANCANEVE", "DELLA STREGA CATTIVA", "DEL PRESIDE DELLO
SRAFFA", "DI MATTEO RENZI", "DI SILVIO BERLUSCONI");
$azioni=array("STO FACENDO BUNGA-BUNGA", "SONO IN BAGNO CON GRAVI
PROBLEMI", "SONO OFFLINE", "STO RIPARANDO LA MOTOZAPPA");
if($elemento=="nome")
{
$NumeroCasuale=rand(0,4);
print($nomi[$NumeroCasuale]);
}
elseif ($elemento=="azione")
{
$NumeroCasuale=rand(0,3);
print("$azioni[$NumeroCasuale]");
}
}
?>
</head>
<body>
</br></br>
<div style="text-align:center;font-size:200%;font-weight:bold;">
BENVENUTO! QUESTO E' IL SITO <?php DisplayTitle('nome'); ?>
</br></br>
AL MOMENTO <?php DisplayTitle('azione'); ?>.
</br></br>
RIPASSA PIU' TARDI.
</div>
</body>
</html>
La funzione DisplayTitle sceglie a caso un elemento dell'array $nomi e uno dell'array $azioni e lo
restituisce tramite l'istruzione:
print("$nomi[$NumeroCasuale]");
print("$azioni[$NumeroCasuale]");
al codice che, nel messaggio di benvenuto, la richiama.

In questo modo, ogni volta che si ricarica la pagina, appare una scritta diversa.
Un codice php per consentire agli utenti del vostro sito il download di qualsiasi tipo di
file
back to Index
Per il download di file .doc, .pdf, .xls dal vostro sito sufficiente inserire il nome del file, ed esso
sar scaricato correttamente:
<a target="_parent" href="MyFile.xls">Clicca qui per scaricare
MyFile</a>
Ma quando si mettono sul server files .htm o .php o .xml il download non viene effettuato
correttamente. Per operare il download di questi file necessario creare un file download.php
che contiene il seguente codice:
<?php
// Recupero il nome del file dalla querystring
// e lo accodo al percorso della cartella del download
$file = (isset($_GET['filename']) ? $_GET['filename'] : false);
// verifico che il file esista
if (!file_exists($file))
{
// se non esiste stampo un errore
echo "Il file non esiste!";
}else{
// Se il file esiste...
// Imposto gli header della pagina per forzare il download del file
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename= " . $file);
header("Content-Transfer-Encoding: binary");
// Leggo il contenuto del file
readfile($file);
}
?>
Nella pagina html, il link per scaricare ad esempio il file MyFile.htm dovr essere il seguente:
<a target="_parent" href="download.php?filename=MyFile.htm">Clicca qui
per scaricare MyFile</a>
Errore da principianti: il file download.php, per funzionare, deve essere sul server. Se fate una
prova del codice con download.php che nella directory del sito che avete sul vostro hard disk,
quello che viene scaricato il file download.php.
Una pagina in cui una routine php genera una tabella che mostra il contenuto di un
database
back to Index
Aprite la pagina Experiments2.htm . Date un'occhiata al codice con l'opzione "visualizza sorgente
pagina" del tasto destro del mouse (per Explorer l'opzione "HTML"):
<html>
<head>
</script>
<script language="javascript">
{
$('#MostraAutoreButton').prop('checked',true);
$('#NonMostrareAutoreButton').prop('checked',false);
});
function GetPoems()
{
var DisplayResults = "";
if
($('#MostraAutoreButton').prop('checked')){DisplayAuthor="true";}else{Disp
layAuthor="false";}
$.get("GetPoems.php?DisplayAuthor="+DisplayAuthor,function(result54){$('#D
isplayResults').html(result54);},"text");
}
</script>
</head>
<body onload="GetPoems();">
</br></br>
<table align="center" style="text-align:left;width:250px;border:1px solid
black;">
<tr>
<td>
<input align="center" id="MostraAutoreButton" type="radio"

name="MostraAutore" value ="enabled">Mostra l'autore
</br>
<input id="NonMostrareAutoreButton" type="radio" name="MostraAutore"
value ="disabled">Non mostrare l'autore
</td>
</tr>
</table>
</br></br>
<table align="center">
<tr>
<td>
<form name="RefreshForm" action="">
<input type="button" value="REFRESH" onclick="GetPoems();"/>
</form>
</td>
</tr>
</table>
</br></br>
<div id="DisplayResults">
</div>
</body>
</html>
Al caricamento del documento (e ogni volta che viene premuto il bottone "refresh") viene chiamata
la funzione GetPoems(), che a sua volta chiama in modo asincrono il file GetPoems.php presente
sul server, che contiene il seguente codice:
<?php
//VENGONO ACQUISITI I PARAMETRI
$FlagDisplayAuthor=(string)$_GET['DisplayAuthor'];
//CONNESSIONE AL DATABASE
$host = 'localhost';
$user = 'learningsources';
$database = 'my_learningsources';
$password = '';
$MyTable = "Haiku";
$db=mysql_connect($host,$user,$password);
mysql_select_db($database,$db);
//SELEZIONA IL RECORD IN BASE ALLA CONDIZIONE PASSATA COME PARAMETRO
$query="select * FROM Haiku";
$dbResult=mysql_query($query,$db);
$AffectedRows=mysql_numrows($dbResult);
//SE ESISTE IL RECORD CORRISPONDENTE ALLA QUERY, GENERA LA TABELLA
if ($AffectedRows>0)
{
echo "<table align='center' style='border:1px solid blue;backgroundcolor:blue;border:1px solid blue;'>";
if($FlagDisplayAuthor=="true")
{
echo "<td align='center' valign='top' style='color:red;border:1px solid

blue;background-color:white;font-size:150%;font-family:Times New
Roman;padding-left:20px;padding-right:20px;padding-top:15px;paddingbottom:15px;font-weight:bold;'>AUTORE</td>";
Roman;padding-left:20px;padding-right:20px;padding-top:15px;paddingbottom:15px;font-weight:bold;'>HAIKU</td>";
}
else
{
Roman;padding-left:20px;padding-right:20px;padding-top:15px;paddingbottom:15px;font-weight:bold;'>HAIKU</td>";
}
while($row = mysql_fetch_array($dbResult))
{
echo "<tr>";
if($FlagDisplayAuthor=="true")
{
echo "<td align='center' style='border:1px solid blue;backgroundcolor:white;font-size:150%;font-family:Times New Roman;paddingleft:20px;padding-right:20px;padding-top:15px;padding-bottom:15px;fontweight:bold;'>".$row['Autore']."</td>";
echo "<td align='center' style='border:1px solid blue;backgroundcolor:white;font-size:150%;font-family:Times New Roman;paddingleft:20px;padding-right:20px;padding-top:15px;padding-bottom:15px;fontweight:bold;'>".$row['Testo']."</td>";
}
else
{
echo "<td align='center' style='border:1px solid blue;backgroundcolor:white;font-size:150%;font-family:Times New Roman;paddingleft:20px;padding-right:20px;padding-top:15px;padding-bottom:15px;fontweight:bold;'>".$row['Testo']."</td>";
}
echo "</tr>";
}
echo "</table>";
}
//CHIUDE IL DATABASE
mysql_close($db);
?>
Questo codice php si collega alla tabella "Haiku" del database "my_learningsources" presente sul
server altervista.org e invia indietro tramite la funzione "echo" il testo delle poesie e l'autore,
incapsulandoli nelle righe di una tabella (pure generata con la funzione "echo"). Queste righe
vengono visualizzate come contenuto del tag:
<div id="DisplayResults">
</div>
Tramite l'istruzione ajax:

$.get("GetPoems.php?DisplayAuthor="+DisplayAuthor,function(result54){$('#D
isplayResults').html(result54);},"text");
Se il bottone "Mostra Autore" stato selezionato, il parametro "DisplayAuthor" passato alla routine
php "true", e viene generata anche la colonna corrispondente all'autore.
Come importare una tabella Access nel database MySQL del vostro server, utilizzando
XML e php
back to Index
Per compiere questa operazione sfrutteremo una utile funzionalit dei database Access, che
possono esportare il contenuto di una tabella in formato XML.
Creiamo anzitutto nel nostro database MySQL una tabella di prova, che denomineremo "Haiku",
i cui campi sono:
Indice (smallint(6), autoincremento, chiave primaria)
Autore (TEXT, 512 caratteri)
Epoca (TEXT, 512 caratteri)
Paese (TEXT, 512 caratteri)
Soggetto (TEXT, 1024 caratteri)
Testo (TEXT, 65535 caratteri)
Creiamo nel nostro database Access una tabella di prova, che denomineremo "Haiku", i cui
campi sono:
Indice (intero lungo, autoincremento, chiave primaria)
Autore (testo breve, 255 caratteri)
Epoca (testo breve, 255 caratteri)
Paese (testo breve, 255 caratteri)
Soggetto (testo breve, 255 caratteri)
Testo (testo lungo)
Apriamo la tabella "Haiku" in Access e nel menu "DATI ESTERNI" selezioniamo l'opzione "File
XML" e seguiamo le istruzioni per generare il file.
L'esportazione opera solo sui record selezionati, e questo vi permette di scegliere quelli da
trasferire operando un filtraggio sulla tabella Access.
Se volete eliminare dei campi, l'unico modo creare una copia della tabella e rimuovere i campi
dalla sua struttura; altrimenti l'esportazione creer delle intestazioni XML anche per i cambi
indesiderati.
Vi consiglio di non rimuovere i caratteri speciali con cui Access sostituisce le vocali accentate
e altri caratteri critici per XML e HTML, perch a quanto mi risulta le sigle immesse al loro
posto vengono tradotte perfettamente dal browser.
Se il codice php non dovesse funzionare, controllate anzitutto che nel file XML non vi siano
caratteri come apici o virgolette, che devono essere introdotti preceduti dal backslash: \' , \" .
L'unica pecca che nell'esportazione in XML vengono persi i caratteri CR (ritorno a capo).
Nel nostro esempio di prova noi abbiamo gi generato un output XML nel file Haiku.xml (clicca
per scaricarlo).
Creiamo il file EsportaDatabase.php (clicca per scaricarlo) inserendovi il seguente codice:
<?php
//CREA LE VARIABILI CON I NOMI DEI CAMPI
$FNameAutore='Autore';
$FNameEpoca='Epoca';
$FNamePaese='Paese';
$FNameSoggetto='Soggetto';
$FNameTesto='Testo';
//CONNESSIONE AL DATABASE
$host = 'localhost';
$user = 'BlogName';
$password = '';
$database = 'my_BlogName';
$tabella = 'Haiku';
$db=mysql_connect($host,$user,$password)
or die("Impossibile connettersi al server $host");
mysql_select_db($database,$db)
or die("Impossibile connettersi al database $database");
//ACQUISISCE I VALORI DA IMMETTERE NEL DATABASE
$ITEMS = simplexml_load_file('Haiku.xml') or die("ERROR");
foreach($ITEMS->children() as $item)
{
echo $item->Indice."</br>";
$FValueAutore=$item->Autore;
$FValueEpoca=$item->Epoca;
$FValuePaese=$item->Paese;
$FValueSoggetto=$item->Soggetto;
$FValueTesto=$item->Testo;
$sql = "
INSERT INTO $tabella(
$FNameAutore,
$FNameEpoca,
$FNamePaese,
$FNameSoggetto,
$FNameTesto)
VALUES(
'$FValueAutore',
'$FValueEpoca',
'$FValuePaese',
'$FValueSoggetto',
'$FValueTesto')";
$dbResult=mysql_query($sql,$db);
}
//CHIUDE IL DATABASE
mysql_close($db);
?>
In questo esempio abbiamo denominato il nome dell'ipotetico sito "BlogName" e il nome del
database "my_BlogName"
Trasferite sul server il file EsportaDatabase.php
Digitate sulla barra degli indirizzi del vostro browser il seguente indirizzo:
"BlogName.altervista.org/EsportaDatabase.php"
Premendo il pulsante "vai" Il file php verr immediatamente eseguito sul server, e al vostro
browser verr inviata una copia della pagina generata con la funzione "echo", che lista il numero
identificativo dei record trasferiti, per consentirvi di controllare il buon esito dell'operazione. E
questo tutto: in pochi secondi i record sono stati trasferiti sul database del vostro sito.
Alcune cose che php non fa, anche se sembrerebbe possibile

back to Index
Php non ha accesso agli elementi del documento, n in lettura n per modificarli. Non possiede un
modello DOM analogo a quello di javascript.
Per la verit possibile caricare una immagine xml della pagina che php legge, ma gli impossibile
modificare gli elementi della pagina tramite riferimenti DOM.
Ricordate sempre che javascript inizia a funzionare solo dopo che stato eseguito il codice php, e
quindi le funzioni php non sono accessibili a javascript e quelle javascript non sono accessibili a php
(sebbene php possa modificarne il testo).
Introduzione ad ajax
back to Index
Ajax l'acronimo di Asynchronous JavaScript and XML, ed un insieme di tecniche per creare siti
web altamente interattivi e applicazioni web. Una delle tecniche pi importanti e caratteristiche di
ajax quella che combina le risorse di vari linguaggi per ottenere l'aggiornamento della pagina web
usando dati scaricati da internet, senza il refresh della finestra del browser (asynchronous data
retrieval).
Oltre a questa, ajax comprende le tecniche pi potenti che impiegano XML, CSS, il DOM javascript,
in combinazione tra loro per creare una pagina web altamente dinamica. In altre parole, ajax non
un nuovo linguaggio di programmazione, ma piuttosto un insieme di tecniche che utilizza linguaggi
esistenti per ottenere risultati nuovi o pi sofisticati di quelli che si potrebbe ottenere dall'impiego
dei singoli linguaggi. Il linguaggio-base che collega tutte le varie parti di una applicazione ajax
javascript.
La potenzialit pi sofisticata e distintiva di ajax , come abbiamo detto, quella che ottiene dei dati
dal sito che ha inviato la pagina o da altre fonti su internet e li fa apparire sulla pagina senza bisogno
di refresh e senza che la pagina si blocchi durante il download dei dati. Una delle prime applicazioni
ajax di tal genere si avuta per la posta elettronica, ed stata implementata da Google: ogni volta
che arrivava una nuova mail nella casella che l'utente aveva aperto, veniva aggiornata solo la sezione
della finestra contenente la mail, con notevole risparmio di kilobyte da parte della connessione
internet dell'utente. Anche le chat visualizzano ci che gli altri utenti hanno scritto nella vostra
pagina e ci che voi avete scritto sulle pagine degli altri utenti senza nessun refresh dello schermo.
Anche le tecniche di drag-and-drop che consentono alle applicazioni pi avanzate come ad esempio
Mosaic di trascinare un oggetto da un sito internet sulla propria pagina utilizzano ajax per
comunicare cosa ajax deve scaricare dal sito e dove deve visualizzarlo. Anche le immagini possono
essere cambiate, modificando la sorgente senza cambiare l'intera pagina. Giochi online come i giochi
degli scacchi modificano l'aspetto della scacchiera senza modificare altri elementi della pagina
grazie ad ajax.
Per vedere ajax all'opera, apriamo il file AjaxExample1.htm e clicchiamo sul bottone che vi appare:
il messaggio nel box cambier, e verr visualizzato il testo: "Welcome to Ajax!". Questo testo
contenuto nel file data.txt, che posto sul server. Analizziamo il codice della pagina:
<html>
<head>
{
}
{
}
function getData(dataSource, divID)
{
{
XMLHttpRequestObject.open("GET", "data.txt");
{
{
document.getElementById("targetParagraph").innerHTML =
XMLHttpRequestObject.responseText;
}
}
}
}
</script>
</head>
<body>
</br>
<p style="text-align:center;font-size:120%;font-weight:bold;">Un
esempio di acquisizione di dati in modo asincrono da parte del browser
tramite ajax</p>
</br></br>
<form style="text-align:center;">
<input type = "button" value = "Acquisisci il messaggio" onclick =
"getData();">
</form>
</br></br>
<p id="targetParagraph" style="font-size:110%;color:red;border:1px
solid black;height:40px;width:400px;margin:auto;paddingtop:20px;padding-bottom:0px;">Il messaggio acquisito apparir qui</p>
</div>
</body>
</html>
Il paragrafo destinato ad ospitare i dati acquisiti in modo asincrono da data.txt il paragrafo

"targetParagraph":
</div>
La funzione getData() viene richiamata con la seguente istruzione, inserita nel tag <button>:
onclick = "getData();"
Le istruzioni, contenute nella funzione getData, che trasferiscono i dati nel paragrafo sono:
document.getElementById("targerParagraph").innerHTML =
Ma come viene acquisito il contenuto di data.txt? Viene anzitutto creato l'oggetto di classe
XMLHttpRequest, che serve a JavaScript a comunicare con il server e a scaricare dati dal server:
{
}
{
}
L'oggetto viene posto in una variabile globale chiamata XMLHttpRequestObject. L'oggetto

XMLHttpRequest disponibile come oggetto javascript in tutti i browser, ma differente il modo
di accedervi da browser a browser. Netscape Navigator, Safari versione 1.2 e successive e Firefox
permettono di creare un oggetto XMLHttpRequest direttamente con l'istruzione:
Questo implica che esista l'oggetto window.XMLHttpRequest, e quindi la possibilit di crearlo per
tal via pu essere testata con l'istruzione condizionale:
if(window.XMLHttpRequestObject) {}
Nel caso di Internet Explorer, Microsoft, come sempre, fa a modo suo, e richiede una istruzione
diversa:
Una volta creati questi oggetti, almeno per le funzionalit di base, funzionano allo stesso modo in
tutti i browser.
Ecco i metodi dell'oggetto XMLHttpRequest di Internet Explorer:

PROPRIET
DESCRIZIONE
onreadystatechange Contiene il nome del gestore di eventi che deve essere chiamato quando il
valore della propriet
readyState cambia (lettura/scrittura)
readyState
Contiene lo stato della richiesta (lettura)
responseBody
Contiene il corpo della risposta risposta. E' uno dei modi in cui una richiesta
HTTP pu essere eseguita
responseStream
Contiene uno stream binario di risposta alla richiesta HTTP (lettura)
responseText
Contiene il corpo della risposta come stringa (lettura)
responseXML
Contiene il corpo della risposta come documento XML (lettura)
status
Contiene il codice HTTP di status restituito in seguito a una richiesta
(lettura)
statusText
Contiene lo status della risposta come testo (lettura)
METODO
DESCRIZIONE
abort
getAllResponseHeaders
getResponseHeader
open
send
setRequestHeader
abortisce la richiesta HTTP

restituisce gli headers HTTP
restituisce il valore di un header HTTP
apre una richiesta al server
invia una richiesta al server
setta il nome e il valore di un header HTTP
Ecco le propriet e metodi dell'oggetto XMLHttpRequest per Firefox e NetScape Navigator

PROPRIET
DESCRIZIONE
channel
readyState
responseText
responseXML
status
statusText
Contiene il canale utilizzato per effettuare la richiestra (lettura)

Contiene il codice HTTP di status restituito in seguito a una richiesta (lettura)
METODO
DESCRIZIONE
abort
getResponseHeader
openRequest
overrideMimeType

metodo nativo (nonscript) per aprire una richiesta al server
bypassa il tipo MIME che il server restituisce
Ecco le propriet e metodi dell'oggetto XMLHttpRequest per Safari:

PROPRIET
DESCRIZIONE
onreadystatechange
Contiene il nome del gestore di eventi che deve essere chiamato quando
il valore della propriet
readyState cambia (lettura/scrittura)
readyState
responseText
responseXML
status
statusText

Contiene il codice HTTP di status restituito in seguito a una richiesta
(lettura)
METODO
DESCRIZIONE
abort
getResponseHeader
open
send
setRequestHeader

apre una richiesta al server
invia una richiesta al server
setta il nome e il valore di un header HTTP
Al caricamento del documento il browser cerca di creare, secondo le istruzioni, un oggetto

XMLHttpRequest. Il codice che segue, contenuto nella funzione getData(), controlla anzitutto
che la variabile sia stata creata con successo, e solo in quel caso procede all'esecuzione delle
istruzioni ajax:
{
.........
.........
.........
}
A questo scopo la variabile XMLHttpRequestObject inizializzata con il valore false, in

modo che, se non si avuto successo nel crearla, l'istruzione sopra riportata d come valore
"false"
Se l'oggetto stato creato, esso viene aperto:
XMLHttpRequestObject.open("GET", dataSource);
La struttura del metodo .open la seguente (i parametri opzionali sono compresi tra parentesi
quadre):
open(metodo, URL, [asyncFlag], [userName], [password])
ecco una spiegazione dei parametri:

metodo
il metodo HTTP utilizzato per aprire la connessione

(GET, POST, PUT, HEAD, PROPFIND)
URL
l'URL da contattare quando ci si connette col server
asyncFlag un valore booleano che indica se la chiamata asincrona (default: true)
userName lo username del proprio account
password la password utilizzata per collegarsi al proprio account
Nel nostro esempio il metodo scelto per contattare il server il metodo "GET" (che il modo usuale
di contattare i server). L'URL passata alla funzione tramite il parametro dataSource. Il metodo
open configura l'oggetto XMLHttpRequest, ma non apre ancora alcuna connessione col server.
L'URL si pu riferire non solo ad un file di dati, ma anche ad un file che contiene uno script php
destinato a recuperare/creare i dati. L'URL si pu riferire a un file che sullo stesso server su cui
la pagina HTML che utilizza il codice ajax, oppure ad un server estraneo che mette a disposizione
la risorsa cercata (ad es. Google mette a disposizione i suoi notiziari o il risultato di una ricerca in
formato XML o Json).
Il processo asincrono (valore di default) non solo nel senso che alla sua conclusione non avviene
il refresh dell'intera pagina, ma anche nel senso che la pagina non si blocca in attesa che il download
dei dati sia completato: l'utente pu continuare ad interagire con essa mentre esso viene effettuato.
Ajax segnala al browser che il download si concluso mediante la propriet
XMLHttpRequestObject.onreadystatechange, che attiva una funzione di callback
quando si verifica una variazione qualsiasi nello stato del download (inizio del download, download
gi iniziato, completamento del download ecc.).
XMLHttpRequestObject.onreadystatechange = function() {...}
In realt, la propriet onreadystatechange segnala solo che la variabile di stato

XMLHttpRequestObject.readyState, che esprime la situazione del download ha subito un
mutamento: occorre verificare che il cambiamento coincide con il completamento del download,
verificando la propriet XMLHttpRequestObject.readyState e la propriet
XMLHttpRequestObject.status:
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status
== 200)
Ecco un prospetto dei valori che pu assumere la propriet readyState:

0
1
2
3
4
Unitialized
Loading
Loaded
Interactive
Complete
Ecco un prospetto dei valori che pu assumere la propriet status:

200
201
204
205
206
400
401
403
404
405
406
407
408
411
413
414
415
500
OK
Created
No Content
Reset Content
Partial Content
Bad Request
Unauthorized
Forbidden
Not Found
Method Not Allowed
Not Acceptable
Proxy Authentication Required
Request Timeout
Length Required
Requested Entity Too Large
Requested URL Too Long
Unsupported Media Type
Internal Server Error
501
502
503
504
505
Not Implemented
Bad Gateway
Service Unavailable
Gateway Timeout
HTTP Version Not Supported
Il verificarsi della condizione XMLHttpRequestObject.readyState == 4 ("download

completato") non sufficiente: occorre testare la condizione XMLHttpRequestObject.status
== 200 ("download effettuato con successo") per poter iniziare a lavorare con i dati.
Prima che l'istruzione contenuta nella funzione di callback sia eseguita:
obj.innerHTML = XMLHttpRequestObject.responseText;
occorre effettuare la chiamata al server: tutto ci che abbiamo fatto sinora stato prepararla. La
chiamata viene effettuata tramite una semplice istruzione:
Perch viene passato un valore null? Perch il passaggio di eventuali parametri previsto dal metodo
POST, ma non dal metodo GET, e quindi va inviato un argomento vuoto.
Lo stesso risultato (ottenimento di una stringa di testo "Welcome to Ajax!" dal server pu essere
ottenuto chiamando un file php anzich un file txt. La funzione getData() sar allora richiamata
con la seguente istruzione, inserita nel tag <button>:
onclick = "getData('data.php', 'targetParagraph')"
Ovviamente dovr esistere un file data.php sul server, che invii la stringa con la tipica istruzione
"echo" di php. Ecco il contenuto del file data.php:
<?php
echo "Welcome to Ajax!";
?>
Inviare dati al server tramite i metodi GET e POST e gestirli con una routine php
back to Index
Il metodo "GET" che abbiamo visto sopra consente, utilizzando un file php, di inviare, anzich
ricevere dati al server. Per far questo sufficiente far seguire il nome del file php con cui si vuole
comunicare da un punto interrogativo seguito dal nome (arbitrario) dei parametri e dal loro valore:
Nel file AjaxExample2.htm abbiamo posto lo stesso codice di AjaxExample1.htm, tranne che per
l'istruzione che contiene il file da chiamare (qui sotto evidenziata in colore):
{
}
{
}
function getData(dataSource, divID)
{
{
XMLHttpRequestObject.open("GET",
"data2.php?Nome=Pietro&Cognome=Gambadilegno");
{
{
document.getElementById(divID).innerHTML =
}
}
}
}
</script>
L'istruzione:
XMLHttpRequestObject.open("GET",
"data.php?Nome=Pietro&Cognome=Gambadilegno");
contiene il parametro "Nome=Pietro" e il parametro "Cognome=Gambadilegno". I nomi dei

parametri possono essere completamente arbitrari. Essi possono essere letti dal file data2.php con la
seguente istruzione:
$Nome = $_GET["Nome"];
$Cognome = $_GET["Cognome"];
Per essere sicuri di aver acquisito il contenuto come stringa si pu usare la variante:
$Nome = (string)$_GET["Nome"];
$Cognome = (string)$_GET["Cognome"];
Poi il nome e il cognome sono inviate indietro al computer client che ha effettuato la chiamata
tramite l'istruzione:
echo $Nome." ".$Cognome;
L'intero codice del file data2.php quindi:

<?php
$Nome = $_GET["Nome"];
$Cognome = $_GET["Cognome"];
?>
Cliccando sul bottone, apparir nel paragrafo MyParagraph il testo: "Il nome inviato al server :
Pietro Gambadilegno".
Per inviare questi dati, invece che il metodo GET si pu usare il metodo POST. Si pu osservare in
azione tale metodo aprendo il file AjaxExample3.htm. Il codice ajax per collegarsi al server allora
sar il seguente (le modifiche sono evidenziate in colore):
{
}
{

}
function getData()
{
{
XMLHttpRequestObject.open("POST", "data3.php");
XMLHttpRequestObject.setRequestHeader('Content-Type','application/xwww-form-urlencoded');
{
{
document.getElementById("targetParagraph").innerHTML = "Il nome
inviato al server : "+XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send("Nome=Pietro&Cognome=Gambadilegno");
}
}
</script>
Come si vede, non viene pi inviata una stringa nulla con l'istruzione
XMLHttpRequestObject.send, ma una stringa contenente i parametri che col metodo GET
venivano passati con l'URL del documento a cui collegarsi:
XMLHttpRequestObject.send("Nome=Pietro&Cognome=Gambadilegno");
Il codice del file data3.php sar il seguente:

<?php
$Nome=$_POST["Nome"];
$Cognome=$_POST["Cognome"];
?>
Acquisire un documento XML dal server e metterlo a disposizione di javascript

back to Index
Vediamo ora come si pu utilizzare il codice ajax per il collegamento asincrono in modo da ottenere
dal server non una stringa di testo, ma un documento XML. Proveremo a caricare e manipolare il
file colors.xml, che ha il seguente contenuto:
<?xml version="1.0">
<colors>
<color>red<color>
<color>green</color>
<color>blue</color>
</colors>
Aprite il documento XMLDisplay2.htm ed osservatene il codice:

<html>
<head>
{
}
{
}
function getData()
{
{
Date().getTime());
{
{
document.getElementById("targetParagraph").innerHTML = "Il secondo
colore : " + colors[1].firstChild.nodeValue;
}
}
}
}
</script>
</head>
<body>
</br>
<p style="text-align:center;font-size:120%;font-weight:bold;">
Un esempio di acquisizione di dati da un documento XML in modo
asincrono da parte del browser tramite ajax:</br>
La chiamata al file <span style="font-family:Courier New;fontsize:90%">colors.xml</span> restituisce il documento <span style="fontfamily:Courier New;font-size:90%">xmlDoc</span>.</br>
Il codice javascript di questa pagina legge i colori contenuti nei
tag <span style="font-family:Courier New;fontsize:90%"><color></span>.</br>
I nomi dei colori vengono poi visualizzati nel box, senza che il
resto della pagina subisca il <i>refresh</i>.
</p>
</br></br>
"getData();">
</form>
</br></br>
</div>
</body>
</html>
Il codice evidenziato in colore contiene le istruzioni per acquisire e leggere il documento XML:
Date().getTime());
... ... ...
La prima riga configura l'oggetto XMLHttpRequestObject per una chiamata ajax, che poi viene
effettuata con:
Seguono poi delle righe che abbiamo omesso per controllare se il download dei dati sia avvenuto
con successo, e poi la lettura dei dati inviati in formato XML e il loro salvataggio nella variabile
xmlDocument:
Successivamente viene creato un array che contiene tutti i nodi <color> del documento XML:
Infine, viene letto il valore del secondo nodo (dato che la numerazione degli array sovente inizia da
"0", il secondo nodo avr il numero "1"):
Questo valore viene poi mostrato nel box "targetParagraph":

Acquisire codice javascript dal server ed eseguirlo immediatamente tramite la funzione

eval()
back to Index
Allo stesso modo in cui ajax pu effettuare il download di testo e XML, pu scaricare dal server
codice javascript ed eseguirlo immediatamente. Aprite il file AjaxExample4.htm ed osservatene il
codice:
<html>
<head>
{
}
{
}
function getData()
{
{
XMLHttpRequestObject.open("GET", "data4.php");
{
{
eval(XMLHttpRequestObject.responseText);
}
}
}
}
function show()
{
document.getElementById("targetParagraph").innerHTML="La funzione
show() stata attivata";
}
</script>
</head>
<body>
</br>
<p style="text-align:center;font-size:120%;font-weight:bold;">
Un esempio di acquisizione di dati in modo asincrono da parte del
browser tramite ajax:</br>
La chiamata al file <span style="font-family:Courier New;fontsize:90%">data4.php</span> acquisisce il codice javascript della
funzione <span style="font-family:Courier New;fontsize:90%">show()</span> e lo esegue.</br>
La funzione <span style="font-family:Courier New;fontsize:90%">show()</span> fa apparire una stringa nel box.
</p>
</br></br>
"getData();">
</form>
</br></br>
</div>
</body>
</html>
La prima linea di codice evidenziata in colore acquisisce l'echo del file data4.php, che consiste
di una sola riga di codice javascript:
<?php
echo 'show()';
?>
la stringa 'show()' viene eseguita come codice javascript dalla funzione eval(), e richiama la
funzione definita nelle righe successive evidenziate in colore: questa funzione far apparire un testo
nel box della pagina.
Creare un oggetto javascript che incorpori una pagina html esterna e manipolarla
back to Index
E' possibile incorporare un documento html esterno in un oggetto javascript da poter trattare con una
interfaccia DOM allo stesso modo dell'oggetto document che rappresenta la pagina corrente?
In alternativa, possibile acquisirlo come pagina XML e leggerlo secondo la sintassi javascript per
i files XML?
Quando una stringa passata come parametro alla funzione $(), jQuery controlla se abbia dei tag
html; se non li ha, la stringa interpretata come selettore; se li ha, viene creato un nuovo DOM
element, sul quale possono essere effettuate tutte le operazioni jQuery.
Primo sistema: utilizzare l'istruzione .load di jQuery
Con jQuery disponiamo dell'istruzione:
$("#targetParagraph").load("MyPage2.htm #MyFirstParagraph");
che consente di caricare un elemento di una pagina web esterna (in questo caso "MyPage2.htm")
direttamente in un elemento della pagina corrente (tipicamente un <div> o un <p> o un <td>).
Mediante una stringa come "#MyFirstParagraph" si pu selezionare uno specifico elemento
tramite il suo id. Si ricordi solo di distanziare di uno spazio l'id dal nome del documento. Questa
istruzione pu caricare files di tipo diverso da html: files di testo o xml.
Secondo sistema: utilizzare una routine php che scarichi la pagina e la invii tramite ajax al computer
client (sconsigliato)
Esistono delle istruzioni php che possono inviare un documento tramite la funzione echo:
{
}
{
}
function getData()
{
{
XMLHttpRequestObject.open("GET", "data5.php");
XMLHttpRequestObject.responseType = "document";
{
{
alert(XMLHttpRequestObject.responseXML.getElementsByTagName("body")[0].n
odeName);
}
}
}
}
Questa routine ajax richiama il file data5.php, che fa il dowload di un file da un server qualsiasi
della rete (in questo caso dal server learningsources.altervista.org):
<?php
$filehandle = fopen("www.learningsources.altervista.org/MyPage2.htm",
"r");
while (!feof($filehandle))
{
$download = fgets($filehandle);
echo $download;
}
fclose($filehandle);
?>
Il codice ajax genera un alert che reca scritto "BODY" (che il nome dell'elemento selezionato).
L'utilizzo di php serve, in alternativa al caricamento diretto, a impedire che il processo di download
sia interrotto da una richiesta di autorizzazione da parte del browser, che viene spesso visualizzata
se il server dal quale si importa il file diverso dal server a cui collegato il browser. Ma il codice
impiega circa trenta secondi per ultimare il caricamento e visualizzare l'informazione sul
documento, pertanto di scarsa utilit.
Stesso rallentamento inaccettabile utilizzando in alternativa una routine jQuery:
function getData()
{
$.ajax
({
url:"data5.php",
dataType:"html",
success:function(htmlDocument)
{
alert(XMLHttpRequestObject.responseXML.getElementsByTagName("body")[0].n
odeName);
}
});
}
Terzo sistema: utilizzare il metodo document.implementation.createHTMLDocument

Esiste un metodo di recente introduzione per acquisire una pagina html esterna come oggetto
document di javascript, che permette di utilizzare tutti i metodi e le propriet di un modello DOM.
Esso supportato da Internet Explorer versione 9 e successive, da Chrome, Opera, Safari tra gli altri
browser. Ecco la sintassi per creare tramite una routine ajax un simile documento e leggerne un tag
<div> (con jQuery le istruzioni possono essere significativamente accorciate):
{
}
{
}
function getData()
{
{
XMLHttpRequestObject.open("GET", "MyPage2.htm");
{
if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status
== 200)
{
var doc = document.implementation.createHTMLDocument("MyDocument");
doc.documentElement.innerHTML = XMLHttpRequestObject.responseText;
alert(doc.getElementById("MyFirstParagraph").innerHTML);
}
}
}
}
Il documento MyPage2.htm cui fa riferimento la routine (vedi istruzioni evidenziate in colore) ha

il seguente contenuto:
<html>
<head>
</head>
<body>
<p id="MyFirstParagraph">Questo e' il primo paragrafo</p>
<p id="MySecondParagraph">Questo e' il secondo paragrafo</p>
</body>
</html>
Nell'alert box comparir la stringa "Questo il primo paragrafo". Anche gli altri metodi DOM
javascript sono applicabili a questo oggetto, come ad esempio l'istruzione:
alert(doc.getElementById("MyFirstParagraph").attributes.id.value);
oppure l'istruzione:
alert(doc.getElementsByTagName("p")[0].innerHTML);
Quarto sistema: caricare la pagina in un tag <iframe> e leggerla (non funziona)

Ormai tutti i browser supportano il tag <iframe>, ottimizzato per il caricamento di elementi da
altre pagine web. La sintassi per utilizzarlo molto semplice:
<iframe src="http://www.w3schools.com"></iframe>
In questo caso si caricata nella finestra la HomePage del consorzio w3schools. Una serie di attributi
opzionali consente di settare la posizione, la larghezza della finestra, ecc. Per i nostri scopi l'iframe
dovrebbe essere nascosto. Ma in realt questa soluzione non funziona, perch quando si va a far
eseguire l'istruzione:
Si ottiene il messaggio "0": cio non ci sono nodi nel contenuto di "MyIframe".
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/HTML_to_DOM : contiene una

descrizione del metodo document.implementation.createHTMLDocument, nel paragrafo "Parsing
Complete HTML to DOM"
Come ottenere l'esatto indirizzo di una pagina internet che si vuole utilizzare con
javascript
back to Index
Per poter utilizzare elementi di una pagina internet con javascript (vedi l'articolo sui vari modi di
farlo) occorre disporre dell'indirizzo completo della pagina web. L'indirizzo andrebbe sempre
digitato preceduto da "http://www.", per evitare malfunzionamenti di routines javascript o
jQuery, e non semplicemente preceduto dal solo "www." (ad esempio questo indirizzamento non
funziona con la funzione .load() di jQuery). Indirizzi come: "www.usatoday.com" o
"www.flowersgallery.com" sono solo indirizzi di directory all'interno delle quali si trova il
file-indice che viene inviato al browser, non di rado annidato in sottodirectory.
I server web sono configurati in modo da inviare una pagina di default ogni volta che un browser
richiede un nome di directory. Per esempio, se il vostro link "www.example.com/about/", un
tipico server web cercher in quella directory un file chiamato "index.html". Normalmente, una
volta caricato questo file, esso non sar mostrato nella barra degli indirizzi, che continuer a mostrare
la stringa sopra indicata.
Purtroppo, normalmente i server web disabilitano il listing della directory, che quindi non pu essere
ottenuto con nessun tipo di richiesta ajax o di altro tipo. In questi casi, si pu solo tirare ad
indovinare, provando i nomi pi comuni, come "index.htm", "index.html", "index.php",
"index.asp", ma se questo non funziona, non c' modo di ottenere l'esatto indirizzo della pagina
web.
Un modo di ottenerlo pu essere l'utilizzo di GNU Wget, un programma open source che consente
il download di files dai server usando HTTP, HTTPS, FTP, e che pu essere usato per ottenere il
listato della directory. Caratteristiche simili ha il programma cURL.
Una pagina per sperimentare semplice codice javascript, jQuery, ajax, php
back to Index
Aprite la pagina Experiments_1.htm , provate a cliccare sui vari elementi e visualizzatene il codice
con l'opzione "visualizza sorgente pagina" del tasto destro del mouse (per Explorer l'opzione
"HTML").
Alcune cose che con ajax non si possono fare, anche se apparentemente sembrerebbero
semplici
back to Index
Per quanto questo possa lasciare increduli, praticamente impossibile esportare i valori che si
ottengono entro una routine che utilizza l'oggetto XMLHttpRequest, del tipo:
if (window.XMLHttpRequest) {
} else if (window.ActiveXObject) {
}
function getData()
{
if(XMLHttpRequestObject) {
XMLHttpRequestObject.open("GET", "MiaPagina.php");
{
if
(XMLHttpRequestObject.readyState
==
4
XMLHttpRequestObject.status == 200) {
document.Message= XMLHttpRequestObject.responseText;
}
}
}
}
</script>
&&
La funzione function getData() si collega al documento MiaPagina.php presente sul

server e riceve in risposta la stringa XMLHttpRequestObject.responseText, che provvede
a memorizzare nella variabile globale document.Message.
Ma questo codice non funziona, nel senso che nessuna routine javascript esterna alla funzione
getData() sar in grado di leggere e utilizzare il contenuto della variabile document.Message.
Il contenuto stato acquisito con successo (per verificarlo sufficiente scrivere, entro la routine
getData(), l'istruzione alert(document.Message)); ma non visibile all'esterno.
In altre parole: tutto il codice che fa riferimento al contenuto di document.Message deve essere
scritto entro la routine getData().
Provare per credere. Impiegate tutti i trucchi che vi vengono in mente (memorizzazione entro un
tag, richiamo di una funzione esterna a cui passare il valore e che lo scrive in una qualche parte,
ecc.), niente funzioner.
E questo vero sia per javascript sia per una libreria sofisticata come jQuery
Cos' un documento XML e come lo si pu gestire

back to Index
Un documento XML simile ad un documento HTML, nel senso che entrambi sono strutturati
mediante tag, meglio detti nel caso di XML nodi o elementi:
<friends>
<friend>
<FirstName>Cary</FirstName>
<LastName>Grant</LastName>
</friend>
<friend>
<FirstName>Myrna</FirstName>
<LastName>Loy</LastName>
</friend>
<friend>
<FirstName>James</FirstName>
<LastName>Stewart</LastName>
</friend>
</friends>
A differenza di un documento HTML, in cui il tipo di elementi o tag rigidamente predefinito, in

un documento XML si pu attribuire ad un tag un nome qualsiasi, come si vede sopra.
Tutti i documenti XML iniziano con una dichiarazione del tipo:
E' necessario indicare la versione. Una versione comunemente usata "1.0", ma si pu indicare
anche "1.1". Gli altri argomenti che possono essere inclusi sono standalone ed encoding, come ad
esempio:
<?xml version="1.0" standalone="yes" encoding="UTF-8">
Standalone = "yes" indica che indica che il documento non include altri documenti XML.
Encoding = "UTF-8" stabilisce che si intende utilizzare il set di caratteri UTF-8, che quello
utilizzato da WordPad e altri standard editor di testo.
I nomi dei tag non possono iniziare con numeri, non possono contenere spazi o alcuni caratteri non
consentiti come virgolette.
Tutti i documenti XML necessitano di un document element, cio un singolo nodo o elemento che
contiene tutti gli altri nodi o elementi del documento. Nell'esempio sottostante il document element
il nodo <colors> del file colors.xml:
<colors>
<color>red<color>
<color>green</color>
<color>blue</color>
</colors>
Ogni altro elemento deve essere contenuto nel document element.

Possono esistere, come in HTML, empty elements, cio elementi costituiti da un solo tag, che quindi
non racchiudono alcun contenuto (il tag <img> in HTML uno di questi). In XML un empty element
deve terminare sempre con lo slash:
<evening/>
Questi elementi sono un'alternativa ad un nodo contenente l'informazione:

<party>
<evening/>

</party>
equivale a:
<party>
<time>evening</time>
</party>
Gli elementi XML possono anche includere attributi (che sono anch'essi considerati nodi):
<party type="winter">
In XML ad un attributo va sempre dato un valore.

Entro un nodo XML si pu inserire del testo:
<PartyTitle>Snow Day</PartyTitle>
I nodi possono essere di vario tipo, e la propriet nodeType restituisce un numero corrispondente:
Tipo di nodo
nodeType
Element node
1
Attribute node
2
Text Node
3
CDATA (XML character data) section node
4
XML entity reference node
5
XML entity node
6
XML processing instruction node
7
XML comment node
8
XML document node
9
XML DTD node
10
XML document fragment node
11
XML notation node
12
Un file XML pu essere caricato in memoria sia dall'hard-disk del computer client che dall'harddisk del server.
Per caricarlo dal server utilizziamo Ajax (il codice sar commentato in seguito):
{
}
{
}
{
XMLHttpRequestObject.open("GET", "colors.xml", true);
{
{
var sourceDocument = XMLHttpRequestObject.responseXML;
var xmlDocument = sourceDocument.documentElement;
alert("Il nome del nodo principale " + xmlDocument.nodeName);

alert("Il nodo principale contiene " +
xmlDocument.childNodes.length);
}
}
}
Il codice eseguito dopo il caricamento del documento fa apparire un box di dialogo con la stringa
"colors", che il nome del nodo documentElement, e successivamente un altro box con la stringa
"3", che il numero dei tag <color> contenuti nel documentElement.
Per caricare invece un documento presente sull'hard-disk del computer client si usa l'istruzione:
xmlSource=loadXMLDoc("colors.xml");
Supponiamo di avere un documento XML come il seguente:

<?xml version="1.0"?>
<parties>
<party type="winter">
<party_title>Snow Day</party_title>
<party_number>63</party_number>
<subject>No school today!</subject>
<date>2/2/2009</date>
<people>
<person attendence="present">
<first_name>Ralph</first_name>
<last_name>Kramden</last_name>
</person>
<person attendance="absent">
<first_name>Alice</first_name>
<last_name>Kramden</last_name>
</person>
<person attendance="present">
<first_name>Ed</first_name>
<last_name>Norton</last_name>
</person>
</people>
</party>
</parties>
Supponiamo di aver gi acquisito il document element del file party.xml mediante le istruzioni:
xmlSource=loadXMLDoc("party.xml");
xmlDocument = xmlSource.documentElement;
Vediamo ora come fare per estrarre il cognome del terzo ospite del party (Ed Norton) dal documento
party.xml. Per far questo dobbiamo conoscere gli oggetti che javacript mette a disposizione per
acquisire i nodi:
Oggetto javascript
element.childNodes
element.firstChild
Descrizione
Array che contiene tutti i nodi di livello immediatamente inferiore
a quello del nodo element, ed inclusi in esso
(nel caso dellelemento document element i childnodes sono
costituiti dal solo nodo <party>, mentre nel caso dellelemento
<people> i childnodes sono i nodi <person>)
Il primo dei childnodes del nodo element, secondo la disposizioone
che hanno nel documento.
(nel caso dellelemento <people> il firstChld il nodo <person> di

Ralph Kramer)
Lultimo dei childnodes del nodo element, secondo la
disposizioone che hanno nel documento.
element.lastChild
(nel caso dellelemento <people> il lastChld il nodo <person> di
Ed Norton)
Il successivo nodo di pari livello rispettto al nodo element
element.nextSibling
(nel caso dellelemento <date> il nextSibling il nodo <people>)
Il nodo precedente tra quelli di pari grado rispetto al nodo element
element.previousSibling (nel caso dellelemento <people> il previousSibling il nodo
<date>)
Con queste premesse, per ottenere la stringa Norton occorre utilizzare lespressione:
xmlDocument.documentElement.firstChild.lastChild.lastChild.lastChild.fir
stChild.nodeValue
infatti si hanno le seguenti corrispondenze:
xmlDocument.documentElement.firstChild
xmlDocument.documentElement.firstChild.lastsChild
xmlDocument.documentElement.firstChild.lastChild.lastChild
xmlDocument.documentElement.firstChild.lastChild.lastChild.lastChild
xmlDocument.documentElement.firstChild.lastChild.lastChild.lastChild.f
La propriet nodeValue consente di acquisire il contenuto delloggetto, che non pu essere
manipolato come dato o mostrato come tale nella pagina web (se si provasse a mettere lespressione
senza .nodeValue in un alert box il valore sarebbe undefined, il tipico risultato che si ottienne
trattando un oggetto come un dato),
Equivalentemente, utilizzando loggetto nextSibling si pu ottenere la stringa Norton con
lespressione:
xmlDocument.documentElement.firstChild.lastChild.firstChild.nextSibling.
nextSibling.lastChild.firstChild.nodeValue
Proviamo ora un'altra via per acquisire la stringa "Norton", utilizzando l'array creato mediante
getElementsByTagName:
var LastNames = xmlDocument.getElementsByTagName("last_name");
var EdNortonLastName = LastNames[2].firstChild.nodeValue;
(si tenga presente che la numerazione dell'array inizia con "0" e non con "1")
Cerchiamo ora di acquisire gli attributi di un nodo, ad esempio l'attributo "attendance" di Ralph
Kramden:
var RalphKramdenAttendance =
xmlDocument.getElementsByTagName("person")[0].attributes.getNamedItem("a
ttendance");
Un utile trucco per individuare uno specifico nodo che ci interessa quello di creare un loop che
scorra tutti i nodi e verifichi una condizione che ci consenta di identificare il nodo che ci interessa.
Supponiamo di voler trovare lo stesso dato dell'esempio precedente, cio la presenza di Ralph
Kramden. Carichiamo party.xml in memoria ed acquisiamo il document element con le istruzioni:
xmlSource=loadXMLDoc("party.xml");
xmlDocument = xmlSource.documentElement;
Successivamente scorriamo tutti i nodi <person> del document element, alla ricerca del nodo di Ed
Norton:
Guests = xmlDocument.getElementsByTagName("person");
var LoopIndex;
for(LoopIndex=0;LoopIndex<Guests.length;LoopIndex++)
{
if (Guests[LoopIndex].LastChild.nodeValue = "Kramden")
{
RalphKramdenAttendance =
Guests[LoopIndex].attributes.getNamedItem("attendance");
alert(RalphKramdenAttendance);
}
}
Ecco il riepilogo di alcune istruzioni con cui possibile manipolare il documento

xmlDocument.documentElement.Childnodes
xmlDocument.documentElement.Childnodes.length
xmlDocument.documentElement.Child
xmlDocument.documentElement.getElementsByTagName("colore")[0]
xmlDocument.documentElement.firstChild.nodeValue
Leggere un documento XML posto sul server e farne apparire il contenuto nella pagina
web
back to Index
Consideriamo la seguente pagina XMLDisplay1.htm :

<html>
<head>
.AjaxBox {
margin-left: auto;
margin-right: auto;
width:40%;
height:auto;
text-align:center;
padding-top:10px;
padding-bottom:10px;
background-color:AliceBlue;
text-align:center;
vertical-align : center;
position : absolute;
left : 30%;
top : 100px;
}
</style>
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></
script>
function DisplayXML()
{
$.get("XMLSend.php",function(xmldoc)
{
var ArrayPoesie=xmldoc.getElementsByTagName("Testo");
var LoopIndex;
document.getElementById("Poesie").innerHTML="";
for(LoopIndex = 0; LoopIndex<xmldoc.documentElement.childNodes.length;
LoopIndex++)
{
document.getElementById("Poesie").innerHTML=document.getElementById("Poe
sie").innerHTML+"<p
align='center'>"+ArrayPoesie[LoopIndex].firstChild.nodeValue+"</p>";
}
},"xml");
}
</script>
</head>
<body>
<div id="Poesie" class="AjaxBox">
<p><a id="MyAnchor" href="#" onclick="DisplayXML();">Clicca qui per
acquisire e leggere un file XML tramite ajax</a></p>
</div>
</body>
</html>
Il blocco di codice:
<div id="Poesie" class="AjaxBox">
<p><a id="MyAnchor" href="#" onclick="DisplayXML();">Clicca qui per
acquisire e leggere un file XML tramite ajax</a></p>
</div>
crea un box nella pagina web dove comparir il testo delle poesie.
Il blocco di codice:
{
{
var LoopIndex;
LoopIndex++)
{
sie").innerHTML+"<p
}
},"xml");
}
definisce la funzione DisplayXML() che si attiva quando si clicca sul testo posto nel box, e vi
inserisce il testo delle poesie.
Mediante l'istruzione:
$.get("XMLSend.php",function(xmldoc){...},"xml");
(dove, al posto dei puntini ci sono le istruzioni che commenteremo) la funzione DisplayXML() apre
in modo ajax (asincrono) il file XMLSend.php, che legge il file Haiku.xml e lo invia come
documento XML (xmldoc):
<?php
$Haiku = simplexml_load_file('Haiku.xml');
$xmlDocument ="<?xml version='1.0'?><dataroot>";
foreach($Haiku->children() as $item)
{
$xmlDocument=$xmlDocument."<Haiku>";
$xmlDocument=$xmlDocument."<Autore>".$item->Autore."</Autore>";
$xmlDocument=$xmlDocument."<Testo>".$item->Testo."</Testo>";
$xmlDocument=$xmlDocument."</Haiku>";
}
$xmlDocument=$xmlDocument."</dataroot>";
echo $xmlDocument;
?>
Il file Haiku.xml (e il documento xmldoc) si presenta cos:

<?xml version="1.0" encoding="UTF-8"?>
<dataroot>
<Haiku>
<Indice>1</Indice>
<Autore>Ito Shintoku</Autore>
<Epoca>1634-1698</Epoca>
<Paese>Giappone</Paese>
<Soggetto>pioggia</Soggetto>
<Testo>pioggia: attraversa il mio cancello un mazzo di iris</Testo>
</Haiku>
...
<Haiku>
<Indice>7</Indice>
<Autore>Konishi Raizan</Autore>
<Soggetto>campi di neve</Soggetto>
<Testo>nei campi di neve verdissimo il verde delle erbe nuove</Testo>
</Haiku>
...
<Haiku>
<Indice>10</Indice>
<Autore>Konishi Raizan</Autore>
<Soggetto>alzo il capo</Soggetto>
<Testo>alzo il capo e vedo me coricato nel freddo</Testo>
</Haiku>
</dataroot>
Torniamo alla funzione richiamata con l'istruzione ajax:

$.get("XMLSend.php",function(xmldoc){...},"xml");
che ora ha a disposizione il documento xmldoc, ed analizziamone le istruzioni:

{
var LoopIndex;
LoopIndex++)
{
sie").innerHTML+"<p
}
L'istruzione:
xmldoc.getElementByTagName("..")
consente di creare degli array che contengono ad esempio tutti i campi (nodi)
<Soggetto></Soggetto>, o tutti i campi (nodi) <Autore></Autore> ecc. del documento
XML (xmldoc).
Nel nostro caso abbiamo creato un array che contiene tutti i campi (nodi) <Testo></Testo>
Questo array indicizzato in modo numerico a partire dal numero zero. Ad esempio l'espressione:
ArrayPoesie[0]
restituisce il nodo:
<Testo>pioggia: attraversa il mio cancello un mazzo di iris</Testo>
che contiene la prima poesia.

La stringa contenuta nel nodo rappresentata dall'espressione:
ArrayPoesie[0].firstChild.nodeValue
Il codice javascript effettua un ciclo che acquisisce una per una queste stringhe e le aggiunge al
contenuto del tag "Poesie":
LoopIndex++)
{
sie").innerHTML+"<p
}
L'istruzione che aggiunge la nuova riga alle precedenti precisamente:

sie").innerHTML+"<p
Ecco ora una seconda variante della funzione DisplayXML, che, pur utilizzando la variabile xmldoc
utilizza un altro tipo di istruzioni javascript:
{
{
var Poesie = xmldoc.documentElement;
var LoopIndex;
for(LoopIndex = 0; LoopIndex<Poesie.childNodes.length; LoopIndex++)
{
sie").innerHTML+"<p
align='center'>"+Poesie.childNodes[LoopIndex].lastChild.firstChild.nodeV
alue;+"</p>";
}
},"xml");
}
Anzich l'array
xmldoc.getElementsByTagName("Testo")
viene utilizzato l'oggetto

xmldoc.documentElement
i cui nodi rappresentano un tag <Haiku> </Haiku>, all'interno del quale lastChild rappresenta
il
tag
<Testo>
</Testo>
il
cui
contenuto
rappresentato
da
lastChild.firstChild.nodeValue, perch il testo contenuto tra i tag rappresenta a sua volta un
nodo (di testo).
Suggerimenti vari
back to Index
Ricordate che una pagina contenente codice php non eseguir quel codice se il file avr l'estensione
".htm" anzich quella ".php"
Per forzare l'editor di WordPad o di BloccoNote a salvare un file di testo con l'estensione che volete,
dovete virgolettarne il nome, ad esempio: "MyScript.php"
Il codice php non verr eseguito a meno che il file che lo contiene non sia stato caricato sul server
php e richiamato da l.
Ricordate che javascript usa due segni di uguaglianza per operare i confronti tra stringhe o numeri,
mentre usa un solo segno solo per impostare il valore di una variabile: tenere presente questa
importante distinzione vi eviter tempo inutile a caccia del perch il vostro codice non funziona.
Non usate mai il bottone con type="submit" per triggerare una modifica del documento html
operata tramite una funzione javascript: questo impossibile, perch la pressione di questo tipo di
bottone provoca immancabilmente un refresh della pagina che annulla qualsiasi modifica apportata
con javascript. Utilizzate invece il bottone con type="button", e tutto filer liscio.
Quando settate le dimensioni di un box state attenti a scrivere "px" senza spazi accanto alla misura:
width : 100px
e non:
width : 100 px
che non funzionerebbe!

Quando si scrivono le istruzioni per la lettura di un documento XML si tenga presente che purtroppo
Firefox considera eventuali caratteri usati per lindentazione dei tag come nodi autonomi. E
consigliabile in tal caso luso di una routine che rilevi se il browser Firefox e in caso affermativo
proceda a rimuovere tutti gli spazi:
var loopIndex;
for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++)
{
var currentNode = xml.childNodes[loopIndex];
if (currentNode.nodeType == 1)
{
removeWhitespace(currentNode);
}
if (((/^\s+$/.test(currentNode.nodeValue))) && currentNode.nodeType == 3))
{
xml.removeChild(xml.childNodes[loopIndex--]);
}
}
Argomenti vari
back to Index
Cos' un server Apache

Robin Nixon, Learning PHP, MySQL, JavaScript & CSS, posizione 365
Brevi cenni sugli elementi pi importanti di una pagina web
<title></title> Contiene il titolo del documento web che mostrato nella barra/linguetta del
titolo nel browser
<body></body> Contiene tutti gli elementi che appaiono nella pagina. Gli elementi che non sono
posti qui non sono visibili
<style></style> Controlla il modo di apparire e il comportamento dei vostri elementi web
<script></script> Qui viene inserito codice javascript o di altro linguaggio
<div></div> Molto usato come contenitore generico dove possono essere posti gli altri tipi di tag
che compaiono in <body>
<p></p> Crea un paragrafo: prima del testo sar inserito un ritorno a capo
</br> Inserisce una linea vuota
<button></button> Crea un bottone che pu essere collegato in evento, in alternativa al codice:
<input type="button">
<form></form> Crea una maschera per l'immissione di dati, che normalmente contiene elementi
<input> come bottoni o caselle di testo
<input> Crea l'elemento di un form: caselle di spunta, caselle di testo, bottoni
<table></table> Crea una tabella
Caricare una immagine in una pagina web
Il tag di una immagine ha la seguente struttura:
<img src="House.gif" height="30" width="30" alt="Immagine di una casa"

/>
Usare files javascript esterni

Il comando per utilizzare il codice che abbiamo inserito in un file chiamato "MyScript.js", posto
nella stessa directory della pagina web il seguente:
<script language="javascript" src="MyScript.js">
Se il file "MyScript.js" non nella stessa directory va indicato l'indirizzo completo, che pu anche
esserre un URL, come nel caso della libreria jQuery:
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"><
/script>
Selezionare un elemento della pagina

Se si dotato un tag di un id, come ad esempio:
<p id="MyParagraph">Questo e' il mio paragrafo</p>
in javascript si pu semplicemente utilizzare l'id, per leggere/scrivere nell'elemento:

MyParagraph.innerHTML = "Questo e' sempre il mio paragrafo";
Utilizzare la sintassi XML per muoversi nell'oggetto document

Per muoversi nell'oggetto document, che incorpora gli elementi della pagina html in cui scritto il
codice javascript, anche possibile utilizzare l'oggetto document.documentElement, che permette
di accedere ai tag visti come nodi di un documento XML con la stessa sintassi utilizzata per tali
documenti, come ad esempio:
alert(document.documentElement.childNodes.length);
alert(document.documentElement.childNodes[0].nodeName);
alert(document.documentElement.getElementsByTagName("p")[1].firstChild.n
odeValue);
alert(document.documentElement.childNodes[2].firstChild.nextSibling.next
Sibling.nextSibling.attributes.getNamedItem("id").value);
alert(document.getElementById("myDIV").childNodes.length);
Quando si scrive il codice per navigare in un documento html, i tag <script> costituiscono un tag
di tipo 3 (text), e occorre fare attenzione se si sono richiamati dei files javascript esterni, che sono
inclusi nel documento e che aggiungono altri nodi alla struttura della pagina, di cui occorre tenere
conto. Uguale cautela occorre usare se nella pagina sono inseriti automaticamente dall'Host dei
contatori, come ad es. con altervista.org, perch in tal caso si aggiungono altri nodi alla pagina.
Aprire nella pagina una finestra in cui visualizzata un'altra pagina internet
Ormai tutti i browser supportano il tag <iframe>, ottimizzato per il caricamento di elementi da
altre pagine web. La sintassi per utilizzarlo molto semplice:
<iframe src="http://www.w3schools.com"></iframe>
In questo caso si caricata nella finestra la HomePage del consorzio w3schools. L'effetto nella
pagina web il seguente:
Una serie di attributi opzionali consente di settare la posizione, la larghezza della finestra, ecc.
La funzione jQuery $(document).ready(){} utile anche con semplice codice javascript
La funzione jQuery $(document).ready(){} utile anche con semplice codice javascript,
perch consente ad istruzioni che fanno riferimento ad elementi che devono essere caricati, di
funzionare. Consideriamo ad esempio il seguente codice:
<html>
<head>
alert(document.getElementById("MyIframe").nodeName);
</script>
</head>
<body>
</body>
</html>
Ma con la funzione $(document).ready(), esso funzioa e genera l'alert "IFRAME":

<html>
<head>
<script
</script>
alert(document.getElementById("MyIframe").nodeName);
});
</script>
</head>
<body>
</body>
</html>
La funzione setTimeout()
Consideriamo il seguente codice:

javascript
function DisplayData(Testo)
{
var MyBox = document.getElementById("targetDiv");
MyBox.style.color = "red";
MyBox.innerHTML = Testo;
setTimeout(attentionGetter, 500);
}
function attentionGetter()
{
var target = document.getElementById("targetDiv");
target.style.color = "black";
}
html
<form>
<input type = "button" value = "Cambia il testo" onclick =
"DisplayData('Questo il nuovo testo');">
</form>
<div id="targetDiv">
<p>I nuovi dati appariranno qui</p>
</div>
Quando si preme il bottone, in "targetDiv" la stringa "I nuovi dati appariranno qui" viene
sostituita dalla stringa "Questo il nuovo testo", che per mezzo secondo apparir colorato in rosso
per poi tornare di colore nero. Questo ottenuto con l'istruzione:
setTimeout(attentionGetter, 500);
Che lascia passare mezzo secondo (500 millisecondi) prima di chiamare la funzione
attentionGetter(), che colora di nero la stringa inserita temporaneamente col colore rosso.
I caratteri speciali in javascript
Una istruzione come:
<input type = "button" value = "Cambia il testo" onclick =
"DisplayData('QUESTO E' IL NUOVO TESTO');">
non funziona, perch compare il carattere " ' " entro la stringa che l'argomento della funzione
DisplayData().
Librerie javascript concorrenti rispetto a jQuery
AngularJS una libreria sviluppata da un programmatore di Google, Miko Hevery, attualmente
patrocinata da Google e distribuita come software gratuito open source. Da una recente ricerca
risulta che 7000 siti web, su un milione testato, usano questa libreria, tra cui
NBC, Walgreens, Intel, Sprint, ABC News. Non di facile apprendimento, e per padroneggiarne
appieno le funzionalit necessaria una notevole esperienza di programmazione. Le statistiche delle
ricerche in rete confermano questo dato: mostrano che il numero di ricerche riguardanti chiarimenti
su Angular.js nettamente superiore a quello delle ricerche che riguardano javascript, jQuery o altri
linguaggi del web. Rispetto ad essa jQuery pi semplice e intuitiva. Per questo motivo non pochi
programmatori pensano che, malgrado il supporto di Google, sia destinata ad essere abbandonata,
come in passato precisamente avvenuto con librerie molto valide ma poco intuitive.
Backbone.js una libreria javascript conosciuta anche come CoffeeScript, creata dal
programmatore Jeremy Ashkenas.
Prototype Javascript Framework una libreria creata da Sam Stephenson nel 2005 e pensata
come supporto di Ajax.
Moo Tools una delle pi popolari librerie javascript ed distribuita open source con licenza del
MIT.
YUI Library (Yahoo! User Interface Library) stata creata nel 2005 da un team di sviluppatori
Yahoo!, ma lo sviluppo attivo cessato nel 2014, quando Yahoo! ha annunciato l'abbandono del
supporto a causa della evoluzione degli standard javascript, del declinante interesse per larghe
librerie javascript e per la proliferazione di soluzioni server-side.
Ember.js
Knockout
Concatenabilit di jQuery
jQuery consente di concatenare i comandi evitando di ripeterne ogni volta la parte iniziale. Ad
esempio, si considerino i seguenti comandi javascript:
var links = $("a");
links.css( "color", "red" );
links.bind( "click", myFunctionPointer );
links.show( "1000" );
links.css( "width", "150px" );
Esso pu essere sostituito da:

$("a").css({color:"red", width:"150px"}).bind("click",
myFunctionPointer).show("1000");
Che ha la stessa leggibilit e si riduce ad una sola riga.

I codici dei colori
Un colore, ad esempio di un bordo, pu essere indicato, in un foglio di stile, in tre modi:
border-color : #000000;
border-color : rgb(0,0,0);
border-color : black;
Il terzo caso riguarda solo i colori principali, che hanno dei nomi individuali.
http://www.w3schools.com/html/html_colors.asp : Tutorial sui colori

http://www.w3schools.com/html/html_colornames.asp : Elenco dei colori che possiedono dei
nomi individuali.

Web Design: Programmare in HTML, CSS, Javascript, Jquery, PHP, XML, Ajax

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Web Design: Programmare in HTML, CSS, Javascript, Jquery, PHP, XML, Ajax

Transféré par

Droits d'auteur :

Formats disponibles

LEZIONI DI PROGRAMMAZIONE PER IL WEB

Note per la lettura di questo documento

Come funziona un browser

I malfunzionamenti pi gravi di Explorer di cui il programmatore javascript dovrebbe essere a conoscenza

Cos' un documento XML e come lo si pu gestire

Note per la lettura di questo documento

Se viene riportato un codice di pi righe con una riga colorata:

All'interno di un articolo eventuali sottotitoli in rosso:

servono ad illustrare la ripartizione dei contenuti.

Dove posso trovare documentazione sui linguaggi php, javascript e html?

Sar capitato a tutti di imbattersi in un interessantissimo articolo di programmazione, e di non avere

Flanagan, Javascript Pocket Reference, Tecniche Nuove-O'Reilly

Utilizzare un hosting gratuito per disporre di un server php che consenta di

Cos' un programma FTP? Qual il miglior programma FTP scaricabile

Come funziona un browser

che pu scriversi anche in minuscolo:

HTML : il linguaggio utilizzato HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "htt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Frameset//EN" "h

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "htt

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "h

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "h

HTML5, il linguaggio pi comunemente utilizzato attualmente, una evoluzione del linguaggio

https://en.wikipedia.org/wiki/Document_type_declaration : Pagina Wikipedia che spiega come

Visualizzare il codice di una pagina web

Gli elementi della pagina web

Si espande automaticamente entro il suo parent container

Consideriamo la seguente rappresentazione di un box in una pagina web:

Il codice CSS corrispondente alla disposizione visualizzata sopra il seguente:

absolute : posiziona l'elemento rispetto al documento, con le istruzioni:

Come centrare orizzontalmente e verticalmente un elemento nella pagina web

o, in alternativa, ricorrendo alle propriet di stile:

Se si tratta di un inline element un metodo quello di agire sull'elemento-genitore (parent element)

Centrare invece l'elemento verticalmente molto pi complicato. In particolare l'istruzione:

Come gi detto, questo codice non funziona se ci sono pi linee di testo.

Il quarto metodo per centrare verticalmente ricorre al posizionamento assoluto dell'elemento-figlio

Il quinto metodo per centrare verticalmente impiega anch'esso il posizionamento relativo

Come si crea e si configura una tabella con i fogli di stile

la cella della prima colonna, prima riga

la cella della prima colonna, seconda riga

mentre funziona un codice come:

Occorre sempre inserire la sotto-tabella in un elemento <td> della tabella principale:

Il valore "1px" indica lo spessore del bordo in pixel.

Ecco ora la struttura della tabella arricchita con i fogli di stile:

Questa la cella della tabella contenuta nella terza riga

Analizziamo il foglio di stile della tabella pi esterna:

text-align : center (centra il testo all'interno della cella)

che non possono essere inseriti in un CSS come

L'effetto che ne risulta il seguente:

I malfunzionamenti pi gravi di Explorer di cui il programmatore javascript dovrebbe

Tutte le maggiori applicazioni web, da Yahoo a Google a Facebook ad EBay utilizzano

Oppure si pu disabilitarla una volta per tutte per le chiamate ajax:

Si pu anche indicare ad Explorer che si sta scaricando dati in formato xml:

<script language = "javascript">

Con Explorer non funziona sempre l'istruzione jQuery:

e anche in questo caso va disattivata la copia cache automatica (vedi sopra)

Come rilevare le versioni di Explorer e in particolare quelle anteriori a Explorer 9

La funzione d i seguenti risultati: