Guida a Javascript

Transcript

Guida a Javascript

Guida a Javascript
1.Introduzione a Javascript
Javascript (spesso abbreviato come JS) è il linguaggio di scripting più diffuso sul Web. Chi
affronta per la prima volta questo argomento, almeno in questa sede, dovrebbe sapere che a
differenza di HTML, che è un linguaggio di markup, Javascript è un vero e proprio linguaggio di
programmazione (o di scripting che dir si voglia) orientato agli oggetti (seppur in modo "limitato")
ed agli eventi.
Attraverso Javascript è possibile scrivere veri e prori "programmi" (script) attraverso i quali
interagire con l'utente e con il sistema attraverso l'ausilio del browser che, dopo aver scaricato il
codice sorgente del programma, ne darà esecuzione. In questo senso si parla di linguaggio di
scripting lato client per distinguerlo dai linguaggi lato server dove l'interpretazione del codice è
compito del server e non del client.
Linguaggio "lato client"
Come detto Javascript è un linguaggio di scripting lato client nel senso che la sua interpretazione ed
esecuzione è a carico del client (del browser) e non del server (come invece accade, ad esempio,
con ASP e PHP).
Essendo "lato client" il codice sorgente del programma deve essere prima scaricato dal browser per
poter essere interpretato. Ciò comporta dei tempi di esecuzione più lunghi (anche se in realtà, con la
diffusione delle connessioni veloci, questo problema si è assai ridotto) e l'impossibilità di eseguire
(direttamente) operazioni che coinvolgono il server come, ad esempio, la scrittura di dati all'interno
del database (in questi casi è necessario ricorrere all'intermediazione della tecnologia AJAX).
Un vantaggio dello scripting lato client è che l'elaborazione di programmi anche complessi non
comporta nessun sovraccarico per la capacità computazionale del server il quale si limiterà a
"trasmettere" il sorgente un po' come accade coi comuni documenti HTML.
Linguaggio di scripting (o di programmazione)?
la differenza, in realtà, è più che altro terminologica. Da un punto di vista formale Javascript è
tecnicamente un linguaggio di scripting in quanto si definisce "di programmazione" un linguaggio
in grado di creare programmi stand-alone cosa che con Javascript non è possibile fare, essendo
necessario un altro programma (il browser) per eseguirne i comandi.
Un linguaggio di scripting, quindi, è un'esemplificazione di un linguaggio di programmazione, dove
il codice viene interpretato da un browser e non è direttamente eseguibile.
Perchè utilizzare un linguaggio di scripting?
La risposta è semplice, ed i conoscitori dell'HTML dovrebbero saperlo.
Questi si saranno di certo chiesti come fare a far apparire in automatico la data su di una pagina,
oppure come creare un sistema che al caricamento di una pagina reindirizzi il visitatore verso
un'altra pagina dopo un determinato numero di secondi, o qualsiasi altra cosa che non è stato
possibile fare con il semplice markup HTML.
Con l'utilizzo di Javascript, in poche parole, è possibile dinamizzare una pagina HTML, interagire
con l'utente ed automatizzare alcuni processi sulla base del verificarsi di taluni eventi legati al
comportamento dell'utente, alle caratteristiche del sistema o ad eventi temporali.
Scopo della guida
Nelle prossime lezioni di questa guida cercheremo di affrontare gli aspetti principali del linguaggio
e di capirne il suo funzionamento al fine di creare script, più o meno complessi, coi quali rendere
maggiormente coinvolgente l'espereinza di navigazione degli utenti del nostro sito.
Javascript e la programmazione ad oggetti
Come già accennato all'inizio di questa lezione, Javascript permette un approccio alla
programmazione sia di tipo procedurale che orientata agli oggetti (o OOP).
In ealtà non è corretto parlare di OOP per Javascript, in quanto questo linguaggio non conosce i
concetti di classe e di interfaccia, tanto meno di polimorfismo e non è un linguaggio fortemente
tipizzato. Pur non essendo munito delle caratteristiche citate, Javascript permette ugualmente di
creare degli oggetti.
In questa sede non è il caso di addentrarci in concetti avanzati e complessi in quanto, essendo
l'obiettivo di questa guida quello di formare l'utente ad un utilizzo di base del linguaggio,
l'approccio classico (o procedurale) appare, pertanto, decisamente più consono.
Alcuni accenni alla programmazione OOP saranno affrontati nella parte conclusiva di questo
mauale.
2.Implementare il codice Javascript all' interno di
una pagina HTML
Come già detto, il codice Javascript viene implementato direttamente all'interno delle pagine
HTML, frequentemente all'interno della sezione <head>, con l'utilizzo dei tag <script> e </script>.
In realtà, è bene precisarlo, codice Javascript può essere inserito in qualsiasi punto del documento
HTML, sia nell'<head> che nel <body> della pagina. La scelta di "dove" implementare il codice
dipende da una pluralità di fattori che è difficile approfondire a questo punto della guida. In linea di
assoluta approssimazione possiamo dire che gli script che producono direttamente un output (ad
esempio appraverso un document.write()) vengono solitamente inclusi nel corpo visibile della
pagina, mentre eventuali librerie, funzioni nonchè i codici che effettuano operazioni come redirect o
l'apertura di pop-up vengono inserite nell'intestazione del documento.
Editor Javascript
Se volete scrivere codice Javascript non avete bisogno di nessun software particolare.
Sia ben inteso: esistono diversi editor Javascript ma il loro utilizzo non deve essere inteso come
indispensabile in quanto la loro utilità è data esclusivamente da funzioni di auto-completamento,
dizionari incorporati e strumenti di debug. Per carità, non è poco... ma se potete farne a meno
sappiate che per scrivere codice Javascript è sufficiente utilizzare un editor plain-text come il
Blocco Note di Windows o Notepad++.
Il tag <script>
All'inizio della lezione abbiamo accennato al tag <script>, vediamo ora in maniera completa come
preparare la pagina a ricevere del codice Javascript.
L'utilizzo "completo" e scolastico del tag script prevede l'indicazione dell'attributo type. Questa
indicazione in HTML 4 è necessaria, mentre in HTML 5 è assolutamente facoltativa. In HTML 4,
quindi, utilizzeremo:
<script type="text/javascript">
/*
codice ed istruzioni javascript
*/
</script>
In HTML 5, invece, sarà sufficiente:
<script>
/*
codice ed istruzioni javascript
*/
</script>
In passato era frequente notare l'utilizzo dell'attributo language in questo modo:
<script language="javascript">
ma oggi questa sintassi è da considerarsi obsoleta (e quindi da NON utilizzare).
In passato, ancora, era considerata buona norma utilizzare sempre il markup per i commenti HTML
per rinchiudere il codice Javascript al fine di evitare che i browser privi del supporto per Javascript
interpretassero il codice come testo, stampandolo a video:
<script type="text/javascript">
<!-document.write('... ... ...');
document.write('... ... ...');
document.write('... ... ...');
//-->
</script>
Anche questo approccio può essere considerato superato in quanto, ad oggi, tutti i browser moderni
supportano Javascript (e conoscono il tag <script>) che è diventato un componente fondamentale
della navigazione on-line.
Includere file Javascript esterni
Quella che abbiamo visto qui sopra è la sintassi per aggiungere codice Javascript direttamente
all'interno del sorgente del documento HTML. In realtà questa non è l'unica via per aggiungere
codice Javascript ad una pagina Web. E' molto frequente, infatti, includere nella pagina file
Javascript esterni (file con estensione ".js") dove sono contenute le sole istruzioni di scripting.
Questa tecnica permette di separare nettamente il codice HTML dal codice di scripting ed è molto
utile quando è necessario implementare lo stesso blocco di codice all'interno di una pluralità di
pagine web.
Per effettuare l'inclusione di file Javascript esterni si usa sempre il tag <script> specificando,
all'interno dell'attributo src, la URL del file Javascript che si desidera includere:
<script src="file-esterno.js"></script>
In questo caso tra l'apertura del tag <script> e </script> non si scrive nulla.
Hello World in Javascript
Scriviamo un primo semplice programmino che stamperà a video una stringa di testo:
<script>
document.write("Ciao a tutti!!!");
</script>
Questo è un classico esempio di codice che va implementato nel <body> della pagina nel punto
esatto in cui si vuole appaia la stringa, ad esempio in un paragrafo oppure nella cella di una tabella.
Si noti che al termine della nostra istruzione è stato inserito un punto e virgola. In realtà inserire il
punto e virgola a fine riga non è obbligatorio in quanto l'interprete Javascript riconosce la fine di
una riga di codice e lo inserisce automaticamente in memoria; è comunque buona norma di
programmazione inserirlo. E' indispensabile, invece, se diverse istruzioni vengono scritte sulla
stessa linea, ad esempio:
document.write("Benvenuto"); document.write(" su Mr.Webmaster");
Il Tag <noscript>
Al fine di evitare errori all'interno di browser obsoleti o qualora il supporto per javascript sia stato
volontariamente disattivato dall'utente è possibile implementare il tag <noscript>. Questo tag si
include al di sotto dello script o nel punto della pagina in cui si visualizza la sua esecuzione.
All'interno del tag <noscript>, solitamente, si scrive un avviso del tipo: "Il tuo browser non supporta
Javascript", o un qualunque messaggio che avvisi l'utente che la pagina non sarà visualizzata ne sarà
funzionale come dovrebbe per mancanza del supporto di Javascript.
Come detto il testo contenuto tra i tag <noscript> e </noscript> viene mostrato a video solo se viene
rilevato che il browser non supporta Javascript, o per qualunque motivo detta funzione è stato
disattivata.
3.I commenti in Javascript
E' buona norma di programmazione commentare il codice, cioè aggiungere, all'interno del codice
sorgente dello script, annotazioni ed appunti. Si tratta, in pratica, di inserire porzioni di codice che
non dovranno essere interpretate dal browser come comandi Javascript, ne dovranno essere
stampate a video. I commenti Javascript al codice, infatti, sono "ad uso e consumo" dello
sviluppatore e servono per annotare determinati passaggi, ragionamenti o altro utile per successive
modifiche o per attività di manutenzione.
L'aggiunta di commenti al codice è una buona prassi di programmazione che dovrebbe essere
seguita da ogni buon sviluppatore a prescindere dal linguaggio utilizzato. L'utilizzo dei commenti,
inoltre, è da ritensersi indispensabile quando si lavora in gruppo in quanto è un modo efficente per
spiegare "il perchè" di alcuni passaggi logici anche ad altre persone del team di sviluppo.
Una cosa da tenere in considerazione quando si aggiungono commenti al codice Javascript è che
questi, diversamente da quanto accade nei linguaggi lato server, saranno visibili a chiunque acceda
al codice sorgente dello script.
Commenti su singola linea o multi-liea
I commenti in Javascript possono scriversi su di una riga con l'utilizzo dei simboli // o su più righe
tra i simboli /* e */. Vediamo un esempio di commenti su una o su più righe:
//Questo è un commento su una sola riga
mentre
/*
Questo è un commento su più righe.
Questa è la seconda riga.
Questa è l'ultima riga.
*/
javascript... e i commenti HTML
E' bene ricordare che in Javascript, anche se il codice viene inserito direttamente all'interno di una
pagina HTML, non deve essere utilizzata la sintassi dei commenti HTML la quale produrrebbe un
errore (fatta eccezione per il caso segnalato alla lezione precedente dove la sintassi dei commenti
HTML è utilizzata per racchiudere l'intero codice dello script per evitare errori coi browser
obsoleti).
4.Variabili e tipi di dato in Javascript
In un qualsiasi linguaggio di programmazione un ruolo indispensabile e di primo piano è occupato
dal concetto di variabile. Col termine "variabile" s'intende una porzione di memoria (del client)
all'interno della quale vengono conservate alcune informazioni necessarie per lo svolgimento delle
operazioni del programma.
L'assegnazione di un valore ad una variabile in Javascript è molto semplice:
var nomeVariabile;
nomeVariabile = "contenuto";
Oppure:
var nomeVariabile = "contenuto";
Attraverso var abbiamo creato la variabile ed in seguito l'abbiamo valorizzata. In realtà la
dichiarazione della variabile (attraverso la clausola var) avrebbe potuto essere omessa in quanto
Javascript non prevede la dichiarazione obbligatoria delle variabili. Quindi avremmo potuto scrivere
semplicemente:
nomeVariabile = "contenuto";
La sintassi dell'assegnazione del valore ad una variabile è elementare, da sinistra a destra abbiamo:
 il nome della variabile;
 l'operatore di assegnazione (=);
 il valore assegnato.
Seguono alcune considerazioni importanti:
 Javascript è case-sensitive, questo significa che una variabile chiamata "miavariabile" sarà differente da
un'altra variabile chiamata "MiaVariabile";
 il nome della variabile:
o non deve coincidere con una delle parole chiave del linguaggio;
o non può iniziare con un numero;
o non può contenere uno spazio;
o non può contenere caratteri speciali come, ad esempio, il punto (.) ed il trattino (-).
 il valore assegnato deve essere contento all'interno di doppi apici (") o apici singoli (') se si tratta di una
