chore(i18n,curriculum): update translations (#42684)
This commit is contained in:
camperbot
GitHub
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be4
|
||||
title: Access the JSON Data from an API
|
||||
title: Accedere ai dati JSON da un'API
|
||||
challengeType: 6
|
||||
forumTopicId: 301499
|
||||
dashedName: access-the-json-data-from-an-api
|
||||
@ -8,37 +8,37 @@ dashedName: access-the-json-data-from-an-api
|
||||
|
||||
# --description--
|
||||
|
||||
In the previous challenge, you saw how to get JSON data from the freeCodeCamp Cat Photo API.
|
||||
Nella sfida precedente, hai visto come ottenere i dati JSON dall'API Cat Photo di freeCodeCamp.
|
||||
|
||||
Now you'll take a closer look at the returned data to better understand the JSON format. Recall some notation in JavaScript:
|
||||
Ora daremo un'occhiata più da vicino ai dati restituiti per comprendere meglio il formato JSON. Ricorda alcune notazioni in JavaScript:
|
||||
|
||||
<blockquote>[ ] -> Square brackets represent an array<br>{ } -> Curly brackets represent an object<br>" " -> Double quotes represent a string. They are also used for key names in JSON</blockquote>
|
||||
<blockquote>[ ] -> Le parentesi quadre rappresentano un array<br>{ } -> Le parentesi graffe rappresentano un oggetto<br>" " -> Le virgolette doppie rappresentano una stringa. Vengono utilizzati anche per i nomi delle chiavi in JSON</blockquote>
|
||||
|
||||
Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need.
|
||||
Capire la struttura dei dati che un'API restituisce è importante perché influisce su come recuperare i valori di cui hai bisogno.
|
||||
|
||||
On the right, click the `Get Message` button to load the freeCodeCamp Cat Photo API JSON into the HTML.
|
||||
Sulla destra, fai click sul pulsante `Get Message` per caricare il JSON dell'API Cat Photo di freeCodeCamp nell'HTML.
|
||||
|
||||
The first and last character you see in the JSON data are square brackets `[ ]`. This means that the returned data is an array. The second character in the JSON data is a curly `{` bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo.
|
||||
Il primo e l'ultimo carattere che vedi nei dati JSON sono parentesi quadre `[ ]`. Ciò significa che i dati restituiti sono un array. Il secondo carattere dei dati JSON è una parentesi graffa `{`, che dà inizio a un oggetto. Guardando da vicino, si può vedere che ci sono tre oggetti separati. I dati JSON sono una serie di tre oggetti, in cui ogni oggetto contiene informazioni su una foto di un gatto.
|
||||
|
||||
You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has `"id":0` where `id` is a key and `0` is its corresponding value. Similarly, there are keys for `imageLink`, `altText`, and `codeNames`. Each cat photo object has these same keys, but with different values.
|
||||
Hai imparato in precedenza che gli oggetti contengono "coppie chiave-valore" separate da virgole. Nell'esempio della Cat Photo, il primo oggetto ha `"id":0` dove `id` è una chiave e `0` è il suo valore corrispondente. Allo stesso modo, ci sono chiavi per `imageLink`, `altText` e `codeNames`. Ogni oggetto relativo alla foto di un gatto ha queste stesse chiavi, ma con valori diversi.
|
||||
|
||||
Another interesting "key-value pair" in the first object is `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Here `codeNames` is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.
|
||||
Un'altra interessante "coppia chiave-valore" nel primo oggetto è `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Qui `codeNames` è la chiave e il suo valore è un array di tre stringhe. È possibile avere array di oggetti, così come una chiave con un array come valore.
|
||||
|
||||
Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the `altText` property of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called `json`:
|
||||
Ricorda come accedere ai dati in array e oggetti. Gli array utilizzano la notazione tra parentesi per accedere a un indice specifico di un elemento. Gli oggetti utilizzano la notazione tra parentesi o con il punto per accedere al valore di una data proprietà. Ecco un esempio che stampa la proprietà `altText` della prima foto di gatto - nota che i dati JSON analizzati nell'editor sono salvati in una variabile chiamata `json`:
|
||||
|
||||
```js
|
||||
console.log(json[0].altText);
|
||||
```
|
||||
|
||||
The console would display the string `A white cat wearing a green helmet shaped melon on its head.`.
|
||||
La console mostrerà la stringa `A white cat wearing a green helmet shaped melon on its head.`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
For the cat with the `id` of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value.
|
||||
Per il gatto con l'`id` di 2, stampa sulla console il secondo valore nell'array `codeNames`. Per accedere al valore dovresti usare sull'oggetto la notazione tra parentesi e con il punto (che viene salvata nella variabile `json`).
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use bracket and dot notation to access the proper code name, and print `Loki` to the console.
|
||||
Il tuo codice dovrebbe utilizzare la notazione tra parentesi e con il punto per accedere al codeName corretto e stampare `Loki` sulla console.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be2
|
||||
title: Change Text with click Events
|
||||
title: Cambiare il testo con un evento click
|
||||
challengeType: 6
|
||||
forumTopicId: 301500
|
||||
dashedName: change-text-with-click-events
|
||||
@ -8,11 +8,11 @@ dashedName: change-text-with-click-events
|
||||
|
||||
# --description--
|
||||
|
||||
When the click event happens, you can use JavaScript to update an HTML element.
|
||||
Quando l'evento click accade, puoi usare JavaScript per cambiare un elemento HTML.
|
||||
|
||||
For example, when a user clicks the `Get Message` button, it changes the text of the element with the class `message` to say `Here is the message`.
|
||||
Per esempio, quando un utente clicca il pulsante `Get Message`, il testo dell'elemento con classe `message` cambia per dire `Here is the message`.
|
||||
|
||||
This works by adding the following code within the click event:
|
||||
Perché questo accada bisogna aggiungere il seguente codice all'evento click:
|
||||
|
||||
```js
|
||||
document.getElementsByClassName('message')[0].textContent="Here is the message";
|
||||
@ -20,11 +20,11 @@ document.getElementsByClassName('message')[0].textContent="Here is the message";
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add code inside the `onclick` event handler to change the text inside the `message` element to say `Here is the message`.
|
||||
Aggiungi codice dentro il gestore di eventi `onclick` per cambiare il testo dentro l'elemento `message` per dire `Here is the message`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use the `document.getElementsByClassName` method to select the element with class `message` and set its `textContent` to the given string.
|
||||
Il tuo codice dovrebbe usare il metodo `document.getElementsByClassName` per selezionare l'elemento con classe `message` e cambiare il suo `textContent` alla stringa data.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be5
|
||||
title: Convert JSON Data to HTML
|
||||
title: Convertire dati JSON ad HTML
|
||||
challengeType: 6
|
||||
forumTopicId: 16807
|
||||
dashedName: convert-json-data-to-html
|
||||
@ -8,15 +8,15 @@ dashedName: convert-json-data-to-html
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you're getting data from a JSON API, you can display it in the HTML.
|
||||
Ora che stai ricevendo dati da un'API JSON, puoi mostrarlo nell'HTML.
|
||||
|
||||
You can use a `forEach` method to loop through the data since the cat photo objects are held in an array. As you get to each item, you can modify the HTML elements.
|
||||
Puoi usare un metodo `forEach` per iterare sui dati visto che gli oggetti di foto per gatti sono immagazzinati in un array. Iterando su ogni elemento, puoi modificare gli elementi HTML.
|
||||
|
||||
First, declare an html variable with `let html = "";`.
|
||||
Come prima cosa, dichiara una variabile html con `let html = "";`.
|
||||
|
||||
Then, loop through the JSON, adding HTML to the variable that wraps the key names in `strong` tags, followed by the value. When the loop is finished, you render it.
|
||||
Poi, itera sul JSON, aggiungendo HTML alla variabile con le chiavi degli oggetti racchiuse in tag `strong`, seguite dal valore. Quando il ciclo ha finito, lo presenti.
|
||||
|
||||
Here's the code that does this:
|
||||
Ecco il codice che lo fa:
|
||||
|
||||
```js
|
||||
let html = "";
|
||||
@ -30,13 +30,13 @@ json.forEach(function(val) {
|
||||
});
|
||||
```
|
||||
|
||||
**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to cross-site scripting attacks.
|
||||
**Nota:** per questa sfida devi aggiungere nuovi elementi HTML alla pagina quindi non puoi usare `textContent`. Invece, devi usare `innerHTML`, il quale può rendere i siti vulnerabili ad attacchi di cross-site scripting.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add a `forEach` method to loop over the JSON data and create the HTML elements to display it.
|
||||
Aggiungi un metodo `forEach` per iterare sui dati JSON e creare gli elementi HTML per mostrarli.
|
||||
|
||||
Here is some example JSON:
|
||||
Ecco alcuni esempi di JSON:
|
||||
|
||||
```json
|
||||
[
|
||||
@ -52,19 +52,19 @@ Here is some example JSON:
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should store the data in the `html` variable
|
||||
Il tuo codice dovrebbe salvare i dati nella variabile `html`
|
||||
|
||||
```js
|
||||
assert(__helpers.removeWhiteSpace(code).match(/html(\+=|=html\+)/g))
|
||||
```
|
||||
|
||||
Your code should use a `forEach` method to loop over the JSON data from the API.
|
||||
Il tuo codice dovrebbe usare un metodo `forEach` per iterare sui dati JSON ricevuti dalla API.
|
||||
|
||||
```js
|
||||
assert(code.match(/json\.forEach/g));
|
||||
```
|
||||
|
||||
Your code should wrap the key names in `strong` tags.
|
||||
Il tuo codice dovrebbe racchiudere i nomi delle proprietà in tag `strong`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<strong>.+<\/strong>/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be8
|
||||
title: Get Geolocation Data to Find A User's GPS Coordinates
|
||||
title: Ottenere dati di geolocazione per trovare le coordinate GPS di un utente
|
||||
challengeType: 6
|
||||
forumTopicId: 18188
|
||||
dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
|
||||
@ -8,15 +8,15 @@ dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
|
||||
|
||||
# --description--
|
||||
|
||||
Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information.
|
||||
Un'altra cosa speciale che puoi fare è accedere alla posizione attuale del tuo utente. Ogni browser ha integrato un navigatore che può dare questa informazione.
|
||||
|
||||
The navigator will get the user's current longitude and latitude.
|
||||
Il navigatore ottiene la longitudine e latitudine attuali.
|
||||
|
||||
You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.
|
||||
Vedrai un prompt per permettere o negare l'accesso di un sito alla tua posizione. La sfida può essere completata con entrambe le opzioni, se il codice è corretto.
|
||||
|
||||
By selecting allow, you will see the text on the output phone change to your latitude and longitude.
|
||||
Se lo permetti, vedrai il testo del telefono nell'output cambiare con la tua latitudine e longitudine.
|
||||
|
||||
Here's code that does this:
|
||||
Ecco il codice che lo fa:
|
||||
|
||||
```js
|
||||
if (navigator.geolocation){
|
||||
@ -26,33 +26,33 @@ if (navigator.geolocation){
|
||||
}
|
||||
```
|
||||
|
||||
First, it checks if the `navigator.geolocation` object exists. If it does, the `getCurrentPosition` method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the `position` object's values for latitude and longitude using dot notation and updates the HTML.
|
||||
Come prima cosa, controlla che l'oggetto `navigator.geolocation` esista. Se esiste, il metodo `getCurrentPosition` è chiamato su quell'oggetto, iniziando la richiesta asincrona per la posizione dell'utente. Se la richiesta ha successo, la funzione callback nel metodo viene eseguita. La funzione ha accesso ai valori di latitudine e longitutine nell'oggetto `position` usando la notazione a punto, e aggiorna l'HTML.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Add the example code inside the `script` tags to check a user's current location and insert it into the HTML.
|
||||
Aggiungi il codice di esempio nel tag `script` per controllare la posizione attuale dell'utente e inserirla nell'HTML.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should use `navigator.geolocation` to access the user's current location.
|
||||
Il tuo codice dovrebbe usare `navigator.geolocation` per accedere alla posizione attuale dell'utente.
|
||||
|
||||
```js
|
||||
assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
|
||||
```
|
||||
|
||||
Your code should use `position.coords.latitude` to display the user's latitudinal location.
|
||||
Il tuo codice dovrebbe usare `position.coords.latitude` per mostrare la latitudine della posizione dell'utente.
|
||||
|
||||
```js
|
||||
assert(code.match(/position\.coords\.latitude/g));
|
||||
```
|
||||
|
||||
Your code should use `position.coords.longitude` to display the user's longitudinal location.
|
||||
Il tuo codice dovrebbe usare `position.coords.longitude` per mostrare la longitudine della posizione dell'utente.
|
||||
|
||||
```js
|
||||
assert(code.match(/position\.coords\.longitude/g));
|
||||
```
|
||||
|
||||
You should display the user's position within the `div` element with `id="data"`.
|
||||
Dovresti mostrare la posizione dell'utente all'interno dell'elemento `div` con `id="data"`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
Reference in New Issue
Block a user