diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md index 4101d4915..b5ed23f97 100644 --- a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md +++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.md @@ -1,8 +1,8 @@ -# Outer corners +# Angoli esterni -Outer corners are basically what we get from [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect). +Gli angoli esterni sono fondamentalmente quello che otteniamo da [elem.getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect). -Coordinates of the upper-left corner `answer1` and the bottom-right corner `answer2`: +Le coordinate dell'angolo superiore sinistro `answer1` e quelle dell'angolo inferiore destro `answer2`: ```js let coords = elem.getBoundingClientRect(); @@ -11,19 +11,19 @@ let answer1 = [coords.left, coords.top]; let answer2 = [coords.right, coords.bottom]; ``` -# Left-upper inner corner +# Angolo interno superiore sinistro -That differs from the outer corner by the border width. A reliable way to get the distance is `clientLeft/clientTop`: +Questo differisce dall'angolo esterno solo per la larghezza del bordo. Un modo affidabile per calcolare la distanza è `clientLeft/clientTop`: ```js let answer3 = [coords.left + field.clientLeft, coords.top + field.clientTop]; ``` -# Right-bottom inner corner +# Angolo interno inferiore destro -In our case we need to substract the border size from the outer coordinates. +Nel nostro caso possiamo sottrarre la misura del bordo dalle coordinate esterne. -We could use CSS way: +Potremmo utilizzare il valore CSS: ```js let answer4 = [ @@ -32,7 +32,7 @@ let answer4 = [ ]; ``` -An alternative way would be to add `clientWidth/clientHeight` to coordinates of the left-upper corner. That's probably even better: +Un'alternativa sarebbe aggiungere `clientWidth/clientHeight` alle coordinate dell'angolo interno superiore sinistro. Questa è probabilmente la soluzione migliore: ```js let answer4 = [ diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html index 229c87186..2eaf0a041 100755 --- a/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html +++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/solution.view/index.html @@ -5,7 +5,7 @@ @@ -13,10 +13,10 @@ - Click anywhere to get window coordinates. -
That's for testing, to check the result you get by JavaScript. + Clicca in un punto qualsiasi per ottenere le coordinate relative alla finestra. +
Fatelo a scopo di test, per verificare il risultato che ottenete con JavaScript.
-
(click coordinates show up here)
+
(le coordinate del click vengono mostrate qui)
diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html index dd168f783..913102e97 100755 --- a/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html +++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/source.view/index.html @@ -5,7 +5,7 @@ @@ -13,10 +13,10 @@ - Click anywhere to get window coordinates. -
That's for testing, to check the result you get by JavaScript. + Clicca in un punto qualsiasi per ottenere le coordinate relative alla finestra. +
Fatelo a scopo di test, per verificare il risultato che ottenete con JavaScript.
-
(click coordinates show up here)
+
(le coordinate del click vengono mostrate qui)
@@ -32,7 +32,7 @@ diff --git a/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md b/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md index 6bbb9fe13..e300825d9 100644 --- a/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md +++ b/2-ui/1-document/11-coordinates/1-find-point-coordinates/task.md @@ -2,23 +2,23 @@ importance: 5 --- -# Find window coordinates of the field +# Trovate le coordinate del campo relative alla finestra -In the iframe below you can see a document with the green "field". +Nell'iframe sotto potete osservare un documento con un "campo" verde. -Use JavaScript to find window coordinates of corners pointed by with arrows. +Usate JavaScript per trovare le coordinate relative alla finestra degli angoli indicati dalle frecce. -There's a small feature implemented in the document for convenience. A click at any place shows coordinates there. +Per comodità è stata implementata una semplice funzionalità nel documento: un click in un punto qualsiasi mostrerà le coordinate. [iframe border=1 height=360 src="source" link edit] -Your code should use DOM to get window coordinates of: +Il vostro codice dovrebbe usare il DOM per ottenere le coordinate relative alla finestra di: -1. Upper-left, outer corner (that's simple). -2. Bottom-right, outer corner (simple too). -3. Upper-left, inner corner (a bit harder). -4. Bottom-right, inner corner (there are several ways, choose one). +1. angolo esterno superiore sinistro (è semplice). +2. angolo esterno inferiore destro (semplice anche questo). +3. angolo interno superiore sinistro (un po' più difficile). +4. angolo interno inferiore destro (esistono vari modi, sceglietene uno). -The coordinates that you calculate should be the same as those returned by the mouse click. +Le coordinate che calcolate dovrebbero essere le stesse di quelle mostrate al click del mouse. -P.S. The code should also work if the element has another size or border, not bound to any fixed values. +P.S. Il codice dovrebbe funzionare anche se l'elemento ha un'altra dimensione o un altro bordo, non deve dipendere da valori fissi. diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.md b/2-ui/1-document/11-coordinates/2-position-at/solution.md index 353eb65dd..5842d179b 100644 --- a/2-ui/1-document/11-coordinates/2-position-at/solution.md +++ b/2-ui/1-document/11-coordinates/2-position-at/solution.md @@ -1,4 +1,4 @@ -In this task we only need to accurately calculate the coordinates. See the code for details. +In questo esercizio dobbiamo solo calcolare accuratamente le coordinate. Guardate il codice per i dettagli. -Please note: the elements must be in the document to read `offsetHeight` and other properties. -A hidden (`display:none`) or out of the document element has no size. +Nota bene: gli elementi devono essere visibili nel documento per leggere `offsetHeight` e le altre proprietà. +Un elemento nascosto (`display:none`) o fuori dal documento non ha dimensioni. diff --git a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html index f931fbeac..dc58bd65a 100755 --- a/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html +++ b/2-ui/1-document/11-coordinates/2-position-at/solution.view/index.html @@ -24,13 +24,13 @@ -If you scroll the page and repeat, you'll notice that as window-relative button position changes, its window coordinates (`y/top/bottom` if you scroll vertically) change as well. +Se scorrete la pagina e ripetete il test, noterete che quando cambia la posizione relativa alla finestra del pulsante, cambiano anche le sue coordinate relative alla finestra (`y/top/bottom` se scorri verticalmente). ``` -Here's the picture of `elem.getBoundingClientRect()` output: +Di seguito un'immagine descrittiva dell'output di `elem.getBoundingClientRect()`: ![](coordinates.svg) -As you can see, `x/y` and `width/height` fully describe the rectangle. Derived properties can be easily calculated from them: +Come potete osservare, `x/y` e `width/height` descrivono pienamente il rettangolo. A partire da queste si possono calcolare agevolmente le proprietà derivate: - `left = x` - `top = y` - `right = x + width` - `bottom = y + height` -Please note: +Nota bene: -- Coordinates may be decimal fractions, such as `10.5`. That's normal, internally browser uses fractions in calculations. We don't have to round them when setting to `style.left/top`. -- Coordinates may be negative. For instance, if the page is scrolled so that `elem` is now above the window, then `elem.getBoundingClientRect().top` is negative. +- Le coordinate possono avere valori decimali, come `10.5`. È normale, il browser internamente usa frazioni nei calcoli. Non dobbiamo arrotondare quando assegniamo i valori a `style.left/top`. +- Le coordinate possono essere negative. Per esempio se la pagina scorre in modo che `elem` sia al di sopra del bordo della finestra, allora `elem.getBoundingClientRect().top` è negativa. -```smart header="Why derived properties are needed? Why does `top/left` exist if there's `x/y`?" -Mathematically, a rectangle is uniquely defined with its starting point `(x,y)` and the direction vector `(width,height)`. So the additional derived properties are for convenience. +```smart header="Perché le proprietà derivate sono necessarie? Perché esistono `top/left` se ci sono già `x/y`?" +In matematica un rettangolo è definito unicamente dalla sua origine `(x,y)` e dal vettore di direzione `(width,height)`. Le proprietà aggiuntive derivate esistono quindi per comodità. -Technically it's possible for `width/height` to be negative, that allows for "directed" rectangle, e.g. to represent mouse selection with properly marked start and end. +Tecnicamente è possibile per `width/height` essere negativi in base alla "direzione" del rettangolo, ad esempio per rappresentare la selezione del mouse con l'inizio e la fine contrassegnati adeguatamente. -Negative `width/height` values mean that the rectangle starts at its bottom-right corner and then "grows" left-upwards. +Valori negativi per `width/height` comportano che il rettangolo abbia inizio dal suo angolo in basso a destra e si sviluppi a sinistra verso l'alto. -Here's a rectangle with negative `width` and `height` (e.g. `width=-200`, `height=-100`): +Ecco un rettangolo con `width` e `height` negativi (es. `width=-200`, `height=-100`): ![](coordinates-negative.svg) -As you can see, `left/top` do not equal `x/y` in such case. +Come potete notare, in casi del genere `left/top` non sono equivalenti a `x/y`. -In practice though, `elem.getBoundingClientRect()` always returns positive width/height, here we mention negative `width/height` only for you to understand why these seemingly duplicate properties are not actually duplicates. +Ma in pratica `elem.getBoundingClientRect()` restituisce sempre valori positivi per width/height. Qui menzioniamo i valori negativi per `width/height` solo per farvi comprendere il motivo per cui queste proprietà apparentemente duplicate in realtà non lo siano. ``` -```warn header="Internet Explorer: no support for `x/y`" -Internet Explorer doesn't support `x/y` properties for historical reasons. +```warn header="Internet Explorer non supporta `x/y`" +Internet Explorer non supporta le proprietà `x/y` per ragioni storiche. -So we can either make a polyfill (add getters in `DomRect.prototype`) or just use `top/left`, as they are always the same as `x/y` for positive `width/height`, in particular in the result of `elem.getBoundingClientRect()`. +Possiamo quindi ricorrere ad un polyfill (aggiungendo dei getter in `DomRect.prototype`) o utilizzare semplicemente `top/left`, dal momento che, queste ultime, corrispondono sempre a `x/y` per i valori positivi di `width/height` restituiti da `elem.getBoundingClientRect()`. ``` -```warn header="Coordinates right/bottom are different from CSS position properties" -There are obvious similarities between window-relative coordinates and CSS `position:fixed`. +```warn header="Le coordinate right/bottom sono differenti dalle proprietà di posizione CSS" +Ci sono delle evidenti somiglianze tra le coordinate relative alla finestra e `position:fixed` dei CSS. -But in CSS positioning, `right` property means the distance from the right edge, and `bottom` property means the distance from the bottom edge. +Nel posizionamento CSS, tuttavia, la proprietà `right` indica la distanza dal bordo destro, e la proprietà `bottom` indica la distanza dal bordo in basso. -If we just look at the picture above, we can see that in JavaScript it is not so. All window coordinates are counted from the top-left corner, including these ones. +Se diamo una semplice occhiata all'immagine sopra, possiamo notare che in JavaScript non è così. Tutte le coordinate relative alla finestra sono calcolate a partire dall'angolo superiore sinistro e queste non fanno eccezione. ``` ## elementFromPoint(x, y) [#elementFromPoint] -The call to `document.elementFromPoint(x, y)` returns the most nested element at window coordinates `(x, y)`. +La chiamata a `document.elementFromPoint(x, y)` restituisce l'elemento più annidato alle coordinate `(x, y)` relative alla finestra. -The syntax is: +La sintassi è: ```js let elem = document.elementFromPoint(x, y); ``` -For instance, the code below highlights and outputs the tag of the element that is now in the middle of the window: +Il codice sotto, ad esempio, evidenzia e mostra il tag dell'elemento che si trova adesso al centro della finestra: ```js run let centerX = document.documentElement.clientWidth / 2; @@ -124,43 +124,43 @@ elem.style.background = "red"; alert(elem.tagName); ``` -As it uses window coordinates, the element may be different depending on the current scroll position. +Dal momento che usa le coordinate relative alla finestra, l'elemento può variare in base alla posizione di scorrimento corrente. -````warn header="For out-of-window coordinates the `elementFromPoint` returns `null`" -The method `document.elementFromPoint(x,y)` only works if `(x,y)` are inside the visible area. +````warn header="Per coordinate al di fuori della finestra `elementFromPoint` restituisce `null`" +Il metodo `document.elementFromPoint(x,y)` funziona solo se `(x,y)` si trovano all'interno dell'area visibile. -If any of the coordinates is negative or exceeds the window width/height, then it returns `null`. +Se una delle coordinate è negativa o eccede le dimensioni della finestra, restituisce `null`. -Here's a typical error that may occur if we don't check for it: +Ecco un tipico errore che può verificarsi se non prestiamo attenzione a questa eventualità: ```js let elem = document.elementFromPoint(x, y); -// if the coordinates happen to be out of the window, then elem = null +// se le coordinate sono fuori dalla finestra elem = null *!* elem.style.background = ''; // Error! */!* ``` ```` -## Using for "fixed" positioning +## Utilizzo con il posizionamento "fixed" -Most of time we need coordinates in order to position something. +La maggior parte delle volte per posizionare qualcosa abbiamo bisogno delle coordinate. -To show something near an element, we can use `getBoundingClientRect` to get its coordinates, and then CSS `position` together with `left/top` (or `right/bottom`). +Per mostrare qualcosa vicino un elemento, possiamo usare `getBoundingClientRect` per ricavare le sue coordinate e successivamente utilizzare la proprietà CSS `position` insieme a `left/top` (o `right/bottom`). -For instance, the function `createMessageUnder(elem, html)` below shows the message under `elem`: +Per esempio la funzione `createMessageUnder(elem, html)` in basso, mostra un messaggio sotto `elem`: ```js let elem = document.getElementById("coords-show-mark"); function createMessageUnder(elem, html) { - // create message element + // crea l'elemento messaggio let message = document.createElement('div'); - // better to use a css class for the style here + // per assegnare degli stili sarebbe preferibile usare una classe CSS message.style.cssText = "position:fixed; color: red"; *!* - // assign coordinates, don't forget "px"! + // assegna le coordinate, non dimenticare "px"! let coords = elem.getBoundingClientRect(); message.style.left = coords.left + "px"; @@ -172,45 +172,45 @@ function createMessageUnder(elem, html) { return message; } -// Usage: -// add it for 5 seconds in the document +// Esempio d'uso: +// aggiunge il messaggio al documento per 5 secondi let message = createMessageUnder(elem, 'Hello, world!'); document.body.append(message); setTimeout(() => message.remove(), 5000); ``` ```online -Click the button to run it: +Clicca il pulsante per eseguire: - + ``` -The code can be modified to show the message at the left, right, below, apply CSS animations to "fade it in" and so on. That's easy, as we have all the coordinates and sizes of the element. +Il codice può essere modificato per mostrare il messaggio a sinistra, a destra, sopra, per applicare animazioni CSS di dissolvenza e così via. Dal momento che disponiamo di tutte le coordinate e dimensioni dell'elemento, è piuttosto semplice. -But note the important detail: when the page is scrolled, the message flows away from the button. +Fate attenzione, tuttavia, ad un dettaglio importante: quando la pagina scorre, il pulsante si allontana dal messaggio. -The reason is obvious: the message element relies on `position:fixed`, so it remains at the same place of the window while the page scrolls away. +Il motivo è ovvio: il messaggio si basa su `position:fixed`, quindi rimane nello stessa posizione relativamente alla finestra mentre la pagina scorre via. -To change that, we need to use document-based coordinates and `position:absolute`. +Per cambiare questo comportamento, dobbiamo usare coordinate relative al documento e `position:absolute`. -## Document coordinates [#getCoords] +## Coordinate relative al documento [#getCoords] -Document-relative coordinates start from the upper-left corner of the document, not the window. +Le coordinate relative al documento hanno come riferimento l'angolo superiore sinistro del documento, non della finestra. -In CSS, window coordinates correspond to `position:fixed`, while document coordinates are similar to `position:absolute` on top. +Nei CSS, le coordinate relative alla finestra corrispondono a `position:fixed`, mentre le coordinate relative al documento sono assimilabili a `position:absolute` riferito alla radice del documento. -We can use `position:absolute` and `top/left` to put something at a certain place of the document, so that it remains there during a page scroll. But we need the right coordinates first. +Possiamo usare `position:absolute` e `top/left` per posizionare qualcosa in un determinato punto del documento, in modo che rimanga lì durante lo scorrimento di pagina. Ma prima abbiamo bisogno di conoscerne le coordinate corrette. -There's no standard method to get the document coordinates of an element. But it's easy to write it. +Non esiste un metodo standard per ottenere le coordinate di un elemento relative al documento, però è facile ricavarle. -The two coordinate systems are connected by the formula: -- `pageY` = `clientY` + height of the scrolled-out vertical part of the document. -- `pageX` = `clientX` + width of the scrolled-out horizontal part of the document. +I due sistemi di coordinate sono correlati dalla formula: +- `pageY` = `clientY` + altezza della parte verticale del documento fuori dall'area visibile di scorrimento. +- `pageX` = `clientX` + larghezza della parte orizzontale del documento fuori dall'area visibile di scorrimento. -The function `getCoords(elem)` will take window coordinates from `elem.getBoundingClientRect()` and add the current scroll to them: +La funzione `getCoords(elem)` ricaverà le coordinate relative alla finestra da `elem.getBoundingClientRect()` ed aggiungerà a queste lo scorrimento di pagina corrente: ```js -// get document coordinates of the element +// ottiene le coordinate relative al documento di un elemento function getCoords(elem) { let box = elem.getBoundingClientRect(); @@ -223,9 +223,9 @@ function getCoords(elem) { } ``` -If in the example above we used it with `position:absolute`, then the message would stay near the element on scroll. +Se nell'esempio sopra l'avessimo usata con `position:absolute`, il messaggio sarebbe rimasto vicino l'elemento durante lo scorrimento. -The modified `createMessageUnder` function: +Ecco la funzione `createMessageUnder` adattata: ```js function createMessageUnder(elem, html) { @@ -243,13 +243,13 @@ function createMessageUnder(elem, html) { } ``` -## Summary +## Riepilogo -Any point on the page has coordinates: +Ogni punto sulla pagina ha delle coordinate: -1. Relative to the window -- `elem.getBoundingClientRect()`. -2. Relative to the document -- `elem.getBoundingClientRect()` plus the current page scroll. +1. relative alla finestra -- `elem.getBoundingClientRect()`. +2. relative al documento -- `elem.getBoundingClientRect()` più lo scorrimento di pagina corrente. -Window coordinates are great to use with `position:fixed`, and document coordinates do well with `position:absolute`. +Le coordinate relative alla finestra sono ottime per un utilizzo con `position:fixed` e le coordinate relative al documento vanno bene con `position:absolute`. -Both coordinate systems have their pros and cons; there are times we need one or the other one, just like CSS `position` `absolute` and `fixed`. +Entrambi i sistemi di coordinate hanno i loro vantaggi e svantaggi; ci sono circostanze in cui abbiamo bisogno dell'uno o dell'altro, proprio come per la proprietà CSS `position` `absolute` e `fixed`.