JS e HTML, librerie e codice JavaScript esterno

Transcript

JS e HTML, librerie e codice JavaScript esterno
JavaScript è nato ed rimasto un importante supporto ad HTML, specie con l’avvento dello
standard HTML5. Per questo il browser rimane per esso l’ambiente d’uso privilegiato.
Anche se troviamo JavaScript un po’ ovunque dai documenti PDF, nelle applicazioni desktop
server e mobile, il browser e la “pagina Web” costituiscono ancora l’ambiente più comodo e
disponibile per sperimentare con JavaScript.
Inserire codice JavaScript in una pagina HTML
Vediamo quindi come è possibile inserire codice JavaScript in una pagina HTML. Esistono
essenzialmente tre modi per farlo:

inserire codice inline;

scrivere blocchi di codice nella pagina;

importare file con codice JavaScript esterno.
Codice inline
Il primo approccio, l’inserimento di codice inline, consiste nell’inserire direttamente le istruzioni
JavaScript nel codice di un elemento HTML, assegnandolo ad un attributo che rappresenta un
evento. Chiariamo il concetto con un esempio:
<button type="button" onclick="alert('Ciao!')">Cliccami</button>
Abbiamo
assegnato
all’attributo onclick dell’elemento button la
stringa alert('Ciao!').
L’attributo onclick rappresenta l’evento del clic sul pulsante del mouse, quindi in
corrispondenza di questo evento verrà analizzato ed eseguito il codice JavaScript
assegnato. Nel caso specifico verrà visualizzato un box con la scritta Ciao!
Un altro approccio per l’inserimento di codice inline, utilizzabile però soltanto con i link, è quello
mostrato nel seguente esempio:
<a href="javascript:alert('Ciao!')">Cliccami</a>
In questo caso indichiamo al browser di interpretare il link come la richiesta di esecuzione del
codice JavaScript specificato invece che come un collegamento ad un’altra pagina.
Blocchi di codice, il tag <script>
L’approccio inline può risultare immediato perché mette direttamente in relazione il codice da
eseguire con un elemento HTML. Risulta però scomodo quando il codice da eseguire è più
complesso o abbiamo necessità di definire variabili e funzioni. In questi casi possiamo ricorrere
al tag <script> per inserire blocchi di codice in una pagina HTML, come nel seguente esempio:
<script>alert('Ciao!')</script>
Possiamo inserire blocchi di codice (e i relativi tag <script>) nella sezione <head> o nella
sezione <body> della pagina HTML.
Nota: se il codice JavaScript interagisce con un elemento HTML, occorre assicurarsi che tale
elemento sia già stato analizzato dal parser HTML: così il corrispondente oggetto sarà
disponibile in memoria. Questo spiega il perché talvolta troviamo uno o più blocchi di codice
Il linguaggio JavaScript – Ultima versione 12/05/2015
Pagina 1
JavaScript in fondo alla pagina prima della chiusura del tag </body>. Approfondiremo il
concetto più avanti, quando parleremo degli oggetti del browser.
Il tag <script> prevede alcuni attributi come language e type, nati per specificare il linguaggio di
scripting contenuto al suo interno, ma oggi non più necessari poiché che JavaScript è il
linguaggio di scripting standard nelle pagine HTML.
JavaScript esterno
Il terzo approccio, quello più consigliato, consiste nel collegare alla pagina HTML,
codiceJavaScript presente in un file esterno. Questa tencica permette di agganciare script e
librerie in modo detto non intrusivo, con il vantaggio di una separazione netta tra la struttura del
documento e il codice, come accade per i fogli di stile CSS, che separano struttura e
presentazione.
Per inserire un file JavaScript esterno ci serviamo sempre del tag <script> in cui specificando
l’attributo src, come mostrato dal seguente esempio:
<script src="codice.js"></script>
Commenti, punti e virgola e maiuscole
Dopo aver tratteggiato i caratteri generali di JavaScript, ripassato un po’ di storia, fatto il punto
sulle attuali prospettive, visti gli strumenti di sviluppo, possiamo iniziare ad esaminare con
maggior dettaglio le caratteristiche di base del linguaggio.
Il punto e virgola in JavaScript
Anzitutto ricordiamo il codice JavaScript è composto da una sequenza di istruzioni che viene
interpretata ed eseguita. In questa sequenza, ciascuna istruzione (o blocco di istruzioni) è
delimitata da un punto e virgola (;), come nel seguente esempio:
var x = 5;
x = x + 1;
Terminare un’istruzione con il punto e virgola non è obbligatorio in JavaScript: possiamo
scrivere la sequenza precedente anche così:
var x = 5
x = x + 1
E’ comunque buona norma inserire sempre la punteggiatura di terminazione per evitare
ambiguità e risultati inattesi. Tra le altre cose, mettere il punto e virgola in fondo ad ogni
istruzione ci consente di scrivere più istruzioni sulla stessa riga:
var x = 5; x = x + 1;
JavaScript è case sensitive
Un altro aspetto sintattico da tenere in considerazione è il fatto che JavaScript è case sensitive,
cioè fa distinzione tra maiuscole e minuscole nei nomi di istruzioni, variabili e costanti.
Dimenticare questo aspetto può essere fonte di problemi quando, ad esempio, andiamo a
dichiarare una variabile con il nome MiaVariabile e poi la richiamiamo con Miavariabile. Tanto
più che normalmente un engine JavaScript non evidenzia alcun errore.
Pagina 2
Commenti in JavaScript
Come ogni linguaggio, JavaScript prevede delle sequenze di caratteri per inserire commenti
nel codice. Tutto ciò che viene marcato come commento non viene preso in considerazione
dall’interprete JavaScript. Possiamo inserire due tipi di commenti nel codice:

commento per singola riga;

commento multiriga.
Il commento a singola riga (inline) inizia con i caratteri // (doppio slash), come mostrato nel
seguente esempio:
// Questo è un commento
var x = 5;
Tutto ciò che si trova a destra dei caratteri // fino alla fine della riga verrà considerato
commento. Questo ci consente di scrivere anche commenti a fianco alle istruzioni:
var x = 5; // Questo è un commento
A differenza di quanto accade per i punti e virgola, possiamo utilizzare i commenti inline senza
preoccuparci troppo di come sarà miniaturizzato il codice: un buon minificatore tipicamente
elimina direttamente tutti tipi di commenti.
Il commento multiriga (multiline) prevede la sequenza iniziale /* (slash e asterisco) e si
conclude con */ (asterisco e slash). Tutto ciò che viene inserito all’interno di questa coppia di
terminazioni sarà considerato un commento, indipendentemente dal numero di righe utilizzate,
in classico stile C-like:
/* Questo è un commento sulla prima riga
Questo è un commento sulla seconda riga
Questa è l'ultima riga del commento */
var x = 5;
Nota:È bene tener presente che, naturalmente, non possiamo utilizzare all’interno di questo
tipo di commento la sequenza di caratteri */, perché verrebbe interpretata come fine commento.
In particolare vedremo che bisogna fare attenzione alle Espressioni Regolari in cui la
sequenza */ fa parte del linguaggio.
Spazi bianchi
Gli spazi bianchi in JavaScript non assumono significati particolari nelle espressioni e
possiamo utilizzarli per aumentare la leggibilità del codice. Unica eccezione va fatta per gli
spazi all’interno delle stringhe (che vedremo).
Pagina 3
Le finestre di dialogo
JavaScript è in grado di generare tre differenti tiplogie di “finestre implicite” (dette anche
“finestre incorporate”, “finestre modali”, o “finestre di dialogo”), che avremo modo di utilizzare
più volte nei nostri script (soprattutto l’alert).
Alert
L’alert visualizza un avvertimento, un messaggio di errore che blocca qualsiasi azione
dell’utente finché egli non dà il suo benestare cliccando sul bottone.
Sintassi di alert()
alert(messaggio)
Il contenuto dell’alert è una stringa (cioè una sequenza di caratteri), il che vuol dire che deve
essere racchiuso tra virgolette oppure che deve essere un valore che JavaScript sia in grado di
convertire in automatico in un valore letterale (come nel caso dei numeri).
Esempi di alert()
alert("Ecco il messaggio") // messaggio inserito direttamente
var messaggio = "Ecco il messaggio";
alert(messaggio); // messaggio inserito tramite variabile
Come per document.write(), in gererale per le stringhe, se bisogna usare le virgolette all’interno
del messaggio è bene che usiate i caratteri di escape (cioè il back-slash), onde evitare errori.
Testo con sequenze di escape
alert("Marco disse "Ciao Mondo!"");
Ecco un esempio di alert:
<a href="http://www.html.it" onClick="alert('Stai per uscire');"
target="_blank">testo link</a>
In questo esempio finché l’utente non clicca su “ok”, la pagina non va verso il link indicato.
Da notare le virgolette ad apice semplice dentro le virgolette ad apice doppio, per evitare di
“chiudere prematuramente” il contenuto dell’evento onClick.
Confirm
È una finestra che pone una domanda e chiede conferma dando la possibilità di scegliere tra
due opzioni (“ok” e “annulla”). La sintassi è:
confirm(“messaggio”);
Mentre l’alert concede una sola possibilità di scelta (“ok”), il confirm dà la possibilità di scegliere
tra due opzioni:
<a href="http://www.html.it" onClick="return confirm('Sei sicuro di voler uscire
dalla pagina?');" target="_blank">testo link</a>
Pagina 4
Prompt
È una finestra che pone una domanda e consente all’utente di dare la risposta che vuole. Può
avere anche un valore di risposta predefinito. La sintassi è:
prompt("domanda","risposta predefinita");
la risposta predefinita è facoltativa. Ad esempio:
<body onLoad="prompt('Come ti chiami?');">
o anche:
<body onLoad="prompt('Come ti chiami?','inserisci qui il tuo nome');">
Per visualizzare il nome dell’utente nella pagina dovremo poi “catturarlo” in qualche modo.
Vedremo più avanti come fare.
Stringhe, numeri e altri tipi di dati JavaScript
JavaScript prevede cinque tipi di dato primitivi, numeri, stringhe, booleani, null e undefined, e
un un tipo di dato complesso, gli oggetti.
Tutti gli altri elementi previsti dal linguaggio, come ad esempio gli array, le espressioni regolari,
le funzioni, sono in realtà oggetti.
A dire il vero, anche i tipi di dato “primitivi” hanno degli oggetti corrispondenti con relative
proprietà e metodi. JavaScript converte automaticamente un tipo primitivo nel corrispondente
oggetto quando utilizziamo un suo metodo o una sua proprietà. Consideriamo ad esempio il
seguente codice:
var nomeMaiuscolo = "Andrea".toUpperCase();
A partire dal tipo primitivo stringa, JavaScript crea il corrispondente oggetto String e invoca il
metodo toUppercase() per ottenere la versione in caratteri maiuscoli della stringa.
Questo contribuisce a creare non poca confusione nella distinzione tra dati primitivi e oggetti,
tanto che non sono in pochi a semplificare sostenendo che in realtà in JavaScript tutto è
oggetto.
In questa e nelle prossime lezioni ci occuperemo dei tipi di dato primitivi di JavaScript
rimandando a quando acquisiremo le nozioni fondamentali sugli oggetti per approfondire la
questione e vedere i principali metodi di gestione dei vari tipi di dato.
Stringhe in JavaScript
Una stringa in JavaScript è una sequenza di caratteri delimitata da doppi o singoli apici. Le
seguenti sono esempi di stringhe:
"stringa numero uno"
'stringa numero due'
Non c’è una regola per stabilire quale delimitatore utilizzare. L’unica regola è che il delimitatore
finale deve essere uguale al delimitatore iniziale. Questo ci consente di scrivere stringhe come
le seguenti senza incorrere in errori:
"l'altro ieri"
Pagina 5
"questa è una 'stringa'"
Un tipo speciale di stringa è la stringa vuota, cioè una stringa senza caratteri. Essa può essere
rappresentata indifferentemente come "" oppure ''.
Per inserire caratteri speciali all’interno di una stringa si fa ricorso al carattere di
escaping \(backslash). Ad esempio, per inserire un ritorno a capo possiamo utilizzare la
sequenza \n, come mostrato nel seguente esempio:
"Ieri pioveva.\nOggi c'è il sole."
La stampa di questa stringa avrà il seguente risultato:
Ieri pioveva.
Oggi c'è il sole.
Tra i caratteri speciali che possiamo inserire tramite backslash c’è lo stesso backslash, come
nel seguente esempio:
"La sequenza \\n indica il ritorno a capo"
Il primo backslash è il carattere di escaping mentre il secondo è il carattere da inserire nella
stringa. Il risultato sarà quindi:
La sequenza \n indica il ritorno a capo
Questo meccanismo ci consente di inserire lo stesso delimitatore di stringa all’interno della
stringa:
'l\'altro ieri'
"questa è una \"stringa\""
Il delimitatore preceduto dal backslash non verrà considerato come delimitatore ma come un
normale carattere.
È anche possibile inserire caratteri Unicode in una stringa utilizzando la sequenza di
escaping \u seguita dal codice esadecimale del carattere. Ad esempio, la seguente stringa
contiene al suo interno il carattere ©:
"HTML.it\u00A9 2013"
Numeri in JavaScript
JavaScript ha un unico tipo di dato numerico, cioè non c’è distinzione formale, ad esempio, tra
intero e decimale. Internamente tutti i valori numerici sono rappresentati come numeri in virgola
mobile, ma se non è specificata la parte decimale il numero viene trattato come intero.
I seguenti sono esempi di rappresentazione di numeri interi:
var interoNegativo = -10;
var zero = 0;
var interoPositivo = 123;
Per rappresentato un numero non intero facciamo ricorso al punto come separatore della parte
decimale:
Pagina 6
var numeroDecimale = 0.52;
var altroNumeroDecimale = 12.34;
var decimaleNegativo = -1.2;
var decimaleZero = 1.0;
È possibile rappresentare i valori numerici secondo la notazione scientifica:
var primoNumero = 12e3; // equivalente a 12 x 103 cioè 12.000
var secondoNumero = 3.5e-4; // equivalente a 3.5 x 10-4 cioè 0,00035
L’insieme dei numeri rappresentabili in JavaScript cade nell’intervallo compreso tra1.79769*10308 e 1.79769*10308, con una precisione pari a 5*10-324.
Ogni valore che va al di fuori dell’intervallo rappresentabile non genera un’eccezione ma viene
rappresentato da due valori speciali:

