Eugene Goh
4 years ago
commit
6e63d69823
@ -0,0 +1,195 @@
|
|||||||
|
# Nozioni di base su JavaScript: tipi di dato
|
||||||
|
|
||||||
|
|
||||||
|
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## Quiz pre-lezione
|
||||||
|
[Quiz pre-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7)
|
||||||
|
|
||||||
|
Questa lezione copre le basi di JavaScript, il linguaggio che fornisce l'interattività sul web.
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=JNIXfGiDWM8 " di dato in JavaScript")
|
||||||
|
|
||||||
|
Si comincia con le variabili e i tipi di dato che le popolano!
|
||||||
|
|
||||||
|
## Variabili
|
||||||
|
|
||||||
|
Le variabili memorizzano valori che possono essere utilizzati e modificati in tutto il codice.
|
||||||
|
|
||||||
|
La creazione e la **dichiarazione** di una variabile hanno la seguente sintassi **[parola chiave] [nome]**. È composto da due parti:
|
||||||
|
|
||||||
|
- **Parola chiave**. Le parole chiave possono essere `let` o `var`.
|
||||||
|
|
||||||
|
> Nota, la parola chiave `let` è stata introdotta in ES6 e assegna alla variabile un cosiddetto _ambito di blocco_. Si consiglia di preferire `let` a `var`. Si trattereranno i blocchi di ambito in modo più approfondito nelle parti future.
|
||||||
|
- **Il nome della variabile**, questo è un nome che sceglie lo sviluppatore
|
||||||
|
|
||||||
|
### Compito - Lavorare con le variabili
|
||||||
|
|
||||||
|
1. **Dichiarare una variabile**. Si dichiari una variabile utilizzando la parola chiave `let` :
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myVariable;
|
||||||
|
```
|
||||||
|
|
||||||
|
`myVariable` è stata ora dichiarata utilizzando la parola chiave `let` . Attualmente non ha un valore.
|
||||||
|
|
||||||
|
1. **Assegnare un valore**. Memorizzare un valore in una variabile con l 'operatore `=` , seguito dal valore atteso.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
myVariable = 123;
|
||||||
|
```
|
||||||
|
|
||||||
|
> Nota: l'uso di `=` in questa lezione significa che si utilizza un "operatore di assegnazione", utilizzato per assegnare un valore a una variabile. Non denota uguaglianza.
|
||||||
|
|
||||||
|
`myVariable` è stata ora *inizializzata* con il valore 123.
|
||||||
|
|
||||||
|
1. **Esecuzione del refactoring**. Sostituire il proprio codice con la seguente dichiarazione.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myVariable = 123;
|
||||||
|
```
|
||||||
|
|
||||||
|
Quanto sopra è chiamato _inizializzazione esplicita_ quando una variabile viene dichiarata e viene assegnato un valore allo stesso tempo.
|
||||||
|
|
||||||
|
1. **Modificare il valore della variabile**. Si modifica il valore della variabile nel modo seguente:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
myVariable = 321;
|
||||||
|
```
|
||||||
|
|
||||||
|
Una volta dichiarata una variabile, è possibile modificarne il valore in qualsiasi punto del codice con l'operatore `=` e il nuovo valore.
|
||||||
|
|
||||||
|
✅ Proviamolo! Si può scrivere JavaScript direttamente nel proprio browser. Aprire una finestra del browser e andare a Developer Tools (Strumenti per Sviluppatori). Nella console si troverà un prompt; digitare `let myVariable = 123`, premere Invio, quindi digitare `myVariable`. Che cosa accade? Nota, si apprenderà di più su questi concetti nelle lezioni successive.
|
||||||
|
|
||||||
|
## Costanti
|
||||||
|
|
||||||
|
La dichiarazione e l'inizializzazione di una costante segue gli stessi concetti di una variabile, a eccezione della parola chiave `const` . Le costanti sono generalmente dichiarate con tutte le lettere maiuscole.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const MY_VARIABLE = 123;
|
||||||
|
```
|
||||||
|
|
||||||
|
Le costanti sono simili alle variabili, con due eccezioni:
|
||||||
|
|
||||||
|
- **Devono avere un valore**. Le costanti devono essere inizializzate o si verificherà un errore durante l'esecuzione del codice.
|
||||||
|
- **Il riferimento non può essere modificato**. Il riferimento di una costante non può essere modificato una volta inizializzato o si verificherà un errore durante l'esecuzione del codice. Si considerino due esempi:
|
||||||
|
- **Valore semplice**. Quanto segue NON è consentito:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const PI = 3;
|
||||||
|
PI = 4; // non consentito
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Il riferimento all'oggetto è protetto**. Quanto segue NON è consentito:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const obj = { a: 3 };
|
||||||
|
obj = { b: 5 } // non consentito
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Il valore dell'oggetto NON è protetto**. Quanto segue E' consentito:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const obj = { a: 3 };
|
||||||
|
obj.a = 5; // consentito
|
||||||
|
```
|
||||||
|
|
||||||
|
Sopra si sta modificando il valore dell'oggetto ma non il riferimento stesso, il che lo rende consentito.
|
||||||
|
|
||||||
|
> Nota, `const` indica che il riferimento è protetto dalla riassegnazione. Il valore però non è _immutabile_ e può cambiare, soprattutto se si tratta di un costrutto complesso come un oggetto.
|
||||||
|
|
||||||
|
## Tipi di Dato
|
||||||
|
|
||||||
|
Le variabili possono memorizzare molti tipi diversi di valore, come numeri e testo. Questi vari tipi di valore sono noti come **tipo di dato**. I tipi di dato sono una parte importante dello sviluppo del software perché aiutano gli sviluppatori a prendere decisioni su come si dovrebbe scrivere il codice e su come si dovrebbe eseguire il software. Inoltre, alcuni tipi di dato hanno caratteristiche uniche che aiutano a trasformare o estrarre informazioni aggiuntive in un valore.
|
||||||
|
|
||||||
|
✅ I tipi di dato sono indicati anche come dati primitivi di JavaScript, poiché sono i tipi di dato di livello più basso forniti dal linguaggio. Esistono 6 tipi di dato primitivi: string, number, bigint, boolean, undefined e symbol. Si preda un minuto per visualizzare ciò che ciascuno di questi primitivi potrebbe rappresentare. Cos'è una `zebra`? Va bene `0`? `true`?
|
||||||
|
|
||||||
|
### Numeri
|
||||||
|
|
||||||
|
Nella sezione precedente, il valore di `myVariable` era un tipo di dato number (numero).
|
||||||
|
|
||||||
|
`let myVariable = 123;`
|
||||||
|
|
||||||
|
Le variabili possono memorizzare tutti i tipi di numero, inclusi decimali o numeri negativi. I numeri possono anche essere usati con operatori aritmetici, trattati nella [prossima sezione](#operators).
|
||||||
|
|
||||||
|
### Operatori aritmetici
|
||||||
|
|
||||||
|
Esistono diversi tipi di operatori da utilizzare quando si eseguono funzioni aritmetiche e alcuni sono elencati qui:
|
||||||
|
|
||||||
|
| Simbolo | Descrizione | Esempio |
|
||||||
|
| ------ | ------------------------------------------------------------------------ | -------------------------------- |
|
||||||
|
| `+` | **Addizione**: calcola la somma di due numeri | `1 + 2 // la risposta attesa è 3` |
|
||||||
|
| `-` | **Sottrazione**: calcola la differenza tra due numeri | `1-2 // la risposta attesa è -1` |
|
||||||
|
| `*` | **Moltiplicazione**: calcola il prodotto di due numeri | `1 * 2 // la risposta attesa è 2` |
|
||||||
|
| `/` | **Divisione**: calcola il quoziente di due numeri | `1/2 // la risposta attesa è 0,5` |
|
||||||
|
| `%` | **Resto**: calcola il resto dalla divisione di due numeri | `1 % 2 // la risposta attesa è 1` |
|
||||||
|
|
||||||
|
✅ Proviamolo! Provare un'operazione aritmetica nella console del proprio browser. I risultati sorprendono?
|
||||||
|
|
||||||
|
### Stringhe
|
||||||
|
|
||||||
|
Le stringhe sono insiemi di caratteri che risiedono tra virgolette singole o doppie.
|
||||||
|
|
||||||
|
- `'Questa è una stringa'`
|
||||||
|
- `"Anche questa è una stringa"`
|
||||||
|
- `let myString = 'Questo è un valore string memorizzato in una variabile';`
|
||||||
|
|
||||||
|
Ricordare di usare le virgolette quando si scrive una stringa, altrimenti JavaScript presumerà che sia un nome di variabile.
|
||||||
|
|
||||||
|
### Formattazione delle stringhe
|
||||||
|
|
||||||
|
Le stringhe sono testuali e richiedono una formattazione di volta in volta.
|
||||||
|
|
||||||
|
Per **concatenare** due o più stringhe o unirle insieme, utilizzare l'operatore `+`.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myString1 = "Hello";
|
||||||
|
let myString2 = "World";
|
||||||
|
|
||||||
|
myString1 + myString2 + "!"; //HelloWorld!
|
||||||
|
myString1 + " " + myString2 + "!"; //Hello World!
|
||||||
|
myString1 + ", " + myString2 + "!"; //Hello, World!
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Perchè `1 + 1 = 2 in` JavaScript, ma `'1' + '1' = 11?` Ci si rifletta. Che dire di `"1" + 1`?
|
||||||
|
|
||||||
|
I **template literal** sono un altro modo per formattare le stringhe, tranne per il fatto che al posto delle virgolette viene utilizzato il carattere backtick (\`). Tutto ciò che non è testo normale deve essere inserito nei segnaposto `${}`. Questo include tutte le variabili che possono essere stringhe.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let myString1 = "Hello";
|
||||||
|
let myString2 = "World";
|
||||||
|
|
||||||
|
`${myString1} ${myString2}!` //Hello World!
|
||||||
|
`${myString1}, ${myString2}!` //Hello, World!
|
||||||
|
```
|
||||||
|
|
||||||
|
Si possono raggiungere i propri obiettivi di formattazione con entrambi i metodi, ma i template literal rispetteranno eventuali spazi e interruzioni di riga.
|
||||||
|
|
||||||
|
✅ Quando si dovrebbe usare un template literal rispetto a una semplice stringa?
|
||||||
|
|
||||||
|
### Booleani
|
||||||
|
|
||||||
|
I booleani possono avere solo due valori: vero (`true`) o falso (`false`). I booleani possono aiutare a prendere decisioni su quali righe di codice devono essere eseguite quando vengono soddisfatte determinate condizioni. In molti casi, [gli operatori](#operators) assistono nell'impostazione del valore di un Booleano e spesso si noteranno e scriveranno variabili inizializzate o i loro valori aggiornati con un operatore.
|
||||||
|
|
||||||
|
- `let myTrueBool = true`
|
||||||
|
- `let myFalseBool = false`
|
||||||
|
|
||||||
|
✅ Una variabile può essere considerata "veritiera" se restituisce un valore booleano `true`. È interessante notare che in JavaScript [tutti i valori sono veritieri a meno che non siano definiti falsi](https://developer.mozilla.org/en-US/docs/Glossary/Truthy).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Sfida
|
||||||
|
|
||||||
|
JavaScript è noto per i suoi modi sorprendenti di gestire talvolta i tipi di dato. Effettuare un po' di ricerca su questi "trabocchetti". Ad esempio: la distinzione tra maiuscole e minuscole può mordere! Provare questo nella propria console: `let age = 1; let Age = 2; age == Age` (risulta `false` - perché?). Quali altri trabocchetti si riescono a trovare?
|
||||||
|
|
||||||
|
## quiz post-lezione
|
||||||
|
[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8)
|
||||||
|
|
||||||
|
## Revisione e auto apprendimento
|
||||||
|
|
||||||
|
Esaminare [questo elenco di esercizi JavaScript](https://css-tricks.com/snippets/javascript/) e provarne uno. Che cosa si è imparato?
|
||||||
|
|
||||||
|
## Assegnazione
|
||||||
|
|
||||||
|
[Esercizi sui tipi di dato](assignment.it.md)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# Esercizi sui Tipi di Dato
|
||||||
|
|
||||||
|
## Istruzioni
|
||||||
|
|
||||||
|
Si immagini di costruire un carrello della spesa. Si scriva della documentazione sui tipi di dati necessari per completare la propria esperienza di acquisto. Come si è pervenuti alle proprie scelte?
|
||||||
|
|
||||||
|
## Rubrica
|
||||||
|
|
||||||
|
Criteri | Ottimo | Adeguato | Necessari miglioramenti
|
||||||
|
--- | --- | --- | - |
|
||||||
|
|| I sei tipi di dato sono elencati ed esplorati in dettaglio, documentando il loro utilizzo | Vengono esplorati quattro tipi di dati | Vengono esplorati due tipi di dati |
|
||||||
@ -0,0 +1,195 @@
|
|||||||
|
# Nozioni di base su JavaScript: Metodi e Funzioni
|
||||||
|
|
||||||
|
|
||||||
|
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## Quiz pre-lezione
|
||||||
|
|
||||||
|
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/9)
|
||||||
|
|
||||||
|
Quando si pensa di scrivere codice, ci si vuole sempre assicurare che il proprio codice sia leggibile. Anche se questo sembra controintuitivo, il codice viene letto molte più volte di quanto non venga scritto. Uno strumento base nella cassetta degli attrezzi dello sviluppatore è la **funzione**
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
|
||||||
|
|
||||||
|
## Funzioni
|
||||||
|
|
||||||
|
Essenzialmente, una funzione è un blocco di codice che si può eseguire su richiesta. Questo è perfetto per gli scenari in cui si deve eseguire la stessa attività più volte; invece di duplicare la logica in più posizioni (il che renderebbe difficile l'aggiornamento quando arriva il momento), è possibile centralizzarla in una posizione e chiamarla ogni volta che serve eseguire quell'operazione - è possibile persino chiamare funzioni da altre funzioni!.
|
||||||
|
|
||||||
|
Altrettanto importante è la capacità di nominare una funzione. Anche se questo potrebbe sembrare banale, il nome fornisce un modo rapido per documentare una sezione di codice. Si potrebbe pensare a questo come un'etichetta su un pulsante. Se clicco su un pulsante che dice "Annulla timer", so che interromperà il conteggio del tempo.
|
||||||
|
|
||||||
|
## Creare e chiamare una funzione
|
||||||
|
|
||||||
|
La sintassi di una funzione è simile alla seguente:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function nameOfFunction() { // definizione della funzione
|
||||||
|
// definizione della funzione/corpo
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Se si volesse creare una funzione per visualizzare un saluto, potrebbe assomigliare a questo:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayGreeting() {
|
||||||
|
console.log('Hello, world!');
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Ogniqualvolta si voglia chiamare (o invocare) una funzione, si usa il nome della funzione seguito da `()`. Vale la pena notare il fatto che la funzione può essere definita prima o dopo aver deciso di chiamarla; il compilatore JavaScript la troverà da solo.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// chiamata della funzione
|
||||||
|
displayGreeting();
|
||||||
|
```
|
||||||
|
|
||||||
|
> Esiste un tipo speciale di funzione, noto come metodo, che già si sta usando! In effetti questo si è visto nella demo di cui sopra quando si è usato `console.log`. Quello che rende un metodo diverso da una funzione è che il metodo è attaccato a un oggetto (la console nell'esempio), mentre una funzione è libera.Si sentiranno molti sviluppatori usare questi termini in modo intercambiabile.
|
||||||
|
|
||||||
|
### Migliori pratiche per la funzione
|
||||||
|
|
||||||
|
Ci sono alcune buone pratiche da tenere a mente quando si creano funzioni
|
||||||
|
|
||||||
|
- Come sempre, usare nomi descrittivi in modo da sapere cosa farà la funzione
|
||||||
|
- Usare la notazione a cammello (camelCase) per combinare le parole
|
||||||
|
- Mantenere le proprie funzioni concentrate su un'attività specifica
|
||||||
|
|
||||||
|
## Passare di informazioni a una funzione
|
||||||
|
|
||||||
|
Per rendere una funzione più riutilizzabile spesso si vorrà passarle delle informazioni. Se si considera la funzione di esempio `displayGreeting` qui sopra, visualizzerà solamente `Hello, world!`.Non è la funzione più utile che si possa creare. Se la si vuole rendere un poco più flessibile, tipo consentire a qualcuno di specificare il nome della persona da salutare, si può aggiungere un **parametro**. Un parametro (talvota chiamato anche **argomento**), è una informazione addizionale inviata alla funzione.
|
||||||
|
|
||||||
|
I parametri sono elencati nella parte di definizione tra parentesi e sono separati da virgole in questo modo:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function name(param, param2, param3) {
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
E' possibile aggiornare la funzione `displayGreeting` in modo che accetti un nome e lo visualizzi.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayGreeting(name) {
|
||||||
|
const message = `Hello, ${name}!`;
|
||||||
|
console.log(message);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Quando si vuole chiamare la funzione e passare il parametro, lo si specifica tra parentesi.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
displayGreeting('Christopher');
|
||||||
|
// visualizza "Hello, Christopher!" quando eseguita
|
||||||
|
```
|
||||||
|
|
||||||
|
## Valori predefiniti
|
||||||
|
|
||||||
|
E' possibile rendere la funzione ancora più flessibile aggiungendo più parametri. Ma cosa succede se non si vuole richiedere che ogni valore sia specificato? Continuando con l'esempio di saluto, si potrebbe lasciare il nome come richiesto (serve sapere chi si sta salutando), ma si vuole personalizzare coma desiderato anche il saluto. Se qualcuno non vuole personalizzarlo, si fornisce invece un valore predefinito. Per fornire a un parametro un valore predefinito, lo si imposta in modo praticamente uguale a come si assegna un valore a una variabile - `nomeParametro = 'valorePredefinito'`. Ecco un esempio completo:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayGreeting(name, salutation='Hello') {
|
||||||
|
console.log(`${salutation}, ${name}`);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Quando si chiama la funzione, è possibile poi decidere se si vuole impostare un valore per `salutation`.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
displayGreeting('Christopher');
|
||||||
|
// visualizza "Hello, Christopher"
|
||||||
|
|
||||||
|
displayGreeting('Christopher', 'Hi');
|
||||||
|
// visualizza "Hi, Christopher"
|
||||||
|
```
|
||||||
|
|
||||||
|
## Valori restituiti
|
||||||
|
|
||||||
|
Fino ad ora la funzione costruita mostrerà sempre il suo risultato alla [console](https://https://developer.mozilla.org/it/docs/Web/API/Console). A volte questo può essere esattamente quello che si sta cercando, specialmente quando si creano funzioni che chiameranno altri servizi. Ma cosa succede se si vuole creare una funzione di supporto per eseguire un calcolo e ritornare il valore in modo da poterlo utilizzare altrove?
|
||||||
|
|
||||||
|
Si può fare utilizzando un **valore di ritorno**. Un valore di ritorno viene restituito dalla funzione e può essere memorizzato in una variabile proprio come si potrebbe memorizzare un valore letterale come una stringa o un numero.
|
||||||
|
|
||||||
|
Se una funzione ritorna qualcosa allora si deve usare la parola chiave `return`. La parola chiave `return` si attende un valore o un riferimento a ciò che viene ritornato, in questo modo:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
return myVariable;
|
||||||
|
```
|
||||||
|
|
||||||
|
Si potrebbe creare una funzione per creare un messaggio di saluto e restituire il valore al chiamante
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function createGreetingMessage(name) {
|
||||||
|
const message = `Hello, ${name}`;
|
||||||
|
return message;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Quando si chiama questa funzione, il valore verrà memorizzato in una variabile. E' praticamente lo stesso modo nel quale si imposterebbe una variabile a un valore statico (tipo `const name = 'Christopher'`).
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const greetingMessage = createGreetingMessage('Christopher');
|
||||||
|
```
|
||||||
|
|
||||||
|
## Funzioni come parametri per funzioni
|
||||||
|
|
||||||
|
Man mano che si progredisce nella propria carriera di programmatore, ci si imbatterà in funzioni che accettano funzioni come parametri. Questo trucco è comunemente usato quando non si sa quando qualcosa accadrà o sarà completata, ma si sa che si deve eseguire un'operazione in risposta.
|
||||||
|
|
||||||
|
Come esempio si consideri [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), che fa partire un timer ed eseguirà del codice il tempo viene esaurito. Occorre dirgli quale codice si vuole eseguire. Sembra un lavoro perfetto per una funzione!
|
||||||
|
|
||||||
|
Se si esegue il codice qui sopra, dopo 3 secondi si vedrà il messaggio **3 seconds has elapsed** (sono trascorsi 3 secondi).
|
||||||
|
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayDone() {
|
||||||
|
console.log('3 seconds has elapsed');
|
||||||
|
}
|
||||||
|
// il valore del timer è in millisecondi
|
||||||
|
setTimeout(displayDone, 3000);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Funzioni anonime
|
||||||
|
|
||||||
|
Si dia un'altra occhiata a ciò che è stato costruito. Si sta creando una funzione con un nome che verrà utilizzata una volta. Man mano che la propria applicazione diventa più complessa, si può prevedere che verranno create molte funzioni che verranno chiamate solo una volta. Questo non è l'ideale. A quanto pare, non è sempre necessario fornire un nome!
|
||||||
|
|
||||||
|
Quando si passa una funzione come parametro, è possibile evitare di crearla in anticipo e invece costruirne una come parte del parametro. Si usa la stessa parola chiave `function`, ma invece la si costruisce come parametro.
|
||||||
|
|
||||||
|
Il codice qui sopra viene riscritto per utilizzare una funzione anonima:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
setTimeout(function() {
|
||||||
|
console.log('3 seconds has elapsed');
|
||||||
|
}, 3000);
|
||||||
|
```
|
||||||
|
|
||||||
|
Se si esegue adesso il nuovo codice si noterà che vengono ottenuti gli stessi risultati. E' stata creata una funzione, ma non si è dovuto darle un nome!
|
||||||
|
|
||||||
|
### Funzioni fat arrow
|
||||||
|
|
||||||
|
Una scorciatoia comune in molti linguaggi di programmazione (incluso JavaScript) è la possibilità di utilizzare quella che viene chiamata una funzione **freccia** o funzione **fat arrow** . Utilizza un indicatore speciale, `=>`, che assomiglia a una freccia, da cui il nome! Usando `=>`, è possibile saltare la parola chiave `function` .
|
||||||
|
|
||||||
|
Ora il codice viene riscritto ancora una volta (refattorizzato) per utilizzare una funzione fat arrow:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
setTimeout(() => {
|
||||||
|
console.log('3 seconds has elapsed');
|
||||||
|
}, 3000);
|
||||||
|
```
|
||||||
|
|
||||||
|
### Quando utilizzare ciascuna strategia
|
||||||
|
|
||||||
|
Ora che si è visto che ci sono tre modi per passare una funzione come parametro ci si potrebbe chiedere quando usare ciascuno di essi. Se si sa che funzione verrà utilizzata più di una volta, si crea normalmente. Se la si utilizzerà solo per una posizione, in genere è meglio utilizzare una funzione anonima. Se si usa o meno una funzione fat arrow o la sintassi più tradizionale `function` dipende dallo sviluppatore, ma si noterà che la maggior parte degli sviluppatori moderni preferisce `=>`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Sfida
|
||||||
|
|
||||||
|
Si riesce ad articolare in una frase la differenza tra funzioni e metodi? Fare un tentativo!
|
||||||
|
|
||||||
|
## Quiz post-lezione
|
||||||
|
|
||||||
|
[Quiz post-lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/10)
|
||||||
|
|
||||||
|
## Revisione e auto apprendimento
|
||||||
|
|
||||||
|
Vale la pena [leggere un poco di più sulle funzioni arrow](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), poiché sono sempre più utilizzate nelle basi di codice. Esercitarsi a scrivere una funzione, quindi riscriverla con questa sintassi.
|
||||||
|
|
||||||
|
## Compito
|
||||||
|
|
||||||
|
[Divertimento con le funzioni](assignment.it.md)
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Divertimento con le funzioni
|
||||||
|
|
||||||
|
## Istruzioni
|
||||||
|
|
||||||
|
Creare diverse funzioni, sia funzioni che restituiscono qualcosa che funzioni che non restituiscono nulla.
|
||||||
|
|
||||||
|
Provare a creare una funzione che abbia un mix di parametri e parametri con valori predefiniti.
|
||||||
|
|
||||||
|
## Rubrica
|
||||||
|
|
||||||
|
| Criteri | Ottimo | Adeguato | Necessita miglioramento |
|
||||||
|
| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
|
||||||
|
| | La soluzione è offerta con due o più funzioni con buone prestazioni con diversi parametri | La soluzione funzionante è offerta con una funzione e pochi parametri | La soluzione ha bug |
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
# Operatori
|
||||||
|
|
||||||
|
## Istruzioni
|
||||||
|
|
||||||
|
Giocare con gli operatori. Ecco un suggerimento per un programma che si potrebbe implementare:
|
||||||
|
|
||||||
|
Ci sono due gruppi di studenti per due diversi sistemi di graduatoria.
|
||||||
|
|
||||||
|
### Primo sistema di graduatoria
|
||||||
|
|
||||||
|
Un sistema di graduatoria è definito da voti che vanno da 1 a 5 dove 3 e superiore significa che la prova è stata completata con successo.
|
||||||
|
|
||||||
|
### Secondo sistema di graduatoria
|
||||||
|
|
||||||
|
L'altro sistema di graduatoria ha i seguenti valori di giudizio: `A, A-, B, B-, C, C-` dove `A` è il giudizio migliore e `C` il giudizio minimo per superare la prova.
|
||||||
|
|
||||||
|
### Il compito
|
||||||
|
|
||||||
|
Dato l'array seguente `allStudents` rappresentare tutti gli studenti e le loro valutazioni, costruire un nuvo array `studentsWhoPass` che contiene tutti gli studenti che hanno superato la prova.
|
||||||
|
|
||||||
|
> SUGGERIMENTO, usare un ciclo for, if...else e gli operatori di confronto:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let allStudents = [
|
||||||
|
'A',
|
||||||
|
'B-',
|
||||||
|
1,
|
||||||
|
4,
|
||||||
|
5,
|
||||||
|
2
|
||||||
|
]
|
||||||
|
|
||||||
|
let studentsWhoPass = [];
|
||||||
|
```
|
||||||
|
|
||||||
|
## Rubrica
|
||||||
|
|
||||||
|
| Criterio | Eccellente | Sufficiente | Necessita Miglioramenti |
|
||||||
|
| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
|
||||||
|
| | Viene presentata la soluzione completa | Viene presentata la soluzione parziale | La soluzione presentata ha bug |
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
# Nozioni di base di JavaScript: Array e Cicli
|
||||||
|
|
||||||
|
|
||||||
|
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## Quiz Pre-Lezione
|
||||||
|
[Quiz Pre-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13)
|
||||||
|
|
||||||
|
Questa lezione tratta le basi di javascript, il linguaggio che fornisce interattività sul web. In questa lezione, si conosceranno gli array e i cicli, usati per manipolare i dati.
|
||||||
|
|
||||||
|
[](https://youtube.com/watch?v=Q_CRM2lXXBg " Array e loop")
|
||||||
|
|
||||||
|
## Array
|
||||||
|
|
||||||
|
Lavorare con i dati è un'attività comune per qualsiasi linguaggio ed è un'attività molto più semplice quando i dati sono organizzati in un formato strutturale, come gli array. Con gli array, i dati vengono memorizzati in una struttura simile a un elenco. Uno dei principali vantaggi degli array è che si possono memorizzare diversi tipi di dati in un array.
|
||||||
|
|
||||||
|
✅ Gli array sono tutti intorno a noi! Si riesce a pensare a un esempio reale di un array, come un array di pannelli solari?
|
||||||
|
|
||||||
|
La sintassi per un array è una coppia di parentesi quadre.
|
||||||
|
|
||||||
|
`let myArray = [];`
|
||||||
|
|
||||||
|
Questo è un array vuoto, ma gli array possono essere dichiarati già popolati con i dati. Più valori in un array sono separati da una virgola.
|
||||||
|
|
||||||
|
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
|
||||||
|
|
||||||
|
Ai valori dell'array viene assegnato un valore univoco chiamato **indice**, un numero intero che viene assegnato a un elemento in base alla sua distanza dall'inizio dell'array. Nell'esempio precedente, il valore di stringa "Chocolate" ha un indice di 0 e l'indice di "Rocky Road" è 4. Si utilizza l'indice all'interno di parentesi quadre per recuperare, modificare o inserire valori di matrice.
|
||||||
|
|
||||||
|
✅ Sorprende che gli array inizino con l'indice zero? In alcuni linguaggi di programmazione, gli indici iniziano da 1. C'è una storia interessante a questo proposito, che si può [leggere su Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||||
|
iceCreamFlavors[2]; //"Vanilla"
|
||||||
|
```
|
||||||
|
|
||||||
|
Si può sfruttare l'indice per modificare un valore, in questo modo:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
iceCreamFlavors[4] = "Butter Pecan"; //Modificato "Rocky Road" in "Butter Pecan"
|
||||||
|
```
|
||||||
|
|
||||||
|
Si può inserire un nuovo valore a una data posizione in questo modo:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
iceCreamFlavors[5] = "Cookie Dough"; //Aggiunto "Cookie Dough"
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Un modo più comune per inviare valori a un array è usare operatori di array come array.push()
|
||||||
|
|
||||||
|
Per scoprire quanti elementi ci sono in un array, si usa la proprietà `length` .
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||||
|
iceCreamFlavors.length; //5
|
||||||
|
```
|
||||||
|
|
||||||
|
Fare una prova! Si usi la console del proprio browser per creare e manipolare un array che si è creato.
|
||||||
|
|
||||||
|
## Cicli
|
||||||
|
|
||||||
|
I cicli consentono attività ripetitive o **iterative** e possono far risparmiare molto tempo e codice. Ogni iterazione può variare nelle proprie variabili, valori e condizioni. Esistono diversi tipi di cicli in JavaScript e presentano piccole differenze, ma essenzialmente fanno la stessa cosa: iterare sui dati.
|
||||||
|
|
||||||
|
### Ciclo For
|
||||||
|
|
||||||
|
Il ciclo `for` richiede 3 parti per iterare:
|
||||||
|
|
||||||
|
- `counter`: Una variabile tipicamente inizializzata con un numero che conta il numero di iterazioni.
|
||||||
|
- `condizione`: Espressione che utilizza operatori di confronto per arrestare il ciclo quando viene ritornato `true`
|
||||||
|
- `espressione-di-iterazione`: Viene eseguita alla fine di ogni iterazione, tipicamente utilizzata per modificare il valore del contatore
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//Conta fino a 10
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
console.log(i);
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Si esegua questo codice in una console del browser. Cosa succede quando si apportano piccole modifiche al contatore, alla condizione o all'espressione di iterazione? E' possibile farlo funzionare all'indietro, creando un conto alla rovescia?
|
||||||
|
|
||||||
|
### Ciclo While
|
||||||
|
|
||||||
|
A differenza della sintassi per il ciclo `for` , i cicli `while` richiedono solo una condizione che interromperà il ciclo quando ritorna `true`. Le condizioni nei cicli di solito si basano su altri valori come i contatori e devono essere gestite durante il ciclo. I valori iniziali per i contatori devono essere creati all'esterno del ciclo e qualsiasi espressione per soddisfare una condizione, inclusa la modifica del contatore, deve essere mantenuta all'interno del ciclo.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
//Conta fino a 10
|
||||||
|
let i = 0;
|
||||||
|
while (i < 10) {
|
||||||
|
console.log(i);
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Perché si sceglierebbe un ciclo for invece di un ciclo while? 17k di di utenti di StackOverflow hanno fatto la stessa domanda e alcune opinioni [potrebbero essere interessanti](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
|
||||||
|
|
||||||
|
## Cicli e Array
|
||||||
|
|
||||||
|
Gli array vengono spesso utilizzati con i cicli perché la maggior parte delle condizioni verifica la lunghezza dell'array per interrompere il ciclo e l'indice può anche essere il valore del contatore.
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||||
|
|
||||||
|
for (let i = 0; i < iceCreamFlavors.length; i++) {
|
||||||
|
console.log(iceCreamFlavors[i]);
|
||||||
|
} //Termina quando tutti i gusti sono stati stampati
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ Sperimentare l'iterazione su un array di propria creazione nella console del browser.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Sfida
|
||||||
|
|
||||||
|
Esistono altri modi per eseguire un ciclo sugli array. diversi dai cicli for e while. Ci sono [forEach](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Statements/for...of) e [map](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Riscrivere il ciclo sull'array usando una di queste tecniche.
|
||||||
|
|
||||||
|
## Quiz Post-Lezione
|
||||||
|
[Quiz Post-Lezione](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
|
||||||
|
|
||||||
|
|
||||||
|
## Revisione e Auto Apprendimento
|
||||||
|
|
||||||
|
Gli array in JavaScript hanno molti metodi ad essi assegnati, estremamente utili per la manipolazione dei dati. [Informarsi su questi metodi](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array) e provarne alcuni (come push, pop, slice e splice) su un array di propria creazione.
|
||||||
|
|
||||||
|
## Compito
|
||||||
|
|
||||||
|
[Ciclo su un Array](assignment.it.md)
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
# Ciclo su un Array
|
||||||
|
|
||||||
|
## Istruzioni
|
||||||
|
|
||||||
|
Creare un programma che elenchi ogni terzo numero tra 1-20 e lo stampi alla console.
|
||||||
|
|
||||||
|
> SUGGERIMENTO: usare un ciclo for e modificare l'espressione di iterazione
|
||||||
|
|
||||||
|
## Rubrica
|
||||||
|
|
||||||
|
| Criterio | Eccellente | Sufficiente | Necessita miglioramenti |
|
||||||
|
| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
|
||||||
|
| | Il programma viene eseguito correttamente ed è commentato |Il programma non è commentato | Il programma è incompleto o presenta bug |
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
# Introduzione a JavaScript
|
||||||
|
|
||||||
|
JavaScript è il linguaggio del web. In queste quattro lezioni, si impareranno le sue basi.
|
||||||
|
|
||||||
|
### Argomenti
|
||||||
|
|
||||||
|
1. [Variabili e Tipi di Dato](1-data-types/translations/README.it.md)
|
||||||
|
2. [Funzioni e Metodi](2-functions-methods/translations/README.it.md)
|
||||||
|
3. [Prendere Decisioni con JavaScript](3-making-decisions/translations/README.it.md)
|
||||||
|
4. [Array e Cicli](4-arrays-loops/translations/README.it.md)
|
||||||
|
|
||||||
|
### Crediti
|
||||||
|
|
||||||
|
Queste lezioni sono state scritte con il ♥️ da [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) e [Chris Noring](https://twitter.com/chris_noring)
|
||||||
Loading…
Reference in new issue