stringa; non servono se il valore della variabile è numerico, è null o booleano.
NOTA: abbiamo appena detto che le stringhe vanno sempre racchiuse tra doppi apici (") o apici
singoli ('). Ma come possiamo fare se è la stessa stringa a dover contenere uno di questo due
caratteri? Le soluzioni sono due: 1) se la nostra stringa contiene apaci singoli racchiudiamola
all'interno di doppi apici, o viceversa; 2) più correttamente impariamo ad utilizzare il carattere
backslash in questo modo:
var str1 = 'Oggi serve l\'ombrello';
var str2 = "Marco ha detto: \"ciao a tutti\"";
In pratica abbiamo anteposto una backslash prima del carattere che avrebbe potuto essere
interpretato da Javascript come "speciale" (nel nostro caso sarebbe stato identificato come il
terminatore della stringa); così facendo il carattere viene semplicemente stampato a video e non
interpretato.
Tipi di dato: il valore delle variabili
Le variabili in Javascript possono assumere differenti valori:




stringa di testo;
valore numerico (intero o decimale);
valore booleano (true/false);
valore NULL;
Un tipo particolare di variabile è rappresentato dai vettori o array ma questo argomento verrà
affrontato in una lezione successiva di questa nostra guida.
Altri operatori di assegnazione
Se si lavora con variabili numeriche, oltre all'uguale è possibile usare anche altri operatori di
assegnazione, e cioè:
+=
E' un operatore incrementale e viene usato così:
x += y;
Questa sintassi euqivale a:
x = x + y;
NOTA: Questo operatore può essere utilizzato anche per le variabili stringa che, ovvaimente, non
vengono sommate ma concatenate.
-=
E' un operatore decrementale e viene usato così:
x -= y;
x = x - y;
*=
E' un operatore di moltiplicazione e viene usato così:
x *= y;
x = x * y;
/=
E' un operatore divisionale e viene usato così:
x /= y;
x = x / y;
%=
E' un operatore modulare e viene usato così:
x %= y;
x = x % y;
variabili locali e variabilio globali
Le variabili possono essere locali o globali, le prime servono a dichiarare un valore che verrà
conservato in memoria per l'utilizzo della funzione o della routine in cui viene dichiarata, le
seconde, al contrario, vengono dichiarate all'inizio di un blocco di script e possono essere utilizzate
da una molteplicità di funzioni e routine.
Vediamo un esempio di variabile locale:
function mia_funzione() {
var miaVariabile = 123;
alert(miaVariabile);
}
In questo caso la nostra variabile miaVariabile esiste solo all'interno della funzione.
Vediamo adesso un esempio di variabile globale:
var miaVariabile = 123;
function mia_funzione() {
alert(miaVariabile);
}
In questo caso la variabile miaVariabile sarà accessibile ovunque ed è quindi definita "globale".
5.Le costanti in Javascript
Le costanti, come lascia intuire il nome, servono a memorizzare dei valori che non possono
cambiare durante l'esecuzione dello script. Javascript, storicamente, non ha mai supportato le
costanti. Da un punto di vista prettamente convenzionale, molti sviluppatori Javascript sono soliti
definire i valori costanti all'interno di comuni variabili caratterizzate da un nome in maiuscolo.
var miavariabile = 123;
var MIACOSTANTE = 456;
Nelle nuove versioni del linguaggio (ECMAScript 6) si sta valutando la possibilità di consentire
agli sviluppatori Javascript di creare vere e proprie costanti attraverso la keyword const in questo
modo:
const MIACOSTANTE = 456;
In questo modo il valore sarà accessibile solo in lettura e non sarà modificabile ed eventuali
operazioni di modifica o riassegnazione produrranno un errore Javascript.
E' bene precisare, tuttavia, che si tratta - ad oggi - di una "proposta" (EMAScript 6 è, al momento in
cui si scrive, nello stato di bozza) e che pertanto l'utilizzo di questa sintassi non è da considerarsi
universalmente supportato ed è pertanto sconsigliato.
6.Gli operatori di Javascript
In una precedente lezione abbiamo visto come defininire e valorizzare delle variabili in Javascript
ed abbiamo visto che queste possono assumere diversi valori corrispondenti a diversi tipi di dato
(stringa, numerico, booleano, ecc.). Se è vero che le variabili svolgono un ruolo da primo iano in un
qualsiasi programma, è altrettanto vero che lo è altrettanto saper svolgere su di esse determinate
operazioni come, ad esempio, operazioni matematiche, confronti, concatenazioni, ecc.
Tutte queste operazioni sono fondamentali all'interno di un programma in quanto è attraverso di
esse che il flusso di codice riesce a raggiungere il risultato (l'elaborazione) che il programmatore si
è prefissato.
In realtà alcuni operatori li abbiamo già incontrati nella lezione dedicata alle variabili, si tratta dei
cosidetti operatori di assegnazione che sono utilizzati, come il nome lascia intendere, appunto per
assegnare un valore ad una variabile. In questa lezione vedremo altre "famiglie" di operatori, più
precisamente: operatori di concatenazione, operatori matematici, operatori di confronto e operatori
logici.
Operatori di concatenazione
Gli operatori di concatenazione agiscono sulle stringhe e servono, come il nome lascia intendere, a
concatenare due o più variabili stringa.
Operatore +
Attraverso il simbolo matematico del + è possobile concatenare due variabili stringa. Ad esempio:
var str1 = 'Mr.';
var str2 = 'Webmaster';
document.write(str1 + str2);
stamperà a video "Mr.Webmaster".
Operatore +=
Attraverso l'operatore += viene concatenato il valore della variabile di sinistra all'espressione di
destra:
var str1 = 'Mr.';
str1 += 'Webmaster';
document.write(str1);
stamperà a video "Mr.Webmaster".
Operatori matematici
Si tratta dei comuni operatori utilizzati per effettuare operazioni matematiche tra variabili
numeriche. Questi sono:
 + Esegue un'addizione
 - Esegue una sottrazione
 * Esegue una moltiplicazione
 / Esegue una divisione
 % (modulo) calcola il resto intero della divisione tra due numeri
Oltre a questi devono essere ricordati gli operatori ++ e -- utilizzati, rispettivamente, per
incrementare e decrementare di una unità un valore numerico passato per una routine. Ad esempio:
var num = 7;
num++;
documenti.write(num);
stamperà a video: 8
var num = 7;
num--;
documenti.write(num);
stamperà a video: 6
Operatori di confronto
Questi operatori possono agire su diversi tipi di variabili (stringa, numerica, booleana, ecc.) e sono
utilizzati per effettuare, appunto, dei confronti. L'esito del confronto genera un valore booleano
(TRUE o FALSE).






== Uguaglianza
!= Diversità
< Minore
<= Minore o uguale
> Maggiore
>= Maggiore o uguale
Questo tipo di operatori assume un'importanza centrale all'interno delle strutture di controllo (o
strutture condizionali) quando, cioè, l'esito del confronto tra due o più variabili diventa
determinante al fine del comportamento del programma stesso.
Vediamo qualche esempio di utilizzo degli operatori di confronto:
var a = 10;
var b = 3;
if
if
if
if
(a
(a
(a
(a
== b) { ... } // il controllo restituisce FALSE
!= b) { ... } // il controllo restituisce TRUE
< b) { ... } // il controllo restituisce FALSE
> b) { ... } // il controllo restituisce TRUE
Operatori logici
Un altra serie molto importante di operatori è costituita da quella simbologia che consente di
effettuare operazioni logiche di associazione (AND), alternanza (OR) e negazione (NOT). Anche
questi operatori sono utilizzati nelle strutture di controllo del flusso di programma.
 && - L'operatore "AND" è utilizzato per creare condizioni complesse composte da una pluralità di sotto-
condizioni; affinché la routine si verifichi è necessario che tutte le sotto-condizioni siano vere.
 || - L'operatore "OR" è utilizzato per creare condizioni complesse composte da una pluralità di sottocondizioni; affinché la routine si verifichi è necessario che almeno una delle sotto-condizioni sia vera.
 ! - L'operatore "NOT" indica una negazione all'interno di una routine. In sostanza si usa per invertire il
significato di una condizione.
Vediamo qualche esempio:
var
var
var
var
if
if
if
if
a
b
c
d
=
=
=
=
10;
3;
9;
24;
(a == b && c < d) { ... } // il controllo restituisce FALSE
(a != b && c < d) { ... } // il controllo restituisce TRUE
(a > b || c == d) { ... } // il controllo restituisce TRUE
(!(a > b)) { ... } // il controllo restituisce FALSE
7.Strutture condizionali in Javascript: if, else if e
else
Da questa lezione, sulla scorta delle nozioni apprese finora, inizieremo finalmente a scrivere
qualche programmino degno di nota, per farlo dobbiamo, prima di tutto, prendere confidenza con le
cosiddette strutture di controllo del flusso di programma o, più banalmente, le condizioni.
Come in ogni linguaggio di programmazione che si rispetti, anche in Javascript, infatti, è possibile
definire delle condizioni al verificarsi delle quali deve o meno accadere qualcosa. Per fare ciò ci si
serve degli operatori if, else if, else i quali corrispondono alle locuzioni condzionali "se", "oppure
se" e "oppure".
La sintassi Javascript per eseguire un'istruzione if è la seguente:
if (condizione) {
istruzioni;
}
La condizione segue l'istruzione if e viene racchiusa tra parentesi tonde, mentre le istruzioni da
eseguire - se la condizione si verifica - vengono racchiuse tra parentesi graffe.
Se vi è una sola istruzione e questa viene scritta su una singola riga è possibile omettere le parentesi
graffe come nell'esempio:
if (condizione) istruzione;
Possiamo anche dire al programma come comportarsi in caso la condizione non si verifichi, con
l'ausilio di else:
if (condizione) {
istruzioni;
}else{
istruzioni;
}
Utilizzando else non c'è bisogno di specificare tra parentesi tonde la condizione, dato che il
programma valuterà tutte le altre situazioni possibili, all'infuori di quella specificata nell'istruzione
if. Quindi se la condizione non si verifica il programma eseguirà quanto specificato nel blocco else.
Quella che abbiamo visto è una struttura condizionale relativamente semplice: se la condizione X si
verifica esegui questa operazione, in caso contrario esegui quest'altra.
In realtà, però, è possibile creare strutture condizionali molto più complesse introducendo la
clausola else if che in sostanza introduce N nuove possibiltà in quanto, a differenza di if e else che
possono essere usate una volta soltanto, può essere utilizzata più volte per creare infinite nuove
possibilità.
if (condizione 1) {
istruzioni;
}
else if (condizione 2) {
istruzioni;
}
else if (condizione 3) {
istruzioni;
}
else if (condizione N) {
istruzioni;
}else{
istruzioni;
}
Come avete visto i blocchi "else if" possono essere più di uno.
Vediamo di seguito un esempio di una semplice struttura di controllo "scolastica" finalizzata a
stampare a video un messaggio differente a seconda della risoluzione dello schermo dell'utente.
var screenwidth = screen.width;
if (screenwidth < 400) {
document.write('Stai usando uno smartphone');
}
if (screenwidth < 800) {
document.write('Stai usando un tablet');
}else{
document.write('Stai usando un computer');
}
Nel nostro esempio, molto banalmente, intercettiamo la larghezza dello schermo dell'utente e,
attraverso una struttura condizionale a tre blocchi mostriamo un messaggio differente a seconda che
la risoluzione lasci intendere l'utilizzo di uno smarphone, di un tablet o di un comune computer.
Vediamo di seguito un esempio che mostra come costruire istruzioni condizionali composite. Più
precisamente vedremo come utilizzare l'operatore logico AND (&&) per creare blocchi condizionali
composti da più condizioni:
// creo un oggetto data
var saluto = new Date();
// individuo l'ora corrente
var oo = saluto.getHours();
if (oo > 06 && oo <= 12) {
document.write("Buon giorno!");
}
else if (oo > 12 && oo <= 18) {
document.write("Buon pomeriggio!");
}
else if (oo > 18 && oo <= 22) {
document.write("Buona sera!");
}
else {
document.write("Buona notte!");
}
Creare condizioni complesse
Quando si concatenano due o più condizioni è necessario stare molto attenti all'uso delle parentesi
tonde. Se si concatenano diverse condizioni sempre col medesimo operatore l'uso di parentesi tonde
(ulteriori a quelle "esterne" che racchiudono l'intera condizione) non è necessario:
if (a == true && b == true && c == true) { ... }
In questo caso il blocco if si realizzerà se tutte e tre le condizioni sono vere.
L'uso delle parentesi diventa indispensabile, invece, se si costruiscono condizioni complesse
utilizzando una pluralità di operatori logici:
if ((a == true && b == true) || c == true) { ... }
In quest'ultimo esempio il blocco if si realizzerà se "a" e "b" sono true oppure se è true la sola
variabile "c".
8.L'istruzione switch di Javascript
Nella precedente lezione abbiamo visto come creare una struttura condizionale utilizzando le
clausole if, else if e else. In realtà questo costrutto non è l'unico tipo di struttura di controllo
disponibile in Javascript. In questa lezione, infatti, vedremo come orientare il flusso di programma
attraverso l'utilizzo del costrutto switch.
Attraverso lo switch viene presa in esame una data variabile e vengono definiti una serie di
comportamenti (casistiche) a seconda che quesa abbia un determinato valore. La sintassi di switch è
la secuente:
switch(variabile) {
case valore1:
istruzioni;
break;
case valore2:
istruzioni;
break;
...
case valoreN:
istruzioni;
break;
default:
istruzioni;
}
Come potete notare:

il costrutto si apre con la parola switch seguita da una parentesi tonda al cui interno è specificata
la variabile da valutare;
 vengono definiti una serie di casistiche attraverso la parola case seguita dai due punti (:) e poi da
un possibile valore della variabile presa in esame;
 all'interno di ogni blocco case sono inserite delle istruzioni al termine delle quali deve essere
inserito il comando break al fine di interrompere il flusso dello switch;
 l'ultimo blocco è contraddistinto dalla parola default seguita dai due punti (:) che definisce le
istruzioni da eseguire qualora nessuno dei casi si sia verificato.
Come avrete capito si tratta di una sintassi che, in alcune circostanze, può essere usata in alternativa
al classico if.
Vediamo un esempio:
// creo un oggetto data
var oggi = new Date();
// individuo il mese corrente
var mese = oggi.getMonth();
switch (mese) {
case 0:
alert("Gennaio");
break;
case 1:
alert("Febbraio");
break;
case 2:
alert("Marzo");
break;
case 3:
alert("Aprile");
break;
case 4:
alert("Maggio");
break;
case 5:
alert("Giugno");
break;
case 6:
alert("Luglio");
break;
case 7:
alert("Agosto");
break;
case 8:
alert("Settembre");
break;
case 9:
alert("Ottobre");
break;
case 10:
alert("Novembre");
break;
case 11:
alert("Dicembre");
break;
}
E' evidente come un simile risultato si sarebbe potuto raggiungere anche utilizzando una serie di if
ed else if. Evidentemente la scelta su quale sintassi utilizzare dipende esclusivamente dalle
preferenze del programmatore.
9.L'operatore ternario di Javascript
Oltre ai costrutti if ... else if ... else ... e switch esiste anche una terza sintassi attraverso la quale è
possibile incanalare il flusso di programma a seconda che una data condizione si verifichi oppure
no. Questa sintassi è nota come operatore ternario e consiste in un modo "compatto" attraverso il
quale scrivere un'istruzione condizionale.
E' bene precisare che questo tipo di sintassi è molto comoda ed utile se si devono affrontare
condizioni semplici del tipo if... else... mentre è assolutamente meno adatta a controlli complessi ed
articolati, anche perchè questo tipo di sintassi si scrive su una linea singola e non si può andare a
capo.
Vediamo la sintassi dell'operatore ternario in Javascript:
condizione ? istruzione1; : istruzione2;
Possiamo tradurre questa sintassi in questo modo: se la condizione è vera esegui l'istruzione n1., in
caso contrario esegui l'istruzione n2.
Possiamo dire, dunque, che il simbolo punto interrogativo (?) che segue alla condizione equivale ad
una if ed i due punti (:) ad un else.
Vediamo un esempio pratico:
var piove = false;
document.write(piove == true ? 'Fuori piove' : 'Non server l\'ombrello');
Nell'esempio qui sopra abbiamo utilizzato una sola condizione (piove == true) ma nessuno ci vieta
di utilizzare, anche con l'operatore ternario, delle comdizioni composite, ad esempio:
var piove = false;
var freddo = true;
document.write(piove == true && freddo == true ? 'Piove e fa freddo' : 'Ho visto
giornate peggiori');
Da segnalare, infine, che è possibile combinare tra loro due o più operatori ternari per gestire
situazioni più complesse, ad esempio:
var piove = false;
var sole = true;
document.write(piove == true ? 'Fuori piove' : (sole == true ? 'Che bella
giornata!' : 'Piuttosto nuvoloso'));
In questo caso il primo operatore (cioè quello più esterno) verifica il valore della variabile "piove",
mentre il secondo (che si attiva solo se questa prima variabile è false) effettua un controllo sulla
seconda variabile "sole" per decidere quale frase stampare a video.
10.I cicli in Javascript: for, while e do-while
Per una serie di motivi che scopriremo nel corso di questa lezione, nonchè nelle successive, può
nascere l'esigenza di dover ripetere una serie di istruzioni un determinato numero di volte, o finchè
non si verifichi una data condizione. In tali circostanze è necessario ricorrere alle iterazioni o, più
comunemente, ai cicli.
Javascript supporta diverse strutture iterative:
 for
 while
 do while
Vediamole una ad una cercando di illustrarne il funzionamento anche facendo ricorso ad esempi
pratici di utilizzo.
Il ciclo for()
Un ciclo for() serve a ripetere una serie di istruzioni un determinato numero determinato di volte.
Per definire un ciclo for() si imposta:


una variabile contatore a cui si assegna un valore di partenza arbitrario (solitamente 0);
la condizione di terminazione (cioè un valore della variabile contatore che, una volta raggiunto,
blocca il ciclo);

ed uno step (cioè l'incremento - o decremento - da applicare alla variabile contatore ad ogni
passaggio del ciclo).
La dichiarazione della variabile contatore è opzionale, ma le buone norme di programmazione
gradiscono che venga dichiarata.
Vediamo un esempio:
var i;
for (i=0; i<3; i++) {
/*
istruzioni che verranno ripetute 3 volte
*/
}
Come potete vedere abbiamo definito una variabile "i" che svolge il ruolo di contatore. All'interno
delle parentesi tonde che seguono a for abbiamo definito il valore di partenza (i=0), la condizione
che termina il ciclo (i<3) ed il nostro step (i++). In pratica for eseguirà le istruzioni contenute tra le
parentesi graffe per tre volte in quanto al primo passaggio "i" avrà valore 0, al secondo 1, al terzo 2
ed a questo punto si stopperà in quanto la condizione di terminazione ci dice che il ciclo dovrà
continuare sino a quanto "i" è minore di 3.
Più avanti, nel corso di questa guida, ritroveremo i cicli for() nella lezione dedicata agli array dove
assumono un ruolo determinante nell'esplorazione del contenuto del vettore.
L'articolo continua dopo la pubblicità
Il ciclo while()
A differenza di for(), il ciclo while() non prevede l'utilizzo di alcun contatore ma semplicemente
l'indicazione di una condizione di terminazione: il ciclo terminerà non appena la condizione
impostata si realizza. La sintassi è la seguente:
while (condizione) {
istruzioni;
}
Vediamo un esempio banale:
var i = 0;
while (i < 10) {
document.write('Conto: ' + i);
i++;
}
che equivale a:
var i;
for (i=0; i<10; i++) {
}
Nell'esempio qui sopra, come in for(), il ciclo è determinato da una variabile numerica, in realtà
nulla vieta di impostare un ciclo while() che utilizza come condizione un altro tipo di variabile
come, ad esempio, un valore booleano.
Il ciclo do while()
La struttura do while() è una variante di while(). La differenza tra le due sintassi consiste nel fatto
che il controllo della condizione avviene dopo l'esecuzione dell'istruzione e non prima; la
differenza, da un punto di vista pratico, è che l'istruzione viene eseguita sempre almeno una volta.
Questa la sintassi:
do {
istruzioni;
}
while (condizione);
Vediamo un esempio pratico:
var i = 0;
do {
i++;
}
while (i < 10);
Attenzione ai loop!
In chiusura di questa lezione dedicata i cicli ritengo doveroso un avvertimento: quando impostate un
ciclo abbiate sempre cura di impostare con attenzione la condizione conclusiva che deve SEMPRE
verificarsi. Ricordatevi, infatti, che se la condizione non si realizza mai... il ciclo continua
all'infinito (cosidetto loop). Da un punto di vista pratico un loop comporta un esaurimento delle
risorse del client ed un blocco del browser, quindi si tratta di una situazione che non deve mai
potersi verificare!
11.I comandi break e continue di javascript
In tema di cicli è importante citare due fondamentali comandi del Javascript, ovvero break e
continue.
break
Il comando break lo abbiamo già visto quando abbiamo analizzato la struttura di controllo switch;
in realtà i suoi ambiti di impiego non si esauriscono li, in quanto break può essere utilizzato anche
all'interno di strutture iterative come, ad esempio, for(). Vediamo un esempio:
var i;
for (i = 0; i < 10; i++) {
if (i == 3) break;
}
Come facile intuire, il comando break ha la funzione di interrompere il ciclo in un momento
arbitrario; così facendo l'interprete Javascript blocca l'esecuzione del ciclo e riprende
l'interpretazione del codice a partire dalle istruzioni successive al ciclo stesso.
continue
Il comando continue serve, invece, per stoppare una singola iterazione del ciclo o, più
semplicemente, per saltare un passaggio. Si supponga, ad esempio, di voler stampare a video una
serie di numeri ad esclusione di uno specifico valore:
var i;
for (i = 0; i < 10; i++) {
if (i == 3) continue;
}
Nel nostro esempio verranno stampati tutti i numeri da 0 a 9 ad esclusione del 3.
Attraverso continue, in pratica, l'interprete Javascript "salta" una specifica iterazione passando alla
successiva. Se con break il ciclo terminava anzitempo, con continue questo procede sino alla sua
fine naturale.
12. Gli eventi in Javascript
Perchè accada un qualcosa, sia nella vita che in programmazione, c'è bisogno che "questo qualcosa"
sia scatenato da un evento: nella vita, ad esempio, un incontro può far accadere qualcosa di
piacevole (si spera!), in programmazione il click del mouse, la pressione di un pulsante, il resize
della finestra, ecc. su possono scatenare una determinata routine.
In poche parole possiamo definire un evento Javascript come qualcosa che accade all'interno del
documento HTML che è il nostro contesto. Nella maggior parte dei casi a scatenare l'evento è un
comportamento ell'utente (ad esempio un click su un dato elemento della pagina) altre volte, invece,
è una situazione contingente che prescinde da una qualsivoglia azione dell'utente (come ad esempio
il caricamento della pagina).
Javascript supporta moltissimi eventi che, con l'evolversi del linguaggio, sono andati via via
arricchendosi. In questa lezione vedremo gli eventi principali e più utilizzati e, soprattutto, vedremo
come utilizzarli al fine di indirizzare il comportamento dei nostri script.
la sintassi degli eventi Javascript
L'evento si richiama direttamene all'interno dell'elemento HTML che lo riguarda, incorporando un
attributo nel codice dell'elemento stesso; la seguente è la sintassi:
<elemento attributoEvento="istruzione Javascript">
Vediamo un esempio pratico implementando un evento onclick su un pulsante:
<input type="button" value="Invia" onclick="alert('Hai cliccato!')">
Dato che l'HTML non è un linguaggio case-sensitive (sensibile alle maiuscole ed alle minuscole) è
indifferente scrivere onClick, onclick oppure ONCLICK, ma è necessario specificare i parametri
(ad esempio il nome della funzione) con le giuste maiuscole e minuscole all'interno di un evento
(Javascript, infatti, è case-sensitive).
I principali eventi Javascript
Riporto qui sotto un elenco degli eventi e dei relativi gestori, con opportuna descrizione.
Gli eventi del tag <body>: onload, onunload, onresize e onscroll
Due eventi molto utilizzati in associazione al corpo della pagina sono onload e onunload attraverso
i quali si intercetta, rispettivamente, l'apertura e la chiusura della pagina. Vediamo qualche esempio:
<body onload="alert('Benvenuto!');">
<body onunload="alert('Torna a trovarci!');">
Da segnalare che l'evento onload può essere efficacemente applicato anche al tag <img> per
identificare il momento in cui la data immagine viene effettivamente scaricata dal browser.
Altri eventi associabili al corpo della pagina sono onresize e onscroll che servono, rispettivamente,
ad intercettare il ridimensionamento della finestra e lo scrolling al suo interno. Quest'ultimo evento,
oltre che al tag <body>, può essere associato anche ad altri elementi della pagina come, ad esempio,
un DIV con overflow:scroll.
Gli eventi legati al mouse: onclick, onmouseover, onmouseout, ecc.
L'attività del mouse è, solitamente, uno dei fattori più rilevanti all'interno di buona parte delle
applicazioni web. Un click su un elemento o il passaggio del cursore in una determinata porzione
della pagina, infatti, sono tra gli eventi più comunemente utilizzati. I più importanti di questi sono:






onclick - click col tasto sinistro del mouse;
ondblclick - doppio click col tasto sinistro del mouse;
oncontextmenu - click col tasto destro del mouse;
onmouseover - ingresso del mouse su un dato elemento;
onmouseout - uscita del mouse da un dato elemento;
onmousemove - il cursore del mouse si sta muovendo sopra un dato elemento;
Questi eventi possono essere associati ad una molteplicità di tag HTML come, ad esempio,
immagini, div, paragrafi, bottoni, ecc.
Vediamo di seguito alcuni esempi:
<img src="foto.jpg" onclick="alert('Hai cliccato la foto!')">
<img src="foto.jpg" ondblclick="alert('Hai fatto doppio click sulla foto!')">
<img src="foto.jpg" onmouseover="alert('Sei passato col mouse sulla foto!')">
<img src="foto.jpg" onmouseout="alert('Hai spostato il mouse fuori dalla
foto!')">
Gli eventi legati alla tastiera: onkeypress, onkeydown e onkeyup
Un altra serie importante di eventi è scatenata dalla pressione, da parte degli utenti, dei tasti della
tastiera del computer. Gli eventi rilevanti sono tre:
 onkeypress - generica pressione di un tasto;
 onkeydown - l'evento si scatena mentre l'utente sta premendo un tasto;
 onkeyup - l'evento si scatena quando l'utente rilascia un tasto che ha premuto;
Vediamo un esempio:
<input type="text" onkeydown="alert('hai premuto un tasto!')">
Eventi legati ai form: onsubmit, onreset, onchange, ecc.
Una altra fitta serie di eventi Javascript è quella che riguarda i form ed i loro elementi.
I due eventi che riguardano il tag <form> sono onsubmit e onreset utilizzati, rispettivamente, per
intercettare l'invio ed il reset di un modulo HTML. Esempi:
<form onsubmit="alert('Hai inviato il modulo!')">
<form onreset="alert('Hai cancellato il modulo!')">
Gli eventi che riguardano i singoli elementi dei form (input, textarea, select, ecc.) sono, invece,
molteplici. I più utilizzati sono:
 onfocus - l'elemento viene selezionato (e quindi attivato);
 onblur - l'elemento perde il focus (e quindi disattivato);
 onchange - l'elemento viene modificato nel contenuto;
Per fare un esempio: un campo input acquista il focus quando ci si clicca sopra per iniziare a
scriverci dentro, viceversa lo perde quando si clicca su un altro elemento.
Per quanto riguarda l'evento change questo è tipico delle selectbox, dei campi input e delle textarea
e si verifica quando, a seguito dell'azione dell'utente, si ha un cambiamento del loro contenuto..
Altri eventi
Oltre a quelli menzionati, Javascript supporta molteplici altri eventi legati, ad esempio, al
trascinamento di un elemento draggable o alla riproduzione di elementi multimediali. In questa
sede, tuttavia, non ritengo opportuno affrontare tematiche ulteriori a quelle "di base" e pertanto
rinvio il lettore a futuri ad ulteriori approfondimenti.
13. Creare funzioni in Javascript
Uno degli elementi chiave di un programma, in questo caso di un programma Javascript, sono la
funzioni.
Una funzione raccoglie in se tutte le istruzioni per assolvere ad un determinato compito all'interno
di un programma. Una funzione, quindi, è una parte (relativamente) autonoma di un programma in
quanto assolve ad un compito specifico che può essere ripetuto più volte in diversi punti del
programma stesso.
Organizzare un programma in funzioni consente una maggiore pulizia del codice sorgente e,
soprattutto, facilita il riutilizzo del codice e, di conseguenza, consente di creare programmi più
snelli e semplici di mantenere ed aggiornare.
La sintassi per creare una funzione in Javascript è la seguente:
function nomeFunzione(argomenti) {
istruzioni;
}
Utilizziamo la parola chiave function, assegniamo un nome alla funzione, in questo caso
"nomeFunzione" e, come si può constatare, utilizziamo le parentesi tonde subito dopo per passare
alla funzione eventuali argomenti (cioè dei dati che la funzione potrà utilizzare per la sua
elaborazione).
Si noti che il passaggio di argomenti è del tutto facoltativo, in mancanza il nome della funzione sarà
seguito da delle parentesi vuote (non essendo possibile ometterle).
Il contenuto della funzione, ovvero le istruzioni che compongono il programma, viene racchiuso tra
parentesi graffe { e }.
E' importante non dare alle funzioni nomi che indicano parole chiave utilizzate da Javascript, ad
esempio non è possibile utilizzare write() come nome di una funzione: "write", infatti, è un metodo
dell'oggetto document e creando una funzione con questo nome (o con altre parole riservate) ci
verrà restituito un errore.
E' tuttavia possibile utilizzare il nome Write() oppure WRITE(), dato che javascript è un linguaggio
case-sensitive, ovvero riconosce differenze tra maiuscolo e minuscolo: in questo modo l'interprete
non riconoscerà la funzione Write() come nome di un metodo, ma come parola "estranea" alla
sintassi Javascript e la considererà valida.
Valgono, inoltre, per i nomi delle funzioni le stesse considerazioni fatte in occasione dei nomi delle
variabili.
Parametri nelle funzioni
Un parametro è in genere un valore soggetto a variazioni, ad esempio una stringa di testo o un
numero. I parametri vengono "passati" alla funzione all'interno delle parentesi tonde che seguono al
nome della funzione. Se sono più di uno, i parametri delle funzione devono essere separati da una
virgola.
function nomeFunzione(arg1, arg2, ..., argN) {
istruzioni;
}
Facciamo un esempio di una semplice funzione per il calcolo dell'IVA su un prezzo.
function calcolaIVA(prezzo,aliquota){
var iva = (prezzo/100)*aliquota;
alert(iva + ' Euro');
}
Per richiamare la funzione:
<span onclick="calcolaIVA(100,22)">clicca qui</span>
Facendo click apparirà un alert con il valore dell'IVA applicata al prezzo passato in argomento (nel
nostro caso il risultato sarà "22 Euro").
Impostare un valore di ritorno con return
Nel nostro esempio il risultato della funzione viene mostrato all'interno di una finestra di avviso.
Molto spesso, in realtà, il frutto dell'elaborazione di una funzione viene restituito attraverso
l'utilizzo della keyword return, viene cioè restituito sotto forma di valore di ritorno.
Così facendo la funzione non si interessa del modo in cui il valore verrà eventualmente mostrato a
video... ma si limita ad effettuare la sua elaborazione ed a restituirne il risultato alla routine
principale.
Vediamo, quindi, l'esempio del nostro calcolatore di IVA modificato:
function calcolaIVA(prezzo,aliquota){
var iva = (prezzo/100)*aliquota;
return iva;
}
Per ottenere lo stesso risultato di prima, quindi, avremmo dovuto impostare l'alert() direttamente
nell'evento onclick del tag <span> in questo modo:
<span onclick="alert(calcolaIVA(100,22))">clicca qui</span>
L'utilizzo di return è molto utile quando la funzione viene utilizzata in diversi punti del programma
ed il suo risultato manipolato in modi differenti. Utilizzando return, inoltre, il risultato di una
funzione può essere utilizzato anche per valorizzare una variabile:
var tax = calcolaIVA(100,22);
14. Oggetti nativi di Javascript
Come detto nella lezione introduttiva, Javascript è un linguaggio orientato agli oggetti, questo
significa che allo sviluppatore è consentito creare degli oggetti personalizzati (come vedremo in una
delle lezioni conclusive di questa guida) e che nelle stesse API del linguaggio sono già presenti
degli oggetti nativi che vengono messi a disposizione dello sviluppatore.
In quest'ultima accezione possiamo, dunque, definire un oggetto come la parola chiave che permette
di richiamare una libreria incorporata nel browser: ma un oggetto da solo serve a poco... bisogna,
infatti, che un metodo o una proprietà vi facciano riferimento.
La sintassi corretta per separare il nome di un oggetto da un metodo o da una proprietà è:
oggetto.metodo(parametri)
oppure
oggetto.proprietà
dunque con l'utilizzo del carattere punto (.) quale elemento di concatenazione tra l'oggetto ed il
metodo o la proprietà.
I nomi dei metodi sono seguiti da parentesi tonde all'interno delle quali si "passano" dei parametri,
diversi (per numero e tipo) a seconda del caso. Le proprietà, invece, restituiscono (GET) o settano
(SET) dei valori propri dell'oggetto in questione.
Nel corso delle prime lezioni di questa guida abbiamo già visto all'opera un metodo, più
precisamente il metodo write dell'oggetto document:
document.write('Scrivo qualcosa...');
Vediamo ora un esempio circa il funzionamento delle proprietà sia per recuperare un valore (GET)
che per settarne uno nuovo (SET). Per il nostro esempio faremo riferimento alla proprietà href
dell'oggetto location:
/*
Estraggo la URL della pagina corrente
/*
var pagina = location.href;
/*
Setto una nuova URL per un redirect
*/
location.href = 'http://www.sito.com/nuova-pagina.html';
Gli oggetti nativi più importanti di Javascript sono:
 window - questo oggetto rappresenta la finestra del browser; fanno parte dell'oggetto window altri due
(sotto)oggetti:
o location - questo oggetto rappresenta la URL corrente;
o history - questo oggetto contiene la cronologia delle URLs visitate dall'utente;
 navigator - questo oggetto contiene una serie di informazioni riguardo al browser utilizzato dall'utente;
 screen - questo oggetto contiene una serie di informazioni relative alla risoluzione dello schermo
dell'utente;
 document - questo oggetto fa riferimento al documento aperto nel browser o, più precisamente, al suo
nodo radice; appartengono all'oggetto document tutti gli oggetti corrispondenti a ciascun (sotto)nodo del
documento HTML; A ciascun elemento, ancora, appartengono tutti gli oggetti corrispondenti ad eventuali
attributi;
Come avrete capito l'oggetto document è il più complicato in quanto è strutturato in vari livelli,
quindi abbiamo diversi oggetti tra loro concatenati, ad esempio:
/*
Accedo ad uno specifico nodo del documento HTML
Ad esempio recupero tutto il suo contenuto attraverso la proprietà innerHTML
*/
var contenuto = document.getElementById('mioParagrafo').innerHTML;
/*
Accedo ad uno specifico attribito di un dato nodo HTML
Ad esempio recupero il valore dell'attributo alt di un'immagine attraverso la
proprietà value
*/
var stile = document.getElementById('miaImmagine').alt.value;
In realtà la manipolazione del DOM è assai complicata e torneremo più avanti sull'argomento. Per il
momento ci si limiti a questi semplici esempi giusto per capire in che modo è strutturato l'oggetto
document.
Altri oggetti di Javascript: Date, Math, Array, RegExp
Oltre a quelli citati, Javascript dispone di altri oggetti integrati nelle API del linguaggio. Questi
oggetti sono utilizzati per svolgere operazioni comuni come, ad esempio, operazioni sulle date,
calcoli matematici, la creazione di vettori ed eseguire controlli tramite espressioni regolari.
Date, Array, RegExp necessitano di un costruttore per poter essere utilizzati:
var data = new Date();
var vettore = new Array();
var re = new RegExp();
L'oggetto Math, invece, non necessità di un costruttore. Ad esempio:
var n = 0.97;
var i = Math.ceil(n);
document.write(i);
Vedremo più approfonditamente in seguito il funzionamento di ciascuno di questi oggetti.
15. L'oggetto this di Javascript
Una parola molto importante nella programmazione Javascript è this, grazie a questo particolare
identificatore, infatti, è possibile far riferimento "a se stesso" (in inglese "this" vuol dire
letteralmente "questo").
L'utilizzo di this in Javascript differisce rispetto ad altri linguaggi orientati agli oggetti. Come detto,
infatti, Javascript non conosce il concetto di classe e pertanto non è sempre facile identificare
l'oggetto al quale this si riferisce. Il problema principale, quindi, è identificare il contesto al quale
this fa riferimento.
Utilizzare this inline
L'utilizzo più comune di this è inline all'interno cioè di un tag HTML; vediamo un esempio:
<span onclick="alert(this.tagName.toLowerCase());">clicca qui</span>
Nel nostro esempio, cliccando si aprirà un alert con all'interno la dicitura "span". Il contesto di this,
infatti, è rappresentato dal tag a cui è applicato l'evento, quindi, nel nostro esempio, il tag <span>.
Utilizzare this all'interno di una funzione
L'oggetto this, però, può essere utilizzato anche all'interno di una funzione, ma in questo caso le
cose si fanno più complesse. facciamo un esempio:
function faccioQualcosa() {
alert(this.style.color);
}
Richiamando la funzione senza associarla ad alcun oggetto:
<script>faccioQualcosa();</script>
Questa produrrebbe un errore! In mancanza di un'associazione esplicita con un oggetto, infatti, il
this si presume riferito al generico oggetto window e, pertanto, nel caso concreto finirebbe col
produrre un errore.
Vediamo un altro esempio:
document.getElementById('mioDiv').onclick = faccioQualcosa();
In questo caso la funzione, invece, produrrebbe il risultato atteso, cioè mostrerebbe - all'atto del
click - un alert con il valore della proprietà CSS "color" settata nell'attributo "style" dell'elemento
selezionato.
In questo caso, infatti, il contesto di this sarebbe lo specifico oggetto relativo all'elemento
selezionato. Il contesto, infatti, sarebbe:
document.getElementById('mioDiv')
e non più il generigo oggetto window.
Utilizzare this all'interno di un oggetto
Un altro ruolo importante di this è all'interno di un oggetto. Nell'ottica di una programmazione
orientata agli oggetti, infatti, l'oggetto this assume un significato particolare. Dentro ad un oggetto,
infatti, this fa riferimento all'oggetto stesso.
16. L'oggetto window di Javascript
E' l'oggetto principale di Javascript ed è rappresentato dall'intera "finestra" del browser. Se la
finestra è composta da una pluralità di frames (ad esempio perchè nella pagina sono presenti degli
<iframe>) il browser creerà un'oggetto window per la finestra e tanti altri oggetti window per quanti
sono i frame attivi nella pagina.
L'oggetto window è ricco di proprietà e metodi, vediamo di seguito i più utilizzati:
Proprietà dell'oggetto window





frames - (GET) restituisce un array contenente tutti i frames presenti nella pagina;
innerHeight e innerWidth - (GET) restituisce l'altezza e la larghezza interna della finestra del browser;
lenght - (GET) restituisce il numero dei frames presenti nella finestra;
opener - (GET) restituisce il riferimento alla finestra madre che ha aperto la finestra corrente (se esiste);
outerHeight e outerWidth - (GET) restituisce l'altezza e la larghezza esterna della finestra del browser
(comprende toolbar e scrollbar);
 pageXOffset e pageYOffset - (GET) restituisce il valore (in pixel) dell'eventuale scroll suall'asse
orizzontale e verticale;
 parent - (GET) restituisce il riferimento alla finestra che contiene il frame corrente;
 self - (GET) restituisce un riferimento alla finestra corrente;
 top - (GET) restituisce un riferimento alla finestra principale (utile in caso di frames incapsulati);
Metodi dell'oggetto window








alert() - mostra una finestra di avviso;
close() - chiude la finestra corrente;
confirm() - mostra una finestra di dialogo con un messaggio di richiesta conferma;
open() - apre una nuova finestra;
print() - stampa (invia alla stampante) il contenuto della finestra corrente;
prompt() - apre una finestra di dialogo dove l'utente è invitato a scrivere qualcosa in un campo testo;
scrollTo() - esegue uno scrolling automatico del documento verso le coordinate specificate.
setInterval() e clearInterval() - imposta (ed annulla) una serie di istruzioni da eseguirsi ad intervalli di
tempo prestabiliti;
 setTimeout() e clearTimeout() - imposta (ed annulla) una serie di istruzioni da eseguirsi una volta dopo
un dato intervallo di tempo;
Molti metodi dell'oggetto window saranno approfonditi in seguto all'interno di lezioni dedicate
come nel caso delle finestre di dialogo (alert, confirm e prompt) e delle temporizzazioni
(setInterval, clearInterval, setTimeout, clearTimeout). Nella prossima lezione, invece,
approfondiremo l'utilizzo del metodo open() vedendo come creare e gestire finestre a comparsa
(pop-up).
17. Gestire finestre pop-up con Javascript
In questa lezione approfondiremo la tematica legata all'oggetto window, in particolare vedremo
come creare e gestire finestre pop-up. Con questo termine si intende una finestra del browser aperta
attraverso un comando Javascript. Tali finestre possono, inoltre, avere un aspetto particolare in
quanto, con Javascript, è possibile personalizzare alcune caratteristiche della finestra come le
dimensioni, la presenza o meno della statusbar, della scrollbar, ecc.
Iniziamo col dire che per aprire una finestra pop-up con javascript si utilizza il metodo open()
dell'oggetto window. Questa la sua sintassi:
window.open('URL', 'Nome della finestra', 'Stile')
Tutti gli argomenti del metodo open() sono facoltativi quindi, in teoria, se volessimo aprire una
finestra vuota del browser basterebbe utlizzare:
window.open();
Se volessimo semplicemente impostare una URL:
window.open('http://www.mrwebmaster.it/');
Personalizziamo l'aspetto del pop-up
Attraverso il terzo parametro del metodo open() abbiamo la possibilità di personalizzare l'aspetto
della nostra finestra a comparsa. Vediamo un esempio:
function ApriPopUp(pagina) {
var stile = "top=10, left=10, width=250, height=200, status=no, menubar=no,
toolbar=no scrollbars=no";
window.open(pagina, '', stile);
}
All'interno della variabile stile abbiamo definito una serie di parametri di personalizzazione, che
sono:
 top e left - definiscono (in pixel) la posizione della finestra impostando una distanza dal margine
superiore e sinistro dello schermo;
 width e height - definiscono larghezza ed altezza (in pixel) della finestra;
 status - mostra o meno la barra di stato (yes/no);
 menubar - mostra o meno la barra dei menu (yes/no);
 toolbar - mostra o meno la barra degli strumenti (yes/no);
 scrollbars - mostra o meno le barre di scorrimento (yes/no);
Aprire un pop-up centrato nella pagina
Una delle esigenze più comuni quando si lavora con le finestre a comparsa consiste nel centrare il
pop-up nella pagina. Per farlo non esistono trucchi particolari ma è sufficiente fare quattro conti e
settare, nel modo corretto, i valori di top e di left:
function ApriPopUp(pagina,w,h) {
var t = Math.floor((screen.height-h)/2);
var l = Math.floor((screen.width-w)/2);
var stile = "top="+t+", left="+l+", width="+w+",
menubar=no, toolbar=no scrollbars=no";
height="+h+",
status=no,
window.open(pagina, '', stile);
}
Come potete vedere, in questa funzione vengono passati tre parametri:
 la URL della pagina da aprire nel pop-up;
 la larghezza del pop-up (in pixel);
 l'altezza del pop-up (in pixel);
All'interno della funzione vengono, poi, calcolati dinamicamente i valori di scostamento (top/left)
sulla base di un semplice conto matematico:
scostamento da sinistra = (larghezza dello schermo - larghezza del pop-up) / 2
Il medesimo calcolo è fatto per la determinazione dello scostamento dal margine superiore.
18. L'oggetto history di Javascript
L'oggetto history fa parte dell'oggetto window e contiene informazioni relative alla cronologia delle
URL visitate all'interno della finestra corrente.
Proprietà dell'oggetto history
Questo oggetto dispone della sola proprietà lenght che restituisce il numero delle URL presenti
nella cronologia.
Metodi dell'oggetto location
I metodi supportati dall'oggetto history sono tre:
 back() - carica la URL precedente a quella corrente (corrisponde cliccare il tasto back del browser);
 forward() - carica la URL successiva a quella corrente (corrisponde cliccare il tasto next del browser);
 go() - caraica una specifica URL tra quelle presenti in cronologia;
<span onclick="window.history.back()">vai alla pagina precedente</span>
<span onclick="window.history.forward()">vai alla pagina successiva</span>
Ovviamente questi metodi non funzionano se la cronologia è vuota o mancano, rispettivamente, una
pagania precedente o una successiva.
<span onclick="window.history.go(-2)">Torna indietro di due pagine</span>
Attraverso il metodo go() è posibile passare dei valori negativi (per tornare indietro) o positivi (per
spostarsi in avanti nella cronologia). Vale per il metodo in questione la stessa considerazione fatta
per i metodi back e forward.
19. L'oggetto location di Javascript
Attraverso l'oggetto location è possibile accedere ad informazioni relativamente alla URL corrente,
cioè la URL attualmente caricata nella finestra del browser.
L'oggetto location, come history, è figlio dell'oggetto window da cui discende direttamente.
Proprietà dell'oggetto location
Di seguito un elenco delle principali proprietà supportate dall'oggetto location:





hash - (GET/SET) restituisce o setta eventuale ancora (#) presente nella URL;
hostname - (GET/SET) restituisce o setta l'hostname della URL;
href - (GET/SET) restituisce o setta l'intera URL;
pathname - (GET/SET) restituisce o setta il path (cartella / file) della URL;
protocol - (GET/SET) restituisce o setta il protocollo della URL;
Qualche esempio:
// estraggo l'ancora di una url come questa:
// http://www.mrwebmaster.it/pagina.html#javascript
document.write(location.hash);
// estraggo l'hostname dalla URL corrente
document.write(location.hostname);
// estraggo l'intera URL
document.write(location.href);
// faccio un redirect utilizzando location.href
function vai() {
location.href = 'http://www.mrwebmaster.it/';
}
Metodi dell'oggetto location
 assign() - carica una nuova URL all'interno della finestra
 reload() - ricarica la pagina corrente;
 replace() - sostituisce la URL corrente con una nuova;
Qualche esempio:
// carico una nuova URL
location.assign('http://www.mrwebmaster.it/');
// ricarico la pagina corrente
location.reload();
// sostituisco la URL corrente con una nuova URL
location.replace('http://www.mrwebmaster.it/');
A prima vista i metodi asign() e replace() potrebbero apparire identici in realtà vi è una differenza
rilevante: con il primo viene caricata una nuova URL (e quella precedente resta nella cronologia)
mentre col secondo la URL corrente viene sostituita (e pertanto non è più raggiungibile attraverso il
tasto "back").
20. L'oggetto navigator di Javascript
Attraverso l'oggetto navigator è possibile accedere ad una serie di informazioni sul browser
utilizzato dall'utente.
Proprietà dell'oggetto navigator
Di seguito un elenco delle principali proprietà supportate dall'oggetto navigator:
 appVersion - (GET) restituisce informazioni complete sulla versione del browser in uso;
 cookieEmanbled - (GET) determina se il browser accetta o meno i cookie;
 geolocation - (GET) restituisce un oggetto geolocation che può essere utilizzato per determinare la
posizione geografica dell'utente;
 language - (GET) restituisce il linguaggio di default impostato nel browser;
 userAgent - (GET) restituisce l'user-agent completo che il browser ha inviato al server;
Qualche esempio:
// stampo a video la versione del browser
document.write(navigator.appVersion);
// stampo a video se i cookie sono abilitati
var c = (navigator.cookieEmanbled ? 'attivi' : 'disabilitati');
document.write('I cookie sono ' + c);
// verifico se il browser supporta la geolocalizzazione
if (navigator.geolocation) {
document.write('Il tuo browser supporta la geolocalizzazione');
}else{
document.write('Il tuo browser NON supporta la geolocalizzazione');
}
// stampo a video il linguaggio settato nel brwoser
document.write(navigator.language);
// stampo a video l'user-agent
document.write(navigator.userAgent);
Metodi dell'oggetto navigator
L'oggetto navigator dispone dell'unico metodo: javaEnabled() che viene utlizzato per verificare se
il browser supporta o meno Java; restituisce un valore booleano (true/false) a seconda che il
supporto di java sia attivo oppure no.
if (navigator.javaEnabled()) {
document.write('Il tuo browser supporta Java');
21. L'oggetto screen di Javascript
L'oggetto screen contiene una serie di informazioni relative allo schermo del device utilizzato
dall'utente.
Questo oggetto ha la particolarità di disporre solo di proprietà e di nessun metodo.
Proprietà dell'oggetto screen




availWidth e availHeight - (GET) restituisce le dimensioni dello schermo esclusa la taskbar;
colorDepth - (GET) restituisce la profondità del colore (bits x pixel);
pixelDepth - (GET) restituisce la risoluzione colore dello schermo (bits x pixel);
width e height - (GET) restituisce le dimensioni dello schermo;
Vediamo un esempio di utilizzo delle proprietà <em<width< em=""> e height per stampare a video
la risoluzione dello schermo del'utente:</em<width<>
var w = screen.width;
var h = screen.height;
document.write(w + 'x' + h);
NOTA: La proprietà colorDepth e pixelDepth sono, nella pratica, equivalenti. La prima è supportata
quasi universlamente mentre la seconda lo è solo dai browser più recenti.
22.L'oggetto document di Javascript e l'interazione
col DOM
Il Document Object Model (o, più brevemente, DOM) è uno standard ufficiale del W3C attraverso
il quale la struttura di un documento (come ad esempio una pagina HTML) è rappresentata sotto
forma di un modello orientato agli oggetti.
In pratica ogni elemento della struttura del documento è rappresentato sotto forma di nodo di un
elemento padre creando una sorta di "albero" in cui si creano una serie di ramificazioni. facciamo
un esempio partendo da una semplicissima struttura HTML:
<html>
<head>
<title>titolo del documento</title>
</head>
<body>
<h1>titolo H1</h1>
<p>testo testo testo</p>
</body>
</html>
La rappresentazione del DOM di questa pagina sarebbe:
 documento
o head
 title
 titolo del documento (text node)
o body
 h1
 titolo H1 (text node)
 p
 testo testo testo (text node)
Il DOM e javascript
Attraverso Javascript è possibile manipolare il DOM della pagina; ogni elemento della pagina viene
rappresentato come un oggetto il quale può essere manipolato attraverso metodi e proprietà.
L'oggetto di base per la manipolazione del DOM è document il quale rappresenta la radice del
documento nel suo complesso (cioè la pagina web). L'oggetto document è il genitore di tutti gli altri
elementi della pagina web.
Selezionare gli elementi della pagina
Attraverso l'oggetto document è possibile accedere a tutti gli elementi della pagina. Per identificare
il o gli elementi sui quali agire è necessario fare ricorso ad uno di questi metodi:
 getElementByID() - identifica un solo elemento della pagina attraverso l'attributo ID (univoco);
 getElementByTagName() - identifica un set di elementi della pagina attraverso l'indicazione dello
specifico tag (ad esempio tutti i paragrafi o tutti i link);
 getElementByClassName() - identifica un set di elementi della pagina attraverso l'indicazione di una
specifica classe;
// identifico uno specifico elemento della pagina
var testo = document.getElementById('articolo');
// all'interno di questo elemento posso selezionare, ad esempio, tutti i link
var links = testo.getElementByTagName('a');
Come potete vedere ho applicato il metodo getElementById all'oggetto document creando, a mia
volta, un nuovo oggetto (che ho chiamato "testo"). In seguito ho applicato il metodo
getElementByTagName al nuovo oggetto "testo" per identificare tutti i link presenti in quello
specifico elemento della pagina.
Modificare l'HTML del documento
Attraverso la proprietà innerHTML posso "scrivere" codice HTML all'interno di un qualsiasi nodo
della pagina. Poco sopra, infatti, abbiamo visto come effettuare la selezione degli elementi e come,
una volta selezionati, anche questi si trasformino in oggetti.
A questo punto non resta che applicare la proprietà innerHTML all'oggetto corrispondente al nodo il
cui contenuto vogliamo modificare.
var testo = document.getElementById('articolo');
testo.innerHTML = 'Scrivo codice <b>HTML</b>...';
Così facendo l'eventuale contenuto dell'elemento selezionato verrà sostituito da quello specificato
col metodo innerHTML.
Modificare il valore di un attributo
Nella lezione dedicata agli oggetti di javascript abbiamo accennato al fatto che ogni attributo si
"trasforma" in una proprietà dello specifico oggetto element a cui ri riferisce. Ne consegue che
abbiamo la possibilità di manipolare gli attributi a nostro piacimento.
Si supponga, ad esempio, di voler cambiare l'immagine sorgente (attributo src) di un tag <img>:
document.getElementById('miafoto').src = 'nuovafoto.jpg';
Modificare lo stile CSS di un elemento
L'attributo style di un oggetto element può diventare a sua volta un oggetto ed essere manipolato
attraverso una serie di proprietà corrispondenti alle proprietà dei fogli di stile. vediamo un esempio:
// imposto il colore rosso per il testo
document.getElementById('articolo').style.color = '#FF0000';
Da notare che in Javascript i nomi di alcune proprietà CSS variano leggermente quando vengono
utilizzati sotto forma di proprietà. La proprietà background-image, ad esempio, corrisponde alla
proprietà Javascript backgroundImage. In linea di massima possiamo dire che il nome delle
proprietà CSS composto da più parole separate dal trattino (come ad esempio "border-color") viene
trasformato in una stringa unica in cui la parola che segue al trattino (che viene omesso) ha la prima
lettera maiuscola (ad esempio "borderColor").
Gestire gli eventi utilizzando il DOM
Attraverso l'utilizzo del DOM è anche possibile assegnare un evento ad un dato elemento della
pagina. Ad esempio:
document.getElementById('miafoto').onclick = function(){ ... };
In questo caso l'evento Javascript si trasforma in una proprietà dell'oggetto element e, come tale,
può essere settato a piacimento.
Sempre attraverso il DOM è possibile creare degli event listener cioè dei "rilevatori di eventi"
associati a specifici elementi della pagina. Facciamo un esempio:
// assegno una funzione esterna
foto.addEventListener('click', miafunzione);
// definisco internamente al metodo le istruzioni da eseguire
document.getElementById('miafoto').addEventListener('click',
alert('...'); });
function()
{
E' possibile associare una molteplicita di event handler (anche dello stesso tipo) a ciascun oggetto.
Ad esempio, quindi, possiamo associare diverse funzioni al medesimo evento "click" sul medesimo
oggetto con ID "miafoto".
var foto = document.getElementById('miafoto');
foto.addEventListener('click', miafunzione);
foto.addEventListener('click', suafunzione);
foto.addEventListener('click', tuafunzione);
Volendo è anche possibile compiere l'operazione inversa, cioè disassociare una funzione da un dato
evento su un oggetto. Per farlo si utilizza il metodo removeEventListener in questo modo:
foto.removeEventListener('click', tuafunzione);
Creare un nuovo elemento della pagina
Per aggiungere un nuovo elemento nell'albero della pagina sarà necessario prima crearlo e poi
appenderlo al nodo nel quale o si desidera inserire. Per creare un nuovo elemento nel DOM si
utilizza il metodo createElement() specificando, come attributo, che tipo di elemento si desidera
creare. Una volta creato l'elemento sarà, ovviamente, vuoto.
Nell'esempio che segue, dopo aver creato un nuovo paragrafo, andremo a riempirlo creando un textnode al suo interno.
// creo il nuovo elemento (un paragrafo)
var nuovo = document.createElement('p');
// creo un nuovo nodo di testo per "riempire" il nuovo elemento
var testo = nuovo.createTextNode('Nuovo testo da inserire');
// appendo il nodo di testo al nuovo elemento
nuovo.appendChild(testo);
// seleziono il nodo nel quale voglio aggiungere il nuovo elemento
var articolo = document.getElementById('articolo');
// ora aggiungo il nuovo elemento al nodo selezionato all'inizio
articolo.appendChild(nuovo);
Utilizzando il metodo appendChild(), il nuovo elemento viene posizionato in fondo all'elemento
selezionato. Se non vogliamo che ciò accada ma vogliamo inserire il nuovo elemento in un punto
ben preciso abbiamo a disposizione il metodo insertBefore(). Questo metodo richiede due
parametri: il primo corrisponde al nuovo elemento da inserire, il secondo corrisponde all'oggetto
che identifica il l'elemento prima del quale effettuare l'inserzione.
Si supponga, ad esempio, che il nostro articolo sia così strutturato:
<div id="articolo">
<p id="frase1">...</p>
</div>
e si supponga di voler inserire il nuovo paragrafo subito dopo il primo. Questo il codice del nostro
esempio:
// creo il nuovo elemento (un paragrafo)
var nuovo = document.createElement('p');
// creo un nuovo nodo di testo per "riempire" il nuovo elemento
var testo = nuovo.createTextNode('Nuovo testo da inserire');
// appendo il nodo di testo al nuovo elemento
nuovo.appendChild(testo);
// seleziono il nodo nel quale voglio aggiungere il nuovo elemento
// seleziono il sotto-elemento prima del quale voglio inserire quello nuovo
var frase = articolo.getElementById('frase1');
// ora aggiungo il nuovo elemento al nodo selezionato subito prima dell'elemento
"frase"
articolo.insertBefore(nuovo,frase);
Se al posto di insertBefore() avessimo utilizzato replaceChild() avremmo sostituito la frase con ID
"frase1" con quella generata dinamicamente.
Eliminare un elemento dal DOM
Per eliminare un elemento dall'albero del DOM si utilizza il metodo removeChild(). Come lascia
intuire il nome, viene utilizzato per rimuovere un elemento figlio dell'oggetto selezionato.
Volendo tornare all'esempio visto sopra e supponendo di voler eliminare la frase con id "frase1"
avremmo utilizzato il seguente codice:
// seleziono il nodo nel quale voglio lavorare
// seleziono il sotto-elemento che desidero cancellare
var frase = articolo.getElementById('frase1');
// ora procedo all'eliminazione
articolo.removeChild(frase);
Una particolarità del DOM è che per rimuovere un elemento dalla pagina è sempre necessario
conoscere l'elemento genitore. Un "trucchetto" per ovviare a questa procedura è offerto da questo
codice:
var elimina = document.getElementById('frase1');
elimina.parentNode.removeChild(elimina);
Muoversi tra gli elementi del DOM
Come abbiamo detto il DOM è come un albero rappresentato da diversi rami, ogni punto di origine
di uno o più rami è detto nodo. Javascript disponde di diverse proprietà per muoversi all'interno dei
vari nodi di un documento HTML. Questa sono:






parentNode
childNodes[indice]
firstChild
lastChild
nextSibling
previousSibling
E' importante sottolineare che nel modello del DOM ogni blocco di testo corrisponde a un noto
(Text Node) quindi per accedere, ad esempio, al testo contenuto all'interno di una tag <p> sarà
necessario far riferimento ad un ulteriore nodo (il nodo di testo, appunto) e poi applicare la
proprietà nodeValue:
var testo = document.getElementById('frase1').firstChild.nodeValue;
In realtà, per raggiungere il nostro scopo, avremmo potuto scrivere più semplicemente:
var testo = document.getElementById('frase1').innerHTML;
Tuttavia era necessario sottolineare come, nel DOM, i blocchi di testo siano qualificati come nodi a
se stanti.
parentNode
la proprietà parentNode consente di accedere al nodo genitore dell'oggetto element corrente.
Abbiamo già visto questa proprietà all'opera poco sopra, nell'ultimo esempio relativo
all'eliminazione di un elemento dal DOM (cui vi invito a fare riferimento).
firstChild e lastChild
Queste tre proprietà consentono di accedere, rispettivamente, al primo nodo e all'ultimo elemento
figlio dell'oggetto element corrente.
childNodes
la proprietà childNodes consente di accedere ad un determinato nodo figlio specificandone l'indice
numerico (ricordiamoci che la numerazione degli indici parte da 0 e NON da 1!).
In sostanza possiamo dire che childNodes[0] è l'equivalente di firstChild.
nextSibling e previousSibling
Queste due proprietà consentono di muoversi tra i nodi "fratelli" e più precisamente consento di
accedere a quello precedente e quello successivo.
La radice del documento
Per accedere alla radice della nostra pagina HTML possiamo utilizzare la proprietà
documentElement dell'oggetto document.
Se desideriamo selezionare solo il corpo del documento, invece, possiamo utilizzare semplicemente
la proprietà body.
var radice = document.documentElement;
var corpo = document.body;
23. Gli Array in Javascript
Gli Array(), come le variabili, sono una porzione di memoria all'interno delle quali vengono
immagazzinati dei dati. Se nella variabile viene immagazzinata una specifica informazione (ad
esempio un numero, una stringa, un valore booleano, ecc.) nell'array possono essere incapsulati una
pluralità di informazioni all'interno di una sorta griglia astratta. Javascript, come tutti i linguaggi di
programmazione che si rispettino, supporta e gestisce gli array.
Definire un array
Vediamo la sintassi per la creazione di un oggetto Array() in Javascript:
var esempio = new Array();
Così facendo abbiamo definito un'array vuota.
Inserire dati nell'array
Per inserire i dati (che prendono il nome di item, elementi) in questo particolare tipo di variabile si
possono seguire due strade, la prima consiste nel dichiarare i singoli dati su più righe passando tra
parentesi quadre un numerico intero univoco identificativo di ogni singole voce, da zero a n. Ad
esempio:
esempio[0] = "primo dato";
esempio[1] = "secondo dato";
esempio[2] = "terzo dato";
Il secondo metodo, più sintetico, consiste nel passare i dati tra parentesi come parametri dell'oggetto
avendo cura di seprararli con una virgola:
var esempio = new Array("primo dato", "secondo dato", "terzo dato");
La differenza consiste sostanzialmente in una questione di ordine e di preferenze nello stile di
programmazione.
N.B. E' solo il caso di ricordare che se si tratta di stringhe sarà necessario utilizzare le virgolette per
racchiudere ogni item dell'Array, mentre se si tratta di numeri ciò non è necessario.
Leggere i dati contenuti in un array
Per estrarre un singolo elemento da un'array è necessario richiamare il nome dell'array seguita
dall'indice dell'elemento di nostro interesse:
document.write(esempio[1]);
Per leggere tutti i dati di un Array(), invece, occorre ciclarlo con l'istruzione for(), ipotizziamo il
caso precedente:
esempio[0] = "primo dato";
esempio[1] = "secondo dato";
esempio[2] = "terzo dato";
// ciclo for
for (var i = 0; i < 3; i++) {
document.write(esempio[i] + "<br>");
}
Per stampare l'output a video ci siamo serviti, come sempre, del document.write() passandogli la
variabile di tipo Array() associata al contatore [i] del ciclo, ecco l'output di questo esempio:
primo dato
secondo dato
terzo dato
La proprietà length
Si noti che nell'esempio sapevamo esattamente quanti erano gli elementi contenuti nel nostro
Array(); tuttavia può capitare di non conoscere a priori questo valore. In questo caso è possibile
calcolare dinamicamente il numero di elementi contenuti nell'array attraverso la proprietà lenght (la
stessa proprietà può essere applicata anche ad una stringa per contarne i caratteri, nel caso degli
Array() viene calcolato il numero di indici presenti).
Vediamo un esempio:
var frutta = new Array();
frutta[0] = "Mele";
frutta[1] = "Pere";
frutta[2] = "Banane";
frutta[3] = "Pesche";
// ciclo for con limite calcolato dinamicamente
for (var i = 0; i < frutta.length; i++) {
document.write(frutta[i] + "<br>");
}
Vediamo un ulteriore esempio che credo sia molto esplicativo circa il funzionamento della proprietà
length:
document.write("Ci sono " + frutta.length + " tipi di frutta");
L'output sarà:
Ci sono 4 tipi di frutta
Aggiungere ed eliminare elementi: push, pop, shift, unshift
Grazie ai metodi push e pop è possibile, rispettivamente, aggiungere ed eleiminare un elemento in
coda ad un array. Per prima cosa vediamo come utilizzare push() per aggiungere un elemento alla
fine di un array:
frutta[0] = "Mele";
frutta[1] = "Pere";
// aggiungo un elemento in coda all'array frutta
frutta.push("fragole");
La nostra array avrà i seguenti elementi:
Mele, Pere, Banane, Pesche, Fragole
Supponendo, invece, di voler eliminare l'ultimo elemento di un array si utilizza il metodo pop():
frutta[0] = "Mele";
frutta[1] = "Pere";
// elimino un elemento in coda all'array frutta
frutta.pop();
La nostra array avrà ora i seguenti elementi:
Mele, Pere, Banane
Allo stesso modo i metodi shift e unshift consentono di eliminare ed aggiungere elementi in cima
ad un array. Vediamo come aggiungere un elemento in cima ad un array con unshift:
frutta[0] = "Mele";
frutta[1] = "Pere";
// aggiungo un elemento in cima all'array frutta
frutta.unshift("fragole");
La nostra array avrà i seguenti elementi:
Fragole, Mele, Pere, Banane, Pesche
Supponendo, invece, di voler eliminare il primo elemento di un array useremo shift:
frutta[0] = "Mele";
frutta[1] = "Pere";
// elimino un elemento in cima all'array frutta
frutta.shift();
La nostra array avrà ora i seguenti elementi:
Pere, Banane, Pesche
Ordinamento di un array: sort e reverse
Lavorando con gli Array() si ha casisticamente l'esigenza di manipolare i dati in maniera diversa da
quella nativa, ad esempio ordinando i dati secondo un certo criterio o manipolandoli come una
stringa, occupiamoci ora di definire i principali metodi e le proprietà che ci permettono di stabilire
questi controlli.
Possiamo decidere di ordinare un Array() in ordine alfabetico grazie al metodo sort, vediamo un
esempio:
var nominativi = new Array();
nominativi[0] = "Gianni Rivera";
nominativi[1] = "Paolo Rossi";
nominativi[2] = "Claudio Gentile";
// ordinamento
nominativi.sort();
// ciclo for
for (var i=0; i<nominativi.length; i++) {
document.write(nominativi[i] + "<br>");
}
Nonostante l'ordine stabilito all'atto della creazione dell'Array(), ci troveremo di fronte ad una
situazione del genere:
Claudio Gentile
Gianni Rivera
Paolo Rossi
Siamo in questo modo riusciti ad ordinare i dati dell'Array() in ordine alfabetico in considerazione
della prima lettera che viete trovata nella lettura delle singole stringhe rappresentanti i valori
associati ai singoli indici dell'Array().
Grazie al metodo reverse, invece, possiamo invertire l'ordine di un Array() in senso contrario, se
riprendiamo l'esempio appena proposto e lo modifichiamo come segue:
var nominativi = new Array();
nominativi[0] = "Gianni Rivera";
nominativi[1] = "Paolo Rossi";
nominativi[2] = "Claudio Gentile";
// ordinamento
nominativi.reverse();
// ciclo for
for (var i=0; i<nominativi.length; i++) {
document.write(nominativi[i] + "<br>");
}
otterremo il seguente risultato:
Claudio Gentile
Paolo Rossi
Gianni Rivera
Concatenare due array
Il metodo concat ci permette di concatenare due o più Array(). Vediamo un esempio:
// definisco due array
var lettere = new Array('A','B','C');
var numeri = new Array(1,2,3,4,5,6);
// unisco le due array
var nuova = lettere.concat(numeri);
// ciclo for
for (var i=0; i<nuova.length; i++) {
document.write(nuova[i] + ",");
}
Otterremo
A,B,C,1,2,3,4,5,6
Convertire un array in stringa
Simili tra loro sono i metodi toString e join, la loro funzione è quella di convertire un Array() in
una stringa. Mentre toString() crea un elenco di elementi separati da una virgola, il metodo join()
permette di scegliere il o i caratteri da utilizzare per la separazione, vediamo un esempio di
entrambi:
var lettere = new Array();
lettere[0] = "A";
lettere[1] = "B";
lettere[2] = "C";
document.write(lettere.toString());
che ci restituirà:
A,B,C
var lettere = new Array();
lettere[0] = "A";
lettere[1] = "B";
lettere[2] = "C";
document.write(lettere.join('-'));
che ci restituirà
A-B-C
24. Gestire le date con Javascript
Javascript, grazie all'oggetto Date() offre una serie di potenti e preziosi strumenti per manipolare
date e orari.
Prima di addentrarci nell'analisi dei vari metodi supportati dall'oggetto Date() è bene ricordare che
attraverso Javascript è possibile lavorare facendo riferimento alla data e orario settati sul browser
dell'utente. Non è possibile, invece, utilizzare come riferimento temporale la data e l'ora settata sul
nostro server web. Il perchè di questa caratteristica è di semplice comprensione: Javascript è un
linguaggio lato-client è pertanto il suo ambito di esecuzione corrisponde al browser dell'utente e
non al web server.
Per utilizzare l'oggetto Date() è, prima di tutto, necessario creare una variabile a cui assegnare
l'oggetto attraverso l'apposito costruttore:
var miadata = new Date();
Tutti i metodi dell'oggetto saranno ora associati alla variabile al cui interno abbiamo istanziato,
appunto, l'oggetto Date().
I metodi dell'oggetto Date()
L'oggetto Date() è davvero molto ricco di metodi per la manipolazione di date e orari, in questa
sede crercheremo di analizzare i principali, ovvero:
Metodi GET
I metodi della famiglia "get" sono quelli utilizzati per recuperare un dato valore relativo ad una data
o ad un orario, i più usati sono:
 getDate() - restituisce il numero del giorno corrente nel mese (1 -31);
 getDay() - restituisce il numero del giorno corrente nella settimana (0 = domenica; 1 = lunedì; 2 =
martedì; ecc.);
 getMonth() - restituisce il numero del mese corrente (0 = gennaio; 1 = febbraio; 2 = marzo; ecc.);
 getFullYear() - restituisce l'anno corrente;
 getHours() - restituisce l'ora corrente (0 - 23);
 getMinutes() - restituisce il minuto corrente (0 - 59);
 getSeconds() - restituisce il secondo corrente (0 - 59);
 getTime() - restituisce il valore corrente del timestamp;
Vediamo un esempio:
var gg = miadata.getDate();
var mm = miadata.getMonth();
var yyyy = miadata.getFullYear();
document.write(gg + '/' + (mm+1) + '/' + yyyy);
Metodi SET
I metodi della famiglia "set" sono quelli utilizzati per modificare (nel nostro script) uno o più valori
relativi alla data o all'orario impostati nel browser, i più usati sono:







setDate() - imposta arbitrariamente il numero del giorno corrente nel mese;
setDay() - imposta arbitrariamente il numero del giorno corrente nella settimana;
setMonth() - imposta arbitrariamente il numero del mese corrente;
setFullYear() - imposta arbitrariamente l'anno corrente;
setHours() - imposta arbitrariamente l'ora corrente;
setMinutes() - imposta arbitrariamente il minuto corrente;
setSeconds() - imposta arbitrariamente il secondo corrente;
Vediamo un esempio di come settare, ai fini del nostro script, una data arbitraria:
// imposto arbitrariamente il giorno corrente al 25 del mese...
miadata.setDate(20);
// ...il mese a dicembre... Buon Natale ;-)
miadata.setMonth(11);
/*
Ora svolgo una serie di operazioni sulle date
avendo come riferimento la data impostata arbitrariamente
/*
Metodi di conversione
Si tratta di una serie di metodi utilizzati per convertire un oggetto data in qualcos'altro. I più noti
sono:
 toISOString() - converte l'oggetto data in una stringa di testo utiizzando lo standard ISO per la
definizione delle date;
 toLocaleDateString() - converte l'oggetto data in una stringa di testo contenente la sola data (non verrà
compreso l'orario) utilizzando le impostazioni locali del vostro browser (in poche parole vdrete una data
scritta in italiano, se questa è la vostra lingua ovviamente);
 toLocaleString() - converte l'oggetto data in una stringa di testo con data e orario utilizzando le
impostazioni locali del vostro browser;
 toString() - converte l'oggetto data in una stringa di testo;
Altri metodi dell'oggetto Date()
Oltre a quelli citati, l'oggetto date() dispone di altri metodi che non rientrano nelle categorie viste
sopra; il più importante di questi è sicuramente parse() il quale converte una stringa contenente una
data in un valore di timestamp.
Il metodo parse() non necessità che l'oggetto Date() venga istanziato in una variabile:
var ts = Date.parse('11 November, 2014');
25. Operazioni matematiche con Javascript
Eseguire le più comuni operazioni matematiche in Javascript è molto semplice e intuitivo. Abbiamo
già visto, in una precedente lezioni della nostra guida, quali sono e come funzionano gli operatori
matematici ma volendo fare un breve ripasso vediamo alcuni esempi di semplici calcoli effettuati
su due variabili numeriche:
var a = 12;
var b = 3;
// somma
var somma = (a + b);
// sottrazione
var sottrazione = (a - b);
// moltiplicazione
var moltiplica = (a * b);
// divisione
var divisione = (a / b);
// modulo
var modulo = (a % b);
Se effettuare semplici operazioni matematiche è estremamente intuitivo, grazie all'oggetto Math()
ci è consentito eseguire in modo piuttosto semplice anche calcoli ben più complessi come il calcolo
di logaritmi, seno, tangente, ecc.
L'oggetto Math(), infatti, dispone di una moltitudine di metodi in grado di soddisfare le esigenze dei
matematici più incalliti. Prima di passare all'analisi di detti metodi, tuttavia, vediamo la sintsassi
prevista dall'oggetto.
Come già detto in una lezione precedente, infatti, l'oggetto Math() - a differenza di Date() - non
necessita di essere istanziato ma può essere utilizzato "direttamente" in questo modo:
Math.metodo(attributo/i);
I metodi dell'oggetto Math()
Anche in questo caso i metodi sono davvero parecchi, in questa lezione passeremo in rassegna solo
i più importanti essendo alcuni di questi davvero poco utilizzati nell'esperienza della comune
programmazione.









abs(n) - restituisce il valore assoluto di un valore numerico;
ceil(n) - arrotonda un numero decimale all'intero superiore;
floor(n) - arrotonda un numero decimale all'intero inferiore;
max(a,b,c,...,n) - restitusice il valore maggiore tra tutti quelli passati in argomento;
min(a,b,c,...,n) - restitusice il valore minore tra tutti quelli passati in argomento;
pow(a,b) - restituisce il valore di a alla potenza di b;
random() - restituisce un valore numero casuale compreso tra 0 e 1
round(n) - arrotonda un numero decimale all'intero più vicino;
sqrt(n) - calcola la radice quadrata;
Math.abs(-4.5); // 4.5
Math.ceil(3.7); // 4
Math.floor(3.7); // 3
Math.max(3,11,67,5); // 67
Math.min(3,11,67,5); // 3
Math.pow(3,2); // 9
Math.random(); // 0.4300545122190121
Math.sqrt(9); // 3
26. Le espressioni regolari in Javascript
Le regular expressions (espressioni regolari) sono un potente strumento per il controllo formale
della sintassi di una stringa al fine di verificare che questa corrisponda ad un modello (pattern)
predefinito.
Le espressioni regolari sono una tecnica trasversale a quasi tutti i linguaggi di programmazione,
tant'è che alcuni sono arrivati a definire questa tecnica come uno pseudo-linguaggio vero e proprio.
La definizione di pattern richiede la conoscenza di una sintassi piuttosto complessa, abbastanza
familiare, tuttavia, a coloro che conoscono il Perl. Pur avendo tratti comuni a vari linguaggi, le
espressioni regolari variano a seconda del linguaggio utilizzato quindi modelli creati per PHP, ad
esempio, non funzionano necessariamente in Javascript (seppur vi sia una grande somiglianza).
Esempi di espressioni regolari utilizzate frequentemente
Un classico esempio di controllo di espressione regolare è rappresentato dalla verifica della corretta
formattazione sintattica dell'indirizzo email; tale verifica, in estrema sintesi, controlla che l'indirizzo
sia composto da una username, seguito dalla chiocciola (@) e dal dominio del sito/provider.
[email protected]
Altro esempio di espressione regolare piuttosto utilizzata riguarda il controllo formale dell codice
fiscale: questo è composto da 16 caratteri alfanumerici, in una sequenza "predefinita" del tipo:
AAABBB12C21D345E
Ovviamente ci sono molti altri esempi in cui è frequente ricorrere alle espressioni regolari per controllare
una stringa, normalmente si tratta di esigenze di validazione di informazioni ricevute in input dagli utenti
attraverso una querystring o un form.
Dichiarare un'espressione regolare in Javascript
Esistono due sistemi con cui è possibile dichiarare il pattern (sequenza di caratteri di controllo) di
un'espressione regolare; il primo è attraverso una semplice stringa contenuta in una coppia di
caratteri slash (/) ed il secondo attraverso l'oggetto RegExp.
La sintassi attraverso la quale definire il pattern per un'espressione regolare è la seguente:
var espressione = /pattern/;
Vediamo un esempio di pattern per verificare che una stringa sia composta solo da caratteri
alfabetici senza fare distinzione tra maiuscole e minuscole:
var espressione = /^[a-z]+$/i;
Vedremno più avanti in che modo è stato composto questo pattern, per ora limitiamoci ad osservare
come questo sia racchiuso tra i caratteri di slash e che dopo lo slash di chiusura è stata aggiunta una
"i".
Questa lattera (i) è detta modificatore ed indica al nostro programma di effettuare una ricerca NON
case sensitive (la "i" sta per ignore case), cioè di non fare differenze tra maiuscole e minuscole.
I modificatori supportati sono tre:
 i - non distingue tra maiuscole e minuscole;
 g - esegue ricerche globali, cioè non si ferma alla prima occorrenza;
 m - esegue ricerche multiline (il pattern viene confrontato con ogni linea del testo);
Come detto esiste un secondo modo per la creazione di espressioni regolari e consiste nell'utilizzo
dell'oggetto RegExp. Questo viene istanziato in una variabile un po' come accade per l'oggetto
Date():
var espressione = new RegExp('pattern');
Volendo riprodurre l'esempio visto sopra avremmo scritto:
var espressione = new RegExp('^[a-z]+$','i');
Come vedete il pattern è il primo attributo atteso dal metodo mentre l'eventuale modificatore è il
secondo.
In sostanza non ci sono differenze tra questi due sistemi dichiarativi. Negli esempi che seguiranno,
per semplicità, utilizzeremo il primo dei due sistemi descritti.
Effettuare un controllo tramite espressione regolare: il metodo test()
Per impostare il controllo di un'espressione regolare si utilizza il metodo test() dell'oggetto RegExp
il quale restituirà true in caso di successo o false in caso contrario. Vediamo la sintasi:
if (espressione.test(stringa))
{
// "stringa" è conforme all'espressione
}
else
{
// "stringa" NON è conforme all'espressione
}
Naturalmente possiamo impostare il controllo in modo inverso attraverso l'operatore logico di
negazione. Se vogliamo che il nostro programma faccia qualcosa solo se l'espressione regolare non
è verificata scriveremo così:
if (!espressione.test(stringa))
{
// avviso dell'errore...
}
il che equivale a:
if (espressione.test(stringa) == false)
{
// avviso dell'errore...
}
Vediamo un esempio concreto: supponiamo di voler verificare che l'username inserito dall'utente
sia composto solo da letteri e numeri avvisandolo (con un alert) in caso di errore:
// definisco in una variabile un username in modo arbitrario
// nella realtà recupereremo questo valore da un campo input di un form
var username = 'mario.rossi';
// imposto un modello
var re = /^[a-z0-9]+$/i;
// faccio la verifica
if (!re.test(username)) {
alert('Puoi inserire solo lettere e numeri!');
}
Estrarre le stringhe corrispondenti al pattern: il metodo exec()
Se il metodo test() restuisce semplicemente true o false, il metodo exec() restuisce la stringa
corrispondente al pattern (se trovata) oppure null (in caso di match non riuscito). Vediamo un
esempio:
// definisco una stringa
var str = 'Mr.Webmaster';
// definisco un semplice pattern per verificare
// che la stringa inizi per "Mr"
var re = /^Mr/;
var res = res.exec(str);
document.write(res);
Questo esempio stamperà a video: Mr
Costruire il pattern: la sintassi delle espressioni regolari
Veniamo adesso alla parte più difficile dell'argomento espressioni regolari, ovvero la definizione
dei pattern (sequenze di caratteri di controllo), dei costrutti sintattici e semantici.
Una volta entrati nei vari meccanismi che regolano la definizione di un'espressione regolare, più o
meno semplice o generica, risulterà molto semplice risolvere problemi apparentemente diffici,
risolvibili altrimenti con lunghe routine di controllo attraverso il linguaggio di programmazione o di
scripting utilizzato.
Abbiamo già visto più sopra un esempio che verifica che una stringa sia composta esclusivamente
da caratteri alfanumerici:
var espressione = /^[a-z0-9]+$/i;
Analizziamo la sintassi utilizzata all'interno di questa espressione regolare:





^ - indica che la stringa deve iniziare con...;
[ e ] - indicano qualsiasi carattere tra quelli al loro interno;
a-z e 0-9 - indica che la stringa può contenere tutti i caratteri che vanno da "a" a "z" e da 0 a 9;
+ - indica che la stringa deve contenere almeno uno dei caratteri tra le parentesi quadre;
$ - indica il termine della stringa;
Ipotiziamo che uno dei caratteri da controllare in un'espressione regolare sia, accidentalmente, un
metacarattere delle espressioni regolari o altro carattere speciale (come ad esempio una parentesi
quadra). Per farlo utilizzeremo il carattere back-slash (\) per isolarlo. Facciamo un esempio
supponendo di dover verificare che una data stringa contenga il carattere "^":
/\^/
Se il carattere da controllare è proprio un back-slash, utilizzeremo un doppio back-slash:
/\\/
Il primo back-slash fungerà da literal escape ed il secondo verrà interpretato come carattere
semplice e non come speciale.
Passiamo a qualcosa di più complesso. Ipotizziamo di voler verificare che in una stringa sia
presente il carattere punto che separi due blocchi alfanumerici. Ecco l'espressione regolare da
utilizzare:>/p>
var espressione = /^[a-z]+\.[a-z]/;
var stringa = "mrwebmaster.it";
if (!espressione.test(stringa))
{
document.write("La stringa non è valida!");
}
Anche in questo caso abbiamo utilizzato un backslash in quanto il carattere punto (.) ha un valore
"speciale" nella sintassi delle espressioni regolari e, se non preceduto da un backslash, euqivale a
dire "qualsiasi carattere".
Fino ad ora, nei pochi esempi trattati, abbiamo visto alcuni caratteri speciali ma in relatà ne esistono
parecchi. Vediamo di seguito un riepilogo dei caratteri speciali, dei metacaratteri e delle strutture
sintattiche utilizzati nelle espressioni regolari:
Marcatori di inizio e termine stringa:
 ^ - verifica l'inizio di una stringa (attenzione! se utilizzato all'interno di una parentesi quadra indica una
negazione);
 $ - verifica la fine di una stringa;
Metacaratteri:










. - qualsiasi carattere ad esclusione del ritorno a capo;
\w - verifica che una stringa sia alfanumerica, minuscola
\W - verifica che una stringa sia alfanumerica, maiuscola
\d - indica qualsiasi cifra numerica;
\D - indica qualsiasi carattere che non sia una cifra numerica;
\s - indica uno spazio vuoto;
\S - indica qualsiasi carattere che non sia uno spazio vuoto;
\t - indica una tabulazione;
\r - indica un carriage return;
\n - indica un linefeed;
Parentesi quadre:
 [...] - le parentesi quadre identificano range e classi di caratteri;
 [abc] - identifica qualsiasi carattere tra quelli tra parentesi quadra;
 [^abc] - identifica qualsiasi carattere ad esclusione di quelli tra quelli tra parentesi quadra (^ funge da
negazione);
 [a-z] o [0-9] - il trattino all'interno della parentesi quadra identifica un range di caratteri;
Parentesi tonde:
 (...) - le parentesi tonde identificano dei gruppi di caratteri (i gruppi diventamo fondamentali se si deve
effettuare una sostituzione mediante espressioni regolari);
 (a|b) - il simobolo | identifica un alternanza (o "a" o "b") all'interno del gruppo;
Ripetizioni di caratteri:






{x} - indica il carattere precedente per x volte
(x,} - indica il carattere precedente per x o più volte
{x,y} - il carattere precedente si ripetere x volte ma non più di y
? - indica il carattere precedente per 0 o 1 occorrenza
* - equivale a {0,}
+ - equivale a {1,}
Usare le espressioni regolari per effettuare ricerche e sostituzioni
Attraverso le espressioni regolari è possibile utilizzare anche i metodi search() e replace() tipici
delle stringhe. Nella lezione successiva vedremo, appunto, come manipolare le stringhe attraverso i
metodi e le proprietà ad esse associate.
27. Gestire le stringhe con Javascript
In occasione della lezione dedicata alle variabili, abbiamo già visto cosa sono le stringhe e come si
definisce una variabile di tipo stringa in Javascript. Nel corso di questa lezione vedremo come
manipolare la strighe attraverso le proprietà ed i metodi che Javascript mette a disposizione degli
sviluppatori.
E' bene ricordare, infatti, che l'interprete Javascript, quando ha a che fare con una stringa, la
trasforma dinamicamente in un oggetto e, pertanto, come tale può essere gestita.
La proprietà length
Esiste una sola proprietà utile par la manipolazione delle stringhe, si tratta di length che, come la
sua traduzione dall'inglese lascia ad intendere, calcola la lunghezza della stringa, nello specifico il
numero di caratteri che la compone:
var miaStringa = "Mr.Webmaster";
document.write("La stringa è composta da " + miaStringa.length + " caratteri.");
Il suo impiego torna utile, ad esempio, in fase di validazione dei form per calcolare il numero di
caratteri presenti in un campo input o in una textarea.
I metodi per la manipolazione delle stringhe
I metodi utili per la manipolazione delle stringhe sono tantissimi, in questa lezione esamineremo i
principali tra i metodi standard mentre tralasceremo volutamente tutti i metodi "non standard"
(come blink(), bold(), ecc.).
Tutti i metodi delle stringhe seguono la forma sintattica:
variabile.metodo()
pertanto non riporterò esempi per tutti i metodi essendo il costrutto identico per ognuno di essi.
Vediamo ora i metodi più utilizzati:
 chartAt() - restituisce il carattere corispondente all'indice numerico specificato; vediamo un esempio:
document.write(miaStringa.charAt(0)); // stampa a video: M
 concat() - equivale all'operatore + per concatenare all'oggetto la stringa passata in argomento;
 indexOf() - restituisce la posizione della prima occorrenza di uno specifico valore all'interno dell'oggetto
stringa (restituisce -1 se non trovato); vediamo un esempio:
var trova = miaStringa.indexOf("W");
if (trova != -1) alert("Il carattere è presente");
else alert("Il carattere non è presente");
 lastIndexOf() - restituisce la posizione dell'ultima occorrenza di uno specifico valore all'interno
dell'oggetto stringa (restituisce -1 se non trovato); è possibile specificare, come secondo argomento del
metodo, il carattere di partenza; vediamo un esempio:
miaStringa.lastIndexOf("e"); // Inizia dall'ultimo carattere
miaStringa.lastIndexOf("e", 7); // Inizia dall'ottavo carattere
 match() - effettua una ricerca all'interno dell'oggetto stringa attraverso l'espressione regolare passata
come parametro; restituisce i risultati sotto forma di array;
 replace() - sostituisce all'interno dell'oggetto la stringa passata come primo argomento con quella
passata come secondo; come secondo argomento può essere passata anche una espressione regolare;
vediamo due esempi:
/*
Esempio N.1
*/
var miaStringa = "Visita Google"
// effettuo una sostituzione semplice
document.write(miaStringa.replace('Google','Mr.Webmaster'));
/*
Esempio N.2
*/
var miaStringa = "Ho un giubbotto blu, un maglione rosso e un cappello blu";
// effettuo una sostituzione attraverso espressione regolare
document.write(str.replace(/blu/g, "verde"));
 search() - effettua una ricerca della stringa passata in argomento all'interno dell'oggetto e ne restituisce
la posizione (restituisce -1 se non trovata); come argomento può essere passata anche una espressione
regolare; vediamo un esempio:
var miaStringa = "Evviva Mr.Webmaster"
document.write(miaStringa.search('Mr.Webmaster')); // restuirà: 7
 slice() - consente di tagliare la stringa specificando il carattere di partenza e quello finale (che sono
compresi); vediamo un esempio:
document.write(miaStringa.slice(3,5)); // Verrà visualizzato ".We"
 split() - divide una stringa sulla base di un separatore e restituisce un array; vediamo un esempio:
var miaStringa = "divido la stringa in base agli spazi vuoti!";
document.write(miaStringa.split(" "));
 substr() - consente di estrarre dall'oggetto una sottostringa specificando il carattere di partenza (che
verrà incluso) ed il numero di caratteri da estrarre; vediamo un esempio:
document.write(miaStringa.substr(3,5)); // Verrà visualizzato ".Webm"
 substring() - consente di estrarre dall'oggetto una sottostringa specificando il carattere di partenza (che
verrà incluso) ed il carattere finale (che non verrà incluso nella sottostringa); vediamo un esempio:
document.write(miaStringa.substr(3,5)); // Verrà visualizzato ".W"
 toLowerCase() - converte una stringa in minuscolo;
 toUpperCase() - converte una stringa in maiuscolo;

Guida a Javascript

Transcript

Documenti analoghi

Verifica HTML-Javascript

Pagina 1 di 1 JavaScript Utility Software Suite informatore: Ultima

Esercitazione Calcolo numerico - n. 1 Javascript - Octave

JAVASCRIPT

guida javascript parte 1

javascript area del triangolo

Terza Stefano - itis magistri cumacini

Test sulle conoscenze in JAVASCRIPT

Integrazione FastBooking Hotel

progetto di applicazioni javascript full stack