Infinity, detto anche infinito positivo,

-Infinity, detto infinito negativo.
Ogni valore che ha una precisione maggiore di quella rappresentabile viene considerata uguale
a zero.
Un altro valore numerico speciale è NaN, acronimo di Not a Number, che indica un valore
numerico non definito. Nel seguente esempio il valore della variabile x dopo l’assegnamento
èNaN:
var x = x + 1;
I tipi di dato null, undefined e booleano
JavaScript prevede due tipi di dato speciali per rappresentare valori nulli e non definiti.
Il tipo di dato null prevede il solo valore null, che rappresenta un valore che non rientra tra i tipi
di dato del linguaggio, cioè non è un valore numerico valido, né una stringa, né un oggetto.
È possibile assegnare il valore null ad una variabile come nel seguente esempio:
var x = null;
Da notare che il valore null è diverso dal valore numerico 0 o dalla stringa vuota. Infatti, questi
ultimi appartengono ai tipi numero e stringa, mentre null è un tipo a se stante.
Il tipo di dato undefined rappresenta un valore che non esiste. Anche questo tipo di dato
contiene un solo valore: undefined. Questo è il valore di una variabile non inizializzata, a cui
non è stato assegnato nessun valore, nemmeno null.
Il tipo di dato booleano prevede due soli valori: true (vero) e false (falso).
Tipizzazione debole
JavaScript è un linguaggio a tipizzazione debole o dinamica. Ciò significa che quando
dichiariamo una variabile, non ne specifichiamo il tipo di dato e che il tipo di dato che può
contenere una variabile può cambiare durante l’esecuzione dello script.
Pagina 7
Quando dichiariamo una variabile senza specificare un valore, a questa viene assegnato il
valore undefined. Il suo valore può cambiare tramite le nostre istruzioni ed assumere tipi di dato
diversi, come nel seguente esempio:
var miaVariabile;
miaVariabile = 1;
miaVariabile = null;
miaVariabile = "uno";
miaVariabile = true;
L’assegnamento di un valore può comunque avvenire direttamente nella dichiarazione:
var miaVariabile = 0;
Variabili, costanti e dichiarazioni
Come per ogni linguaggio, anche con JavaScript possiamo utilizzare le variabili per
memorizzare valori o oggetti durante l’esecuzione degli script. Una variabile è identificata da un
nome che deve rispettare alcune regole:

