Sintesi della lezione​

Versioni di Javscript​

Javascript non ha niente a che fare con Java.

Per esattezza dovremmo dire che JavaScript è una implementazione dello standard ECMA Script.

​La ECMA (European Computer Manufacturers Association) è un'associazione fondata nel 1961 e dedicata alla standardizzazione nel settore informatico e dei sistemi di comunicazione. Dal 1994 viene chiamata Ecma International.

​Possiamo dire che dal 2009 JavaScript aderisce allo standard

​Di fatto dal 2009:

ECMAScript = JavaScript

Le versioni correnti sono: 

  • ECMAScript 5 (o ES5) rilasciata nel dicembre 2009 e aggiornata (con piccoli ritocchi) nel giugno 2011
  • ECMAScipt 6 (o ES6) rilascita nel giugno 2015

​Dopo la versione 6 ECMA rilascia un aggiornamento annuale dello standard.​

Dove è collocato​

Normalmente un programma Javascript è collocato in un file con estensione .js.​

  • Può essere eseguito autonomamente utilizzando (ad esempio) nodejs
  • Può essere caricato in una pagina HTML​

IN HTML​

Il Tag <script>

  • Il codice JavaScript va inserito tra l'apertura e la chiusura del tag <script> così:​
<script> 
   alert("ciao"); 
</script> 
  • ​Possiamo inserire il codice JavaScript in qualsiasi parte del documento (nella head oppure nel body) a seconda delle nostre esigenze.
  • Altrimenti posso utilizzare il tag script per carica un file esterno:
<script src="miofile.js"></script>

GESTIONE DIRETTA E VENTO

  • Come abbiamo detto Javascript è fatto principalmente per rispondere a degli eventi, come quello di un utente che clicca un elemento della pagina

  • Si può associare direttamente del codice javascript all'evento di un elemento usando appositi attributi come onclick, onload, ecc:

<button onclick="alert('Ciao!')">Cliccami !</button>

FUNZIONI ED EVENTI

  • Una funzione JavaScript è un blocco di codice JavaScript, che può essere eseguita quando richiesto.

  • Come abbiamo visto dagli esempi di solito un programma Javascript viene eseguito in risposta ad un evento.

  • In molti casi quindi la programmazione JavaScript consisterà nello scrivere funzioni e associarle ad eventi come il click su un bottone o l’invio di un form.

  • Ed questo sarà l’argomento di tutti i nostri esercizi.

OUTPUT

  • JavaScript NON ha specifiche funzioni di input o di output.
  • Quando Javascript viene eseguito nel browser l'interazione con l'utente avviene tramite la pagina html:
  • Il browser offre a javascript gli strumenti per interagire con la pagina html ad esempio:
    • Utilizzare window.alert () .
    • Scrivere direttamente sulla pagina HTML usando document.write().
    • Scrivere o modificare il contenuto  un elemento HTML, utilizzando la propietà innerHTML .
    • Scrivere nella console del browser, utilizzando console.log ()  o console.info().
  • Se invece Javascript vien utilizzato con nodejs lo strumento principale di interazione sarà la console.

Il browser mette a disposizione di Javascript l'oggetto document che ha proprietà e metodi che consentono a Javascript di interadire con il documento HTML.

  • Uno dei tanti metodi HTML è getElementById () .
  • In questo esempio si utilizza il metodo per "trovare" l’elemento HTML con id = "demo", e cambiare il contenuto HTML dell'elemento ( innerHTML ) in "Ciao da JavaScript":
document.getElementById("demo").innerHTML = "Ciao da JavaScript";

See the Pen Esercizio 01 by Bruno Migliaretti (@magicbruno) on CodePen.

SINTASSI

JAVASCRIPT È CASE SENSITIVE

  • Tutti gli identificatori JavaScript sono case sensitive.

  • Questo significa che per JavaScript le variabili Nome e nome sono due varibili diverse.

  • E che VAR Var non sono interpretati come la parola riservata JavaScript var.

PROGRAMMI JAVASCRPT

  • Un programma per computer è un elenco di "istruzioni" che può essere "eseguito" da parte del computer.

  • In un linguaggio di programmazione, le istruzioni del programma sono chiamati statements.

