01-latoClient

5/9/2018 01-latoClient - slidepdf.com

http://slidepdf.com/reader/full/01-latoclient 1/46

Internet Web

Corso di Web Master

(A cura di Paolo Tosato)

Internet

HTML

DHTML

VBScript

ASP

ADO

XML



Indice

Pag.

1. Internet………………………………………………………………………………………...1.1. Introduzione alle reti di computer……………………………………………………….1.2. Internet……………………………………………………………………………….….1.3. I servizi di Internet………………………………………………………………………1.4. Internet e la sicurezza…………………………………………………………………...1.5. Intranet…………………………………………………………………………………..

2. Web……………………………………………………………………………………………2.1. Il servizio Web…………………………………………………………………………..

3. Creazione di un sito Web……………………………………………………………………...3.1. Progettazione di un sito Web……………………………………………………………

3.1.1. Progettazione del testo delle pagine………………………………………………3.1.2. Progettazione della grafica delle pagine…………………………………………..3.1.3. Progettazione della struttura del sito………………………………………………3.1.4. I collegamenti……………………………………………………………………..

3.2. Pubblicazione di un sito…………………………………………………………………3.2.1. Pubblicazione sul server…………………………………………………………..3.2.2. Registrazione di un nome di dominio……………………………………………..3.2.3. Registrazione nei motori di ricerca………………………………………………..

4. Browser Scripting……………………………………………………………………………..

4.1. DHTML e VBScript…………………………………………………………………….4.1.1. Introduzione……………………………………………………………………….4.1.2. Corso rapido di HTML……………………………………………………………

4.1.2.1. Titoli e paragrafi…………………………………………………………….4.1.2.2. Attributi……………………………………………………………………...4.1.2.3. Immagini…………………………………………………………………….4.1.2.4. Collegamenti ipertestuali……………………………………………………4.1.2.5. Tabelle………………………………………………………………………4.1.2.6. Stili…………………………………………………………………………..

4.1.2.7. Form…………………………………………………………………………4.1.2.8. Scripting……………………………………………………………………..4.1.3. VBScript e Visual Basic for Applications a confronto……………………………

4.1.3.1. Esecuzione di codice al caricamento della pagina…………………………..4.1.3.2. Accesso ai controlli del form………………………………………………..4.1.3.3. Generazione di codice HTML………………………………………………

4.1.4. Introduzione a Dynamic HTML…………………………………………………..4.1.4.1. Caratteristiche principali (confronto con HTML)…………………………..4.1.4.2. Tag…………………………………………………………………………..

4.1.4.3. Proprietà……………………………………………………………………..4.1.4.4. Proprietà di scripting………………………………………………………...4.1.4.5. Proprietà e metodi per il testo……………………………………………….

4445666677899

111212131314

141414141617171819

212222232325252526

272829



4.1.4.6. Eventi………………………………………………………………………..4.1.4.7. Bubbling degli eventi………………………………………………………..4.1.4.8. Annullamento dell’effetto di default………………………………………..4.1.4.9. Eventi del timer……………………………………………………………...

4.1.4.10. Riepilogo degli eventi……………………………………………………...4.1.5. Il modello di oggetti DHTML…………………………………………………….4.1.5.1. L’oggetto Window…………………………………………………………..

4.1.5.1.1. Proprietà……………………………………………………………….4.1.5.1.2. Metodi…………………………………………………………………

4.1.5.2. L’oggetto History……………………………………………………………4.1.5.3. L’oggetto Navigator…………………………………………………………4.1.5.4. L’oggetto Location………………………………………………………….4.1.5.5. L’oggetto Screen…………………………………………………………….

4.1.5.6. L’oggetto Event……………………………………………………………..4.1.5.7. L’oggetto Document………………………………………………………...4.1.5.7.1. Proprietà……………………………………………………………….4.1.5.7.2. Metodi…………………………………………………………………4.1.5.7.3. Collection figlie……………………………………………………….4.1.5.7.4. L’oggetto Selection……………………………………………………

4.1.5.8. L’oggetto TextRange………………………………………………………..4.1.5.8.1. Proprietà……………………………………………………………….4.1.5.8.2. Metodi…………………………………………………………………

4.1.5.9. L’oggetto Table……………………………………………………………..5. Server Scripting……………………………………………………………………………….

5.1. ASP e ADO……………………………………………………………………………...5.1.1. Introduzione……………………………………………………………………….5.1.2. Programmazione VBScript lato-server……………………………………………5.1.3. Componenti ActiveX lato-server………………………………………………….5.1.4. Il modello a oggetti ASP…………………………………………………………..

5.1.4.1. L’oggetto Request…………………………………………………………...5.1.4.1.1. Invio dei dati al server………………………………………………...

5.1.4.1.2. Il metodo POST……………………………………………………….5.1.4.1.3. Ricevimento dei dati dal client………………………………………..

5.1.4.2. L’oggetto Request: la collection ServerVariables…………………………..5.1.4.3. L’oggetto Request: la collection Cookies…………………………………...5.1.4.4. L’oggetto Request: altre proprietà e metodi………………………………...5.1.4.5. L’oggetto Response…………………………………………………………

5.1.4.5.1. Invio dei dati al browser………………………………………………5.1.4.6. L’oggetto Response: i cookie……………………………………………….5.1.4.7. L’oggetto Response: attributi di pagina……………………………………..

5.1.4.8. L’oggetto Response: ridirezionamento……………………………………...5.1.4.9. L’oggetto Response: altre proprietà e metodi……………………………….5.1.4.10. L’oggetto Server…………………………………………………………...

31323333

343535353637373838

383939394041414142

434444444546484848

515158595960606163

636464



5.1.4.10.1. Creazione di oggetti esterni………………………………………….5.1.4.10.2. Codifica dei testi HTML e degli URL……………………………….

5.1.4.11. L’oggetto Server: il mapping dei percorsi…………………………………5.1.4.12. L’oggetto Application……………………………………………………...

5.1.4.12.1. Condivisione dei dati tra i client……………………………………..5.1.4.12.2. Il file Global.asa……………………………………………………...5.1.4.12.3. Le collection Contents e StaticObject………………………………..

5.1.4.13. L’oggetto Session………………………………………………………….5.1.4.13.1. Condivisione dei dati tra le pagine…………………………………..5.1.4.13.2. Eventi Session………………………………………………………..5.1.4.13.3. Proprietà local-aware………………………………………………...5.1.4.13.4. La collection Session………………………………………………...

5.1.4.14. L’oggetto ObjectContext…………………………………………………..

5.1.5. Componenti ASP………………………………………………………………….6. Uso dei database con ADO (ActiveX Data Object)…………………………………………..6.1.1. Creazione di una connessione……………………………………………………..6.1.2. Connessione DSN…………………………………………………………………6.1.3. Connessione DSN-less…………………………………………………………….6.1.4. Differenze tra OLE-DB e ODBC…………………………………………………6.1.5. Prestazioni con Access……………………………………………………………6.1.6. Prestazioni con SQL Server……………………………………………………….6.1.7. Connessione UDL…………………………………………………………………

6.2. Uso dei database con ADO – RecordSet………………………………………………..6.2.1. Creare un RecordSet………………………………………………………………6.2.2. Chiudere un RecordSet……………………………………………………………6.2.3. Caricamento dati nel RecordSet…………………………………………………..6.2.4. Utilizzo del RecordSet…………………………………………………………….

6.3. Operazioni di scrittura sul RecordSet…………………………………………………...6.3.1. Aggiunta di un nuovo record……………………………………………………...6.3.2. Modifica di un record……………………………………………………………..6.3.3. Eliminazione di un record…………………………………………………………

6.3.4. Annullamento di un’operazione di modifica di un record………………………...6.3.5. Ricaricare il RecordSet……………………………………………………………6.3.6. Il metodo Execute…………………………………………………………………6.3.7. Le Store Procedure………………………………………………………………..6.3.8. L’oggetto Command………………………………………………………………6.3.9. Store Procedure con parametri…………………………………………………….6.3.10. Paginazione dei RecordSet………………………………………………………6.3.11. Gestione degli errori……………………………………………………………..6.3.12. Aggiornamenti Batch…………………………………………………………….

6.3.13. Transazioni………………………………………………………………………7. XML - EXtensible Markup Language………………………………………………………...

64656667

676869707071727272

737575757575767676

767676767879798080

808081818181828282

8384



Corso di Web Master a cura di Paolo Tosato

4

Internet

Introduzione alle reti di computerPiù computer collegati tra di loro costituiscono una rete. Il collegamento in rete permette di condividererisorse, consente la comunicazione tra gli utenti, offre servizi di vario tipo come consultazione di

informazioni, commercio elettronico e così via.Le reti si possono suddividere principalmente in reti locali (LAN) e reti geografiche (WAN). Le reti localisono reti private di piccole dimensioni, utilizzate principalmente per condividere risorse (per esempio per mettere una stampante a disposizione di molti utenti).Le reti geografiche sono reti di grandi dimensioni che permettono ad utenti anche molto lontani dicomunicare tra di loro e di utilizzare servizi di vario tipo; si dicono reti aperte quelle a cui ci si puòcollegare da qualsiasi punto geografico e con qualsiasi sistema tramite un mezzo di comunicazione eopportuni protocolli; i protocolli sono in pratica le regole da rispettare per consentire la comunicazione.

InternetInternet è una rete geografica aperta di estensione mondiale.

Per entrare a far parte di Internet bisogna sottoscrivere un abbonamento con un provider o ISP (InternetService Provider), un fornitore di servizi Internet.Dopo aver stabilito un collegamento al computer del provider si ha accesso all'intera rete Internet. Il modo più semplice di collegarsi è utilizzare la rete telefonica. Non c'è bisogno di un computer particolare o di un sistema operativo particolare; la sola cosa indispensabileè che sul computer sia installato il protocollo TCP/IP (Transmission Control Protocol/lnternet Protocol), il protocollo di comunicazione, o meglio l'insieme di protocolli di comunicazione, usato da tutti i computer collegati a Internet.Ogni computer collegato a Internet è identificato da un numero, univoco a livello mondiale, chiamatoindirizzo IP.L'indirizzo IP comunemente è rappresentato nella notazione decimale puntata cioè da quattro numeri(compresi tra O e 255) separati da punti, per esempio 132.45.37.1.L'indirizzo IP viene fornito dal provider; può essere un indirizzo statico se il collegamento avvieneutilizzando sempre lo stesso indirizzo o un indirizzo dinamico se ad ogni collegamento viene fornito unindirizzo diverso.Per collegarsi ad un altro computer è necessario conoscere il suo indirizzo IP.Poiché è difficile ricordare gli indirizzi IP viene usato anche un sistema basato su nomi. Si può pensare che icomputer siano divisi in gruppi chiamati domini (la suddivisione non dipende dalla posizione geografica maè solo un raggruppamento organizzativo). Ogni dominio ha un nome e può essere diviso in sottodomini chehanno ciascuno un nome e ogni computer che deve essere accessibile deve avere un nome.Il nome completo di un computer è costituito dal nome del computer, dal nome del sottodominio di livello più basso a cui appartiene, dai nomi degli altri sottodomini in ordine gerarchico, fino al nome del dominio; inomi sono separati da un punto.