non deve coincidere con una delle parole chiave del linguaggio;

non può iniziare con un numero;

non può contenere caratteri speciali come ad esempio:

o
lo spazio,
o
il trattino (-),
o
il punto interrogativo (?),
o
il punto (.),
o
ecc.
Sono però ammessi:
o
l’underscore (_)
o
il simbolo del dollaro ($).
I seguenti sono esempi di nomi di variabile validi:
variabile
_variabile1
a$tro3
mentre quelli che seguono sono nomi di variabili non validi:
if
2variabili
varia.bile
Pagina 8
Ricordiamo che JavaScript è case sensitive, quindi i nomi Variabile1 e variabile1 indicano
due variabili diverse.
Dichiarazione implicita delle variabili
JavaScript non prevede la dichiarazione obbligatoria delle variabili, cioè un’operazione esplicita
di creazione. Il semplice utilizzo di un identificatore indica all’engine di creare implicitamente la
variabile, se non esiste già. Tuttavia questa pratica può favorire errori ed ambiguità.
Ecco un esempio:
variabile = 3;
Una variabile non dichiarata viene automaticamente creata al primo utilizzo ed è accessibile da
qualsiasi punto di uno script. Questo significa che in script particolarmente complessi si può
correre il rischio di utilizzare involontariamente in punti diversi variabili con lo stesso nome
generando comportamenti non previsti.
È opportuno pertanto dichiarare sempre una variabile tramite la parola chiave var:
var miaVariabile;
Espressioni e operatori
Un’espressione è una combinazione di valori, variabili ed operatori che rappresentano un
nuovo valore. Ad esempio, la seguente è un’espressione:
x + 1
Nel caso specifico si tratta di un’espressione che combina una variabile x ed il valore
numerico 1 tramite l’operatore + (più) per ottenere l’incremento di un’unità del valore di x.
È evidente che un ruolo fondamentale nelle espressioni è assunto dagli operatori, dal momento
che determinano il valore risultante dell’espressione.
Possiamo classificare gli operatori in base al numero di valori che possono combinare e in base
al tipo di dati su cui possono operare.
JavaScript prevede operatori unari, binari e ternari a
rispettivamente uno, due o tre valori.
seconda
che
possano
combinare
Operatori aritmetici
Per quel che riguarda il tipo di dato numerico, abbiamo gli operatori aritmetici, che
consentono la combinazione di valori numerici. Si tratta di operatori binari corrispondenti ai
classici operatori matematici:
Operatore
Nome
Pagina 9
+
addizione
-
sottrazione
/
divisione
*
moltiplicazione
%
modulo o resto
Le seguenti sono esempi di espressioni che usano operatori aritmetici:
9/4
9%4 + 5
x + 10
Gli operatori aritmetici seguono le regole di precedenza matematiche e, come in matematica,
possiamo utilizzare le parentesi (ma soltanto quelle tonde) per modificare il loro ordine di
valutazione:
4 + 5 * 6 + 7
(4 + 5) * (6 + 7)
Il valore della prima espressione è 41 mentre la seconda espressione vale 117.
Gli operatori aritmetici prevedono anche tre operatori unari:
Operatore
Nome
Pagina 10
-
negazione
++
incremento
--
decremento
La negazione consente di ottenere un valore negativo di un numero. Ad esempio, -x è il valore
negativo del valore numerico rappresentato dalla variabile x.
Gli operatori di incremento e decremento sono applicabili soltanto a variabili e consentono di
ottenere un valore rispettivamente aumentato o diminuito di uno. È molto importante la
posizione dell’operatore. Infatti, se l’operatore si trova a sinistra dell’operando, l’operazione di
incremento o decremento viene eseguita prima della valutazione dell’espressione, mentre se si
trova a destra l’operazione viene eseguita dopo. Chiariamo il concetto con un esempio:
var x = 3;
var y = ++x;
La variabile x verrà prima incrementata di uno ed il risultato verrà assegnato alla variabile y.
Quindi la situazione finale vedrà x e y con il valore di 4. Nel seguente caso, invece:
var x = 3;
var y = x++;
il valore della variabile x verrà assegnato alla variabile y e soltanto successivamente x verrà
incrementata di uno. Come risultato avremo x con il valore di 4 e y con il valore di 3.
Operatori relazionali
Gli operatori relazionali sono quegli operatori utilizzati per il confronto tra valori (e stabilire una
“relazione d’ordine”):
Operatore
Nome
Pagina 11
<
minore
<=
minore o uguale
>
maggiore
>=
maggiore o uguale
==
uguale
!=
diverso
===
strettamente uguale
!==
strettamente diverso
Le espressioni che utilizzano gli operatori relazionali restituiscono un valore booleano in base
all’esito del confronto. Ad esempio:
4 > 2
// true
5 != 4 + 1
//false
Pagina 12
Il significato della maggior parte degli operatori dovrebbe essere abbastanza intuitivo. Per
quanto riguarda il significato degli operatori === e !==, questi verranno approfonditi quando
parleremo delle conversioni di tipo.
Gli operatori logici consentono la combinazione di espressioni booleane. JavaScript prevede
due operatori binari e un operatore unario:
Operatore
Nome
&&
and
||
or
!
not
Le seguenti sono espressioni che utilizzano operatori logici:
5 > 2 && 3 != 4
true || 4 >= 6
!5==5
// true
// true
// false
La combinazione di operatori logici con altre espressioni può essere insidiosa, nel senso che le
regole di precedenza nella valutazione possono generare valori diversi da quelli attesi. È
opportuno pertanto utilizzare le parentesi per indicare esplicitamente l’ordine di valutazione e
per renderle più leggibili. Le espressioni precedenti diventano pertanto:
(5 > 2) && (3 != 4)
true || (4 >= 6)
// true
// true
Pagina 13
!(5==5)
// false
Operatori di assegnamento
Un discorso a parte va fatto per gli operatori di assegnamento. Abbiamo già avuto modo di
vedere informalmente l’operatore = che ci consente di assegnare il valore di un’espressione ad
una variabile. A prima vista questo operatore non sembrerebbe dar luogo ad alcuna
espressione. Esso copia semplicemente il valore di un’espressione nella variabile.
In realtà, la copia del valore nella variabile può essere considerata un effetto collaterale.
L’espressione di assegnamento restituisce essa stessa un valore: il valore dell’espressione
assegnata alla variabile. Il valore del seguente assegnamento, ad esempio:
x = 3 + 5;
è lo stesso valore dell’espressione 3 + 5. Questo vuol dire che possiamo avere espressioni
analoghe alla seguente:
y = (x = 3 + 5);
dove y assumerà lo stesso valore di x, cioè 8.
L’uso di espressioni di questo tipo può essere talvolta fonte di bug molto subdoli, soprattutto per
chi si avvicina per la prima volta a JavaScript e non proviene da esperienze di programmazione
in C, C# o Java. Ad esempio, la seguente espressione avrà come valore sempre "cinque",
indipendentemente dal valore di x:
x = 5 ? "cinque" : "diverso da cinque"
Operatori su stringhe
Oltre agli operatori di assegnamento, logici e relazionali, che sono previsti per tutti i tipi,
l’unicooperatore su stringhe specifico è l’operatore di concatenazione. Esso consente di
creare una nuova stringa come risultato della concatenazione di due stringhe ed è
rappresentato dal simbolo del “più” (+):
"piano" + "forte" // "pianoforte"
Funziona anche nella sua forma compatta per accodare una stringa ad un’altra:
var strumento= "piano";
strumento += "forte";
// strumento = "pianoforte"
Il suo utilizzo è abbastanza immediato, ma con le variabili si possono ottenere risultati non
previsti dal momento che il simbolo utilizzato è lo stesso dell’addizione. Ad esempio, nella
seguente espressione:
x + y
Pagina 14
parseInt e parseFloat
Se non si può evitare il confronto tra tipi diversi, è opportuno convertire esplicitamente un valore
di un tipo in un altro tipo, ricorrendo ad alcune funzioni predefinite.
Ad esempio, la funzione parseInt() converte una stringa in un valore intero. La funzione
prevede due parametri: il primo è la stringa da convertire, mentre il secondo è opzionale e
indica la base del sistema di rappresentazione numerica utilizzato. I seguenti sono esempi di
utilizzo della funzione:
parseInt("12")
// 12
parseInt("12abc")
// 12
parseInt("a12bc")
// NaN
parseInt("12.5")
// 12
parseInt("12", 8)
(base 8), cioè 10
// il valore di 12 nel sistema di numerazione ottale
Da notare come la presenza di caratteri non numerici in coda alla stringa venga ignorata,
mentre impedisce di fatto la conversione se questi si trovano all’inizio.
La funzione parseFloat() restituisce un valore numerico considerando l’eventuale virgola:
parseFloat("12")
parseFloat("12.5")
//12
//12.5
È possibile effettuare conversioni esplicite tra gli altri tipi di dato ricorrendo agli oggetti, come
vedremo più avanti.
If, istruzioni condizionali e blocchi di codice
Come è noto, un programma (o uno ‘script’) è una sequenza di istruzioni eseguite dall’engine
JavaScript. Le istruzioni altro non sono che un flusso di comandi che stabiliscono il
comportamento del sistema per portarlo da uno stato iniziale ad uno stato finale. In altre parole
il programma ci permette di descrivere un algoritmo che ci permette di raggiungere un certo
obiettivo o ottenere un determinato risultato.
Abbiamo iniziato ad osservare come assegnare valori alle variabili e come operare su numeri e
stringhe con JavaScript per creare espressioni e fare calcoli. In questa lezione e nelle
successive esaminiamo alcune istruzioni che ci aiutano a stabilire il flusso di esecuzione del
nostro programma, per descrivere al meglio i nostri algoritmi e controllare il flusso
dell’esecuzione.
Blocchi di codice
Più istruzioni possono essere raggruppate in blocchi che fungono come una singola istruzione. I
blocchi di codice sono importanti quando si vuole evidenziare che un gruppo di istruzioni deve
essere eseguito interamente, ad esempio in seguito alla valutazione di una condizione.
Un blocco di codice è racchiuso tra parentesi graffe come nel seguente esempio:
Pagina 15
{
x = x + 3;
y = x * 2;
}
Al termine di un blocco di codice non va inserito il punto e virgola. Questa è l’unica eccezione
all’uso del punto e virgola come delimitatore di istruzioni.
Istruzioni condizionali: if
Le istruzioni condizionali sono una categoria di istruzioni che consentono di eseguire blocchi di
codice alternativi in base ad una condizione, consentendo ad uno script di prendere, in un certo
senso, delle decisioni. JavaScript prevede due istruzioni condizionali: if e switch.
Possiamo trovare l’istruzione if in tre forme:
 if semplice;
 if con alternativa (if..else);
 if a cascata (if..else if…else).
