diff --git a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md index e324577a9..ba9929752 100644 --- a/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md +++ b/2-ui/4-forms-controls/3-events-change-input/1-deposit-calculator/task.md @@ -2,20 +2,20 @@ importance: 5 --- -# Deposit calculator +# Calcolo del deposito -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. +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. -Here's the demo: +La demo: [iframe src="solution" height="350" border="1"] -Any input change should be processed immediately. +Ogni modifica all'input dovrebbe essere processata immediatamente. -The formula is: +La formula è: ```js -// initial: the initial money sum -// interest: e.g. 0.05 means 5% per year -// years: how many years to wait +// initial: la somma iniziale di denaro +// interest: ad esempio 0.05 significa 5% annualer +// years: quanti anni attendere let result = Math.round(initial * (1 + interest * years)); ``` diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index 1355e8bb6..e1cc78d09 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -1,39 +1,39 @@ -# Events: change, input, cut, copy, paste +# Eventi: change, input, cut, copy, paste -Let's cover various events that accompany data updates. +In questa sezione, affronteremo vari argomenti associati alle modifica dei dati. -## Event: change +## Evento: change -The `change` event triggers when the element has finished changing. +L'evento `change` viene scatenato quando si termina la modifica su un elemento. -For text inputs that means that the event occurs when it loses focus. +Per gli input di testo, ciò si verifica alla perdita del focus. -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: +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`: ```html autorun height=40 run ``` -For other elements: `select`, `input type=checkbox/radio` it triggers right after the selection changes: +Per altri elementi: `select`, `input type=checkbox/radio` viene scaturito subito dopo il cambio di selezione: ```html autorun height=40 run ``` -## Event: input +## Evento: input -The `input` event triggers every time after a value is modified by the user. +L'evento `input` viene scatenato dopo ogni modifica di un valore da parte dell'utente. -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. +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. -For instance: +Per esempio: ```html autorun height=40 run oninput: @@ -44,25 +44,25 @@ For instance: ``` -If we want to handle every modification of an `` then this event is the best choice. +Se vogliamo gestire ogni modifica di un `` questo evento è la scelta migliore. -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. +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. -```smart header="Can't prevent anything in `oninput`" -The `input` event occurs after the value is modified. +```smart header="Non possiamo prevenire nulla su `oninput`" +L'evento `input` avviene dopo che il valore viene modificato. -So we can't use `event.preventDefault()` there -- it's just too late, there would be no effect. +Di conseguenza non possiamo usare `event.preventDefault()` -- sarebbe già troppo tardi, e non avrebbe alcun effetto. ``` -## Events: cut, copy, paste +## Eventi: taglia, copia, incolla -These events occur on cutting/copying/pasting a value. +Questi eventi si scatenano nelle operazioni di taglia/copia/incolla di un valore. -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. +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. -We also can use `event.preventDefault()` to abort the action, then nothing gets copied/pasted. +È anche previsto l'uso di `event.preventDefault()` per annullare l'azione, in modo che non venga copiato/incollato nulla. -For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste: +Ad esempio, il seguente codice previene tutti questi eventi, mostrando cosa stiamo provando di tagliare/copiare/incollare: ```html autorun height=40 run @@ -74,22 +74,22 @@ For instance, the code below prevents all such events and shows what we are tryi ``` -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. +Nota bene, è possibile copiare/incollare non soltanto testo, ma qualunque cosa. Per esempio possiamo copiare un file nel sistema operativo ed incollarlo nel documento. -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). +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). -```warn header="ClipboardAPI: user safety restrictions" -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. +```warn header="ClipboardAPI: restrizione per la sicurezza dell'utente" +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`. -Also it's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox. +Inoltre è vietato generare eventi clipboard "personalizzati" tramite `dispatchEvent` in tutti i browser eccetto Firefox. ``` -## Summary +## Riepilogo -Data change events: +Eventi di modifica dati: -| Event | Description | Specials | +| Evento | Descrizione | Speciali | |---------|----------|-------------| -| `change`| A value was changed. | For text inputs triggers on focus loss. | -| `input` | For text inputs on every change. | Triggers immediately unlike `change`. | -| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipboardData` property gives read/write access to the clipboard. | +| `change`| È stato modificato un valore. | Per il testo viene generato alla perdita del focus. | +| `input` | Per gli input di testo ad ogni modifica. | Viene generato immediatamente diversamente da `change`. | +| `cut/copy/paste` | Azioni di taglia/copia/incolla. | L'azione può essere prevenuta. La proprietà `event.clipboardData` dà accesso in lettura/scrittura alla clipboard. |