javascript - F. De Sanctis

annuncio pubblicitario

JAVASCRIPT
Introduzione
Con l’HTML siamo in grado di realizzare pagine web “statiche”. Con il linguaggio Javascript, invece,
possiamo “interagire” modificando il contenuto della pagina. Il linguaggio javascript è utilizzato
esclusivamente a supporto della pagina web .
Le istruzioni Javascript si utilizzano principalmente in risposta ad “eventi” particolari degli elementi della
pagina: (CLICCARE su un pulsante o un’immagine, TRASCINARE o PASSARE il mouse sopra un elemento della
pagina, CAMBIARE il contenuto di una casella di testo, ecc). Il modo migliore di utilizzare le istruzioni
Javascript è quello di scriverle in un file apposito, di “estensione” JS, raggruppate in funzioni, e di
richiamarle nella pagina web.
Tale file è associato alla pagina web mediante il tag <script> inserito nella sezione <head> con la seguente
sintassi:
<head>
<script SRC = nomefile.js</sript>
</head>
Variabile
La variabile è uno “spazio di memoria” riservato a “contenere” dei dati. Si può quindi pensare ad una
variabile, in modo intuitivo, come ad uno speciale contenitore di dati ( numeri, stringhe o valori di verità).
Per creare una variabile si utilizza la parola riservata “var” seguita dal nome scelto per tale variabile
(identificatore).
Esempio:
var voti;
var materie ;
var miei_libri;
Osservazione:
Il nome di una variabile:

è “case sensitive”, cioè fa distinzione tra maiuscolo e minuscolo;

non può mai iniziare con una cifra;

non può essere una parola riservata (come var, if, else, for, while, ecc.)
Per assegnare un valore si utilizza il simbolo = .
Esempio:
var materie; (crea la variabile materie in modo generico senza specificarne il tipo)
materie = “italiano”; (materie “contiene” la stringa italiano)
materie = 5 ; (materie assume il valore 5)
Come si vede da questo esempio, le variabili javascript non sono fortemente tipizzate, cioè la stessa
variabile può essere utilizzata (nella stessa funzione) per tutti i tipi di dati (stringa, numero o valore di
verità). Ciò però potrebbe portare ad errori difficilmente rilevabili è quindi sempre preferibile utilizzarle
esclusivamente con la stessa tipologia di dati.
Quando si definiscono più variabili è possibile utilizzare una sola volta var e separare i nomi con la virgola
(var giorni, mesi, voti), inoltre è possibile assegnare un valore iniziale (inizializzazione) contestualmente alla
creazione (var mese = “maggio”;)
Dati Stringa
Una stringa è una sequenza di simboli della tastiera (caratteri alfanumerici). Per assegnare una stringa ad
una variabile si utilizzano le virgolette doppie ( “ ) o quelle semplici ( ‘ ) con la seguente sintassi:
var esito;
esito= “giudizio sospeso”; (è preferibile)
esito = ‘giudizio sospeso’;
Osservazione:
Un numero può essere visto come tale o come stringa.
var dato;
dato = 6; (alla variabile dato è assegnato un numero)
dato = “6”; (alla variabile dato è assegnata una stringa)
Dati Numerici
Per assegnare un valore numerico ad una variabile si utilizza la seguente sintassi:
var voto;
voto =8;
voto 3.15;
Osservazione:

Un valore numerico non deve iniziare con uno zero (se scrivo il numero con lo zero si intende la
numerazione “a base otto”);

I numeri possono essere positivi o negativi;