Le istruzioni JavaScript (statements) sono separate da un punto e virgola . 

var y = 6;
var z = x + y;.
  • Un blocco di istruzioni racchiuso tra parentesi graffe e viene considerato nella sintassi come un’unica istruzione.
if (document.getElementById('nome').value == '' || document.getElementById('cognome').value == ''){
    alert ("Dati incompleti!");
    return false;
}

ISTRUZIONI JAVASCRPT

  • Le istruzioni JavaScript sono composte da:
    • Nomi o identificatori:
      • Nomi di variabili
      • Nomi di funzioni
      • Istruzioni definite dal linguaggio (parole riservate)
    • Valori:
      • A secondo del tipo di valore che rappresentano devono seguire una precisa sintassi
    • Operatori:
      • Operatori che servono a costruire delle espressioni
      • Operatori di assegnazione
      • Separatori

Variabili

Le variabili JavaScript sono contenitori per memorizzare valori.

  • In questo esempio, prezzo1, prezzo2, e totale, sono variabili:
var prezzo1 = 10;
var prezzo2 = 12;
var totale = prezzo1 + prezzo2;
  • Nella programmazione, proprio come in algebra, usiamo le variabili (come prezzo1) per contenere i valori.
  • Nella programmazione, proprio come in algebra, usiamo le variabili nelle espressioni (totale = prezzo1 + prezzo2).

Come si costruiscono i nomi

  • Tutti le variabili devono essere identificate con nomi univoci .
  • Questi nomi unici sono chiamati identificatori .
  • Gli identificatori possono essere nomi brevi (come x e y) o nomi più descrittivi (somma, codiceFiscale).
  • Le regole generali per la costruzione di nomi per le variabili (identificatori unici) sono:
    • oI nomi possono contenere lettere, cifre, sottolineature, e segni di dollaro.
    • oI nomi devono iniziare con una lettera, con $ o _
    • oNomi sono case sensitive (y e Y sono variabili diverse)
    • oLe parole riservate (come le parole chiave JavaScript) non possono essere utilizzati come nomi

Assegnazione di un valore

  • In JavaScript, il segno di uguale (=) è un operatore assegnazione, non significa uguale a.
  • La seguente espressione non ha senso in algebra:
x = x + 5;
  • In JavaScript, invece assegna il valore dell'espressione x + 5 a x (Viene calcolato il valore di x + 5 e il risultato viene posto in x,  in altri termini il valore di x viene incrementato di 5).
  • Le variabili JavaScript possono contenere numeri (come 5) e testi come "Ciao da Javascript".
  • In programmazione, i valori di testo sono chiamati string.
  • Le variabili JavaScript possono contenere qualsiasi tipo di dato. Per ora parleremo di numeri (Number) e stringhe (String).
  • Le stringhe di testo sono scritte tra virgolette doppie o singole. I numeri sono scritti senza virgolette.
  • Se si mette un numero tra virgolette, si sarà trattato come una stringa di testo.

DICHIARAZIONE, INIZIALIZZAZIONE, ASSEGNAZIONE

Le fasi di vita di una variabile:
  • Dichiarazione: dichiaro che un determinato nome verrà usato come variabile
var messaggio;
  • Inizializzazione: assegno un primo valore alla varibile
messaggio = "Ciao da Javascript !";
var messaggio = "Ciao da Javascript !";
  • Assegnazione: nel corso del programma cambio il valore a cui la variabile è inizialmente associata utilizzando un operatore di assegnazione

NB: Posso anche dichiarare più variabili con un unico comando var. In questo caso separo le variabili con una virgola.

var x = 5, y = 6, z;

TIPI DI DATO

Nella programmazione, il tipo di dato è un concetto centrale.

A secondo del tipo di dato contenuto il browser tratterà diversamente  i valori delle variabili.

  var x = 10 + 5;       // x vale 15
  var x = "10" + "5";   // x vale "105"

