Da questa lezione, sulla scorta delle nozioni apprese finora, inizieremo finalmente a scrivere qualche programmino degno di nota, per farlo dobbiamo, prima di tutto, prendere confidenza con le cosiddette strutture di controllo del flusso di programma o, più banalmente, le condizioni.
Come in ogni linguaggio di programmazione che si rispetti, anche in Javascript, infatti, è possibile definire delle condizioni al verificarsi delle quali deve o meno accadere qualcosa. Per fare ciò ci si serve degli operatori if, else if, else i quali corrispondono alle locuzioni condzionali "se", "oppure se" e "oppure".
La sintassi Javascript per eseguire un’istruzione if è la seguente:
if (condizione) {
istruzioni;
}La condizione segue l’istruzione if e viene racchiusa tra parentesi tonde, mentre le istruzioni da eseguire – se la condizione si verifica – vengono racchiuse tra parentesi graffe.
Se vi è una sola istruzione e questa viene scritta su una singola riga è possibile omettere le parentesi graffe come nell’esempio:
if (condizione) istruzione;Possiamo anche dire al programma come comportarsi in caso la condizione non si verifichi, con l’ausilio di else:
if (condizione) {
istruzioni;
}else{
istruzioni;
}Utilizzando else non c’è bisogno di specificare tra parentesi tonde la condizione, dato che il programma valuterà tutte le altre situazioni possibili, all’infuori di quella specificata nell’istruzione if. Quindi se la condizione non si verifica il programma eseguirà quanto specificato nel blocco else.
Quella che abbiamo visto è una struttura condizionale relativamente semplice: se la condizione X si verifica esegui questa operazione, in caso contrario esegui quest’altra.
In realtà, però, è possibile creare strutture condizionali molto più complesse introducendo la clausola else if che in sostanza introduce N nuove possibiltà in quanto, a differenza di if e else che possono essere usate una volta soltanto, può essere utilizzata più volte per creare infinite nuove possibilità.
if (condizione 1) {
istruzioni;
}
else if (condizione 2) {
istruzioni;
}
else if (condizione 3) {
istruzioni;
}
else if (condizione N) {
istruzioni;
}else{
istruzioni;
}Come avete visto i blocchi "else if" possono essere più di uno.
Vediamo di seguito un esempio di una semplice struttura di controllo "scolastica" finalizzata a stampare a video un messaggio differente a seconda della risoluzione dello schermo dell’utente.
var screenwidth = screen.width;
if (screenwidth < 400) {
document.write('Stai usando uno smartphone');
}
if (screenwidth < 800) {
document.write('Stai usando un tablet');
}else{
document.write('Stai usando un computer');
}Nel nostro esempio, molto banalmente, intercettiamo la larghezza dello schermo dell’utente e, attraverso una struttura condizionale a tre blocchi mostriamo un messaggio differente a seconda che la risoluzione lasci intendere l’utilizzo di uno smarphone, di un tablet o di un comune computer.
Vediamo di seguito un esempio che mostra come costruire istruzioni condizionali composite. Più precisamente vedremo come utilizzare l’operatore logico AND (&&) per creare blocchi condizionali composti da più condizioni:
// creo un oggetto data
var saluto = new Date();
// individuo l'ora corrente
var oo = saluto.getHours();
if (oo > 06 && oo <= 12) {
document.write("Buon giorno!");
}
else if (oo > 12 && oo <= 18) {
document.write("Buon pomeriggio!");
}
else if (oo > 18 && oo <= 22) {
document.write("Buona sera!");
}
else {
document.write("Buona notte!");
}Creare condizioni complesse
Quando si concatenano due o più condizioni è necessario stare molto attenti all’uso delle parentesi tonde. Se si concatenano diverse condizioni sempre col medesimo operatore l’uso di parentesi tonde (ulteriori a quelle "esterne" che racchiudono l’intera condizione) non è necessario:
if (a == true && b == true && c == true) { ... }In questo caso il blocco if si realizzerà se tutte e tre le condizioni sono vere.
L’uso delle parentesi diventa indispensabile, invece, se si costruiscono condizioni complesse utilizzando una pluralità di operatori logici:
if ((a == true && b == true) || c == true) { ... }In quest’ultimo esempio il blocco if si realizzerà se "a" e "b" sono true oppure se è true la sola variabile "c".