if semplice
La forma if pura esegue un blocco di codice solo se una condizione è vera. Il suo schema
sintattico è:
if (condizione) {
// istruzioni
}
dove condizione è un’espressione booleana e istruzioni rappresenta appunto la sequenza di
istruzioni da eseguire nel caso in cui la condizione sia vera. Il seguente è un esempio di utilizzo
di questa forma di if:
if (x >= 37) {
messaggio = "Hai la febbre.\n";
messaggio = messaggio + "Temperatura: " + x + " gradi."
}
Se il blocco associato all’if è composto da una sola istruzione è possibile non inserire le
parentesi graffe:
if (x >= 37)
Pagina 16
messaggio = "Hai la febbre.\nTemperatura: " + x + " gradi.";
In questo caso è consigliabile aggiungere il punto e virgola finale.
if…else
La seconda forma è l’if...else. In questa forma viene eseguito un blocco di codice oppure un
altro in base al valore della condizione. Lo schema sintattico si presenta così:
if (condizione) {
// istruzioni1
} else {
//istruzioni2
}
Se condizione è vera vengono eseguite le istruzioni del blocco istruzioni1 altrimenti viene
eseguito il blocco istruzioni2. Ecco un esempio di uso di questa forma:
if (x%2 == 0) {
messaggio = x + " è pari";
} else {
messaggio = x + " è dispari";
}
While e do-while, le iterazioni base
Un’altra categoria di istruzioni comunemente usata nei linguaggi di programmazione è
rappresentata dalle iterazioni o cicli. JavaScript prevede le classiche istruzioni di iterazione
come while e for.
Di seguito lo schema sintattico del while:
while (condizione) {
Pagina 17
// istruzioni
}
Finché condizione sarà vera verranno eseguite le istruzioni contenute nel blocco di codice.
Requisito fondamentale nell’uso del while è che le istruzioni contenute nel blocco di codice
modifichino la condizione, altrimenti si rischia di incorrere in un ciclo infinito.
Questo è un esempio di utilizzo dell’istruzione while:
var y = 1;
var i = 1;
while (i <= 4) {
y = y * i;
i++;
}
Queste istruzioni calcolano il fattoriale di 4 implementando un ciclo che moltiplica gli interi
minori o uguali a 4. Da notare come l’incremento della variabile i garantisca l’uscita dal ciclo, dal
momento che al superamento del valore 4 renderà la condizione falsa.
do-while
Una variante del while è il do…while:
do {
// istruzioni
}
while (condizione)
La differenza sostanziale rispetto al while classico consiste nel fatto che la condizione viene
valutata dopo aver eseguito le istruzioni. Questo garantisce che il blocco di codice verrà
eseguito almeno una volta.
I cicli for
Una alternativa al while è l’istruzione for. Questa istruzione è generalmente intesa per
l’esecuzione di un blocco di codice un numero determinato di volte, ma a ben vedere il for in
Pagina 18
JavaScript ha sostanzialmente la stessa semantica del while. Vediamo il suo schema
sintattico:
for (inizializzazione; condizione; modifica) {
// istruzioni
}
 inizializzazione: JavaScript esegue l’istruzione specificata