Contrariamente ad altri linguaggi il tipo dei dati delle variabili si adatta automaticamente ai dati contenuti:

  var x;                              // il tipo di dati di x è undefined
  x = 16;                             // il tipo di dati di x è Number
  x = "Ciao gente!";                  // il tipo di dati di x è String
  x = {nome:"John", cognome:"Doe"};   // il tipo di dati di x è Object

string

  • Una stringa è una sequenza di caratteri che permette di rappresentare testi. Le stringhe sono racchiuse tra apici singoli o apici doppi.
/* String. Tra apici semplici o doppi */
x = 'Ciao da Javascript'; // Stringa tra apici semplici
x = "Ciao da Javascript"; // Stringa tra apici doppi
x = 'Il nome è "Pietro"'; // Stringa tra apici semplici (che contiene apici doppi)
x = "Il nome è 'Pietro'"; // Stringa tra apici semplici (che contiene apici semplici
  • Per inserire ritorni a capo, tabulazioni, particolari caratteri o informazioni di formattazione si utilizzano speciali sequenze di caratteri dette sequenze di escape. Una sequenza di escape è formata da un carattere preceduto dal simbolo “\” (backslash). La sequenza di escape inserisce un carattere che non sarebbe altrimenti rappresentabile in una stringa.

Principali sequenze di escape   

sequenza carattere corrispondente
\n nuova riga;
\r ritorno a capo;
\t tabulazione orizzontale;
\‘ apostrofo (o apice singolo);
\" doppio apice;
\\ backslash (essendo un carattere speciale deve essere inserito  con una sequenza di escape).

Esempi di costanti string

// Stringa racchiusa da apici singoli
'Ciao a tutti'
// Stringa racchiusa tra apici doppi
"Ciao"
/* La sequenza di escape risolve l’ambiguità tra l’apostrofo inserito 
   nella stringa e gli apici singoli che la racchiudono */
'Questo è l\'esempio corretto'
/* In questo caso non c’è ambiguità perché la stringa è
   racchiusa tra doppi apici */
"Anche questo è l'esempio corretto"
/* Per inserire un ritorno a capo si usano le sequenze
   di escape */
"Questa è una stringa valida\rdi due righe"

numbers

Contrariamente d altri linguaggi JavaScript ha un solo tipo di numeri.

I numeri possono essere scritti con, o senza decimali. Il separatore tra la parte intera e la parte decimale è il punto.

  var x1 = 34.00;     // Con decimali
  var x2 = 34;        // Senza decimali

Numeri molto grandi o molto piccoli possono essere scritti in notazione scientifica (esponenziale):

  var y = 123e5;      // 1230000
  var z = 123e-5;     // 0.00123

Le costanti numeriche iniziano con un carattere numerico, con + o con -. Se un qualsiasi termine in uno script inizia con questi caratteri l’interprete lo considererà una costante numerica. Se non riuscirà a interpretarlo come tale segnalerà un errore.

Il segno che separa la parte intera di un numero dalla parte decimale è il punto. Lo zero iniziale di un numero inferiore a 1 può essere tralasciato.

È possibile inserire numeri in formato decimale, binario, ottale o esadecimale.

Per segnalare al compilatore che un numero non è decimale si fa precedere il numero da un prefisso. Per i numeri esadecimali questo prefisso è 0x.

Gli altri termini (parole chiave e nomi) NON possono iniziare con un numero.

1
2433
1000000000
3.14
.33333333333
0.5
2345.675
0xFF0088
0x5500ff
0xff.00aa

Conversioni automatiche

L'operatore + consente sia di sommare numeri che di concatenare stringhe di caratteri. Quando mescolo i due tipi in una espressione i numeri saranno convertiti in stringa: 

Operazione Espressione Conversione Risultato
Somma numero con numero x = 5 + 5; Nessuna conversione 10
Somma numero in una stringa con numero x = '5' + 5; x = '5' + '5' ’55’
Somma una stringa con un numero x = 'Carlo'+ 5; x = 'Carlo'+ '5'; ‘Carlo5’

Bisogna comunque tener conto dell'ordine con cui vengono risolte le operazioni che compongono l'espressione. La conversione avverrà solo quando necessario:

Operazione Espressione Conversioni Risultato
La somma tra numeri precede una somma con una stringa x = 5 + 10 + "Pippo"; x = 15 + "Pippo";
x = "15" + "Pippo";
"15Pippo"
La somma tra numeri segue una somma con una stringa x = "Pippo" + 5 + 10; x = "Pippo" + '5' + '10'; ’Pippo510’
Uso delle parentesi x = "Pippo" + (5 + 10); x = "Pippo" + 15; x = "Pippo" + "15"; ‘Pippo15’

boolean

I dati di tipo boolean, poiché rappresentano valori logici, possono avere solo due valori: vero (rappresentato da true) e falso (rappresentato da false).

  var x = true;
  var y = false;

array

Un Array è costituito da una serie di elementi ordinati identificabili dal loro indice. Si scrivono come elementi separati da virgole tra due parentesi quadre.

/* Giorni della settimana */
var giorni = ["Lunedì", "Martedì", "Mercoledì",   "Giovedì", "Venerdì", "Sabato", "Domenica"];

Gli indici sono a base zero, il che significa che il primo elemento è [0], secondo è [1], e così via.

object

Un dato di tipo Object è compreso tra parentesi graffe ed è costituito da una serie di coppie “nome:valore” separate da virgole:

var persona = { nome: "Mario", cognome:"Rossi",   telefono: "3338887777" }

L'oggetto nell'esempio sopra ha 3 proprietà: nome, cognome e telefono.

typeof

L'operatore typeof restituisce una stringa che rappresenta il tipo di una variabile o un'espressione. I risultati possibili sono:

  • "string"
  • "number"
  • "boolean"
  • "function"
  • "undefined"
  typeof "John"              // "string"
  typeof 3.14                // "number"
  typeof true                // "boolean"

TIPI DI DATI IN JAVASCRIPT 

Tipo di dati

Spiegazione

Esempio

number

Qualsiasi valore numerico

var miaVariabile=300;

string

Qualsiasi valore letterale. È una sequenza di caratteri, racchiusa tra virgolette.

var miaVariabile="Wolfgang";

undefined

È uno speciale tipo di dato che indica l’assenza di alcun valore (“è il nulla”). Non è lo zero.

var miaVariabile;

boolean

È uno tipo di dato che indica uno stato. Di fatto un valore booleano può assumere solo due valori: acceso (vero), spento (falso). È il classico “interruttore della luce”.

//Vero:
var miaVariabile=true;
//Falso:
var miaVariabile=false;

object

Array (Elenco di valor)i

var miaVariabile=[‘lunedì’, ’martedì’, ‘mercoledì’, ‘giovedì’, ‘venerdì’, ‘sabato’, ‘domenica’]

object

Informazione complessa

var miaVariabile = {nome:”Mario”, cognome:”Rossi”, eta:25}

PAROLE CHIAVE (Javascript versione 5.1)

Le parole chiave sono i termini (composti da caratteri alfanumerici), riservati al linguaggio di programmazione.

Il creatore del linguaggio di programmazione stabilisce a priori quali termini riservare e quale sarà la loro funzione, il compito del programmatore è quello di impararle ed usarle in maniera appropriata.

Le parole chiave sono riservate non possono cioè essere usate per altre funzioni (nomi di vriabili o funzioni).

Parola chiave Descrizione
break Esce da un blocco switch o da un ciclo
continue Interrompe l’iterazione di un ciclo se una determinate condizione si verifica e contuna con quella successiva
debugger Interrompe l’esecuzione e lancia il debugger, se disponibile.
do ... while Esegue un blocco di comandi fino a che una determinata condizione è vera.
for Esegue un blocco di comandi fino a che una determinata condizione è vera.
for ... in Esegue un blocco di comandi per ogni elemento presente in un insieme (Array o Object)
function Dichiara una funzione
if ... else ... else if Esegue un blocco di comandi quando una condizione è vera
return Interrompe l’esecuzione di una funzione e ritorna un valore
switch Organizza una serie di blocchi di istruzioni dioendenti da condizioni alternative.
throw Genera un errore.
try ... catch ... finally Gestione degli errori
var Dichiara una variabile.
while Esegue un blocco di comandi fino a che una determinata condizione è vera.

