JS Istruzioni Condizionali e Operatori Logici, Presentazione Boolean

booleanJS - Istruzioni Condizionali

Sarò io a dettare le condizioniJavascript - JS Istruzioni Condizionali

E se?

Se vogliamo far "accadere una cosa" solo in un caso specifico? Le istruzioni condizionali eseguono un certo blocco di codice se si verifica una ben precisa condizione.

1 if (condizione) {
2
3
/ / blocco di istruzioni
4
5
}

Se si verifica la ( condizione ) { // allora viene eseguito questo blocco di istruzioni (notare le graffe) }Javascript - JS Istruzioni Condizionali

E se? Se vogliamo far accadere una cosa solo in un caso specifico "altrimenti un'altra?"

Ci sono situazioni in cui vogliamo eseguire un certo blocco di codice oppure un altro.

1 if (condizione) {
2
3
/ / blocco di istruzioni 1
4
5
} else {
6
7
/ / blocco di istruzioni 2
8
9
}

Se si verifica la ( condizione ) { // allora viene eseguito questo blocco di istruzioni 1 (notare le graffe) } altrimenti { // viene eseguito questo blocco di istruzioni 2 (notare le graffe) }Javascript - JS Istruzioni Condizionali

E se ... Aggiungiamo condizioni?

Possiamo aggiungere altre condizioni esclusive con else if. La parte "else" non è obbligatoria.

1
if (condizione) {
// blocco di istruzioni 1
2
3
4
5
} else if (altra condizione ) {
/ / blocco di istruzioni 2
6
7
8
9
10
11
12
13
14
else
/ / blocco di istruzioni 3
}

Se si verifica la ( condizione ) { // allora viene eseguito questo blocco di istruzioni 1 } altrimenti se (altra condizione) { // viene eseguito questo blocco di istruzioni 2 } altrimenti { // se entrambe le precedenti sono false // viene eseguito questo blocco di istruzioni 3 }Javascript - JS

Le condizioni

Cosa è una condizione

Una condizione è la verifica che un valore corrisponda a: true o false (vero = condizione verificata) o (falso = condizione non verificata).

1 if
(condizione) {
2
3
/ / blocco di istruzioni 1
4
5 } else if (altra condizione ) {
6
7
// blocco di istruzioni 2
8
9
} else {
10
11
/ / blocco di istruzioni 3
12
13
}
14

Javascript - JS

Operatori relazionali

Come confrontiamo due valori

Come otteniamo questo valore Booleano? Confrontando due valori con gli operatori relazionali

• == uguaglianza Se x = 3, allora x == 4 è falso
• != diversità Se x = 3, allora x != 4 è vero
• > maggiore di Se x = 3, allora x > 4 è falso
• < minore di Se x = 3, allora x < 4 è vero
• >= maggiore o uguale Se x = 3, allora x >= 4 è falso
• <= minore o uguale Se x = 3, allora x <= 4 è vero

Javascript - JS

Operatori relazionali

Come confrontiamo due valori

Trova la differenza!

• == uguaglianza Se x = 3, allora X == 4 è falso X == "3" è vero
• != diversità Se x = 3, allora x != 4 è vero x != "3" è falso
• identità Se x = 3, allora X : = = 3 è vero X = "3" è falso uguaglianza di valore e tipo
• !== non identità Se x = 3, allora x !== 3 è falso x !== "3" è vero disuguaglianza di valore e tipo

Javascript - JS

Operatori Logici

Possiamo unire più condizioni?

Gli operatori logici consentono la combinazione di espressioni booleane. JavaScript prevede · due operatori binari (che richiedono due operandi) · un operatore unario (che richiede un operando)Javascript - JS

Operatori Logici

Possiamo unire più condizioni?

Operatori Binari

• && and, "e logico" restituisce vero se e soltanto se entrambi gli operandi sono veri Se x = 3, y = 4 allora (x < 4 && y > 5) è falso
• | | or, "o logico" restituisce vero se almeno uno degli operandi è vero Se x = 3, y = 4 allora (x < 4 | | y > 5) è vero

Javascript - JS

Operatori Logici

Possiamo unire più condizioni?

Una condizione può essere formata da uno o più confronti con la combinazione degli: operatori relazionali e operatori logici

1 if (x === 3) {
2
3
/ / Questo blocco viene eseguito
/ / solo se x è uguale a 3
4
5
6
alert ( "X è uguale a 3") ;
7
8
1 if ( (x === 3) && (y === 4) ) {
2
3
/ / Questo blocco viene eseguito
/ / solo se x è uguale a 3 e Y uguale a 4
4
5
6
alert ( "X === 3 e Y === 4" ) ;
7
8
}

Javascript - JS

Operatori Logici

Possiamo unire più condizioni?

Operatore Unario

• ! not, negazione cambia il valore di verità dell'operando Se x = 3, y = 4 allora !(x > y) è vero

Ma quando mai vorrò sapere il contrario di qualcosa ? ...Javascript - JS

Operatori Logici - NOT

Ma quando mai vorrò sapere il contrario di qualcosa?

La negazione ci da uno strumento per rendere più espressivo il nostro codice, e quindi non essere vincolati ad un singolo modo di porre un concetto. Come in qualsiasi lingua parlata, è necessario anche in JS in quanto linguaggio di programmazione. In questo esempio, per controllare se un utente non è loggato, siamo vincolati all'uso di un else.

1
let utenteLoggato = false;
2
3
if (utenteLoggato) {
4
5
/ / questo blocco di istruzioni non sarà eseguito
6
/ / perchè false === false
7
8
} else {
9
10
/ / sarà eseguito questo blocco di istruzioni
11
12
}
13

Javascript - JS

Operatori Logici - NOT

Ma quando mai vorrò sapere il contrario di qualcosa?

In questo altro esempio il NOT ci libera dalla costrizione precedente, permettendoci di esprimere la stessa cosa ma diversamente. Possiamo quindi partire dalla condizione che riteniamo più adatta e organizzare il codice come meglio crediamo.

1 let utenteLoggato = false;
2
3
if ( ! utenteLoggato) {
4
5
/ / questo blocco di istruzioni sarà eseguito
6
// perchè ! false === true
7
8
9
. . 100k LOC dopo ...
10
if (utenteLoggato) {
11
12
13
// questo blocco di istruzioni non sarà eseguito
14
// perchè false === false
15
}

Javascript - JS

Modi di affrontare i problemi

Non c'è un modo giusto ed uno sbagliato in assoluto, ma modi diversi di poter affrontare e risolvere i problemi.LIVE CODINGJavascript - JS

Time in JS

JavaScript fornisce alcune funzionalità pronte ad essere utilizzate, per usi comuni. Una di queste riguarda ora e data.

1 // Crea un oggetto che si chiama my_date che
contiene tutte le informazioni riguardo a
giorno e ora in questo momento
2
3
const now = new Date ( ) ;
1 // Su d possiamo chiamare diverse funzioni, per
avere diverse informazioni
2
3
now . getHours ( ) //Get the hour (0-23)
4
now. getMinutes ( ) // Get the minute (0-59)
5 now. getDay ( ) / / Get the day as number (0-6)
6 now. getFullYear ( ) // Get Year as 2019
https://www.w3schools.com/js/js_date_methods.asp

Javascript - JS

Random in JS

Può essere utile avere un numero random, cioè generato dal computer

1 // Restituisce un valore decimale da 0 a 1
(non compreso)
2
3 Math. random( ) ;
4
1
Restituisce un numero tra 0 e 9
2
Math . floor (Math . random( ) * 10);
3
4
/ / Restituisce un numero tra 1 e 100
5
Math. floor (Math . random( ) * 100) + 1;

Math.floor è l'arrotondamento per difetto, cioè arrotonda sempre al numero intero più piccolo. Di contro, Math.ceil è l'arrotondamento per eccesso e arrotonda sempre al numero intero più grande. https://www.w3schools.com/js/js_random.aspLIVE CODINGJavascript - JS

Variable Scope

Anche detto ambito di visibilità (di una variabile)

Lo scope non è altro che il contesto all'interno del quale si può richiamare una certa variabile. Per ora ci basterà sapere che una variabile può essere definita a livello globale, in una funzione, o in un blocco di codice (ES6+).

SCOPE

• GLOBAL
• FUNCTION
• BLOCK
• CODE

Javascript - JS

Variable Scope

Ma quindi come si comporta una variabile dichiarata in un blocco if?

Vediamo insieme qualche esempio Una variabile definita esternamente ad una funzione o ad un qualsiasi blocco di codice ha uno scope globale ed è accessibile da qualsiasi blocco. Una variabile definita internamente ad un qualsiasi blocco di codice ha uno scope di tipo block ed è accessibile esclusivamente dall'interno di quel blocco.

1
2
let validation = true;
const wordA = "Word A" ;
let wordB = "Word B" ;
4
5
if ( validation === true) {
7
8
9
6
let wordc = "Word C" ;
let wordB = "Word Custom B" ;
console . log (wordA) ;
console . log (wordB) ;
console. log (wordC) ;
1
11
12
13
14
15
}
console . log (wordA) ;
console . log (wordB) ;
console . log (wordC) ;

Javascript - JS

Variable Scope

Quindi cosa ci restituiranno le queste funzioni console.log()?

1
let validation = true;
2
const wordA = "Word A" ;
3
let wordB = "Word B" ;
4
5
if ( validation === true) {
6
let wordc = "Word C" ;
7
console . log (wordB) ;
let wordB = "Word Custom B" ;
console. log (wordA) ;
console . log (wordB) ;
console . log (wordC) ;
8
9
10
11
12
}
13
14
console . log (wordA) ;
15
console . log (wordB) ;
16
console . log (wordC ) ;

LIVE CODINGJavascript - JS

Variable Scope

Cerchiamo di capire insieme il motivo di questi risultati

1
let validation = true;
const wordA = "Word A" ;
2
3
let wordB = "Word B" ;
4
5
if
( validation === true) {
let wordc = "Word C" ;
console.log(wordB) ; // Word B
6
7
8
let wordB = "Word Custom B" ;
9
console. log(wordA) ; // Word A
console. log(wordB); // Word Custom B
10
11
console. log (wordc) ; // Word C
}
12
13
14
console. log (wordA) ; // Word A
15
console. log (wordB) ; // Word B
16
console . log (wordC) ; // ReferenceError: wordc is not defined

ESERCITAZIONE