successivo precedente inizio fine indice generale parte

Capitolo 8.   Script attivi, DHTML, applet, servlet (cenni)

In questo paragrafo vengono presi brevemente in esame strumenti che permettono di aggiungere logica elaborativa alle pagine Web dal lato cliente come gli script attivi e le applet Java; in questo contesto viene anche dato un accenno al DHTML (Dynamic HTML) e alle servlet altra espressione delle potenzialità del linguaggio Java nell'ambito della realizzazione di applicazioni Web (in questo caso dal lato servente).

8.1   JavaScript e Java

Gli script attivi sono programmi o porzioni di codice eseguiti dal lato cliente e sono molto usati per rendere più dinamiche e interattive le pagine Web.

Esistono fondamentalmente due linguaggi per la scrittura di script attivi: JavaScript creato dalla Netscape (JScript nella versione della Microsoft) e VBScript (Visual Basic Scripting edition); quest'ultimo è un linguaggio di script sviluppato da Microsoft per essere simile a Visual Basic e si rivolge esclusivamente agli utenti che usano piattaforme Windows essendo supportato solo da Internet Explorer.

JavaScript invece è supportato da tutti i browser più importanti e quindi continuiamo ad occuparci solo di quest'ultimo.

Prima di proseguire è però opportuno chiarire le notevoli differenze tra i linguaggi Java e JavaScript malgrado la somiglianza dei nomi (in effetti il nome originale di JavaScript era LiveScript e fu cambiato per motivi commerciali):

