docguida javascript parte 1
download 
Reclamo Transcript
guida javascript parte 1
Javascript concetti fondamentali
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 propri "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.
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.
L'articolo continua dopo la pubblicità
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>
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");
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;
Questa sintassi euqivale a:
x = x - y;
*=
E' un operatore di moltiplicazione e viene usato così:
x *= y;
Questa sintassi euqivale a:
x = x * y;
/=
E' un operatore divisionale e viene usato così:
x /= y;
Questa sintassi euqivale a:
x = x / y;
%=
E' un operatore modulare e viene usato così:
x %= y;
Questa sintassi euqivale a:
x = x % y;
variabili locali e variabili 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".
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.
L'articolo continua dopo la pubblicità
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
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".
L'articolo continua dopo la pubblicità
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!");
}
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
sotto-condizioni; 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
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".
I cicli in Javascript: for, while e do-while
Per una serie di motivi che scopriremo nel corso di questa lezione, 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++) {
document.write('Conto: ' + 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 {
document.write('Conto: ' + i);
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!
