EH - Esposizione interattiva di xHTML etc. Indici: Pagine Panoramica Termini Problemi Esempi
Inserimento di Javascript in HTML
Programmazione per oggetti con JavaScript
Oggetti e funzioni di portata generale
JavaScript è un linguaggio reso disponibile nel 1995 dalla Netscape come strumento di facile impiego per arricchire con componenti interattive le pagine per il Web scritte in HTML. Esso è stato rapidamente accettato da un grande numero di sviluppatori per il Web e successivamente è stato reso disponibile anche per la programmazione dei servers di rete, cioè per i computers contenenti programmi e dati in grado di fornire informazioni e servizi a sistemi clients attraverso WWW e gli altri protocolli di comunicazione di Internet.
Noi considereremo JavaScript soprattutto come linguaggio per i browsers. Più in generale esso dovrebbe essere visto come elemento di uno scenario client-server che vede un browser nel ruolo di client mentre elabora un documento HTML ed un server che ha fornito questo documento e che è in grado di colloquiare con il browser, in particolare per fornire informazioni in risposta a richieste dell'utente.
utente --- doc.HTML ---browser --- Internet --- server --- programmi di servizio
JavaScript, come suggerisce il nome, è un linguaggio di scripting derivato da Java e basato sugli oggetti.
Come linguaggio di scripting esso mette a disposizione un repertorio di istruzioni che possono costituire un cosiddetto script da inserire in un documento HTML per consentire di modificare l'aspetto della sua presentazione, di inserire o eliminare determinati contenuti in dipendenza di esigenze dell'utente e del suo sistema, di fornire informazioni al server e di implementare varie interattività nella pagina.
JavaScript è un linguaggio orientato agli oggetti e presenta molte caratteristiche di Java. Questo è il linguaggio messo a disposizione in modo piuttosto aperto da Sun Microsystems nel 1995 e che nel giro di pochi anni ha avuto una rapida diffusione ed è diventato un poderoso strumento per lo sviluppo di applicazioni anche di ampia portata, in particolare per quelle basate su Internet. JavaScript presenta una sintassi vicina a quella di Java che in molti punti costituisce una sua semplificazione: in particolare non richiede tutte le dichiarazioni ed i controlli dei tipi delle proprie entità come fa invece Java, risultando di uso più agevole.
JavaScript è un linguaggio interpretato, non compilato; anche questo contribuisce a renderlo flessibile all'uso. Le sue istruzioni vengono inserite entro appositi elementi di un documento HTML delimitati dai tags coniugati <script> e </script> come vedremo nel paragrafo successivo per essere elaborate dallo stesso browser, senza l'intervento di un compilatore esterno e di files intermedi. Esso quindi si può considerare come una notevole estensione di HTML
Dal punto di vista del Web publisher, cioè di chi redige pagine per il Web, JavaScript amplia notevolmente le possibilità espressive ed organizzative di queste pagine consentendo di controllare il loro aspetto su base algoritmica e di dotarle di meccanismi di controllo. Ad es. consente di inserire un indicatore dell'ora corrente e di organizzare la compilazione controllata di una form, cioè di un modulo da riempire interattivamente, mediante meccanismi di validazione delle risposte dell'utente. Un tipico utilizzo client-server riguarda la compilazione di una form per la richiesta di informazioni complesse alla quale sa rispondere solo un programma residente sul server.
Si osservi che la possibilità di ottenere elaborazioni effettuate dal browser, come nel caso della validazione delle indicazioni fornite in una form, consente di alleggerire il traffico su Internet evitando che client e server si scambino messaggi di poco conto.
Tutte le prestazioni di JavaScript potrebbero essere ottenute con il linguaggio Java. Questo è ormai diventato uno strumento di portata generale utilizzabile mediante tutti gli attuali browsers. JavaScript ha una portata molto più limitata, ma è molto più semplice da apprendere e meno esigente sul piano della messa a punto delle procedure (richiede indicazioni meno dettagliate, ad es. nelle dichiarazioni, e non richiede apposite manovre per lo sviluppo delle procedure). Si può affermare che, nell'area delle prestazioni controllate da HTML, JavaScript è in grado di fare molto richiedendo all'autore un impegno inferiore di Java.
Vediamo ora come gli scripts di JavaScript, cioè i gruppi di istruzioni in grado di ottenere effetti rilevabili, si possono inserire entro i due tags coniugati <script> e </script>.
La collocazione primaria degli elementi JavaScript è all'interno dell'elemento head. Il tipico aspetto di un documento HTML contenente un semplice elemento JavaScript è il seguente.
<html>
<head>
<title>Titolo del documento</title>
<script language="JavaScript">
<!-- Istruzioni JavaScript in posizione tale da essere ignorate da un browser incapace di interpretarle
contenenti eventuali commenti dopo una doppia sbarra // -->
</script >
</head>
<body>
Corpo del documento
</body>
</html>
Il testo sorgente di uno script JavaScript si potrebbe prelevare da una qualsiasi locazione di Internet mediante un tag come il seguente:
<script language="JavaScript"
src="http://www.websupport.com/jslibrary/specificproc.js">
Si osservi che .js è l'estensione caratterizzante i files sorgente in JavaScript.
Le variabili in JavaScript, come in ogni linguaggio di programmazione procedurale, sono dei contenitori di informazioni di diversi tipi. Esse posseggono un identificatore o nome che puo` essere introdotto mediante una dichiarazione e nel corso dell'elaborazione della procedura assumono uno o più valori.
Un identificatore di variabile per JavaScript è una stringa costituita da caratteri alfanumerici e dal segno _ , il carattere iniziale non potendo essere numerico, la quale non può coincidere con alcuna delle parole riservate del linguaggio; questa stringa è case sensitive, cioe` sensibile alla differenza fra maiuscole e minuscole.
Le parole riservate del linguaggio servono ad esprimere dei comandi e sono le seguenti:
abstract boolean break byte case catch char class const continue default do double else ext ends false final finally float for function goto if implements import in instanceof int interface long native new null package private protected public return short static super switch synchronized this throw throws transient true try var void while with
La gamma dei valori che una variabile può assumere corrisponde al tipo di dati al quale essa appartiene. I tipi di JavaScript sono: numeri, stringhe, booleani, null ed oggetti.
Alle variabili dei tipi numeri, stringhe e booleani, i valori possono essere assegnati servendosi di loro scritture dette literals. Vi sono cinque tipi di literals: integers e floating points per il tipo numeri, stringhe ed escape characters per il tipo stringhe, booleani per il tipo omonimo.
Le variabili si introducono con frasi che sono una dichiarazione ed una assegnazione di valore iniziale. Esempi di introduzione di variabili del tipo numero sono:
var base = 10;
var numerottale = O27;
var numesadec = 0X3D;
var pigreca = 3.142128;
var velluce = 2.99792458E+8;
Le variabili del tipo stringa si introducono con frasi come le seguenti:
var nome="Pietro Armando Domenico";
var cognome = "Trapassi";
var soprannome ='Metastasio';
Gli escape characters del linguaggio sono
\' per l'apostrofo
\" per il doppio apice
\b per il carattere ASCII backspace
\f per il carattere ASCII form feed
\n per il carattere ASCII new line
\r per il carattere ASCII carriage return
\t per il carattere ASCII tab, richiesta di tabulazione
\\ per il semplice carattere \
Una volta definita una variabile, si possono assegnare ad essa nuovi valori o lavorare con il valore esistente, usando operatori ed espressioni.
Un'espressione è una sequenza di literals, numeri, variabili e operatori. In Javascript è possibile creare tre diversi tipi di espressioni.
Espressioni Aritmetiche : ogni espressione la cui valutazione fornisce un numero.
Espressioni Logiche : ogni espressione che porta ad un valore di verità, vero e falso.
Espressioni di Stringhe : espressione che può essere usata per giustapporre varie stringhe al fine di ottenerne una nuova.
Ci sono inoltre espressioni condizionali che valutano se un'espressione è vera o meno ed influiscono sulla scelta dell'azione seguente:
condizione ? espressione1 : espressione2
Anche gli operatori usati in JavaScript possono essere suddivisi in vari gruppi a seconda del tipo.
Operatori Aritmetici : agiscono su operandi (espressioni o variabili) numerici e danno un risultato numerico.
Operatori Bitwise : operano su numeri interpretandoli come sequenze di bits e danno un risultato numerico.
Operatori Logici : lavorano su variabili booleane e forniscono un risultato booleano (vero o falso).
Operatori di Confronto : confrontano i valori dei loro operandi e danno un risultato booleano.
Operatori di Stringhe : agiscono su operandi stringhe e danno come risultatouna stringa.
Operatori di Assegnazione : assegnano all'operando alla loro sinistra un nuovo valore dato dalla valutazione corrente della espressione sulla destra. La sola limitazione imposta a questo tipo di espressione è che l'operando a sinistra non può essere literal.
Combinando più operatori in un'espressione, l'ordine delle operazioni segue delle precise regole di precedenza (v. tabella).
La prima istruzione di controllo è chiamata enunciato IF.
La sintassi di base è la seguente:
IF (espressione logica) enunciato ;
Un'istruzione più complessa è data da:
IF(espressione logica) {enunciato1} ELSE {enunciato 2}
Se invece si vuole far eseguire un gruppo di istruzioni più volte, Javascript fornisce due tipi di strutture: cicli FOR e cicli WHILE. La prima viene usata quando si conosce a priori il numero di volte che si vuole far eseguire il ciclo; la seconda, invece, comporta l'esecuzione delle istruzioni finchè non si verifica una determinata condizione. La sintassi è la seguente:
FOR (contatore dei cicli) {enunciato}
WHILE (espressione logica) {enunciato}
Lavorando con cicli FOR o WHILE, può esserci l'esigenza di terminare il ciclo in un particolare momento. Per far ciò si ha a disposizione l'istruzione BREAK:
WHILE (vero) {
enunciato1;
IF (test) BREAK;
enunciato2;
}
Analogamente esiste un'istruzione, la CONTINUE, che opera in senso contrario, cioè che costituisce un punto di arrivo del controllo utilizzabile per il proseguimento delle iterazioni.
Come per altri linguaggi di programmazione, Javascript è dotato di functions, cioè piccoli blocchi di istruzioni opportunamente incapsulati che possono essere richiamati da più parti del programma. Ci sono due tipi di functions sopportate da Javascript: le predefinite e quelle definite dall'utente. Le predefinite sono in dotazione del JavaScript, mentre quelle definite dall'utente sono scritte da programmatori di JavaScript.
Per definire una function in un programma JavaScript si usano costrutti del tipo:
<script lasnguage="JavaScript">
function Nomefunzione (operandi) {
istruzioni
}
</script>
Per fermare l'esecuzione della function e tornare al programma chiamante si utilizza l'istruzione RETURN, con la sintassi : return expression dove attraverso expression risulta possibile mettere a disposizione della pagina HTML chiamante valori costruibili con meccanismi ampiamente arbitrari.
La programmazione per oggetti consiste nel combinare diversi porzioni di software,
così come un'auto viene costruita assemblando i vari elementi che la caratterizzano.
Gli oggetti definiscono gruppi di dati ed azioni che permettono di operare sui dati stessi.
Questi gruppi di dati sono conosciuti come proprietà dell'oggetto,
mentre le differenti
azioni che si possono effettuare su un dato sono dette metodi.
Si chiama
poi classe l'entità che riassume tutte le proprietà e i
metodi di una particolare serie di oggetti omogenei.
E' possibile estendere
JavaScript creando oggetti con proprietà e metodi propri.
JavaScript non è un vero e proprio object-oriented language, ma più precisamente si tratta di un object-based language; infatti esso offre una compatta serie di tipi di dati, funzioni e parole-chiave, ma manca di alcuni dei meccanismi più complessi ed efficienti che sono presenti in linguaggi orientati agli oggetti, come Java e C++.
Occorre sottolineare che la separazione tra oggetti che riguardano il Server JavaScript e quelli previsti dal Client JavaScript consente di ridurre al minimo le dimensioni di alcuni sistemi, in quanto è necessario inserire solo quelli inclusi dalla versione in uso.
Ci sono oggetti che sono comuni ad entrambe le versioni:
The String Object : sono ``contenitori'' di stringhe considerate come delle variabili e contenute in altre variabili????; sono create automaticamente da JavaScript quando sono necessarie.
The Math Object: prevede una serie di valori matematici costanti e una collezione di metodi che eseguono le più comuni operazioni matematiche.
The Date Object: introduce una collezione di metodi che permettono di manipolare informazioni concernenti date.
Oltre a tutto questo, JavaScript include una piccola serie di funzioni ridefinite che non sono direttamente associate ad alcun oggetto specifico:
La funzione eval( ), applicata ad una stringa che fornisce un'espressione ne calcola il valore; applicata ad un blocco di comandi JavaScript provoca la loro esecuzione.
La funzione parseFloat( ) esamina il contenuto di una stringa e, se trova una stringa opportuna, la converte in un valore floating point che fornisce come proprio risultato attuale.
La funzione eval( ), analogamente, esaminato il contenuto di una stringa, se trova che esprime correttamente un numero, lo converte in un valore intero e lo mette a disposizione come risultato.
La funzione isNaN( ) serve a controllare il valore fornito da una delle precedenti functions di conversione numerica; queste functions, quando la loro stringa argomento non può essere convertita in un valore numerico, forniscono uno zero se si opera con Windows ed un valore particolare detto NaN, not a number, se si opera con UNIX.
Gli oggetti per Navigator, costituenti il cosiddetto Navigator Object Tree, contengono metodi e proprietà per lavorare con finestre, frames, URLs, documenti e liste storiche. Lo sviluppo di tale albero è riassunto dal seguente grafico:
Presentiamo brevemente i metodi principali:
provvede alle informazioni sulla versione corrente del browser in uso;
fornisce metodi e proprietà in grado di occuparsi di finestre e frames;
gestisce un limitato accesso alle liste storiche in una data finestra o
frame;
fornisce metodi e proprietà per manipolare documenti ed elementi
di documenti;
gestisce metodi e proprietà che servono per lavorare con forms create interattivamente;
provvedono agli strumenti necessari per scripts incorporati in
ancore
fornisce metodi e proprietà per lavorare con le URLs;
gestisce i meccanismi per manipolare i collegamenti in JavaScript.
Per maggiori approfondimenti si consulti la tavola Oggetti per Navigator.
Gli eventi sono fondamentalmente segnali e messaggi specifici che il browser avverte quando si verificano determinate azioni predefinite o quando l'utente interagisce con la pagina Web corrente.
Gli eventi e i loro handlers sono la base di molte delle interazioni con una pagina Web che JavaScript rende possibili. Questi eventi si possono suddividere in 5 categorie:
document-based events, innescati dal caricamento di una pagina
nuova o dall'uscita da una pagina corrente;
form-based events, per
l'interazione tra utente e pagina Web attraverso i forms;
anchor-based
events, si avviano quando l'utente clicca su un hyperlink;
element-based events, comunicano lo stato delle immagini associate ad
una pagina Web;
window-based events, sono usati per indicare quale
finestra è attiva, nel caso di più finestre aperte, su Netscape
Navigator.
Per interagire con una di queste 5 categorie di eventi si usano gli handlers, cioè blocchi di codice JavaScript che stabiliscono come il programma JavaScript deve reagire in conseguenza dei vari eventi (v.tavola)
I forms HTML gestiscono un livello base di interazione con pagine Web. Tutte queste interazioni, prima della disponibilita` di Java Script hanno fatto affidamento solo sul server per analizzare e rispondere agli inputs dell'utente.
JavaScript rende possibile aggiungere ad HTML una certa dinamica, cioè di basare sulle forms una certa interattività dalla parte del client. Con JavaScript è possibile reagire all'input dell'utente, generare contenuti per i campi delle forms e rispondere ai clicks del mouse all'interno delle forms, grazie alle molte proprietà, ai metodi e agli handlers di eventi.
Per i molti dettagli rinviamo alla tavola riassuntiva Proprietà dei forms.
Inizialmente i browsers del Web erano limitati a mostrare un singolo
documento HTML in una singola finestra. Non era possibile per gli autori del
Web creare interfacce sofisticate riguardanti strumenti, menù e aree di
lavoro, sicchè alla richiesta di nuove informazioni da parte
dell'utente, era necessario "pulire" completamente la finestra e aprire il
nuovo documento.
Con Navigator2, Netscape ha introdotti elementi di nuovo tipo,
i frames, che consentono di dividere una finestra in più spazi rettangolari
ciascuno dei quali, rispetto alle interazioni con l'utente possiede un
comportamento autonomo.
JavaScript permette meccanismi più potenti per creare sofisticate intefacce di base e applicazioni per il Web. Ricordiamo i meccanismi tipici:
frame basics, abilitano una finestra ad essere suddivisa in più aree rettangolari ciascuna contenente un documento proprio;
frame object, oggetto che permette di controllare la situazione corrente dei frames definiti in un documento HTML;
Managing Cross-Frame Communication, gestisce il collegamento tra i vari frames, rendendo possibile l'utilizzo di funzioni e variabili definite in altri frames, oltre all'accesso a proprietà e a metodi di oggetti associati ai documenti degli altri frames.
Anche per questi dettagli invitiamo a consultare la tavola riassuntiva Proprietà dei fes.
Inserimento di Javascript in HTML
Programmazione per oggetti con JavaScript
Oggetti e funzioni di portata generale
Per ulteriori approfondimenti su JavaScript si puo` consultare il sito "http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html.