Skip to content
Merged

Sync #328

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
36 commits
Select commit Hold shift + click to select a range
f723253
transpiler def
joaquinelio Mar 28, 2021
3d88d33
Update article.md
ZYinMD Jun 13, 2021
2dce19e
"inserts into" instead of "appends to"
joaquinelio Jun 16, 2021
497ca99
Update article.md
joaquinelio Jun 16, 2021
9680c67
Merge pull request #2633 from joaquinelio/patch-4
iliakan Jun 16, 2021
cd466c5
Unnecessary escape characters in cookie.js
NNboru Jun 17, 2021
8c910b4
Update article.md
joaquinelio Jun 18, 2021
8cf2d51
Update article.md
joaquinelio Jun 18, 2021
0c41930
Update article.md
joaquinelio Jun 18, 2021
263f57e
Update article.md
joaquinelio Jun 18, 2021
492f506
Merge pull request #2555 from joaquinelio/patch-6
iliakan Jun 18, 2021
a6dfbb7
minor fixes
iliakan Jun 18, 2021
29f0121
Merge pull request #2636 from NNboru/patch-1
iliakan Jun 18, 2021
de36d0d
update one code comment in 1-js/09-classes/04-private-protected-prope…
ZYinMD Jun 18, 2021
c45e78f
Maybe. "accessors" link
joaquinelio Jun 18, 2021
d43bdd2
slightly improve clarity on Promise.all()
ZYinMD Jun 19, 2021
e49bc3b
Merge pull request #2627 from ZYinMD/patch-5
iliakan Jun 19, 2021
e877796
closes #2641
iliakan Jun 19, 2021
ff53f06
minor fixes
iliakan Jun 19, 2021
cf82cc3
minor fixes
iliakan Jun 19, 2021
85282ef
minor fixes
iliakan Jun 19, 2021
a40ca9a
minor fixes
iliakan Jun 19, 2021
54347b7
minor fixes
iliakan Jun 19, 2021
df6e5a4
minor fixes
iliakan Jun 19, 2021
e769408
minor fixes
iliakan Jun 19, 2021
de81cb4
minor fixes
iliakan Jun 19, 2021
7dacfd4
minor fixes
iliakan Jun 19, 2021
3661393
minor fixes
iliakan Jun 19, 2021
1b16f9d
Merge pull request #2640 from ZYinMD/patch-17
iliakan Jun 19, 2021
6f14c39
Merge pull request #2639 from joaquinelio/patch-4
iliakan Jun 19, 2021
52eaa63
typo
joaquinelio Jun 20, 2021
9847492
Typo in Ch 15 Functions
Yoona8 Jun 20, 2021
140c75d
Merge pull request #2644 from Yoona8/master
iliakan Jun 20, 2021
ffe91a6
Merge pull request #2643 from joaquinelio/patch-6
iliakan Jun 20, 2021
8558fa8
Merge pull request #2638 from ZYinMD/patch-16
iliakan Jun 20, 2021
f3614f5
Merge branch 'master' of https://github.com/javascript-tutorial/en.ja…
pasor1 Jun 21, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion 1-js/03-code-quality/06-polyfills/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ In questo capitolo cercheremo di capire il loro funzionamento ed il loro ruolo n

## Transpilers