Il separatore decimale è il punto.
Valori di Verità
I dati di questo tipo sono solo due: true (vero) e false (falso).
Esempio:
var esito = false; (assegnazione contestuale alla creazione della variabile)
var controllo = true;
Funzioni
Possiamo definire una funzione come un insieme di istruzioni finalizzate ad ottenere un determinato
effetto sulla pagina web ed a fornire (non sempre) un risultato. Per creare una funzione si utilizza la parola
riservata function seguita da un nome scelto e da eventuali parametri racchiusi da parentesi tonde (la
parentesi sono obbligatorie anche se non si utilizzano parametri). Le istruzioni vanno scritte all’interno di
una coppia di parentesi graffe { }.
Esempio:
function MiaFunzione ( )
{
Istruzione 1;
Istruzione 2;
Istruzione 3;
.......
return istruzione 4; (questa istruzione è opzionale)
}
Operatori Aritmetici
+
è utilizzato per sommare due variabili numeriche (es. a+b);
Osservazione:
se “a” e “b” non fossero numeri, ma stringhe, tale operatore restituirebbe l’unione delle due
stringhe (le stringhe concatenate)
a = “Marco”; b = “ Rossi”;
a+b conterrà la stringa “Marco Rossi”;
-
(sottrazione);
*
(prodotto).
/
(divisione)
%
è utilizzato per ottenere il resto della divisione tra due numeri
a % b , se a = 10 e b = 3, darà 1.
Operatori di Confronto
==
(a == b controlla se a e b sono uguali, restituendo true in tal caso);
Osservazione:
l’istruzione a = b si utilizza per assegnare ad a lo stesso valore di b, non per confrontarne i valori come a
== b.
!=
(a != b controlla se a e b sono diversi, restituendo true in tal caso);
>
(a > b controlla se a è maggiore di b, restituendo true in tal caso);
>=
(a >= b controlla se a è maggiore o uguale di b, restituendo true in tal caso
<
(a < b controlla se a è minore di b, restituendo true in tal caso);
<=
(a <= b controlla se a è minore o uguale di b, restituendo true in tal caso
Esempio:
var esito, insufficienza, voto_matematica;
insufficienza = 5;
voto_matematica = 4;
esito = voto_matematica > insufficienza;
alla variabile esito è assegnato il valore dell’espressione voto_matematica > insufficienza e, poiché
tale espressione restituisce false (4 non è maggiore di 5), esito avrà valore false.
Controllo di flusso - Selezione IF ... ELSE
Le istruzioni javascript vengono eseguite in modo sequenziale (come quelle HTML), però, a differenza di
quest’ultimo, javascript mette a disposizione delle istruzioni che permettono di modificare tale ordine.
IF ... ELSE consente di valutare una determinata condizione e di eseguire delle determinate istruzioni a
seconda del valore di tale condizione, saltando ad altre istruzioni specificate con ELSE (opzionale) se tale
condizione non fosse soddisfatta. La sua sintassi è la seguente:
IF (test_condizione) {
istruzione 1;
istruzione 2;
...
}
ELSE {
istruzione 3;
istruzione 4;
...
}
Quindi se la condizione test_condizione risulta verificata verranno eseguite le istruzioni: istruzione
1, istruzione 2, ..., diversamente, se tale condizione non risultasse vera verranno eseguite le
istruzioni: istruzione 3, istruzione 4, ..., quindi i due gruppi di istruzioni delimitati dalle parentesi
graffe sono alternativi.
Esempio:
var numero, risultato;
numero = 7;
risultato = “”;
if (numero % 2 == 0)
risultato = “Pari”;
else
risultato = “Dispari”;
In questo caso abbiamo creato due variabili: numero e risultato. Inizialmente alla prima è stato
assegnato il valore 7 ed alla seconda la stringa vuota “” (all’interno delle virgolette non c’è niente).
L’istruzione if verifica se il resto della divisione di numero per 2 è uguale a 0, in tal caso alla
variabile risultato viene assegnata la stringa Pari, diversamente (se il resto non fosse uguale a 0)
alla variabile risultato avremmo assegnato la stringa Dispari.
Osservazione:
È ovvio che in questo script alla variabile risultato verrà sempre assegnato il valore Pari in quanto
numero avrà sempre valore 7. Se lo script venisse modificato in modo tale da avere valori numerici
differenti allora, conseguentemente, risultato potrebbe assumere anche il valore Dispari.
Istruzione di ripetizione FOR
L’istruzione FOR permette di eseguire un determinato gruppo di istruzioni per un numero di volte
prestabilito. Essa presenta la seguente sintassi:
FOR (inizializzazione; controllo; incremento) {
istruzione 1;
istruzione 2;
...
}
Inizializzazione è solitamente costituito da una variabile di controllo alla quale viene assegnato un
valore iniziale; controllo invece impone un limite al valore che la variabile di controllo può
assumere; incremento, infine, stabilisce come cambia il valore di tale variabile.
Esempio:
var numero, risultato;
numero = 2;
risultato = 1;
for (i = 1; i <= 3; i++)
risultato = risultato * numero;
Il seguente codice utilizza la variabile numero, con valore iniziale uguale a 2, e la variabile risultato,
inizialmente nulla. L’istruzione risultato = risultato * numero è quella che viene ripetuta tre volte:
la variabile di controllo i, inizialmente con valore 1, in ogni ripetizione viene incrementata, in
automatico, di una unità (i++ vuol dire aumentare di uno la variabile i) fino a quando essa assumerà
il valore 4. La logica è quella di ripetere una o più istruzioni fin quando una determinata condizione
è vera, in questo caso, quindi, finché i avrà valore minore o uguale a 3 ci sarà ripetizione. Quando la
variabile i avrà assunto il valore 4, poiché la condizione i <= 3 risulterà falsa, l’istruzione non sarà
più ripetuta e verranno eseguite tutte le istruzioni esterne (successive) al ciclo for.
Le variabili utilizzate, di volta in volta, avranno i seguenti valori
prima di iniziare il ciclo for:
numero = 2, risultato = 1, valore iniziale di i = 1;
dopo la prima esecuzione: i = 2 (primo incremento di i), numero = 2, risultato = 2;
dopo la seconda ripetizione: i = 3 (secondo incremento di i), numero = 2, risultato = 4;
dopo la terza ripetizione: i = 4 (terzo incremento di i), numero = 2, risultato = 8;
al momento di eseguire nuovamente il ciclo for, adesso, il controllo i <= 3 risulterà falso per cui si
uscirà dalla ripetizione.
Eventi
Come accennato nell’introduzione, javascript interagisce con una pagina web in risposta a determinati
eventi (azioni) di elementi della pagina (un pulsante, un’immagine, un link, ecc.).
I principali eventi sono:
onclick
(click con il tasto sinistro del mouse)
ondblclick
(doppio click del mouse)
onmouseover (passaggio con il mouse “sopra” un elemento)
onmouseout (quando il puntatore del mouse “lascia” un elemento)
ondragdrop
(quando si trascina un oggetto con il mouse)
onkeypress
(pressione e rilascio di un tasto della tastiera)
onhelp
(pressione del tasto F1)
onload
(apertura di una pagina web)
onchange
(si verifica quando il contenuto di una casella di testo cambia)
onfocus
(quando un elemento è momentaneamente “con il focus”, diventa attivo)
onblur
(quando un elemento “perde il focus”, non è più attivo)
Tutti questi eventi (ed altri) vengono specificati come particolari attributi di tag della pagina web,
associando ad essi una particolare funzione javascript.
Ad esempio, volendo che cliccando su una determinata immagine imma.jpg della mia pagina venga
eseguita la funzione blabla() scriverò:
<img src=imma.jpg onclick=blabla()>
Allo stesso modo, se al cambiare del contenuto di una casella di testo volessi eseguire la funzione bo(),
scriverò:
<input type=text onchange=bo()>
Si viene così a stabilire un collegamento con alcuni eventi di elementi della pagina e le funzioni javascript.
Viceversa, è possibile modificare gli attributi di alcuni elementi della pagina web mediante istruzioni
contenute nelle funzioni create con javascript. Questo è realizzabile in quanto ogni elemento di una pagina
web è identificato in modo univoco da un particolare attributo chiamato id. L’attributo id, come un nome, è
associato ad un unico elemento della pagina, perciò, richiamando l’id corrispondente da javascript,
potremmo leggere e/o modificare gli attributi di tale elemento.
Ad esempio, supponiamo che una pagina contenga il seguente elemento (casella di testo):
<input type=text id=testo1 value=”bla bla”>, quindi con id di valore testo1,
con javascript possiamo creare una variabile che rappresenti tale elemento (la casella di testo) richiamando
il suo id:
VAR casella1;
casella1=document.getElementById(“testo1”);
in tal modo, adesso, ogni modifica su questa variabile si rifletterà sulla casella di testo corrispondente.
Ad esempio:
casella1.value=”nuovo valore bla bla”, cambierà il valore di tale casella,
casella1.style.backgroundColor=”red”, cambierà il colore di sfondo in rosso,
casella1.style.color=”blue”, assegna il colore blu al testo della casella,
casella1.disabled=true, disabilita tale elemento (non sarà possibile scrivere in tale casella),
casella1.style.visibility=”hidden” (oppure “visible”) permette di nascondere (o rendere visibile) la casella di
testo.
alert(casella1.value) farà apparire una finestrella di avviso avente come messaggio il valore di casella1.
ecc.
È importante sottolineare come tali istruzioni permettano di modificare o solamente leggere i
corrispondenti attributi dell’elemento considerato (nell’esempio la casella di testo).
getElementById è una delle tante istruzioni predefinite del linguaggio javascript. Altre istruzioni di utilizzo
frequente (già utilizzate in qualche esempio) sono:
alert(“messaggio”) permette di visualizzare un messaggio di avvertimento per l’utente;
confirm(“messaggio”) consente all’utente di confermare, cliccando su “OK”, o di annullare una scelta o una
operazione. L’azione dell’utente (true o false) può essere memorizzata in una variabile:
scleta=confirm(.......;
prompt(“messaggio”, “testo iniziale”) acquisisce l’input che l’utente inserisce in una casella di testo. È
possibile far apparire in questa casella un testo predefinito.
Conclusione
La seguente guida costituisce una introduzione al linguaggio javascript, quindi è necessariamente parziale e
generica su molti aspetti di tale linguaggio. Chi volesse approfondire tale linguaggio è invitato a consultare i
manuali cartacei o le numerose dispense disponibili sulla Rete, anche gratuitamente.