diff --git a/1-js/01-getting-started/1-intro/article.md b/1-js/01-getting-started/1-intro/article.md index 1e4f331f1..6d9b03eee 100644 --- a/1-js/01-getting-started/1-intro/article.md +++ b/1-js/01-getting-started/1-intro/article.md @@ -26,7 +26,7 @@ Esistono altri motori JavaScript, tra cui: - [V8](https://en.wikipedia.org/wiki/V8_(JavaScript_engine)) -- per Chrome e Opera. - [SpiderMonkey](https://en.wikipedia.org/wiki/SpiderMonkey) -- per Firefox. -- ...Ci sono altri codenames come "Chakra" per IE, "ChakraCore" specifico per Microsoft Edge, "Nitro" e "SquirrelFish" per Safari, etc. +- ...Ci sono altri codenames come "Chakra" per IE, "JavaScriptCore", "Nitro" e "SquirrelFish" per Safari, etc. I nomi citati sopra possono essere utili da ricordare, poiché si possono trovare spesso in articoli che trattano di sviluppo web. Anche noi li useremo. Ad esempio, se "una caratteristica X è supportata da V8", probabilmente funzioneranno senza problemi in Chrome e Opera. diff --git a/1-js/02-first-steps/02-structure/article.md b/1-js/02-first-steps/02-structure/article.md index b22e40709..e95422841 100644 --- a/1-js/02-first-steps/02-structure/article.md +++ b/1-js/02-first-steps/02-structure/article.md @@ -45,7 +45,7 @@ alert(3 + + 2); ``` -Il codice stampa `6` perché, in questo caso, JavaScript non inserisce un punto e virgola. E' abbastanza ovvio che se la riga finisce con un `"+"`, allora è un "espressione incompleta", quindi il punto e virgola non verrà inserito. Per questo, nell'esempio sopra, tutto funziona come dovrebbe. +Il codice stampa `6` perché, in questo caso, JavaScript non inserisce un punto e virgola. E' abbastanza ovvio che se la riga finisce con un `"+"`, allora è un "espressione incompleta", quindi il punto e virgola sarebbe errato. Per questo, nell'esempio sopra, tutto funziona come dovrebbe. **Ma ci sono casi in cui JavaScript "fallisce" nell'interpretare un punto e virgola, dove invece sarebbe necessario.** @@ -55,39 +55,38 @@ Gli errori di questo tipo sono molto difficili da trovare e sistemare. Se sei curioso di vedere un esempio concreto di questo tipo di errore, dai un occhiata al seguente codice: ```js run -[1, 2].forEach(alert) +alert("Hello"); + +[1, 2].forEach(alert); ``` Non c'e bisogno di pensare al significato delle parentesi `[]` e al `forEach`. Li studieremo più avanti, per ora è sufficiente sapere il risultato: mostrerà `1` e poi `2`. -Adesso andiamo ad aggiungere un `alert` prima del codice e *non* concludiamo la riga con il punto e virgola: +Adesso andiamo a rimuovere il punto e virgola dopo `alert`: ```js run no-beautify -alert("There will be an error") +alert("Hello") -[1, 2].forEach(alert) +[1, 2].forEach(alert); ``` -Adesso se lo eseguiamo, solo il primo `alert` viene mostrato, poi avremmo un errore! - -Ma tutto si risolve aggiungendo un punto e virgola dopo `alert`: -```js run -alert("All fine now"); +La differenza rispetto al codice precedente è solo un carattere, il punto e virgola al termine della prima line è sparito. -[1, 2].forEach(alert) -``` +Se eseguiamo il codice, verrà mostrato solo il primo `Hello` (ci sarà un errore, ma per visualizzarlo bisogna aprire la console). Non verranno più mostrati i numeri. -Adesso avremmo il messaggio "All fine now", successivamente `1` seguito da `2`. +Questo perché JavaScript non inserisce il punto e virgola prima della parentesi quadre `[...]`. Quindi il codice viene interpretato come un singolo comando. -L'errore nel non aver messo il punto e virgola è avvenuto perché JavaScript non inserisce automaticamente un punto e virgola prima delle parentesi quadre `[...]`. - -Quindi, poiché il punto e virgola non viene auto-inserito, il codice del precedente esempio viene trattato come un istruzione singola. Infatti il motore JavaScript lo vede cosi: +Ecco come il motore interpreta il codice: ```js run no-beautify -alert("There will be an error")[1, 2].forEach(alert) +alert("Hello")[1, 2].forEach(alert); ``` -Anche se se in realtà sono due istruzioni separate, non una singola. Questo tipo di interpretazione, in questo caso è errata. Ci possono essere altre situazioni in cui si verifica questo tipo di errore. +Looks weird, right? Such merging in this case is just wrong. We need to put a semicolon after `alert` for the code to work correctly. + +Sembra strano, vero? Questo comportamento in questo caso è errato. E' necessario mettere un punto e virgola dopo `alert` affinché il codice funzioni correttamente. + +Questo accade anche in altre situazioni. ```` E' consigliato quindi, di inserire il punto e virgola fra ogni istruzione, anche se vengono scritte in righe diverse. Questa è una regola largamente adottata dalla community. Ripetiamolo nuovamente -- *è possibile* omettere il punto e virgola la maggior parte delle volte. Ma è più sicuro -- specialmente per un novizio -- inserirlo al termine di ogni istruzione. @@ -110,7 +109,7 @@ alert('Hello'); alert('World'); // Questo commento segue un istruzione ``` -**I commenti multilinea incominciano con un singolo carattere di slahs ed un asterisco /* e finiscono con un asterisco ed un carattere di slash */.** +**I commenti multilinea incominciano con un singolo carattere di slash ed un asterisco /* e finiscono con un asterisco ed un carattere di slash */.** Come nell'esempio: diff --git a/1-js/02-first-steps/05-types/article.md b/1-js/02-first-steps/05-types/article.md index 1b6775188..bd0fc7dfa 100644 --- a/1-js/02-first-steps/05-types/article.md +++ b/1-js/02-first-steps/05-types/article.md @@ -64,7 +64,7 @@ I numeri con valore speciale appartengono formalmente al tipo "numerico". Ovviam Vedremo di più su come lavorare con i numeri nel capitolo . -## BigInt +## BigInt [#bigint-type] In JavaScript, il tipo "number" non può rappresentare valori interni più grandi di (253-1) (che equivale a `9007199254740991`), o minori di -(253-1). Questa è una limitazione tecnica dovuta alla loro rappresentazione interna. diff --git a/1-js/02-first-steps/08-operators/article.md b/1-js/02-first-steps/08-operators/article.md index c8e02246c..cc772d4c8 100644 --- a/1-js/02-first-steps/08-operators/article.md +++ b/1-js/02-first-steps/08-operators/article.md @@ -66,7 +66,7 @@ Ad esempio: ```js run alert( 2 ** 2 ); // 2² = 4 -alert( 2 ** 3 ); // 2³ = 8 +alert( 2 ** 3 ); // 2³ = 8 alert( 2 ** 4 ); // 2⁴ = 16 ``` diff --git a/1-js/02-first-steps/15-function-basics/article.md b/1-js/02-first-steps/15-function-basics/article.md index dee2a5a58..bc2dc7a94 100644 --- a/1-js/02-first-steps/15-function-basics/article.md +++ b/1-js/02-first-steps/15-function-basics/article.md @@ -20,10 +20,10 @@ function showMessage() { } ``` -La parola chiave `function` va posta all'inizio; viene seguita dal *nome della funzione*, poi c'è una lista di *parametri*, racchiusi tra parentesi (in questo esempio la lista è vuota) e infine il codice della funzione, chiamato anche "corpo della funzione", racchiuso tra parentesi graffe. +La parola chiave `function` va posta all'inizio; viene seguita dal *nome della funzione*, poi c'è una lista di *parametri*, racchiusi tra parentesi (separati da virgola, in questo esempio la lista è vuota, vedremo un esempio più avanti) e infine il codice della funzione, chiamato anche "corpo della funzione", racchiuso tra parentesi graffe. ```js -function name(parameters) { +function name(parameter1, parameter2, ... parameterN) { ...body... } ``` @@ -137,26 +137,23 @@ Solitamente, una funzione dichiara internamente tutte le variabili necessarie pe ## Parametri -Possiamo passare dei dati arbitrari ad una funzione usando i parametri (chiamati anche *argomenti della funzione*). +Possiamo passare dei dati arbitrari ad una funzione usando i parametri. Nell'esempio sotto, la funzione ha due parametri: `from` e `text`. ```js run -function showMessage(*!*from, text*/!*) { // argomenti: from, text +function showMessage(*!*from, text*/!*) { // parametri: from, text alert(from + ': ' + text); } -*!* -showMessage('Ann', 'Hello!'); // Ann: Hello! (*) -showMessage('Ann', "What's up?"); // Ann: What's up? (**) -*/!* +*!*showMessage('Ann', 'Hello!');*/!* // Ann: Hello! (*) +*!*showMessage('Ann', "What's up?");*/!* // Ann: What's up? (**) ``` Quando la funzione viene chiamata nelle righe `(*)` e `(**)`, il valore passato viene copiato nelle variabili locali `from` e `text`, che verranno utilizzate nella chiamata ad `alert`. Guardiamo un altro esempio: abbiamo una variabile `from` e la passiamo a una funzione. Da notare: la funzione cambia `from`, ma il cambiamento non è visibile all'esterno perché la funzione usa sempre una copia del valore passato: - ```js run function showMessage(from, text) { @@ -175,6 +172,18 @@ showMessage(from, "Hello"); // *Ann*: Hello alert( from ); // Ann ``` +Quando un valore viene passato come parametro di funzione, vine anche chiamato *argomento*. + +In altre parole +In other words, per chiarire questi termini: + +- Un parametro è la variabile elencata tra parentesi nella dichiarazione della funzione (fa parte della dichiarazione). +- Un argomento è il valore passato alla funzione quando viene chiamata (fa parte della chiamata). + +Dichiariamo le funzioni elencando i loro parametri, quindi le chiamiamo passando gli argomenti. + +Nell'esempio sopra, si potrebbe dire: "la funzione `showMessage` è dichiarata con due parametri, quindi viene chiamata con due argomenti: `from` and `"Hello"`". + ## Valori di default Se non viene fornito alcun parametro, questa assume il valore `undefined`. @@ -185,9 +194,9 @@ Ad esempio, la funzione menzionata sopra `showMessage(from, text)` può essere c showMessage("Ann"); ``` -Questo non è un errore. Una chiamata simile mostrerà `"Ann: undefined"`. Non c'è nessun valore `text`, quindi si assume che `text === undefined`. +Questo non è un errore. Una chiamata simile mostrerà `"*Ann*: undefined"`. Siccome non viene passato nessun valore per `text`, questo è `undefined`. -Se volessimo utilizzare un `text` di "default", dovremmo specificarlo dopo `=`: +Possiamo specificare un cosiddetto valore "default" (da usare se l'argomento è omesso) per i parametri nella dichiarazione di funzione, usando `=`: ```js run function showMessage(from, *!*text = "no text given"*/!*) { @@ -209,19 +218,23 @@ function showMessage(from, text = anotherFunction()) { ``` ```smart header="Valutazione dei parametri di default" -In JavaScript, un parametro di default viene valutato ogni volta che viene chiamata una funzione senza i rispettivi parametri. Nell'esempio sopra, `anotherFunctions()` viene richiamata ogni volta che `someMessage()` viene chiamata senza il parametro `text`. -``` +In JavaScript, un parametro di default viene valutato ogni volta che viene chiamata una funzione senza i rispettivo argomento. + +Nell'esempio sopra, `anotherFunctions()` non viene chiamata se viene passato il parametro `text`. +Viene invece chiamata ogni volta che il parametro manca. +``` -#Parametri di default alternativi -In alcuni casi vorremmo assegnare un valore di default a un parametro non nella dichiarazione della funzione, ma dopo, durante la sua esecuzione. (inoltre, le vecchie edizioni di JavaScript non supportavano i parametri di default; quel che segue è un metodo per ovviare ad entrambe le necessità, e che potreste trovare di frequente nei vecchi script). +A volte ha senso assegnare valori default ai parametri, non nella dichiarazione della funzione, ma in una fase successiva. -Per controllare se un parametro è stato omesso possiamo compararlo con `undefined`: +Possiamo verificare se il parametro viene passato durante l'esecuzione della funzione, confrontandolo con `undefined`: ```js run function showMessage(text) { + // ... + *!* - if (text === undefined) { + if (text === undefined) { // if the parameter is missing text = 'empty message'; } */!* @@ -242,11 +255,12 @@ function showMessage(from, text) { } ``` -I moderni motori JavaScript supportano il [nullish coalescing operator](info:nullish-coalescing-operator) `??`, più efficiente quando valori falsi come `0`vengono considerati regolari: +I moderni motori JavaScript supportano il [nullish coalescing operator](info:nullish-coalescing-operator) `??`, più efficiente quando valori falsi come `0` vengono considerati regolari: ```js run //se non c'è un parametro "count", mostra "unknown" function showCount(count) { + // if count is undefined or null, show "unknown" alert(count ?? "unknown"); } diff --git a/1-js/03-code-quality/01-debugging-chrome/article.md b/1-js/03-code-quality/01-debugging-chrome/article.md index de4073984..a944af1b1 100644 --- a/1-js/03-code-quality/01-debugging-chrome/article.md +++ b/1-js/03-code-quality/01-debugging-chrome/article.md @@ -1,4 +1,4 @@ -# Debugging in Chrome +# Debugging in the browser Prima di scrivere codice più complesso, dovremmo parlare di debugging. diff --git a/1-js/04-object-basics/06-constructor-new/article.md b/1-js/04-object-basics/06-constructor-new/article.md index 81729429d..7286f0359 100644 --- a/1-js/04-object-basics/06-constructor-new/article.md +++ b/1-js/04-object-basics/06-constructor-new/article.md @@ -64,13 +64,14 @@ Ora, se vogliamo creare altri utenti, possiamo chiamare `new User("Ann")`, `new Questo è il principale scopo dei costruttori -- implementare codice riutilizzabile per la creazione di oggetti. -Ribadiamo -- tecnicamente, ogni funzione può essere utilizzata come costruttore. Ovvero: ogni funzione può essere eseguita con `new`. La "prima lettera maiuscola" è semplicemente una convenzione, per rendere esplicito che la funzione deve essere eseguita con `new`. +Ribadiamo -- tecnicamente, ogni funzione (eccetto le arrow functions, siccome non hanno `this`) può essere utilizzata come costruttore. Ovvero: ogni funzione può essere eseguita con `new`. La "prima lettera maiuscola" è semplicemente una convenzione, per rendere esplicito che la funzione deve essere eseguita con `new`. ````smart header="new function() { ... }" -Se abbiamo molte linee di codice utili alla creazione di un unico oggetto, possiamo raggrupparle in un costruttore, come qui: +Se abbiamo molte linee di codice utili alla creazione di un unico oggetto, possiamo raggrupparle in un costruttore richiamato contestualmente, come qui: ```js -let user = new function() { +// create a function and immediately call it with new +let user = new function() { this.name = "John"; this.isAdmin = false; @@ -80,7 +81,7 @@ let user = new function() { }; ``` -Il costruttore non può essere chiamato nuovamente, perché non è salvato da nessuna parte; viene solo creato e chiamato. Questo trucco consente di incapsulare un codice che costruisce un singolo oggetto, senza possibilità di riutilizzo futuro. +Il costruttore non può essere chiamato nuovamente, perché non è salvato da nessuna parte; viene solo creato e chiamato. Questo trucco consente di incapsulare un codice che costruisce un singolo oggetto, senza necessità di riutilizzo futuro. ```` ## Costruttori modalità test: new.target diff --git a/1-js/04-object-basics/09-object-toprimitive/article.md b/1-js/04-object-basics/09-object-toprimitive/article.md index 02995457a..01cafddca 100644 --- a/1-js/04-object-basics/09-object-toprimitive/article.md +++ b/1-js/04-object-basics/09-object-toprimitive/article.md @@ -3,7 +3,24 @@ Cosa accade quando degli oggetti vengono sommati `obj1 + obj2`, sottratti `obj1 - obj2` o mostrati tramite `alert(obj)`? -In questo caso gli oggetti vengono auto convertiti a primitivi; successivamente viene gestita l'operazione. +JavaScript non consente di personalizzare come gli operatori lavorano sugli oggetti. Diversamente da alcuni linguaggi di programmazione, come Ruby o C++, non implementa nessun metodo speciale per gestire l'addizione (o altri operatori). + +Nel caso si effettuassero queste operazioni, gli oggetti vengono convertiti automaticamente in primitivi e le operazioni vengo effettuate su questi, restituendo poi un valore anch'esso primitivo. + +Questa è un'importante limitazione, in quanto il risultato di `obj1 + obj2` non può essere un altro oggetto! + +Per esempio. non possiamo creare oggetti che rappresentano vettori o matrici (o archievements o altro), sommarli ed aspettarsi un oggetto "somma" come risultato. Tali architetture non sono contemplate. + +Quindi, poiché non possiamo intervenire, non c'è matematica con oggetti in progetti reali. Quando succede, di solito è a causa di un errore di codice. + +In questo capitolo tratteremo come un oggetto si converte in primitivo e come personalizzarlo. + +Abbiamo due scopi: + +1. Ci permetterà di capire cosa succede in caso di errori di programmazione, quando tali operazioni avvengo accidentalmente. +2. Ci sono eccezioni, dove tali operazioni sono possibili e funzionano bene. Per esempio, sottrazione o confronto di date (oggetti `Date`). Come vedremo più tardi. + +## Regole per la conversione Nel capitolo abbiamo visto le regole per le conversioni dei primitivi di tipo numerico, stringa e booleano. Però abbiamo lasciato un vuoto riguardo gli oggetti. Adesso che conosciamo i metodi e i symbol diventa più semplice parlarne. @@ -11,13 +28,11 @@ Nel capitolo abbiamo visto le regole per le conversioni 2. La conversione numerica avviene quando eseguiamo una sottrazione tra oggetti oppure applichiamo funzioni matematiche. Ad esempio, gli oggetti `Date` (che studieremo nel capitolo ) possono essere sottratti, ed il risultato di `date1 - date2` è la differenza di tempo tra le due date. 3. Le conversioni a stringa -- solitamente avvengono quando mostriamo un oggetto, come in `alert(obj)` e in altri contesti simili. -## ToPrimitive - -Possiamo gestire la conversione numerica o a stringa, utilizzando dei metodi speciali dell'oggetto. +Possiamo perfezionare la conversione di stringhe e numeri, utilizzando metodi oggetto speciali. -L'algoritmo di conversione si chiama `ToPrimitive`. In base al contesto, la conversione viene definita "hint" ("suggerimento"), ed è descritta nella ([specification](https://tc39.github.io/ecma262/#sec-toprimitive)). +Esistono tre varianti di conversione del tipo, che si verificano in varie situazioni. -Ci sono tre varianti: +Sono chiamate "hints", come descritto in [specification](https://tc39.github.io/ecma262/#sec-toprimitive): `"string"` : Un'operazione di conversione oggetto a stringa, avviene quando un operazione si aspetta una stringa, come `alert`: @@ -78,12 +93,15 @@ Iniziamo dal primo metodo. C'è un symbol integrato denominato `Symbol.toPrimiti ```js obj[Symbol.toPrimitive] = function(hint) { - // ritorna un valore primitivo + // qui il codice per convertire questo oggetto a primitivo + // deve ritornare un valore primitivo // hint = uno fra "string", "number", "default" -} +}; ``` -Ad esempio, qui `user` lo implementa: +Se il metodo `Symbol.toPrimitive` esiste, viene utilizzato per tutti gli hint, e non sono necessari altri metodi. + +Ad esempio, qui l'oggetto `user` lo implementa: ```js run let user = { @@ -107,14 +125,36 @@ Come possiamo vedere nel codice, `user` diventa una stringa auto-descrittiva o u ## toString/valueOf -I metodi `toString` e `valueOf` sono molto vecchi. Non sono symbol (i symbol sono stati introdotti recentemente), ma dei metodi "classici". Forniscono un alternativa "old-style" per implementare le conversioni. +Non esiste alcun `Symbol.toPrimitive` quindi JavaScript prova a trovare i metodi `toString` e `valueOf`: + +- Per "string" hint: `toString`, e se non esiste, `valueOf` (quindi `toString` ha la priorità per la conversione di stringhe). +- Per altri hints: `valueOf`, e se non esiste, `toString` (quindi `valueOf` ha la priorità per le operazioni matematiche). -Se non è presente `Symbol.toPrimitive`, JavaScript prova a richiamare questi due metodi nell'ordine: +Mi metodi `toString` arrivano `valueOf` da molto lontano. Non sono symbols (i symbols non esistevano tempo fa), ma piuttosto "normali" metodi. Forniscono un modo alternativo "vecchio stile" per implementare la conversione. -- `toString -> valueOf` per hint di tipo "string". -- `valueOf -> toString` altrimenti. +Questi metodi devono restituire un valore primitivo. Se `toString` o `valueOf` ritornano un oggetto, vengono ignorati (come se non ci fosse il metodo). -Ad esempio, qui `user` fa la stessa cosa vista sopra, utilizzando una combinazione di `toString` e `valueOf`: +Per impostazione predefinita, un oggetto semplice ha i seguenti metodi `toString` e `valueOf`: + +- Il metodo `toString` ritorna una stringa `"[object Object]"`. +- Il metodo `valueOf` ritorna l'oggetto stesso. + +Ecco una dimostrazione: + +```js run +let user = {name: "John"}; + +alert(user); // [object Object] +alert(user.valueOf() === user); // true +``` + +Quindi, se proviamo a usare un oggetto come stringa, ad esempio in un `alert`, per impostazione predefinita vedremo `[object Object]`. + +Il predefinito `valueOf` è menzionato qui solo per completezza, per evitare qualsiasi confusione. Come puoi vedere, restituisce l'oggetto stesso e quindi viene ignorato. Non chiedetemi perché, è per ragioni storiche. Quindi possiamo fare come se non esista. + +Implementiamo questi metodi per personalizzare la conversione. + +Ad esempio, qui `user` fa la stessa cosa vista sopra, utilizzando una combinazione di `toString` e `valueOf` invece di `Symbol.toPrimitive`: ```js run let user = { @@ -155,7 +195,7 @@ alert(user + 500); // toString -> John500 In assenza di `Symbol.toPrimitive` e `valueOf`, `toString` gestirà tutte le conversioni a primitive. -## Tipi di ritorno +## Una conversione può restituire qualsiasi tipo primitivo Una cosa importante da sapere riguardo le conversioni primitive è che non devono necessariamente ritornare il tipo "hint" (suggerito). @@ -225,4 +265,6 @@ L'algoritmo di conversione segue questi passi: 3. Altrimenti se "hint" è di tipo `"number"` o `"default"` - prova `obj.valueOf()` and `obj.toString()`, sempre se esiste. -Nella pratica, spesso è sufficiente implementare solo `obj.toString()` come metodo che "cattura tutte" le conversioni e ritorna una rappresentazione dell'oggetto "interpretabile dall'uomo", per mostrarlo o per il debugging. +Nella pratica, spesso è sufficiente implementare solo `obj.toString()` come metodo che "cattura tutte" le conversioni e ritorna una rappresentazione dell'oggetto "interpretabile dall'uomo", per mostrarlo o per il debugging. + +Per quanto riguarda le operazioni matematiche, JavaScript non fornisce un modo per "sovrascriverle" utilizzando i metodi, quindi vengono raramente utilizzate in progetti reali. diff --git a/1-js/05-data-types/01-primitives-methods/article.md b/1-js/05-data-types/01-primitives-methods/article.md index 1439ae616..84b2a41e5 100644 --- a/1-js/05-data-types/01-primitives-methods/article.md +++ b/1-js/05-data-types/01-primitives-methods/article.md @@ -41,7 +41,7 @@ Gli oggetti sono più "pesanti" dei tipi primitivi. Richiedono risorse extra per Questo è il paradosso contro cui si è scontato il creatore di JavaScript: -- Esitono molte operazioni che uno sviluppatore vorrebbe poter fare con i diversi tipi primitivi, come una stringa o un numero. Sarebbe molto bello poter utilizzare questi tipi di dato con dei metodi. +- Esistono molte operazioni che uno sviluppatore vorrebbe poter fare con i diversi tipi primitivi, come una stringhe o un numeri. Sarebbe molto bello poter accedere a dei metodi per questi tipi di dato. - I tipi primitivi devono essere veloci e il più leggeri possibile. La soluzione sembra un po' strana: diff --git a/1-js/05-data-types/03-string/article.md b/1-js/05-data-types/03-string/article.md index 9db1375cd..41b8e5914 100644 --- a/1-js/05-data-types/03-string/article.md +++ b/1-js/05-data-types/03-string/article.md @@ -611,7 +611,7 @@ Ad esempio, se abbiamo `S` con uno speciale "punto sopra" (codice `\u0307`), vie alert( 'S\u0307' ); // Ṡ ``` -Se abbiamo bisogno di un ulteriore segno sopra la lettera (o sotto) -- nessun problema, è succificiente aggiungere il simbolo necessario. +Se abbiamo bisogno di un ulteriore segno sopra la lettera (o sotto) -- nessun problema, è sufficiente aggiungere il simbolo necessario. Ad esempio, se vogliamo aggiungere un "punto sotto" (codice `\u0323`), allora otterremo una "S con due punti, sopra e sotto": `Ṩ`. @@ -665,7 +665,7 @@ Se volete approfondire il tema della normalizzazione e le sue varianti -- vengon Ci sono molti altri metodi utili per operare con le stringhe: -- `str.trim()` -- rimuove gli spazi all'inzio e alla fine della stringa. +- `str.trim()` -- rimuove gli spazi all'inizio e alla fine della stringa. - `str.repeat(n)` -- ripete la stringa `n` volte. - ...e molto altro. Guarda il [manuale](mdn:js/String) per maggiori dettagli. diff --git a/1-js/05-data-types/04-array/article.md b/1-js/05-data-types/04-array/article.md index f2e70a7f8..da0cc1329 100644 --- a/1-js/05-data-types/04-array/article.md +++ b/1-js/05-data-types/04-array/article.md @@ -329,7 +329,7 @@ Generalmente, non dovremmo utilizzare `for..in` per gli array. La proprietà `length` si aggiorna automaticamente ad ogni modifica. Volendo essere precisi non ne rappresenta la lunghezza, ma l'ultimo indice numerico più uno. -Ad esempio, un singolo elemento con un indice molto alto fornisce un'altrettanto grande lunghezza: +Ad esempio, un singolo elemento con un indice molto alto fornisce un altrettanto grande lunghezza: ```js run let fruits = []; @@ -381,7 +381,7 @@ alert( arr.length ); // length 2 Nel codice sopra, `new Array(number)` ha tutti gli elementi `undefined`. -Per evitare queste spiacevoli sorprese, solitamente si utilizzano le parentesi quadre, a meno di non sapere davvero che cosa si sta faccendo. +Per evitare queste spiacevoli sorprese, solitamente si utilizzano le parentesi quadre, a meno di non sapere davvero che cosa si sta facendo. ## Array multi-dimensionali diff --git a/1-js/06-advanced-functions/09-call-apply-decorators/article.md b/1-js/06-advanced-functions/09-call-apply-decorators/article.md index 073e09970..75f53a482 100644 --- a/1-js/06-advanced-functions/09-call-apply-decorators/article.md +++ b/1-js/06-advanced-functions/09-call-apply-decorators/article.md @@ -306,6 +306,8 @@ func.call(context, ...args); // passa un array come lista, usando la sintassi sp func.apply(context, args); // è uguale all'uso di call ``` +Eseguono la medesima chiamata a `func` con un dati contesto ed argomenti. + C'è solo una sottile differenza: - La sintassi `...` permette di passare `args` *iterabili* come lista a `call`. diff --git a/1-js/08-prototypes/01-prototype-inheritance/article.md b/1-js/08-prototypes/01-prototype-inheritance/article.md index 4efd455df..2a3f21fd4 100644 --- a/1-js/08-prototypes/01-prototype-inheritance/article.md +++ b/1-js/08-prototypes/01-prototype-inheritance/article.md @@ -173,7 +173,7 @@ rabbit.walk = function() { rabbit.walk(); // Rabbit! Bounce-bounce! ``` -Da questo punto in poi, la chiamata `rabbit.walk()` troverà il metodo direttamente nell'oggetto e lo eseguirà, senza utilizare il prototype: +Da questo punto in poi, la chiamata `rabbit.walk()` troverà il metodo direttamente nell'oggetto e lo eseguirà, senza utilizzare il prototype: ![](proto-animal-rabbit-walk-2.svg) diff --git a/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md index 5bafe9585..15aa6e094 100644 --- a/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md +++ b/1-js/08-prototypes/02-function-prototype/4-new-object-same-constructor/solution.md @@ -38,7 +38,12 @@ Perché `user2.name` è `undefined`? Ecco come `new user.constructor('Pete')` funziona: 1. Prima, controlla se esiste `constructor` in `user`. Niente. -2. Successivamente segue la catena di prototype. Il prototype di `user` è `User.prototype`, e anche qui non c'è nulla. -3. Il valore di `User.prototype` è un oggetto semplice `{}`, il suo prototype è `Object.prototype`. E c'è un `Object.prototype.constructor == Object`. Quindi verrà utilizzato. +2. Successivamente segue la catena di prototype. Il prototype di `user` è `User.prototype`, e anche qui non c'è un `constructor` (perché ci siamo "dimenticati" di impostarlo!). +3. Seguendo la catena, `User.prototype` è un oggetto semplice, il suo prototype è `Object.prototype`. +4. Infine, per `Object.prototype`, c'è `Object.prototype.constructor == Object`. Quindi verrà utilizzato. -In conclusione, abbiamo `let user2 = new Object('Pete')`. Il costruttore integrato di `Object` ignora gli argomenti, crea sempre un oggetto vuoto, in maniera simile a `let user2 = {}`, questo è ciò che abbiamo in `user2` alla fine di tutto. +In conclusione, abbiamo `let user2 = new Object('Pete')`. + +Probabilmente, non è quello che avremmo voluto, ossia creare `new User`, non `new Object`. Questo è il risultato del `costruttore` mancante. + +(Nel caso tu sia curioso, la chiamata `new Object(...)` converte il suo argomento in un oggetto. Questa è una cosa teorica, in pratica nessuno chiama `new Object` con un valore, e generalmente non usiamo mai `new Object` per creare oggetti. diff --git a/1-js/09-classes/01-class/article.md b/1-js/09-classes/01-class/article.md index 998d1bfd6..0912dbf39 100644 --- a/1-js/09-classes/01-class/article.md +++ b/1-js/09-classes/01-class/article.md @@ -144,7 +144,7 @@ Il risultato di questo codice è circa lo stesso. È quindi logico pensare che ` Ci sono però delle importanti differenze. -1. Una funzione creata attraverso `class` viene etichettata dalla proprietà interna `[[FunctionKind]]:"classConstructor"`. +1. Una funzione creata attraverso `class` viene etichettata dalla speciale proprietà interna `[[IsClassConstructor]]: true`. Quindi non è esattamente uguale che crearla manualmente. A differenza di una normale funzione, il costruttore di una classe può essere richiamato solo attraverso la parola chiave `new`: diff --git a/1-js/09-classes/04-private-protected-properties-methods/article.md b/1-js/09-classes/04-private-protected-properties-methods/article.md index 8e0b2fde2..e5112e7d1 100644 --- a/1-js/09-classes/04-private-protected-properties-methods/article.md +++ b/1-js/09-classes/04-private-protected-properties-methods/article.md @@ -11,7 +11,7 @@ Solitamente, i dispositivi che utilizziamo sono piuttosto complessi. Poter delim ## Un esempio del mondo reale -Prendiamo l'esempio di una macchina del caffè. Semplice all'esterno: un bottone, un dispaly, un paio di fori... E, ovviamente, il risultato: un ottimo caffè! :) +Prendiamo l'esempio di una macchina del caffè. Semplice all'esterno: un bottone, un display, un paio di fori... E, ovviamente, il risultato: un ottimo caffè! :) ![](coffee.jpg) @@ -192,7 +192,7 @@ Esiste una proposta JavaScript in via di approvazione, che fornisce il supporto I campi privati dovrebbero essere preceduti da `#`. Questi saranno accessibili solamente dall'interno della classe. -Ad esempio, qui abbiamo una proprietà privata `#waterLimit` e un metodo privato per il controllo del livello dell'acqua `#checkWater`: +Ad esempio, qui abbiamo una proprietà privata `#waterLimit` e un metodo privato per il controllo del livello dell'acqua `#fixWaterAmount`: ```js run class CoffeeMachine { diff --git a/1-js/13-modules/01-modules-intro/article.md b/1-js/13-modules/01-modules-intro/article.md index 05474132e..5981f8056 100644 --- a/1-js/13-modules/01-modules-intro/article.md +++ b/1-js/13-modules/01-modules-intro/article.md @@ -58,7 +58,7 @@ In questo modo: Il browser recupera ed elabora automaticamente il modulo importato (e i suoi import se necessario), e infine esegue lo script. ```warn header="Modules work only via HTTP(s), not in local files" -Se provate ad aprire una pagina web in locale, tramite il protocollo `file://`, scoprirete che le direttive `import/export` non funzionano. Per questo vanno utilizzati dei web-server localum come [static-server](https://www.npmjs.com/package/static-server#getting-started) oppure utilizzando la funzionalità "live server" dell'editor di codice, come quello di VS Code [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) per testare i moduli. +Se provate ad aprire una pagina web in locale, tramite il protocollo `file://`, scoprirete che le direttive `import/export` non funzionano. Per questo vanno utilizzati dei web-server locali come [static-server](https://www.npmjs.com/package/static-server#getting-started) oppure utilizzando la funzionalità "live server" dell'editor di codice, come quello di VS Code [Live Server Extension](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) per testare i moduli. ``` ## Funzionalità principali dei moduli @@ -69,7 +69,7 @@ Ci sono delle funzionalità aggiunte, valide sia per codice JavaScript all'inter ### Hanno sempre "use strict" -I moduli utilizzano sempre `use strict`, automaticamente. Ad esempio assegnare un valore ad una variabile non dichiarata genera un'errore. +I moduli lavorano sempre in *strict mode*, automaticamente. Ad esempio, assegnare un valore ad una variabile non dichiarata genera un'errore. ```html run ``` -Se abbiamo realmente la necessità di dichiarare una variabile globale all'interno del browser possiamo assegnarla a `window` e accederci attraverso `window.user`. Questa è un'eccezione che dovrebbe essere usata solo se ci sono delle buone ragioni. +```smart +Nel browser, possiamo creare una variabile globale assegnandola esplicitamente ad una proprietà di `window`, ad esempio `window.user = "John"`. + +Così sarà accessibile a tutti gli scripts, sia con `type="module"` che senza. + +Detto questo, creare questo genere di variabili è una cattiva pratica, cercate di evitarlo. + +``` ### Un modulo viene eseguito solo la prima volta che viene importato -Se uno stesso modulo verrà importato varie volte in più posti, il suo codice verrà eseguito solo la prima volta, successivamente le variabili e le funzioni esportate saranno assegnate a tutti i moduli che lo importano. +Se lo stesso modulo viene importato in vari altri moduli, il suo codice viene eseguito solo una volta, durante il primo import. Successivamente tutti i suoi exports vengono distribuiti agli altri moduli che la importano. + +La valutazione una tantum ha conseguenze importanti di cui dovremmo essere consapevoli. -Questo ha delle conseguenze importanti. Vediamo degli esempi. +Vediamo degli esempi. Prima di tutto, se eseguire un modulo ha altri effetti, come far apparire un messaggio, importare quel modulo più volte lo farà apparire solamente una volta, la prima: @@ -133,11 +147,13 @@ import `./alert.js`; // Il modulo è stato eseguito! import `./alert.js`; // (non appare nulla) ``` -Il pratica, il codice a livello maggiore di un modulo viene principalmente usato per inizializzarlo, creare la struttura dei dati interni e, se vogliamo qualcosa di riutilizzabile, esportarlo con `export`. +La seconda importazione non mostra nulla, perché il modulo è già stato valutato. -Vediamo adesso un esempio più complesso. +C'è una regola: il codice del modulo di primo livello dovrebbe essere usato per l'inizializzazione, la creazione di strutture dati interne specifiche del modulo. Se abbiamo bisogno di rendere qualcosa richiamabile più volte, dovremmo esportarlo come una funzione, come abbiamo fatto con `sayHi` sopra. -Prendiamo in considerazione un modulo che exporta un oggetto: +Vediamo ora un esempio più complesso. + +Prendiamo in considerazione un modulo che esporta un oggetto: ```js // 📁 admin.js @@ -160,54 +176,68 @@ import {admin} from './admin.js'; alert(admin.name); // Pete *!* -// Entrambi 1.js e 2.js ottengono lo stesso ogetto +// Entrambi 1.js e 2.js si riferiscono allo stesso oggetto // I cambiamenti fatti in 1.js sono visibili in 2.js */!* ``` -Facendo un punto della situazione, il modulo viene eseguito una sola volta. Tutto quello esportato con `export` viene generato, e successivamente viene condiviso con tutti quelli che lo hanno importato, di conseguenza ogni cambiamento fatto sull'oggetto `admin` verrà visto anche dagli altri moduli. +Come puoi vedere, quando `1.js` cambia la proprietà `name` nell'`admin` importato, allora anche `2.js` può vedere il nuovo `admin.name`. + +Questo è il motivo per cui il modulo viene eseguito solo una volta. Le esportazioni vengono generate e quindi condivise tra gli importatori, quindi se qualcosa cambia l'oggetto `admin`, gli altri moduli lo vedranno. -Questo comportamento ci permette di *configurare* i moduli quando vengono importati la prima volta. Possiamo configurare le proprietà una volta, e saranno pronte per tutti gli altri import successivi. +**Questo comportamento in realtà è molto utile, perché ci permette di *configurare* i moduli.** -Per fare un esempio, il modulo `admin.js` può fornire alcune funzionalità ma si aspetta di ricevere le credenziali all'interno dell'oggetto `admin` dall'esterno: +In altre parole, un modulo può fornire una funzionalità generica che necessita di una configurazione. Per esempio. l'autenticazione necessita di credenziali. Quindi può esportare un oggetto di configurazione aspettandosi che il codice esterno gli venga assegnato. + +Ecco lo schema classico: +1. Un modulo esporta alcuni strumenti di configurazione, ad es. un oggetto di configurazione. +2. Alla prima importazione lo inizializziamo, impostando le sue proprietà. Potrebbe farlo lo script di livello più alto. +3. Ulteriori importazioni utilizzano il modulo. + +Per fare un esempio, il modulo `admin.js` può fornire alcune funzionalità (ad esempio l'autenticazione), ma si aspetta di ricevere le credenziali all'interno dell'oggetto `config` dall'esterno: ```js // 📁 admin.js -export let admin = { }; +export let config = { }; export function sayHi() { - alert(`Sono pronto, ${admin.name}!`); + alert(`Sono pronto, ${config.user}!`); } ``` -All'interno di `init.js`, il primo script della nostra app, impostiamo `admin.name`. In questo modo sarà visibile a tutti, comprese le chiamate fatte all'interno di `admin.js` stesso: +Qui, `admin.js` esporta l'oggetto `config` (inizialmente vuoto, ma potrebbe anche avere proprietà predefinite). + +Quindi in `init.js`, il primo script della nostra applicazione, importiamo `config` ed impostiamo `config.user`: ```js // 📁 init.js -import {admin} from './admin.js'; -admin.name = "Pete"; +import {config} from './admin.js'; +config.user = "Pete"; ``` -Un'altro modulo può comunque vedere `admin.name`: +...Ora il modulo `admin.js` è configurato. + +Le successive importazioni chiamarlo, e verrà mostrato correttamente lo user corrente: -```js -// 📁 other.js -import {admin, sayHi} from './admin.js'; -alert(admin.name); // *!*Pete*/!* +```js +// 📁 another.js +import {sayHi} from './admin.js'; sayHi(); // Sono pronto, *!*Pete*/!*! ``` + ### import.meta L'oggetto `import.meta` contiene le informazioni riguardanti il modulo corrente. -Il suo contenuto dipende dall'ambiente di esecuzione. Nel browser, contiene l'URL dello script o dell'attuale pagina web se inserito all'interno dell'HTML +Il suo contenuto dipende dall'ambiente di esecuzione. Nel browser, contiene l'URL dello script o dell'attuale pagina web se inserito all'interno dell'HTML: ```html run height=0 ``` @@ -233,7 +263,7 @@ Facciamo il confronto con uno script che non è un modulo, dove `this` è un ogg Ci sono diverse funzionalità specifiche dei moduli utilizzati all'interno del browser con `type="module"`. -Potresti voler saltare questa sezione se stai leggedo per la prima volta , oppure se non hai intenzione di usare JavaScript all'interno del browser. +Potresti voler saltare questa sezione se stai leggendo per la prima volta , oppure se non hai intenzione di usare JavaScript all'interno del browser. ### I moduli sono caricati in modo differito @@ -260,7 +290,7 @@ Confrontiamo lo script normale: diff --git a/1-js/99-js-misc/04-reference-type/article.md b/1-js/99-js-misc/04-reference-type/article.md index 1f8efe2d7..934daf5f0 100644 --- a/1-js/99-js-misc/04-reference-type/article.md +++ b/1-js/99-js-misc/04-reference-type/article.md @@ -4,7 +4,7 @@ ```warn header="Caratteristica avanzata di linguaggio" Questo articolo tratta un argomento avanzato, utile per capire meglio alcuni casi limite. -Non è di fondamentale importanza. Molti sviluppatori esperti vivono bene senza esserne a conoscenza. Continua la lettura solamente se sei interessato a sapere come funzionano le cose internamente. +Non è di fondamentale importanza. Molti sviluppatori esperti vivono bene senza esserne a conoscenza. Continua la lettura se sei interessato a sapere come funzionano le cose internamente. ``` Un'invocazione di un metodo valutata dinamicamente può perdere il `this`. diff --git a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md index dd7ff261a..e30e41661 100644 --- a/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md +++ b/2-ui/4-forms-controls/2-focus-blur/4-edit-td-click/task.md @@ -6,10 +6,10 @@ importance: 5 Rendete le celle della tabella modificabili al click. -- Al click -- la cella dovrebbe diventare "modificabile" (compare una textarea al suo interno), e possiamo modificarne l'HTML. Non dovrebbe essere possibile il ridimensionamento, tutte le geometrie dovrebbero rimanere intatte. +- Al click -- la cella dovrebbe diventare "modificabile" (compare una textarea al suo interno), e possiamo modificarne l'HTML. Non dovrebbe essere possibile il ridimensionamento, tutte le geometrie dovrebbero rimanere le stesse. - I pulsanti OK e CANCEL devono apparire sotto la cella per completare/cancel la modifica. -- Si può modificare solamente una cella per volta. Mentre un `` è in modalità "edit mode", i click nelle altre celle vengono ignorati. -- La tabella può avere tante celle. Usare la event delegation. +- Si può modificare solamente una cella per volta. Mentre un `` è in modalità "edit", i click nelle altre celle vengono ignorati. +- La tabella può avere più celle. Usare la event delegation. La demo: diff --git a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md index ee42598f2..24cc1f474 100644 --- a/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md +++ b/2-ui/4-forms-controls/2-focus-blur/5-keyboard-mouse/task.md @@ -9,4 +9,5 @@ Fate in modo di porre il focus sul mouse. Quindi usare le frecce per spostarlo: [demo src="solution"] P.S.: Non mettere i gestori da nessun'altra parte, tranne che sull'elemento `#mouse`. + P.P.S.: Non è necessario modificare il codice HTML e CSS, l'approccio dovrebbe essere generico e funzionare con qualunque elemento. diff --git a/2-ui/4-forms-controls/2-focus-blur/article.md b/2-ui/4-forms-controls/2-focus-blur/article.md index 706abc33a..24d4289fd 100644 --- a/2-ui/4-forms-controls/2-focus-blur/article.md +++ b/2-ui/4-forms-controls/2-focus-blur/article.md @@ -104,7 +104,7 @@ La pratica migliore è quella di fare attenzione nell'uso di questi eventi. Se v ``` ## Permettere il focus su ogni elemento: tabindex -Di default ci sono una varietà di elementi che non supportano il focus. +Di default, alcuni elementi non supportano il focus. La lista varia leggermente a seconda del browser, ma una cosa è sempre vera: il supporto al `focus/blur` viene garantito per elementi con i quali l'utente può interagire: `