In pratica la prima parte del nome è il nome del server; la parte rimanente è chiamata genericamente dominioo in modo più tecnico FQDN (Fully Qualified Domain Name).I nomi di dominio di primo livello (TLD -Top Level Domain) possono essere di tipo organizzativo (per es.com per un'organizzazione commerciale) o nazionali (due caratteri che rappresentano una nazione, per esempio it per Italia).In alcuni paesi, per esempio in Gran Bretagna (dominio uk, United Kingdom), i domini di secondo livelloricalcano la suddivisione americana di tipo organizzativo, anche se con sigle diverse, per esempio co.uk per aziende commerciali o ac.uk per Università (ac sta per academic). Nuovi TLD possono essere istituiti solo dall'ICANN (Internet Corporation for Assigned Name and Numbers), l'ente internazionale che gestisce tutti i regolamenti per i nomi di dominio.




5

Anche i nomi di dominio, come gli indirizzi IP, devono essere univoci e devono essere registrati; il provider può provvedere alla registrazione di un nome di dominio, o meglio di un sottodominio (o nome di dominio disecondo livello); i nomi nei domini TLD sono gestiti dall'lnterNIC (Internet Network Information Center,www.internic.net ).I nomi nei domini mil , gov e edu sono riservati agli Stati Uniti.La registrazione dei nomi di dominio nel dominio it è gestita dalla Registration Authority italiana(www.nic.it ), un organismo chiamato NIC per analogia con l'organismo statunitense. Il NIC in precedenzaera noto come NIS (Network Information Service), un'entità che svolgeva il compito di assegnazione deinomi per conto della rete GARR (Gruppo Armonizzazione Reti per la Ricerca) che collega le organizzazioni

di ricerca italiane (come il CNR, Consiglio Nazionale delle Ricerche) e i Consorzi universitari (come ilCILEA di Milano e il CINECA di Bologna).Dopo aver registrato un nome di dominio (I'FQDN) un'organizzazione può suddividerlo ulteriormente egestire più server aggiungendo il nome del server all'FQDN (nomeServer.nomeFQDNdelDominio).L'uso dei nomi al posto degli indirizzi è permesso da un protocollo chiamato DNS (Domain Name System),che permette di tradurre automaticamente il nome nel corrispondente indirizzo (e anche viceversa).

I servizi di InternetInternet di per se è soltanto una rete di computer; quello che si può fare dipende dai servizi che si utilizzano.Il servizio più noto e più usato è quello comunemente chiamato WWW (World Wide Web) o Web che permette di consultare pagine di informazioni di natura molto varia (e che ha portato alla diffusione del mododi dire navigare in Internet).Un altro servizio molto noto e molto usato è la posta elettronica o e-mail (electronic mail) che permette dimandare messaggi a qualsiasi utente, purché si conosca il suo indirizzo. Altri servizi utilizzabili sono per esempio:




6

• i newsgroup, gruppi di discussione su particolari argomenti che permettono di inviare messaggi e diconsultare i messaggi inviati da altri;

• FTP (File Transfer Protocol) il cui uso più comune è scaricare file sul proprio computer;• le chat che permettono di scambiare messaggi in tempo reale con altri utenti;•

servizi di teleconferenza o videoconferenza (comunicazioni audio o video tra gruppi di partecipanti);• Telnet che permette di collegarsi ad un computer come utente di quel sistema.

Tutti i servizi sono realizzati da applicazioni di tipo client/server.

Queste applicazioni sono divise in due parti che di solito vengono eseguite su computer diversi.La parte client dell'applicazione gestisce l'interfaccia con l'utente e richiede i servizi alla parte server chesvolge l'elaborazione vera e propria.Il termine server viene comunemente usato oltre che per indicare la parte server dell'applicazione anche per indicare il computer su cui questa applicazione viene eseguita (anzi questo è l'uso più comune del termine). Nell'uso dei servizi di Internet bisogna ricordarsi di rispettare alcune regole di buon comportamento, noteanche come netiquette (da net, rete, e etiquette, galateo), rivolte a limitare lo spreco delle risorse della rete ead evitare situazioni spiacevoli con gli altri utenti.

Internet e la sicurezzaInternet è nata dal lavoro spontaneo di molte persone e non è sotto il controllo di nessuno; essendo unostrumento nuovo non esistono nemmeno leggi adeguate che ne regolamentino l'utilizzo.Anche se in rete si possono trovare molte informazioni interessanti e conoscere persone nuove, bisogna fareattenzione ai pericoli di vario genere che si possono incontrare.Alcuni problemi sono di carattere informatico, come la possibilità di trovare un virus nel computer; i virus possono essere contratti scaricando software infetto ma anche con messaggi di posta elettronica checontengono allegati eseguibili.Problemi più gravi si potrebbero incontrare fornendo i propri dati personali (indirizzo, numero della carta dicredito, ecc.) a persone disoneste; anche quando si è sicuri del destinatario delle informazioni il problema

potrebbe derivare dall'intercettazione dei dati; le informazioni sulla rete con i normali protocolli viaggianosempre in un modo che può essere facilmente intercettato; per la sicurezza dei trasferimenti di dati bisognaassicurarsi che i siti Web a cui si inviano i dati adottino protocolli sicuri e spedire i messaggi di postaelettronica usando metodi di crittografia.

IntranetI servizi di Internet possono essere resi disponibili su una rete locale (collegata o meno a Internet) sui cuicomputer sia installato il protocollo TCP/IP; una rete di questo tipo prende il nome di intranet. All'interno di una intranet bisogna gestire i server che offrono i servizi desiderati.

WEBIl servizio WebIl servizio World Wide Web, noto comunemente come WWW o Web, è un insieme di pagine contenentiinformazioni di natura molto varia, sparse nel mondo; le pagine sono ipertestuali cioè ogni pagina puòcontenere dei collegamenti ad altre pagine (collegamenti ipertestuali o link ); facendo clic su uncollegamento si può passare direttamente a un'altra pagina; il collegamento può essere costituito da unastringa di testo ma anche da una immagine o da una parte di un'immagine (un esempio comune sono icollegamenti disponibili su mappe geografiche: partendo dall'immagine di una cartina geografica viene resodisponibile un collegamento per ogni zona); un collegamento può fare riferimento non solo ad un'altra paginama anche a una risorsa di tipo diverso come un'immagine, un filmato o un file di suono.Un insieme di pagine Web costituisce un sito Web; le pagine sono rese disponibili per la consultazione da

computer su cui è installato un programma chiamato server Web.Per consultare le pagine bisogna utilizzare un programma chiamato browser (la parte client del servizioWeb). I browser più noti sono Internet Explorer e Netscape Navigator.




7

Il browser richiede una pagina al server tramite il protocollo HTTP (Hyper Text Transfer Protocol, cioè protocollo di trasmissione dell'ipertesto); il server, ancora tramite il protocollo HTTP, restituisce al browser la pagina richiesta; le pagine sono costituite da testo che contiene dei codici ( tag HTML); il browser interpreta i codici e in base a questi stabilisce come devono apparire sullo schermo le varie parti della pagina.Il servizio Web è nato nel 1989 al CERN, il centro Europeo per la ricerca sulla fisica nucleare; il primo browser con interfaccia grafica (Mosaic) risale al 1993. Nel 1994 venne costituito il Consorzio World Wide

Web, un'organizzazione dedicata allo sviluppo del Web e alla standardizzazione dei suoi protocolli(www.w3.org ).Appena avviato, il browser presenta la home page, cioè una pagina configurata come pagina iniziale.Poi si può passare ad altre pagine facendo clic sui collegamenti; i collegamenti appaiono sottolineati equando vi si posiziona il mouse il puntatore assume la forma di una mano. Si può passare ad una nuova pagina anche specificandone l'indirizzo.L'indirizzo di una pagina Web è chiamato URL (Uniform Resource Locator) e ha la forma

protocollo://nomeserver/path.L'URL permette di definire qual è la pagina, dove si trova e come vi si può accedere ed è composto da tre parti:

• il protocollo usato (per esempio http) che definisce come deve essere fatta la richiesta;• il nome del server Web, cioè del computer su cui si trova la pagina desiderata;• il path della pagina, cioè il percorso completo della cartella e il nome del documento, con l'estensione,

sul server.

Alcune parti possono essere omesse; per esempio se non si indica il protocollo viene usato il protocollo http per default; se non si indica il path di una pagina viene visualizzata la pagina di default del server, se il server è stato configurato in questo modo (la pagina di default di solito si chiama index.html o deafult.html ).Lo schema dell'URL è aperto nel senso che si possono specificare protocolli diversi (come file, ftp, news,

mailto, telnet ); per esempio si può usare il protocollo file per aprire una pagina che si trova sul propriocomputer ( file://drive:/path). Gli URL identificano una risorsa puntando a uno specifico server; se la risorsa viene spostata, usando l'URL

non si è più in grado di trovare la risorsa; inoltre una copia identica della risorsa su un altro server ha unURL diverso.Per risolvere questi problemi è stato proposto un sistema di identificazione delle risorse più efficiente,chiamato URN (Uniform Resource Name).Un URN è un identificatore che può essere associato ad ogni risorsa su Internet con le seguenticaratteristiche:

• è unico,• è indipendente dalla posizione della risorsa,• non può essere assegnato a un'altra risorsa anche se la risorsa che identifica non esiste più,

ciascuna risorsa può essere presente in più copie su server diversi, per facilitare l'accesso (a ogni URN possono corrispondere molti URL).Il processo di determinazione degli URL dall'URN viene detto risoluzione ed è effettuato da un servizio di

risoluzione del nome (name resolution service). I nomi vengono assegnati da autorità dette naming

authority.

Creazione di un sito Web

Progettazione di un sito WebUn sito Web è un insieme di pagine Web correlate.

Nella progettazione di un sito Web bisogna tenere conto della sua natura ipertestuale che permette diaccedere direttamente a una delle sue parti, al contrario di un testo tradizionale che normalmente viene lettodall'inizio alla fine (in un ipertesto più che di lettura si parla di consultazione).




8

Le pagine possono essere multimediali cioè possono contenere elementi di natura diversa; i documentiipertestuali e multimediali vengono chiamati anche ipermediali ma di solito si continua ad usare il termineipertesto.Per costruire un sito bisogna prima di tutto definirne gli obiettivi, poi precisarne i contenuti, organizzare icontenuti in pagine e creare una struttura di navigazione tra le pagine.I contenuti devono essere suddivisi in pagine in modo adeguato e la struttura di navigazione non deve crearedisorientamento.Per la progettazione può essere utile creare uno storyboard, cioè uno schema delle varie pagine e deicollegamenti tra queste (cioè della struttura del sito).Molto importante è la home page; la home page è il punto di ingresso preferenziale al sito; è la prima paginadel sito che di solito contiene una panoramica dei contenuti del sito.Il sito deve essere chiaro e semplice da usare e deve avere una propria identità; è importante che il sito abbiauno stile di design uniforme, cioè che le pagine abbiano un'impostazione costante, sia come presenza edisposizione degli elementi nella pagina che soprattutto come forma di navigazione.In una pagina si possono inserire elementi di tipo diverso come testo, liste, tabelle, immagini, mappe,animazioni, filmati o suoni. La progettazione della pagina richiede conoscenze di grafica e design; l'uso dielementi multimediali deve attirare ma non disturbare.

Sulle pagine si può apporre una firma contenente informazioni sul Web master (magari con uncollegamento al suo indirizzo di posta), lo stato della pagina (per esempio lavori in corso), la data dell'ultimarevisione, informazioni su copyright e marchi registrati e così via. Nella creazione delle pagine bisogna tenere conto dei browser che probabilmente verranno usati per laconsultazione.Se il sito deve essere reso disponibile solo in una intranet non ci sono molti problemi, poiché dovrebbe esserenoto il software disponibile, ma se il sito viene pubblicato su Internet la situazione può essere molto varia e bisogna fare attenzione ai tag non standard non riconosciuti da tutti i browser, alle nuove tecnologie nonsupportate da tutti i browser, alla necessità di scaricare plug-in, che potrebbe infastidire e così via; inoltremolti contenuti multimediali richiedono tempi di scaricamento molto lunghi.

Progettazione del testo delle pagine

Le informazioni possono essere suddivise in pagine piccole (organizzazione a pezzi) o in pagine lunghe(organizzazione a flusso continuo). Nell'organizzazione a pezzi le pagine vengono caricate rapidamente ed è facile la consultazione di una pagina, ma possono essere necessari molti link per arrivare a una informazione e la manutenzione dei link può essere onerosa. Nell'organizzazione a flusso continuo la manutenzione delle informazioni in un unico file è più semplice ed èfacile anche stampare le informazioni, ma il tempo di caricamento è più lungo e la struttura è rigida.Comunque la suddivisione in pagine dipende soprattutto dal contenuto; un singolo argomento deve esseremantenuto su una pagina e non spezzato su più pagine. Nella scrittura dei testi bisogna tenere conto che ogni pagina deve essere autonoma, perché vi si potrebbeaccedere direttamente; non si può fare quindi riferimento implicitamente a informazioni date in pagine

precedenti.Bisogna evitare di usare testi troppo lunghi, ma facilitare la scansione del documento predisponendo unsommario, suddividendo il testo in blocchi con titoli esplicativi ed evidenziando le parole chiave.I titoli devono sempre esprimere in modo chiaro il contenuto (questo è utile anche per i motori di ricerca chedevono indicizzare la pagina).Le informazioni contenute devono essere corrette ed è necessario mantenere periodicamente aggiornate le pagine, eliminando le informazioni non più valide.Il tipo di linguaggio, più o meno formale o tecnico, dipende dal pubblico a cui è rivolto il sito, manaturalmente bisogna scrivere in modo chiaro, sintetico e, ovviamente, corretto. Nel testo bisogna evitare di usare la terminologia specifica del browser (tipo fare clic qui), che potrebbeaddirittura essere impropria in certe situazioni (e se l'utente usa la tastiera e non il mouse?).Il testo deve essere disposto nella pagina in modo da evitare che la lettura richieda un eccessivo scrolling

verticale, ma soprattutto orizzontale (righe larghe circa 400 pixel possono essere lette agevolmente anche sumonitor a bassa risoluzione).




9

Se il sito è di interesse internazionale si può creare una versione delle pagine in Inglese e predisporre un link per passare da una versione all'altra.

Progettazione della grafica delle pagineIn una pagina, anche di solo testo, si può far uso del colore per ottenere un aspetto più attraente. Non bisogna

però dimenticare che la pagina deve essere prima di tutto leggibile; è importante il contrasto tra il coloredello sfondo e quello del testo: alcune coppie di colori danno una buona leggibilità mentre altre stancanol'occhio e rendono difficoltosa la lettura.La regola della leggibilità vale naturalmente anche nel caso si usi una immagine di sfondo per personalizzare il sito; è bene usare immagini non troppo particolareggiate e con colori tenui.È invece importante non modificare il colore standard dei link (blu per i link da visitare e rosso o viola per quelli già visitati), perché ciò potrebbe confondere.Per quanto riguarda l'uso di immagini o animazioni bisogna tenere presente che se la pagina contiene moltielementi grafici i tempi di scaricamento della pagina possono essere molto lunghi e non tutti sono disposti adaspettare; inoltre troppa grafica può distogliere l'attenzione e la presenza di animazioni incessantiinnervosisce.Se la pagina contiene molta grafica si può almeno strutturare la pagina in modo che la parte iniziale

comprenda una barra di navigazione con pochi elementi grafici e del testo (informazioni o collegamentiecc.), che l'utente possa esaminare intanto che viene scaricato il resto della grafica.È importante prevedere del testo in sostituzione alle immagini perché l'utente può anche disabilitare lavisualizzazione delle immagini per navigare più velocemente.Per l'inserimento di immagini è importante scegliere il formato adeguato (tra GIF, JPEG e PNG).Le immagini GIF devono essere create con la tavolozza Web safe che evita il dithering (cioè la simulazionedi colori non disponibili con altri disponibili) offrendo un risultato migliore.Se la pagina deve contenere immagini di grandi dimensioni, è meglio creare una pagina con miniature diqueste immagini che facciano da collegamento alle immagini originali; in questo modo la pagina con leminiature viene scaricata più velocemente e l'utente può decidere se visualizzare le immagini originali.Si possono usare immagini interlacciate (o progressive, secondo il formato) per fare in modo chel'immagine si formi a poco a poco sulla pagina, man mano che le informazioni sono disponibili, oppurecaricare rapidamente un'immagine a bassa risoluzione e poi sostituirla con una ad alta risoluzione.Per l'inserimento di contenuti multimediali sono disponibili molte tecnologie; è bene però farne un usolimitato, senza esagerare con gli effetti speciali.

Progettazione della struttura del sitoLa presenza dei collegamenti sulle pagine determina le modalità di navigazione e quindi la struttura del sito.Esistono diverse strutture standard usate di solito nella creazione degli ipertesti:

• a rete: ogni pagina può essere collegata liberamente ad altre pagine; in realtà non è una vera e propriastruttura;

• ad albero: è la classica organizzazione gerarchica delle pagine; permette di seguire facilmente

l'approfondimento desiderato e di conoscere la propria posizione; è bene evitare di creare troppi livelli;• a stella: è in pratica un albero ad un solo livello; tutte le pagine sono raggiungibili con un solo salto; la

poca profondità può portare ad una home page con un eccessivo numero di link;




10

Figura n.1 Ipertesto a rete

Figura n.2 Ipertesto ad albero

• a lista lineare: ogni pagina è collegata alla precedente e alla successiva; è molto rigida ma può prevedere delle alternative, con ulteriori collegamenti più liberi;

• mista con combinazione di albero e lista: è adatta a documenti strutturati ma può disorientare nellanavigazione.

Non esiste una struttura migliore in assoluto, di solito si usano strutture miste o diverse strutture in partidiverse del sito; per la scelta bisogna tenere conto del genere di informazioni presentate, della facilità nelraggiungere le informazioni, della possibilità di scelta di percorsi personalizzati e così via.

È importante che il sito adotti un valido metodo di navigazione per permettere al visitatore di capire lastruttura del sito e non perdere l'orientamento.Se il sito è particolarmente complesso si può inserire un motore di ricerca interno.




11

Figura n.3 Ipertesto a stella

Figura n.4 Ipertesto a lista lineare

Figura n.5 Ipertesto a struttura mista concombinazione di albero e lista.

I collegamentiLa possibilità di navigazione dipende dai collegamenti (link) presenti nelle pagine.Per la creazione dei collegamenti si può usare un testo che descriva lo scopo del collegamento,un'immagine o una mappa (un'immagine che porta a destinazioni diverse facendo clic in punti diversi); per le immagini che fungono da collegamenti è ancora più importante che per le altre immagini prevedere deltesto sostitutivo, altrimenti si potrebbe limitare la navigazione.Il testo dei collegamenti non deve contenere il nome del file di destinazione, che si può vedere nella barra distato.Per rendere semplice la navigazione bisogna inserire in ogni pagina collegamenti a tutte le sezioni del sito ealla home page.Il collegamento alla home page è importantissimo per permettere di ritrovare il punto di partenza durante lanavigazione del sito, ma anche per permettere a chi arriva ad una pagina da un sito diverso di poter individuare immediatamente la pagina principale; il collegamento alla home page può essere costituito ancheda un elemento grafico come logo dell'azienda.




12

Nelle pagine in cui è utile una consultazione ordinata bisogna inserire collegamenti alla pagina successiva e precedente (avanti e indietro).Può essere utile creare una pagina con la mappa del sito, che permetta di orientarsi sull'organizzazione delleinformazioni (per esempio con i titoli delle sezioni e i titoli degli articoli di ogni sezione), direttamenteaccessibile dalle varie pagine.Un altro suggerimento è quello di suddividere le pagine in cartelle in modo che l'URL aiuti a capire lastruttura del sito.I collegamenti possono essere:

• collegamenti espliciti di navigazione (avanti, indietro, alla home page ecc.);• collegamenti impliciti di navigazione (collegamenti a informazioni correlate);• collegamenti a contenuti multimediali (visualizzati in finestre separate).

I collegamenti impliciti di navigazione possono condurre ad un punto interno alla pagina, ad una paginainterna al sito o ad una pagina di un altro sito. Se il collegamento conduce ad un sito diverso si puòvisualizzare la pagina di destinazione in una finestra diversa. Il design del sito dovrebbe comunque aiutare ariconoscere le pagine che appartengono allo stesso sito e quindi a capire quando un collegamento conduce a

un sito diverso; questa indicazione naturalmente è fornita anche dall'URL visualizzato nella barra di statoquando ci si posiziona sul collegamento e nella barra degli indirizzi quando si visualizza la pagina.

Pubblicazione di un sito

Pubblicazione sul serverPer mettere a disposizione di altri il proprio sito bisogna pubblicarlo su un server WEB (metterlo in linea).Un server WEB è un programma che permette la consultazione di pagine Web memorizzate in opportunecartelle.Se il sito deve essere reso disponibile solo all'interno di una intranet basta collocare le pagine sul server, nellacartella appropriata.

Se il sito deve essere reso disponibile su tutta la rete Internet bisogna utilizzare un servizio offerto dal provider; le possibilità sono il servizio di hosting o il servizio di housing:

• l'hosting è un servizio che ospita più siti Web su una singola macchina del provider;• l'housing prevede un server di proprietà dell'utente, gestito dall'utente, collocato direttamente nei locali

del provider.

L'housing è costoso e richiede esperienza nella gestione del server; è adatto solo per siti con moltissimotraffico; il vantaggio è che potendo amministrare direttamente il server si possono scegliere tutti icomponenti desiderati: sistema operativo, server Web, tecnologie server side come ASP o PHP, database ecosì via.I servizi di hosting hanno costi minori, ma anche prestazioni minori (molti siti condividono lo stesso

computer e la stessa banda).I provider che offrono l'accesso a Internet gratuito offrono in genere anche uno spazio Web gratuito per la pubblicazione del proprio sito.In realtà chiunque potrebbe installare sul proprio computer un server Web per mettere in linea un sito; il problema riguarda più che altro la capacità di accesso.Se l'accesso a Internet si ottiene con un collegamento telefonico al provider il server sarà disponibile solodurante il collegamento; inoltre l'indirizzo IP probabilmente sarà dinamico mentre chi deve accedere deveconoscere l'indirizzo IP del computer.Anche se l'accesso a Internet è del tipo ADSL e quindi il computer è sempre collegato a Internet (sempre chesia acceso) il problema è che l'accesso avviene con una banda molto limitata (a velocità molto bassa) equindi la possibilità di accesso è molto limitata; inoltre consentire l'accesso sul proprio computer comportagrossi rischi per la sicurezza del computer stesso (virus, privacy delle altre informazioni sul disco ecc.) che

richiedono adeguate misure di protezione.




13

Registrazione di un nome di dominioSolitamente quando si ha uno spazio Web presso un provider l'URL del sito è del tipourlServerDelProvider/sottodirectory/nomeUtente o qualcosa di simile.Per poter avere un nome di dominio del tipo www.nomeUtente.dominio bisogna registrare un nome di

dominio di secondo livello (nomeUtente.dominio).La registrazione dei nomi di dominio nel dominio it è gestita dalla Registration Authority italiana(www.nic.it ). La registrazione dei nomi di dominio può essere fatta in modo più semplice appoggiandosi a un provider che provvede alla registrazione.Per la registrazione di un nome nel dominio it bisogna inviare alla Registration Authority una lettera di

assunzione di responsabilità con i propri dati e un modulo con la richiesta di registrazione in cui bisognafornire varie informazioni tecniche sul dominio (nome del dominio nel formato usuale, noto come formatoRFC822, nome del dominio in formato X.400, organizzazione richiedente, indicazione dei responsabili deldominio, informazioni sui server DNS per la gestione del nome di dominio ecc.); la richiesta di registrazione può essere effettuata da un provider per conto del richiedente ma è necessaria comunque la lettera diassunzione di responsabilità.I privati cittadini possono richiedere un solo nome nel dominio it; chi possiede la partita iva può registrarneanche più di uno.

I nomi possono contenere solo lettere (non c'è differenza tra minuscole e maiuscole), cifre e il trattino (-); lalunghezza del nome può variare da 3 a 63 caratteri.È possibile anche registrare un nome in uno dei domini di tipo organizzativo (tra quelli originali solo in com, net e org).In questo caso non è necessaria la lettera di assunzione di responsabilità, chiunque può registrare anche piùdi un nome e si possono usare nomi fino a 67 caratteri.Registrando un nome di dominio anche gli indirizzi di posta possono assumere la [email protected] la registrazione di un nome di dominio bisogna pagare una quota annuale.Alcuni provider offrono gratuitamente un nome di dominio di terzo livello del tiponomeUtente.nomeDominioDelProvider o anche un nome di dominio di secondo livello per un periodotemporaneo.In ogni caso bisogna accertare che il nome di dominio che si vuole registrare non sia già in uso; i provider che effettuano la registrazione dei nomi di dominio permettono anche di controllare se il nome è utilizzabile(o http://www.internic.net/whois).

Registrazione nei motori di ricercaDopo aver creato il sito, per fare in modo che gli altri possano visitarlo, bisogna registrare il sito presso i principali motori di ricerca e Web directory. Motori di ricerca e Web directory di solito contengono nella pagina principale un collegamento a una pagina con un modulo per sottoporre il proprio sito.Per sottoporre il sito ai motori di ricerca bisogna segnalare l'URL del sito; in questo modo si invitano i programmi del motore di ricerca (gli spider) a visitare il proprio sito e a indicizzarlo.Per sottoporre il sito a una Web Directory in genere bisogna indicare anche la categoria in cui si ritiene vada

inserito (per esempio per sottoporre un sito a Yahoo! bisogna usare il collegamento per il suggerimento disiti direttamente dalla pagina della categoria che si ritiene più appropriata).Per sottoporre il sito a più motori di ricerca o Web directory bisogna collegarsi alla pagina Web di ciascuno eseguire la procedura specifica richiesta dal servizio.Ci sono anche servizi di annunci che mandano le informazioni sul sito a vari motori di ricerca e Webdirectory.




14

Browser Scripting

DHTML e VBScript

Introduzione

All’inizio c’era solo il linguaggio HTML (Hypertext Markup Language) e tutte le pagine Web erano quindistatiche, e tuttavia abbastanza accattivanti per alimentare la Web-mania. In seguito venneo le applicazioniCGI (Common Gateway Inteface), applicazioni esterne che venivano eseguite sul server, e, per la primavolta, permettevano di costruire pagine dal contenuto non fisso. Il passaggio successivo verso il contenutodinamico furono le procedure di scripting lato-client, semplici programmi che venivano eseguiti all’internodel browser, scritti in linguaggi macro come i linguaggi Microsoft Visual Basic Scripting Edition (VBScript)o i linguaggi di scripting conformi alle specifiche ECMAScript. Microsoft ha poi rilasciato tecnologie proprietarie per la creazione di contenuto dinamico nel browser – come i controlli ActiveX e i documentiActiveX – mentre altri produttori si erano concentrati maggiormente sulle Applet scritte in Java. Attualmentela tecnologia lato-server più interessante, potente e largamente accettata si basa sullo scripting lato-server esulle ASP (Active Server Page). Il modo più potente per creare pagine dinamiche sul lato client si basa su

Dynamic HTML (DHTML).Tutte queste tecnologie presentano però alcuni limiti. Le applicazioni CGI non sono molto efficienti, non possono essere facilmente scalate a centinaia di client, e non sono abbastanza potenti per le grandiapplicazioni Internet o Intranet. Lo scripting lato-client è decisamente più adatto per un programmatoreVisual Basic, specialmente se usa VBScript. VBScript tuttavia non è al momento supportato da Netscape Navigator, quindi dovreste usarlo solo per le installazioni Intranet. Netscape Navigator non supporta neppurei controlli ActiveX e i documenti ActiveX. Molti sviluppatori Internet considerano le pagine ASP il modomigliore per creare le pagine dinamiche in HTML puro, compatibili con qualsiasi browser, ma la creazione ela gestione di grandi applicazioni basate su ASP è tutt’altro che semplice. Gli script sul server inoltrediventano una soluzione meno efficiente quando il numero dei client cresce.Visual Basic 6 introduce 2 nuovi approcci alla programmazione Internet che potrebbero essere la risposta atutte le vostre esigenze, in quanto uniscono la flessibilità delle tecnologie Intenet più collaudate con la

potenza e la facilità d’uso del linguaggio Visual Basic. Le applicazioni DHTML sono componenti in-process(DLL) che vengono eseguiti sulla macchina client all’interno di Microsoft Internet Explorer e intercettanoeventi attivati dagli elementi della pagina DHTML, per esempio il click dell’utente su un pulsate o su uncollegamento ipertestuale.

Corso rapido di HTMLPer poter iniziare la creazione di un’applicazione DHTML, dovete conoscere almeno i fondamenti di HTML, per esempio come creare una pagina HTML e come usare almeno i più comuni e importanti tag HTML. Segià conoscete la sintassi HTML, potete tralasciare la lettura di questa sezione.

Titoli e paragrafi

Una pagina HTML è un file che consiste di normale testo più una serie di tag che indicano come la paginadeve essere rappresentata sullo schermo del client. Ecco la scrittura tipo di una pagina HTML.

<HTML><HEAD><TITLE>Il titolo di questa pagine</TITLE></HEAD><BODY>Benvenuti in HTML</BODY></HTML>

Questo codice visualizza la stringa “Benvenuti in HTML” lungo il lato superiore di una pagina bianca.

Notate che tutti gli elementi della pagina sono racchiusi in una copia di tag e ogni tag è racchiuso tra parentesi angolari. Il titolo della pagina, per esempio, cioè la stringa che Internet Explorer visualizza nella




15

barra del titolo della sua finestra principale, è racchiusa tra i tag <TITLE> e </TITLE>. I tag <BODY> e</BODY> racchiudono il testo che appare all’interno della pagina, cioè il corpo della pagina stessa.Oltre al titolo principale (<TITLE>), e nel corpo (<BODY>) nella pagina HTML possono essere presentiuno o più titoli ulteriori (<H> da “Heading”). HTML supporta sei livelli di titoli, dove il livello 1 corrispondeal titolo più importante e il livello 6 al meno importante. I titoli sono utili per fornire intestazioni di variolivello alle sezioni della pagina, come nell’esempio che segue.

<BODY><H1>Questo è il titolo di livello 1</H1>Testo normale in questa posizione

<H2>Questo è un titolo di livello 2</H2>Testo sotto il titolo di livello 2</BODY>

Una caratteristica importante del linguaggio HTML è che i caratteri di ritorno a capo e di avanzamento riganel testo sorgente non hanno effetto sull’aspetto della pagina. A parte i tag <H> per i titoli e pochi altri tag,che aggiungono automaticamente una coppia CR-LF, per iniziare una nuova riga occorre inserire

manualmente i tag <P>, come segue.

Questo è un paragrafo.<P>E anche questo.<P>

Il tag <P> inizia una nuova riga e inserisce una riga vuota fra il paragrafo corrente ed il successivo. Se avete bisogno di interrompere la riga corrente, ma non desiderate aggiungere una riga vuota, potete usare il tag<BR>.

Questo paragrafo è suddiviso<BR>in due righe.<P>

Per aggiungere una riga spaziatrice fra due paragrafi potete usare il tag <HR> come segue.

Due paragrafi separati<HR>da una line orizzontale.<P>

La copia di tag <PRE> e </PRE> è un’eccezione alla regola secondo cui vengono ignorati i ritorni a capo deltesto sorgente in HTML: tutto ciò che sta fra questi tag viene rappresentato come testo monospaziato(tipicamente con il font Courier) e tutte le coppie di caratteri CR-LF incorporate vengono inserite nell’outputrisultate. Questi tag vengono spesso usati per inserire testo nella forma originale (per un listato di codicesorgente), come segue.

<PRE>Prima rigaSeconda riga</PRE>

Per default tutto il testo è allineato a sinistra, ma potete usare il tag <CENTER> e </CENTER> per centrareuna porzione di testo.

<CENTER>Un paragrafo centrato<P>Un altro paragrafo centrato</CENTER>

Creare un elenco puntato e numerato in HTML è molto semplice. Per creare voci puntate potete usare i tag<LI> e </LI> per contrassegnare l’inizio e la fine delle singole voci e quindi racchiudere l’intero elenco fra<UL> e </UL>.

<UL><LI>Primo paragrafo puntato</LI>

<LI>Secondo paragrafo puntato</LI><LI>Terzo paragrafo puntato</LI></UL>




16

Per creare un elenco numerato in modo simile, con l’unica differenza che dovete racchiudere l’elenco in unacoppia di tag <OL> e </OL>.

<OL><LI>Prima dovete fare questo.</LI><LI>Quindi dovete fare questo</LI>

</OL>

AttributiLa maggior parte dei tag HTML possono incorporare speciali attributi che hanno effetto sulla visualizzazionedel testo fra i tag. Per esempio i titoli sono allineati a sinistra per default, ma potete modificarel’allineamento di un determinato titolo aggiungendo l’attributo ALIGN.

<H1 ALIGN=”center”>Questo è un titolo di livello 1 centrato</H1><H2 ALIGN=”right”>Questo è un titolo di livello 2 allineato a destra</H2>

L’attributo TEXT definisce il colore del testo per un elemento della pagina. Se usate questo attributo per iltag BODY, il colore ha effetto sull’intera pagina.

<BODY BGCOLOR=”cyan” TEXT=”#FF0000”>Il testo di questa pagina è rosso su sfondo ciano</BODY>

Potete specificare un attributo di colore usando il formato #RRGGBB, concettualmente simile alla funzioneRGB, di Visual Basic, e potete usare uno dei seguenti 16 nomi di colori accettati da Internet Explorer: Black,Marroon, Green, Olive, Navy, Purple, Teal, Gray, Silver, Red, Lime, Yellow, Blue, Fuchsia, Aqua e White.Il tag BODY supporta anche altri attributi di colore, quali LINK (usato per i collegamenti ipertestuali),ALINK (per la visualizzazione dei collegamenti ipertestuali non ancora visitati) e VLINK (per la

visualizzazione dei collegamenti ipertestuali visitati).Potete applicare il grassetto a una porzione di testo racchiudendolo in una coppia <B> e /B>.Analogamente potete applicare il corsivo racchiudendo il testo in una coppia <I> e </I>.

<B>Questo testo è in grassetto.</B><P><I>Questo testo è un corsivo</I><P><B>Questa frase è in grassetto e contiene una parola in <I>corsivo</I>.</B>

Per applicare una sottolineatura singola al testo potete usare la coppia di tag <U> e </U>, anche se è preferibile evitarlo perché l’attributo di sottolineatura dovrebbe essere riservato esclusivamente aicollegamenti ipertestuali.Potete applicare attributi a un intero paragrafo racchiudendoli fra i tag <P> e </P> come segue.

<P ALIGN=”center”>Paragrafo centrato</P>

Per medicare gli attributi del testo, potete usare il tag FONT, che supporta 3 attributi: FACE, SIZE eCOLOR. L’attributo COLOR viene specificato come sopra, l’attributo FACE è il nome di un font e accettaanche un elenco di nomi di font delimitato da virgole (,) se desiderate fornire scelte alternative nel caso ilfont preferito non sia disponibile sulla macchina dell’utente.

<FONT FACE=”Arial, Helvetica” SIZE=”14” COLOR=”red”>Testo rosso</FONT>

Questa istruzione tenta di usare il font Arial, ma utilizza Helvetica se Arial non è installato nel sistemadell’utente. L’attributo SIZE è la dimensione del carattere in punti. Questo attributo accetta inoltre unnumero preceduto dal segno più (+) o meno (-) per indicare una dimensione relativa alla dimensione del fontdi default.




17

Testo in dimensioni normali<P><FONT SIZE=”+4”>Testo di 4 punti più grande</FONT><P><FONT SIZE=”-2”>Testo di 2 punti più piccolo</FONT>

ImmaginiPer inserire un’immagine in una pagina HTML avete bisogno del tag <IMG>, il cui attributo SRC specificail percorso all’immagine da visualizzare; tale percorso può essere assoluto o relativo rispetto al percorsodella pagina stessa. Per esempio, il codice che segue carica un’immagine GIF che si trova nella stessadirectory del file sorgente HTML.

<IMG SRC=”MyLogo.gif”>

Le immagini sono tipicamente nel formato GIF o JPEG. Le immagini GIF possono essere interfacciate e inquesto caso il browser prima scarica riga alterne di pixel e quindi scarica le rimanenti.Come accade per le stringhe di testo, potete centrare un’immagine orizzontalmente racchiudendo il tag<IMG> fra i tag <CENTER> e </CENTER> o usando l’attributo ALIGN. Se conoscete le dimensionidell’immagine da caricare, potete specificarle usando gli attributi WIDTH e HEIGHT, affinché il browser

possa posizionare correttamente il testo intorno all’immagine prima di scaricarla effettivamente. La targhettae l’altezza dell’immagine sono espresse in pixel.

Questa è un’immagine allineata a destra larga 200 pixel e alta 100.<IMG ALIGN=”right” WIDTH=”200” HEIGHT=”100” SRC=”MyLogo.gif”>

Se necessario il browser ingrandirà o ridurrà l’immagine originale per adattarla alle dimensioni specifiche.Questa capacità viene spesso sfruttata per inserire elementi grafici che separano aree sulla pagina. Per esempio potete creare un separatore orizzontale utilizzando un’immagine con uno sfondo a gradiente e unattributo HEIGHT di pochi pixel.Potete controllare quanto spazio bianco rimane intorno all’immagine usando gli attributi HSPACE eVSPACE, per spazio orizzontale e spazio verticale rispettivamente. Per default un bordo trasparente di due

pixel viene aggiunto intorno all’immagine ma potete eliminarlo (impostando l’attributo BORDER a nome) ospecificare una larghezza diversa.

Un’immagine allineata a destra con 10 pixel di spazio bianco orizzontale e 20pixel di spazio verticale.<IMG VSPACE=”20” ALIGH=”right” SRC=”MyLogo.gif” HSPACE=”10”>

Infine, l’attributo ALT viene usato per fornire una descrizione di testo dell’immagine. Questa descrizione èvisualizzata nel browser mentre l’immagine viene scaricata e sostituisce l’immagine se nel browser dell’utente è disattivata la visualizzazione delle immagini.

Collegamenti ipertestualiHTML supporta tre tipi di collegamenti ipertestuali o hyperlink: a un’altra posizione della stessa pagina, aun’altra pagina dello stesso server e a una pagina di un altro dominio Internet. In tutti i casi dovreste usare itag <A> e </A> per definire la porzione di testo che apparirà sottolineata. Questi tag sono sempreaccompagnati dall’attributo HREF che punta alla destinazione del collegamento ipertestuale.

Fate click <A HREF=”page2.htm”>qui</A> per passare alla pagina successiva o fateclick <A HREF=”sommario.htm”>qui</A> per accedere al sommario.

Se la destinazione del collegamento ipertestuale è all’interno della stessa pagina, avete bisogno di un modo per etichettarla. Potete farlo con il tag <A> e l’attributo NAME (non avete bisogno di inserire una stringa trai tag di apertura e chiusura).

<A NAME=”intro”>Introduzione</A>




18

Potete posizionare questo tag, detto anche ancora, prima della prima riga della destinazione nel codicesorgente HTML. Per fare riferimento a un’altra ancora nella stessa pagina, potete usare il simbolo # per ilvalore dell’attributo HREF.

Fate click <A HREF=”#intro”>qui</A> per accedere all’introduzione.

Potete creare un collegamento ipertestuale che punta a un’ancora interna a un’altra pagina usando la sintassiche segue.

Fate click <A HREF=”pag2.htm#intro”>qui</A> per accedere all’introduzione dellibro.

Potete inoltre avere un collegamento ipertestuale che punta a qualsiasi pagina in un altro server, fornendo ilsuo URL completamente qualificato.

Accedi al sito Web <A HREF=”http://www.prova.it/index.htm”>prova</A>

Come collegamenti ipertestuali potete usare anche immagini. La sintassi è la stessa e vi basta inserire un tagIMG di normale testo fra la coppia di tag <A> e </A> come nel codice che segue.

<A HREF=http://www.prova.it><IMG SRC=”MyLogo.gif”></A>

Potete creare un’immagine “cliccabile” collegata a una mappa immagine e in questo caso l’immagine puòincludere più punti sensibili, o hot spot , ciascuno dei quali porta a una destinazione diversa.

TabelleIl linguaggio HTML presenta un ricco assortimento di tag e parole chiave per la creazione e la formattazionedella tabelle. Le tabelle sono importanti nel normale HTML, perché offrono un modo per posizionale eallineare con precisione il testo e le immagini. Tutti i dati appartenenti a una tabella vengono racchiusi in unacoppia di tag <TABLE> e </TABLE>. Ogni nuova riga e contrassegnata da un tag <TR> e ogni colonna daun tag <TD>. Potete inoltre usare il tag <TH> per le celle nella riga delle intestazioni. I tag di chiusura</TR>, </TD> e </TH> sono opzionali. L’esempio che segue visualizza una tabella di due colonne e trerighe dove la prima riga contiene le intestazioni.

<TABLE BORDER=”1”><TR>

<TH>Intestazione di riga 1, colonna 1</TH><TH>Intestazione di riga 1, colonna 2</TH>

</TR><TR>

<TD>Riga 1, colonna 1</TD>

<TD>Riga 1, colonna 2</TD></TR><TR>

<TD>Riga 2, colonna 1</TD><TD>Riga 2, colonna 2</TD>

</TR></TABLE>

L’attributo BORDER specifica lo spessore del bordo e, se viene omesso, la tabella appare priva di bordo.Potete cambiare il colore del bordo con l’attributo BORDERCOLOR e potete creare un effetto 3D con gliattributi BORDERCOLORLIGHT e BORDERCOLORDARK. La tabella può avere un colore di sfondo(attributo BGCOLOR) o può usare un’immagine di sfondo specificata con l’attributo BACKGROUND.

Ogni cella può contenere testo, un’immagine o entrambe. Potete variare l’allineamento orizzontale delcontenuto di una cella usando l’attributo ALIGN (che può assumere i valori left , center o right ) e poteteusare l’allineamento verticale con l’attributo VALIGN (che può presentare i valori top, middle o bottom). Per default una cella è larga abbastanza per visualizzare il suo contenuto, ma potete impostare qualsiasi




19

dimensione desiderata con gli attributi WIDTH e HEIGHT, i cui valori sono espressi in pixel. Per l’attributoWIDTH potete inoltre specificare una percentuale della larghezza della tabella. Potete applicare la maggior parte degli attributi appena visti anche ai tag <TR>, <TD> e <TH>. L’esempio che segue dimostra comeapplicare questi tag.

<TABLE BORDER=”1”><TR>

<TH HEIGHT=”100”>Una linea alta 100 pixel</TH><TH><IMG SRC=”MyLogo.gif”></TH>

</TR><TR>

<TD WIDTH=”200” HEIGHT=”90” ALIGN=”center” VALIGN=”bottom”>Testo allineato al centro in basso

</TD></TR><TR VALIGN=”bottom”>

<TD> Questa riga è allineata in basso</TD><TD ALIGN=”right”>Questa cella è allineata a destra</TD>

</TR></TABLE>

Una cella può contenere inoltre un collegamento ipertestuale o un’immagine che funziona come uncollegamento ipertestuale. Per default una cella è larga abbastanza per visualizzare il suo contenuto ma potete usare il contenuto WIDTH del tag <TABLE> per specificare una larghezza assoluta in pixel o una percentuale della larghezza della finestra.

<TABLE BORDER=”1” WIDTH=”90%”>

StiliGli stili offrono un modo per definire l’aspetto di un tag HTML in una pagina HTML. Se non specificate uno

stile, un determinato titolo viene sempre visualizzato con gli attributi di defaul, per esempio un titolo <H1>usa sempre il font Times New Roman nero 14 punti. Potete modificare queste impostazioni di defaultutilizzando una coppia di tag <FONT>, come segue.

<FONT FACE=”Arial” SIZE=”20” COLOR=”red”><H1>Titolo di livello 1</H1></FONT>

Il problema di questo approccio è che se tutti i titoli di livello 1 devono essere resi con attributi differenti daquello non standard, dovete aggiornare tutte le occorrenze dei tag <H1>. Inoltre quando in seguito vorretecambiare il colore o la dimensione dei font, dovrete rivedere di nuovo tutti i tag.Se invece definite e applicate uno stile, per eventuali modifiche future avete bisogno di ridefinire il tag <Hx>una sola volta e la modifica avrà effetto sull’intero documento. Potete inoltre svolgere un altro passaggio emantenere le vostre definizioni di stili in un file a parte, detto file CSS o Cascading Style Sheet

(letteralmente: Fogli di Stile in Cascata), a cui tutte le pagine HTML dell’applicazione possono fareriferimento. Questo approccio vi offre un metodo efficace per mantenere separato il contenuto di undocumento HTML dal suo aspetto, al fine di poter facilmente modificare l’uno o l’altro in modoindipendente. Mentre è pratica comune mantenere gli stili in un file separato, per maggiore chiarezza negliesempi che seguono includeremo la definizione dello stile nella pagina HTML che lo usa.Potete definire un nuovo stile usando la coppia di tag <STYLE> e </STYLE>, per esempio, potete ridefinirei tag <H1> e <H2> come segue.

<STYLE>H1 {font-family=”Arial”; font-size=”20”; color=”red”}H2 {font-family=”Arial”; font-size=”16”; font-style=”italic”; color=”green”}

</STYLE>

<H1>Questo è un titolo rosso</H1><H2>Questo è un titolo verde in corsivo</H2>




20

Il nome che il tag che desiderate ridefinire è seguito da un elenco racchiuso tra parentesi graffe ({})composto da coppie ATTRIBUTO=VALORE separate tra loro mediante punto e virgola (;). Nella maggior parte dei casi potete omettere le virgolette doppie (“”) che racchiudono un valore stringa, per esempioquando specificate un attributo di colore. Potete ridefinire tutti i tag che volete con un’unica coppia di<STYLE> e </STYLE>.Gli Style Sheet permettono inoltre di definire comportamenti contestuali. Considerate per esempio ladefinizione del tag <H2> sopra che applica il verde e il corsivo a tutti i titoli di livello 2. Uno stile comequesto effettivamente annulla l’effetto di un tag <I> compreso fra i tag <H2> e </H2>, perché il testo è già incorsivo. Potete rimediare a questo specificando che i tag <I> fra i tag <H2> e </H2> dovrebbero produrrecaratteri normali (non corsivi) in rosso. Potete ottenere questo comportamento aggiungendo questadefinizione allo stile (la riga aggiunta è in grassetto).

<STYLE>H1 {font-family=”Arial”; font-size=”20”; color=”red”}H2 {font-family=”Arial”; font-size=”16”; font-style=”italic”; color=”green”}H2 I {font-style=”normal”; color=”blue”}

</STYLE><H2>Questo è un titolo con una parte in <I>normal blue</I></H2>

Anziché ridefinire l’aspetto di tutti i tag con un determinato nome, potete impostare lo stile di una specificaoccorrenza di un tag usando lo stile STYLE come segue.

<H3 STYLE=”font-style=bold; color=blue”>Un titolo di livello 3 blue egrassetto</H3>

Un’importante caratteristica dei fogli di stile è il fatto che permettono di definire nuove classi di attributistilistici. In questo modo potete etichettare un elemento nella pagina secondo il suo significato e specificarnel’aspetto altrove nella pagina o (meglio) in un foglio stile separato. Questo approccio è simile a quelloseguito quando si definisce un nuovo stile in un elaboratore di testi come Microsoft Word. Immaginate per esempio che alcuni titoli siano titoli libro e che tutti i titoli libro delle pagine HTML debbano essereformattati in grassetto e in verde. Vi basta creare una classe di stile booktitle e quindi applicarla quando neavete bisogno usando l’attributo CLASS.

<STYLE>.booktitle {font-family=”Arial”; font-style=”bold”; color=”green”}</STYLE><H3 CLASS=”booktile”>Titolo del libro</H3>

L’attributo CLASS è molto efficace quando viene usato con i tag <DIV> e </DIV> per applicare una particolare classe di stile a una porzione della pagina.

<STYLE>.listing {font-family=”Courier New”; font-size=”12”}</STYLE><DIV CLASS=”listing”>

Un listato Visual Basic<BR>Dim x as Variant

</DIV>

Infine ecco un modo per memorizzare una definizione di stile in un altro file, basato sulla direttiva @import.

<STYLE>@import URL(“http://www.prova.it/styleSheet.css”);

</STYLE>




21

FormI form HTML offrono un modo per consentire all’utente di immettere informazioni in una pagina. Un form può contenere controlli, fra cui text box a una o più righe, check box, option button, command button, list box e combo box. Questi controlli non possono competere con i loro corrispondenti in Visual Basic, ma sonoabbastanza potenti per la maggior parte degli scopi. Tutti i controlli di un form HTML devono essereracchiusi fra i tag <FORM> e </FORM>. Il tag <FORM> accetta vari attributi e il più importante è NAME, perché dovete assegnare un nome al form se volete accedere ai suoi controlli da routine script. Poteteaggiungere controlli esperni a un form, per esempio quando intendete elaborarli attraverso script e nonintendete inviare il loro contenuto al server Web. La maggior parte dei controlli in un form vengono inseritiusando il tag <INPUT>. L’attributo TYPE determina il tipo del controllo e l’attributo NAME è il nome delcontrollo. Il codice che segue per esempio crea un form con un controllo checkbox.

<FORM NAME=”nomeForm”><INPUT TYPE=”checkbox” NAME=”spedito” CHECKED> Il prodotto è stato

spedito.<BR></FORM>

L’attributo NAME corrisponde vagamente alla proprietà name dei controlli Visual Basic. L’attributochecked visualizza un segno di spunta nel controllo. Il testo che segue il carattere > corrisponde alla caption del controllo, ma in HTML è semplicemente testo che segue il controllo sulla pagina.L’attributo NAME è più importante per i controllo radio button, perchè tutti i controlli con lo stesso nomeappartengono allo stesso gruppo di scelte che si escludono a vicenda. Potete selezionare uno dei controlli delgruppo aggiungendo l’attributo CHECKED come segue.

Selezionate il tipo di malfunzionamento osservato:<BR><INPUT TYPE=”radio” NAME=”problem” CHECKED> Risultati errati<BR><INPUT TYPE=”radio” NAME=”problem”> Errore fatale<BR><INPUT TYPE=”radio” NAME=”problem”> Errore generale di protezione<BR>

HTML supporta tre tipi di pulsanti di comando: submit (invia), reset (ripristina) e il generico pulsante programmabile. I primi due sono simili e differiscono solo per il valore dell’attributo TYPE.

<INPUT TYPE=”submit” VALUE=”submit”><INPUT TYPE=”reset” VALUE=”reset values”>

In entrambi i casi l’attributo VALUE determina la caption del pulsante. L’effetto del pulsante Submit èinviare al server il contenuto di tutti i controlli del form. L’effetto del pulsante Reset è cancellare il contenutodi tutti i controlli del form e ripristinare i valori iniziali. Il terzo tipo di pulsante viene usato in combinazionecon uno script, come spiegheremo in seguito.I form HTML possono contenere tre tipi di comandi textbox: il controllo standard a una sola riga, il controllo per l’immissione di password e il controllo a più righe. Nel controllo a una sola riga l’attributo TYPE è

uguale a text , essi possono contenere un attributo value per specificare il contenuto iniziale del controllo einoltre supportano l’attributo SIZE (la larghezza in caratteri) e l’attributo MAXLENGTH (il massimonumero di caratteri).

Immettere il titolo del libro:<BR><INPUT TYPE=”text” NAME=”bookTitle” SIZE=”40” MAXLENGTH=”60” VALUE=”Corso WebMaster”>

Il controllo Password è funzionalmente identico al normale controllo textbox e supporta gli stessi attributi.Corrisponde a un controllo textbox di Visual Basic la cui proprietà passwordChar è stata impostata a unasterisco.

Immettere la vostra password:<INPUT TYPE=”password” NAME=”userPwd” SIZE=”40” MAXLENGTH=”60”><BR>




22

Il controllo Textarea corrisponde a un controllo textbox a più righe di Visual Basic. Si tratta di un’eccezionealla regola generale, perché esso usa il tag <TEXTAREA> anziché il tag <INPUT>; potete determinate ledimensioni del controllo usando gli attributi ROWS e COLS e il contenuto iniziale del controllo può essereinserito prima del tag di chiusura <TEXTAREA>.

<TEXTAREA NAME=”commenti” ROWS=”5” COLS=”30” MAXLENGHT=”1000”>Immettere i vostri commenti qui

</TEXTAREA>

Il testo fra <TEXTAREA> e </TEXTAREA> viene inserito nel controllo così com’è, inclusi i ritorni a capo.Se una riga è più lunga della larghezza del controllo, l’utente deve scorrere il controllo per vederne la partedestra.I form HTML supportano i controlli listbox a scelta unica e a scelte multiple, detti controlli Select nel gergodi HTML. Un controllo Select viene definito attraverso i tag <SELECT> e </SELECT> che accettanol’attributo SIZE per specificare l’altezza del controllo (espressa come numero di righe) e l’attributoMULTIPLE se il controllo accetta scelte multiple. Ogni singola voce dell’elenco richiede un a coppia di tag<OPTION> e </OPTION>. Potete inserire l’attributo SELECT se la voce è inizialmente selezionata e un

attributo VALUE per specificare la stringa che verrà passata al server quando il form verrà inviato. Il codiceche segue crea un controllo Select a scelte multiple altro 4 righe e in cui la prima è inizialmente selezionata.

<SELECT NAME=”product” SIZE=”4” MULTIPLE><OPTION SELECTED VALUE=”1”>Computer</OPTION><OPTION VALUE=”2”>Monitor</OPTION><OPTION VALUE=”3”>Hard disk</OPTION><OPTION VALUE=”4”>Driver CD</OPTION>

</SELECT>

Se omettete l’attributo MULTIPLE e specificate SIZE=”1” (o lo omettete), il controllo Select si trasforma inun controllo Combo Box.

ScriptingOra sapete come preparare una pagina HTML e un form HTML. Per usare lo scripting in questo contestoavete bisogno dei tag <SCRIPT> e </SCRIPT> per riservare una sezione del documento HTML per il vostrocodice come segue.

<SCRIPT language=”VBScript”>‘ Il vostro codice script va inserito qui

</SCRIPT>

Potete inoltre specificare un altro linguaggio di script nell’attributo LANGUAGE, per esempio JavaScript,ma nel nostro caso useremo sempre VBScript.

VBScript e Visual Basic for Applications a confrontoIl linguaggio VBScript è un vasto sottoinsieme di Visual Basic for Applications (VBA) e differisce da essosolo per alcuni aspetti.• VBScript non supporta i tipi di dati specifici. Ogni cosa in VBScript è un Variant, quindi la clausola As

nelle istruzioni Dim e negli elenchi di argomenti non è ammessa. Gli UDT non sono disponibili inVBScipt, quindi non potete usare le parole chiave Type … End Type.

• Per la stessa ragione in VBScript mancano le variabili oggetto specifiche, come l’operatore new. Per creare un nuovo oggetto esterno si usa la funzione createObject e si accede a esso con una variabileVariant e il late binding. Non sono supportati neppure i test typeof e i blocchi with … end with.

• VBScript non supporta le procedure property, gli argomenti optional, le variabili static, le costanti, lelabel, i comandi goto e gosub e l’istruzione on error goto (supporta invece on error resume next ).

• Tutte le funzioni stringa sono supportate tranne StrConv, l’operatore like e i comandi lset , rset e mid$.




23

• VBScript non offre funzioni e comandi di I/O su file. Potete usare la libreria FileSystemObject per manipolare directory e file e l’oggetto Dictionary per compensare il mancato supporto delle collection da parte di VBScript.

Esecuzione di codice al caricamento della pagina

La maggior parte delle volte il codice fra i tag <SCRIPT> e </SCRIPT> consiste di routine che vengonochiamate da un’altra posizione della pagina. E’ possibile inoltre aggiungere codice all’esterno di qualsiasiroutine, nel qual caso esso viene eseguito immediatamente dopo che la pagina è stata scaricata dal server ma prima che prima che venga visualizzata nella finestra del browser.

<SCRIPT LANGUAGE=”VBScript”>msgbox “Sta per essere visualizzata una pagina”

</SCRIPT>

Potete inoltre ottenere lo stesso risultato scrivendo codice per l’evento onload dell’oggetto Window, comesegue.

<SCRIPT LANGUAGE=”VBScript”>‘ Una variabile dichiarata all’esterno di qualsiasi routine è globale per la

paginaDim loadtimeSub Window_onload()

‘ ricorda quando la pagina è stata caricataloadtime = now()

End Sub</SCRIPT>

Accesso ai controlli del formIl codice VBScript può accede a qualsiasi controllo del form usando la sintassi nomeform.nomeControllo e può inoltre leggere e modificare gli attributi dei controlli usando la sintassi “punto” (.) esattamente come nelnormale Visual Basic. Il codice che segue mostra come assegnare una stringa all’attributo VALUE di uncontrollo TextBox quando il form viene caricato.

<FORM NAME=”DataForm”><INPUT TYPE=“text“ NAME=”userName” VALUE=””>

</FORM></SCRIPT LANGUAGE=”VBScript”>

DataFom.username.value=”Francesco”</SCRIPT>

Se desiderate accedere ai controlli del form quando la pagina viene caricata, il tag <SCRIPT> deve seguire iltag <FORM>; diversamente lo script tenta di fare riferimento a un controllo che non esiste ancora. Poteterecuperare lo stato di un controllo CheckBox attraverso la sua proprietà checked e potete recuperare l’indicedell’elemento selezionato in un controllo Select attraverso la sua proprietà SelectIndex. Per controllare lostato di un radio button, si usa la seguente sintassi.

if DataForm.RadioButton.Item(0).checked then …

Spesso viene usato codice VBScript per reagire agli eventi attivati dai controlli, per esempio i button, lecheck box e i radio button attivano un evento onclick quando l’utente fa un click su essi. Potete reagire aquesti eventi come fareste nel normale Visual Basic. L’esempio che segue usa un controllo TextBox, unButton e due RadioButton; quando l’utente fa click sul pulsante, il codice converte il contenuto del TextBoxin maiuscole o minuscole a seconda di quale RadioButton è attualmente selezionato.

<FORM NAME=”DataForm”><INPUT TYPE=“Text“ NAME=”UserName” VALUE=””><BR><INPUT TYPE=”Radio” NAME=”Case” CHECKED>Maiuscolo<BR>




24

<INPUT TYPE=”Radio” NAME=”Case” >Minuscolo<BR><INPUT TYPE=”BUTTON” NAME=”Convert” VALUE=”Convert”>

</FORM></SCRIPT LANGUAGE=”VBScript”>

Sub Convert_Onclick()If DataForm.Case.Item(0).checked then

DataForm.UserName.value = UCase(DataForm.UserName.value)ElseDataForm.UserName.value = LCase(DataForm.UserName.value)

End IfEnd Sub

</SCRIPT>

Un altro modo per specificare quale routine VBScript dovrebbe essere eseguita quando l’utente agisce su uncontrollo è aggiungere un attributo onclick nella definizione del controllo e impostare il suo valore affinchéfaccia riferimento al codice che deve essere eseguito quando viene fatto click sul controllo. Il codice chesegue per esempio definisce due RadioButton che modificano il contenuto di un controllo TextBox quandol’utente fa click su essi.

<FORM NAME=”UserData”><INPUT TYPE=”Text” NAME=”UserName” VALUE=””><BR><INPUT TYPE=”Radio” NAME=”Case” onClick=”convert(0)” CHECKED>Maiscolo<BR><INPUT TYPE=”Radio” NAME=”Case” onClick=”convert(1)” >Minuscolo

</FORM><SCRIPT LANGUAGE=”VBScript”>

Sub Convert(index)If index = 0 then

UserData.UserName.value = UCase(UserData.UserName.value)Else

UserData.UserName.value = LCase(UserData.UserName.value)End if

End Sub</SCRIPT>

Generalmente il contenuto del valore onclick è il nome della procedura che deve essere chiamata unito alvalore dei suoi argomenti (in questo caso index), ma in generale si può trattare di qualsiasi frammento dicodice VBScript valido.I controlli TextBox, TextArea e Select attivano un evento onchange quando l’utente digita qualcosa in essi oseleziona la nuova voce.Gli script vengono spesso usati per aggiungere voci a un controllo Select in fase di esecuzione. La sequenzadi azioni necessaria per raggiungere questo obiettivo potrebbe apparire contorta a un programmatore VisualBasic: dovete usare il metodo createElement dell’oggetto Document, impostarne le proprietà Text e Value einfine aggiungerlo alla collection Options del controllo Select. L’esempio che segue crea un form con un

controllo Select e un Button. Inizialemte il controllo Select contiene una sola voce, ma potete aggiungerealtre due voce facendo click sul pulsante.

<FORM NAME=”UserForm”><SELECT NAME=“Countries“ SIZE=”1”>

<OPTION VALUE=”1”>US</OPTION></SELECT><INPUT TYPE=”button” NAME=”AddCountries” VALUE=”Add Countries”>


Sub AddCountries_onclick()Dim eSet e = documento.createElement(“Option”)

e.text = “Italy”e.value = 2UserForm.Countries.options.Add eSet e = document.createElement(“Option”)




25

e.text = “Germany”e.value = 3UserForm.Countries.options.Add e

End Sub</SCRIPT>

Generazione di codice HTMLVBScript permette di generare una nuova pagina HTML dinamicamente usando il metodo Write dell’oggettodocument.

<FORM NAME=”UserData”><INPUT TYPE=”text” NAME=”Rows” VALUE=”10”><INPUT TYPE=”text” NAME=”Columns” VALUE=”10”><BR><INPUT TYPE=”Button” NAME=”Generate” VALUE=”Generate Table”>


Sub Generate_onclick()Dim rows, cols‘ Dobbiamo memorizzare questi valori in variabili prima che‘ il form venga distrutto quando viene creato un nuovo documento.rows = UserData.Rows.valuecols = UserData.Columns.valueDocument.openDocument.write “<H1>Tabella della moltiplicazione</H1>”Document.write “<TABLE BORDER=’1’>”For r=1 to rows

Document.write “<TR>”For c=1 to cols

Document.write “<TD>” & (r*c) & “</TD>”NextDocument.write “</TR>”

nextDocument.write “</TABLE>”

End Sub</SCRIPT>

Questo codice crea da programma una pagina HTML contenente una tavola pitagorica le cui dimensionisono specificate dall’utente in due controlli textbox. Non appena osate il metodo open dell’oggettoDocument, il form UserData non esiste più, quindi dovete conservare i valori di quei controlli TextBox nellevariabili locali rows e cols prima di creare la nuova pagina.

Introduzione a Dynamic HTMLDynamic HTML non è uno standard definito dalla W3C (World Wide Web Consortium), ma un “marketing

term” usato da Netscape e Microsoft per descrivere le nuove tecnologie supportate dai loro browser (dallaversione 4.x di Internet Explorer e Netscape Navigator). In particolare, le applicazioni DHTML scritte inVisual Basic richiedono Explorer 4.01 Service Pack 1 o versioni successive e non possono essere eseguireall’interno di un altro browser.Dynamic HTML rappresenta una combinazione di HTML 4.0, Style Sheets e JavaScript. La W3C lodefinisce nel seguente modo:

"Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and

scripts that allows documents to be animated."

Caratteristiche principali (confronto con HTML)DHTML non è radicalmente diverso dal normale HTML. Tutti i vecchi tag sono ancora supportati e gli script

all’interno della pagina possono sfruttare un modello di oggetti espanso compatibile con la versione precedente, quindi continueranno a funzionare come prima. In un certo senso, e correndo il rischio di




26

semplificare troppo, possiamo dire che la vera differenza tra HTML e DHTML è il modo in cui la paginaviene interpretata dai browser quando viene scaricata dal server remoto.Fra le nuove funzioni di DHTML, le seguenti meritano particolare attenzione:• Il ridisegno dinamico della pagina permette di cambiare lo stile, il colore o qualsiasi altro attributo di

qualunque elemento della pagina, inclusa la sua visibilità, e la pagina verrà automaticamente ridisegnatasenza che l’utente debba scaricarla di nuovo dal server Web. Questo implica un tempo di rispostainferiore, un carico di lavoro inferiore per il server soprattutto un vero comportamento dinamico.

• Il modello di oggetti di DHTML offre l’accesso a tutti gli elementi della pagina, compresi tag, immaginie paragrafi, fino alla singola parola e persino al singolo carattere. Potete quindi manipolare l’aspettodella pagina fin nei più piccoli dettagli.

• Gli stili e i fogli di stile sono stati ampliati con ulteriori attributi e quindi offrono maggiore controllosugli elementi della pagina.

• Potete attivare la posizione assoluta degli elementi; in altre parole, se necessario potete preparare illayout della pagina con la massima precisione. Inoltre ogni elemento presenta un attributo z-index (similealla proprietà ZOrder di Visual Basic) che può essere usato per simulare l’aspetto 3D. Poiché lecoordinate degli elementi possono essere modificate dinamicamente, è facile creare effetti di animazioneutilizzando semplici script.

• Il nuovo modello di eventi aggiunge flessibilità nel modo in cui le azioni dell’utente possono essereelaborate dagli script sulla pagina. Tra le nuove caratteristiche sono incluse il bubbling degli eventi, che permette agli script di elaborare gli script quando è più conveniente.

• I filtri visuali offrono molti modi accattivanti per rendere qualsiasi elemento della pagina e premettono dicreare testo 3D e ombreggiato. I filtri di transizione permettono di visualizzare una parte dela paginautilizzando effetti di dissolvenza. Internet Explorer 4.0 offre 13 filtri di transizione di default, ma inteoria potete usare anche filtri di altri produttori.

• DHTML include molti altri perfezionamenti rispetto al normale HTML fra cui un migliore controllodella creazione di tabelle e supporto per formati grafici aggiuntivi (come PNG o Portable Network Graphics, il successore del formato GIF).

Vediamo nei dettagli le più importanti nuove funzioni.

TagAbbiamo già visto come usare i tag <DIV> e </DIV> per raggruppare più elementi e creare una parte della pagina a cui può essere assegnato uno stile comune. Potete usare per esempio questi tag per creare areerettangolari con colori di testo e sfondo diversi dagli altri elementi.

<DIV STYLE=”WIDTH=300; HEIGHT=100; COLOR=white; BACKGROUND=red;”>Un’area rossa con testo bianco<BR>Un’altra riga dello stesso blocco

</DIV>

Quando lavorate con DHTML, potreste avere bisogno di elaborare elementi più piccoli del titolo o del paragrafo. Potete fare riferimento a questi elementi usando la coppia di tag <SPAN> e </SPAN> chesuddivide un elemento in porzioni più piccole affinché ognuna possa assumere attributi diversi.

<DIV STYLE=”WIDTH=300; HEIGHT=150; COLOR=white; BACKGROUND=red;”>Un’area rossa con testo bianco<BR><SPAN STYLE=”COLOR=yellow”>Alcune parole in giallo,</SPAN><SPAN STYLE=”COLOR=blue”>alter parole in blu</SPAN>

</DIV>

Una differenza importante tra il tag <DIV> e il tag <SPAN> è che il primo aggiunge sempre un ritorno acapo dopo il tag </DIV> di chiusura e questo significa che non potete continuare a inserire testo sulla stessariga. Al contrario il tag </SPAN> non inserisce un ritorno a capo quindi, per esempio, il codice sopra generadue righe di testo e non tre. L’importanza dei tag <DIV> e <SPAN> apparirà più chiara quando vedrete

come si usano gli script per creare pagine dinamiche.




27

I tag <BUTTON> e </BUTTON> permettono di aggiungere controlli Button più versatili sul form. Mentre iltag standard <INPUT TYPE=”Button”> supporta solo una captino di testo, questi nuovi tag vi permettono diincorporare qualsiasi elemento nel testo, inclusa un’immagine.

<BUTTON ID=”Button1” STYLE=”height=80; width=180”>Click Here

<IMG SRC=”www.prova.it/myLogo.gif”></BUTTON>

DHTML include una sorta di controllo Frame che può tracciare un bordo intorno ad altri controlli. Per crearlo si usa il tag <FIELDSET> e si specifica la captino con il tag <LEGEND>. Questo controllo Frame ineffetti è più potente del suo corrispondente Visual Basic, perché potete incorporare praticamente qualsiasicosa fra la coppia di tag <LEGEND> e </LEGEND>.

<FIELDSET><LEGEND>Select a product<IMG SCR=”myLogo.gif”></LEGEND><INPUT TYPE=”radio” NAME=”Product” CHECKED>Tape<INPUT TYPE=”radio” NAME=”Product”>Music CD

<INPUT TYPE=”radio” NAME=”Product”>Videotape</FIELDSET>

DHTML aggiunge inoltre vari nuovi attributi che potete usare con determinati tag. L’attributo TABINDEX per esempio permette di specificare l’ordine di tabulazione dei controlli sulla pagina, analogamente allacorrispondente proprietà di Visual Basic. L’attributo ACCESSKEY funziona con alcuni tipi di elementi della pagina e fornisce un hot key per la più facile selezione attraverso la combinazione ALT + tasto. Ladifferenza è che DHTML non evidenzia il tasto selezionato in alcun modo e dovete quindi farlo voimanualmente. Il fatto che il tasto selezionato non viene evidenziato potrebbe sembrare un difetto di DHTMLma in realtà in questo modo avete la massima flessibilità quando create l’interfaccia utente.

‘ Un pulsante “fate click qui” che si attiva con i tasti ALT + Q

<BUTTON ID=”Button1” ACCESSKEY=”Q”>Fate click <B>Q</B>ui</BUTTON> Infine l’attributo DISABLE permette di disabilitare (e riabilitare ) i controlli e altri elementi. Occorre soloricordare che esso funziona in modo opposto alla proprietà Enabled di Visual Basic.

<INPUT TYPE=”radio” ID=”OptMusicCD” NAME=”product” DISABLED>Music CD<SCRIPT LANGUAGE=”VBScript”>

Sub Button1_onclick()‘ Riabilita l’option buttonOptMusicCD.disabled = False

End Sub</SCRIPT>

ProprietàDHTML aggiunge nuove proprietà al tag <STYLE>. Queste proprietà sono utili in se ma soprattuttoaggiungono una nuova dimensione allo scripting perché permettono a una routine script di spostare,nascondere e cambiare lo z-order relativo degli elementi sulla pagina, rendendola realmente dinamica.La proprietà position vi permette di posizionare accuratamente un elemento sulla pagina; per default è static e ciò significa che l’elemento viene posizionato secondo le normali regole di HTML.Ma se impostate le proprietà position ad absolute potete specificare le coordinate di un oggetto rispettoall’angolo superiore sinistro della finestra usando le proprietà left e top. Ecco un esempio che mostra testo bianco all’interno di un rettangolo con sfondo rosso. Il rettangolo è largo 300 pixel e alto 150.

<DIV STYLE=”POSITION=absolute; TOP=50; LEFT=100; WIDTH=300; HEIGHT=150;COLOR=white; BACKGROUND=red;”>

Un’area rossa con testo bianco</DIV>




28

Se l’oggetto è contenuto in un altro oggetto, per esempio un’altra sezione <DIV>, le coordinate sinistra edestra sono misurate rispetto all’angolo superiore sinistro del contenitore. Il codice che segue, per esempio,crea un rettangolo rosso e un rettangolo blue interno a esso.

<DIV STYLE=”POSITION=absolute; TOP=100; LEFT=100; WIDTH=300; HEIGHT=150;COLOR=white; BACKGROUND=red;”>

rettangolo esterno<DIV STYLE=”POSITION=absolute; TOP=20; LEFT=40; WIDTH=220; HEIGHT=110;

COLOR=white; BACKGROUND=blue;”>Rettangolo interno

</DIV></DIV>

Se position è impostata a relative, le proprietà left e I fanno riferimento all’angolo superiore sinistrodell’elemento della pagina che precede immediatamente quella corrente. Si usa tipicamente il modo relative per spostare una parte di testo o un’immagine a una determinata distanza dall’ultima parte di testo sulla pagina.

Una stringa di testo seguita da un rettangolo verde

<DIV STYLE=”POSITION=relative; TOP=10; LEFT=0; WIDTH=300; HEIGHT=10;BACKGROUND=green;”>

</DIV>

Quando avete oggetti sovrapposti sulla pagina, potete determinare la loro visibilità usando la proprietà z-

order ; un valore più alto assegnato a questa proprietà colloca un oggetto sopra quelli con valori più bassi.

<DIV STYLE=”POSITION=absolute; TOP=100; LEFT=100; WIDTH=300; HEIGHT=150;COLOR=white; BACKGROUND=red; Z-INDEX=2”>

Questo rettangolo si sovrappone al successivo</DIV><DIV STYLE=”POSITION=absolute; TOP=120; LEFT=120; WIDTH=300; HEIGHT=150;

COLOR=white; BACKGROUND=green; Z-INDEX=1”></DIV>

Non potete usare la proprietà z-order per cambiare lo z-order relativo di un oggetto e del suo contenitore perché il contenitore apparirà sempre dietro l’oggetto contenuto. Se omettete la proprietà z-order, gli oggettisi sovrappongono secondo l’ordine con cui appaiono nel codice sorgente HTML (ogni oggetto cioè coprel’oggetto definito prima nel codice).La proprietà visibility specifica se l’oggetto è visibile e può assumente i valori hidden o visibile; è molto utilequando è controllata da script. Un’altra nuova proprietà interessante è . Un’altra nuova proprietà interessanteè display; quando la impostate a none l’elemento diventa invisibile e il browser usa lo spazio che questoelemento occupa per ridisporre gli altri elementi sulla pagina (a meni che essi non usino il posizionamentoassoluto). Potete rendere l’elemento nuovamente visibile impostando di nuovo la proprietà display a unastringa vuota.

Proprietà di scriptingLa dinamicità di DHTML significa che potete modificare uno o più attributi della pagina in fase diesecuzione e ottenere che il browser rappresenti i nuovi contenuti della pagina senza bisogno di ricaricarladal server. Per ottenere ciò dovete creare procedure script che sfruttino il potenziane di DHTML.Potete controllare da programma qualsiasi attributo di qualsiasi elemento della pagina, ammesso che si possibile fare riferimento all’elemento nel codice. Nelle normali pagine HTML potete fare riferimento solo a pochi elementi, per esempio i controlli di un form; in DHTML potete invece fare riferimento a qualsiasielemento che presenta un attributo ID. Il codice che segue contiene una parte <DIV> della pagina associata

con l’ID rectangle e un pulsante che, quando si fa clic su esso, esegue una routine VBScript che modifica ilcolore di sfondo della sezione <DIV>.




29

<DIV ID=”rectangle” STYLE=”POSITION=absolute; LEFT=100; TOP=50; WIDTH=200;HEIGHT=100; BACKGROUND=red”>

Fate clic sul pulsante per cambiare colore di sfondo</DIV><FORM>

<INPUT TYPE=”Button” NAME=”ChangeColor” VALUE=”Change Color”>

</FORM><SCRIPT LANGUAGE=”VBScript”>‘ Cambia il colore del rettangolo in modo casualeSub ChangeColor_onclick()

Rectangle.style.background = “#” & RndColor() & RndColor() & RndColor()End Sub

‘ Restituisce un valore esadecimale casuale di 2 cifreFunction RndColor()

RndColor = right(“0” & Hex(Rnd * 256), 2)End Function

</SCRIPT>

Per leggere o modificare la proprietà background dovete passare attraverso l’oggetto style intermedio equesto ha senso perché background è una proprietà dell’attributo STYLE. Analogamente potete controllarealtre proprietà dell’oggetto style.• Le proprietà fontFamily, fontStyle e fontSize determinano lo stile dei caratteri (notate che i nomi delle

proprietà sono simili ai nomi degli attributi di stile ma non includono il trattino).• Le proprietà left , top, width e height impostano e restituiscono una stringa contenente la posizione e le

dimensioni dell’oggetto (10px significa 10 pixel); sono disponibili inoltre le proprietà posLeft , posTop, posWidth e posHeight che non accodano la stringa px al valore numerico e quindi sono più utili nellanormale programmazione.

• La proprietà padding è la distanza in pixel fra il contenuto di un elemento e il suo bordo; potete ancheusare le proprietà paddingLeft , paddingTop, paddingRight e paddingBottom per specificare la distanzadai singoli bordi e sui quattro lati.

• La proprietà textAlign influenza l’allineamento orizzontale del testo in un elemento e può essereimpostata a left , center o right .

• La proprietà visibility determina se l’elemento viene visualizzato e può essere hidden o visibile. La proprietà zIndex imposta e restituisce un numero che determina se l’oggetto viene visualizzato davanti odietro altri elementi; i valori positivi spostano l’elemento davanti agli altri oggetti della pagina e quellinegativi dietro. L’elemento <BODY> presenta zIndex uguale a 0.

• La proprietà cssText imposta e restituisce l’argomento dell’attributo STYLE come stringa.Per perfezionare la posizione e le dimensioni di un elemento, potete eliminare i caratteri px aggiunti comesuffisso al valore restituito dalle proprietà left , top, width e height . Usare la proprietà posxxxx generalmente è preferibile perché esse restituiscono valori numerici. L’esempio che segue mostra come potete spostare unelemento verso destra.

rectangle.style.posLeft = rectangle.style.posLeft + 10

Se una proprietà non è definite nell’attributo STYLE, essa restituisce Null. Le proprietà posxxxx sonoun’eccezione a questa regola perché restituiscono sempre valori.

NOTA: potete usare le proprietà style.color e style.backgroundColor per impostare il colore del testo e dellosfondo di qualsiasi elemento della pagina, tranne l’oggetto Document per il quale dovreste usare le proprietà

fgColor e bgColor .

Proprietà e metodi per il testoPoiché un documento DHTML è un’entità attiva, spesso vorrete modificarne il contenuto in fase di

esecuzione. La maggior parte degli oggetti visibili della pagina supportano quattro proprietà e due metodiche facilitano questo lavoro.




30

Le quattro proprietà sono: innerText , outerText , innerHTML e outerHTML. InnerText restituisce il testo della parte del documento contenuta nell’elemento (tutti i tag HTML vengono automaticamente eliminati).OuterText restituisce lo stesso valore di innerText ma ottenete un risultato diverso quando assegnate ad essauna stringa. La proprietà innerHTML restituisce il codice HTML compreso fra i tag di apertura e chiusura.La proprietà outerHTML restituisce il codice HTML dell’elemento, inclusi i tag di apertura e chiusura.Per sperimentare queste proprietà, definiamo un elemento contenete alcuni tag HTML:

<H1 ID=”Heading1”>Level <I>One</I> Heading</H1>

che è resa nel browser come Level One Heading. Vediamo ora cosa restituiscono le proprietà precedentiquando sono applicate a questo elemento:

Msgbox Heading1.innerText ‘Level One HeadingMsgbox Heading1.outerText ‘Level One HeadingMsgbox Heading1.innerHTML ‘Level <I>One</U> HeadingMsgbox Heading1.outerHTML ‘<H1 ID=”Heading1”>Level <I>One</I> Heading</H1>

Assegnando un valore a innerText si sostituisce il testo fra i tag di apertura e di chiusura; il nuovo valore non

viene analizzato, quindi non dovrebbe includere tag HTML. Osservare l’istruzione che segue.

Heading1.innerText = “A New heading”

Essa sostituisce tutto il testo fra i tag <H1> e </H1> e il nuovo titolo appare nel browser come A New

heading. Anche se la proprietà outerText restituisce sempre la stessa stringa della proprietà innerText , essa sicomporta in modo diverso quando viene assegnato a essa un nuovo valore, perché la sostituzione ha effettoanche sui tag circostanti.

Heading1.outerText = “A New heading”

Essa distrugge i tag <H1> e </H1> e trasforma il titolo in testo normale (a meno che il titolo non siacontenuto in un’altra coppia di tag). Ciò che è peggio ora l’oggetto non presenta più un attributo IDassociato, quindi non potete più acceder a esso da programma. Per questa ragione la proprietà outerText presenta utilizzi pratici limitati e nella maggior parte dei casi la userete solo per eliminare i tag cheracchiudono un elemento.

‘Una routine VBScript riutilizzabileSub DeleteOuterTags(anyElement)

anyElement.outerText = anyElement.innerTextEnd Sub

Se desiderate sostituire la porzione di una pagina racchiusa fra una coppia di tag e un testo HTML, dovresteusare la proprietà innerHTML dell’elemento, come segue.

Heading1.innerHTML = “A <U>New</U> Heading”

In questo caso la stringa passata alla proprietà viene analizzata e tutti i tag HTML influenzano il risultato. Per esempio dopo l’assegnazione precedente il risultato visualizzato nel browser è A New Heading.L’ultima proprietà di questo gruppo, outerHTML, funziona come innerHTML ma la sostituzione ha effettoanche sui tag circostanti. Questo significa che potete modificare il tipo e l’ID dell’elemento a cui fateriferimento e potete cambiare il livello di un titolo e la formattazione del suo contenuto in una solaoperazione.

Heading1.outerHTML = “<H2 ID=’Heading1’>Level <U>Two</U> Heading</H2>”

Oppure potete centrare il titolo usando il codice che segue.

Heading1.outerHTML = “<CENTER>” & Heading1.outerHTML & “</CENTER>”




31

Grazie alle capacità di manipolazione delle stringhe di VBScript, potete creare una routine riutilizzabile chevi permetta di cambiare il livello di qualsiasi titolo della pagina senza alterare il suo ID o il suo contenuto.

Sub ChangeHeadingLevel(element, newLevel)html = element.outerHTML

pos1 = instr(UCase(html), “<H”)level = mid(html, pos1 + 2, 1)pos2 = instrRev(UCase(html), “</H” & level, -1, 1)‘ Dovete digitare le due righe successive come singola istruzione.html = left(html, pos1+1) & newLevel & mid(html, pos1+3, pos2–pos1) & newLevel

& mid(html, pos2+4)element.outerHTML = html

End Sub

Se modificare l’ID di un elemento, la procedura di evento che avete scritto per esso non funzionerà più. Per questa ragione dovreste mantenere sempre lo stesso ID oppure dovreste aggiungere dinamicamente il codice per gestire gli eventi del nuovo elemento. Tenete presente inoltre che non tutti gli elementi visibili

supportano tutte queste quattro proprietà e l’eccezione più significativa è data dalle celle di una tabella (cheespongono solo le proprietà innerText e innerHTML).Mentre le quattro proprietà che ho descritto finora vi permettono di sostituire una parte del documento, moltielementi supportano anche due metodi che vi permettono di aggiungere nuovo contenuto al documento. Ilmetodo insertAdjacentText inserisce una parte di normale testo appena prima o dopo il tag di apertura ochiusura dell’elemento. Il metodo insertAdjacentHTML fa lo stesso ma il suo argomento viene analizzato etutto l’HTML viene correttamente riconosciuto e influenza il risultato. Ecco alcuni esempi.

‘ Accoda testo normale alla fine del titoloHeading1.insertAdjacentText “BeforeEnd” , “ (added dynamically)”‘ Idem, ma accoda il testo in corsivoHeading1.insertAdjacentHTML “BeforeEnd” , “ <I>(added dynamically)</I>”‘ Aggiungi nuovo testo prima della prima parola del titoloHeading1.insertAdjacentText “AfterBegin” , “this is a ”‘ Aggiungi un titolo di livello 2 appena dopo questo titoloHeading1.insertAdjacentHTML “AfterEnd” , “<H2>New Level 2 Heading</H2>”‘ Inserisci testo in corsivo appena prima di questo titoloHeading1.insertAdjacentHTML “BeforeBegin” , “<I>Introducing…</I>”

EventiOgni elemento della pagina a cui avete associato un attributo ID può attivare un evento. La maggior partedegli eventi DHTML sono simili agli eventi Visual Basic, anche se presentano nomi diversi. Tutti gli eventiDHTML iniziano con le lettere on, per esempio onclick , onkeypress e onchange. Ad esempio, quandol’utente fa clic sul collegamento ipertestuale che segue

Fate clic su <A ID=”Details” HREF=”www.prova.it”>qui</A> per i dettagli Potete intercettare l’azione dell’utente con il seguente codice VBScript.

Sub Details_onclick()msgbox “About to be transferred to another site”

End Sub

Per certi aspetti la gestione degli eventi DTHML differisci in modo significativo rispetto a quella di VisualBasic. In primo luogo, le procedure di evento non ricevono argomenti. Ancora più importante, un eventoviene ricevuto dall’oggetto che l’ha attivato (che può essere paragonato alla più interna di una serie di scatolecinesi) e poi, in sequenza, da tutti gli elementi della pagina che contengono l’oggetto che ha attivato l’evento(le altre scatole cinesi sempre più esterne). Questa funzione è detta bubbling degli eventi.Tutti gli argomenti che hanno senso all’interno di un evento possono essere caricati (e a volte assegnati)come proprietà dell’oggetto event. Per esempio quando viene ricevuto un evento onkeypress, potete




32

determinare quale tasto è stato premuto osservando la proprietà event.keycode e potete inoltre “eliminare” iltasto impostando questa proprietà a zero. Osservate per esempio come potete convertire in maiuscole tutto iltesto immesso in un controllo TextBox.

<INPUT TYPE=”text” NAME=”txtCity” VALUE=””>

<SCRIPT LANGUAGE=”VBScritp”>Sub txtCity_onkeypress()

window.event.keycode = ASC(UCase(CHR(window.event.keycode)))End Sub

</SCRIPT>

All’interno di qualsiasi procedura di evento potete recuperare un riferimento all’oggetto a cui l’evento èassociato usando la parola chiave Me, come nel codice che segue.

Sub txtCity_onkeypress()‘ Azzera la TextBox se l’utente ha digitato uno spazioif window.event.keycode = 32 then

Me.value = “”window.event.keyocode = 0 ‘ Annulla la pressione del tastoEnd If

End Sub

Bubbling degli eventiIl bubbling degli eventi DHTML permette di elaborare un evento in molti punti della pagina mentre non potete farlo in Visual Basic. Un evento DHTML è prima ricevuto dall’oggetto su cui l’utente è intervenuto,quindi è attivato per il suo contenitore e in seguito per il contenitore del contenitore, fino a quando la notificaraggiunge il tag più in alto della gerarchia. Se per esempio l’utente fa clic su un collegamento ipertestuale inuna tabella, l’evento onclick viene prima attivato per l’oggetto hyperlink e quindi per la tabella, per l’oggettoBody e infine per l’oggetto Document.

Nell’esempio che segue viene usato il bubbling degli eventi per scrivere una procedura di evento che gestiscei dati premuti in tre controlli TextBox distinti che sono stati raggruppati insieme sotto la tag <DIV>.L’esempio dimostra inoltre che l’evento è generato per l’oggetto Body (ammesso che lo etichettiate con unattributo ID) e poi per l’oggetto Document.

<BODY ID=”Body”><DIV ID=”Textboxes”><INPUT TYPE=”text” NAME=”txtName” VALUE=””><INPUT TYPE=”text” NAME=”txtCity” VALUE=””><INPUT TYPE=”text” NAME=”txtCountry” VALUE=””></DIV>

<SCRIPT LANGUAGE=”VBScript”>

Sub Textboxes_onkeypress()‘ Converti in maiuscolewidow.event.keycode = ASC(UCase(CHR(window.event.keycode)))

End Sub

Sub Body_onkeypress()‘ Anche l’elemento Body ottiene l’evento

End Sub

Sub Document_onkeypress()‘ Anche l’elemento Document ottiene l’evento

End Sub</SCRIPT>

</BODY>




33

Impostando la proprietà event.cancelBubble a true, potete annullare il bubbling in qualsiasi procedura dievento. Se per esempio impostate questa proprietà true nella procedura Body_onkeypress, l’oggettoDocument non riceverà l’evento.In qualsiasi procedura di evento nella catena degli eventi potete recuperare un riferimento all’elemento cheha avviato l’evento, interrogando la proprietà event.srcElement . Questo vi permette di creare procedure dievento generalizzate e contemporaneamente tenere conto di casi speciali, come nell’esempio che segue.

Sub Textboxes_onkeypress()‘ Converti tutte le TextBox in maiuscole eccetto txtNameif window.event.scrElement.name <> “txtName” then

window.event.keycode = ASC(UCase(CHR(window.event.keycode)))End If

End Sub

Non confondete la proprietà srcElement con la parola chiave Me, che restituisce invece un riferimentoall’oggetto a cui la procedura di evento è associata. I due oggetti coincidono solo all’interno della prima procedura di evento attivata dal meccanismo di bubbling degli eventi.

Annullamento dell’effetto di defaultMolte azioni dell’utente su un elemento della pagina generano risultati di default. Per esempio un clic delmouse su un collegamento ipertestuale porta a un’altra pagina e un tasto premuto quando il focus si trova suun controllo TextBox causa l’aggiunta del carattere al contenuto corrente del controllo. Potete annullarequesta azione di default assegnando False alla proprietà event.returnValue, come nell’esempio che segue.

Click <A ID=”link1” HREF=”http://www.prova.it”>qui</A>

<SCRIPT LANGUAGE=”VBScript”>Sub link1_onclick()

‘ Impedisce l’attivazione dell’hyperlinkwindow.event.returnValue = False

End Sub</SCRIPT>

Un altro modo per annullare l’azione di default di un evento è trasformare in una Function la procedura dievento e assegnare False al valore di ritorno, come segue.

Function link1_onclick()link1_onclick = False

End Function

Eventi del timer In HTML non è disponibile un controllo Timer, ma è semplice creare routine che vengono eseguite in

intervalli regolari. Potete scegliere fra due tipi di routine timer, una che si attiva ripetutamente e una che siattiva solo una volta (questa in effetti è una funzione HTML standard, quindi non avete bisogno di DHTML per usare il codice proposto in questa sezione). Per attivare una routine timer si usa il metodo setTimeout (per i timer di attivazione singola) o setInterval (per i timer di attivazione ripetuta) dell’oggetto window. Questometodi presentano sintassi simili.

window.setTimeout “routineName”, milliseconds, languagewindow.setInterval “routineName”, milliseconds, language

Normalmente si chiamano questi metodi dall’interno della routine window_onload o dall’esterno di qualsiasiroutine (in entrambi i casi i metodi vengono eseguiti non appena la pagina viene scaricata). Il codice chesegue sposta un pulsante verso destra di 20 pixel due volte al secondo.

<INPUT TYPE=”Button” NAME=”Button1” VALUE=”Button Caption”STYLE=”POSITION=absolute”>




34

<SCRIPT LANGUAGE=”VBScript”>‘ Questa riga viene eseguita quando la pagina viene caricatawindow.setInterval “TimerEvent”, 500, “VBScritp”

‘ La routine che segue viene eseguita ogni 500 millisecondiSub TimerEvent()

Button1.style.posLeft = Button1.style.posLeft + 5End Sub</SCRIPT>

Potete annullare l’evento di un metodo setTimeout e setInterval usando rispettivamente il metodoclearTimeout o clearInterval .

Riepilogo degli eventiPossiamo suddividere gli eventi DHTML in alcune categorie secondo le loro funzioni.Gli eventi della tastiera includono onkeypress, onkeydown e onkeyup, simili agli eventi di Visual Basic congli stessi nomi. La proprietà keycode dell’oggetto event contiene il codice del tasto premuto e potete leggerelo stato dei stati di controllo attraverso le proprietà AltKey, CtrlKey, ShiftKey dell’oggetto event.

DHTML supporta gli stessi eventi di mouse di Visual Basic, fra cui onclick , ondbclick , onmousedown,onmouseup e onmousemove. L’evento onclick si attiva anche quando l’utente preme invio mentre un pulsante presenta il focus. All’interno di un evento di mouse potete interrogare la proprietà event.button per determinare quale pulsante è stato premuto (il valore bit-code che otterrete è simile all’argomento ricevutodagli eventi del mouse di Visual Basic).Molti venti DHTML non hanno corrispondenti in Visual Basic: onmouseover si attiva quando il cursore delmouse è posizionato su un elemento e onmouseout si attiva quando il mouse abbandona un elemento.All’interno di queste procedure di evento potete usare le proprietà fromElement e toElement dell’oggettoevent per vedere quale elemento è stato attivato o abbandonato.Gli eventi onfocus e onblur sono simili agli eventi GotFocus e LostFocus di Visual Basic ma essi si attivanoanche quando il focus passa a un’altra finestra o applicazione. L’evento onchange è simile al corrispondenteevento di Visual Basic ma si attiva solo quando il focus lascia il controllo.

L’evento onselectstart si attiva quando l’utente fa clic sulla pagina e inizia a selezionare una parte di testo oaltri elementi; quando il mouse si muove e l’area selezionata cambia di conseguenza, viene attivato unevento onselect . L’evento ondragstart si attiva quando inizia un’operazione di drag-and-drop: intercettandoquesto evento potete annullare la sua azione di default, che consiste nel copiare il testo selezionato in un’altra posizione.Alcuni eventi sono globali e si riferiscono all’intera pagina. L’evento onreadystatechange si attiva quandocambia lo stato della pagina (per esempio quando lo scaricamento è completato e la pagina sta per diventareinterattiva). L’evento onresize si attiva quando la pagina viene dimensionata. Gli eventi onunload eonbeforeunload sono simili a Unload e QueryUnload di Visual Basic e si attivano quando la pagina sta per essere scaricata perché l’utente sta passando a un’altra pagina o sta chiudendo il browser. L’evento onscroll si attiva quando l’utente scorre il documento (o un elemento della pagina). L’evento onhelp si attiva quandol’utente preme il tasto F1. L’evento onerror si attiva quando si verifica un errore di script o quando loscaricamento di un elemento della pagina fallisce (per esempio lo scaricamento di un’immagine).Alcuni eventi non possono essere intercettati da un’applicazione DHTML Visual Basic: onabort (l’utente faclick sul pulsante stop sulla barra degli strumenti del browser) onreset (l’utente fa click sul pulsante diripristino) e onsubmit (l’utente fa click sul pulsante di invio).




35

Window

Document

History

Event

Frames

Location

Screen

Navigator

mimeTypes

plugins

Window

body

Location

selection

all

anchors

applets

embeds

images

links

plugins

scripts

styleSheets

forms

elements

TextRange

button

chechbox

hidden

password

radio

reset

select

submit

text

textarea

options

Oggetti

Collection

Figura n.6: il modello di oggetti DHTML

Il modello di oggetti DHTMLPer scrivere applicazione in DHTML efficaci dovete imparare a conoscere il metodo di oggetti esposto dal browser che sopita la pagina DHTML. La figura numero 6 mostra la completa gerarchia di oggetti Window. Nel successivi paragrafi verranno illustrato gli oggetti più interessanti e utili di questa gerarchia.

L’oggetto WindowL’oggetto Window è la radice della gerarchia DHTML e rappresenta la finestra all’interno della quale vienevisualizzata la pagina HTML (rappresentata dall’oggetto Document).

ProprietàSe un oggetto Window contiene frame, potete accedere a essi usando la collection Frames, che contiene altri

oggetti Window. Molte atre proprietà restituiscono un riferimento a oggetti Window. Se l’oggetto Window sitrova all’interno di un frame, potete ottenere un riferimento al suo oggetto Window contenitore attraverso la proprietà parent . La proprietà top restituisce un riferimento all’oggetto Window di massimo livello. Ingenerale non potete prevedere a quale Window fanno riferimento le ultime due proprietà perché l’utente




36

potrebbe aver scaricato la pagina in un frame creato da un’altra pagina HTML esterna all’applicazione. La proprietà open restituisce un riferimento all’oggetto Window che ha aperto quello corrente.Potete interrogare lo stato aperto o chiuso di un oggetto Window usando la proprietà closed . La proprietà

status imposta e restituisce il testo visualizzato nella pagina di stato del browser e defaultStatus è la stringa didefault visualizzata sulla barra di stato.

MetodiL’oggetto Window espone vari metodi. Il metodo open carica un nuovo documento nella finestra e il metodo

showModalDialog carica una pagina DHTML in una finestra modale.

‘ Passa a un’altra pagina.window.open “http://www.prova.it”

Potete chiudere la finestra usando il metodo close. Altri metodi come alert , confirm e prompt visualizzanomessaggi message box e input box ma generalmente otterrete risultati migliori usando i comandi MsgBox e

InputBox di Visual Basic.Il metodo focus è simile al metodi SetFocus di Visual Basic. Il metodo blur sposta il focus di input allafinestra successiva, come se l’utente avesse premuto il tasto tab. Il metodo scroll accetta una coppia dicoordinate x – y e scorre la finestra per assicurarsi che il punto specificato sia visibile dal browser.

‘ Scorre la finestra fino in cimawindow.scroll 0, 0

Il metodo execScript aggiunge molta flessibilità al programma perché permette di produrre un frammento dicodice script e di eseguirlo dinamicamente. L’esempio che segue usa questo metodo per implementare unrapido calcolatore con poche righe di codice.

Inserisci la tua espressione:<INPUT TYPE=”text” NAME=”espressione” VALUE=””><BR>e poi fai clic su valuta:

<INPUT TYPE=”button” NAME=”valuta” VALUE=”Valuta”><INPUT TYPE=”text” NAME=”Risultato” VALUE=””>

<SCRIPT LANGUAGE=”VBScript”>Sub valuta_onclick()

If espressione.value = “” thenMsgbox “Inserisci un’espressione”Exit Sub

End if

on error resume nextwindow.execScript “Risultato.value = “ & espressione.value, “VBScript”if Err then

MsgBox “Errore: inserisci un’epressione valida”End if

End Sub</SCRIPT>

Non dimenticate di passare la stringa “VBScript” come secondo argomento alla funzione execScript poiché illinguaggio di default è javascript.Questo potente metodo può aggiungere anche procedure script alla pagina. L’esempio che segue dimostraquesta capacità creando una tabella di valori attraverso l’espressione che l’utente immette in un controllotextBox (qualcosa che sarebbe difficile fare in Visual Basic).

Enter an expression: FN(X) =

<INPUT TYPE=”text” NAME=”expression” VALUE=”x * x”><P>Click here to generate a table of values:<INPUT TYPE=”button” NAME=”createTable” VALUE=”Create Table”>




37

<SCRIPT LANGUAGE=”VBScritp”>Sub createTable_onclick()

‘ Crea la funzione FUNC();‘ (immetti le due righe seguenti come singola istruzione VBScript)window.execScript “Function FUNC(x): FUNC = “ & expression.value &

“: End Function”, “VBScript”

‘Crea il codice HTML per la tabellacode = “<H1>Table of values for FN(x) = “ & expression.value & “</H1>”code = code & “<TABLE>”code = code & “<TR><TH> x </TH><TH> FN(x) </TH></TR>”for n=1 to 100

code = code & “<TR><TD> “ & n & “ </TD>”code = code & “<TD> ” & FUNC(n) & “ </TD></TR>”

nextcode = code & “</TABLE>”

‘ Scrivi il codice in una nuova pagina HTMLwindow.document.clearwindow.document.open

window.document.write codewindow.document.closeEnd Sub

</SCRIPT>

Gli altri metodi dell’oggetto Window sono: setInterval , setTimeout , clearInterval e clearTimeout , giàdescritti nella sezione “Eventi del Timer”.

L’oggetto HistoryL’oggetto History rappresenta tutti gli URL che l’utente ha visitato nella sessione corrente. Questo oggettodispone di una proprietà e tre metodi.La proprietà length restituisce il numero di URL memorizzati nell’oggetto. I metodi back e forward caricano

la pagina dell’URL precedente e successivo nell’elenco cronologico e quindi corrispondono a un clic sui pulsanti Back (indietro) e Forward (avanti) sulla barra degli strumenti del browser. Essi sono utili per aggiungere pulsanti alla pagina che eseguono la stessa funzione, come segue.

Sub cmdPrevious_onclick()Window.history.back

End Sub

L’unico altro metodo di questo oggetto è go, il quale carica l’URL che si trova all’ennesima posizionenell’elenco cronologico.

‘ Visualizza la terza pagina dell’elenco cronologicowindow.history.go 3

L’oggetto Navigator L’oggetto Navigator rappresenta il programma browser e offre informazioni sulle sue capacità. Le proprietàappCodeName, appName e appVersion restituiscono il nome del codice, il nome del prodotto e la versionedel browser. La proprietà cookieEnabled restituisce True se il browser supporta i cookie; userAgent è il nomedel browser inviato come stringa al server nella richiesta HTTP. Potete usare il seguente codice VBScript per visualizzare alcune informazioni relative al browser.

‘ Crea dinamicamente una pagina HTML con le informazioni richiesteset doc = window.documentset nav = window.navigatordoc.opendoc.write “<B>appCodeName</B> = “ & nav.appCodeName & “<BR>”doc.write “<B>appName</B> = “ & nav.appName & “<BR>”doc.write “<B>appVersion</B> = “ & nav.appVersion & “<BR>”doc.write “<B>cookieEnabled</B> = “ & nav.cookieEnabled & “<BR>”




38

doc.write “<B>userAgent</B> = “ & nav.userAgent & “<BR>”doc.close

Altre proprietà restituiscono informazioni sul browser: fra esse vi sono cpuType, userLanguage, systemLanguage e platform. L’unico metodo degno di una nota è javaEnabled , che restituisce true se il browser supporta il linguaggio Java.

L’oggetto Navigator espone due collection: mimeTypes include tutti i tipi di file e documenti supportati dal browser e plugins contiene tutti gli oggetti della pagina.

L’oggetto LocationL’oggetto Location rappresenta l’URL della pagina attualmente visualizzata nel browser. La sua proprietà più importante è href , che restituisce la stringa URL completa. Tutte le altre proprietà contengono una partedella stringa URL: hash (la parte che segue il simbolo #), hostname (il nome dell’host), host (la partehostname:port dell’URL), port (il numero della porta), protocol (la parte dell’URL contenente il nome del protocollo) e search (la parte che segue il simbolo punto interrogativo nell’URL).L’oggetto espone inoltre tre metodi: assign (carica un’altra pagina) e replace (carica una pagina e sostituiscela voce corrente nell’elenco cronologico).

L’oggetto ScreenL’oggetto Screen espone proprietà relative allo schermo e non supporta alcun metodo. Le proprietà width eheight sono le dimensioni dello schermo in pixel e possono essere utili quando dovete decidere dove posizionare una nuova finestra. La proprietà colorDepth è il numero dei colori base supportati ed ètipicamente usata quando il server contiene molte immagini simili e desiderate scaricare quella checorrisponde meglio al numero di colori supportato dalla scheda video dell’utente. BufferDepth è una proprietà scrivibile che corrisponde alla profondità del colore del buffer off-screen che il browser usa per visualizzare le immagini. Questa proprietà permetta di visualizzare un’immagine con una profondità dicolore diversa dall’originale. Alla proprietà updateInterval si può assegnare l’intervallo di ritracciamentodella pagina per il browser ( è particolarmente utile per ridurre lo sfarfallio durante le animazioni).Internet Explorer supporta inoltre le proprietà availWidth e availHeight , che restituiscono le dimensioni dello

schermo non occupate dalle barre delle applicazioni (per esempio quella di Microsoft Windows e quella diMicrosoft Office) e la proprietà booleana fontSmoothingEnabled che specifica se il browser debba usare fontmeno irregolari se necessario.

L’oggetto EventMolte delle funzioni di questo oggetto sono state illustrate nei precedenti paragrafi. Questo oggetto vieneusato nelle procedure di evento VBScript per leggere e a volte modificare gli argomenti dell’evento, per specificare se l’azione di default deve essere annullata e per annullare il bubbling degli eventi. L’oggettoEvent espone solo proprietà e nessun metodo.Quattro coppie di proprietà restituiscono le coordinate del cursore del mouse. La proprietà screenX e screenY forniscono la posizione relativa all’angolo superiore sinistro dello schermo; clientX e clientY restituiscono la posizione relativa all’angolo superiore sinistro dell’area client del browser; x e y sono la posizione relativa alcontenitore dell’oggetto che ha attivato l’evento; offsetX e offsetY restituiscono la posizione relativaall’oggetto che ha attivato l’evento. Una nota proprietà, button, restituisce lo stato del pulsante del mousecome valori bit-field (1 = pulsante sinistro, 2 = pulsante destro, 4 = pulsante centrale).Quattro proprietà riguardano lo stato della tastiera. La proprietà keycode è il codice ASCII del tasto che èstato premuto (potete assegnarle un valore per modificarne l’effetto del tasto premuto) mentre altKey,ctrlKey e shiftKey restituiscono lo stato del tasto di controllo corrispondente.Tre proprietà restituiscono un riferimento a un elemento della pagina. L’oggetto restituito da scrElement èl’elemento che in origine ha attivato l’evento e può essere diverso dall’oggetto a cui punta Me, se stateintercettando l’evento nella procedura di evento di un oggetto che si trova più in alto nella gerarchia. Le proprietà fromElement e toElement restituiscono rispettivamente l’elemento che sta per essere abbandonato el’elemento che sta per essere attivato durante gli eventi onmouseout e onmouseover .

Potete impostare la proprietà cancelBubble a False per annullare il bubbling degli eventi e potete impostarela proprietà returnValue a False per annullare l’azione di default associata all’evento. La proprietà type restituisce il nome dell’evento senza i caratteri on iniziali (per esempio click , focus e così via).




39

L’oggetto DocumentL’oggetto Documento rappresenta il contenuto della pagina attualmente visualizzata nel browser e probabilmente è il più ricco oggetto DHTML in termini di proprietà, metodi eventi e funzionalità.

ProprietàVarie proprietà restituiscono informazioni sullo stato del documento e della pagina caricata in esso. La proprietà title contiene il titolo del documento (la stringa definita dal tag <TITLE>); URL contiene l’URLdella pagina (per esempio http://www.prova.it); domain restituisce il dominio di sicurezza del documento elastModified restituisce la data e l’ora dell’ultima modifica eseguita nel documento. La proprietà referrer èl’URL della pagina che ha fatto riferimento a quella corrente.Alcune proprietà impostano o restituiscono valori di colore. Per esempio fgcolor e bgcolor forniscono icolori del testo dello sfondo della pagina e modificandole si ha un effetto immediato sulla pagina (a parte learee in cui sono state definite informazioni di colore specifiche). Tre proprietà controllano il colore deicollegamenti ipertestuali: linkColor restituisce il colore degli hyperlink che non sono stati visitati;vLinkColor indica il colore degli hyperlink visitati e aLinkColor restituisce il colore degli hyperlink attivi(cioè quelli che si trovano sotto il cursore quando viene premuto il pulsante del mouse).

Numerose proprietà restituiscono riferimenti ad altri oggetti della pagina. La proprietà body fornisce unriferimento all’oggetto Body; parentWindow restituisce un riferimento all’oggetto Window a cui questodocumento appartiene; location è un riferimento all’oggetto Location esposto dal Window padre eactiveElement è un riferimento all’elemento della pagina che detiene il focus (quando avete appena scaricatola pagina, questa proprietà restituisce un riferimento all’elemento Body).La proprietà readyState restituisce una stringa che descrive lo stato di scaricamento corrente del documento.Questa è un’utile informazione perché vi permette di evitare gli errori che si verificherebbero facendoriferimento a un oggetto, per esempio un’immagine, mentre la pagina è in fase di scaricamento.

If document.readyState = “complete” then‘ Riempi il controllo textbox solo se la pagina è stata‘ completamente scaricata.

MyTextBox.value = “Good morning dear user!”End If

Questa proprietà è così importante che l’oggetto Document attiva uno speciale evento, onReadyStateChange,quando il suo valore cambia. Grazie a questo evento non dovete continuamente testare questa proprietà per determinare quando è sicuro agire sugli elementi della pagina.

MetodiAbbiamo già visto vari metodi dell’oggetto Document: clear , open, write e close usati per crearedinamicamente nuove pagine HTML. Il metodo writeln è una variante del metodo write che aggiunge uncarattere di nuova riga e supporta più argomenti.

Document.writeln “First Line<BR>”, “Second line” Ricordate che il carattere di nuova riga aggiunto generalmente non ha effetto se l’output è HTML puro, ameno che non stiate inserendo testo fra una coppia di tag <PRE> e </PRE> oppure <TEXTAREA> e</TEXTAREA>.Il metodo elementFromPoint restituisce l’elemento che corrisponde a una determinata coppia di coordinate(è simile quindi al metodo HitTest esposto da alcuni controlli Visual Basic). Potete usare questo metodoall’interno di una procedura di evento del mouse per visualizzare una descrizione dell’oggetto che si trovasotto il cursore del mouse.

Sub Document_onmousemove()On error Resume next ‘Non tutti gli elementi presentano

‘ una proprietà Name.

‘ Riempi una textbox con la descrizione dell’elemento‘ che si trova sotto il cursore del mouse.




40

Set element = document.elementFormPoint(window.event.x, window.event.y)Select case element.Name

Case “txtUserName”TxtDescription.value = “Enter your username here”

Case “txtMail”TxtDescription.value = “Enter your e-mail address here”

End SelectEnd Sub

È stato descritto in una parte precedente di questo capitolo come usare il metodo createElement dell’oggettoDocument per creare nuovi oggetti Optino e riempire dinamicamente un controllo Select in fase diesecuzione. Potete inoltre usare questo metodo per creare nuovi tag <IMG> e <AREA> (il secondo tag creamappe di immagini, che non verranno descritte in questo testo).

Collection figlieL’oggetto Document espone varie collection figlie che permettono di eseguire iterazioni su tutti gli elementidella pagina. Queste collection non sono disgiunte, quindi un elemento può appartenere a più collection. Per esempio, la collection all riunisce tutti i tag e gli elementi nel corpo del documento. Ma l’oggetto Document

espone anche le collection anchors, images e links i cui nomi indicano il proprio contenuto. La collection scripts contiene tutti i tag <SCRIPT>, la collection forms contiene i form esistenti,, mentre styleSheets riunisce tutti gli stili definiti per il documento. Alcune collection riguardano oggetti che non sono statedescritte in questo capitolo: fra queste compaiono frames, embeds e plugins.Usare queste collection è simile all’uso delle collection di Visual Basic. Potete fare riferimento a unelemento della collection usando il suo indice (le collection sono a base 0) o chiave (in molti casi la chiavecorrisponde al nome dell’elemento). La differenza più importante è che le collection DHTML supportano la proprietà length anziché Count . Potete eseguire iterazioni su tutti gli elementi di una collection usando ilciclo For Each… Next e potete determinare il tipo di un elemento osservando la sua proprietà tagName.

‘ Stampa i tag di tutti gli elementi della pagina.For Each x In document.all

text = text & x.tagName & “, “Nexttext = Left(text, Len(text) – 2) ‘ Elimina l’ultima virgolaMsgBox text

Se desiderate recuperare solo gli elementi con un determinato tag, potete filtrare la collection usando il suometodo tags, il quale accetta il nome del tag che intendete filtrare.

‘ Visualizza i nomi di tutti gli elementi <INPUT>For Each x In document.all.tags(“INPUT”)

text = text & x.Name & “, “NextMsgBox Left(text, Len(text) – 2) ‘ Elimina l’ultima virgola.

Il metodo tags restituisce una collection, quindi potete memorizzare il suo valore di ritorno in una variabile per usarlo in seguito. Oppure potete interrogare la sua proprietà length.

Set imgCollection = document.all.tags(“IMG”)MsgBox “Found “ & imgCollection.length & “ images.”

La collection forms è speciale in quanto espone la collection figlia elements, che contiene a sua volta tutti icontrolli del form. Una pagina può contenere più form anche se tutti gli esempi di questo testo usano un soloform.

‘ Elenca i nomi di tutti i controlli sul primo form della pagina.

For Each x In document.forms(0).elementstext = text & x.name & “, “

NextMsgBox Left(text, Len(text) – 2)




41

‘ Sposta il focus di input sul controllo denominato “txtUserName”‘ del form denominato “UserData”document.forms(“UserData”).elements(“txtUserName”).focus

L’oggetto Selection

L’oggetto Selection rapprsenta la parte del documento attualmente evidenziata dall’utente. La sua unica proprietà è type, che restituisce una stringa indicante quale tipo di elemento è selezionato (le scelte sono none e text ). L’oggetto Selection supporta tre metodi. Il metodo empty annulla la selezione e riporta la sua proprietà type a none; il metodo clear elimina il contenuto della selezione; se la selezione include testo,controlli o un’intera tabella questi vengono fisicamente rimossi dal documento e la pagina viene aggiornata(il metodo empty non elimina le tabelle che sono selezionate parzialmente).

‘ Elimina la parte selezionata del documento‘ quando l’utente preme il tasto “C”.Sub Document_onkeypress()

If window.event.keycode = Asc(“C”) thenDocument.selection.clear

End IfEnd Sub

L’ultimo metodo dell’oggetto Selection è createRange. Esso restituisce un riferimento all’oggettoTextRange, il quale descrive il testo attualmente selezionato. Spiegherò cosa fare con tale oggetto TextRangenella sezione che segue.

L’oggetto TextRangeL’oggetto TextRange rappresenta una porzione del documento che può essere l’area attualmente selezionatadall’utente o un’area definita da programma. Questo oggetto permette di accedere al contenuto di una partedella pagina – come codice sorgente HTML o come testo visibile all’utente – ed espone vari metodi che viconsentono di definire le dimensioni e la posizione dell’intervallo.

Potete creare una proprietà TextRange dell’oggetto Selection, come abbiamo visto sopra, o potete usare imetodi createTextRange dell’oggetto Body o di un elemento Button, TextArea o TextBox.

Set bodyTxtRange = document.body.createTextRangeSet inputTxtRange = document.all(“txtUserName”).createTextRange

ProprietàL’oggetto TextRange espone solo due proprietà, text e htmlText . La prima può impostare o restituire ilcontenuto testuale della parte di documento definita dall’oggetto ma non permette di specificare laformattazione. La seconda è di sola lettura e restituisce la parte di documento in formato HTML. Il seguentecodice VBScript visualizza il contenuto HTML del testo selezionato quando l’utente preme il tasto C econverte il testo in maiuscole quando l’utente preme il tasto U .

Sub Document_onkeypress()If window.event.keycode = Asc(“C”) then

MsgBox document.selection.createRange.htmlTextElseIf window.event.keycode = Asc(“U”) then

document.selection.createRange.text =Ucase(document.selection.createRange.text)

End IfEnd Sub

La proprietà htmlText restituisce sempre codice HTML sintatticamente corretto. Se per esempio l’oggettoTextRange comprende solo il tag <B> di apertura di una parte di testo in grassetto, il valore restituito daquesta proprietà include anche il tag di chiusura </B>, quindi potete riutilizzarlo tranquillamente nello stessooppure in un altro documento. Il valore restituito da questa proprietà include inoltre i tag <SCRIPT>all’interno dell’area, se ve ne sono. La proprietà text restituisce sempre i caratteri in un oggetto TextRange,




42

ma un’assegnazione a essa funziona solo se l’area non si estende su porzioni del documento con attributidiversi.

MetodiL’oggetto TextRange espone 27 metodi, ma verranno spiegati solo quelli più utili. Il primo metodo chedovete conoscere è select , il quale fa apparire l’oggetto TextRange come se fosse stato selezionatodall’utente: è utile per ottenere un feedback visuale su ciò che state facendo sull’oggetto.I metodi moveStart , moveEnd e move cambiano la posizione del punto iniziale dell’area, del suo punto finaleo di entrambi. Potete spostare questi punti del numero specificato di caratteri, parole e intere frasi, come nelcodice che segue.

‘ Estendi la selezione di 10 caratteri a destra.Set selRange = document.selection.createRangeSelRange.moveEnd “character”, 10‘ Estendila di una parola a sinistra (spostamento verso‘ l’inizio del documento).SelRange.moveStart “word”, -2SelRange.select

‘ Estendila di una frase a destra (il valore “1” può essere omesso).SelRange.moveEnd “sentence”SelRange.select‘ Ripristina lo stato inizialeselRange.move “textedit”

Il metodo collapse riduce le dimensioni di un metodo textRange al suo punto iniziale (se l’argomento delmetodo è True) o finale (se è False).

SelRange.collapse True ‘ Riduce l’intervallo al suo punto iniziale

Il metodo moveToElementText è utile quando desiderate che l’oggetto TextRange si sposti su un particolare

elemento della pagina. Questo metodo funziona solo se TextRange include già l’elemento, quindi spessocreerete un oggetto TextRange dall’elemento Body e quindi lo ridurrete all’elemento desiderato, come nelcodice che segue.

‘ Crea un TextRange corrispondente all’elemento “MyControl”.Set range = document.body.createRangeRange.moveToElementText document.all(“MyControl”)

Potete usare il metodo moveToPoint per ottenere un TextRange che punta a una determinata coppia dicoordinate x-y, che tipicamente sono le coordinate del mouse.

‘ Carica la parola su cui l’utente ha fatto clic.Sub Document_onclick()

Set range = document.body.createTextRangerange.moveToPoint window.event.x, window.event.yrange.expand “word”MsgBox range.text

End Sub

Usate il metodo findText per fare in modo che l’oggetto TextRange si sposti su una determinata stringa ditesto della pagina. Nella sua forma più semplice questo metodo richiede un solo argomento, la stringaricercata, e restituisce True se la ricerca ha successo (nel qual caso l’intervallo è stato spostato sul testoricercato). Diversamente restituisce False.

Set range = document.body.createTextRange

If range.findText(“ABC”) then range.selectelse

MsgBox “Text not found”End If




43

Per quanto riguarda i metodi rimanenti dell’oggetto TextRange, vale la pena menzionare scrollIntoView (assicura che l’intervallo di testo sia visibile nella finestra del browser), parentElement (restituisce unriferimento all’elemento che contiene completamente l’intervallo di testo), pasteHTML (sostituisce ilcontenuto dell’intervallo di testo con codice HTML) e duplicate (crea un nuovo oggetto TextRange che punta allo stesso intervallo).

L’oggetto TableIn DHTML le tabelle sono definite esattamente come in HTML, cioè attraverso una coppia di tag <TABLE>e </TABLE> e una serie di tag <TR> e <TD>. La vera differenza è che in DHTML una tabella espone lacollection rows e cells, le quali vi permettono di accedere alle singole celle senza doverle assegnare a undeterminato attributo ID. Più precisamente, l’oggetto Table espone una collection rows e ogni oggetto row espone una collection cells. Il codice che segue estrae il contenuto della tabella come stringa delimitata databulazioni pronta per l’esportazione in un file di testo.

Set table = document.all(“table1”)For each thisRow in table.rows

For Each thisCell in thisRow.cellstext = text & thisCell.innerText & Chr(9)

Next‘ Sostituici l’ultimo carattere Tab con una copia CR-LFtext = Left(text, Len(text) – 1) & Chr(13) & Chr(10)

NextMsgBox text

Potete fare riferimento direttamente a una cella usando la seguente sintassi.

‘ Modifica la prima cella della terza riga‘ (gli indici di riga e colonna sono a base zero)table.rows(2).cells(0).innerText = “New value”

Poiché le singole celle non supportano la proprietà innerHTML, per modificare gli attributi di unadeterminata cella dovete creare un oggetto TextRange e usare il suo metodo pasteHTML.

Set thisCell = table.rows(2).cells(0)Set range = document.body.createTextRangerange.moveToElementText thisCellrange.pasteHTML = “<B>New value in BoldFace</B>”

Ancora più interessante è la capacità di aggiungere nuove righe e colonne grazie al metodo insertRow dell’oggetto Table e al metodo insertCell dell’oggetto Row.

‘ Aggiungi una riga nella quinta posizione della tabella.set newRow = table.insertRow(4)‘ Inserisci una cella nella prima colonna e impostane il contenuto.Set newCell = newRow.insertCell(0)NewCell.innerText = “New cell in column 1”‘ Aggiungi alter celle usando una sintassi più concise.newRow.insertCell(1).innerText = “New cell in column 2”newRow.insertCell(2).innerText = “New cell in column 3”

Potete inoltre eliminare celle o intere righe usando il metodo deleteCell dell’oggetto Row e il metododeleteRow dell’oggetto Table rispettivamente. Gli oggetti Table, Row e Cell presentano alcune proprietà incomune, quali align, vAlign e borderColor , che vi permettono di formattare i dati che esse contengono.

01-latoClient

Documents

Transcript of 01-latoClient