in inizializzazione prima di avviare le iterazioni (il ciclo).
 condizione: è l’espressione booleana che viene valutata prima di
eseguire ciascuna iterazione. Se è falsa non viene eseguito il blocco di
istruzioni associato al for. Se invece la condizione è vera viene eseguito
il blocco di codice.
 modifica:
al
termine
di
ciascuna
iterazione
viene
eseguita
l’istruzione modifica (la più classica è l’incremento di un contatore). Il
ciclo poi ricomincia con la valutazione della condizione.
Come per il while, anche in questo caso è nostra responsabilità fare in modo che la condizione
cambi ad ogni passo per garantire l’uscita dal ciclo.
Vediamo come riprodurre l’esempio fatto per il while, utilizzando il costrutto for:
var y = 1;
var i;
for (i = 1; i <=4; i++) {
y = y * i;
}
Abbiamo trasposto gli elementi del while all’interno dello schema sintattico del for.
Come abbiamo detto, il for è generalmente comodo per effettuare operazioni sugli array,
ciclando tra gli elementi.
Vediamo un esempio in cui vengono sommati gli interi contenuti in un array:
var quantita = [12, 34, 45, 7, 19];
var totale = 0;
var i;
Pagina 19
for (i = 0; i < 5; i++) {
totale = totale + quantita[i];
}
Inizializzazioni multiple o vuote
L’istruzione for è
molto
flessibile,
infatti
possiamo
inserire
nelle
sezioni inizializzazione emodifica anche gruppi di istruzioni separati da virgole. Ad esempio,
possiamo riscrivere il codice dell’esempio precedente nel seguente modo:
var y;
var i;
for (i = 1, y = 1; i <=4; i++) {
y = y * i;
}
In realtà nessuna sezione è obbligatoria. Possiamo quindi, ad esempio, scrivere il nostro
ciclo in questo modo del tutto equivalente:
var y = 1;
var i = 1;
for (; i <=4; i++) {
y = y * i;
}
fino ad arrivare ad una situazione del genere sintatticamente quasi identica al while:
var y = 1;
var i = 1;
for (; i <=4;) {
Pagina 20
y = y * i;
i++;
}
Funzioni in JavaScript: i fondamentali
Le funzioni in JavaScript hanno un ruolo importantissimo, sono definite a partire da una
modalità (o paradigma) di programmazione che prende le mosse dal concetto di funzione in
matematica e come vedremo permettono di definire gli oggetti.
Tuttavia tra i tanti modi di definire una funzione scegliamo qui quello forse più pragmatico:
una funzione è un insieme di istruzioni racchiuse in un blocco di codice, che può essere
contraddistinto da un nome, può accettare argomenti o parametri di ingresso e restituire valori
Se la funzione ha un nome, esso servirà come riferimento per richiamare ed eseguire la
funzione stessa, in qualunque punto del programma. Esistono però anche funzioni anonime, di
cui parleremo più avanti.
A questo punto, secondo questa prima definizione, l’utilizzo di una funzione all’interno di uno
script prevede due fasi:

