mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-31 02:20:14 +02:00
176 lines
8.2 KiB
Markdown
176 lines
8.2 KiB
Markdown
# Nozioni di base su JavaScript: Prendere Decisioni
|
||
|
||
|
||
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||
|
||
## Quiz Pre-Lezione
|
||
[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=it)
|
||
|
||
Prendere decisioni e controllare l'ordine in cui il proprio codice viene eseguito lo rende riutilizzabile e robusto. Questa sezione descrive la sintassi per il controllo del flusso di dati in JavaScript e il suo significato quando viene utilizzato con tipi di dato Booleani
|
||
|
||
[](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
|
||
|
||
## Un Breve Riepilogo sui Booleani
|
||
|
||
I Booleani possono avere solo due valori: `true` (vero) o `false` (falso). I booleani possono aiutare a prendere decisioni su quali righe di codice devono essere eseguite quando vengono soddisfatte determinate condizioni.
|
||
|
||
Si impostano i booleani come vero o falso in questo modo:
|
||
|
||
`let myTrueBool = true`
|
||
`let myFalseBool = false`
|
||
|
||
✅ I Booleani prendono il nome dal matematico, filosofo e logico inglese George Boole (1815–1864).
|
||
|
||
## Operatori di Confronto e Booleani
|
||
|
||
Gli operatori vengono utilizzati per valutare condizioni effettuando confronti che creeranno un valore Booleano. Di seguito è riportato un elenco di operatori utilizzati di frequente.
|
||
|
||
| Simbolo | Descrizione | Esempio |
|
||
| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
|
||
| `<` | **Minore di**: Confronta due valori e restituisce il tipo di dato booleano `true` se il valore sul lato sinistro è minore di quello del lato di destra | `5 < 6 // true` |
|
||
| `<=` | **Minore di o uguale a**: Confronta due valori e restituisce il tipo di dato Booleano `true` se il valore sul lato sinistro è minore o uguale a quello di destra | `5 <= 6 // true` |
|
||
| `>` | **Maggiore di**: Confronta due valori e restituisce il tipo di dato Booleano `true` se il valore sul lato sinistro è maggiore di quello del lato destro | `5 > 6 // false` |
|
||
| `>=` | **Maggiore di o uguale a**: Confronta due valori e restituisce il tipo di dato Booleano `true` se il valore sul lato sinistro è maggiore o uguale a quello del lato destro | `5 >= 6 // false` |
|
||
| `===` | **Uguaglianza rigorosa**: Confronta due valori e restituisce il tipo di dato Booleano `true` se i valori a destra e a sinistra sono uguali E sono lo stesso tipo di dato. | `5 === 6 // false` |
|
||
| `!==` | **Disuguaglianza**: Confronta due valori e restituisce il valore Booleano opposto di quello che restituirebbe un operatore di uguaglianza rigorosa | `5! == 6 // true` |
|
||
|
||
✅ Verificare le proprie conoscenze scrivendo alcuni confronti nella console del browser. I dati restituiti sorprendono?
|
||
|
||
## Istruzione If
|
||
|
||
L'istruzione if eseguirà il codice tra i suoi blocchi se la condizione è vera.
|
||
|
||
```javascript
|
||
if (condition){
|
||
//Condition era vero. Verra eseguito il codice in questo blocco.
|
||
}
|
||
```
|
||
|
||
Gli operatori logici vengono spesso utilizzati per formare la condizione.
|
||
|
||
```javascript
|
||
let currentMoney;
|
||
let laptopPrice;
|
||
|
||
if (currentMoney >= laptopPrice){
|
||
//Condition era vero. Verra eseguito il codice in questo blocco.
|
||
console.log("Getting a new laptop!");
|
||
}
|
||
```
|
||
|
||
## Istruzione if..else
|
||
|
||
L 'istruzione `else` eseguirà il codice tra i suoi blocchi quando la condizione è falsa. È opzionale con un'istruzione `if` .
|
||
|
||
```javascript
|
||
let currentMoney;
|
||
let laptopPrice;
|
||
|
||
if (currentMoney >= laptopPrice){
|
||
//Condizione era vero. Verra eseguito il codice in questo blocco.
|
||
console.log("Getting a new laptop!");
|
||
}
|
||
else{
|
||
//Condizione era falsa. Verra eseguito il codice in questo blocco.
|
||
console.log("Can't afford a new laptop, yet!");
|
||
}
|
||
```
|
||
|
||
✅ Verificare la comprensione di questo codice e del codice seguente eseguendolo in una console del browser. Modificare i valori delle variabili currentMoney e laptopPrice per modificare il valore restituito da `console.log()`.
|
||
|
||
## Operatori Logici e Booleani
|
||
|
||
Le decisioni potrebbero richiedere più di un confronto e possono essere combinate con operatori logici per produrre un valore Booleano.
|
||
|
||
| Simbolo | Descrizione | Esempio |
|
||
| ------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
|
||
| `&&` | **AND logico**: Confronta due espressioni Booleane. Restituisce vero **solo** se entrambe le parti sono vere | `(5 > 6) && (5 < 6) // Un lato è falso, l'altro è vero. Restituisce false` |
|
||
| `\|\|` | **OR logico**: Confronta due espressioni Booleane. Restituisce vero se almeno una parte è vera | `(5 > 6) || (5 < 6) // Un lato è falso, l'altro è vero. Restituisce true` |
|
||
| `!` | **NOT logico**: Restituisce il valore opposto di un'espressione Booleana | `!(5 > 6) // 5 non è maggiore di 6, ma "!" restituirà true` |
|
||
|
||
## Condizioni e Decisioni con Operatori Logici
|
||
|
||
Gli operatori logici possono essere utilizzati per formare condizioni nelle istruzioni if..else.
|
||
|
||
```javascript
|
||
let currentMoney;
|
||
let laptopPrice;
|
||
let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop price at 20 percent off
|
||
|
||
if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
|
||
//Condizione era vero. Verra eseguito il codice in questo blocco.
|
||
console.log("Getting a new laptop!");
|
||
}
|
||
else {
|
||
//Condizion era falsa. Verra eseguito il codice in questo blocco.
|
||
console.log("Can't afford a new laptop, yet!");
|
||
}
|
||
```
|
||
|
||
### Operatore di Negazione
|
||
|
||
Finora si è visto come if può usare un'istruzione `if... else` per creare logica condizionale. Tutto ciò che va in un `if` deve essere valutato come vero / falso. Utilizzando l'operatore `!` si può _negare_ l'espressione. Sarebbe così:
|
||
|
||
```javascript
|
||
if (!condition) {
|
||
// si esegue se condition è falso
|
||
} else {
|
||
// si esegue se condition è vero
|
||
}
|
||
```
|
||
|
||
### Espressioni ternarie
|
||
|
||
`if...else` non è l'unico modo per esprimere la logica decisionale. Si può anche usare qualcosa chiamato operatore ternario. La sintassi è simile alla seguente:
|
||
|
||
```javascript
|
||
let variable = condition ? <ritorna questo se vero> : <ritorna questo se falso>
|
||
```
|
||
|
||
Di seguito è riportato un esempio più tangibile:
|
||
|
||
```javascript
|
||
let firstNumber = 20;
|
||
let secondNumber = 10
|
||
let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
|
||
```
|
||
|
||
✅ Ci si prenda un minuto per leggere questo codice alcune volte. Si capisce come lavorano questi operatori?
|
||
|
||
Quanto sopra afferma che
|
||
|
||
- se `firstNumber` è maggiore di `secondNumber`
|
||
- allora assegna `firstNumber` a `biggestNumber`
|
||
- altrimenti assegna `secondNumber`.
|
||
|
||
L'espressione ternaria è solo un modo compatto per scrivere il codice seguente:
|
||
|
||
```javascript
|
||
let biggestNumber;
|
||
if (firstNumber > secondNumber) {
|
||
biggestNumber = firstNumber;
|
||
} else {
|
||
biggestNumber = secondNumber;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## 🚀 Sfida
|
||
|
||
Creare un programma che viene scritto prima con operatori logici, quindi riscriverlo utilizzando un'espressione ternaria. Qual è la propria sintassi preferita?
|
||
|
||
---
|
||
## Quiz Post-Lezione
|
||
[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=it)
|
||
|
||
## Revisione e Auto Apprendimento
|
||
|
||
Ulteriori informazioni sui numerosi operatori a disposizione dell'utente [su MDN](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators).
|
||
|
||
Esaminare la meravigliosa [consultazione sugli operatori di Josh Comeau](https://joshwcomeau.com/operator-lookup/)!
|
||
|
||
## Compito
|
||
|
||
[Operatori](assignment.it.md)
|