Operatori

Gli operatori sono elementi del linguaggio composti di uno o più caratteri speciali o da una parola che applicati a uno o più operandi (che possono essere letterali o variabili) producono un risultato.

Operatori aritmetici

Operatore Funzione Espressione Valore di y Valore di x
    Valore iniziale: y=5
+ Addizione x = y + 2 y = 5 x = 7
- Sottrazione x = y - 2 y = 5 x = 3
* Moltiplicazione x = y * 2 y = 5 x = 10
/ Divisione x = y / 2 y = 5 x = 2.5
% Resto intero (Modulo) x = y % 2 y = 5 x = 1
++ Incremento x = ++y y = 6 x = 6
x = y++ y = 6 x = 5
-- Decremento x = --y y = 4 x = 4
x = y-- y = 4 x = 5

Precedenza degli operatori

Una operazione aritmetica si può operare su letterali:

var x = 100 + 50;

variabili:

var x = a + b;

espressioni:

var x = (100 + 50) * a;

Come nella matematica appresa a scuola la moltiplicazione (*) e la divisione (/) hanno una maggiore priorità di addizione (+) e sottrazione (-).

La precedenza può essere modificato utilizzando parentesi:

var x = (100 + 50) * 3;
Precedenza Operatore Descrizione Esempio
19 () Operatore di raggruppamento (3 + 4)
18 ., [] Operatori di appartenenza persona.nome, persona["nome"]
17 (), new Richiamo di una funzione, creazione di un oggetto myFunction(), new Date()
16 ++, -- Incremento e decremento postfissi i++, i--
15 ++, -- Incremento e decremento prefissi ++i, --i
15 ! not logico !(x == y)
15 typeof Individuazione del tipo typeof x
14 *, /, % Moltiplicazione, divisione, modulo 10 * 5, 10 / 5, 10 % 5
13 +, - Addizione, sottrazione 10 + 5, 10 - 5
12 <<, >>, >>> Shift binario x << 2, x >> 2, x >>> 2
11 <, <=, >, >= Confronto (maggiore e minore) x < y, x <= y, x > y, x >= y
10 ==, ===, !=, !== Confronto (uguale e non uguale) x == y, x === y, x != y, x !== y
6 && and logico x && y
5 || or logico x || y
3 =, +=, -=, *=, /=, %=, ecc. Operatori di assegnazione x = y, x += y, x -= y, x += y, x /= y, x %= y

Operatori di assegnazione

Operatore Espressione Espressione equivalente Valore assegnato a x
  Valori di partenza: x = 10; y = 5;
= x = y x = y 5
+= x += y x = x + y 15
-= x -= y x = x - y 5
*= x *= y x = x * y 50
/= x /= y x = x / y 2
%= x %= y x = x % y 0

Operatori di stringa

Operatore
Espressione
Espressione equivalente
Risultato

 

Valori di partenza:
text1 = “Buon “; text2  = “giorno”; text3=“”;
=
text1 = text2
 
text1 ‘giorno’  
+
text3 = text1+text2
 
text3 ‘Buon giorno’  
+=
text1 += text2
text1 = text1+text2
text1 ‘Buon giorno’  

Separatori 

I separatori sono simboli di interpunzione che permettono di chiudere un'istruzione o di raggruppare degli elementi.
Il separatore principale è lo spazio che separa i termini tra di loro quando non ci sono altri separatori. Gli altri separatori sono:
 ( ) { } , ; .

Commenti

I commenti sono testi che lo sviluppatore inserisce nel codice per renderlo più leggibile e vengono ignorati dall’interprete/compilatore.

Esistono due tipi di commenti in uno script javascript:

Commenti di una sola riga preceduti da //

Commenti composti da una o più righe inseriti tra /* e */.

// Questo è un commento di una sola riga

/* 
   *********************************
   * Questo è un commento disposto * 
   * su più righe.                 *
   *********************************
*/

Funzioni