una fase di definizione o dichiarazione della funzionein cui si assegna un
nome ad un blocco di codice;

una fase di invocazione o chiamata in cui il blocco di codice viene
eseguito.
Definire una funzione
Lo schema sintattico per la definizione di una funzione in JavaScript è il seguente:
function nome(argomenti) {
// istruzioni
}
La parola chiave function evidenzia che stiamo dichiarando una funzione il cui nome segue le
stesse regole dei nomi di variabili. Gli argomenti sono una lista opzionale di variabili separati da
virgole che verranno utilizzate all’interno del corpo della funzione, cioè il blocco istruzioni.
Una volta dichiarata, una funzione non viene eseguita subito. Stiamo semplicemente dicendo
all’engine JavaScript che al blocco di codice indicato viene assegnato un nome.
Invocare una funzione
L’esecuzione vera e propria avviene con l’invocazione o chiamata, il cui schema sintattico è:
Pagina 21
nome(valori);
dove nome è il nome della funzione e valori è una lista opzionale di espressioni separata da
virgole.
Gli eventuali valori inseriti nella chiamata di una funzione vengono passati, cioè assegnati, ai
corrispondenti argomenti della definizione della funzione.
L’istruzione return
Nel corpo della funzione può essere presente l’istruzione return che consente di terminare e
restituire un valore al codice che l’ha chiamata. Questo ci consente di assegnare ad una
variabile il valore restituito da una funzione o utilizzare una funzione all’interno di una
espressione.
Esempi di funzioni
Vediamo qualche esempio di definizione e chiamata di funzione:
function somma() {
var z = 11 + 5;
return z;
}
var risultato = somma();
In questo esempio abbiamo definito una funzione senza argomenti che somma due interi e
restituisce il risultato. L’invocazione della funzione fa sì che venga eseguita la somma ed il
risultato venga assegnato alla variabile risultato.
La funzione somma() che abbiamo definito può essere utilizzata in qualsiasi espressione e verrà
trattata da JavaScript come un valore numerico:
var risultato = 5 + somma() * 2;
In questo esempio l’invocazione somma() sarà equivalente al valore 16, per cui la variabile
risultato avrà valore 37.
Argomenti o parametri di una funzione
La funzione somma() che abbiamo definito prima è in grado di sommare soltanto i due numeri
fissati nel blocco di istruzioni. Per renderla più generale è opportuno introdurre due argomenti
che rappresenteranno i numeri da sommare:
function somma(x, y) {
var z = x + y;
Pagina 22
return z;
}
In questo caso i valori da sommare verranno passati alla funzione somma() al momento
dell’invocazione:
var risultato = somma(11, 5);
Parametri opzionali
Come abbiamo avuto modo di vedere, JavaScript è un linguaggio molto flessibile e questa sua
flessibilità ci consente di fare delle cose che talvolta possono apparire abbastanza strane. Ad
esempio, a proposito degli argomenti di una funzione, non è obbligatorio passarli tutti in una
chiamata di funzione.
In altre parole, data la definizione della funzione somma() con i due argomenti da sommare,
possiamo invocare la funzione nei seguenti modi:
var risultato1 = somma(11);
var risultato2 = somma();
var risultato3 = somma(11, 5, 7, 9);
Queste tre invocazioni della funzione somma() potrebbero apparire errate, ma non generano
nessun errore in JavaScript. In particolare, nel primo caso specifichiamo un solo argomento, il
che assegna automaticamente al secondo argomento mancante il valore undefined restituendo
come somma il valore NaN. Lo stesso ragionamento vale per il secondo caso, dove non
passiamo alcun argomento.
Nel terzo caso, invece, passiamo più argomenti di quelli previsti nella definizione della funzione.
JavaScript ignorerà gli argomenti in più restituendo lo stesso risultato di somma(11, 5).
Pagina 23

JS e HTML, librerie e codice JavaScript esterno

Transcript

Documenti analoghi

Esercitazione Calcolo numerico - n. 1 Javascript - Octave

Integrazione FastBooking Hotel

Test sulle conoscenze in JAVASCRIPT

javascript area del triangolo

Poi entrare nelle configurazione dalla rete Guglielmo cliccando sulla

LINGUAGGI DI PROGRAMMAZIONE - HTML5 E CSS3 - Forma-re-te

1 Servizio di ricerca percorsi

UI Designer - Giacomo Paita

Doc 15-05-14 VB LICEO PROGRAMMI