Post on 14-Jan-2016
description
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:
.TableCell {
border : 1px solid black;
text-align : center;
padding : 10px;
}
se la riga viene riportate e commentata singolarmente pi in basso, essa avr lo stesso colore, per
facilitare la sua identificazione nel codice:
border : 1px solid black;
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 DOCUMENTAZIONE
CONSULTABILE").
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 in lingua inglese. Disponibile versione ebook
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.
Libro in lingua inglese. Disponibile versione ebook
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 , la seguente dichiarazione:
che pu scriversi anche in minuscolo:
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:
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:
Ecco i vari tipi di dichiarazioni per i diversi linguaggi che si sono succeduti nel tempo:
Tipo di documento Dichiarazione:
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
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: , , , , 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 )
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: , , , , , , , , 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:
Questa una linea di testo!
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-bottom-
width, 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 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 block-
element 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 o . Si consideri il seguente codice:
Hello World!
o, in alternativa, ricorrendo alle propriet di stile:
Hello World!
Esso centrer orizzontalmente il testo "Hello World!" nella pagina. Ma consideriamo il seguente
codice:
Hello World!
In questo caso il testo non sar centrato, perch l'elemento , 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:
Questo il testo da centrare
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;
}
Se si tratta di un inline element un metodo quello di agire sull'elemento-genitore (parent element)
e settare la propriet align:
Questo il testo da centrare
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 , che il caso tipico in cui si ha bisogno di centrare verticalmente.
Il primo metodo per centrare verticalmente si pu impiegare quando entro il 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 che lo contiene, ma questo non necessario. Ecco un codice tipico:
html:
Content here
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 che contengono una immagine.
html: div id="parent">
css: #parent {
line-height: 200px;
} #parent img {
vertical-align: middle;
}
Il terzo metodo per centrare verticalmente consiste nel settare mediante css il genitore come
tabella e l'elemento-figlio come cella di tabella. In tal modo possiamo utilizzare l'istruzione vertical-
align: middle ed essa funzioner.
html:
Content here
css: #parent {display: table} #child {
display: table-cell;
vertical-align: middle;
}
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:
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">
Content here
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:
Content here
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 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:
Content here
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:
Questa la cella della prima colonna, prima riga
Questa la cella della seconda colonna, prima riga
Questa la cella della prima colonna, seconda riga
Questa la cella della seconda colonna, seconda riga
I tag rappresentano le celle della tabella, e il testo va inserito al loro interno.
Non si pu scrivere direttamente all'interno di un tag ; occorre sempre inserirvi un tag in
cui scrivere. In altre parole, non funziona un codice come:
Questo non funziona
mentre funziona un codice come:
Questo funziona
All'interno di un tag pu essere inserita un'altra tabella. Attenzione: non si pu semplicemente
creare un'altra riga e inserire la tabella direttamente nella riga: ...
...
...
Occorre sempre inserire la sotto-tabella in un elemento della tabella principale:
...
In altre parole, un codice come il seguente, che inserisce la tabella direttamente in una nuova riga,
non funziona:
...
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
}
html ...
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 una dichiarazione di stile del tipo:
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":
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 {
border : 1px solid black;
text-align : center;
padding : 10px;
}
html:
Questa la cella della prima colonna, prima riga
Questa la cella della seconda colonna, prima riga
Questa la cella della prima colonna, seconda riga
Questa la cella della seconda colonna, seconda riga
Questa la cella della tabella contenuta nella terza riga
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):
Il numero di celle delle righe successive identico a quello delle righe precedenti, quindi la sotto-
tabella 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 {
border : 1px solid black;
text-align : center;
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 :
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:
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):
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 {
border : 1px solid black;
text-align : center;
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:
XMLHttpRequestObject = new XMLHttpRequest();
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);
}
}
Questo codice, che funziona perfettamente con Chrome e Firefox, generando un alert box che indica
il numero dei tag 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 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 = new XMLHttpRequest();
XMLHttpRequestObject.open("GET", "colors.xml?timestamp=" + new
Date().getTime());
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);
}
}
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 = new XMLHttpRequest();
XMLHttpRequestObject.overrideMimeType("text/xml");
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);
}
}
Si pu anche indicare ad Explorer che si sta scaricando dati in formato xml:
XMLHttpRequestObject = new XMLHttpRequest();
XMLHttpRequestObject.open("GET", "colors.xml");
XMLHttpRequestObject.setRequestHeader('Content-Type', 'text/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);
}
}
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 = '
La funzione d i seguenti risultati: CheckExplorerVersion() == undefined (il browser non Explorer o si tratta di versioni
inferiori a Explorer 5 o di Explorer 9 e versioni superiori)
CheckExplorerVersion() == 4 < numero < 9 (Explorer 5, 6 o 7) Entrambi i blocchi di codice si basano su una caratteristica presente nelle versioni di Explorer
anteriori alla 9, ma successivamente non pi supportata da Microsoft: i commenti condizionali. Un
commento condizionale ha la forma seguente: 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 IE] ("se il browser Explorer")
[if !IE] ("se il browser non Explorer")
[if IE 7] ("se il browser Explorer 7")
[if lt IE 5.5] ("se il browser una versione di Explorer inferiore a 5.5") ("lt" = "less than")
[if 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 che
contiene un commento condizionale che crea un elemento vuoto (se contenesse qualcosa
i caratteri potrebbero essere visualizzati con effetto antiestetico), e poi testare l'esistenza nel tag
dell'elemento 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:
prima istruzione;
seconda istruzione;
..................
ultima istruzione;
oppure entro un tag html, come ad esempio:
Clicca qui per far apparire il
messaggio
Un tag 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");
}
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, ..., varN)
{
return(var1*var2*...*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:
Evento Si verifica quando
onabort una azione interrotta
onblur un elemento perde la propriet focus
onchange si verifica un cambiamento nel contenuto di un elemento, come ad es. un box
di testo
onclick si cliccato su un elemento
ondblclick si cliccato due volte su un elemento
ondragdrop stata eseguita una operazione drag-and-drop (un elemento stato trascinato
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
onmouseover il mouse entra nella zona di un elemento della pagina
onmouseup rilasciato un bottone del mouse dopo essere stato premuto
onreset viene cliccato il bottone di reset
onresize vengono modificate le dimensioni o la posizione di un elemento della pagina
onsubmit l'utente clicca un pulsante di tipo "submit"
onunload la pagina scaricata
onscrolling 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 ) 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.
function MyFunction(MyDiv)
{
alert("hai cliccato sul " + MyDiv.innerHTML);
}
BOX1
BOX2
BOX3
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 , 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 jquery-
1.11.2.min.js) che viene fornita con un file di compatibilit (jquery-migrate-
1.2.1.js).
Per poter utilizzare jQuery all'interno della vostra pagina web sufficiente inserire nell' del
documento i seguenti due 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:
Convenienza di jQuery rispetto a javascript puro JQuery rende pi robuste istruzioni come: var target = document.getElementById("targetDiv");
target.innerHTML = "Hello World"; che non funzionano con diverse versioni di explorer, sostituendole con: $("#targetDiv").html("Hello World");
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($(""));
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
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest)
{
XMLHttpRequestObject = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData()
{
if(XMLHttpRequestObject)
{
var obj = document.getElementById("targetDiv");
XMLHttpRequestObject.open("GET", "MyScript.php");
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200)
{
obj.innerHTML = XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.send(null);
}
}
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:
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:
$(document).ready(function(){
alert(document.getElementById("MyIframe").childNodes.length);
});
Sembrerebbe logico porre l'istruzione:
alert(document.getElementById("MyIframe").childNodes.length); 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: Clicca qui per aprire il
file 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 con class="class1" oppure class="class2":
$("img.class1, img.class3")
Per selezionare tutti i paragrafi con tag all'interno dell'elemento con id="MyTag":
$(#MyTag p")
$(#MyTag).find(" p")
Per selezionare tutti i tag 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:
.MyBoxClass{
width : 200px;
height : 25px;
background-color : white;
font-family : "Times New Roman";
color : red;
font-size : 100%;
vertical-align : center;
text-align : center;
border : 1px solid black;
}
Clicca qui per aprire il
file
QUESTO E' IL MIO BOX
SCRIVI NEL BOX SOTTOSTANTE
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 : document.getElementById("MyAnchor").innerHTML
$("#MyAnchor").text()
Cambiare (javascript) il testo "Clicca qui per aprire il file" incluso nel tag : document.getElementById("MyAnchor").innerHTML = "Questo il nuovo
contenuto del tag";
Far sparire e riapparire il tag : $('#MyAnchor').hide();
$('#MyAnchor').show(); $('#MyAnchor').attr("visibility","hidden");
$('#MyAnchor').attr("visibility","displayed");
L'istruzione "show" funziona anche se il tag stato dichiarato come invisibile, con l'istruzione
di stile: Clicca qui per aprire il file
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 : document.getElementById("MyAnchor").style.color = "red";
Leggere (javascript) gli attributi "name" e "href" contenuti nel tag : 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 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(""
+'ABRACADABRA'+""); oppure: document.getElementById("MyDiv").innerHTML = "" +'ABRACADABRA'+"");
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.carburante = 5;
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()
{
this.carburante = 50;
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: Il metodo Automobile.rifornimento (evidenziato in rosso) viene richiamato dal bottone: 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: 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.
e si limita a visualizzare "50 Litri" nel box di testo.
Il metodo Automobile.viaggia (evidenziato in verde) viene richiamato dal bottone: 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:
#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;
}
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
Il contenuto dell'elemento interno eccede quello dell'elemento
esterno
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:
oppure come un documento xml:
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:
Questo il testo contenuto nel tag div
Questo il testo contenuto nel tag td
Con la propriet .documentElement si acquisisce il nodo principale, che racchiude gli altri nodi. Ecco
il codice per leggere il testo contenuto nel tag 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 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 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:
function Controllo(){
return true;
}
Clicca qui per aprire il
file
Il file MyFile.htm, a cui fa riferimento il link 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 e assoluta del mouse entro la finestra,
indipendentemente dallo scrolling
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+
"Top Box : "+Math.floor($(this).offset().top)+
"Left Box : "+Math.floor($(this).offset().left)+
"Box Height : "+$(this).css('top')+
"Box Width : "+$(this).css('top')+
"Window Width : "+window.innerWidth+
"Absolute Mouse X : "+event.pageX+
"Absolute Mouse Y : "+event.pageY+
"Window Mouse X : "+e