pFad - Phonifier reborn

diff --git a/8-web-components/2-custom-elements/1-live-timer/solution.md b/8-web-components/2-custom-elements/1-live-timer/solution.md index a9eacc880..cb2a762ed 100644 --- a/8-web-components/2-custom-elements/1-live-timer/solution.md +++ b/8-web-components/2-custom-elements/1-live-timer/solution.md @@ -1,4 +1,4 @@ -Please note: -1. We clear `setInterval` timer when the element is removed from the document. That's important, otherwise it continues ticking even if not needed any more. And the browser can't clear the memory from this element and referenced by it. -2. We can access current date as `elem.date` property. All class methods and properties are naturally element methods and properties. +Nota bene: +1. Quando rimuoviamo l'elemento dal documento, eseguiamo il clear di `setInterval` per il timer. È importante, altrimenti continuerà a ticchettare anche se non più necessario. Inoltre il browser avendo ancora un riferimento ad esso, non sarà in grado di pulire la sua memoria. +2. Deve essere possibile accedere alla data corrente tramite la proprietà `elem.date`. Tutti i metodi della classe e le relative proprietà devono anche essere metodi e proprietà dell'elemento. diff --git a/8-web-components/2-custom-elements/1-live-timer/solution.view/live-timer.js b/8-web-components/2-custom-elements/1-live-timer/solution.view/live-timer.js index a53d72e00..279d49dc8 100644 --- a/8-web-components/2-custom-elements/1-live-timer/solution.view/live-timer.js +++ b/8-web-components/2-custom-elements/1-live-timer/solution.view/live-timer.js @@ -24,7 +24,7 @@ class LiveTimer extends HTMLElement { } disconnectedCallback() { - clearInterval(this.timer); // important to let the element be garbage-collected + clearInterval(this.timer); // importante per permettere all'elemento di essere gestito dal garbage-collector } } diff --git a/8-web-components/2-custom-elements/1-live-timer/source.view/index.html b/8-web-components/2-custom-elements/1-live-timer/source.view/index.html index 878120241..287ab3bf4 100644 --- a/8-web-components/2-custom-elements/1-live-timer/source.view/index.html +++ b/8-web-components/2-custom-elements/1-live-timer/source.view/index.html @@ -1,8 +1,8 @@ - + - + diff --git a/8-web-components/2-custom-elements/1-live-timer/source.view/live-timer.js b/8-web-components/2-custom-elements/1-live-timer/source.view/live-timer.js index e2fe2b69f..1cc2b15d0 100644 --- a/8-web-components/2-custom-elements/1-live-timer/source.view/live-timer.js +++ b/8-web-components/2-custom-elements/1-live-timer/source.view/live-timer.js @@ -1,6 +1,6 @@ class LiveTimer extends HTMLElement { - /* your code here */ + /* inserite qui il vostro codice */ } diff --git a/8-web-components/2-custom-elements/1-live-timer/task.md b/8-web-components/2-custom-elements/1-live-timer/task.md index 1feb7490a..74460ff71 100644 --- a/8-web-components/2-custom-elements/1-live-timer/task.md +++ b/8-web-components/2-custom-elements/1-live-timer/task.md @@ -1,14 +1,14 @@ -# Live timer element +# Elemento live timer -We already have `` element to show a nicely formatted time. +Abbiamo già un elemento `` per mostrare un orario formattato. -Create `` element to show the current time: -1. It should use `` internally, not duplicate its functionality. -2. Ticks (updates) every second. -3. For every tick, a custom event named `tick` should be generated, with the current date in `event.detail` (see chapter ). +Create un elemento `` per mostrare l'orario corrente con queste specifiche: +1. Internamente dovrebbe usare ``, senza duplicarne la funzionalità. +2. Un tick (aggiornamento) ogni secondo. +3. Per ogni tick, deve essere generato un evento personalizzato chiamato `tick`, con la data corrente dentro `event.detail` (guardare il capitolo ). -Usage: +Uso: ```html diff --git a/8-web-components/2-custom-elements/article.md b/8-web-components/2-custom-elements/article.md index a84ed1192..faa753bd4 100644 --- a/8-web-components/2-custom-elements/article.md +++ b/8-web-components/2-custom-elements/article.md @@ -1,81 +1,81 @@ -# Custom elements +# Elementi personalizzati -We can create custom HTML elements, described by our class, with its own methods and properties, events and so on. +Possiamo creare elementi HTML personalizzati, dichiarati e descritti tramite delle apposite classi, ognuno con i suoi metodi, proprietà, eventi e così via. -Once a custom element is defined, we can use it on par with built-in HTML elements. +Una volta definito un elemento personalizzato, possiamo usarlo al pari di qualunque altro elemento HTML built-in. -That's great, as HTML dictionary is rich, but not infinite. There are no ``, ``, ``... Just think of any other tag we might need. +Ciò è grandioso, essendo che il dizionario HTML è molto ricco, ma non infinito. Non ci sono ``, ``, ``...Ci basti pensare a qualunque altro tag di cui avremmo necessità. -We can define them with a special class, and then use as if they were always a part of HTML. +Possiamo definirli con delle classi speciali, ed usarli come se fossero sempre stati parte dell'HTML. -There are two kinds of custom elements: +Gli elementi personalizzati si dividono in due categorie: -1. **Autonomous custom elements** -- "all-new" elements, extending the abstract `HTMLElement` class. -2. **Customized built-in elements** -- extending built-in elements, like a customized button, based on `HTMLButtonElement` etc. +1. **Elementi personalizzati autonomi** -- elementi "nuovi di zecca", che estendono la classe astratta `HTMLElement`. +2. **Elementi built-in personalizzati** -- estendono gli elementi built-in, ad esempio un pulsante personalizzato, basato su `HTMLButtonElement` etc. -First we'll cover autonomous elements, and then move to customized built-in ones. +Prima di tutto, affrontiamo gli elementi autonomi, dopodiché ci sposteremo a quelli built-in personalizzati. -To create a custom element, we need to tell the browser several details about it: how to show it, what to do when the element is added or removed to page, etc. +Per creare un elemento personalizzato, abbiamo bisogno di comunicare al browser una serie di dettagli relativi: come mostrarlo, cosa fare una volta che l'elemento viene aggiunto o rimosso dalla pagina, etc. -That's done by making a class with special methods. That's easy, as there are only few methods, and all of them are optional. +Ciò viene fatto creando una classe con dei metodi appositi. È facile, dato che ci sono pochi metodi, tutti opzionali. -Here's a sketch with the full list: +Ecco uno schema predefinito per la classe, con la lista completa: ```js class MyElement extends HTMLElement { constructor() { super(); - // element created + // elemento creato } connectedCallback() { - // browser calls this method when the element is added to the document - // (can be called many times if an element is repeatedly added/removed) + // il browser chiama questo metodo quando l'elemento viene aggiunto al documento + // (può essere chiamato tante volte se un elemento viene raggiunto o rimosso) } disconnectedCallback() { - // browser calls this method when the element is removed from the document - // (can be called many times if an element is repeatedly added/removed) + // il browser chiama questo metodo quando l'elemento viene rimosso dal documento + // (può essere chiamato tante volte se un elemento viene aggiunto o rimosso) } static get observedAttributes() { - return [/* array of attribute names to monitor for changes */]; + return [/* un array di nomi di attributi per monitorare le modifiche */]; } attributeChangedCallback(name, oldValue, newValue) { - // called when one of attributes listed above is modified + // chiamato quando uno degli attributi della lista precedente viene modificato } adoptedCallback() { - // called when the element is moved to a new document - // (happens in document.adoptNode, very rarely used) + // chiamato quando l'elemento viene spostato su un nuovo documento + // (avviene in document.adoptNode, usato molto raramente) } - // there can be other element methods and properties + // possono esserci altri metodi e proprietà per l'elemento } ``` -After that, we need to register the element: +Dopodiché, possiamo registrare l'elemento: ```js -// let the browser know that is served by our new class +// fa in modo che il browser sappia che viene fornito dalla nostra classe customElements.define("my-element", MyElement); ``` -Now for any HTML elements with tag ``, an instance of `MyElement` is created, and the aforementioned methods are called. We also can `document.createElement('my-element')` in JavaScript. +Adesso, per ogni elemento HTML con tag ``, verrà creata un'istanza di `MyElement`, e chiamati i sopracitati metodi. Possiamo anche chiamare `document.createElement('my-element')` in JavaScript. -```smart header="Custom element name must contain a hyphen `-`" -Custom element name must have a hyphen `-`, e.g. `my-element` and `super-button` are valid names, but `myelement` is not. +```smart header="Il nome degli elementi custom devono contenere un trattino `-`" +I nomi degli elementi personalizzati devono contenere un trattino `-`, ad esempio `my-element` e `super-button` sono nomi validi, al contrario di `myelement` che non lo è. -That's to ensure that there are no name conflicts between built-in and custom HTML elements. +Ciò ci assicura l'assenza di conflitti tra i nostri elementi HTML personalizzati e quelli built-in. ``` -## Example: "time-formatted" +## Esempio: "time-formatted" -For example, there already exists `` element in HTML, for date/time. But it doesn't do any formatting by itself. +Per esempio, esiste già l'elemento `` nell'HTML, per la data/ora. Solo non compie alcuna formattazione del dato di per sé. -Let's create `` element that displays the time in a nice, language-aware format: +Creiamo invece un elemento ``, che visualizza l'ora in un formato che consideri la lingua: ```html run height=50 autorun="no-epub" @@ -115,43 +115,42 @@ customElements.define("time-formatted", TimeFormatted); // (2) > ``` -1. The class has only one method `connectedCallback()` -- the browser calls it when `` element is added to page (or when HTML parser detects it), and it uses the built-in [Intl.DateTimeFormat](mdn:/JavaScript/Reference/Global_Objects/DateTimeFormat) data formatter, well-supported across the browsers, to show a nicely formatted time. -2. We need to register our new element by `customElements.define(tag, class)`. -3. And then we can use it everywhere. +1. La classe contiene solo il metodo `connectedCallback()` che il browser chiama appena l'elemento `` viene aggiunto alla pagina (o quando il parser HTML lo riconosce). Il metodo usa il formattatore built-in delle date [Intl.DateTimeFormat](mdn:/JavaScript/Reference/Global_Objects/DateTimeFormat), ben supportato dai browser, per mostrare l'ora formattata. +2. Dobbiamo registrare il nostro nuovo elemento tramite `customElements.define(tag, class)`. +3. A questo punto potremo usarlo ovunque. -```smart header="Custom elements upgrade" -If the browser encounters any `` elements before `customElements.define`, that's not an error. But the element is yet unknown, just like any non-standard tag. +```smart header="Aggiornamento degli elementi personalizzati" +Se il browser incontrasse un elemento `` prima di `customElements.define`, non andrebbe in errore. Ma tratterebbe l'elemento come sconosciuto, proprio come farebbe con un tag non standard. -Such "undefined" elements can be styled with CSS selector `:not(:defined)`. +In questo modo, questi elementi "undefined" possono comunque essere stilizzati con il selettore CSS `:not(:defined)`. -When `customElement.define` is called, they are "upgraded": a new instance of `TimeFormatted` -is created for each, and `connectedCallback` is called. They become `:defined`. +Quando poi viene chiamato `customElement.define`, gli elementi vengono "aggiornati": viene creata una nuova istanza di `TimeFormatted` per ognuno di essi, e chiamato il metodo `connectedCallback`. Infine diventeranno `:defined`. -To get the information about custom elements, there are methods: -- `customElements.get(name)` -- returns the class for a custom element with the given `name`, -- `customElements.whenDefined(name)` -- returns a promise that resolves (without value) when a custom element with the given `name` becomes defined. +Per avere dettagli sugli elementi personalizzati, ci sono due metodi: +- `customElements.get(name)` -- restituisce la classe per un elemento con il dato `name`, +- `customElements.whenDefined(name)` -- restituisce una promise che risolve (senza valore) quando un elemento con il dato nome diventa definito. ``` -```smart header="Rendering in `connectedCallback`, not in `constructor`" -In the example above, element content is rendered (created) in `connectedCallback`. +```smart header="Il rendering va dentro `connectedCallback`, e non nel `constructor`" +Nell'esempio appena visto, il contenuto dell'elemento viene renderizzato (creato) dentro `connectedCallback`. -Why not in the `constructor`? +Come mai non nel `constructor`? -The reason is simple: when `constructor` is called, it's yet too early. The element is created, but the browser did not yet process/assign attributes at this stage: calls to `getAttribute` would return `null`. So we can't really render there. +Il motivo è semplice: quando viene chiamato `constructor`, è ancora troppo presto. L'elemento è stato creato, ma in questa fase, il browser non ha ancora processato/assegnato i vari attributi: in questo frangente, una chiamata a `getAttribute` restituirebbe `null`. Di conseguenza, non possiamo renderizzare proprio nulla in quel punto. -Besides, if you think about it, that's better performance-wise -- to delay the work until it's really needed. +Oltretutto, pensandoci attentamente, in termini di prestazioni, è una cosa saggia ritardare il lavoro fino al momento in cui non serva davvero. -The `connectedCallback` triggers when the element is added to the document. Not just appended to another element as a child, but actually becomes a part of the page. So we can build detached DOM, create elements and prepare them for later use. They will only be actually rendered when they make it into the page. +Il metodo `connectedCallback` viene chiamato in seguito all'aggiunta dell'elemento nel documento. Non quando viene inserito dentro un altro elemento, ma quando entra a far parte della pagina. Quindi possiamo costruire un DOM separato, creare elementi e prepararli per usi successivi. Verranno renderizzati davvero, solo quando saranno parte della pagina. ``` -## Observing attributes +## Osservare gli attributi -In the current implementation of ``, after the element is rendered, further attribute changes don't have any effect. That's strange for an HTML element. Usually, when we change an attribute, like `a.href`, we expect the change to be immediately visible. So let's fix this. +Nell'implementazione attuale di ``, dopo che l'elemento viene renderizzato, i successivi cambi di attributi non sortiranno alcun effetto. È curioso che ciò avvenga per un elemento HTML. Solitamente, quando cambiamo un attributo come ad esempio `a.href`, ci aspettiamo di vederne immediatamente la modifica. Andiamo a gestire questo comportamento. -We can observe attributes by providing their list in `observedAttributes()` static getter. For such attributes, `attributeChangedCallback` is called when they are modified. It doesn't trigger for other, unlisted attributes (that's for performance reasons). +Possiamo osservare gli attributi fornendone una lista dentro il getter statico `observedAttributes()`. Per questi attributi, ad ogni loro modifica, viene chiamato `attributeChangedCallback`. Non viene chiamato per gli altri attributi fuori dalla lista (per ragioni di prestazioni). -Here's a new ``, that auto-updates when attributes change: +Ecco un nuovo ``, che si aggiorna in automatico al cambio di attributo: ```html run autorun="no-epub" height=50 ``` -1. The rendering logic is moved to `render()` helper method. -2. We call it once when the element is inserted into page. -3. For a change of an attribute, listed in `observedAttributes()`, `attributeChangedCallback` triggers. -4. ...and re-renders the element. -5. At the end, we can easily make a live timer. +1. La logica di rendering viene spostata sul metodo helper `render()`. +2. Possiamo chiamarlo una sola volta quando l'elemento viene inserito nella pagina. +3. Al cambio di un attributo, dentro la lista `observedAttributes()`, viene chiamato `attributeChangedCallback`. +4. ...e l'elemento viene renderizzato nuovamente. +5. Alla fine, possiamo creare un timer live. -## Rendering order +## Ordine di rendering -When HTML parser builds the DOM, elements are processed one after another, parents before children. E.g. if we have ``, then `` element is created and connected to DOM first, and then ``. +Quando il parser HTML costruisce il DOM, gli elementi vengono processati uno dopo l'altro, i genitori prima dei figli. Ad esempio, avendo una struttura del tipo ``, l'elemento `` verrebbe creato e connesso per primo al DOM. Dopodiché passerebbe all'elemento ``. -That leads to important consequences for custom elements. +Ciò porta a conseguenze importanti per gli elementi personalizzati. -For example, if a custom element tries to access `innerHTML` in `connectedCallback`, it gets nothing: +Per esempio, se un elemento custom provasse ad accedere all'`innerHTML` al `connectedCallback`, non otterrebbe alcunché: ```html run height=40 @@ -293,50 +292,50 @@ customElements.define('user-info', class extends HTMLElement { */!* ``` -Output order: +Ordine di output: -1. outer connected. -2. inner connected. -3. outer initialized. -4. inner initialized. +1. esterno connesso. +2. interno connesso. +3. esterno inizializzato. +4. interno inizializzato. -We can clearly see that the outer element finishes initialization `(3)` before the inner one `(4)`. +Possiamo chiaramente verificare che l'elemento esterno conclude la sua inizializzazione `(3)` prima di quello interno `(4)`. -There's no built-in callback that triggers after nested elements are ready. If needed, we can implement such thing on our own. For instance, inner elements can dispatch events like `initialized`, and outer ones can listen and react on them. +Non c'è una una callback che si attiva dopo che gli elementi annidati sono pronti. Se necessario, possiamo implementare queste genere di cose da noi. Per esempio, gli elementi interni possono eseguire eventi come `initialized`, e quelli esterni possono mettersi in ascolto per reagire di conseguenza. -## Customized built-in elements +## Elementi built-in personlizzati -New elements that we create, such as ``, don't have any associated semantics. They are unknown to search engines, and accessibility devices can't handle them. +I nuovi elementi che creiamo, come ``, non hanno una semantica associata. Sono del tutto sconosciuti per i motori di ricerca e i dispositivi di accessibilità, che non possono quindi gestirli. -But such things can be important. E.g, a search engine would be interested to know that we actually show a time. And if we're making a special kind of button, why not reuse the existing ` ``` -Here's a full example: +Ecco l'esempio completo: ```html run autorun="no-epub" *!* - + */!* *!* - + */!* ``` -Our new button extends the built-in one. So it keeps the same styles and standard features like `disabled` attribute. +Il nostro nuovo pulsante estende quello built-in. Ne mantiene gli stili e le caratteristiche standard, come ad esempio l'attributo `disabled`. -## References +## Riferimenti - HTML Living Standard: . -- Compatiblity: . +- Compatibilità: . -## Summary +## Riepilogo -Custom elements can be of two types: +Gli elementi personalizzati possono essere di due tipi: -1. "Autonomous" -- new tags, extending `HTMLElement`. +1. "Autonomi" -- nuovi tag che estendono `HTMLElement`. - Definition scheme: + Schema di definizione: ```js class MyElement extends HTMLElement { @@ -388,13 +387,13 @@ Custom elements can be of two types: /* */ ``` -2. "Customized built-in elements" -- extensions of existing elements. +2. "Elementi built-in personalizzati" -- estensione di elementi esistenti. - Requires one more `.define` argument, and `is="..."` in HTML: + Richede un argomento `.define` aggiuntivo, e `is="..."` dentro l'HTML: ```js class MyButton extends HTMLButtonElement { /*...*/ } customElements.define('my-button', MyElement, {extends: 'button'}); /*

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.