Un [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler) è un particolare software capace di analizzare il codice moderno e di riscriverlo utilizzando sintassi e costrutti meno recenti, facendo in modo che il funzionamento sia simile.
Un [transpiler](https://en.wikipedia.org/wiki/Source-to-source_compiler) è un particolare software che traduce il codice sorgente da un formato ad un altro. Può analizzare il codice moderno e riscriverlo utilizzando sintassi e costrutti meno recenti, rendendolo compatibile con i motori JavaScript meno recenti.

Es. JavaScript prima del 2020 non aveva "l'operatore di coalescenza nullo" `??`. Quindi, se un visitatore utilizza un vecchio browser, questo non potrebbe comprendere `height = height ?? 100`.

Expand Down
2 changes: 1 addition & 1 deletion 1-js/04-object-basics/09-object-toprimitive/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -267,4 +267,4 @@ L'algoritmo di conversione segue questi passi:

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.
Per quanto riguarda le operazioni matematiche, JavaScript non fornisce un modo per "sovrascriverle" utilizzando i metodi, quindi vengono raramente utilizzate sugli oggetti.
6 changes: 3 additions & 3 deletions 1-js/05-data-types/02-number/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,10 @@ In altre parole, un numero negativo dopo `"e"` significa una divisione per 1 seg

```js
// -3 divide 1 con 3 zeri
1e-3 = 1 / 1000 (=0.001)
1e-3 = 1 / 1000; // 0.001

// -6 divide 1 con 6 zeri
1.23e-6 = 1.23 / 1000000 (=0.00000123)
1.23e-6 = 1.23 / 1000000; // 0.00000123
```

### Numeri esadecimali, binari e ottali
Expand Down Expand Up @@ -440,7 +440,7 @@ Per diversi sistemi numerici:

Per convertire a numeri valori del tipo `12pt` e `100px`:

- Utilizzate parseInt/parseFloat per un conversione "soft", i quali provano a leggere un numero da una stringa e ritornano ciò che sono riusciuti ad estrarre prima di interrompersi.
- Utilizzate parseInt/parseFloat per un conversione "soft", i quali provano a leggere un numero da una stringa e ritornano ciò che sono riusciti ad estrarre prima di interrompersi.

Per i numeri con la virgola:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ class CoffeeMachine {
let coffeeMachine = new CoffeeMachine(100);

// aggiungiamo acqua
coffeeMachine.waterAmount = -10; // Errore: valore dell'acqua negativo
coffeeMachine.waterAmount = -10; // _waterAmount diventerà 0, non -10
```

Ora l'accesso è sotto controllo, quindi non è più possibile impostare la quantità d'acqua ad un valore negativo.
Expand Down
14 changes: 7 additions & 7 deletions 1-js/11-async/01-callbacks/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@

# Introduzione: callbacks

```warn header="Utilizeremo i metodi browser in questi esempi"
Per dimostrare l'utilizzo di callbacks, promise ed altri concetti astratti, utilizzeremo alcuni metodi del browser: nello specifico, caricamento di script e sempliici manipolazioni del documento.
```warn header="Utilizzeremo i metodi browser in questi esempi"
Per dimostrare l'utilizzo di callbacks, promise ed altri concetti astratti, utilizzeremo alcuni metodi del browser: nello specifico, caricamento di script e semplici manipolazioni del documento.

Se questi metodi non vi sono familiari, e il loro utilizzo negli esempi vi risulta di difficile comprensione, potreste voler leggere un paio di capitolo della [prossima parte](/document) del tutorial.

Anche se, povreremo a mantenere le spiegazioni più chiare possibili. Non ci sarà nulla di realmente complesso dal punto di vista del browser.
Anche se, proveremo a mantenere le spiegazioni più chiare possibili. Non ci sarà nulla di realmente complesso dal punto di vista del browser.
```

Molte funzioni vengono fornite da ambienti JavaScript che permettono di schedulare azioni *asincrone*. In altre parole, azioni che iniziano ora, ma finiranno in un secondo momento.
Expand All @@ -28,7 +28,7 @@ function loadScript(src) {
}
```

Lo scopo della funzione è quello di caricare un nuovo script. Quando aggiunge il tag `<script src="…">` al documento, il browser lo caricherà ed eseguirà.
La funzione inserisce nel documento il nuovo script creato dinamicamente `<script src="…">` con il dato `src`. Il browser eseguità automaticamente il caricamento ed una volta terminato eseguirà lo script.

Possiamo usare la funzione in questo modo:

Expand All @@ -37,7 +37,7 @@ Possiamo usare la funzione in questo modo:
loadScript('/my/script.js');
```

La funzione è chiamata "asincronamente", perché l'azione (il caricamento dello script) non finirà adesso ma in seguito.
La funzione è chiamata in modo asincrono, perché l'azione (il caricamento dello script) non finirà adesso ma in seguito.

Se c'è del codice sotto `loadScript(…)`, non dovrà attender fino al caricamento dello script.

Expand Down Expand Up @@ -103,12 +103,12 @@ function loadScript(src, callback) {
*!*
loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => {
alert(`Cool, the ${script.src} is loaded`);
alert( _ ); // funzione dichiatata nello script caricato
alert( _ ); // funzione dichiarata nello script caricato
});
*/!*
```

Questo è lo stile di programmazione asincrona "callback-based". Una funzione che fa qualcosa asincronamente dovrebbe prevedere un argomento `callback` in cui mettiamo la funzione da eseguire al completamento dell'operazione asincrona.
Questo è lo stile di programmazione asincrona "callback-based". Una funzione che fa qualcosa in modo asincrono dovrebbe prevedere un argomento `callback` in cui mettiamo la funzione da eseguire al completamento dell'operazione asincrona.

In questo esempio lo abbiamo fatto in `loadScript` ma, ovviamente, è un approccio generale.

Expand Down
2 changes: 1 addition & 1 deletion 1-js/11-async/05-promise-api/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ let promise = Promise.all([...promises...]);

`Promise.all` accetta un array di promise (tecnicamente si può usare qualsiasi iterabile, ma solitamente si usa un array) e ritorna una nuova promise.

La nuova promise risolve (resolves) quando tutte le promise elencate sono ferme (settled) ed ha un array dei loro risultati (?).
La nuova promise si risolve quando tutte le promise elencate vengono risolte, e l'array dei loro risultati diventa il risultato finale.

Per esempio, il `Promise.all` sotto si ferma (settles) dopo 3 secondi, ed il suo risultato è un array `[1, 2, 3]`:

Expand Down
19 changes: 14 additions & 5 deletions 2-ui/3-event-details/7-keyboard-events/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -139,30 +139,39 @@ Ora un esempio: il seguente campo `<input>` si aspetta un numero di telefono, qu
```html autorun height=60 run
<script>
function checkPhoneKey(key) {
return (key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-';
return (key >= '0' && key <= '9') || ['+','(',')','-'].includes(key);
}
</script>
<input *!*onkeydown="return checkPhoneKey(event.key)"*/!* placeholder="Inserire un numero di telefono" type="tel">
```

Qui il gestore `onkeydown` utilizza `checkPhoneKey` per controllare i testi premuti. Se sono validi (da `0..9` o uno tra `+-()`), allora ritorna `true`, altrimenti `false`.

Come sappiamo, il valore `false` restituito da un gestore di evento, assegnato usando un attributo o una proprietà DOM, come in questo caso, previene l'azione default, quindi non appare nulla in `<input>` per i tasti che non passano il tets. (Il valore `true` restituito non influenza nulla, conta solo la restituzione di `false`)

È interessante notare che i tasti speciali, come `key:Backspace`, `key:Left`, `key:Right`, `key:Ctrl+V`, non funzionano nel campo input. Questo è un effetto collaterale delle restrizioni del filtro `checkPhoneKey`.

Facciamolo "rilassare" un attimo:
Rendiamolo un po' più rilassato permettendo i tasti freccia `key:Left`, `key:Right` e `key:Delete`, `key:Backspace`::

Please note that special keys, such as `key:Backspace`, `key:Left`, `key:Right`, do not work in the input. That's a side-effect of the strict filter `checkPhoneKey`. These keys make it return `false`.

Let's relax the filter a little bit by allowing arrow keys `key:Left`, `key:Right` and `key:Delete`, `key:Backspace`:

```html autorun height=60 run
<script>
function checkPhoneKey(key) {
return (key >= '0' && key <= '9') || key == '+' || key == '(' || key == ')' || key == '-' ||
key == 'ArrowLeft' || key == 'ArrowRight' || key == 'Delete' || key == 'Backspace';
return (key >= '0' && key <= '9') ||
['+','(',')','-',*!*'ArrowLeft','ArrowRight','Delete','Backspace'*/!*].includes(key);
}
</script>
<input onkeydown="return checkPhoneKey(event.key)" placeholder="Phone, please" type="tel">
```

Adesso le frecce e il tasto cancella funzionano.

...Tuttavia, siamo ancora in grado di inserire qualunque valore, usando il mouse, attraverso la funzionalità tasto destro + Incolla. Quindi il filtro non è al 100% affidabile. Volendo, possiamo lasciarlo così, dato che funzionerà la maggior parte delle volte. Un approccio alternativo, invece, potrebbe essere quello di tenere traccia dell'evento `input`, che scaturisce dopo ogni modifica al campo di testo. In questo modo possiamo sempre verificare il nuovo valore ed evidenziarlo/modificarlo se non ritenuto valido.
Anche se abbiamo il filtro chiave, è comunque possibile inserire qualsiasi cosa utilizzando il mouse e facendo clic con il pulsante destro del mouse + Incolla. I dispositivi mobili forniscono altri mezzi per immettere valori. Quindi il filtro non è affidabile al 100%.

L'approccio alternativo sarebbe quello di tenere traccia dell'evento `oninput`, che si attiva *dopo* qualsiasi modifica. Lì possiamo controllare il nuovo `input.value` e modificarlo/evidenziare `<input>` quando non è valido. Oppure possiamo usare entrambi i gestori di evento insieme.

## Eredità

Expand Down
4 changes: 1 addition & 3 deletions 6-data-storage/01-cookie/article.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,7 @@ Lasciamo il compito in questione al lettore come esercizio. Inoltre, alla fine d

## Scrivere nel document.cookie

Possiamo scrivere nel `document.cookie`. Ma fate attenzione che questa non è una proprietà, ma piuttosto un metodo di accesso (getter/setter) per leggere e scrivere.
Un assegnazione a quest'ultimo è trattato in modo particolare.

Possiamo scrivere nel `document.cookie`. Ma fate attenzione che questa non è una proprietà, ma piuttosto un metodo di accesso [accessor (getter/setter)](info:property-accessors). Un assegnazione a quest'ultimo è trattato in modo particolare.

**Un'operazione di scritture nel `document.cookie` aggiorna solo i cookies menzionati all interno del documento stesso, ma non affligge altri cookies.**

Expand Down
2 changes: 1 addition & 1 deletion 6-data-storage/01-cookie/cookie.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
function getCookie(name) {
let matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
"(?:^|; )" + name.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
Expand Down