Cosa è una funzione

  • Una funzione (o metodo) è una costrutto presente in tutti i linguaggi di programmazione progettato per eseguire un compito particolare.
  • Il codice contenuto in una funzione JavaScript viene eseguita quando "qualcosa" invoca la funzione.

Sintassi

Una funzione JavaScript viene dichiarata (creata) con la parola chiave  function seguita da una coppia di parentesi ()  e da un blocco di codice (serie di comandi separati da ;) racchiuso tra parentesi graffe {}.

/* Funzione che calcola la media tra due numeri */
function (a, b) {
    return (a + b) / 2;            
}

Le parentesi possono includere nomi di parametro separati da virgole: (parametro1, parametro2, ... )

Funzione con nome

Posso creare una funzione con nome facendo seguire un identificativo alla parola chiave  function.

/* Funzione che calcola la media tra due numeri */
function media(a, b) {
    return (a + b) / 2;           
}

Funzione anonima

Posso assegnare una funzione a una variabile come un qualsiasi altro valore.

/* Funzione che calcola la media tra due numeri */
var media = function (a, b) {
    return (a + b) / 2;           
}

In entrambi i casi media conterrà la funzione e, dal punto di vista funzionale il risultato sarà in molti casi identico.

  • Con parametri della funzione si indicano i nomi elencati tra parentesi nella definizione.
  • Con argomenti della funzione si indicano i valori ricevuti dalla funzione, tramite i parametri, quando viene richiamata (eseguita).
  • All'interno del corpo della funzione, i parametri si comportano come variabili locali.

Invocazione (esecuzione)

  • Mentre il codice contenuto nelle altre parti di un programma JavaScript viene eseguito non appena il browser lo incontra, il codice all'interno della funzione verrà eseguito solo quando "qualcosa" esegue la funzione. Una funzione può essere invocata in tre modi:
  • La funzione viene espressamente richiamata dal codice, come qualsiasi altro comando JavaScript
  • La funzione viene associata ad un evento (ad esempio il click su un pulsante) e viene richiamata automaticamente ogni volta che  l'evento si verifica
  • Infine una funzione può essere self invoked (cioè richiamarsi da sola)
  • Nel primo e nel terzo caso (quando, cioè, la funzione non è eseguita automaticamente) ciò che scatena l'esecuzione è l'operatore di esecuzione, una coppia di parentesi tonde (), che seguono la funzione e che possono contenere gli argomenti (i valori) che la funzione elabora.
  • Il comando return nel corpo della funzione arresta l'esecuzione di una funzione.
  • Se la funzione viene richiamata da uno script, una volta eseguita, l'esecuzione del codice principale continua dal punto in cui la funzione è stata richiamata.
  • Le funzioni possono restituire un valore che normalmente è un calcolo o una elaborazione svolta sui valori passati ala funzione attraverso i parametri. Il valore di ritorno viene "restituito" al "chiamante" con il comando return.
 /* Funzione che calcola la media tra due numeri */

function media (a, b) {
    return (a + b) / 2;           
}

// Calcolo la media tra 34 e 78
var m = media(34, 78);

// E comunico il risultato cambiando il contenut html dell'elemento con id="demo"
document.getElementById('demo').innerHTML = "La media è " + m;

Utilità delle funzioni

L’uso di funzioni ha due vantaggi:

  • È possibile riutilizzare il codice: Definire il codice di una volta, e utilizzarlo più volte.
  • È possibile utilizzare lo stesso codice con argomenti diversi, per produrre risultati diversi.

L'operatore ()

Per richiamare (eseguire) la funzione devo fare seguire il nome della funzione dall'operatore () che può contenere l'elenco degli argomenti che passo alla funzione, se previsti.

La funzione non seguita dall'operatore di esecuzione restituisce il contenuto della funzione stessa (la definizione) anziché il risultato

Funzioni globali

