You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -2,20 +2,20 @@ importance: 5
2
2
3
3
---
4
4
5
-
# Deposit calculator
5
+
# Calcolo del deposito
6
6
7
-
Create an interface that allows to enter a sum of bank deposit and percentage, then calculates how much it will be after given periods of time.
7
+
Creare una interfaccia che permetta di inserire una somma di un deposito bancario e la percentuale, e che calcoli a quanto ammonteranno dopo un certo periodo di tempo.
8
8
9
-
Here's the demo:
9
+
La demo:
10
10
11
11
[iframe src="solution" height="350" border="1"]
12
12
13
-
Any input change should be processed immediately.
13
+
Ogni modifica all'input dovrebbe essere processata immediatamente.
14
14
15
-
The formula is:
15
+
La formula è:
16
16
```js
17
-
// initial: the initial money sum
18
-
// interest: e.g. 0.05 means 5% per year
19
-
// years: how many years to wait
17
+
// initial: la somma iniziale di denaro
18
+
// interest: ad esempio 0.05 significa 5% annualer
19
+
// years: quanti anni attendere
20
20
let result =Math.round(initial * (1+ interest * years));
Let's cover various events that accompany data updates.
3
+
In questa sezione, affronteremo vari argomenti associati alle modifica dei dati.
4
4
5
-
## Event: change
5
+
## Evento: change
6
6
7
-
The`change`event triggers when the element has finished changing.
7
+
L'evento`change`viene scatenato quando si termina la modifica su un elemento.
8
8
9
-
For text inputs that means that the event occurs when it loses focus.
9
+
Per gli input di testo, ciò si verifica alla perdita del focus.
10
10
11
-
For instance, while we are typing in the text field below -- there's no event. But when we move the focus somewhere else, for instance, click on a button -- there will be a`change` event:
11
+
Ad esempio, mentre scriviamo del testo nel campo di testo seguente -- l'evento non viene scaturito. Ma non appena spostiamo il focus su qualcos'altro, per esempio, clicchiamo su un pulsante -- verrà scatenato un evento`change`:
12
12
13
13
```html autorun height=40 run
14
14
<inputtype="text"onchange="alert(this.value)">
15
15
<inputtype="button"value="Button">
16
16
```
17
17
18
-
For other elements: `select`, `input type=checkbox/radio`it triggers right after the selection changes:
18
+
Per altri elementi: `select`, `input type=checkbox/radio`viene scaturito subito dopo il cambio di selezione:
19
19
20
20
```html autorun height=40 run
21
21
<selectonchange="alert(this.value)">
22
-
<optionvalue="">Select something</option>
23
-
<optionvalue="1">Option 1</option>
24
-
<optionvalue="2">Option 2</option>
25
-
<optionvalue="3">Option 3</option>
22
+
<optionvalue="">Seleziona qualcosa</option>
23
+
<optionvalue="1">Opzione 1</option>
24
+
<optionvalue="2">Opzione 2</option>
25
+
<optionvalue="3">Opzione 3</option>
26
26
</select>
27
27
```
28
28
29
29
30
-
## Event: input
30
+
## Evento: input
31
31
32
-
The`input`event triggers every time after a value is modified by the user.
32
+
L'evento`input`viene scatenato dopo ogni modifica di un valore da parte dell'utente.
33
33
34
-
Unlike keyboard events, it triggers on any value change, even those that does not involve keyboard actions: pasting with a mouse or using speech recognition to dictate the text.
34
+
Viene scaturito per qualunque valore modificato, e diversamente dagli eventi da tastiera, anche per azioni che non la coinvolgono direttamente: incollare qualcosa con il mouse o dettare un testo tramite riconoscimento vocale.
If we want to handle every modification of an `<input>`then this event is the best choice.
47
+
Se vogliamo gestire ogni modifica di un `<input>`questo evento è la scelta migliore.
48
48
49
-
On the other hand, `input`event doesn't trigger on keyboard input and other actions that do not involve value change, e.g. pressing arrow keys `key:⇦``key:⇨`while in the input.
49
+
Di contro, l'evento `input`non viene generato tramite input da tastiera e altre azioni che non coinvolgono modifiche dei valori, di conseguenza è esclusa la generazione dell'evento per azioni quali i tasti freccia `key:⇦``key:⇨`mentre si è dentro l'input.
The`input`event occurs after the value is modified.
51
+
```smart header="Non possiamo prevenire nulla su`oninput`"
52
+
L'evento`input`avviene dopo che il valore viene modificato.
53
53
54
-
So we can't use `event.preventDefault()`there -- it's just too late, there would be no effect.
54
+
Di conseguenza non possiamo usare `event.preventDefault()` -- sarebbe già troppo tardi, e non avrebbe alcun effetto.
55
55
```
56
56
57
-
## Events: cut, copy, paste
57
+
## Eventi: taglia, copia, incolla
58
58
59
-
These events occur on cutting/copying/pasting a value.
59
+
Questi eventi si scatenano nelle operazioni di taglia/copia/incolla di un valore.
60
60
61
-
They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is copied/pasted.
61
+
Appartengono alla classe [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) e forniscono un accesso ai dati che vengono copiati ed incollati.
62
62
63
-
We also can use `event.preventDefault()` to abort the action, then nothing gets copied/pasted.
63
+
È anche previsto l'uso di `event.preventDefault()` per annullare l'azione, in modo che non venga copiato/incollato nulla.
64
64
65
-
For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste:
65
+
Ad esempio, il seguente codice previene tutti questi eventi, mostrando cosa stiamo provando di tagliare/copiare/incollare:
66
66
67
67
```html autorun height=40 run
68
68
<input type="text" id="input">
@@ -74,22 +74,22 @@ For instance, the code below prevents all such events and shows what we are tryi
74
74
</script>
75
75
```
76
76
77
-
Please note, that it's possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it.
77
+
Nota bene, è possibile copiare/incollare non soltanto testo, ma qualunque cosa. Per esempio possiamo copiare un file nel sistema operativo ed incollarlo nel documento.
78
78
79
-
That's because`clipboardData`implements `DataTransfer` interface, commonly used for drag'n'drop and copy/pasting. It's bit beyound our scope now, but you can find its methods [in the specification](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
79
+
Questo perché`clipboardData`implementa l'interfaccia `DataTransfer`, usata comunemente per il drag'n'drop ed il copia/incolla. Va un pochino oltre i nostri scopi, ma puoi trovare i relativi metodi [nelle specifiche](https://html.spec.whatwg.org/multipage/dnd.html#the-datatransfer-interface).
80
80
81
-
```warn header="ClipboardAPI: user safety restrictions"
82
-
The clipboard is a "global" OS-level thing. So most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety, e.g. in `onclick` event handlers.
81
+
```warn header="ClipboardAPI: restrizione per la sicurezza dell'utente"
82
+
La clipboard è una caratteristica "globale" a livello del sistema operativo. I browser quindi, per ragioni di sicurezza, consentono l'accesso in lettura/scrittura solo per certe azioni dell'utente, ad esempio nei gestori evento `onclick`.
83
83
84
-
Also it's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox.
84
+
Inoltre è vietato generare eventi clipboard "personalizzati" tramite `dispatchEvent` in tutti i browser eccetto Firefox.
85
85
```
86
86
87
-
## Summary
87
+
## Riepilogo
88
88
89
-
Data change events:
89
+
Eventi di modifica dati:
90
90
91
-
|Event|Description|Specials|
91
+
|Evento|Descrizione|Speciali|
92
92
|---------|----------|-------------|
93
-
|`change`|A value was changed. |For text inputs triggers on focus loss. |
94
-
|`input`|For text inputs on every change. |Triggers immediately unlike`change`. |
95
-
|`cut/copy/paste`|Cut/copy/paste actions. |The action can be prevented. The `event.clipboardData`property gives read/write access to the clipboard. |
93
+
|`change`|È stato modificato un valore. |Per il testo viene generato alla perdita del focus. |
94
+
|`input`|Per gli input di testo ad ogni modifica. |Viene generato immediatamente diversamente da`change`. |
95
+
|`cut/copy/paste`|Azioni di taglia/copia/incolla. |L'azione può essere prevenuta. La proprietà `event.clipboardData`dà accesso in lettura/scrittura alla clipboard. |
0 commit comments