chore(i18n,curriculum): processed translations (#42697)
camperbot
GitHub
parent
5ec06210a5
commit
16e0d12d18
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: Add a Tooltip to a D3 Element
|
||||
title: Aggiungere un suggerimento a un elemento D3
|
||||
challengeType: 6
|
||||
forumTopicId: 301470
|
||||
dashedName: add-a-tooltip-to-a-d3-element
|
||||
|
|
@ -8,71 +8,71 @@ dashedName: add-a-tooltip-to-a-d3-element
|
|||
|
||||
# --description--
|
||||
|
||||
A tooltip shows more information about an item on a page when the user hovers over that item. There are several ways to add a tooltip to a visualization, this challenge uses the SVG `title` element.
|
||||
Un suggerimento (tooltip) mostra maggiori informazioni su un elemento in una pagina quando l'utente passa sopra di esso. Ci sono diversi modi per aggiungere un suggerimento a una visualizzazione, questa sfida utilizza l'elemento SVG `title`.
|
||||
|
||||
`title` pairs with the `text()` method to dynamically add data to the bars.
|
||||
`title` va in coppia con il metodo `text()` per aggiungere dinamicamente dati alle barre.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Append a `title` element under each `rect` node. Then call the `text()` method with a callback function so the text displays the data value.
|
||||
Aggiungi un elemento `title` sotto ogni nodo `rect`. Quindi chiama il metodo `text()` con una funzione di callback in modo che il testo mostri il valore dei dati.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 9 `title` elements.
|
||||
Il tuo codice dovrebbe avere 9 elementi `title`.
|
||||
|
||||
```js
|
||||
assert($('title').length == 9);
|
||||
```
|
||||
|
||||
The first `title` element should have tooltip text of `12`.
|
||||
Il primo elemento `title` dovrebbe avere un testo tooltip di `12`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(0).text() == '12');
|
||||
```
|
||||
|
||||
The second `title` element should have tooltip text of `31`.
|
||||
Il secondo elemento `title` dovrebbe avere un testo tooltip di `31`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(1).text() == '31');
|
||||
```
|
||||
|
||||
The third `title` element should have tooltip text of `22`.
|
||||
Il terzo elemento `title` dovrebbe avere un testo tooltip di `22`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(2).text() == '22');
|
||||
```
|
||||
|
||||
The fourth `title` element should have tooltip text of `17`.
|
||||
Il quarto elemento `title` dovrebbe avere un testo tooltip di `17`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(3).text() == '17');
|
||||
```
|
||||
|
||||
The fifth `title` element should have tooltip text of `25`.
|
||||
Il quinto elemento `title` dovrebbe avere un testo tooltip di `25`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(4).text() == '25');
|
||||
```
|
||||
|
||||
The sixth `title` element should have tooltip text of `18`.
|
||||
Il sesto elemento `title` dovrebbe avere un testo tooltip di `18`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(5).text() == '18');
|
||||
```
|
||||
|
||||
The seventh `title` element should have tooltip text of `29`.
|
||||
Il settimo elemento `title` dovrebbe avere un testo tooltip di `29`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(6).text() == '29');
|
||||
```
|
||||
|
||||
The eighth `title` element should have tooltip text of `14`.
|
||||
L'ottavo elemento `title` dovrebbe avere un testo tooltip di `14`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(7).text() == '14');
|
||||
```
|
||||
|
||||
The ninth `title` element should have tooltip text of `9`.
|
||||
Il nono elemento `title` dovrebbe avere un testo tooltip di `9`.
|
||||
|
||||
```js
|
||||
assert($('title').eq(8).text() == '9');
|
||||
|
|
@ -160,7 +160,7 @@ assert($('title').eq(8).text() == '9');
|
|||
.attr("class", "bar")
|
||||
.append("title")
|
||||
.text((d) => d)
|
||||
|
||||
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: Add Attributes to the Circle Elements
|
||||
title: Aggiungere attributi agli elementi cerchio
|
||||
challengeType: 6
|
||||
forumTopicId: 301471
|
||||
dashedName: add-attributes-to-the-circle-elements
|
||||
|
|
@ -8,27 +8,27 @@ dashedName: add-attributes-to-the-circle-elements
|
|||
|
||||
# --description--
|
||||
|
||||
The last challenge created the `circle` elements for each point in the `dataset`, and appended them to the SVG canvas. But D3 needs more information about the position and size of each `circle` to display them correctly.
|
||||
L'ultima sfida ha creato gli elementi `circle` per ogni punto nel `dataset` e li ha aggiunti alla tela SVG. Ma D3 ha bisogno di ulteriori informazioni sulla posizione e la dimensione di ogni `circle` per visualizzarli correttamente.
|
||||
|
||||
A `circle` in SVG has three main attributes. The `cx` and `cy` attributes are the coordinates. They tell D3 where to position the *center* of the shape on the SVG canvas. The radius (`r` attribute) gives the size of the `circle`.
|
||||
Un `circle` in SVG ha tre attributi principali. Gli attributi `cx` e `cy` sono le coordinate. Essi dicono a D3 dove posizionare il *centro* della forma sulla tela SVG. Il raggio (attributo`r`) dà la dimensione del `circle`.
|
||||
|
||||
Just like the `rect` `y` coordinate, the `cy` attribute for a `circle` is measured from the top of the SVG canvas, not from the bottom.
|
||||
Proprio come la coordinata `y` del `rect`, l'attributo `cy` per un `circle` è misurato dalla parte superiore della tela SVG, non dal basso.
|
||||
|
||||
All three attributes can use a callback function to set their values dynamically. Remember that all methods chained after `data(dataset)` run once per item in `dataset`. The `d` parameter in the callback function refers to the current item in `dataset`, which is an array for each point. You use bracket notation, like `d[0]`, to access the values in that array.
|
||||
Tutti e tre gli attributi possono usare una funzione callback per impostare dinamicamente i loro valori. Ricorda che tutti i metodi concatenati dopo `data(dataset)` vengono eseguiti una volta per ogni elemento del `dataset`. Il parametro `d` nella funzione callback si riferisce all'elemento corrente del `dataset`, che è un array per ogni punto. Si utilizza la notazione parentesi, come `d[0]`, per accedere ai valori in quell'array.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add `cx`, `cy`, and `r` attributes to the `circle` elements. The `cx` value should be the first number in the array for each item in `dataset`. The `cy` value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The `r` value should be `5` for all circles.
|
||||
Aggiungi gli attributi `cx`, `cy`e `r` agli elementi `circle`. Il valore `cx` dovrebbe essere il primo numero nell'array per ogni elemento del `dataset`. Il valore `cy` dovrebbe essere basato sul secondo numero nell'array, ma assicurati di mostrare il grafico a destra e non invertito. Il valore `r` dovrebbe essere `5` per tutti i cerchi.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have 10 `circle` elements.
|
||||
Il tuo codice dovrebbe avere 10 elementi `circle`.
|
||||
|
||||
```js
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
The first `circle` element should have a `cx` value of `34`, a `cy` value of `422`, and an `r` value of `5`.
|
||||
Il primo elemento `circle` dovrebbe avere un valore `cx` di `34`, un valore `cy` di `422`, e un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -38,7 +38,7 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
The second `circle` element should have a `cx` value of `109`, a `cy` value of `220`, and an `r` value of `5`.
|
||||
Il secondo elemento `circle` dovrebbe avere un valore `cx` di `109`, un valore `cy` di `220`, e un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -48,7 +48,7 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
The third `circle` element should have a `cx` value of `310`, a `cy` value of `380`, and an `r` value of `5`.
|
||||
Il terzo elemento `circle` dovrebbe avere un valore `cx` di `310`, un valore `cy` di `380`, e un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -58,7 +58,7 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
The fourth `circle` element should have a `cx` value of `79`, a `cy` value of `89`, and an `r` value of `5`.
|
||||
Il quarto elemento `circle` dovrebbe avere un valore `cx` di `79`, un valore `cy` di `89`, e un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -68,7 +68,7 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
The fifth `circle` element should have a `cx` value of `420`, a `cy` value of `280`, and an `r` value of `5`.
|
||||
Il quinto elemento `circle` dovrebbe avere un valore `cx` di `420`, un valore `cy` di `280`, e un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -78,7 +78,7 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
The sixth `circle` element should have a `cx` value of `233`, a `cy` value of `355`, and an `r` value of `5`.
|
||||
Il sesto elemento `circle` dovrebbe avere un valore `cx` di `233`, un valore `cy` di `355`, e un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -88,7 +88,7 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
The seventh `circle` element should have a `cx` value of `333`, a `cy` value of `404`, and an `r` value of `5`.
|
||||
Il settimo elemento `circle` dovrebbe avere un valore `cx` di `333`, un valore `cy` di `404`, e un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -98,7 +98,7 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
The eighth `circle` element should have a `cx` value of `222`, a `cy` value of `167`, and an `r` value of `5`.
|
||||
L'ottavo elemento `circle` dovrebbe avere un valore `cx` di `222`, un valore `cy` di `167`, e un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -108,7 +108,7 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
The ninth `circle` element should have a `cx` value of `78`, a `cy` value of `180`, and an `r` value of `5`.
|
||||
Il nono elemento `circle` dovrebbe avere un valore `cx` di `78`, un valore `cy` di `180`, e un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -118,7 +118,7 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
The tenth `circle` element should have a `cx` value of `21`, a `cy` value of `377`, and an `r` value of `5`.
|
||||
Il decimo elemento `circle` dovrebbe avere un valore `cx` di `21`, un valore `cy` di `377`, e un valore `r` di `5`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: Add Axes to a Visualization
|
||||
title: Aggiungere gli assi a una visualizzazione
|
||||
challengeType: 6
|
||||
forumTopicId: 301472
|
||||
dashedName: add-axes-to-a-visualization
|
||||
|
|
@ -8,15 +8,15 @@ dashedName: add-axes-to-a-visualization
|
|||
|
||||
# --description--
|
||||
|
||||
Another way to improve the scatter plot is to add an x-axis and a y-axis.
|
||||
Un altro modo per migliorare il grafico a dispersione è quello di aggiungere un asse x e un asse y.
|
||||
|
||||
D3 has two methods, `axisLeft()` and `axisBottom()`, to render the y-axis and x-axis, respectively. Here's an example to create the x-axis based on the `xScale` in the previous challenges:
|
||||
D3 ha due metodi, `axisLeft()` e `axisBottom()`, per tracciare rispettivamente l'asse Y e l'asse x. Ecco un esempio per creare l'asse x basato sulla `xScale` delle sfide precedenti:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
```
|
||||
|
||||
The next step is to render the axis on the SVG canvas. To do so, you can use a general SVG component, the `g` element. The `g` stands for group. Unlike `rect`, `circle`, and `text`, an axis is just a straight line when it's rendered. Because it is a simple shape, using `g` works. The last step is to apply a `transform` attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible. SVG supports different types of `transforms`, but positioning an axis needs `translate`. When it's applied to the `g` element, it moves the whole group over and down by the given amounts. Here's an example:
|
||||
Il passo successivo è quello di disegnare l'asse sulla tela SVG. Per farlo, è possibile utilizzare un componente SVG generale, l'elemento `g`. La `g` sta per gruppo. A differenza di `rect`, `circle`, e `text`, un asse è solo una linea retta quando è disegnato. Poiché è una forma semplice, usare `g` funziona. L'ultimo passo è quello di applicare un attributo `transform` per posizionare l'asse sulla tela SVG nel posto giusto. In caso contrario, la linea verrebbe disegnata lungo il bordo della tela SVG e non sarebbe visibile. SVG supporta diversi tipi di trasformazioni (`transforms`), ma il posizionamento di un asse necessita di traslare (`translate`). Quando viene applicato all'elemento `g`, esso sposta l'intero gruppo sopra e verso il basso in base alle quantità indicate. Ecco un esempio:
|
||||
|
||||
```js
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
|
|
@ -26,21 +26,21 @@ svg.append("g")
|
|||
.call(xAxis);
|
||||
```
|
||||
|
||||
The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the `call()` method. The y-axis works in the same way, except the `translate` argument is in the form `(x, 0)`. Because `translate` is a string in the `attr()` method above, you can use concatenation to include variable values for its arguments.
|
||||
Il codice sopra posiziona l'asse X nella parte inferiore della superficie di disegno SVG. Quindi è passato come argomento al metodo `call()`. L'asse y funziona allo stesso modo, a parte il fatto che l'argomento `translate` è nella forma `(x, 0)`. Poiché `translate` è una stringa nel metodo `attr()` scritto sopra, puoi usare la concatenazione per includere valori variabili nei suoi argomenti.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The scatter plot now has an x-axis. Create a y-axis in a variable named `yAxis` using the `axisLeft()` method. Then render the axis using a `g` element. Make sure to use a `transform` attribute to translate the axis by the amount of padding units right, and `0` units down. Remember to `call()` the axis.
|
||||
Il grafico di dispersione ora ha un asse x. Crea un asse Y in una variabile chiamata `yAxis` utilizzando il metodo `axisLeft()`. Quindi disegna l'asse usando un elemento `g`. Assicurati di utilizzare un attributo `transform` per traslare l'asse verso destra di un numero di unità pari al padding, e di `0` unità verso il basso. Ricordati di richiamare l'asse con `call()`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `axisLeft()` method with `yScale` passed as the argument.
|
||||
Il tuo codice dovrebbe usare il metodo `axisLeft()` con `yScale` passato come argomento.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.axisLeft\(yScale\)/g));
|
||||
```
|
||||
|
||||
The y-axis `g` element should have a `transform` attribute to translate the axis by `(60, 0)`.
|
||||
L'elemento y-axis di `g` dovrebbe avere un attributo `transform` per traslare l'asse di `(60, 0)`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -51,7 +51,7 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
Your code should call the `yAxis`.
|
||||
Il tuo codice dovrebbe chiamare `yAxis`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
|
|
@ -181,9 +181,9 @@ assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
|||
.attr("y", (d) => yScale(d[1]))
|
||||
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
|
||||
|
||||
const yAxis = d3.axisLeft(yScale);
|
||||
|
||||
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0," + (h - padding) + ")")
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
id: 5ccfad82bb2dc6c965a848e5
|
||||
title: Get JSON with the JavaScript fetch method
|
||||
title: Otterenere JSON col metodo fetch di JavaScript
|
||||
challengeType: 6
|
||||
forumTopicId: 301501
|
||||
dashedName: get-json-with-the-javascript-fetch-method
|
||||
|
|
@ -8,43 +8,43 @@ dashedName: get-json-with-the-javascript-fetch-method
|
|||
|
||||
# --description--
|
||||
|
||||
Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to `XMLHttpRequest`, but the syntax is considered easier to understand.
|
||||
Un altro metodo per richiedere dati esterni è usare il metodo JavaScript `fetch()`. È equivalente a `XMLHttpRequest`, ma la sintassi è considerata più facile da capire.
|
||||
|
||||
Here is the code for making a GET request to `/json/cats.json`
|
||||
Ecco il codice per fare una richiesta GET a `/json/cats.json`
|
||||
|
||||
```js
|
||||
|
||||
fetch('/json/cats.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('message').innerHTML = JSON.stringify(data);
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('message').innerHTML = JSON.stringify(data);
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
Take a look at each piece of this code.
|
||||
Dai un'occhiata ad ogni parte di questo codice.
|
||||
|
||||
The first line is the one that makes the request. So, `fetch(URL)` makes a `GET` request to the URL specified. The method returns a Promise.
|
||||
La prima linea è quella che fa la richiesta. Così, `fetch(URL)` fa una richiesta `GET` all'URL specificato. Il metodo restituisce una Promise.
|
||||
|
||||
After a Promise is returned, if the request was successful, the `then` method is executed, which takes the response and converts it to JSON format.
|
||||
Dopo che una Promise è restituita, se la richiesta ha avuto successo, il metodo `then` viene eseguito, ed esso converte la risposta in un formato JSON.
|
||||
|
||||
The `then` method also returns a Promise, which is handled by the next `then` method. The argument in the second `then` is the JSON object you are looking for!
|
||||
Anche il metodo `then` restituisce una Promise, gestita dal metodo `then` successivo. L'argomento nel secondo metodo `then` è l'oggetto JSON che stai cercando!
|
||||
|
||||
Now, it selects the element that will receive the data by using `document.getElementById()`. Then it modifies the HTML code of the element by inserting a string created from the JSON object returned from the request.
|
||||
Ora, l'elemento che riceverà i dati è selezionato usando `document.getElementById()`. Quindi il codice HTML dell'elemento è modificato inserendo una stringa creata dall'oggetto JSON restituito dalla richiesta.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`.
|
||||
Modifica il codice per creare e usare una richiesta `GET` all'API Cat Photo di freeCodeCamp. Ma questa volta, usando il metodo `fetch` invece di `XMLHttpRequest`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should make a `GET` request with `fetch`.
|
||||
Il tuo codice dobrebbe fare una richiesta `GET` usando `fetch`.
|
||||
|
||||
```js
|
||||
assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
|
||||
```
|
||||
|
||||
Your code should use `then` to convert the response to JSON.
|
||||
Il tuo codice dovrebbe usare `then` per convertire la risposta in JSON.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -54,13 +54,13 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
Your code should use `then` to handle the data converted to JSON by the other `then`.
|
||||
Il tuo codice dovrebbe usare `then` per gestire i dati convertiti a JSON dall'altro `then`.
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g));
|
||||
```
|
||||
|
||||
Your code should get the element with id `message` and change its inner HTML to the string of JSON data.
|
||||
Il tuo codice dovrebbe selezionare l'elemento con id `message` e cambiare il suo innerHTML con la stringa di dati JSON.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
id: 587d7fae367417b2b2512be3
|
||||
title: Get JSON with the JavaScript XMLHttpRequest Method
|
||||
title: Ottenere JSON col metodo XMLHttpRequest di JavaScript
|
||||
challengeType: 6
|
||||
forumTopicId: 301502
|
||||
dashedName: get-json-with-the-javascript-xmlhttprequest-method
|
||||
|
|
@ -8,19 +8,19 @@ dashedName: get-json-with-the-javascript-xmlhttprequest-method
|
|||
|
||||
# --description--
|
||||
|
||||
You can also request data from an external source. This is where APIs come into play.
|
||||
Puoi anche richiedere dati da una fonte esterna. È qui che le API entrano in gioco.
|
||||
|
||||
Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another. You'll learn how to update HTML with the data we get from APIs using a technology called AJAX.
|
||||
Ricordati che le API (o Application Programming Interface) sono strumenti che i computer usano per comunicare tra di loro. Imparerai come aggiornare l'HTML con i dati che otteniamo dalle API usando una tecnologia chiamata AJAX.
|
||||
|
||||
Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.
|
||||
La maggior parte delle API web trasferiscono i dati in un formato chiamato JSON. JSON sta per JavaScript Object Notation.
|
||||
|
||||
JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a `{` and a `}`.
|
||||
La sintassi JSON è molto simile alla notazione letterale degli oggetti in JavaScript. JSON ha le proprietà degli oggetti e i loro valori correnti tra un `{` e un `}`.
|
||||
|
||||
These properties and their values are often referred to as "key-value pairs".
|
||||
Queste proprietà e i loro valori sono spesso denominati "coppie chiave-valore" ("key-value pairs").
|
||||
|
||||
However, JSON transmitted by APIs are sent as `bytes`, and your application receives it as a `string`. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The `JSON.parse` method parses the string and constructs the JavaScript object described by it.
|
||||
Tuttavia, JSON viene inviato dalle API in forma di `bytes`, e la tua applicazione lo riceve come `string`. Questi possono essere convertiti in oggetti JavaScript, ma non sono oggetti JavaScript di default. Il metodo `JSON.parse` analizza la stringa e costruisce l'oggetto JavaScript da essa descritto.
|
||||
|
||||
You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:
|
||||
Puoi fare la richiesta del JSON dall'API Cat Photo di freeCodeCamp. Ecco il codice che puoi inserire nel tuo evento click per fare questo:
|
||||
|
||||
```js
|
||||
const req = new XMLHttpRequest();
|
||||
|
|
@ -32,21 +32,21 @@ req.onload = function(){
|
|||
};
|
||||
```
|
||||
|
||||
Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a `GET` request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text.
|
||||
Ecco un ripasso di quello che sta facendo ognuna delle parti in gioco. L'oggetto JavaScript `XMLHttpRequest` ha una serie di proprietà e metodi che vengono utilizzati per trasferire dati. In primo luogo, un'istanza dell'oggetto `XMLHttpRequest` viene creata e salvata nella variabile `req`. Successivamente, il metodo `open` inizializza una richiesta: questo esempio richiede dati da un'API, quindi è una richiesta `GET`. Il secondo argomento per `open` è l'URL dell'API dalla quale stai richiedendo i dati. Il terzo argomento è un valore booleano dove `true` la rende una richiesta asincrona. Il metodo `send` invia la richiesta. Infine, il gestore di evento `onload` analizza i dati restituiti e applica il metodo `JSON.stringify` per convertire l'oggetto JavaScript in una stringa. Questa stringa viene quindi inserita come testo del messaggio.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. Then click the `Get Message` button. Your AJAX function will replace the `The message will go here` text with the raw JSON output from the API.
|
||||
Modifica il codice per creare e usare una richiesta `GET` all'API Cat Photo di freeCodeCamp. Quindi fai click sul pulsante `Get Message`. La tua funzione AJAX sostituirà il testo `The message will go here` con l'output JSON grezzo ricevuto dall'API.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should create a new `XMLHttpRequest`.
|
||||
Il tuo codice dovrebbe creare una nuova `XMLHttpRequest`.
|
||||
|
||||
```js
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should use the `open` method to initialize a `GET` request to the freeCodeCamp Cat Photo API.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `open` per inizializzare una richiesta `GET` alla API Cat Photo di freeCodeCamp.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -56,13 +56,13 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
Your code should use the `send` method to send the request.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `send` per inviare la richiesta.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*\)/g));
|
||||
```
|
||||
|
||||
Your code should have an `onload` event handler set to a function.
|
||||
Il tuo codice dovrebbe avere un gestore di eventi `onload` impostato a una funzione.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -70,13 +70,13 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
Your code should use the `JSON.parse` method to parse the `responseText`.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `JSON.parse` per analizzare il `responseText`.
|
||||
|
||||
```js
|
||||
assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
|
||||
```
|
||||
|
||||
Your code should get the element with class `message` and change its inner HTML to the string of JSON data.
|
||||
Il tuo codice dovrebbe selezionare l'elemento con classe `message` e cambiare il suo innerHTML con la stringa di dati JSON.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
id: 587d7fad367417b2b2512be1
|
||||
title: Handle Click Events with JavaScript using the onclick property
|
||||
title: Gestire gli eventi click in JavaScript con la proprietà onclick
|
||||
challengeType: 6
|
||||
forumTopicId: 301503
|
||||
dashedName: handle-click-events-with-javascript-using-the-onclick-property
|
||||
|
|
@ -8,7 +8,7 @@ dashedName: handle-click-events-with-javascript-using-the-onclick-property
|
|||
|
||||
# --description--
|
||||
|
||||
You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called `DOMContentLoaded`. Here's the code that does this:
|
||||
Vuoi che il tuo codice venga eseguito solo una volta che la pagina avrà terminato il caricamento. A tal fine, puoi collegare un evento JavaScript al documento chiamato `DOMContentLoaded`. Ecco il codice che lo fa:
|
||||
|
||||
```js
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
|
@ -16,7 +16,7 @@ document.addEventListener('DOMContentLoaded', function() {
|
|||
});
|
||||
```
|
||||
|
||||
You can implement event handlers that go inside of the `DOMContentLoaded` function. You can implement an `onclick` event handler which triggers when the user clicks on the element with id `getMessage`, by adding the following code:
|
||||
Puoi implementare i gestori di eventi che vanno all'interno della funzione `DOMContentLoaded`. Puoi implementare un gestore di eventi `onclick` che si attiva quando l'utente fa click sull'elemento con id `getMessage`, aggiungendo il seguente codice:
|
||||
|
||||
```js
|
||||
document.getElementById('getMessage').onclick = function(){};
|
||||
|
|
@ -24,17 +24,17 @@ document.getElementById('getMessage').onclick = function(){};
|
|||
|
||||
# --instructions--
|
||||
|
||||
Add a click event handler inside of the `DOMContentLoaded` function for the element with id of `getMessage`.
|
||||
Aggiungi un gestore di eventi click all'interno della funzione `DOMContentLoaded` per l'elemento con id `getMessage`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `document.getElementById` method to select the `getMessage` element.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `document.getElementById` per selezionare l'elemento `getMessage`.
|
||||
|
||||
```js
|
||||
assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should add an `onclick` event handler.
|
||||
Il tuo codice dovrebbe aggiungere un gestore di eventi `onclick`.
|
||||
|
||||
```js
|
||||
assert(typeof document.getElementById('getMessage').onclick === 'function');
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
id: 587d7faf367417b2b2512be9
|
||||
title: Post Data with the JavaScript XMLHttpRequest Method
|
||||
title: Inviare dati con il metodo XMLHttpRequest di JavaScript
|
||||
challengeType: 6
|
||||
forumTopicId: 301504
|
||||
dashedName: post-data-with-the-javascript-xmlhttprequest-method
|
||||
|
|
@ -8,9 +8,9 @@ dashedName: post-data-with-the-javascript-xmlhttprequest-method
|
|||
|
||||
# --description--
|
||||
|
||||
In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.
|
||||
Negli esempi precedenti, hai ricevuto dati da una fonte esterna. Puoi anche mandare dati ad una risorsa esterna, se quella risorsa supporta richieste AJAX e tu conosci l'URL.
|
||||
|
||||
JavaScript's `XMLHttpRequest` method is also used to post data to a server. Here's an example:
|
||||
Il metodo `XMLHttpRequest` è anche usato per mandare dati ad un server. Ecco un esempio:
|
||||
|
||||
```js
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
|
@ -26,27 +26,27 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
|
|||
xhr.send(body);
|
||||
```
|
||||
|
||||
You've seen several of these methods before. Here the `open` method initializes the request as a `POST` to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of `4` means the operation is complete, and a `status` of `201` means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field.
|
||||
Hai già visto molti di questi metodi. Qui il metodo `open` inizializza la richiesta come `POST` all'URL specificato della risorsa esterna, e usa il booleano `true` per renderlo asincrono. Il metodo `setRequestHeader` imposta il valore di un'intestazione di richiesta HTTP, che contiene informazioni sul mittente e sulla richiesta. Deve essere chiamato dopo il metodo `open`, ma prima del metodo `send`. I due parametri sono il nome dell'intestazione e il valore da impostare come corpo di quell'intestazione. Successivamente, il listener dell'evento `onreadystatechange` gestisce un cambiamento nello stato della richiesta. Un `readyState` di `4` significa che l'operazione è completata, e uno `status` di `201` significa che la richiesta ha avuto successo. L'HTML del documento può essere aggiornato. Infine, il metodo `send` invia la richiesta con il valore `body`, nel quale la chiave `userName` è stata data dall'utente nel campo `input`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Update the code so it makes a `POST` request to the API endpoint. Then type your name in the input field and click `Send Message`. Your AJAX function should replace `Reply from Server will be here.` with data from the server. Format the response to display your name appended with the text ` loves cats`.
|
||||
Aggiornare il codice in modo da fare una richiesta `POST` all'endpoint API. Quindi digita il nome nel campo di input e fai click su `Send Message`. La tua funzione AJAX dovrebbe sostituire `Reply from Server will be here.` con i dati dal server. Formatta la risposta per mostrare il tuo nome con l'aggiunta del testo `loves cats`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should create a new `XMLHttpRequest`.
|
||||
Il tuo codice dovrebbe creare una nuova `XMLHttpRequest`.
|
||||
|
||||
```js
|
||||
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should use the `open` method to initialize a `POST` request to the server.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `open` per inizializzare una richiesta `POST` al server.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
|
||||
```
|
||||
|
||||
Your code should use the `setRequestHeader` method.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `setRequestHeader`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -56,13 +56,13 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
Your code should have an `onreadystatechange` event handler set to a function.
|
||||
Il tuo codice dovrebbe avere un gestore di eventi `onreadystatechange` impostato a una funzione.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.onreadystatechange\s*?=/g));
|
||||
```
|
||||
|
||||
Your code should get the element with class `message` and change its `textContent` to `userName loves cats`
|
||||
Il tuo codice dovrebbe ottenere l'elemento di classe `message` e cambiare il suo `textContent` a `userName loves cats`
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
|
@ -72,7 +72,7 @@ assert(
|
|||
);
|
||||
```
|
||||
|
||||
Your code should use the `send` method.
|
||||
Il tuo codice dovrebbe usare il metodo `send`.
|
||||
|
||||
```js
|
||||
assert(code.match(/\.send\(\s*?body\s*?\)/g));
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
id: 587d7fae367417b2b2512be7
|
||||
title: Pre-filter JSON to Get the Data You Need
|
||||
title: Pre-filtrare JSON per ottenere i dati necessari
|
||||
challengeType: 6
|
||||
forumTopicId: 18257
|
||||
dashedName: pre-filter-json-to-get-the-data-you-need
|
||||
|
|
@ -8,11 +8,11 @@ dashedName: pre-filter-json-to-get-the-data-you-need
|
|||
|
||||
# --description--
|
||||
|
||||
If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it.
|
||||
Se non vuoi rendere ogni foto di gatto che ricevi dall'API Cat Photo di freeCodeCamp, è possibile pre-filtrare il JSON prima di iterare su di esso.
|
||||
|
||||
Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose `id` key has a value of `1`.
|
||||
Dato che i dati JSON sono memorizzati in un array, è possibile utilizzare il metodo `filter` per filtrare il gatto il cui codice `id` ha un valore di `1`.
|
||||
|
||||
Here's the code to do this:
|
||||
Ecco il codice che lo fa:
|
||||
|
||||
```js
|
||||
json = json.filter(function(val) {
|
||||
|
|
@ -22,11 +22,11 @@ json = json.filter(function(val) {
|
|||
|
||||
# --instructions--
|
||||
|
||||
Add code to `filter` the json data to remove the cat with the `id` value of `1`.
|
||||
Aggiungi codice a `filter` per filtrare i dati json per rimuovere il gatto con il valore `id` di `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `filter` method.
|
||||
Il tuo codice dovrebbe utilizzare il metodo `filter`.
|
||||
|
||||
```js
|
||||
assert(code.match(/json\.filter/g));
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
id: 587d7fae367417b2b2512be6
|
||||
title: Render Images from Data Sources
|
||||
title: Presentare le immagini dalle fonti di dati
|
||||
challengeType: 6
|
||||
forumTopicId: 18265
|
||||
dashedName: render-images-from-data-sources
|
||||
|
|
@ -8,11 +8,11 @@ dashedName: render-images-from-data-sources
|
|||
|
||||
# --description--
|
||||
|
||||
The last few challenges showed that each object in the JSON array contains an `imageLink` key with a value that is the URL of a cat's image.
|
||||
Le ultime sfide hanno mostrato che ogni oggetto nell'array JSON contiene una chiave `imageLink` con un valore che è l'URL dell'immagine di un gatto.
|
||||
|
||||
When you're looping through these objects, you can use this `imageLink` property to display this image in an `img` element.
|
||||
Quando stai iterando attraverso questi oggetti, puoi usare la proprietà `imageLink` per visualizzare questa immagine in un elemento `img`.
|
||||
|
||||
Here's the code that does this:
|
||||
Ecco il codice che lo fa:
|
||||
|
||||
```js
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||
|
|
@ -20,17 +20,17 @@ html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
|||
|
||||
# --instructions--
|
||||
|
||||
Add code to use the `imageLink` and `altText` properties in an `img` tag.
|
||||
Aggiungi codice per utilizzare le proprietà `imageLink` e `altText` in un tag `img`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `imageLink` property to display the images.
|
||||
Dovresti usare la proprietà `imageLink` per visualizzare le immagini.
|
||||
|
||||
```js
|
||||
assert(code.match(/val\.imageLink/g));
|
||||
```
|
||||
|
||||
You should use the `altText` for the `alt` attribute values of the images.
|
||||
Dovresti usare `altText` per i valori degli attributi `alt` delle immagini.
|
||||
|
||||
```js
|
||||
assert(code.match(/val\.altText/g));
|
||||
|
|
|
|||
Loading…
Reference in New Issue