Funzione
Descrizione
decodeURI(uri)
Decodifica un URI codificata con encodeURI
decodeURIComponent(uri)
Decodifica un URI codificata con decodeURIComponent
encodeURI(uri)
Codifica un URI (codifica i caratteri speciali eccetto / ? : @ & = + $ # )
encodeURIComponent(uri)
Codifica un URI (codifica i caratteri speciali compresi / ? : @ & = + $ # )
escape(str)
Questa funzione rende una stringa portatile, in modo che possa essere trasmessa attraverso qualsiasi rete a qualsiasi computer che supporti i caratteri ASCII.
eval(str)
Valuta una stringa e la esegue come se fosse il codice di script
isFinite()
Determina se un valore è un numero finito (e legale)
isNaN()
Determina se un valore è non è lo speciale valore NaN
Number()
Converte il valore di un oggetto in un numero
parseFloat()
Analizza una stringa e restituisce un numero in virgola mobile o NaN
parseInt()
Analizza una stringa e restituisce un intero o NaN
String()
Converte il valore di un oggetto in una stringa
unescape()
Decodifica una stringa codificata con escape.

Proprietà globali

 

Propietà
Descrizione
Infinity
Un valore numerico che rappresenta l'infinito positivo e negativo
NaN
Il valore "Not-a-Number"
undefined
Indica che ha una variabile (o a una proprietà) non è stato assegnato alcun valore.

Prendere decisioni

Le strutture di programmazione che mi consentono di prendere decisioni sono essenzialmente due:
  • condizionale: faccio una determinata cosa se una condizione risulta vera altrimenti ne faccio un'altra
  • iterativa (o loop): ripeto una determinata operazione finche una condizione risulta vera

L'istruzione if

L’istruzione if può avere due forme:
  • if ( espressione ) blocco di istruzioni
  • if ( espressione ) blocco di istruzioni else blocco di istruzioni
L'espressione che compare dopo la parola chiave if deve essere di tipo logico, se la condizione risulta vera viene eseguita l'istruzione subito seguente; nel secondo caso, invece, se la condizione risulta vera si esegue l'istruzione seguente, altrimenti si esegue l'istruzione subito dopo la parola chiave else.
Per più scelte invece si può usare l'else if che permette di porre una condizione anche per le alternative, lasciando ovviamente la possibilità di mettere l'else (senza condizioni) in posizione finale.

Esempi

/*
  Blocco if
*/
if (condizione)
{
	//comandi se condizione è vera
}
// il programma continua qui

/*
  Blocco if...else
*/
if (condizione)
{
	//comandi se condizione è vera
}
else
{
	//comandi se condizione è falsa
}
// il programma continua qui

/*
  Serie di condizioni
*/
if (condizione1)
{
	//comandi se condizione1 è vera
}
else if (condizione2)
{
	//comandi se condizione2 è vera
}
else if (condizione3)
{
	//comandi se condizione3 è vera
}
else
{
	//comandi se tutte le condizioni sono false
}
// il programma continua qui

Operatori logici

operazione javascript precedenza
uguaglianza == oppure === 1
disuguaglianza != oppure !== 1
maggiore > 1
maggiore o uguale >= 1
minore < 1
minore o uguale <= 1
and && 2
or || 2
not ! 2

 Combinare tra loro le condizioni

Prendiamo questi enunciati:
  • esco se il tempo è bello ed è caldo
  • esco se il tempo è bello o è caldo
  • non esco se il tempo non è bello e non è caldo
  • non esco se il tempo non è bello o non è caldo

esco se il tempo è bello ed è caldo

enunciato 1 congiunzione enunciato 2 risultato
tempo bello ed temperatura caldo esco ?
true && true true
false && true false
true && false false
false && false false

 esco se il tempo è bello o è caldo

enunciato 1 congiunzione enunciato 2 risultato
tempo bello o temperatura caldo esco ?
true || true true
false || true true
true || false true
false || fasle false

 non esco se il tempo è non bello e non è caldo

  enunciato 1 congiunzione enunciato 2 risultato
non tempo è bello e temperatura è caldo Esco ?
! true &&  true true
! true && false true
! false && true true
! false && false false

  non esco se il tempo è non bello o non è caldo

  enunciato 1 congiunzione enunciato 2 risultato
non tempo è bello o temperatura è caldo Esco ?
! true ||  true true
! true || false false
! false || true false
! false || false false