• Java è un linguaggio compilato (anche se non nel senso «classico» del termine, mentre JavaScript è interpretato;

• le applicazioni Java possono essere anche indipendenti ed essere eseguite fuori da qualsiasi applicazione Web (si dice che Java può essere usato anche per applicazioni stand-alone, il codice JavaScript invece è sempre legato ad un documento HTML e non può essere eseguito separatamente (da questo punto di vista tra Java e JavaScript c'è la stessa differenza esistente tra Perl e PHP, se non si fa uso del pacchetto php5-cli);

• le applet Java sono confinate in una ben definita regione della pagina, il codice JavaScript invece può controllare un intero documento e rispondere alla pressione di pulsanti, click del mouse o altri eventi simili;

• le applet Java sono programmi separati dal codice HTML, vengono scaricati dalla rete ed eseguiti da un browser compatibile con Java; il codice JavaScript è invece generalmente incorporato all'interno del sorgente HTML ed è eseguito da un browser compatibile con JavaScript.

Ciò che accomuna le applet Java e i JavaScript è invece il fatto che, per motivi di sicurezza, non possono interagire con il file system del sistema su cui è in esecuzione il programma di navigazione e quindi non possono leggere o scrivere file.

Questa attenzione alla sicurezza differenzia fortemente le applet Java dalla tecnologia concorrente delle ActiveX (Active eXtension) di Microsoft.

ActiveX non è un linguaggio di programmazione ma un formato per dati ricavato da due tecnologie Microsoft esistenti: OLE (Object Linking and Embedding) che permette ai programmi di comunicare con altre applicazioni e COM (Component Object Model) che è un formato per la definizione di interazioni tra oggetti, poi evolutosi nella tecnologia DCOM (Distributed COM) per la definizione di iterazioni remote tra oggetti.

Gli ActiveX possono essere scritti in molti linguaggi ma sono molto difficili da includere nelle pagine Web senza usare altri strumenti Microsoft, inoltre sono supportati solo da Internet Explorer e, cosa più grave, possono interagire con la macchina cliente salvando o modificando file, lanciando l'esecuzione di altri programmi, aprendo documenti ed altro ancora.

Ovviamente tali strumenti, se non usati con i dovuti accorgimenti, possono rappresentare un pericolo riguardo ad esempio alla diffusione attraverso Internet di virus informatici o alla violazione della riservatezza dei dati contenuti nel computer di un utente.

Attualmente gli ActiveX si sono evoluti nei cosiddetti componenti WinForm, nell'ambito del nuovo ambiente di sviluppo .NET della Microsoft.

8.2   Script attivi

Come detto prendiamo in esame il linguaggio JavaScript per la scrittura di script attivi.

L'elemento da utilizzare nel sorgente HTML è <script> che può essere posizionato sia nella sezione head che nella sezione body e prevede la scrittura di istruzioni JavaScript prima del tag di chiusura </script>.

Può essere opportuno «mascherare» le istruzioni JavaScript come commenti HTML per evitare che vecchi programmi di navigazione, per errore, le mostrino insieme al contenuto della pagina; ecco un esempio:

<!-- Begin script

(istruzioni JavaScript)

// -->

Si noti che i commenti di JavaScript si inseriscono con i caratteri «//» oppure «/*» e «*/» nel caso di commenti multilinea.

Il tag <script> prevede come attributi language e type da valorizzare, nel caso si usi JavaScript, rispettivamente con "JavaScript" e "text/javascript".

Un altro attributo è src con il quale si può fare riferimento ad uno script esterno che viene caricato dal browser ed eseguito.

<script type="text/javascript" src="nome_file.js"></script>

Il file nome_file.js deve contenere solo codice JavaScript e non necessita delle righe di commento iniziale (quella con «Begin script») e finale.

Gli script esterni (da non confondere assolutamente con gli script CGI di cui abbiamo parlato in precedenza e che sono entità completamente separate ed eseguite dal lato servente) risiedono su file autonomi che hanno di solito estensione .js, contengono esclusivamente comandi JavaScript e possono essere utili in quanto permettono di modificare una volta sola il codice usato in molti documenti HTML diversi.

Si tenga però conto dell'aggravio di tempo necessario a ricevere dal servente anche il file contenente lo script oltre alla pagina Web che lo richiama e del fatto che alcuni serventi Web possono non essere configurati per un corretto invio degli script esterni.

Vediamo adesso un semplice esempio in cui si usa una funzione scritta in JavaScript per far immettere all'utente il proprio nome e poi presentarlo in una pagina di risposta.

      1 <html>
      2 <head><title>Esempio con JavaScript</title> 
      3 <script language="JavaScript" type="text/javascript"> 
      4    <!-- Begin script 
      5    function InsNome() { 
      6       nomeut = prompt("Inserire il proprio nome:",""); 
      7       if (nomeut == "" || nomeut == null) { 
      8          nomeut = "Utente sconosciuto";
      9       }
     10       return (nomeut); 
     11    } 
     12    // --> 
     13 </script>
     14 </head> 
     15 <body> 
     16 <div style="text-align: center;">
     17 <b>Esempio con JavaScript</b></div> 
     18 <p/><br/> 
     19 Il nome inserito &egrave;: 
     20 <script language="JavaScript" type="text/javascript">
     21    <!-- Begin script 
     22       document.write (InsNome()); 
     23    // --> 
     24 </script>    
     25 </body> 
     26 </html> 

Alcuni brevi commenti al listato:

• nella prima parte (righe da 3 a 13) viene definita una funzione chiamata InsNome() che non necessita di alcun parametro e serve a far inserire all'utente il proprio nome con la funzione prompt();

• il nome inserito viene poi controllato con l'istruzione if (riga 7) nella cui condizione vediamo l'uso di || che significa or (in questo anche JavaScript segue le convenzioni del linguaggio c, tanto è vero che la and si scrive &&);

• il nome è valorizzato automaticamente se vuoto (riga 8);

• l'ultima istruzione della funzione è return (riga 10) che serve a restituire il risultato della funzione stessa, in questo caso il nome inserito dall'utente;

• nella seconda parte (righe da 20 a 24) del documento c'è un altro blocco di codice JavaScript: in esso viene richiamata la funzione InsNome() all'interno dell'istruzione document.write (riga 22) con la quale il nome inserito viene scritto all'interno della pagina HTML.

La visualizzazione di questo documento avviene secondo la seguente logica:

• viene iniziata la visualizzazione della sezione corpo;

• viene eseguito il codice JavaScript all'interno del corpo e quindi l'istruzione di scrittura;

• all'interno di quest'ultima c'è però il richiamo alla funzione InsNome() e quindi, prima che la scrittura sia ultimata, appare una piccola maschera con la richiesta del nome per effetto dell'istruzione prompt (vedere figura 8.4);

• ad inserimento effettuato la maschera di input scompare e il nome viene visualizzato insieme al resto del contenuto del body (vedere figura 8.5).

8.2.1   Attributi di evento

Nell'HTML 4.x sono disponibili una serie di attributi di evento che si possono abbinare ad immagini, collegamenti e ad altri elementi; ad ogni evento si può poi associare del codice JavaScript da eseguire nel momento in cui l'evento in questione si verifica.

Vediamo quali sono gli attributi di evento iniziando da quelli maggiormente utili:

• onclick: si verifica quando si clicca con il mouse su un elemento;

• ondbclick: quando si fa doppio clic con il mouse su un elemento;

• onkeypress: quando un tasto viene premuto e rilasciato su un elemento;

• onkeydown: quando un tasto viene premuto su un elemento;

• onkeyup: quando un tasto viene rilasciato su un elemento;

• onmousedown: si verifica quando si clicca con il mouse su un elemento (senza rilasciare);

• onmouseup: si verifica quando si rilascia il pulsante del mouse su un elemento;

• onmouseover: quando il puntatore del mouse passa su un elemento provenendo da «fuori» di esso;

• onmouseout: quando il puntatore del mouse «lascia» un elemento.

I seguenti attributi si possono usare solo all'interno dei moduli:

• onsubmit: si verifica quando un modulo viene inviato (si usa solo nel tag <form>);

• onreset: quando il contenuto di un modulo viene ripristinato (si usa solo nel tag <form>);

• onselect: quando si seleziona del testo (si usa solo con i tag <input> e <textarea>);

• onchange: quando cambia il valore di un controllo (si usa solo con i tag <input>, <textarea> e <select>).

I seguenti attributi si possono usare con i moduli e con i collegamenti:

• onfocus: si verifica quando un elemento viene selezionato (si dice che «riceve il fuoco») con il mouse o la tastiera;

• onblur: quando un elemento perde il fuoco.

Infine i seguenti attributi si possono usare solo nei tag <body> e <frameset>:

• onload: si verifica quando il navigatore termina il caricamento del documento;

• onunload: quando il navigatore accede ad un altro documento.

Per usare correttamente gli attributi di evento si deve definire il linguaggio di script di default del documento: a questo scopo si usa il seguente elemento <meta>:

<meta http-equiv="Content-Script-Type" content="text/javascript"/>

Nel seguente esempio abbiamo l'uso di JavaScript per controllare l'input in due campi di un modulo:

<html>
<head><title>Esempio con JavaScript</title>
<meta http-equiv="Content-Script-Type"
content="text/javascript"/>
<script language="JavaScript" type="text/javascript">
   <!-- Begin script
   function Contr(campo) {
      if (campo.length > 0) {
         return (true);
      }
      else {
         alert("Campo " + campo.name + " obbligatorio!");
         return (false);
      }
   }
   // -->
</script>
</head>
<body>
<div style="text-align:center;">
<b>Input gestito con JavaScript</b></div>
<p/><br/>
<form action="/cgi-bin/uncgi/cgi-modulo.pl" method="get">
Cognome: <input name="cognome" type="text" 
onblur="Contr(cognome)"/><p/>
Nome: <input name="nome" type="text"
onblur="Contr(nome)"/><p/>
<input type="submit" value="invio"/>
</form>
</body>
</html>

Infine ecco un esempio in cui viene presentata una immagine cliccando sulla quale si apre un'altra pagina HTML:

<html> 
<head><title>Finestra da aprire in JavaScript</title> 
<meta http-equiv="Content-script-type"
content="text/javascript"/> 
</head> 
<body> 
<div style="text-align:center;">
<b>Finestra da aprire con JavaScript</b></div> 
<p/><br/> 
<a href="#" onclick='window.open("esejs3b.html")'> 
<img src="tux.jpg" width="80" height="80"/></a>
</body> 
</html> 

8.2.2   Limiti di JavaScript

L'uso di JavaScript offre senz'altro grandi possibilità (che gli esempi appena illustrati mostrano in misura molto modesta) ma non bisogna sottovalutare alcuni aspetti negativi:

• alcuni browser non supportano gli enunciati JavaScript e anche quelli che li supportano si comportano spesso in modo diverso di fronte ad una stessa istruzione;

• il linguaggio ha dei limiti dovuti alle importanti ragioni di sicurezza citate in precedenza;

• JavaScript viene spesso usato per creare effetti che alla lunga possono risultare noiosi e fastidiosi; alcuni utenti preferiscono addirittura disabilitare, intervenendo su opportune opzioni dei programmi di navigazione, l'esecuzione degli script.

Per questi motivi è lecito aspettarsi che un documento contenente istruzioni JavaScript possa venire visualizzato da programmi di navigazione non in grado di eseguirle correttamente; è quindi opportuno prevedere, subito dopo la fine di uno script, l'uso dei tag <noscript> e </noscript> all'interno dei quali inserire le parti di sorgente HTML alternative allo script stesso.

8.3   DHTML

Il DHTML non è uno specifico linguaggio e neanche una qualche evoluzione dell'HTML, è invece un insieme di tecniche utilizzabili in modo coordinato per costruire pagine Web dinamiche dal lato cliente.

Le tecnologie coinvolte nell'uso del DHTML sono:

• un linguaggio per script attivi;

• i fogli di stile;

• un modello ad oggetti del documento o DOM (Document Object Model) che permette di integrare le altre due tecnologie definendo un'interfaccia di programmazione indipendente da linguaggio e piattaforma per accedere a contenuto, stile e struttura di un documento DHTML; grazie al DOM è possibile gestire e controllare ogni singolo oggetto del documento con una opportuna sintassi derivata dalla programmazione ad oggetti.

Il consorzio W3C ha definito gli standard ufficiali per ognuna delle tre entità appena elencate che sono (ad agosto 2011) :

• ECMAScript, per il linguaggio di scripting; è nato da JavaScript 1.1 e la versione più recente è la Edition 5.1 (JavaScript 1.8);

• CSS Level 2.1, per i fogli di stile; il CSS Level 3 è in via di definizione ed è parzialmente supportato dai programmi di navigazione;

• DOM Level 3, per il modello di documento; è l'evoluzione, proposta nel 2004, del DOM Level 1 (1998) e del DOM Level 2 (2000).

Maggiori dettagli sui livelli DOM e, più in generale, sull'uso delle tecniche del DHTML, si possono reperire sui testi relativi all'argomento cui si fa riferimento nella bibliografia.

8.4   Applet Java

Le Applet Java sono state uno dei primi strumenti usati per rendere dinamiche le pagine Web ma ultimamente hanno perso molto d'importanza a vantaggio di altri prodotti come le animazioni e i filmati ottenuti con Macromedia Flash; qui accenniamo molto brevemente al loro utilizzo.

8.4.1   Caratteristiche del linguaggio Java

Java è un linguaggio di programmazione creato nel 1995 da Sun Microsystem (forse la più agguerrita concorrente di Microsoft) e deve il suo nome a una varietà di caffè tropicale.

Inizialmente ideato per essere incorporato nei microchip che governano gli elettrodomestici si è poi affermato come linguaggio di programmazione soprattutto nell'ambito del Web.

Uno dei principali motivi del successo di Java in tale contesto è la sua sicurezza intrinseca: si viene infatti a creare un firewall, cioè una barriera protettiva, tra l'applicazione di rete in ambiente Java e il computer dell'utente.

Quando si scaricano con un browser compatibile le applicazioni Java non ci sono rischi di comportamenti illeciti da parte di queste ultime o di infezioni virali in quanto i programmi Java vengono confinati in un apposito ambiente di esecuzione senza alcuna possibilità di accedere ad altre risorse dei computer.

Altro aspetto fondamentale è quello della portabilità: un programma scritto in Java può essere eseguito indifferentemente su ogni sistema operativo e su ogni piattaforma senza necessità di modifiche.

Ciò che consente a Java di essere così sicuro e portabile è il fatto che l'output della compilazione di un sorgente non è codice eseguibile ma bytecode cioè un codice intermedio costituito da un insieme ottimizzato di istruzioni che vengono eseguite da una «macchina virtuale» detta JVM (Java Virtual Machine).

Tale macchina virtuale viene emulata dall'ambiente di esecuzione di Java, attingendo alle risorse della macchina reale.

Il programma eseguibile non ha alcuna possibilità di uscire dai confini dell'ambiente emulato e questo va a tutto beneficio della sicurezza.

Inoltre è sufficiente realizzare sistemi run-time di Java diversi, per le varie piattaforme esistenti, affinché su tutte possano essere eseguite le applicazioni scritte in Java; in questo anche la portabilità è assicurata.

L'ambiente di esecuzione (o run-time) di Java non è altro che un interprete del bytecode; il fatto che i programmi Java vengano interpretati e non compilati e poi eseguiti, comporta senza dubbio problemi a livello di prestazioni. Tali problemi però vengono largamente compensati, almeno a livello di applicazioni per il Web, dai vantaggi riguardanti la sicurezza e la portabilità.

Altri motivi per cui Java è molto apprezzato dai programmatori sono:

• è semplice (almeno per chi già conosce i linguaggi c e c++);

• è orientato agli oggetti con un approccio molto rigoroso e usabile (il tema della programmazione ad oggetti è di una tale vastità e complessità che scoraggia qualsiasi tentativo di semplificazione e sintesi; gli interessati a tale argomento a anche a maggiori approfondimenti sul linguaggio Java possono consultare i numerosissimi testi dedicati a questi argomenti);

• è multithreaded perché consente di scrivere programmi suddivisi in thread indipendenti grazie ad una sofisticata soluzione, presente nell'ambiente di esecuzione, per la sincronizzazione multiprocesso;

• è solido e affidabile sia perché fortemente «tipizzato» (le variabili devono essere dichiarate prima di essere utilizzate e non sono possibili conversioni implicite di tipo), sia perché privo di puntatori (il cui uso da parte di programmatori non esperti è spesso fonte di errori), sia perché dotato di un meccanismo automatico per la garbage collection che analizza la memoria e libera quella inutilizzata (in altri linguaggi come il c++ questa operazione è invece a carico del programmatore ed è spesso fonte di errori);

• è distribuito in quanto è stato progettato appositamente per lo sviluppo di applicazioni distribuite; quindi un'applicazione Java può essere costituita da più moduli, residenti su diversi computer, in grado di operare congiuntamente attraverso una rete telematica.

8.4.2   Creazione ed esecuzione delle applet Java

Per creare una applet Java si devono compiere le seguenti operazioni:

• scrivere il sorgente Java salvandolo in un file con estensione .java e con nome uguale a quello della classe definita nel sorgente stesso (supponiamo sia EseJava);

• compilare il sorgente utilizzando un compilatore Java come JDK (Java Development Kit) disponibile gratuitamente presso <http://java.sun.com/j2se/>; il comando è:

  $ javac EseJava.java

  si ottiene un file con stesso nome ed estensione .class; nel nostro esempio EseJava.class;

• l'eseguibile ottenuto può essere eseguito anche indipendentemente da qualsiasi pagina Web, tramite l'interprete java con il comando:

  $ java EseJava.class

Per inserire l'applicazione Java all'interno di una pagina Web si usa l'elemento di testo <applet> con chiusura </applet>; qualsiasi testo inserito tra questi due marcatori viene visualizzato nel caso il browser non sia in grado di eseguire le applet Java.

Vediamo gli attribuiti di questo elemento (i primi tre sono obbligatori):

• code, per indicare il nome del file bytecode da eseguire;

• width e height, per indicare le dimensioni in pixel dell'area rettangolare nella quale eseguire l'applet;

• hspace, vspace, align, con lo stesso significato visto per il tag <img>;

• name, per assegnare un nome all'applet (può servire in caso più applet debbano comunicare tra loro);

• codebase, indica la directory che contiene tutti i file a cui la applet fa eventualmente riferimento per il suo funzionamento.

Un altro elemento che si può usare con le applet è <param> che serve ad indicare un parametro da passare all'applicazione Java; si possono passare più parametri usando più volte questo tag (l'ordine con cui avviene il passaggio non è influente).

Naturalmente si possono passare parametri solo ad una applet che sia stata scritta per accettarli e utilizzarli in qualche maniera; di solito le applet già pronte sono documentate ed è quindi possibile sapere se sono previsti parametri, con quali scopi e con quali nomi.

L'elemento <param> si inserisce tra <applet> e </applet> e prevede gli attributi name, per indicare il nome del parametro e value, per indicare il valore.

Quando un documento contenente l'applet viene richiesto, quest'ultima viene inviata dal servente insieme a tutti gli altri eventuali file multimediali; se il programma di navigazione è in grado di interpretare il linguaggio, grazie alle opportune estensioni (plugins), il programma viene eseguito.

Vediamo un esempio di pagina contenente una applet:

<html> 
<head><title>Esempio con applet Java</title> 
</head> 
<body> 
<div>
<b>Esempio con applet Java</b></div> 
<p/><br/> 
Qui sotto ci dovrebbe essere l'applet <p/> 
<applet code="EseJava2.class" width="500" height="500"> 
Java non va
</applet>
</body> 
</html> 

Concludiamo con una osservazione circa il fatto che con HTML 4.x è sconsigliato l'uso dell'elemento <applet> che dovrebbe essere sostituito da <object> di cui abbiamo parlato nel paragrafo 3.4.

L'esempio precedente dovrebbe quindi essere inserito nella pagina Web in questo modo:

<object codetype="application/octet-stream" classid="java:EseJava2.class"
           width="500" height="500"> 
Il Browser non supporta Java 
</object> 

Non tutti i browser, specie le vecchie versioni, accettano questa sintassi per l'inserimento delle applet; per il futuro è comunque da preferire l'uso dell'elemento <object> in quanto permette di inserire anche applicazioni scritte in linguaggi di programmazione diversi da Java.

Nella figura 8.11 viene mostrata la pagina dell'esempio precedente dove è eseguita una applet che disegna alcune figure geometriche.

8.5   Servlet Java e JSP

Le servlet Java, come suggerisce il nome, hanno delle analogie con le applet, sono scritte in Java, ma vengono eseguite sul servente anziché sul cliente.

Esse vengono quindi attivate dalle pagine Web esattamente come i programmi CGI, con i relativi vantaggi (indipendenza dalla piattaforma cliente, possibilità di accedere a basi di dati ecc.) ma si differenziano (in meglio) anche da questi ultimi.

Infatti in presenza di normali CGI il servente HTTP esegue un processo ex-novo ogni volta che riceve una nuova richiesta di attivazione di una certa applicazione; le servlet invece vengono eseguite e conservate in un determinato spazio di memoria in modo da potere essere richiamate in modo rapidissimo al sopraggiungere di successive richieste di esecuzione.

Per potere utilizzare le servlet Java occorre installare una estensione di Apache di nome JServ (reperibile presso <http://www.apache.org>); al termine dell'installazione non dovrebbero essere necessarie altre operazioni o configurazioni particolari, si ricordi solo che le applicazioni servlet eseguibili devono risiedere per default nella directory /home/http/servlets anziché in /home/http/cgi-bin.

Il principale difetto delle servlet java è che esse, come le applicazioni CGI, costruiscono la risposta al loro interno definendo delle stampe virtuali in codice HTML; è quindi evidente che ogni variazione nella risposta comporta la necessità di ricompilare la servlet.

Le JSP (Java Server Pages) sono un tentativo di risolvere questo inconveniente in quanto non sono altro che pagine HTML che incorporano codice Java, sempre eseguito dal lato servente.

In pratica possiamo affermare che una JSP sta ad una servlet come una pagina PHP sta ad un programma CGI.

Più in dettaglio le JSP rappresentano un esempio di tecnologia Java in grado di integrare in uno stesso file codice HTML, componenti riutilizzabili come i Javabeans, codice Java e script Java-like.

Una pagina JSP appare come una normale pagina HTML contenente anche tag JSP attraverso i quali si possono definire singole operazioni (ad esempio chiamate al codice esterno di un componente riusabile Javabeans) o blocchi di codice Java, chiamati scriptlet, che vengono compilati ed eseguiti quando si accede al documento.

Una pagina JSP viene eseguita da un motore JSP installato sul servente Web, che non fa altro che creare dinamicamente ed in modo trasparente la servlet corrispondente.

Questo permette di conservare i vantaggi delle servlet e di superare i problemi dovuti alla loro eccessiva rigidità riguardo alla creazione e alla modifica delle pagine di risposta.

Ovviamente i lati positivi di una soluzione sono sempre, almeno in parte, bilanciati da quelli negativi: le JSP impongono la presenza sul servente di un compilatore Java, non necessario per le servlet, e hanno una minore velocità di esecuzione.

✓HTML ✓CSS