Web Design: programmare in html, css, javascript, jQuery, php, xml, ajax

download Web Design: programmare in html, css, javascript, jQuery, php, xml, ajax

of 104

description

Cos'e' javascript e cosa posso fare con questo linguaggio? Cos'e' il potente modello DOM (Document Object Model) di javascript supportato ormai da tutti i browser, che e' diventato lo strumento standard di accesso e manipolazione degli elementi della pagina web? Cos'e' ajax e perche' e' diventato indispensabile a tutti i programmatori? Cos'e' php e cosa posso fare con questo linguaggio? Piu' importante ancora: quali sono le cose che NON POSSO fare con questi linguaggi, risparmiando tempo e sforzi vani? Cosa significa che javascript e' un linguaggio "client-side" mentre php e' un linguaggio "server side"? Come posso trovare un modo facile di accedere ad un server php e sperimentare il linguaggio? Come si puo' associare ad un sito internet un potente database, e con quale linguaggio gestirlo? Cos'e' jQuery e perche' dovrei usarlo? Cos'e' un documento XML e come posso gestirlo, sia server-side, con php, che client-side, con javascript? Come utilizzare al meglio i fogli di stile CSS? Cos'e' l'estensione simpleXML di php e quali vantaggi puo' dare? Come gestire un database mySQL? Questi ed altri argomenti sono oggetto in questo documento di utili note di programmazione e di suggerimenti che vi consentiranno di risparmiare tempo e sforzi. Il documento e' strutturato in paragrafi con indici ipertestuali, in modo da visualizzare rapidamente il contenuto e trovare l'argomento che ci interessa. Contiene anche link a pagine che consentono di visualizzare in pratica gli effetti di un codice.

Transcript of 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:

    .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