Unità di apprendimento
Un linguaggio lato client: JavaScript
4
4
4.1 Le pagine dinamiche e i linguaggi di scripting
Innanzi tutto è necessario introdurre i concetti di pagina web dinamicae di linguaggio di scripting. Le pagine web dinamiche sono quelle pagine di Internet che permettono all’utente di effettuare delle scelte e al programmatore di gestirle, mentre i linguaggi di scripting sono linguaggi di programmazio-ne con sintassi semplice, che consentono di eseguire compiti mediante “pochi” comandi ad hoc; in
par-ticolare i linguaggi di script per il Web combinano lo scripting con il linguaggio HTML e i fogli di sti-le per ottenere pagine web interattive mediante un linguaggio che viene denominato anche DHTML
(Dynamic Hyper Text Markup Language).
JavaScript è un linguaggio di scripting la cui sintassi deriva direttamente dal famoso linguaggio C, e pre-cisamente dalla versione introdotta con Java, ovvero il C senza i puntatori. Sebbene non presenti la ver-satilità e duttilità del C vero e proprio, JavaScript rappresenta un linguaggio a tutti gli effetti e in que-sto si discosta notevolmente dalla tecnica di programmazione a marcatori dell’HTML. In sostanza HTML e JavaScript sono linguaggi completamente diversi ma con finalità simili. JavaScript viene inter-pretatopresso il computer cliente per vederlo in funzione è necessario avere a disposizione un brow-ser che lo supporti, quale per esempio Internet Explorer oppure Mozilla FireFox. I linguaggi di scrip-ting si suddividono in:
: batch (per es. Shell Unix, WSH); : macro (per es. VBA);
: Web:
• client side o debolmente dinamici (per es. JavaScript, VBScript, JScript); • server side o autenticamente dinamici (per es. PHP, ASP).
JavaScript è un linguaggio di scripting in cui le istruzioni del linguaggio vengono eseguite direttamen-te dall’indirettamen-terpredirettamen-te. L’indirettamen-terpredirettamen-te legge un’istruzione ed effettua l’operazione corrispondendirettamen-te, non ci so-no passaggi intermedi, come nella compilazione, e gli eventuali errori vengoso-no rilevati solo al momen-to dell’esecuzione (run-time). La procedura è sintetizzata nella figura che segue.
Il risultato di uno script dipende molto anche dall’interprete (browser). Può capitare infatti che lo stes-so script eseguito su due piattaforme diverse (per es. Internet Explorer rispetto a Firefox) dia risultati differenti, anche se va sottolineato quanto i browser moderni implementino molto dello standard e sia-no quasi sempre compatibili. La programmazione che tende a rendere compatibile lo stesso script su più browser prende il nome di programmazione cross-browser.
BROWSER
SERVER interprete JavaScript
interprete HTML
file contenente uno script visualizzazione
4.2 Gli script lato client e lato server
Innanzi tutto è bene chiarire che il ruolo principale degli script all’interno delle pagine web è quello di “colmare” le carenze del linguaggio HTML, fornendo al programmatore la possibilità di effettuare ci-cli a contatore, input da tastiera, operazioni matematiche sui dati che provengono dai moduli (form), memorizzaree informazioni in modo permanente, interagire con database ecc.
È molto importante comprendere che esistono due differenti categorie di script, come accennato peral-tro nel paragrafo precedente:
: script lato server : script lato client
Sul lato client uno script non è un programma che può accompagnare un documento HTML oppure essere incorporato direttamente in esso. Il programma viene eseguito sulla macchina client quando vie-ne caricato il documento, o in un altro momento, come vie-nel caso in cui vievie-ne attivato un collegamento. Il supporto di HTML per gli script è indipendente dal linguaggio di scripting.
Le caratteristiche di questi script sono brevemente riassunte di seguito.
: Gli script possono essere elaborati al caricamento del documento per modificarne
dinamicamen-te i condinamicamen-tenuti.
: Gli script possono accompagnare un modulo nel processare i dati appena vengono immessi. : Il programmatore può compilare dinamicamente parti di un modulo basate sulle scelte
dell’uten-te. Gli script possono inoltre assicurare che i dati immessi siano conformi a un intervallo di valori predeterminato, che i campi siano coerenti ecc.
: Gli script possono essere attivati da eventi che coinvolgono il documento, come il caricamento, lo
scaricamento, la focalizzazione di elementi, i movimenti del mouse ecc.
: Gli script possono essere collegati ai controlli del modulo (per es. i bottoni) per produrre
elemen-ti di interfaccia grafica per l’utente.
Gli script lato client possono dividersi in:
: script che vengono eseguiti una sola volta quando il documento viene caricato dal browser; : script che vengono eseguiti ogni volta che ricorre uno specifico evento. Questi script possono
es-sere assegnati a un numero di elementi mediante gli attributi di eventi intrinseci, quali per esem-pio il mouse che si muove sopra un elemento oppure la pressione di un particolare tasto ( event-driven). request (pag.html) Server Client Elaborazione (interpretazione del codice JavaScript)
Visualizzazione response (pag.html) HTML + JavaScript Server Client
Client-side:
Uno script che viene invece interpretato dal server web è chiamato script lato server, cioè un insieme di istruzioni elaborate dal server che generano HTML come risultato dell’interpretazione. Il file HTML viene inviato al client browser come risposta.
Riassumendo, possiamo dire che con “programmazione lato client” si intende lo scrivere programmi (in genere script o applet) che vengono interpretati o eseguiti dal client. Per “programmazione lato server” intendiamo invece programmi che vengono interpretati o eseguiti sul server il cui output vie-ne poi inviato sotto forma di pagivie-ne HTML verso il client. Di conseguenza, chi accede a una pagina PHP non ha la possibilità di leggere le istruzioni in essa contenute: essendo state già processate, il client vedrà il risultato dell’elaborazione. In altri termini, il client vedrà che cosafa lo script ma non
comelo fa.
4.3 Che cosa serve per iniziare
Per poter scrivere programmi con JavaScript è necessario possedere un computer con un normalissimo browser. Per esempio, Internet Explorer va benissimo.
Il grande vantaggio di questo linguaggio è legato proprio alla enorme diffusione dell’interprete che si trova in tutti i browser. Chi non possiede nel proprio computer un browser per navigare? A quel punto si diventa potenziali programmatori JavaScript e non è quindi necessario acquistare costosi software di sviluppo. Il linguaggio infatti permette di gestire tutti gli eventi che possono essere generati dall’utente all’interno del browser.
Per poter programmare è sufficiente possedere, oltre al suddetto browser, un editor in cui scrivere i pro-grammi. Come per tutti gli altri linguaggi è necessario usare un editor a caratteri ASCII; lo stesso brow-ser, se si clicca su Visualizza HTML, apre direttamente un editor, ma risulta a volte pratico l’uso di un edi-tor specifico che, per esempio, indenti automaticamente i programmi oppure segnali se ci sono errori durante la scrittura delle parole chiave del linguaggio.
Ne esistono moltissimi in commercio, ma in questo volume si utilizzerà semplicemente il Blocco note di Windows. request (pag.php) Server Client Elaborazione (interpretazione degli script lato server)
HTML (+ JavaScript) Server Client ? response HTML (+ JavaScript) Server Client
Server-side:
JavaScript è un linguaggio di programmazione con caratteristiche object orientedche segue il modello di computazione event-driven. L’utente genera degli eventi (tramite il mouse o la tastiera) che attivano l’esecu-zione di sequenze di istruzioni (event handlero gestori di eventi).
Vediamo come fare per scrivere un programma di prova e realizzarne il testing visualizzandone il risul-tato. JavaScript è un linguaggio interpretato: questo significa che per utilizzarlo nei documenti HTML è necessario integrarlo con il contenuto di questi ultimi. Esistono quattro modi per farlo:
: inserendo il codice JavaScript nel documento fra i marcatori <HEAD> </HEAD> oppure <BODY>
</BODY>utilizzando il tag <SCRIPT> </SCRIPT>;
: incorporando il codice nel documento per gestire semplici eventi; : caricando il codice JavaScript da un file .js salvato separatamente; : utilizzando il codice JavaScript all’interno di attributi HTML.
La prima metodologia prevede che il codice venga scritto direttamente nel documento; la seconda pre-vede un codice incorporato (embedded), la terza permette di scrivere il codice separatamente in un file
esterno, l’ultima, infine, comporta l’uso di entità JavaScript al posto di attributi ai tag HTML. È dove-roso sottolineare che l’ultima caratteristica è presente soltanto in Netscape Navigator.
4.4 Dove inserire gli script
Vediamo come inserire il codice JavaScript all’interno di una pagina HTML. Per fare questo occorre pri-ma di tutto aprire il browser, quindi cliccare su Visualizza HTML. A questo punto si apre la finestra di edi-tor per la scrittura del codice sorgente che può essere salvato come un normale file HTML, quindi con estensione .htm oppure .html.
Una volta scritto il codice, facendo attenzione a non modificare le lettere maiuscole e minuscole (Java-Script è un linguaggio case-sensitive), basta salvarlo nella cartella preferita. Per verificarne il
funziona-mento è necessario cliccare su Aggiornaoppure su File Aprise si vuole modificare un altro programma.
<HTML> <HEAD>
<SCRIPT TYPE=”text/JavaScript”>
document.write(“Salve mondo, eccomi qua, sono uno script JavaScript!”); </SCRIPT>
</HEAD> <BODY> </BODY> </HTML>
Come si può notare l’istruzione presente all’interno dei tag è scritta interamente in minuscolo; a tale pro-posito è importante dire che JavaScript è un linguaggio di tipo case-sensitive e – come già indicato –
di-stingue tra lettere maiuscole e minuscole. Per esempio, numero e Numero sono due identificatori diver-si. La maiuscola potrebbe essere presente anche all’interno della parola e non solo all’inizio. Così anche nuMero e numeRo sono identificatori diversi tra loro.
4.5 Gli script gestori di evento
L’inserimento di uno script in una pagina HTML può avvenire in tre modalità differenti, come spiega-to nel paragrafo precedente. Si è visspiega-to come inserire uno script di tipo embedded, vediamo adesso co-me inserire in una pagina prima uno script gestore di eventi (event-handler), quindi uno script in un fi-le esterno.
Uno script di gestione di eventi non è altro che un frammento di codice, molto spesso una funzione, che viene eseguita soltanto se un determinato evento si manifesta.
La maggior par te dei browser più recenti accetta anche la sintassi <SCRIPT> ... </SCRIPT> per marca-re l’inizio e la fine dello script senza l’attributo TYPE.
La programmazione JavaScript è guidata da eventi: un evento si verifica in seguito ad azioni eseguite dal-l’utente quali per esempio il clicksu un pulsante, il passaggio da un campo all’altro in un modulo (form), il passaggiodel mouse sopra un collegamento ecc.
Ciascun evento è generato da un oggetto HTML del browser. Anche se verranno descritti ampiamente in seguito vediamo nella tabella che segue un elenco dei principali eventi e oggetti sui quali operano.
Se un oggetto è in grado di generare un determinato evento, è possibile definire per esso un appropria-to gesappropria-tore di eventi. La sintassi generale per far ciò è la seguente
<TAG html gestoreEvento=”Codice JavaScript”>
dove tag HTML è un qualsiasi tag e gestoreEvento è il nome del gestore che è indicato nell’ultima colonna della tabella sopra menzionata. Così, per esempio, se si vuole fare in modo che quando il mou-se passa sopra a un link venga visualizzato un messaggio, è necessario associare il codice JavaScript che visualizza il messaggio all’elemento HTML preso in esame. In questo caso l’elemento è il tag HTML <A HREF>mentre l’evento è onMouseOver. Vediamo il codice completo:
<A HREF=”#” onMouseOver=”alert(‘Sei passato sul link!’);”> Passa il mouse sopra questa scritta
</A>
Un risultato analogo si otterrebbe cliccando sul link, con la differenza che lo script verrebbe attivato clic-cando e non passandovi sopra il mouse. È molto importante ricordare che separati dal punto e virgola possono essere inseriti più comandi JavaScript di seguito.
Si riassume quanto detto nel seguente esempio:
<A HREF=”#” onClick = “javascript:alert(‘Hai cliccato qua!’);” >
EVENTO ELEMENTO HTML RELATIVO AVVIENE QUANDO GESTORE DELL’EVENTO
Blur Finestre, frame e tutti gli elementi L’utente si sposta da un elemento onBlur
dei form all’altro (sposta il fuoco) in genere con un click del mouse
o con il tasto TAB
Click Pulsanti SUBMIT e RESET, radio L’utente clicca sull’oggetto onClick
button, checkbox, collegamenti
Change Campi testo, area testo e liste L’utente cambia il valore onChange
di selezione dell’elemento
Error Immagini, finestre Il caricamento di un documento onError
o di una immagine causa un errore
Focus Finestre, frame e tutti gli elementi L’utente por ta il fuoco sull’oggetto onFocus
dei form
Load Documento L’utente carica la pagina onLoad
Mouseout Immagine attiva, collegamenti L’utente sposta il mouse fuori onMouseOut
dall’oggetto
Mouseover Collegamenti L’utente muove il mouse su un onMouseOver
collegamento
Reset Form L’utente preme il pulsante onReset
di reset di un form
Select Campi testo, area testo L’utente seleziona del testo onSelect
dall’oggetto
Submit Pulsante SUBMIT L’utente preme il pulsante SUBMIT onSubmit
4.6 Gli script da file esterni
Nel caso in cui lo stesso script venga ripetuto in più pagine, può essere utile includere il codice in un fi-le esterno, con il vantaggio di poter correggere il codice in un unico fifi-le senza dover quindi modificare tutte le pagine che lo includono. Si tratta di prender tutto il codice JavaScript elaborato e inserirlo in un file di testo vuoto. È necessario scrivere il codice senza inserirlo fra i tag <SCRIPT> e assegnare l’esten-sione .js al file. Il codice che segue, in questo caso particolare, composto da una riga soltanto viene scritto e salvato nel file miofile.js.
alert(“salve questo messaggio proviene da un file esterno di nome miofile.js”);
Una volta creato il file .js, per fare sì che venga incluso nella pagina si deve scrivere il percorso all’in-terno dell’attributo src sempre del tag <SCRIPT>:
<SCRIPT type=”text/javascript” src=”miofile.js”> </SCRIPT>
L’attributo src deve contenere l’indicazione del percorso (assoluto o relativo) del file. Non ci sono par-ticolari accorgimenti per il procedimento di inclusione di JavaScript: il tag NOSCRIPT può essere utiliz-zato nel solito modo con gli stessi risultati.
4.7 Le finestre di dialogo
JavaScript permette di gestire finestre. Dal punto di vista dell’utente una finestra è una porzione di schermo racchiusa in una cornice, provvista di un titolo e di un testo esplicativo. Le finestre generalmen-te si dividono in due cageneralmen-tegorie, finestre principali e finestre di dialogo: le prime sono quelle che congeneralmen-ten- conten-gono il programma in esecuzione (un tipico esempio è rappresentato dalla finestra del programma In-ternet Explorer), le seconde sono quelle generate dal programma. Tra le finestre di dialogo occorre fa-re un’ulteriofa-re distinzione. Le finestfa-re di dialogo per l’input/output si dividono in modali(o bloccan-ti) e non modali(o non bloccanti). Le finestre bloccanti vengono chiamate così in quanto lo script si
interrompe e attende un’azione da parte dell’utente – per esempio la chiusura della finestra oppure il click su un bottone di conferma – per riprendere l’esecuzione. Sostanzialmente avviene che il resto del-la pagina HTML non viene visualizzata fintanto che non viene chiusa del-la finestra.
JavaScript possiede solo tre tipi di finestre e tutte di tipo modale che vengono visualizzate dalle seguen-ti istruzioni:
: alert : confirm : prompt
<A HREF="#" onClick = "javascript:alert('Hai cliccato qua!');" >
tag HTML
evento che innesca il relativo gestore (handler)
1. Con il simbolo cancelletto (#) si indica al browser di restare nella pagina spostando lo scrolling
a inizio pagina.
2. Inserendo un indirizzo URL la pagina indicata viene caricata al posto di quella attuale. 3. Inserendo alla fine del codice JavaScript "return false" si indica al br owser di non spostare
lo scrolling a inizio pagina.
codice JavaScript che viene eseguito dal gestore innescato
alerte confirm permettono di visualizzare un testo in una finestra mentre prompt consente l’im-missione di un dato da parte dell’utente che viene memorizzato nella variabile posta prima dell’uguale, come illustrato dall’esempio che segue:
window.alert(“messaggio”);
window.confirm(“Messaggio”);
nome=prompt(“Inserisci il tuo nome”);
In generale i messaggi contenuti nelle finestre sono rappresentati da stringhe (racchiusi tra virgolette) oppu-re da valori numerici.
Le stringhe possono rappresentare anche par ticolari valori, quali per esempio l’invio a capo, oppure la tabu-lazione, oppure rappresentare caratteri speciali.
Se si vuole, per esempio, far continuare il testo a capo è necessario inserire un carattere di escape che in-dichi l’invio. Per inserire un carattere di escape è necessario far precedere il simbolo di escape (la barra re-troversa) da un par ticolare codice.
La tabella che segue mostra alcuni codici di escape utilizzabili.
L'esempio seguente mostra l'uso dei caratteri di escape.
document.write('Il percorso dell\'immagine è C:\\documenti\\pagina\\imm\\giardino.jpg.<BR>');
document.write('Scrisse l\'autore: "La nevicata dell\'85 fu clamorosa."');
DESCRIZIONE SIMBOLO SEQUENZA DI ESCAPE
Continuazione di linea <newline> \
Nuova riga (a capo) NL(LF) \n
Tabulazione orizzontale HT \t
Uno spazio indietro (backspace) BS \b
Ritorno carrello CR \r
Avanzamento modulo (si sposta sulla successiva pagina FF \f logica)
Barra inversa \ \\
Apice singolo ‘ \’
4.8 Scrivere nella pagina
Per scrivere all’interno del documento HTML è necessario utilizzare un metododell’oggetto
docu-mentchiamato write(). La sintassi è la seguente:
document.write(“testo”);
Il testo indicato tra apici viene direttamente visualizzato all’interno del browser. Dal momento che il do-cumento in questione è scritto con il linguaggio HTML, il testo deve essere coerente con il medesimo linguaggio.
Il metodo write() viene utilizzato per scrivere codice on the fly(al volo) nella pagina. Quando nella parentesi del comando write() si inseriscono tag HTML è consigliabile utilizzare gli apici singoli co-me contenitori, in quanto gli apici doppi appartengono alla sintassi HTML. Per esempio, quando si de-ve inserire in HTML una tabella con il codice che contiene molti attribtui posti tra apici.
document.write(‘<TABLE WIDTH=”45%” BORDER=”2” CELLSPACING=”2” CELLPADDING=”3”><TR><TD WIDTH=”11%” BGCOLOR=”#D000FF”>Nome<TD BGCOLOR=”#11FF66”>Cognome</TABLE>’);
Questo è il risultato:
4.9 Le variabili
In JavaScript le variabili si possono dichiarare in due modi:
: dichiarazione esplicita : dichiarazione implicita
Una variabile viene esplicitamente dichiarata usando la parola chiave var,mentre viene invece implici-tamente dichiarata impostando la variabile uguale a un determinato valore. In sostanza la variabile assu-me il tipo in base al tipo di dato che le viene assegnato la prima volta, utilizzando un controllo di tipo
lasco (LASt COntrol).
Vediamo alcuni esempi di dichiarazioni variabili esplicite e implicite:
//dichiarazioni esplicite
var totale; // Valore esplicito indefinito var costo = 100.50; // Valore esplicito definito var numero = null; // Valore esplicito nullo //dichiarazioni implicite
costomerce = 256.3; // Valore implicito definito ricavo = null; // Valore implicito nullo
parzialeriga; // È errato non assegnare alcun valore
Si possono inoltre dichiarare più variabili sulla stessa riga separandole dalla virgola:
var prima,seconda,terza;
Oppure dello stesso tipo assegnando lo stesso valore, come illustrato dal seguente esempio:
var prima=seconda=terza=3; //le 3 variabili vengono dichiarate e inizializzate in un colpo solo
Oppure, ancora, separando con la virgola diverse assegnazioni:
Le variabili possono essere localio globali. Sono locali le variabili dichiarate all’interno di funzioni, il cui campo di validità è appunto rappresentato dalla funzione stessa. Sono globali quelle dichiarate all’e-sterno delle funzioni, solitamente all’inizio dello script e possono essere utilizzate all’interno o all’ester-no delle funzioni.
Le variabili possono essere di tipo nu-merico(intero o virgola mobile), di ti-po booleano(true o false) oppure an-cora di tipo stringa(tabella a lato).E
Dagli esempi mostrati nella tabella riepilogativa dei tipi principali, si può osservare che i valori numerici in virgola mobile utilizzano il punto per separare la parte intera da quella decimale.
4.10 Gli operatori e le funzioni aritmetiche
Gli operatori aritmetici che ammette JavaScript sono i seguenti: Operatore di addizione, somma due operandi.
Operatore di sottrazione, sottrae due operandi. Operatore di moltiplicazione, moltiplica due operandi.
Operatore di divisione, fornisce il risultato della divisione tra due operandi. Operatore di resto, fornisce il resto della divisione tra due operandi. Le principali funzioni aritmetiche di JavaScript sono le seguenti:
Math.abs() valore assoluto
Math.ceil() arrotonda per eccesso all’intero più vicino
Math.pow() eleva alla potenza
Math.round() arrotonda per eccesso o per difetto
Math.random() genera un numero casuale tra 0 e 0,999
Math.floor() arrotonda per difetto all’intero più vicino
Math.sqr() radice quadrata
Math.min(n1,n2) più piccolo tra 2 numeri
Math.max(n1,n2) più grande tra 2 numeri
4.11 Le conversioni di tipo
La conversione tra variabili di tipo diverso si può effettuare in due modi diversi:
: conversione implicita : conversione esplicita
La conversione implicitaavviene quando l’assegnazione obbliga l’interprete a convertire il valore. Se si effettuano operazione aritmetiche (+ – * /), a parte il + che viene usato per concatenare stringhe, i va-lori stringa, se possibile, vengono sempre trasformati in tipo numerico. Per esempio:
x=2 * 45 / “3”; // risulterà 30 numerico senza errori in quanto la str. // viene convertita
x=2 * 45 / “a3”; // errore: la str.’a3’ non può essere conv. in numero valido
% / * – + TIPO ESEMPIO Numeri interi 1492, 456789, 0 Numeri frazionari 999.345, 0.5, 1963.27 Boolean true, false
x=”3” + 45; // risulta “345” di tipo string poiché + indica concatenamento x=”34”+”ab”; // risulta “34ab” di tipo string
x=”2” * “6” / 2; // risulta 6 numerico senza errori
x=456; x=x+”a”; // risulta “456a” senza errori e di tipo string x=”45,2”; y=x+5; // risulta “45,25” string
x=”45,2”; y=x*2; // risulta 90,4 di tipo numerico x=”45,2”; y=x-”2”; // risulta 43,2 di tipo numerico x=”true”; y=x+1; // risulta “true1” di tipo string x=true; y=x+1; // risulta 2 numerico
La conversione esplicitaviene usata per obbligare l’interprete a convertire i valori nei diversi tipi. Il se-guente esempio mostra come convertire da numerico a stringa, mediante la funzione String():
x = 120; nome = String(x); //nome contiene “120” di tipo string
Per convertire invece da tipo stringa a tipo numerico si usano le funzioni parseInt(“stringa”) e
parseFloat(“stringa”). Queste funzioni non sempre restituiscono un risultato certamente nu-merico (per es. “ciao” non può essere convertito in numero):
parseInt
x=parseInt(“25gradi”); //restituisce 25 in x
y=parseInt(“255 giorni”,16); //restituisce in x FF esadecimale z=parseInt(“abc25”,10); //restituisce NaN (Not A Number)
Gli operatori numerici sono rappresentati dalle quattro operazioni (+ – * /). Per effettuare alcune ope-razioni su una variabile si utilizza:
a=a+3; oppure a+=3; a=a*5 oppure a*=5;
Essendo JavaScript un linguaggio derivato dal C esiste anche il pre e post incremento e decremento, co-me illustrato dal seguente esempio:
a++; oppure ++a; a—; oppure —a;
Se il ++ o il – precedono la variabile, l’incremento o il decremento avviene prima dell’esecuzione dell’e-spressione; se seguono la variabile, prima viene eseguita l’espressione, poi l’incremento o il decremento. Per esempio:
a= 10; alert(a++); alert(++a);
Si ottiene prima 10 e quindi 12.
4.12 Le stringhe
Le stringhe sono memorizzate all’interno di particolari tipi di dati denominati oggetti. Un oggetto pos-siede due caratteristiche chiamate rispettivamente proprietàe metodi. Le proprietà sono le caratteristi-che dell’oggetto (per es. la proprietà di una stringa può essere la sua lunghezza) mentre i metodi sono le azioni che l’oggetto può compiere (per es. la trasformazione in maiuscolo). La principale proprietà di una stringa è length che ne rappresenta la lunghezza. Il seguente esempio dichiara una variabile strin-ga in modo esplicito e ne visualizza la lunghezza, in questo caso 4:
n=”Ciao”;
La tabella che segue illustra l’elenco dei principali metodi.
METODO DESCRIZIONE
stringa.charCodeAt(n) Restituisce il carattere Unicode corrispondente alla posizione ndella stringa indicata.
Per esempio: var a = “abc”;
var b = a.charCodeAt(0); //restituisce 65 stringa.replace(s1,s2) Sostituisce la prima occorrenza della stringa s1, incontrata
a par tire da sinistra nella stringa denominata s2. Per esempio:
var stringa = “asteriz”;
stringa=stringa.replace(“z”,”x”); //restituisce “asterix”
Per sostituire tutte le occorrenze della stringa s1 è necessario racchiuderla tra // e non tra apici, seguita dal carattere g (global search):
var stringa = “asteriz obeliz”; stringa=stringa.replace(/z/g,”x”); //restituisce “asterix obelix”
stringa.charAt(n) Restituisce un carattere nella posizione n della stringa contenuta nell’oggetto stringa, dove il primo carattere viene identificato con lo zero.
stringa.substr(n, m) Restituisce la sottostringa ottenuta a par tire dalla posizione n per m caratteri.
stringa.substring(n, m) Restituisce la sottostringa ottenuta a par tire dalla posizione n fino alla posizione m esclusa.
stringa.indexOf(stringa2,n) Restituisce l’indice della prima occorrenza della stringa2, incontrata a partire da sinistra. Se presente il secondo parametro, la ricerca avviene dalla posizione indicata. Il valore restituito è -1 se non viene trovata la stringa2. Il primo carattere della stringa ha posizione zero. JavaScript è case sensitive, dunque stringhe composte da lettere maiuscole sono diverse da stringhe composte da lettere minuscole.
Per esempio:
var a = ‘Elemento’
var b = a.indexOf(‘ele’);
// b vale -1 in quanto ‘e’ è minuscola var c = a.indexOf(‘men’);
// c vale 5 in quanto si conta da 0
stringa.lastIndexOf(stringa2,n) Restituisce la posizione più a destra dove la stringa indicata come primo parametro corrisponde alla stringa contenuta nell’oggetto stringa. Se è indicato anche il secondo parametro, la ricerca termina in corrispondenza dalla posizione n. Se la corrispondenza non viene trovata, restituisce il valore –1.
stringa.toLowerCase() Restituisce la stringa contenuta nell’oggetto stringa conver tendola in lettere minuscole.
stringa.toUpperCase() Restituisce la stringa contenuta nell’oggetto stringa conver tendola in lettere maiuscole.
stringa.fontcolor(colore) Restituisce la stringa contenuta nell’oggetto stringa, aggiungendo i marcatori <font color=”colore”> e </font> all’inizio e alla fine della stessa.
var s = “JavaScript è un linguaggio”;
document.write(“la stringa è : “+s.fontsize(5)+”<BR>”);
document.write(“la frase è lunga “+s.length+” caratteri <BR>”);
document.write(“la frase trasformata in maiuscolo: “+ s.toUpperCase()+”<BR>”); document.write(“la frase trasformata in maiuscolo: “+ s.toLowerCase()+”<BR>”); document.write(“il quarto carattere è : “+ s.charAt(3) +”<BR>”);
document.write(“la posizione della lettera ‘v’ è : “+ s.indexOf(“v”, 3) +”<BR>”); //non trovata
document.write(“la posizione della lettera ‘v’ è : “+ s.lastIndexOf(“v”, 12) +”<BR>”); document.write(“la sottostringa dal terzo al quinto carattere:“
+ s.substring(2,5) +”<BR>”);
document.write(“la sottostringa che inizia il terzo carattere lunga 5:“ + s.substr(2,5) +”<BR>”);
document.write(“clicca qui :”+s.link(“http://www.hoepli.it”));
METODO DESCRIZIONE
stringa.fontsize(dimensione) Restituisce la stringa contenuta nell’oggetto stringa, aggiungendo i marcatori <font size=”dimensione”> e </font> all’inizio e alla fine della stessa.
stringa.blink() Restituisce la stringa contenuta nell’oggetto stringa, aggiungendo i marcatori <blink> e </blink> all’inizio e alla fine della stessa.
stringa.bold() Restituisce la stringa contenuta nell’oggetto stringa, aggiungendo i marcatori <b> e </b> all’inizio e alla fine della stessa.
stringa.italics() Restituisce la stringa contenuta nell’oggetto stringa, aggiungendo i marcatori <i> e </i> all’inizio e alla fine della stessa.
stringa.sub() Restituisce la stringa contenuta nell’oggetto stringa, aggiungendo i marcatori <sub> e </sub> all’inizio e alla fine della stessa.
stringa.sup() Restituisce la stringa contenuta nell’oggetto stringa, aggiungendo i marcatori <sup> e </sup> all’inizio e alla fine della stessa.
stringa.strike() Restituisce la stringa contenuta nell’oggetto stringa, aggiungendo i marcatori <strike> e </strike> all’inizio e alla fine della stessa.
stringa.anchor(nome) Restituisce la stringa contenuta nell’oggetto stringa, aggiungendo i marcatori <a name=”nome”> e </a> all’inizio e alla fine della stessa.
stringa.link(riferimento) Restituisce la stringa contenuta nell’oggetto stringa, aggiungendo i marcatori <a href=”riferimento”> e </a>all’inizio e alla fine della stessa.
4.13 I vettori
In JavaScript i vettori (array) devono essere dichiarati espressamente nel seguente modo:
mesi=new Array(12); //array di 12 elementi dichiarato con indice da 0 a 11
Per assegnare valori agli elementi del vettore si utilizza:
mesi[indice]=valore;
Per esempio:
mesi[0]=”gennaio”;
Gli array possiedono una serie di metodi, la tabella che segue ne illustra alcuni.
Esistono anche le matricio array multidimensionali. Essi dispongono di due o più indici per ogni ele-mento. In realtà JavaScript, a differenza di altri linguaggi, non li prevede ma li definisce come array di array (uno dentro l’altro). Si dichiarano nel modo che segue:
Var myArray = new Array(); myArray[0] = new Array(); myArray[0][0] = “Giuseppe”; myArray[0][1] = “Verdi”; myArray[1] = new Array(); myArray[1][0] = “Giacomo”; myArray[1][1] = “Puccini”;
I vettori possiedono la proprietà length che ne rappresenta la lunghezza, cioè il numero di elementi conte-nuti. Per esempio:
alert(mesi.length); //visualizza 12
METODO DESCRIZIONE
concat() Unisce due o più array accodandoli. Per esempio: v1=[1,2,3]
v2=[4,5,6] v3=[7,8,9]
v4=v1.concat(num2,num3) // crea un array [1,2,3,4,5,6,7,8,9] join() Conver te tutti gli elementi di un array in un’unica stringa. Per esempio:
v=new Array(1,2,3);
stringa=v.join(); // assegna “1,2,3” a stringa
stringa=v.join(“<BR>”); // assegna “1<BR>2<BR>3” a stringa stringa=v.join(“ + “); // assegna “1+2+3” a stringa
reverse() Trasferisce tutto l’array in senso opposto, ne inver te in sostanza le posizioni. Per esempio: var v=new Array(1,2,3);
v.reverse(); //adesso l’array contiene [3,2,1] shift() Rimuove e restituisce il primo elemento di un array. Per esempio:
var v=new Array(1,2,3);
elemento=v.shift(); elemento contiene 1. Il nuovo array è [2,3] slice() Estrae una sezione dell’array e restituisce un nuovo array. Per esempio:
var v=new Array(1,2,3,4,5,6);
var v2=v.slice(2,4); //adesso v2 contiene [3,4] sort() Ordina gli elementi di un array. Per esempio:
var v=new Array(6,2,4,3,5,1); v.sort(); //adesso v[1,2,3,4,5,6]
4.14 La selezione
Il costrutto di selezioneconsente di scegliere se eseguire o meno alcune istruzioni (blocco) in base al va-lore booleano assunto da una certa espressione condizionale verificata da un operatore relazionale. Tali operatori si basano sul concetto di verità e falsità e generano soltanto due diversi valori, rispettivamente ‘true’oppure ‘false’,e vengono usati solo nelle istruzioni condizionali. Sono elencati di seguito.
Operatore che restituisce ‘true’ se il risultato dell’espressione posta a sinistra è maggiore del risultato dell’espressione posta a destra.
Operatore che restituisce ‘true’ se il risultato dell’espressione posta a sinistra è maggiore o uguale al risultato dell’espressione posta a destra.
Operatore che restituisce ‘true’ se il risultato dell’espressione posta a sinistra è minore del ri-sultato dell’espressione posta a destra.
Operatore che restituisce ‘true’ se il risultato dell’espressione posta a sinistra è minore o uguale al risultato dell’espressione posta a destra.
Operatore che restituisce ‘true’ se il risultato dell’espressione posta a sinistra è diverso dal ri-sultato dell’espressione posta a destra.
Operatore che restituisce ‘true’ se il risultato dell’espressione posta a sinistra è uguale al ri-sultato dell’espressione posta a destra.
Gli operatori logicisono molto simili a quelli relazionali in quanto restituiscono soltanto un valore di verità che può essere vero o falso (true o false). Prima di vederne la sintassi in JavaScript, si riporta di seguito la tabella della verità che ne riassume il significato.
Gli operatori logici sono i seguenti: Operatore di AND logico. Operatore di OR logico.
Operatore unario di negazione (NOT logico). Trasforma il true in false e viceversa (1 in 0 e viceversa).
La sintassi della selezione è la seguente:
if (condizione) {
istruzioni... }
La selezionesi dice binariase consente di scegliere quali istruzioni o blocchi di istruzioni eseguire in base al valore booleano assunto da una certa espressione condizionale.
if (condizione) { istruzioni... } ! || &&
ESPRESSIONE1 ESPRESSIONE2 AND OR XOR
true false false true true
true true true true false
false false false false false
false true false true true
== != <= < >= >
else { istruzioni... }
4.15 I cicli in JavaScript
il ciclo while
Il ciclo while permette di eseguire nessuna o più istruzioni racchiuse fra le parentesi graffe per un cer-to numero di volte come mostracer-to dalla sintassi che segue:
while(condizione) {
istruzioni... }
Le istruzioni vengono eseguite soltanto se la condizione posta tra parentesi subito dopo la parola chia-ve while è true.
Il ciclo do
Il ciclo do...while permette di eseguire una o più istruzioni racchiuse fra le parentesi graffe per un certo numero di volte come mostrato dalla sintassi che segue:
do
{
istruzioni... }
while(condizione)
La selezione multipla è un’alternativa all’uso della selezione binaria annidata. Si usa quando è necessario eseguire operazioni legate a valori precisi. Mediante la selezione multipla si possono porre una serie di con-dizioni da valutare in modo sequenziale.
switch (espressione) { case valore: istruzioni... break; ... ... ... ...
case valore “ennesimo”: istruzioni... break; default: istruzioni... break; }
Dopo la parola chiave switch segue l’espressione che riguarda una variabile. La variabile da valutare deve essere racchiusa tra parentesi tonde. Seguono poi i vari casi valutati mediante la parola chiave case: se il valore assunto dalla variabile è uno di quelli ripor tati, vengono eseguite le istruzioni relative.
Da notare che il comando di scelta multipla esegue tutte le condizioni in sequenza, per tanto è necessario usare break per uscire dalla selezione. Se non indicato, viene valutata la condizione case che segue. È in-fine opzionale aggiungere la parola chiave default: nel paragrafo che segue vengono illustrate le istruzio-ni da eseguire quando nessuna delle precedenti opzioistruzio-ni è risultata vera.
Le istruzioni vengono eseguite soltanto se la condizione posta tra parentesi subito dopo la parola chia-ve while è true. Mentre nel ciclo while la condizione viene chia-verificata prima di iniziare l’iterazione, il ciclo do...while valuta la condizione dopo aver effettuato una iterazione. Questo significa appun-to che le istruzioni vengono eseguite almeno una volta anche se la condizione risulta subiappun-to false.
Il ciclo for
Il comando iterativo determinato esegue un blocco di istruzioni per un numero determinato di volte, fintanto che la condizione diventa falsa. La condizione viene valutata a ogni iterazione, prima di esegui-re il blocco di istruzioni: se risulta vera, viene eseguito il blocco, seguito dal comando di aggiornamen-to dell’indice, quindi la condizione è valutata nuovamente. La successione di valutazione della condizio-ne e dell’esecuziocondizio-ne del blocco prosegue sino a che la condiziocondizio-ne diventa falsa: in tal caso il blocco non viene eseguito e il ciclo termina. Il ciclo for permette di eseguire nessuna o più istruzioni racchiuse fra le parentesi graffe per un certo numero di volte come illustrato dalla sintassi che segue:
for(inizializzazione;condizione;incremento) {
istruzioni... }
Le istruzioni vengono eseguite soltanto se la condizione posta tra parentesi subito dopo il punto e vir-gola è true. Entrambi i comandi, negli esempi seguenti, sommano i primi dieci numeri naturali. Il pri-mo esegue la somma partendo da uno e arrivando a dieci e il secondo segue il procedimento inverso.
for (i=1;i<=10;i++) somma = somma + i; for (i=10;i>0;i–) somma = somma + i;
Il seguente esempio mostra come usare un ciclo for per rappresentare la somma dei primi 10 numeri:
var parziale=0; for(i=1;i<=10;i++) { parziale+=i; document.write(i+” – “+parziale+”<BR>”); }
L’inizializzazione e l’aggiornamento sono opzionali: è possibile infatti inizializzare il conta-toreal di fuori del ciclo e modificarlo all’interno del blocco di comandi. La condizioneè invece obbligatoria. La forma più utilizzata del comando iterativo determinato è tuttavia quella che contiene anche l’inizializzazionee l’aggiornamento.
Il ciclo for deriva direttamente dal linguaggio C ed è assolutamente equivalente a un ciclo while. Se la con-dizione non è verificata il ciclo non viene eseguito. Questo frammento di codice
for(i=0;i<n;i++) {
a=prompt(“inserire il “+i+”° nome”); }
è del tutto equivalente al seguente, nel quale si può notare come l’indice venga incrementato nel blocco del ciclo e venga inizializzato prima di iniziare il ciclo while:
var i=0; while (i<n) {
a=prompt(“inserire il “+i+”° nome”); i=i+1;
L’istruzione di break interrompe l’esecuzione di un ciclo facendo continuare il programma dalla pri-ma istruzione al di fuori del blocco in cui è stata immessa.
L’istruzione di continue, invece, interrompe il ciclo in corso ma non esce dal blocco in cui è inserita, passando al valore seguente.
Nell’esempio che segue, mediante l’uso di break si può uscire dal ciclo qualora l’utente clicchi su
Annulla:
var voto=max=0; //dichiarazione variabili numeriche //per i voti degli alunni
var nome=””,nome_max=””; //dichiarazione variabili stringa //per i nomi degli alunni
while (true) //ciclo while che non esce mai {
nome=window.prompt(“Inserire il nominativo dell’alunno\n PREMERE ANNULLA per terminare”); //inserimento nome alunno
if (nome==null) break;
voto=eval(window.prompt(“Adesso inserire il voto di “+nome+”\n PREMERE ANNULLA per terminare”)); //inserimento voto alunno
if (voto==null) break;
if (voto>max) //selezione del voto e memorizzazione { //nella variabile max e nome_max
max=voto; nome_max=nome;
} }
//comunicazione risultato window.alert(“Il voto massimo è dell’alunno “ + nome_max+”:“+max);
È inoltre possibile modificare ulteriormente questo esempio per fare in modo che il ciclo riprenda qua-lora l’utente immetta un carattere al posto di un numero, mediante l’istruzione continue:
var voto=max=0; //dichiarazione variabili numeriche //per i voti degli alunni
var nome=””,nome_max=””; //dichiarazione variabili stringa //per i nomi degli alunni
while (true) //ciclo while che non esce mai {
nome=window.prompt(“Inserire il nominativo dell’alunno\n PREMERE ANNULLA per terminare”); //inserimento nome alunno
if (nome==null) break; //uscita dal ciclo se click su Annulla voto=window.prompt(“Adesso inserire il voto di “+nome+”\n PREMERE ANNULLA per terminare”); //inserimento voto alunno
if (voto==null) break; //uscita dal ciclo se click su Annulla if (isNaN(voto)) continue; //continuazione del ciclo da while
//se non numero
if (voto>max) //selezione del voto e memorizzazione { //nella variabile max e nome_max
max=voto; nome_max=nome;
} }
//comunicazione risultato window.alert(“Il voto massimo è dell’alunno “ + nome_max+”:“+max);
4.16 Le funzioni
Le funzioni in JavaScript possono essere scritte in qualsiasi parte dello script, ma generalmente si prefe-risce scriverle all’interno del tag <HEAD> del documento HTML. In questo modo vengono caricate per prime e possono essere richiamate da qualunque punto del documento. La dichiarazione di una funzio-ne avviefunzio-ne per mezzo della parola chiave function:
function NomeFunzione(parametri formali) {
istruzioni... }
Il parametro attualeè rappresentato da un’espressione. I parametri attuali vengono valutati prima del-l’esecuzione del blocco di istruzioni associato alla funzione e il valore a essi assegnato è legato ai para-metri formali. Questo procedimento è detto passaggio dei parametri.
Nel codice che segue si vede come avviene la dichiarazione di una funzioneche divide due numeri tra loro e ne restituisce il risultato:
fuction dividi ( numero1,numero2 ) {
return numero1 / numero2; }
La “chiamata” della funzione avviene nel seguente modo:
a=dividi(12,3); //la variabile a contiene 4
4.17 Le funzioni e gli eventi
La maggior parte degli elementi che compongono una pagina HTML, definita all’interno dell’ambien-te del browser, è in grado di generare eventi. Nel paragrafo 4.1 è stato dato ampio risalto al fatto che Ja-vaScript sia un linguaggio guidato dagli eventi (event-driven).
Il segnale emesso dall’evento viene inviato all’oggetto sul quale è stata eseguita l’azione, il quale
rispon-de invocando un apposito gestore di evento. Ogni azione genera un diverso tipo di evento e ogni tipo
di evento è catturato da uno specifico gestore.
function dividi ( numero1,numero2 ) {
return numero1 / numero2; }
Valore restituito (dopo parola chiave return) Parola
chiave
Identificatore
di funzione Parentesi Parametri formali separati dalla virgola
Un eventoè un segnaleemesso ogniqualvolta viene eseguita un’azione. Tale azione è assolutamente asincrona, in quanto non può essere previsto il momento nel quale si verificherà e neppure se si veri-ficherà.
È possibile associare a un evento una funzione, in modo tale da “catturare” l’evento eseguendo di conse-guenza un blocco di istruzioni. Come si vede dalla tabella che segue, diversi oggetti possono rispondere agli stessi eventi.
Come si vede dalla tabella, diversi oggetti possono rispondere allo stesso tipo di eventi: per esempio, sia le immagini che l’oggetto document rispondono all’evento onLoad.
I gestori di eventi non sono globali; ogni oggetto, infatti, possiede i propri. Esiste, per esempio, un di-verso gestore di evento onClick() per ogni immagine, pulsante o altro oggetto in grado di risponde-re all’evento click.
Ogni tipo di oggetto è in grado di rispondere a un diverso insieme di eventi: un oggetto window per esempio è in grado di rispondere all’evento resize mentre invece un oggetto di tipo immagine no, en-trambi possono, tuttavia, rispondere all’evento load.
L’esempio che segue mostra come utilizzare una funzione che risponde ad alcuni di questi eventi per l’oggetto document, che non è altro che il corpo (<BODY>) di un documento HTML.
<HEAD>
<SCRIPT TYPE=”text/javascript”> function sinistro()
{
alert(“hai cliccato col tasto sinistro!”); }
function destro() {
alert(“hai cliccato col tasto destro!”); }
function tastiera() {
alert(“hai premuto un tasto!”); }
</SCRIPT> </HEAD>
<BODY onclick=”sinistro();” oncontextmenu=”destro();” onkeydown=”tastiera();”>
OGGETTO EVENTO GESTORE DESCRIZIONE
window Resize onResize Ridimensionamento di una finestra document,image,window Load onLoad Caricamento della pagina
document,window Unload onUnLoad Uscita dalla pagina
document,form,image,link Click onClick Click con il tasto sinistro del mouse su di un elemento
document,form,image,link Double click onDbClick Doppio clic con il tasto sinistro del mouse su un elemento
document,form,image,link Mouse over onMouseOver Passaggio del mouse su un elemento document,form,image,link Mouse move onMouseMove Movimento del mouse su un elemento document,form,image,link Mouse out onMouseOut Uscita del mouse dall’area
di un elemento
document,form,image,link Mouse down onMouseDown Click del mouse su un elemento document,form,image,link Context menu onContextMenu Click con il tasto destro del mouse
su un elemento (solo IE 5.0) image Blur onBlur Perdita del focus (focalizzazione)
da par te di un elemento image, window Focus onFocus Raggiungimento del focus
da parte di un elemento
form Submit onSubmit Pressione del tasto Inviodella tastiera
I gestori di evento possono essere scritti anche senza rispettare le maiuscole, in quanto HTML non è un lin-guaggio case sensitive.
In questo esempio all’oggetto document sono stati associati 3 eventi: onclick che richiama la fun-zione sinistro(), oncontextmenu che richiama la funfun-zione destro() quando si preme il tasto destro del mouse e infine onkeydown che richiama la funzione tastiera() quando si preme un ta-sto qualsiasi della tastiera.
In tal modo, se si vuole per esempio disabilitare il menu che appare quando si preme il tasto destro, do-po la comparsa della finestra di alert, è necessario scrivere return false, per indicare al gestore di non restituire più l’evento contextmenu al relativo gestore.
<BODY oncontextmenu=”destro();return false”...>
L’esempio che segue mostra infine un diverso messaggio a seconda del click effettuato sui tre diversi ele-menti grafici.
Gli eventi gestiti sono due, il click col tasto destro (contextmenu) per vedere la formula dell’area, op-pure il click col tasto sinistro per il calcolo dell’area.
<SCRIPT TYPE=”text/javascript”> function formula(tipo) { switch(tipo) { case 1:alert(“AREA=”+String.fromCharCode(960)+”r”+String.fromCharCode(178));break; case 2:alert(“AREA=”+”b*h/2”);break; case 3:alert(“AREA=”+”l”+String.fromCharCode(178));break; } } function calcola(tipo) { var n=m=0; switch(tipo) { case 1: n=prompt(“inserire il raggio”); n=Math.PI*Math.pow(n,2); break; case 2: n=prompt(“inserire la base”); m=prompt(“inserire l’altezza”); n=n*m/2; break; case 3: n=prompt(“inserire il lato”); n=Math.pow(n,2); break; } alert(“Risultato :”+n); } </SCRIPT> ...
<IMG SRC=”cerchio.jpg” oncontextmenu=”formula(1);return false; ”onclick=”calcola(1);”>
<IMG SRC=”triangolo.jpg” oncontextmenu=”formula(2);return false; ”onclick=”calcola(2);”>
Il gestore dell’evento richiama la funzione e, qualora la funzione restituisca un valore, quest’ultimo viene passato all’evento.
<IMG SRC=”quadrato.jpg” oncontextmenu=”formula(3);return false; ”onclick=”calcola(3);”>
...
Si ottiene il risultato illustrato nella figura a lato.E
4.18 La convalida dei moduli con JavaScript
Quando un utente compila un modulo, prima che venga inviato al server per l’elaborazione, è possibile verificarne la correttezza. Questa è una delle applicazioni più frequenti di JavaScript, unitamente all’ela-borazione delle animazioni. Ad esempio, per verificare se un utente ha immesso tutti i dati di un modu-lo, prima che quest’ultimo venga inviato al server, gli si può collegare una funzione di verifica all’evento di invio del modulo.
Per capire come arrestare o provocare l’invio del modulo è necessario comprendere il modello a ogget-tidel browser. JavaScript permette infatti di gestire tutti gli elementi di un modulo secondo la disposizio-ne: oggetto.oggettofiglio.proprietà oppure metodo.
Le proprietà di un modulo sono rappresentate, per esempio, dal contenuto di un campo modulo. Così se un form di nome modulo possiede un campo nome, il contenuto di tale campo sarà ottenibile da
modu-lo.nome.value. I principali metodi di un oggetto di tipo modulo sono submit() e reset(). Il primo provoca l’invio dei dati raccolti dal modulo e il secondo fa in modo che i valori nei campi del mo-dulo siano ripristinati con quelli iniziali. L’invocazione del metodo submit() provoca il verificarsi del-l’evento submit, mentre l’invocazione del metodo reset() provoca il verificarsi deldel-l’evento reset. Invocando uno dei due metodi si ha dunque, come conseguenza, l’esecuzione dei corrispondenti gesto-ri di evento del modulo: onSubmit() e onReset(). Una carattegesto-ristica di questi gestogesto-ri di evento è la
Non tutti gli eventi sono guidati da fenomeni legati al mouse oppure alla tastiera; per meglio dire vi sono al-cuni eventi che vengono eseguiti al momento stesso del caricamento della pagina nel browser. È questo il caso dell’evento load e del relativo gestore onLoad. Viene associato al tag HTML <BODY>. Il seguente esempio mostra come calcolare il fattoriale dei primi n numeri all’avvio della pagina:
function fattoriale(n) { n++; var dati=””; for(i=1,fatt=1;i<n;i=i+1,fatt=fatt*i) { document.write(i + “! = “+ fatt+”<BR>”); } }
//evento legato al caricamento della pagina è onload //prima di chiamare la funzione viene letta
//la variabile a e passata alla funzione fattoriale //come parametro
possibilità di bloccarel’azione che ha generato l’evento. Se infatti i gestori restituiscono il valore
fal-se, l’azione non viene eseguita. Nell’esempio che segue il gestore onReset() chiama una funzione che chiede all’utente se deve essere eseguito il ripristino dei dati.
//funzione chiamata dall’evento reset() che si manifesta quando l’utente clicca //sul pulsante “reset”
function conferma() {
return confirm(“Sei sicuro di voler cancellare i dati?”); }
//il modulo gestisce l’evento reset() richiamando una funzione //aggiungere la parola return prima del nome funzione
//permette di passare al gestore di evento false oppure true
//a seconda del valore booleano restituito dalla funzione conferma() <FORM NAME=”modulo” onReset=”return conferma();”>
cognome:<INPUT TYPE=”text” NAME=”cognome”> nome:<INPUT TYPE=”text” NAME=”nome”> <INPUT TYPE=”submit” VALUE=” Invia “>
<INPUT TYPE=”reset” VALUE=” Cancella “> </FORM>
A seconda che l’utente prema il tasto di conferma o di annullamento sulla finestra di dialogo, il metodo confirm() resti-tuisce true o false. Tale valore viene restituito dalla funzione al gestore di eventi che a sua volta agisce di conseguen-za. Nella figura a lato viene illustrata la conseguenza logica della pressione del ta-sto Cancella (1), che attiva il gestore di evento il quale richiama la funzione con-ferma()(2), la funziona invoca il meto-do confirm() (3); se l’utente conferma con OK, il metodo restituisce true alla funzione (4) la quale a sua volta restituisce tale valore al gestore di evento (5) che in-voca il metodo reset del form (6). E
Tale meccanismo prende il nome di event bubbling, o eventi a catena, e viene gestito da JavaScript nel modo visto sopra.
In realtà bisogna pensare che i gestori di eventi non sono degli attributi, bensì vere e proprie funzioni. Quello che sembra un assegnamento è dunque la definizione del corpo del gestore di eventi. Poiché una funzione restituisce un valore solo se nel suo corpo è presente l’istruzione return è chiaro che tale istruzione è necessaria anche nel corpo di un gestore che deve restituire un valore.
La differenza tra un gestore che possiede return e uno che invece non ha return nel suo codice di risposta è paragonabile a quello che accade con le definizioni di funzioni riportate di seguito.
// Questa funzione può essere paragonata ad un gestore di evento con return // restituisce il valore ottenuto da confirm()
function onReset()
È importante notare l’uso dell’istruzione return, necessaria perché il valore restituito dal metodo confirm() si propaghi.
(6) Gestore evento onReset() svuota i campi true true Funzione conferma() Metodo confirm() (5) (1) (6) (2) (4) (3)
{
return confirm(“Sei sicuro di voler cancellare i dati?”); }
// Questa funzione può essere paragonata ad un gestore di evento senza return // non restituisce alcun valore
function onReset() {
confirm(“Sei sicuro di voler cancellare i dati?”); }
L’invio di dati tramite un modulo richiede che siano impostati opportunamente i valori degli attributi
action, method ed enctype. In base ai valori dei tre attributi è possibile inviare dati a un indirizzo di posta elettronica piuttosto che a un’applicazione remota. L’invio di dati a un’applicazione richiede conoscenze che esulano da quelle fornite in questo volume, pertanto non viene trattato. L’invio di dati per posta elettronica può essere effettuato interamente tramite HTML e JavaScript. La trattazione di questo tipo di moduli è comunque limitata alla combinazione di valori per gli attributi method, ac-tioned enctype che determinano l’invio di un messaggio il cui corpo contiene una lista di nomi dei campi con i rispettivi valori impostati dall’utente. L’esempio che segue mostra un modulo per l’invio dei propri dati anagrafici.
<SCRIPT>
function indirizzoEmailValido(indirizzo) {
//restituisce true o false a seconda che la casella //contiene o meno il carattere @
return (indirizzo.indexOf(“@”) > 0) } function controllaDati() { if (!indirizzoEmailValido(document.modulo.email.value)) { document.modulo.email.select();
alert(“attenzione!!\n indirizzo email non valido!”); return false;
} else
return true; }
//input da tastiera dell’oggetto della mail
var oggetto=prompt(“Inserisci l’oggetto della mail”,””); //msg contiene la stringa del form completo di oggetto //e destinazione: ACTION=...
//l’evento onsubmit verifica che l’utente immetta il proprio indirizzo email msg=”<FORM NAME=’modulo’ METHOD=’post’ ENCTYPE=’text/plain’
onsubmit=’return controllaDati()’ “; msg+=” ACTION=’mailto:indirizzo@email.it?subject=”+oggetto+”’>”; document.write(msg); </SCRIPT> Titolo <SELECT NAME=”titolo”> <OPTION VALUE=”Dott.”>Dottore</OPTION> <OPTION VALUE=”Ing.”>Ingegnere</OPTION> </SELECT><BR>
Nome: <INPUT TYPE=”text” NAME=”nome”><BR> Cognome: <INPUT TYPE=”text” NAME=”cognome”><BR> Luogo di nascita:
<INPUT TYPE=”text” NAME=”localita_nascita” size=”30”><BR>
Provincia:<INPUT TYPE=”text” NAME=”provincia_nascita” size=”2”><BR>
Data di nascita:<INPUT TYPE=”text” NAME=”nascita” SIZE=”10” VALUE=”gg/mm/aaa”><BR> Indirizzo e-mail:<INPUT TYPE=”text” NAME=”email”>
<BR> Commenti:
<TEXTAREA NAME=”commenti” ROWS=”10” COLS=”40”>Inserisci qui i commenti...</TEXTAREA> <BR>
<INPUT TYPE=”submit” VALUE=”Invia”> <INPUT TYPE=”reset” VALUE=”Cancella”> </FORM>
Il modulo generato dal precedente script è mostrato nella figura a destra.E
FIl formato della mail spedita premendo il pulsante Inviaè
quel-lo della figura a sinistra.
4.19 Gli oggetti del browser
Il modello a oggetti del browser (BOM, Browser Object Model)
con-sente agli script lato client di in-teragire con gli elementi del brow-ser tramite metodi e proprietà. La fi-gura a lato rappresenta gli elementi principali del modello a oggetti. E
Document Document History Location Navigator Screen Frames Window Location Anchors Forms Images Links Document
Come si può notare, il capostipite della gerarchia è l’oggetto window, dal quale si dipartono gli ogget-ti principali come, per esempio, document dal quale a sua volta derivano gli altri oggetogget-ti del browser. Un elemento del browser è identificabile tramite il percorso completo. Per esempio, se nel browser vi è un form di nome modulo contenente un campo testuale di nome indirizzo, tramite la dot notation, esso è identificato dal percorso:
window.document.modulo.indirizzo
Questa definizione è tuttavia priva di significato in quanto per ogni oggetto deve essere specificato il me-todo o la proprietà alla quale si fa riferimento. Per esempio la proprietà value consente di ottenere o modificare il contenuto del campo, quindi è corretto scrivere il seguente frammento di codice:
window.document.modulo.indirizzo.value=”Via del Parco 21”;
La finestra del browser (window)
L’oggetto rappresenta tutto quello che appartiene alla finestra del browser. Possono esserci nello stesso istante diversi oggetti window aperti contemporaneamente associati a diverse finestre del browser. I principali metodi e proprietà di quest’oggetto sono riportati nella tabella che segue.
Nella dot notation di JavaScript la scrittura dell’oggetto window può essere tranquillamente omessa.
closed Restituisce un booleano che indica se una finestra è stata chiusa
defaultStatus Definisce il testo di default nella barra di stato di Windows
document Restituisce un rimando all’oggetto document della finestra corrente
event Restituisce un rimando all’oggetto event che contiene le proprietà di tutti gli eventi mentre avvengono
frames[] Restituisce l’array dei nomi dei frame della finestra
history Restituisce un rimando all’oggetto history della finestra che contiene gli URL dei siti visitati
length Restituisce il numero di frame contenuti nella finestra
location Restituisce l’oggetto location che indica l’URL della finestra corrente
name Restituisce o imposta il nome della finestra
navigator Restituisce un rimando all’oggetto navigator che contiene informazioni circa il tipo e la versione del browser
opener Quando si utilizza il metodo window.open() è possibile utilizzare questa proprietà per accedere alla finestra sorgente (per esempio, possiamo usare il metodo window.opener.close() per chiudere la finestra che l’ha aper ta)
parent Restituisce un rimando al frame o alla finestra che contiene il frame corrente
screen Restituisce il rimando all’oggetto screen che contiene informazioni sullo schermo e sulla resa del sistema
self Restituisce il rimando all’attuale finestra
status Indica il messaggio corrente della barra di stato
top Restituisce un rimando al frame superiore
window PROPRIETÀ
Il seguente esempio illustra l’uso del metodo open() di window:
// Crea e apre una finestra vuota open();
// Crea e apre una finestra vuota memorizzando il // riferimento nella variabile f
var f = open();
// Crea e apre una finestra al cui interno è mostrata // la pagina di google di nome “g”
var f = open(“http://www.google.it”,”g”);
// Crea e apre una finestra di dimensioni 400x300 di nome nuova
var f = open(“about:blank”,”nuova”,”width=400,height=300,toolbar=no,top=0”); // Apre una finestra sopra la precedente
var g = open();
alert() Visualizza una finestra di dialogo modale con messaggio e pulsante OK blur() Provoca la perdita di focus dell’elemento
clearInterval() Annulla l’inter vallo impostato con il metodo setInterval()
clearTimeout() Annulla il timeout impostato con il metodo setTimeout()
close() Chiude la finestra attiva
confirm() Visualizza una finestra di dialogo modale con messaggio e pulsanti OKe Cancel focus() Induce l’elemento a ricevere il focus
moveBy() Sposta la finestra per il numero di pixel specificati negli assi x e y
moveTo() Sposta l’angolo in alto a sinistra della finestra alla posizione specificata
open() Crea e apre una nuova finestra
print() Stampa i contenuti della finestra corrente su stampante
prompt() Visualizza una finestra di dialogo modale per l’immissione di dati con pulsanti OKe Cancel
resizeBy() Ridimensiona la finestra per gli offset x e y specificati regolando la posizione dell’angolo in basso a destra
scroll() Fa scorrere la finestra alle coordinate stabilite
setInterval() Esegue l’espressione stabilita ogni volta che il numero di millisecondi specificato scade
setTimeout() Esegue l’espressione stabilita solo la prima volta dopo che è trascorso il numero di millisecondi specificato
window METODI
onblur L’elemento perde il focus di input
onerror Il caricamento della finestra non avviene per un errore del client
onfocus All’elemento viene assegnato il focus
onload Al caricamento della finestra
onresize Al ridimensionamento della finestra
onunload Alla chiusura della pagina
// Scrive nella finestra nascosta
f.document.write(“Questa finestra si chiama: “ + f.name); // Porta in primo piano la finestra nascosta
f.focus();
Produce la serie di finestre riprodotte nella figu-ra a lato. E
4.20 Il documento (document)
Tra le proprietà di window, la più utilizzata è document, che contiene l’oggetto più articolato. L’og-getto document rappresenta il documento HTML visualizzato ed è su di esso che si deve agire per ren-dere le pagine dinamiche, per modificarne l’aspetto e usarle come mezzo di comunicazione (interfaccia) con l’utente. Tutti gli oggetti contenuti in una pagina HTML sono in realtà proprietà dell’oggetto do-cument, poiché risiedono all’interno del documento stesso. Per esempio, in JavaScript la prima imma-gine contenuta in un documento può essere riferita con document.images[0], mentre il secondo collegamento ipertestuale può essere riferito con document.links[1] e così via, come gia visto in precedenza per i form.
L’oggetto document è utile perché fornisce dei metodi che permettono di scrivere nel browser codice HTML dinamico. In HTML un documento viene creato attraverso l’uso dell’oggetto contenitore <BODY>...</BODY>. Se non viene usato tale contenitore, molte delle proprietà di questo oggetto non saranno disponibili, anche se diverse proprietà vengono impostate assegnando i valori direttamen-te a esse. Per podirettamen-ter usare le proprietà e i metodi dell’oggetto document, occorre utilizzare la seguendirettamen-te sintassi:
document.Proprietà document.Metodo()
Le principali proprietà di document sono le seguenti:
: bgColor: imposta o restituisce il colore di sfondo del docmento;
: fgColor: imposta o restituisce il colore del testo;
: linkColor: imposta o restituisce il colore dei link nel documento;
: title: restituisce il titolo del documento;
I principali metodi di document sono riportati di seguito.
: write(): ha un solo parametro di tipo stringa. Scrive il testo passato come parametro alla fine del documento corrente. Se usato dopo aver invocato il metodo close o prima di aver usato il metodo open, cancella tutto il contenuto del documento prima di scrivere il nuovo testo. Que-sto non avviene se invocato all’interno di un body script.
: focus(): dà il focus al documento.
: close(): chiude un flusso di uscita e visualizza i dati.
: open(): apre un documento e cancella il contenuto attuale. Se usato nello stesso documento cancella il contenuto compreso lo script che lo contiene. Pertanto va invocato in un documento diverso da quello che lo contiene.
L’esempio crea una finestra come flusso per inserirvi una immagine casuale rappresentata da un file .gif.
function n_fin() {
//apre una nuova finestra bianca var win2=window.open(“”); //apre un flusso di scrittura win2.document.open();
win2.document.bgColor=”AABBCC”;
win2.document.write(“<b>Salve a tutti sono una nuova finestra<BR>”);
win2.document.write(“che contiene una immagine casuale scelta tra sette<BR>”); //generazione numero casuale tra 1 e 7
var n=Math.round(Math.random()*6)+1; //visualizzazione immagine con tag html win2.document.write(“<IMG SRC=”+n+”.gif>”) win2.document.close()
}
Cliccando sul pulsante “immagine casuale” si ottiene la videata riprodotta nella figura a lato. E
La sequenza logica della creazione di una finestra (oggetto window) con all’interno un flusso (oggetto document) è illustrata dalla figura seguente:
evento click che attiva la funzione n_fin() apertura finestra win2 con window.open()
apertura flusso win2
win2.document.open()
scrittura nel flusso con
win2.document.write()
chiusura flusso
4.21 La barra degli indirizzi (location)
L’oggetto location è un riflesso dell’indirizzo del documento corrente, che consiste in un URL com-pleto del documento HTML. Modificando la proprietà href di tale oggetto è possibile far “saltare” il documento alla pagina desiderata. Per esempio:
window.location.href=http://www.hoepli.it;
L’esempio che segue illustra l’uso di questo importante oggetto mediante alcune proprietà indicate per comodità in grassetto. document.write(“Indirizzo :”+window.location.href+”<BR>”); document.write(“Porta :”+window.location.port+”<BR>”); document.write(“Host :”+window.location.host+”<BR>”); switch (window.location.protocol) { case “http:”:
document.write(“Sei nel Web<BR>\n”); break; case “file:”: document.write(“Sei in locale<BR>\n”); break; default: document.write(“protocollo sconosciuto<BR>\n”); break; } var indir=prompt(“indirizzo “,””); window.location.href=indir; </SCRIPT>
Se si lavora in locale, come nel caso dell’esempio riportato, le proprietà host e port sono nulle, men-tre l’indirizzo è riferito a un indirizzo locale.
4.22 La cronologia del browser (history)
L’oggetto history contiene la cronologia degli URL visitati nella sessione attuale dal browser del client. Fornisce al programmatore la possibilità di accedere allo storico delle pagine visitate, chiamato appunto history (cronologia). Il metodo più interessante è senza dubbio
history.go(numero);
dove numero è un intero che rappresenta il numero di URL presenti nell’history cui spostarsi per recu-perare l’URL da caricare nella barra degli indirizzi (ovviamente valori negativi implicano uno sposta-mento all’indietro). Nell’esempio che segue
history.go(stringa);
stringaè una sottostringa che rappresenta una parte di un URL da ricercare nella lista di URL del-l’oggetto history. Viene caricato il primo URL che combacia con tale sottostringa. Per esempio:
history.go(“hoepli.it”)
