Corso base css e html
di Carlo Inserra email: inserracarlo@gmail.com
Le iterazioni
Iterazione
L'iterazione è una struttura di controllo (come la selezione) che permette l'esecuzione di una
sequenza di una o più istruzioni fino al verificarsi di una data condizione.
Le iterazioni
Cicli con condizione
La forma più semplice di ciclo è composta da una condizione valutata inizialmente e ad un blocco
di istruzioni eseguito sino a quando la condizione iniziale non risulti false. In JavaScript usiamo in
questo caso un ciclo while la cui sintassi è:
while (condizione)
{
istruzioni;
}
Quando JavaScript incontra questa struttura:
1. valuta il valore booleano di condizione. Possiamo avere quindi due casi:
1. se è vero, esegue il blocco di istruzioni delimitato dalle parentesi graffe e quindi
ricomincia dal punto 1
2. se è falso, salta al punto 2
2. prosegue la lettura delle istruzioni successive
Le iterazioni
Si noti che:
• è possibile che il blocco di istruzioni non venga mai eseguito. Questo è possibile se il valore
della condizione iniziale è falso già dalla sua prima valutazione
• se il blocco di istruzioni non modifica in qualche modo le variabili che intervengono nella
condizione iniziale, può accadere che questo venga ripetuto all'infinito
Le iterazioni
Esiste poi la possibilità di porre la condizione alla fine del blocco di istruzioni; in questo caso si è
sicuri che questo verrà eseguito almeno una volta. La sintassi è:
do
{
istruzioni;
} while (condizione)
Le iterazioni
Esiste poi la possibilità di porre la condizione alla fine del blocco di istruzioni; in questo caso si è
sicuri che questo verrà eseguito almeno una volta. La sintassi è:
do
{
istruzioni;
} while (condizione)
Le iterazioni
Vediamo un esempio pratico
Creo un programma che stampa la sequenza dei numeri da uno a dieci
let x = 1;
do {
console.log(x);
x++;}
while (x < 11)
Le iterazioni
let x = 1;
do {
console.log(x);
x++;}
while (x < 11)
Vediamo il codice:
Innanzitutto inizializziamo una variabile x con il valore 1;
Successivamente facciamo partire l’iterazione:
diciamo
stampa la x fino a quando (while) x non diventa 10 (<11)
L’ultima istruzione nel do (x++) va a incrementare di una unità il valore della x, e lo fa per ogni passaggio dell’iterazione
Le iterazioni: ciclo for
Cicli con contatore
JavaScript, come molti altri linguaggi programmazione, offre la funzionalità di cicli con un
contatore che viene incrementato o decrementato ad ogni ripetizione. La sintassi è:
for (condizione_iniziale; condizione_finale; incremento_contatore) {
istruzioni;
}
Ad esempio:
for (var i = 1; i <= 10; i++) {
console.log("i = " + i);
}
Le iterazioni: ciclo for
Ad esempio:
for (var i = 1; i <= 10; i++) {
console.log("i = " + i);
}
Il risultato sarà uguale a quello di prima
ad ogni passaggio dell’iterazione che va da (var i = 1) a (i <=10) quindi in pratica da uno a dieci il programma stampa i = più il valore della i
Le iterazioni: ciclo for
È possibile inoltre fare in modo che il contatore venga incrementato di più di un'unità al secondo:
for (var i = 1; i <= 20; i+=2) {
console.log("i = " + i);
}
Questo codice mostra sempre i primi 10 numeri pari
Gli array
In informatica, un array (o vettore) è un tipo di dato strutturato (non semplice, che dispone quindi di
altri parametri) che permette di organizzare i dati secondo un indice; in pratica, lo stesso oggetto
contiene a sua volta numerosi valori, ciascuno dei quali contrassegnato da una chiave numerica.
Questo concetto può essere rappresentato da un tabella a singola entrata:
Gli array
Come è stato già detto, per creare un vettore in JavaScript facciamo riferimento alla classe Array:
let vettore = new Array (); //crea un array vuoto
Il costruttore della classe può essere tuttavia usato in maniere differenti:
let vettore = new Array (5); //crea un array contenente 5 elementi
let vocali = new Array ("A", "E", "I", "O", "U"); //crea un array contente le
vocali
let lettere_straniere = ["J", "K", "W", "X", "Y"]; //metodo breve
Gli array
Per accedere ad un elemento dell'array, per leggerlo o modificarlo, usiamo la notazione:
vettore[indice]
Ad esempio, facendo riferimento alla variabile vocali, avremo questa tabella:
Gli array
Quindi con console.log(vocali[0]); stampiamo a
con console.log(vocali[1]); stampiamo b
e con console.log(vocali[3])?????
Gli array
Quindi con console.log(vocali[0]); stampiamo a
con console.log(vocali[1]); stampiamo e
e con console.log(vocali[3])?????
Gli array
Con la sintassi
vocali[1] = “ciao”;
andiamo a sostituire il valore dell’array in posizione 1 (cioè e) con la stringa “ciao”
Gli array
Da notare che la chiave dell'array è numerica e parte da 0 e che il valore di ciascun elemento può
essere di qualsiasi tipo di dato, ciascuno diverso dall'altro.
Gli array
L'oggetto Array dispone di una sola proprietà interessante, length, che restituisce il numero di
elementi in esso contenuti (contando anche quelli vuoti); da notare che, poiché gli indici partono da
0, un array di 5 elementi avrà gli elementi con le chiavi 0, 1, 2, 3 e 4.
Gli array
è possibile iterare su tutti gli elementi di un array con un
ciclo particolare; ad esempio, volendo azzerare il valore di tutti gli elementi di un array, possiamo
usare il codice:
var a = new Array ("A", "E", "I", "O", "U");
for (indice in a) {
a[indice] = ""; //annulla il valore
}
//ora l'array contiene 5 elementi tutti vuoti
Le funzioni
Una funzione è un programma che troviamo in molti ambiti:
pensiamo alle funzioni di excel, una tra tutte il calcolo della somma di una serie di celle.
La funzione come si comporta: prende come parametro una serie di dati e li manipola per restituire un risultato a noi congeniale
Le funzioni
Anche in javascript abbiamo le funzioni:
la sintassi è sempre la seguente
function nome_della_funzione(){
}
quindi la prima cosa da fare quando scriviamo una funzione e scrivere la parola chiave function
Le funzioni
Anche in javascript abbiamo le funzioni:
la sintassi è sempre la seguente
function nome_della_funzione(){
}
Come seconso step, andiamo a scrivere il nome della funzione per cui valgono le stesse regole che abbiamo visto per i nomi delle variabili
Le funzioni
Anche in javascript abbiamo le funzioni:
la sintassi è sempre la seguente
function nome_della_funzione(){
}
le parentesi, vanno messe obbligatoriamente, sia nella dichiarazione della funzione e sia quando andiamo a fare una sua “invocazione”, ad esempio dopo la pressione di un bottone nell’attributo onclick.
In ogni caso vanno messe le parentesi. Che, come vedremo possono contenere parametri al loro interno
Le funzioni
Anche in javascript abbiamo le funzioni:
la sintassi è sempre la seguente
function nome_della_funzione(){
}
Infine, abbiamo le parentesi graffe, dove andremo a scrivere il corpo della funzione
Le funzioni: parametri
Supponiamo di dover scrivere, un pò come fa excel, un funzione che dati due numeri ne stampi automaticamente la somma
function somma( x, y){
return x + y;
}
Le funzioni: parametri
Supponiamo di dover scrivere, un pò come fa excel, un funzione che dati due numeri ne stampi automaticamente la somma
function somma( x, y){
return x + y;
}
Analizziamo il codice, se ci fate caso, dopo il nome della funzione, abbiamo due parametri generici x e y.
Sono generici perchè, come sappiamo, javascript è un linguaggio debolmente tipizzato
Le funzioni: parametri
Supponiamo di dover scrivere, un pò come fa excel, un funzione che dati due numeri ne stampi automaticamente la somma
function somma( x, y){
return x + y;
}
La funzione altro non fa che prendere i due parametri che ha preso nelle parantesi e sommarli tra loro.
prima della somma però notiamo la parola chiave return.
Le funzioni: parametri
Impostare un valore di ritorno
Impostare un valore di ritorno di una funzione è molto semplice, basta seguire la sintassi:
return valore;
Quando incontra l'istruzione return, JavaScript interrompe l'esecuzione della funzione e
restituisce il valore indicato. Ad esempio:
function somma (a, b)
{ //una semplice funzione
return a+b;
}
var c = somma(3,5); //c assumerà il valore 8
somma(4,12); //in questo caso non succede nulla
Le funzioni: parametri
Si noti che una funzione può essere richiamata solamente dopo che è già stata inserita nel
programma. Un codice come questo genererebbe errore:
var c = somma(3,5); //la funzione somma non esiste ancora!
function somma (a, b)
{ //una semplice funzione
return a+b;
}
Arrow function
Un nuovo tipo di funzione introdotta dalle specifiche di ECMASCript 2015 è rappresentato dalle arrow function. Si tratta di funzioni anonime con una sintassi molto concisa ed alcune specifiche caratteristiche che analizziamo in questa lezione.
Consideriamo ad esempio una funzione anonima che implementa la somma, come quella che segue:
var somma = function(x, y) {
return x + y;
};
Arrow function
Possiamo implementarla utilizzando la sintassi delle arrow function nel seguente modo:
let somma = function(x, y) {
return x + y;
};
let somma = (x, y) => x + y;
Arrow function
Come possiamo vedere, la definizione della funzione è ridotta al minimo: non esiste la parola chiave function, non vengono utilizzate le parentesi graffe per individuare il corpo della funzione e non viene nemmeno utilizzata l'istruzione return.
var somma = function(x, y) {
return x + y;
};
var somma = (x, y) => x + y;
Arrow function
La sua invocazione è del tutto identica a quella di una funzione anonima assegnata ad una variabile:
var somma = (x, y) => x + y;
var totale = somma(3, 2);
Arrow function
Varianti di Arrow Function
L'esempio che abbiamo appena visto è solo una delle possibili varianti sintattiche di arrow function. È possibile infatti utilizzare delle variazioni in base al numero di parametri ed in base al numero di istruzioni da eseguire all'interno della funzione.
La sintassi generale di una arrow function prevede le parentesi tonde intorno alla lista dei parametri e le parentesi graffe per delimitare il corpo della funzione, come nel seguente esempio:
(x, y) => {return x + y; }
Arrow function
Se il corpo è costituito dalla sola istruzione return che restituisce una espressione, possiamo omettere la parola chiave return e le parentesi graffe, come nell'esempio iniziale:
(x, y) => x + y;
Arrow function
Se la funzione prevede un solo parametro, possiamo omettere le parentesi tonde, come nel seguente esempio:
x => x * 2
Arrow function
Se la funzione non prevede alcun parametro, è obbligatorio l'uso delle parentesi tonde:
() => "Hello world!"