Esercizi condizionali di JavaScript

if else e else if

Le istruzioni condizionali eseguono un insieme di comandi quando la condizione specificata è true.

In molti casi, desideri eseguire diversi blocchi di codice in base all'input dell'utente o ad altri fattori.

Le istruzioni condizionali sono parte della logica, delle decisioni o della specifica del flusso di un programma informatico.

In JavaScript, disponiamo delle seguenti istruzioni condizionali:

• Struttura if

• Struttura if...else

• Struttura else...if

• Struttura switch

Discuteremo la struttura switch nel capitolo successivo.

Estratto dalla struttura if di JavaScript

Questa istruzione esegue il codice solo se la condizione specificata è true. La sintassi è:

if (condition) {
　　//Se la condizione è vera, viene eseguito questo blocco di codice
}

if (x < 0) {
　　　document.getElementById("result").innerHTML = "NEGATIVE";
}

Estratto dalla struttura if ... else di JavaScript

La struttura if...else ti permette di eseguire un blocco di codice quando la condizione specificata è true e un altro blocco di codice quando la condizione è false. La sintassi è:

if (condition) {
　　　//Se la condizione è vera, viene eseguito questo blocco di codice
} else {
　　　//Se la condizione è falsa, viene eseguito questo blocco di codice
}

var x = -4;
if (x < 0) {
　　　msg = "NEGATIVE";
} else {
　　　msg = "POSITIVE";　　　
}

Se l'utente fa clic sull'immagine, l'esempio seguente cambierà il valore dell'attributo src dell'immagine:

<img id="demo" onclick="changeImage()" src="avatar-female.jpg">
<script>
function changeImage() {
　　　var image = document.getElementById("demo");
　　　if (image.src.match("female")) {
　　　image.src = "avatar-male.jpg";
　　　} else {
　　　image.src = "avatar-female.jpg";
　　　}
}
</script>

Frasi else ... if di JavaScript

Con if ... else, possiamo eseguire blocchi di codice in base a condizioni che sono vere o false. Ma a volte possiamo avere più condizioni e output possibili e non ci bastano due opzioni. Un modo per farlo è utilizzare else ... if, che può valutare più di due risultati possibili. La sintassi è:

if (condition1) {
　　// Blocco di codice da eseguire se condition1 è vero
} else if (condition2) {
　　// Blocco di codice da eseguire se condition1 è falso e condition2 è vero
} else {
　　// Blocco di codice da eseguire se condition1 è falso e condition2 è falso
}

// Imposta il livello attuale dello studente
var grade = 88;
// Controlla se il punteggio è A, B, C, D o F
if (grade >= 90) {
　　　document.write("A");
} else if (grade >= 80) {
　　　document.write("B");
} else if (grade >= 70) {
　　　document.write("C");
} else if (grade >= 60) {
　　　document.write("D");
} else {
　　　document.write("F");
}

Frasi if ... else annidate

Puoi utilizzare frasi if ... else annidate per migliorare la capacità di decisione dei programmi JavaScript.

var a = 10, b = 20, c = 30;
var answer;
if (a > b) {
　　　if (a > c) {
　　answer = "A è la più grande dei tre";
　　　} else {
　　answer = "C è la più grande dei tre";
　　　}
} else if (b > c) {
　　　answer = "B è la più grande dei tre";
} else {
　　　answer = "C è la più grande dei tre";　　　
}

Operatore ternario

L'operatore ternario offre un modo semplice per scrivere istruzioni if ... else.

L'operatore ternario è scritto con la sintassi del punto interrogativo (?) e del duepunto (:), come segue:

(condition) ? espressione su true : espressione su false

Nella sintassi sopra,conditionPrima viene scritta, poi?. L'espressione prima viene eseguita sutrue suEsegui, l'espressione seconda sarà eseguita sufalse suEsegui.

Per capire come funziona l'operatore ternario, considera l'esempio seguente:

var status = (age >= 18) ? "adult" : "minor";

Se l'età è 18 anni o più, le seguenti istruzioni assegnano il valore "adult" alla variabile status. Altrimenti, assegnerà il valore "minore" a status.