From 30feb96f6084a2fb976a24ac01c1f4a054611b62 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:54 +0100 Subject: unslug it: move --- files/it/learn/javascript/comefare/index.html | 291 ----------------- .../cosa_\303\250_andato_storto/index.html" | 253 --------------- .../javascript/first_steps/variabili/index.html | 337 -------------------- .../javascript/first_steps/variables/index.html | 337 ++++++++++++++++++++ .../first_steps/what_went_wrong/index.html | 253 +++++++++++++++ files/it/learn/javascript/howto/index.html | 291 +++++++++++++++++ .../it/learn/javascript/objects/basics/index.html | 242 +++++++++++++++ files/it/learn/javascript/objects/index.html | 51 +++ files/it/learn/javascript/objects/json/index.html | 345 +++++++++++++++++++++ .../it/learn/javascript/oggetti/basics/index.html | 242 --------------- files/it/learn/javascript/oggetti/index.html | 51 --- files/it/learn/javascript/oggetti/json/index.html | 345 --------------------- 12 files changed, 1519 insertions(+), 1519 deletions(-) delete mode 100644 files/it/learn/javascript/comefare/index.html delete mode 100644 "files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" delete mode 100644 files/it/learn/javascript/first_steps/variabili/index.html create mode 100644 files/it/learn/javascript/first_steps/variables/index.html create mode 100644 files/it/learn/javascript/first_steps/what_went_wrong/index.html create mode 100644 files/it/learn/javascript/howto/index.html create mode 100644 files/it/learn/javascript/objects/basics/index.html create mode 100644 files/it/learn/javascript/objects/index.html create mode 100644 files/it/learn/javascript/objects/json/index.html delete mode 100644 files/it/learn/javascript/oggetti/basics/index.html delete mode 100644 files/it/learn/javascript/oggetti/index.html delete mode 100644 files/it/learn/javascript/oggetti/json/index.html (limited to 'files/it/learn/javascript') diff --git a/files/it/learn/javascript/comefare/index.html b/files/it/learn/javascript/comefare/index.html deleted file mode 100644 index 275eb0cf8d..0000000000 --- a/files/it/learn/javascript/comefare/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: Risolvere problematiche frequenti nel tuo codice JavaScript -slug: Learn/JavaScript/Comefare -tags: - - Principianti - - imparare -translation_of: Learn/JavaScript/Howto ---- -
R{{LearnSidebar}}
- -

I link seguenti indicano soluzioni a problematiche frequenti in cui puoi imbatterti quando programmi in javaScript.

- -

Errori comuni dei principianti

- -

Ortografia corretta

- -

Se il tuo codice non funziona e/o il browser segnala che qualcosa non è definito, controlla di aver scritto tutti i tuoi nomi di variabili, nomi di funzioni, etc. correttamente.

- -

Alcune comuni funzioni built-in del browser che causano problemi sono: 

- - - - - - - - - - - - - - - - - - - - - - - - - - -
CorrettoSbagliato
getElementsByTagName()getElementbyTagName()
getElementsByName()getElementByName()
getElementsByClassName()getElementByClassName()
getElementById()getElementsById()
- -

Posizione del punto e virgola

- -

Devi assicurarti di non aver posizionato il punto e virgola nel posto sbagliato, ad esempio :

- - - - - - - - - - - - -
CorrettoSbagliato
elem.style.color = 'red';elem.style.color = 'red;'
- -

Funzioni

- -

Ci sono alcune cose che possono andare storte con le funzioni.

- -

Uno degli errori più comuni è dichiarare la funzione ma non chiamarla da nessuna parte. Per esempio:

- -
function myFunction() {
-  alert('This is my function.');
-};
- -

Questo codice non farà nulla, a meno che non venga chiamato con la seguente istruzione:

- -
myFunction();
- -

Ambito (scope) della funzione

- -

Ricorda che le funzioni hanno il loro specifico ambito (scope) — non è possibile accedere ad una variabile definita all'interno di una funzione al di fuori di essa, a meno di dichiararla globalmente (ossia fuori da ogni funzione), oppure restituire il valore (return) dalla funzione stessa.

- -

Eseguire codice posto dopo un istruzione return

- -

Ricordati anche che quando incontra l'istruzione return, l'interprete JavaScript esce dalla funzione — nessun codice all'interno della funzione verrà eseguito dopo l'istruzione return.

- -

Infatti, alcuni browsers (come Firefox) ti daranno un messaggio di errore nella console dello sviluppatore se hai inserito codice dopo un'istruzione return. Firefox restituirà "unreachable code after return statement" (codice irraggiungibile dopo l'istruzione return).

- -

Notazione per gli oggetti opposto al normale assegnamento

- -

Quando fai un normale assegnamento in JavaScript, usi un singolo simbolo di uguale, ad es. :

- -
const myNumber = 0;
- -

Con gli Oggetti occorre invece prestare attenzione alla corretta sintassi. L'oggetto deve essere definito delimitandolo con parentesi graffe, i nomi dei membri devono essere separati dai loro valori con i due punti e i membri tra loro da virgole. Per esempio:

- -
const myObject = {
-  name: 'Chris',
-  age: 38
-}
- -

Definizioni Base

- -
-
- -
- -
- -
-
- -

Casi base d'uso

- -
-
-

Generali

- - - -

Variabili

- - - -

Tipi di dati numerici

- - - -

Stringhe

- - -
- -
-

Arrays

- - - -

Debugging JavaScript

- - - -

For more information on JavaScript debugging, see Handling common JavaScript problems. Also, see Other common errors for a description of common errors.

- -

Making decisions in code

- - - -

Looping/iteration

- - -
-
- -

Intermediate use cases

- -
-
-

Functions

- - - -

Objects

- - - -

JSON

- - -
- -
-

Events

- - - -

Object-oriented JavaScript

- - - -

Web APIs

- - -
-
diff --git "a/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" "b/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" deleted file mode 100644 index 1fa4343de8..0000000000 --- "a/files/it/learn/javascript/first_steps/cosa_\303\250_andato_storto/index.html" +++ /dev/null @@ -1,253 +0,0 @@ ---- -title: Cosa è andato storto? Problemi con Javacript -slug: Learn/JavaScript/First_steps/Cosa_è_andato_storto -translation_of: Learn/JavaScript/First_steps/What_went_wrong ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
- -

Quando abbiamo realizzato il gioco "Indovina il numero"  nell'articole precedente, potresti esserti accorto che non funziona. Niente paura — questo articolo mira ad aiutarti e non farti strappare i capelli per tali problemi, fornendoti alcuni semplici aiuti su come trovare e correggere gli errori in JavaScript .

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.
Objective:To gain the ability and confidence to start fixing simple problems in your own code.
- -

Types of error

- -

Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across:

- - - -

Okay, so it's not quite that simple — there are some other differentiators as you drill down deeper. But the above classifications will do at this early stage in your career. We'll look at both of these types going forward.

- -

An erroneous example

- -

To get started, let's return to our number guessing game — except this time we'll be exploring a version that has some deliberate errors introduced. Go to Github and make yourself a local copy of number-game-errors.html (see it running live here).

- -
    -
  1. To get started, open the local copy inside your favourite text editor, and your browser.
    2. -
  2. Try playing the game — you'll notice that when you press the "Submit guess" button, it doesn't work!
    3. -
- -
-

Note: You might well have your own version of the game example that doesn't work, which you might want to fix! We'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. Then you can go back and try to fix your example.

-
- -

At this point, let's consult the developer console to see if we can see any syntax errors, then try to fix them. You'll learn how below.

- -

Fixing syntax errors

- -

Earlier on in the course we got you to type some simple JavaScript commands into the developer tools JavaScript console (if you can't remember how to open this in your browser, follow the previous link to find out how). What's even more useful is that the console gives you error messages whenever a syntax error exists inside the JavaScript being fed into the browser's JavaScript engine. Now let's go hunting.

- -
    -
  1. Go to the tab that you've got number-game-errors.html open in, and open your JavaScript console. You should see an error message along the following lines:
    2. -
  2. This is a pretty easy error to track down, and the browser gives you several useful bits of information to help you out (the screenshot above is from Firefox, but other browsers provide similar information). From left to right, we've got: -
      -
    • A red "x" to indicate that this is an error.
      • -
    • An error message to indicate what's gone wrong: "TypeError: guessSubmit.addeventListener is not a function"
      • -
    • A "Learn More" link that links through to an MDN page that explains what this error means in huge amounts of detail.
      • -
    • The name of the JavaScript file, which links through to the Debugger tab of the devtools. If you follow this link, you'll see the exact line where the error is highlighted.
      • -
    • The line number where the error is, and the character number in that line where the error is first seen. In this case, we've got line 86, character number 3.
      • -
    -
    3. -
  3. If we look at line 86 in our code editor, we'll find this line: - 
    guessSubmit.addeventListener('click', checkGuess);
    -
    4. -
  4. The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn name-of-feature" on your favourite search engine. Here's a shortcut to save you some time in this instance: addEventListener().
    5. -
  5. So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight difference in spelling or casing will cause an error. Changing addeventListener to addEventListener should fix this. Do this now.
    6. -
- -
-

Note: See our TypeError: "x" is not a function reference page for more details about this error.

-
- -

Syntax errors round two

- -
    -
  1. Save your page and refresh, and you should see the error has gone.
    2. -
  2. Now if you try to enter a guess and press the Submit guess button, you'll see ... another error!
    3. -
  3. This time the error being reported is "TypeError: lowOrHi is null", on line 78. -
    Note: Null is a special value that means "nothing", or "no value". So lowOrHi has been declared and initialised, but not with any meaningful value — it has no type or value.
    - -
    Note: This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the checkGuess() { ... } block). As you'll learn in more detail in our later functions article, code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the checkGuess() function was run by line 86.
    -
    4. -
  4. Have a look at line 78, and you'll see the following code: - 
    lowOrHi.textContent = 'Last guess was too high!';
    -
    5. -
  5. This line is trying to set the textContent property of the lowOrHi variable to a text string, but it's not working because lowOrHi does not contain what it's supposed to. Let's see why this is — try searching for other instances of lowOrHi in the code. The earliest instance you'll find in the JavaScript is on line 48: - 
    var lowOrHi = document.querySelector('lowOrHi');
    -
    6. -
  6. At this point we are trying to make the variable contain a reference to an element in the document's HTML. Let's check whether the value is null after this line has been run. Add the following code on line 49: - 
    console.log(lowOrHi);
    - -
    -

    Note: console.log() is a really useful debugging function that prints a value to the console. So it will print the value of lowOrHi to the console as soon as we have tried to set it in line 48.

    -
    -
    7. -
  7. Save and refesh, and you should now see the console.log() result in your console. Sure enough, lowOrHi's value is null at this point, so there is definitely a problem with line 48.
    8. -
  8. Let's think about what the problem could be. Line 48 is using a document.querySelector() method to get a reference to an element by selecting it with a CSS selector. Looking further up our file, we can find the paragraph in question: - 
    <p class="lowOrHi"></p>
    -
    9. -
  9. So we need a class selector here, which begins with a dot (.), but the selector being passed into the querySelector() method in line 48 has no dot. This could be the problem! Try changing lowOrHi to .lowOrHi in line 48.
    10. -
  10. Try saving and refreshing again, and your console.log() statement should return the <p> element we want. Phew! Another error fixed! You can delete your console.log() line now, or keep it to reference later on — your choice.
    11. -
- -
-

Note: See our TypeError: "x" is (not) "y" reference page for more details about this error.

-
- -

Syntax errors round three

- -
    -
  1. Now if you try playing the game through again, you should get more success — the game should play through absolutely fine, until you end the game, either by guessing the right number, or by running out of lives.
    2. -
  2. At that point, the game fails again, and the same error is spat out that we got at the beginning — "TypeError: resetButton.addeventListener is not a function"! However, this time it's listed as coming from line 94.
    3. -
  3. Looking at line number 94, it is easy to see that we've made the same mistake here. We again just need to change addeventListener to .addEventListener. Do this now.
    4. -
- -

A logic error

- -

At this point, the game should play through fine, however after playing through a few times you'll undoubtedly notice that the "random" number you've got to guess is always 1. Definitely not quite how we want the game to play out!

- -

There's definitely a problem in the game logic somewhere — the game is not returning an error; it just isn't playing right.

- -
    -
  1. Search for the randomNumber variable, and the lines where the random number is first set. The instance that stores the random number that we want to guess at the start of the game should be around line number 44: - - 
    var randomNumber = Math.floor(Math.random()) + 1;
    - And the one that generates the random number before each subsequent game is around line 113:
    2. -
  2. - 
    randomNumber = Math.floor(Math.random()) + 1;
    -
    3. -
  3. To check whether these lines are indeed the problem, let's turn to our friend console.log() again — insert the following line directly below each of the above two lines: - 
    console.log(randomNumber);
    -
    4. -
  4. Save and refresh, then play a few games — you'll see that randomNumber is equal to 1 at each point where it is logged to the console.
    5. -
- -

Working through the logic

- -

To fix this, let's consider how this line is working. First, we invoke Math.random(), which generates a random decimal number between 0 and 1, e.g. 0.5675493843.

- -
Math.random()
- -

Next, we pass the result of invoking Math.random() through Math.floor(), which rounds the number passed to it down to the nearest whole number. We then add 1 to that result:

- -
Math.floor(Math.random()) + 1
- -

Rounding a random decimal number between 0 and 1 down will always return 0, so adding 1 to it will always return 1.  We need to multiply the random number by 100 before we round it down. The following would give us a random number between 0 and 99:

- -
Math.floor(Math.random()*100);
- -

Hence us wanting to add 1, to give us a random number between 1 and 100:

- -
Math.floor(Math.random()*100) + 1;
- -

Try updating both lines like this, then save and refresh — the game should now play like we are intending it to!

- -

Other common errors

- -

There are other common errors you'll come across in your code. This section highlights most of them.

- -

SyntaxError: missing ; before statement

- -

This error generally means that you have missed a semi colon at the end of one of your lines of code, but it can sometimes be more cryptic. For example, if we change this line inside the checkGuess() function:

- -
var userGuess = Number(guessField.value);
- -

to

- -
var userGuess === Number(guessField.value);
- -

It throws this error because it thinks you are trying to do something different. You should make sure that you don't mix up the assignment operator (=) — which sets a variable to be equal to a value — with the strict equality operator (===), which tests whether one value is equal to another, and returns a true/false result.

- -
-

Note: See our SyntaxError: missing ; before statement reference page for more details about this error.

-
- -

The program always says you've won, regardless of the guess you enter

- -

This could be another symptom of mixing up the assignment and strict equality operators. For example, if we were to change this line inside checkGuess():

- -
if (userGuess === randomNumber) {
- -

to

- -
if (userGuess = randomNumber) {
- -

the test would always return true, causing the program to report that the game has been won. Be careful!

- -

SyntaxError: missing ) after argument list

- -

This one is pretty simple — it generally means that you've missed the closing parenthesis off the end of a function/method call.

- -
-

Note: See our SyntaxError: missing ) after argument list reference page for more details about this error.

-
- -

SyntaxError: missing : after property id

- -

This error usually relates to an incorrectly formed JavaScript object, but in this case we managed to get it by changing

- -
function checkGuess() {
- -

to

- -
function checkGuess( {
- -

This has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. Be careful with those parentheses!

- -

SyntaxError: missing } after function body

- -

This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the checkGuess() function.

- -

SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal

- -

These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, string would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.

- -

For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!

- -
-

Note: See our SyntaxError: Unexpected token and SyntaxError: unterminated string literal reference pages for more details about these errors.

-
- -

Summary

- -

So there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right earlier on in your learning journey.

- -

See also

- -
- -
- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/it/learn/javascript/first_steps/variabili/index.html b/files/it/learn/javascript/first_steps/variabili/index.html deleted file mode 100644 index 38da82e607..0000000000 --- a/files/it/learn/javascript/first_steps/variabili/index.html +++ /dev/null @@ -1,337 +0,0 @@ ---- -title: Memorizzazione delle informazioni necessarie - Variabili -slug: Learn/JavaScript/First_steps/Variabili -translation_of: Learn/JavaScript/First_steps/Variables ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
- -

Dopo aver letto gli ultimi due articoli, ora dovresti sapere cos'è JavaScript, cosa può fare per te, come lo usi insieme ad altre tecnologie web e quali sono le sue caratteristiche principali da un livello elevato. In questo articolo, passeremo alle basi reali, esaminando come lavorare con i blocchi di base di JavaScript - Variabili.

- - - - - - - - - - - - -
Prerequisiti:Nozioni di base di informatica, comprensione di base di HTML e CSS, comprensione di cosa sia JavaScript
Obiettivo:Acquisire familiarità con le basi delle variabili JavaScript.
- -

Strumenti di cui hai bisogno

- -

In questo articolo ti verrà chiesto di digitare righe di codice per testare la tua comprensione del contenuto. Se si utilizza un browser desktop, il posto migliore per digitare il codice di esempio è la console JavaScript del browser (vedere Quali sono gli strumenti di sviluppo del browser per ulteriori informazioni su come accedere a questo strumento).

- -

Cosa è una variabile?

- -

Una variabile è un contenitore per un valore, come un numero che potremmo usare in una somma o una stringa che potremmo usare come parte di una frase. Ma una cosa speciale delle variabili è che i loro valori possono cambiare. Diamo un'occhiata a un semplice esempio:

- -
<button>Press me</button>
- -
const button = document.querySelector('button');
-
-button.onclick = function() {
-  let name = prompt('What is your name?');
-  alert('Hello ' + name + ', nice to see you!');
-}
- -

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

- -

In questo esempio, premendo il bottone viene eseguito un paio di righe di codice. La prima riga apre una finestra sullo schermo che chiede al lettore di inserire il proprio nome, quindi memorizza il valore in una variabile. La seconda riga mostra un messaggio di benvenuto che include il loro nome, preso dal valore della variabile.

- -

Per capire perché questo è così utile, pensiamo a come scrivere questo esempio senza usare una variabile. Finirebbe per assomigliare a questo:

- -
let name = prompt('What is your name?');
-
-if (name === 'Adam') {
-  alert('Hello Adam, nice to see you!');
-} else if (name === 'Alan') {
-  alert('Hello Alan, nice to see you!');
-} else if (name === 'Bella') {
-  alert('Hello Bella, nice to see you!');
-} else if (name === 'Bianca') {
-  alert('Hello Bianca, nice to see you!');
-} else if (name === 'Chris') {
-  alert('Hello Chris, nice to see you!');
-}
-
-// ... and so on ...
- -

Potresti non comprendere appieno la sintassi che stiamo usando (ancora!), ma dovresti essere in grado di farti un'idea - se non avessimo variabili disponibili, dovremmo implementare un blocco di codice gigante che controlla quale sia il nome inserito e quindi visualizzare il messaggio appropriato per quel nome. Questo è ovviamente molto inefficiente (il codice è molto più grande, anche solo per cinque scelte), e semplicemente non funzionerebbe - non è possibile memorizzare tutte le possibili scelte.

- -

Le variabili hanno senso e, man mano che impari di più su JavaScript, inizieranno a diventare una seconda natura.

- -

Un'altra cosa speciale delle variabili è che possono contenere qualsiasi cosa, non solo stringhe e numeri. Le variabili possono anche contenere dati complessi e persino intere funzioni per fare cose sorprendenti. Imparerai di più su questo mentre procedi.

- -
-

Nota:Diciamo che le variabili contengono valori. Questa è una distinzione importante da fare. Le variabili non sono i valori stessi; sono contenitori per valori. Puoi pensare che siano come piccole scatole di cartone in cui puoi riporre le cose.

-
- -

- -

Dichiarare una variabile

- -

Per usare una variabile, devi prima crearla - più precisamente, dobbiamo dichiarare la variabile. Per fare ciò, utilizziamo la parola chiave var o let seguita dal nome che vuoi chiamare la tua variabile:

- -
let myName;
-let myAge;
- -

Qui stiamo creando due variabili chiamate myName e myAge. Prova a digitare queste righe nella console del tuo browser web. Successivamente, prova a creare una (o due) variabili chiamandole a tuo piacimento.

- -
-

Nota: In JavaScript, tutte le istruzioni del codice dovrebbero terminare con un punto e virgola (;) - il codice potrebbe funzionare correttamente per singole righe, ma probabilmente non funzionerà quando si scrivono più righe di codice insieme. Cerca di prendere l'abitudine di includerlo.

-
- -

Puoi verificare se questi valori ora esistono nell'ambiente di esecuzione digitando solo il nome della variabile, ad es.

- -
myName;
-myAge;
- -

Al momento non hanno valore; sono contenitori vuoti. Quando si immettono i nomi delle variabili, è necessario ottenere un valore undefined. Se non esistono, verrà visualizzato un messaggio di errore: "try typing in

- -
scoobyDoo;
- -
-

Nota: Non confondere una variabile esistente ma che non ha alcun valore definito con una variabile che non esiste affatto: sono cose molto diverse. Nell'analogia della scatola che hai visto sopra, non esistere significherebbe che non esiste una scatola (variabile) in cui inserire un valore. Nessun valore definito significherebbe che c'è una scatola, ma non ha alcun valore al suo interno.

-
- -

Inizializzare una Variabile

- -

Una volta che hai dichiarato una variabiale, puoi inizializzarla con un valore. Puoi farlo digitando il nome della variabile, seguito dal segno di uguale (=), seguito poi dal valore che vuoi dargli. Per esempio: 

- -
myName = 'Chris';
-myAge = 37;
- -

Prova a tornare alla console ora e digita queste linee. Dovresti vedere il valore che hai assegnato alla variabile restituita nella console per confermarla, in ogni caso. Ancora una volta, puoi restituire i valori delle variabili semplicemente digitandone il nome nella console. Riprova:

- -
myName;
-myAge;
- -

Puoi dichiarare e inizializzare una variabile nello stesso tempo, come questo: 

- -
let myDog = 'Rover';
- -

Questo è probabilmente ciò che farai la maggior parte del tempo, essendo il metodo più veloce rispetto alle due azioni separate. 

- -

Differenza tra var e let

- -

A questo punto potresti pensare "perchè abbiamo bisogno di due keywords (parole chiavi) per definire le variabili?? Perchè avere  var e let?".

- -

Le ragioni sono in qualche modo storiche.  Ai tempi della creazione di JavaScript, c'era solo var. Questa funziona fondamentalmente in molti casi, ma ha alcuni problemi nel modo in cui funziona — il suo design può qualche volta essere confuso o decisamente fastidioso. Così,  let è stata creata nella moderna versione di JavaScript, una nuova keyword (parola chiave) per creare variabili che funzionano differentemente da var, risolvendo i suoi problemi nel processo.

- -

Di seguito sono spiegate alcune semplici differenze. Non le affronteremo ora tutte, ma inizierai a scoprirle mentre impari più su JavaScript. (se vuoi davvero leggere su di loro ora, non esitare a controllare la nostra pagina di riferimento let).

- -

Per iniziare, se scrivi un multilinea JavaScript che dichiara e inizializza una variabile, puoi effettivamente dichiarare una variabile con var dopo averla inizializzata funzionerà comunque. Per esempio:

- -
myName = 'Chris';
-
-function logName() {
-  console.log(myName);
-}
-
-logName();
-
-var myName;
- -
-

Nota:  Questo non funziona quando digiti linee individuali in una JavaScript console, ma solo quando viene eseguita in linee multiple in un documento web. 

-
- -

Questo lfunziona a causa di hoisting — leggi var hoisting per maggiori dettagli sull'argomento. 

- -

Hoisting non funziona con  let. Se cambiamo var a let  nell'esempio precedente, da un errore. Questa è una buona cosa — dichiarare una variabile dopo che averla inizializzata si traduce in un codice confuso e difficile da capire.

- -

In secondo luogo, quando usi  var, puoi dichiarare la stessa variabile tutte le volte che vuoi, ma con  let non puoi. Quanto segue funzionerebbe: 

- -
var myName = 'Chris';
-var myName = 'Bob';
- -

Ma il seguente darebbe un errore sulla seconda linea: 

- -
let myName = 'Chris';
-let myName = 'Bob';
- -

Dovresti invece fare questo: 

- -
let myName = 'Chris';
-myName = 'Bob';
- -

Ancora una volta, questa è un scelta linquistica più corretta. Non c'è motivo di ridichiarare le variabili: rende le cose più confuse.

- -

Per queste ragioni e altre, noi raccomandiamo di usare let il più possibile nel tuo codice, piuttosto che var. Non ci sono motivi per usare var, a meno che non sia necessario supportare vecchie versioni di Internet Explorer proprio con il tuo codice.  ( let non è supportato fino fino alla versione 11, il moderno  Windows Edge browser supporta bene let).

- -
-

Nota:  Attualmente stiamo aggiornando il corso per usare più  let piuttosto che var. Abbi pazienza con noi!

-
- -

Aggiornare una variabile

- -

Una volta che una variabile è stata inizializzata con un valore, puoi cambiarlo (o aggiornarlo) dandogli semplicemente un valore differente. Prova a inserire le seguenti linee nella tua console: 

- -
myName = 'Bob';
-myAge = 40;
- -

Regole di denominazione delle variabili

- -

Puoi chiamare una variabile praticamente come preferisci, ma ci sono delle limitazioni. Generalmente, dovresti limitarti ad usare i caratteri latini (0-9, a-z, A-Z) e l'underscore ( _ ).

- - - -
-

Nota: Puoi trovare un elenco abbastanza completo di parole riservate da evitare a Lexical grammar — keywords.

-
- -

Esempi di nomi corretti: 

- -
age
-myAge
-init
-initialColor
-finalOutputValue
-audio1
-audio2
- -

Esempi di nomi errati: 

- -
1
-a
-_12
-myage
-MYAGE
-var
-Document
-skjfndskjfnbdskjfb
-thisisareallylongstupidvariablenameman
- -

Esempi di nomi soggetti a errori: 

- -
var
-Document
-
- -

Prova a creare qualche altra variabile ora, tenendo presente le indicazioni sopra riportate. 

- -

Tipi di Variabili

- -

Esistono diversi tipi di dati che possiamo archiviare in variabili. In questa sezione li descriveremo in breve, quindi in articoli futuri, imparerai su di loro in modo più dettagliato.

- -

Finora abbiamo esaminato i primi due, ma che ne sono altri. 

- -

Numeri

- -

Puoi memorizzare numeri nelle variabili, numeri interi come 30  o numeri decimali come 2,456 (chiamati anche numeri mobili o in virgola mobile). Non è necessario dichiarare i tipi di variabili in JavaScript, a differenza di altri linguaggi di programmazione. Quando dai a una variabile un valore numerico, non si usa le virgolette:

- -
let myAge = 17;
- -

Stringhe

- -

Le stringhe sono pezzi di testo. Quando dai a una variabile un valore di una stringa, hai bisogno di metterla in singole o doppie virgolette; altrimenti, JavaScript cerca di interpretarlo come un altro nome della variabile. 

- -
let dolphinGoodbye = 'So long and thanks for all the fish';
- -

Booleani

- -

I booleani sono dei valori vero/falso — possono avere due valori true o false. Questi sono generalmente usati per testare delle condizioni, dopo di che il codice viene eseguito come appropriato . Ad esempio, un semplice caso sarebbe:

- -
let iAmAlive = true;
- -

Considerando che in realtà sarebbe usato più così:

- -
let test = 6 < 3;
- -

Questo sta usando l'operatore "minore di" (<) per verificare se 6 è minore di 3. Come ci si potrebbe aspettare, restituisce false, perché 6 non è inferiore a 3! Imparerai molto di più su questi operatori più avanti nel corso.

- -

Arrays

- -

Un  array è un singolo oggetto che contiene valori multipli racchiusi in parentesi quadre e separate da virgole. Prova a inserire le seguenti linee nella tua console:

- -
let myNameArray = ['Chris', 'Bob', 'Jim'];
-let myNumberArray = [10, 15, 40];
- -

Una volta che gli  arrays sono definiti,  è possibile accedere a ciascun valore in base alla posizione all'interno dell'array. Prova queste linee:

- -
myNameArray[0]; // should return 'Chris'
-myNumberArray[2]; // should return 40
- -

Le parentesi quadre specificano un valore di indice corrispondente alla posizione del valore che si desidera restituire. Potresti aver notato che gli array in JavaScript sono indicizzatI a zero: il primo elemento si trova all'indice 0.

- -

Puoi imparare molto sugli arrays in un futuro articolo.

- -

Oggetti

- -

In programmazione, un oggetto è una struttura di codice che modella un oggetto reale. Puoi avere un oggetto semplice che rappresenta una box e contiene informazioni sulla sua larghezza, lunghezza e altezza, oppure potresti avere un oggetto che rappresenta una persona e contenere dati sul suo nome, altezza, peso, quale lingua parla, come salutarli
- e altro ancora.

- -

Prova a inserire il seguente codice nella tua console:

- -
let dog = { name : 'Spot', breed : 'Dalmatian' };
- -

Per recuperare le informazioni archiviate nell'oggetto, è possibile utilizzare la seguente sintassi:

- -
dog.name
- -

Per ora non esamineremo più gli oggetti: puoi saperne di più su quelli in un  modulo futuro.

- -

Tipizzazione dinamica

- -

JavaScript è un "linguaggio a tipizzazione dinamica", questo significa che,  a differenza di altri linguaggi, non è necessario specificare quale tipo di dati conterrà una variabile (numeri, stringhe, array, ecc.).

- -

Ad esempio, se dichiari una variabile e le assegni un valore racchiuso tra virgolette, il browser considera la variabile come una stringa:

- -
let myString = 'Hello';
- -

Anche se il valore contiene numeri, è comunque una stringa, quindi fai attenzione:

- -
let myNumber = '500'; // oops, questa è ancora una stringa
-typeof myNumber;
-myNumber = 500; // molto meglio - adesso questo è un numero
-typeof myNumber;
- -

Prova a inserire le quattro righe sopra nella console una per una e guarda quali sono i risultati. Noterai che stiamo usando un speciale operatore chiamato typeof- questo restituisce il tipo di dati della variabile che scrivi dopo. La prima volta che viene chiamato, dovrebbe restituire string, poiché a quel punto la variabile myNumber contiene una stringa, '500'.
- Dai un'occhiata e vedi cosa restituisce la seconda volta che lo chiami.

- -

Costanti in JavaScript

- -

Molti linguaggi di programmazione hanno il concetto di costante - un valore che una volta dichiarato non può mai essere modificato. Ci sono molte ragioni per cui vorresti farlo, dalla sicurezza (se uno script di terze parti ha cambiato tali valori potrebbe causare problemi) al debug e alla comprensione del codice (è più difficile cambiare accidentalmente valori che non dovrebbero essere cambiati e fare confusione).

- -

All'inizio di JavaScript, le costanti non esistevano. Nel moderno JavaScript, abbiamo la parola chiave const, che ci consente di memorizzare valori che non possono mai essere modificati:

- -
const daysInWeek = 7;
-const hoursInDay = 24;
- -

const lavora esattamente come let, eccetto che non puoi dare aconst un nuovo valore. Nell'esempio seguente, la seconda linea genera un errore:

- -
const daysInWeek = 7;
-daysInWeek = 8;
- -

Sommario 

- -

Ormai dovresti conoscere una quantità ragionevole di variabili JavaScript e come crearle. Nel prossimo articolo, ci concentreremo sui numeri in modo più dettagliato, esaminando come eseguire la matematica di base in JavaScript.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/it/learn/javascript/first_steps/variables/index.html b/files/it/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..38da82e607 --- /dev/null +++ b/files/it/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,337 @@ +--- +title: Memorizzazione delle informazioni necessarie - Variabili +slug: Learn/JavaScript/First_steps/Variabili +translation_of: Learn/JavaScript/First_steps/Variables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
+ +

Dopo aver letto gli ultimi due articoli, ora dovresti sapere cos'è JavaScript, cosa può fare per te, come lo usi insieme ad altre tecnologie web e quali sono le sue caratteristiche principali da un livello elevato. In questo articolo, passeremo alle basi reali, esaminando come lavorare con i blocchi di base di JavaScript - Variabili.

+ + + + + + + + + + + + +
Prerequisiti:Nozioni di base di informatica, comprensione di base di HTML e CSS, comprensione di cosa sia JavaScript
Obiettivo:Acquisire familiarità con le basi delle variabili JavaScript.
+ +

Strumenti di cui hai bisogno

+ +

In questo articolo ti verrà chiesto di digitare righe di codice per testare la tua comprensione del contenuto. Se si utilizza un browser desktop, il posto migliore per digitare il codice di esempio è la console JavaScript del browser (vedere Quali sono gli strumenti di sviluppo del browser per ulteriori informazioni su come accedere a questo strumento).

+ +

Cosa è una variabile?

+ +

Una variabile è un contenitore per un valore, come un numero che potremmo usare in una somma o una stringa che potremmo usare come parte di una frase. Ma una cosa speciale delle variabili è che i loro valori possono cambiare. Diamo un'occhiata a un semplice esempio:

+ +
<button>Press me</button>
+ +
const button = document.querySelector('button');
+
+button.onclick = function() {
+  let name = prompt('What is your name?');
+  alert('Hello ' + name + ', nice to see you!');
+}
+ +

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

+ +

In questo esempio, premendo il bottone viene eseguito un paio di righe di codice. La prima riga apre una finestra sullo schermo che chiede al lettore di inserire il proprio nome, quindi memorizza il valore in una variabile. La seconda riga mostra un messaggio di benvenuto che include il loro nome, preso dal valore della variabile.

+ +

Per capire perché questo è così utile, pensiamo a come scrivere questo esempio senza usare una variabile. Finirebbe per assomigliare a questo:

+ +
let name = prompt('What is your name?');
+
+if (name === 'Adam') {
+  alert('Hello Adam, nice to see you!');
+} else if (name === 'Alan') {
+  alert('Hello Alan, nice to see you!');
+} else if (name === 'Bella') {
+  alert('Hello Bella, nice to see you!');
+} else if (name === 'Bianca') {
+  alert('Hello Bianca, nice to see you!');
+} else if (name === 'Chris') {
+  alert('Hello Chris, nice to see you!');
+}
+
+// ... and so on ...
+ +

Potresti non comprendere appieno la sintassi che stiamo usando (ancora!), ma dovresti essere in grado di farti un'idea - se non avessimo variabili disponibili, dovremmo implementare un blocco di codice gigante che controlla quale sia il nome inserito e quindi visualizzare il messaggio appropriato per quel nome. Questo è ovviamente molto inefficiente (il codice è molto più grande, anche solo per cinque scelte), e semplicemente non funzionerebbe - non è possibile memorizzare tutte le possibili scelte.

+ +

Le variabili hanno senso e, man mano che impari di più su JavaScript, inizieranno a diventare una seconda natura.

+ +

Un'altra cosa speciale delle variabili è che possono contenere qualsiasi cosa, non solo stringhe e numeri. Le variabili possono anche contenere dati complessi e persino intere funzioni per fare cose sorprendenti. Imparerai di più su questo mentre procedi.

+ +
+

Nota:Diciamo che le variabili contengono valori. Questa è una distinzione importante da fare. Le variabili non sono i valori stessi; sono contenitori per valori. Puoi pensare che siano come piccole scatole di cartone in cui puoi riporre le cose.

+
+ +

+ +

Dichiarare una variabile

+ +

Per usare una variabile, devi prima crearla - più precisamente, dobbiamo dichiarare la variabile. Per fare ciò, utilizziamo la parola chiave var o let seguita dal nome che vuoi chiamare la tua variabile:

+ +
let myName;
+let myAge;
+ +

Qui stiamo creando due variabili chiamate myName e myAge. Prova a digitare queste righe nella console del tuo browser web. Successivamente, prova a creare una (o due) variabili chiamandole a tuo piacimento.

+ +
+

Nota: In JavaScript, tutte le istruzioni del codice dovrebbero terminare con un punto e virgola (;) - il codice potrebbe funzionare correttamente per singole righe, ma probabilmente non funzionerà quando si scrivono più righe di codice insieme. Cerca di prendere l'abitudine di includerlo.

+
+ +

Puoi verificare se questi valori ora esistono nell'ambiente di esecuzione digitando solo il nome della variabile, ad es.

+ +
myName;
+myAge;
+ +

Al momento non hanno valore; sono contenitori vuoti. Quando si immettono i nomi delle variabili, è necessario ottenere un valore undefined. Se non esistono, verrà visualizzato un messaggio di errore: "try typing in

+ +
scoobyDoo;
+ +
+

Nota: Non confondere una variabile esistente ma che non ha alcun valore definito con una variabile che non esiste affatto: sono cose molto diverse. Nell'analogia della scatola che hai visto sopra, non esistere significherebbe che non esiste una scatola (variabile) in cui inserire un valore. Nessun valore definito significherebbe che c'è una scatola, ma non ha alcun valore al suo interno.

+
+ +

Inizializzare una Variabile

+ +

Una volta che hai dichiarato una variabiale, puoi inizializzarla con un valore. Puoi farlo digitando il nome della variabile, seguito dal segno di uguale (=), seguito poi dal valore che vuoi dargli. Per esempio: 

+ +
myName = 'Chris';
+myAge = 37;
+ +

Prova a tornare alla console ora e digita queste linee. Dovresti vedere il valore che hai assegnato alla variabile restituita nella console per confermarla, in ogni caso. Ancora una volta, puoi restituire i valori delle variabili semplicemente digitandone il nome nella console. Riprova:

+ +
myName;
+myAge;
+ +

Puoi dichiarare e inizializzare una variabile nello stesso tempo, come questo: 

+ +
let myDog = 'Rover';
+ +

Questo è probabilmente ciò che farai la maggior parte del tempo, essendo il metodo più veloce rispetto alle due azioni separate. 

+ +

Differenza tra var e let

+ +

A questo punto potresti pensare "perchè abbiamo bisogno di due keywords (parole chiavi) per definire le variabili?? Perchè avere  var e let?".

+ +

Le ragioni sono in qualche modo storiche.  Ai tempi della creazione di JavaScript, c'era solo var. Questa funziona fondamentalmente in molti casi, ma ha alcuni problemi nel modo in cui funziona — il suo design può qualche volta essere confuso o decisamente fastidioso. Così,  let è stata creata nella moderna versione di JavaScript, una nuova keyword (parola chiave) per creare variabili che funzionano differentemente da var, risolvendo i suoi problemi nel processo.

+ +

Di seguito sono spiegate alcune semplici differenze. Non le affronteremo ora tutte, ma inizierai a scoprirle mentre impari più su JavaScript. (se vuoi davvero leggere su di loro ora, non esitare a controllare la nostra pagina di riferimento let).

+ +

Per iniziare, se scrivi un multilinea JavaScript che dichiara e inizializza una variabile, puoi effettivamente dichiarare una variabile con var dopo averla inizializzata funzionerà comunque. Per esempio:

+ +
myName = 'Chris';
+
+function logName() {
+  console.log(myName);
+}
+
+logName();
+
+var myName;
+ +
+

Nota:  Questo non funziona quando digiti linee individuali in una JavaScript console, ma solo quando viene eseguita in linee multiple in un documento web. 

+
+ +

Questo lfunziona a causa di hoisting — leggi var hoisting per maggiori dettagli sull'argomento. 

+ +

Hoisting non funziona con  let. Se cambiamo var a let  nell'esempio precedente, da un errore. Questa è una buona cosa — dichiarare una variabile dopo che averla inizializzata si traduce in un codice confuso e difficile da capire.

+ +

In secondo luogo, quando usi  var, puoi dichiarare la stessa variabile tutte le volte che vuoi, ma con  let non puoi. Quanto segue funzionerebbe: 

+ +
var myName = 'Chris';
+var myName = 'Bob';
+ +

Ma il seguente darebbe un errore sulla seconda linea: 

+ +
let myName = 'Chris';
+let myName = 'Bob';
+ +

Dovresti invece fare questo: 

+ +
let myName = 'Chris';
+myName = 'Bob';
+ +

Ancora una volta, questa è un scelta linquistica più corretta. Non c'è motivo di ridichiarare le variabili: rende le cose più confuse.

+ +

Per queste ragioni e altre, noi raccomandiamo di usare let il più possibile nel tuo codice, piuttosto che var. Non ci sono motivi per usare var, a meno che non sia necessario supportare vecchie versioni di Internet Explorer proprio con il tuo codice.  ( let non è supportato fino fino alla versione 11, il moderno  Windows Edge browser supporta bene let).

+ +
+

Nota:  Attualmente stiamo aggiornando il corso per usare più  let piuttosto che var. Abbi pazienza con noi!

+
+ +

Aggiornare una variabile

+ +

Una volta che una variabile è stata inizializzata con un valore, puoi cambiarlo (o aggiornarlo) dandogli semplicemente un valore differente. Prova a inserire le seguenti linee nella tua console: 

+ +
myName = 'Bob';
+myAge = 40;
+ +

Regole di denominazione delle variabili

+ +

Puoi chiamare una variabile praticamente come preferisci, ma ci sono delle limitazioni. Generalmente, dovresti limitarti ad usare i caratteri latini (0-9, a-z, A-Z) e l'underscore ( _ ).

+ + + +
+

Nota: Puoi trovare un elenco abbastanza completo di parole riservate da evitare a Lexical grammar — keywords.

+
+ +

Esempi di nomi corretti: 

+ +
age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2
+ +

Esempi di nomi errati: 

+ +
1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman
+ +

Esempi di nomi soggetti a errori: 

+ +
var
+Document
+
+ +

Prova a creare qualche altra variabile ora, tenendo presente le indicazioni sopra riportate. 

+ +

Tipi di Variabili

+ +

Esistono diversi tipi di dati che possiamo archiviare in variabili. In questa sezione li descriveremo in breve, quindi in articoli futuri, imparerai su di loro in modo più dettagliato.

+ +

Finora abbiamo esaminato i primi due, ma che ne sono altri. 

+ +

Numeri

+ +

Puoi memorizzare numeri nelle variabili, numeri interi come 30  o numeri decimali come 2,456 (chiamati anche numeri mobili o in virgola mobile). Non è necessario dichiarare i tipi di variabili in JavaScript, a differenza di altri linguaggi di programmazione. Quando dai a una variabile un valore numerico, non si usa le virgolette:

+ +
let myAge = 17;
+ +

Stringhe

+ +

Le stringhe sono pezzi di testo. Quando dai a una variabile un valore di una stringa, hai bisogno di metterla in singole o doppie virgolette; altrimenti, JavaScript cerca di interpretarlo come un altro nome della variabile. 

+ +
let dolphinGoodbye = 'So long and thanks for all the fish';
+ +

Booleani

+ +

I booleani sono dei valori vero/falso — possono avere due valori true o false. Questi sono generalmente usati per testare delle condizioni, dopo di che il codice viene eseguito come appropriato . Ad esempio, un semplice caso sarebbe:

+ +
let iAmAlive = true;
+ +

Considerando che in realtà sarebbe usato più così:

+ +
let test = 6 < 3;
+ +

Questo sta usando l'operatore "minore di" (<) per verificare se 6 è minore di 3. Come ci si potrebbe aspettare, restituisce false, perché 6 non è inferiore a 3! Imparerai molto di più su questi operatori più avanti nel corso.

+ +

Arrays

+ +

Un  array è un singolo oggetto che contiene valori multipli racchiusi in parentesi quadre e separate da virgole. Prova a inserire le seguenti linee nella tua console:

+ +
let myNameArray = ['Chris', 'Bob', 'Jim'];
+let myNumberArray = [10, 15, 40];
+ +

Una volta che gli  arrays sono definiti,  è possibile accedere a ciascun valore in base alla posizione all'interno dell'array. Prova queste linee:

+ +
myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40
+ +

Le parentesi quadre specificano un valore di indice corrispondente alla posizione del valore che si desidera restituire. Potresti aver notato che gli array in JavaScript sono indicizzatI a zero: il primo elemento si trova all'indice 0.

+ +

Puoi imparare molto sugli arrays in un futuro articolo.

+ +

Oggetti

+ +

In programmazione, un oggetto è una struttura di codice che modella un oggetto reale. Puoi avere un oggetto semplice che rappresenta una box e contiene informazioni sulla sua larghezza, lunghezza e altezza, oppure potresti avere un oggetto che rappresenta una persona e contenere dati sul suo nome, altezza, peso, quale lingua parla, come salutarli
+ e altro ancora.

+ +

Prova a inserire il seguente codice nella tua console:

+ +
let dog = { name : 'Spot', breed : 'Dalmatian' };
+ +

Per recuperare le informazioni archiviate nell'oggetto, è possibile utilizzare la seguente sintassi:

+ +
dog.name
+ +

Per ora non esamineremo più gli oggetti: puoi saperne di più su quelli in un  modulo futuro.

+ +

Tipizzazione dinamica

+ +

JavaScript è un "linguaggio a tipizzazione dinamica", questo significa che,  a differenza di altri linguaggi, non è necessario specificare quale tipo di dati conterrà una variabile (numeri, stringhe, array, ecc.).

+ +

Ad esempio, se dichiari una variabile e le assegni un valore racchiuso tra virgolette, il browser considera la variabile come una stringa:

+ +
let myString = 'Hello';
+ +

Anche se il valore contiene numeri, è comunque una stringa, quindi fai attenzione:

+ +
let myNumber = '500'; // oops, questa è ancora una stringa
+typeof myNumber;
+myNumber = 500; // molto meglio - adesso questo è un numero
+typeof myNumber;
+ +

Prova a inserire le quattro righe sopra nella console una per una e guarda quali sono i risultati. Noterai che stiamo usando un speciale operatore chiamato typeof- questo restituisce il tipo di dati della variabile che scrivi dopo. La prima volta che viene chiamato, dovrebbe restituire string, poiché a quel punto la variabile myNumber contiene una stringa, '500'.
+ Dai un'occhiata e vedi cosa restituisce la seconda volta che lo chiami.

+ +

Costanti in JavaScript

+ +

Molti linguaggi di programmazione hanno il concetto di costante - un valore che una volta dichiarato non può mai essere modificato. Ci sono molte ragioni per cui vorresti farlo, dalla sicurezza (se uno script di terze parti ha cambiato tali valori potrebbe causare problemi) al debug e alla comprensione del codice (è più difficile cambiare accidentalmente valori che non dovrebbero essere cambiati e fare confusione).

+ +

All'inizio di JavaScript, le costanti non esistevano. Nel moderno JavaScript, abbiamo la parola chiave const, che ci consente di memorizzare valori che non possono mai essere modificati:

+ +
const daysInWeek = 7;
+const hoursInDay = 24;
+ +

const lavora esattamente come let, eccetto che non puoi dare aconst un nuovo valore. Nell'esempio seguente, la seconda linea genera un errore:

+ +
const daysInWeek = 7;
+daysInWeek = 8;
+ +

Sommario 

+ +

Ormai dovresti conoscere una quantità ragionevole di variabili JavaScript e come crearle. Nel prossimo articolo, ci concentreremo sui numeri in modo più dettagliato, esaminando come eseguire la matematica di base in JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/it/learn/javascript/first_steps/what_went_wrong/index.html b/files/it/learn/javascript/first_steps/what_went_wrong/index.html new file mode 100644 index 0000000000..1fa4343de8 --- /dev/null +++ b/files/it/learn/javascript/first_steps/what_went_wrong/index.html @@ -0,0 +1,253 @@ +--- +title: Cosa è andato storto? Problemi con Javacript +slug: Learn/JavaScript/First_steps/Cosa_è_andato_storto +translation_of: Learn/JavaScript/First_steps/What_went_wrong +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}
+ +

Quando abbiamo realizzato il gioco "Indovina il numero"  nell'articole precedente, potresti esserti accorto che non funziona. Niente paura — questo articolo mira ad aiutarti e non farti strappare i capelli per tali problemi, fornendoti alcuni semplici aiuti su come trovare e correggere gli errori in JavaScript .

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.
Objective:To gain the ability and confidence to start fixing simple problems in your own code.
+ +

Types of error

+ +

Generally speaking, when you do something wrong in code, there are two main types of error that you'll come across:

+ + + +

Okay, so it's not quite that simple — there are some other differentiators as you drill down deeper. But the above classifications will do at this early stage in your career. We'll look at both of these types going forward.

+ +

An erroneous example

+ +

To get started, let's return to our number guessing game — except this time we'll be exploring a version that has some deliberate errors introduced. Go to Github and make yourself a local copy of number-game-errors.html (see it running live here).

+ +
    +
  1. To get started, open the local copy inside your favourite text editor, and your browser.
    2. +
  2. Try playing the game — you'll notice that when you press the "Submit guess" button, it doesn't work!
    3. +
+ +
+

Note: You might well have your own version of the game example that doesn't work, which you might want to fix! We'd still like you to work through the article with our version, so that you can learn the techniques we are teaching here. Then you can go back and try to fix your example.

+
+ +

At this point, let's consult the developer console to see if we can see any syntax errors, then try to fix them. You'll learn how below.

+ +

Fixing syntax errors

+ +

Earlier on in the course we got you to type some simple JavaScript commands into the developer tools JavaScript console (if you can't remember how to open this in your browser, follow the previous link to find out how). What's even more useful is that the console gives you error messages whenever a syntax error exists inside the JavaScript being fed into the browser's JavaScript engine. Now let's go hunting.

+ +
    +
  1. Go to the tab that you've got number-game-errors.html open in, and open your JavaScript console. You should see an error message along the following lines:
    2. +
  2. This is a pretty easy error to track down, and the browser gives you several useful bits of information to help you out (the screenshot above is from Firefox, but other browsers provide similar information). From left to right, we've got: +
      +
    • A red "x" to indicate that this is an error.
      • +
    • An error message to indicate what's gone wrong: "TypeError: guessSubmit.addeventListener is not a function"
      • +
    • A "Learn More" link that links through to an MDN page that explains what this error means in huge amounts of detail.
      • +
    • The name of the JavaScript file, which links through to the Debugger tab of the devtools. If you follow this link, you'll see the exact line where the error is highlighted.
      • +
    • The line number where the error is, and the character number in that line where the error is first seen. In this case, we've got line 86, character number 3.
      • +
    +
    3. +
  3. If we look at line 86 in our code editor, we'll find this line: + 
    guessSubmit.addeventListener('click', checkGuess);
    +
    4. +
  4. The error message says "guessSubmit.addeventListener is not a function", so we've probably spelled something wrong. If you are not sure of the correct spelling of a piece of syntax, it is often good to look up the feature on MDN. The best way to do this currently is to search for "mdn name-of-feature" on your favourite search engine. Here's a shortcut to save you some time in this instance: addEventListener().
    5. +
  5. So, looking at this page, the error appears to be that we've spelled the function name wrong! Remember that JavaScript is case sensitive, so any slight difference in spelling or casing will cause an error. Changing addeventListener to addEventListener should fix this. Do this now.
    6. +
+ +
+

Note: See our TypeError: "x" is not a function reference page for more details about this error.

+
+ +

Syntax errors round two

+ +
    +
  1. Save your page and refresh, and you should see the error has gone.
    2. +
  2. Now if you try to enter a guess and press the Submit guess button, you'll see ... another error!
    3. +
  3. This time the error being reported is "TypeError: lowOrHi is null", on line 78. +
    Note: Null is a special value that means "nothing", or "no value". So lowOrHi has been declared and initialised, but not with any meaningful value — it has no type or value.
    + +
    Note: This error didn't come up as soon as the page was loaded because this error occurred inside a function (inside the checkGuess() { ... } block). As you'll learn in more detail in our later functions article, code inside functions runs in a separate scope than code outside functions. In this case, the code was not run and the error was not thrown until the checkGuess() function was run by line 86.
    +
    4. +
  4. Have a look at line 78, and you'll see the following code: + 
    lowOrHi.textContent = 'Last guess was too high!';
    +
    5. +
  5. This line is trying to set the textContent property of the lowOrHi variable to a text string, but it's not working because lowOrHi does not contain what it's supposed to. Let's see why this is — try searching for other instances of lowOrHi in the code. The earliest instance you'll find in the JavaScript is on line 48: + 
    var lowOrHi = document.querySelector('lowOrHi');
    +
    6. +
  6. At this point we are trying to make the variable contain a reference to an element in the document's HTML. Let's check whether the value is null after this line has been run. Add the following code on line 49: + 
    console.log(lowOrHi);
    + +
    +

    Note: console.log() is a really useful debugging function that prints a value to the console. So it will print the value of lowOrHi to the console as soon as we have tried to set it in line 48.

    +
    +
    7. +
  7. Save and refesh, and you should now see the console.log() result in your console. Sure enough, lowOrHi's value is null at this point, so there is definitely a problem with line 48.
    8. +
  8. Let's think about what the problem could be. Line 48 is using a document.querySelector() method to get a reference to an element by selecting it with a CSS selector. Looking further up our file, we can find the paragraph in question: + 
    <p class="lowOrHi"></p>
    +
    9. +
  9. So we need a class selector here, which begins with a dot (.), but the selector being passed into the querySelector() method in line 48 has no dot. This could be the problem! Try changing lowOrHi to .lowOrHi in line 48.
    10. +
  10. Try saving and refreshing again, and your console.log() statement should return the <p> element we want. Phew! Another error fixed! You can delete your console.log() line now, or keep it to reference later on — your choice.
    11. +
+ +
+

Note: See our TypeError: "x" is (not) "y" reference page for more details about this error.

+
+ +

Syntax errors round three

+ +
    +
  1. Now if you try playing the game through again, you should get more success — the game should play through absolutely fine, until you end the game, either by guessing the right number, or by running out of lives.
    2. +
  2. At that point, the game fails again, and the same error is spat out that we got at the beginning — "TypeError: resetButton.addeventListener is not a function"! However, this time it's listed as coming from line 94.
    3. +
  3. Looking at line number 94, it is easy to see that we've made the same mistake here. We again just need to change addeventListener to .addEventListener. Do this now.
    4. +
+ +

A logic error

+ +

At this point, the game should play through fine, however after playing through a few times you'll undoubtedly notice that the "random" number you've got to guess is always 1. Definitely not quite how we want the game to play out!

+ +

There's definitely a problem in the game logic somewhere — the game is not returning an error; it just isn't playing right.

+ +
    +
  1. Search for the randomNumber variable, and the lines where the random number is first set. The instance that stores the random number that we want to guess at the start of the game should be around line number 44: + + 
    var randomNumber = Math.floor(Math.random()) + 1;
    + And the one that generates the random number before each subsequent game is around line 113:
    2. +
  2. + 
    randomNumber = Math.floor(Math.random()) + 1;
    +
    3. +
  3. To check whether these lines are indeed the problem, let's turn to our friend console.log() again — insert the following line directly below each of the above two lines: + 
    console.log(randomNumber);
    +
    4. +
  4. Save and refresh, then play a few games — you'll see that randomNumber is equal to 1 at each point where it is logged to the console.
    5. +
+ +

Working through the logic

+ +

To fix this, let's consider how this line is working. First, we invoke Math.random(), which generates a random decimal number between 0 and 1, e.g. 0.5675493843.

+ +
Math.random()
+ +

Next, we pass the result of invoking Math.random() through Math.floor(), which rounds the number passed to it down to the nearest whole number. We then add 1 to that result:

+ +
Math.floor(Math.random()) + 1
+ +

Rounding a random decimal number between 0 and 1 down will always return 0, so adding 1 to it will always return 1.  We need to multiply the random number by 100 before we round it down. The following would give us a random number between 0 and 99:

+ +
Math.floor(Math.random()*100);
+ +

Hence us wanting to add 1, to give us a random number between 1 and 100:

+ +
Math.floor(Math.random()*100) + 1;
+ +

Try updating both lines like this, then save and refresh — the game should now play like we are intending it to!

+ +

Other common errors

+ +

There are other common errors you'll come across in your code. This section highlights most of them.

+ +

SyntaxError: missing ; before statement

+ +

This error generally means that you have missed a semi colon at the end of one of your lines of code, but it can sometimes be more cryptic. For example, if we change this line inside the checkGuess() function:

+ +
var userGuess = Number(guessField.value);
+ +

to

+ +
var userGuess === Number(guessField.value);
+ +

It throws this error because it thinks you are trying to do something different. You should make sure that you don't mix up the assignment operator (=) — which sets a variable to be equal to a value — with the strict equality operator (===), which tests whether one value is equal to another, and returns a true/false result.

+ +
+

Note: See our SyntaxError: missing ; before statement reference page for more details about this error.

+
+ +

The program always says you've won, regardless of the guess you enter

+ +

This could be another symptom of mixing up the assignment and strict equality operators. For example, if we were to change this line inside checkGuess():

+ +
if (userGuess === randomNumber) {
+ +

to

+ +
if (userGuess = randomNumber) {
+ +

the test would always return true, causing the program to report that the game has been won. Be careful!

+ +

SyntaxError: missing ) after argument list

+ +

This one is pretty simple — it generally means that you've missed the closing parenthesis off the end of a function/method call.

+ +
+

Note: See our SyntaxError: missing ) after argument list reference page for more details about this error.

+
+ +

SyntaxError: missing : after property id

+ +

This error usually relates to an incorrectly formed JavaScript object, but in this case we managed to get it by changing

+ +
function checkGuess() {
+ +

to

+ +
function checkGuess( {
+ +

This has caused the browser to think that we are trying to pass the contents of the function into the function as an argument. Be careful with those parentheses!

+ +

SyntaxError: missing } after function body

+ +

This is easy — it generally means that you've missed one of your curly braces from a function or conditional structure. We got this error by deleting one of the closing curly braces near the bottom of the checkGuess() function.

+ +

SyntaxError: expected expression, got 'string' or SyntaxError: unterminated string literal

+ +

These errors generally mean that you've missed off a string value's opening or closing quote mark. In the first error above, string would be replaced with the unexpected character(s) that the browser found instead of a quote mark at the start of a string. The second error means that the string has not been ended with a quote mark.

+ +

For all of these errors, think about how we tackled the examples we looked at in the walkthrough. When an error arises, look at the line number you are given, go to that line and see if you can spot what's wrong. Bear in mind that the error is not necessarily going to be on that line, and also that the error might not be caused by the exact same problem we cited above!

+ +
+

Note: See our SyntaxError: Unexpected token and SyntaxError: unterminated string literal reference pages for more details about these errors.

+
+ +

Summary

+ +

So there we have it, the basics of figuring out errors in simple JavaScript programs. It won't always be that simple to work out what's wrong in your code, but at least this will save you a few hours of sleep and allow you to progress a bit faster when things don't turn out right earlier on in your learning journey.

+ +

See also

+ +
+ +
+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/it/learn/javascript/howto/index.html b/files/it/learn/javascript/howto/index.html new file mode 100644 index 0000000000..275eb0cf8d --- /dev/null +++ b/files/it/learn/javascript/howto/index.html @@ -0,0 +1,291 @@ +--- +title: Risolvere problematiche frequenti nel tuo codice JavaScript +slug: Learn/JavaScript/Comefare +tags: + - Principianti + - imparare +translation_of: Learn/JavaScript/Howto +--- +
R{{LearnSidebar}}
+ +

I link seguenti indicano soluzioni a problematiche frequenti in cui puoi imbatterti quando programmi in javaScript.

+ +

Errori comuni dei principianti

+ +

Ortografia corretta

+ +

Se il tuo codice non funziona e/o il browser segnala che qualcosa non è definito, controlla di aver scritto tutti i tuoi nomi di variabili, nomi di funzioni, etc. correttamente.

+ +

Alcune comuni funzioni built-in del browser che causano problemi sono: 

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
CorrettoSbagliato
getElementsByTagName()getElementbyTagName()
getElementsByName()getElementByName()
getElementsByClassName()getElementByClassName()
getElementById()getElementsById()
+ +

Posizione del punto e virgola

+ +

Devi assicurarti di non aver posizionato il punto e virgola nel posto sbagliato, ad esempio :

+ + + + + + + + + + + + +
CorrettoSbagliato
elem.style.color = 'red';elem.style.color = 'red;'
+ +

Funzioni

+ +

Ci sono alcune cose che possono andare storte con le funzioni.

+ +

Uno degli errori più comuni è dichiarare la funzione ma non chiamarla da nessuna parte. Per esempio:

+ +
function myFunction() {
+  alert('This is my function.');
+};
+ +

Questo codice non farà nulla, a meno che non venga chiamato con la seguente istruzione:

+ +
myFunction();
+ +

Ambito (scope) della funzione

+ +

Ricorda che le funzioni hanno il loro specifico ambito (scope) — non è possibile accedere ad una variabile definita all'interno di una funzione al di fuori di essa, a meno di dichiararla globalmente (ossia fuori da ogni funzione), oppure restituire il valore (return) dalla funzione stessa.

+ +

Eseguire codice posto dopo un istruzione return

+ +

Ricordati anche che quando incontra l'istruzione return, l'interprete JavaScript esce dalla funzione — nessun codice all'interno della funzione verrà eseguito dopo l'istruzione return.

+ +

Infatti, alcuni browsers (come Firefox) ti daranno un messaggio di errore nella console dello sviluppatore se hai inserito codice dopo un'istruzione return. Firefox restituirà "unreachable code after return statement" (codice irraggiungibile dopo l'istruzione return).

+ +

Notazione per gli oggetti opposto al normale assegnamento

+ +

Quando fai un normale assegnamento in JavaScript, usi un singolo simbolo di uguale, ad es. :

+ +
const myNumber = 0;
+ +

Con gli Oggetti occorre invece prestare attenzione alla corretta sintassi. L'oggetto deve essere definito delimitandolo con parentesi graffe, i nomi dei membri devono essere separati dai loro valori con i due punti e i membri tra loro da virgole. Per esempio:

+ +
const myObject = {
+  name: 'Chris',
+  age: 38
+}
+ +

Definizioni Base

+ +
+
+ +
+ +
+ +
+
+ +

Casi base d'uso

+ +
+
+

Generali

+ + + +

Variabili

+ + + +

Tipi di dati numerici

+ + + +

Stringhe

+ + +
+ +
+

Arrays

+ + + +

Debugging JavaScript

+ + + +

For more information on JavaScript debugging, see Handling common JavaScript problems. Also, see Other common errors for a description of common errors.

+ +

Making decisions in code

+ + + +

Looping/iteration

+ + +
+
+ +

Intermediate use cases

+ +
+
+

Functions

+ + + +

Objects

+ + + +

JSON

+ + +
+ +
+

Events

+ + + +

Object-oriented JavaScript

+ + + +

Web APIs

+ + +
+
diff --git a/files/it/learn/javascript/objects/basics/index.html b/files/it/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..539df5c2e0 --- /dev/null +++ b/files/it/learn/javascript/objects/basics/index.html @@ -0,0 +1,242 @@ +--- +title: Basi degli oggetti JavaScript +slug: Learn/JavaScript/Oggetti/Basics +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
+ +

Nel primo articolo sugli oggetti JavaScript, vedremo la sintassi fondamentale degli oggetti JavaScript, e rivedremo alcune funzionalità di JavaScript che abbiamo già esamintato in precedenza in questo corso, rimarcando il fatto che molte delle funzionalità che abbiamo già incontrato son di fatto oggetti.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza basilare dei computers, comprensione di base di HTML e CSS, familiarità con le basi di JavaScript (vedi Primi passi e Costruire blocchi).
Obiettivo:Capire le basi della teoria che stà dietro alla programmazione object-oriented, come questa si relazione con JavaScript ("la maggior parte delle cose sono oggetti"), e come incominciare a lavorare con gli oggetti JavaScript.
+ +

Basi degli oggetti

+ +

Un oggetto è una collezione di dati e/o funzionalità correlati (che di solito consiste in alcune variabili e funzioni — che sono chiamate proprietà e metodi quando fanno parte di oggetti.) Proviamo con un esempio per vedere come si comportano.

+ +

Per incomiciare, facciamo una copia locale del nostro file oojs.html. Questo contiene un piccolissimo — elemento {{HTMLElement("script")}} che possiamo usare per scrivere il nostro sorgente, un elemento {{HTMLElement("input")}} per insrire istruzioni di esempio quando la pagina viene visualizzata, alcune definizioni di variabili, ed una funzione che invia ciò che si inserisce in input in un elemento {{HTMLElement("p")}}. Useremo questo come base per esplorare i concetti fondamentali della sintassi degli oggetti.

+ +

Come molte cose in JavaScript, creare un oggetto spesso inizia definendo ed inizializzando una variabile. Prova ad inserire ciò che segue sotto al codice JavaScript già presente nel file, quindi salva e ricarica:

+ +
var person = {};
+ +

Se scrivi person nella casella di testo e premi il pulsante, dovresti ottenere il seguente risulatato:

+ +
[object Object]
+ +

Congratulazioni, hai appena creato il tuo primo oggetto. Ben fatto! Ma questo è un oggetto vuoto, perciò non ci possiamo fare molto. Aggiorniamo il nostro oggetto in questo modo:

+ +
var person = {
+  name: ['Bob', 'Smith'],
+  age: 32,
+  gender: 'male',
+  interests: ['music', 'skiing'],
+  bio: function() {
+    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
+  },
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name[0] + '.');
+  }
+};
+
+ +

Dopo aver salvato e ricaricato la pagina, prova ad inserire alcuni di questi nella casella di input:

+ +
person.name[0]
+person.age
+person.interests[1]
+person.bio()
+person.greeting()
+ +

Ora hai ottenuto alcuni dati e funzionalità nel tuo oggetto, ed ora puoi accedere ad essi con alcune sintassi semplici e graziose!

+ +
+

Nota: Se hai problemi ad ottenere questo risultato, prova comparare quello che hai scritto con la nostra versione — vedi oojs-finished.html (e anche la versione funzionante). Un errore comune quando si inizia con gli oggetti è quello di mettere una virgola dopo l'ultimo elenemto — questo genera un errore.

+
+ +

Quindi che cosa è successo qui? Bene, un oggetto è composto da svariati membri, ogniuno dei quali ha un nome (es. name e age sopra), ed un valore (es, ['Bob', 'Smith'] e 32). Ogni coppia nome/valore deve essere separata da una virgola, ed ogni nome e valore devono essere separati dai due punti. La sintassi segue sempre questo schema:

+ +
var objectName = {
+  member1Name: member1Value,
+  member2Name: member2Value,
+  member3Name: member3Value
+}
+ +

Il valore di un membro di un oggetto può essere qualsiasi cosa — nel nostro oggetto persona abbiamo una strigna, un numero, due array e due funzioni. I primi quatto elementi sono dati e ad essi ci si riferisce come le proprietà (properties) del oggetto. Gli ultimi due elementi sono funzioni che consentono all'oggetto di fare qualcosa con i dati, e ad esse ci si riferisce come i metodi (methods) dell'oggetto.

+ +

Un oggetto come questo viene considerato un oggetto letterale — noi abbiamo scritto letteralmente il conenuto dell'oggetto nel momento che lo abbiamo creato. Questo è in contrasto con l'istanziazione di oggetti da classi, che vedremo un po' più avanti.

+ +

È molto comune creare oggetti letterali quando si desidera trasferire una serie di dati relazionati e strutturati in qualche maniera, ad esempio per inviare richieste al server per inserire i dati nel database. Inviare un singolo oggetto è molto più efficiente che inviare i dati individualmente, ed è più facile lavorarci rispetto agli array, perché i dati vengono identificati per nome.

+ +

Notazione puntata

+ +

Sopra, abbiamo acceduto alle proprietà ed ai metodi degli oggetti utilizzando la notazione puntata. Il nome dell'oggetto (person) serve da namespace — e deve essere insirito prima per accedere a qualsiasi cosa incapsulata nell'oggetto. Quindi si scrive il punto seguito dell'elemento a cui si vuole accedere — 
+ questo può essere il nome di una proprietà semplice, un elemento di una proprietà di tipo array, o una chiamata ad uno dei metodi dell oggetto, ad esempio:

+ +
person.age
+person.interests[1]
+person.bio()
+ +

Namespaces nidificati

+ +

È anche possibile assegnare un altro oggetto ad un membro di un oggetto. Ad esempio prova a cambiare la property name da

+ +
name: ['Bob', 'Smith'],
+ +

a

+ +
name : {
+  first: 'Bob',
+  last: 'Smith'
+},
+ +

In questo modo abbiamo effettivamente creato un  sotto-namespace. Può sembrare complesso, ma non lo è veramente — per accedere a questi devi solo concatenare un ulteriore passo alla fine con un altro punto. Prova questi:

+ +
person.name.first
+person.name.last
+ +

Importante: A questo punto devi anche cambiare il codice dei tuoi metodi e cambiare ogni istanza di

+ +
name[0]
+name[1]
+ +

con

+ +
name.first
+name.last
+ +

Altrimenti i tuoi metodi non funzioneranno più.

+ +

Notazione con parentesi quadre

+ +

C'è un altro modo per accedere alle proprietà degli oggetti — usando la notazione delle parentesi quadre. Invece di usare questi:

+ +
person.age
+person.name.first
+ +

Puoi usare

+ +
person['age']
+person['name']['first']
+ +

Questo assomiglia molto al modo in cui accedi agli elementi di un array, ed è sostanzialmente la stessa cosa — invece di usare un indice numerico per scegliere un elemento, stai usando il nome associato ad ogni valore membro. Non c'è da meravigliarsi che gli oggetti a volte vengono chiamati array associativi — essi infatti associano le stringhe ai valori nello stesso modo in cui gli arrays associano i numeri ai valori.

+ +

Assegnare i membri degli oggetti

+ +

Fino a qui abbiamo solo recuperato (get) valori dei menbri degli oggetti — si possono anche assegnare (set) i valori ai menbri degli oggetti semplicemente dichiarando i membri che si desidera assegnare (usando la notazione puntata o con quadre), cone ad esempio:

+ +
person.age = 45;
+person['name']['last'] = 'Cratchit';
+ +

Prova ad inserire queste linee e poi rileggi i dati nuovamente per vedere che cosa è cambiato:

+ +
person.age
+person['name']['last']
+ +

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these:

+ +
person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }
+ +

Ora possiamo provare i nostri nuovi membri:

+ +
person['eyes']
+person.farewell()
+ +

Un utile aspetto della notazione con parentesi quadre è che non solo può essere usata per assegnare valori dinamicamente, ma anche per assegnare i nomi dei mebri. Ad esempio se desideriamo che gli utenti siano in grado di assegnare tipi di dato personalizzati scrivendo il nome della proprietà ed il suo valore in due campi di input, possiamo oggenere questi valori in questo modo:

+ +
var myDataName = nameInput.value;
+var myDataValue = nameValue.value;
+ +

e possiamo aggiungere questi nomi e valori nel nostro oggetto person in questo modo:

+ +
person[myDataName] = myDataValue;
+ +

Puoi testare questo aggiungendo le linee seguenti nel tuo codice appena prima della parentesi graffa chiusa nel oggetto person:

+ +
var myDataName = 'height';
+var myDataValue = '1.75m';
+person[myDataName] = myDataValue;
+ +

Ora prova s salvare e ricaricare la pagina ed inserisci ciò che segue nella casella di testo:

+ +
person.height
+ +

Non è possibile aggiungere proprità ad oggetti con il metodo descritto usando la notazione puntata, che accetta solo nomi aggiunti in modo letterale e non valori di variabili puntate da un nome.

+ +

Che cos'è "this"?

+ +

Forse ti sei accorto di qualcosa di leggermente strano nei nostri metodi. Guarda questo per esempio:

+ +
greeting: function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+}
+ +

Forse ti sei chiesto che cos'è "this". La parola chiave this fa riferimento all'oggetto in cui abbiamo scritto il codice — perciò in questo caso this è equivalente a person. Quindi perché non scrivere invece semplicemente person? Come vedrai nell'articolo Object-oriented JavaScript per principianti quando incominceremo a creare costruttori ecc., this è molto utile — perché garantisce sempre che venga trovato il valore corretto quando il contesto cambia (es. due diverse istanze dell'oggetto person possono avere nomi diversi, ma vogliamo accedere al nome corretto quando vogliamo fargli gli auguri).

+ +

Proviamo ad illustrare ciò che intendiamo con un paio di oggetti person semplificati:

+ +
var person1 = {
+  name: 'Chris',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+
+var person2 = {
+  name: 'Brian',
+  greeting: function() {
+    alert('Hi! I\'m ' + this.name + '.');
+  }
+}
+ +

In questo caso, person1.greeting() visualizza "Hi! I'm Chris."; e person2.greeting() "Hi! I'm Brian.", anche se il codice del metodo è esattamente identico. Come abbiamo detto prima, this fa riferimento al valore interno all'oggetto — questo non è molto importante per gli oggetti letterali scritti a mano, ma lo diventa quando gli oggetti vengono generati dinamicamente (per esempio usando i costruttori). Diventerà più chiaro in seguito.

+ +

Finora hai usato oggetti tutto il tempo

+ +

Avendo provato questi esempi, probabilmente hai pensato che la notazione a punto fin qui usata è molto familiare. Questo perché l'hai già usata durante il corso! Tutte le volte che abbiamo lavorato con un esempio che usa le API built-in del browser o oggetti JavaScript, abbiamo usato oggetti, perché quelle funzionalità sono state costruite usando lo stesso tipo di strutture di oggetti che stiamo vedendo qui, anche se molto più complesse dei nostri semplici esempi.

+ +

Quindi quando ha usato un metodo di stringa come:

+ +
myString.split(',');
+ +

Non hai fatto altro che usare un metodo disponibile in una istanza della classe String. Ogni volta che crei una stringa nel tuo codice, viene automaticamente creata una istanza di String, che ha ha disposizione alcuni metodi/proprietà comuni.

+ +

Quando hai acceduto al modello di oggetto documento usando righe come queste:

+ +
var myDiv = document.createElement('div');
+var myVideo = document.querySelector('video');
+ +

Tu hai usato i metodi disponibili in una istanza della classe Document. Per ogni pagina web caricara viene crata una istanza di Document chiamata document, che rappresenta l'intera struttura della pagina, il contenuto e le altre funzionalità come il suo URL. Nuovamente questo significa che ci sono diversi metodi/proprietà comuni disponibili.

+ +

Questo è vero anche per molti degli altri oggetti/API built-in che hai usato — Array, Math, ecc.

+ +

Nota che gli Oggetti/API built-in non sempre creano le istanze di oggetto automaticamente. Ad esempio, le Notifications API — che consentono ai browsers moderni di attivare notifiche di sistema — richiedono che venga instanziato una nuova istanza utilizzando il costruttore per ogni notifica che vuoi avviare. Prova scrivendo questo nella tua console JavaScript:

+ +
var myNotification = new Notification('Hello!');
+ +

Spiegheremo i costruttori in un prossimo articolo.

+ +
+

Nota: È utile pensare al modo in cui gli oggetti comunicano come ad un passaggio di messaggi — quando un oggetto ha bisogno che un altro oggetto faccia qualcosa, spesso manda un messaggio all'altro oggetto usando uno dei suoi metodi, ed aspetta la risposta sottoforma di valore restituito.

+
+ +

Sommario

+ +

Congratulazioni, hai raggiunto la fine del nostro primo artocolo sugli oggetti JS — ora dovresti avere una buona idesa di come lavorare con gli oggetti in JavaScript — compresa la creazione di tuoi semplici oggetti. Dovresti anche apprezzare che gli oggetti sono molto utili come strutture per memorizzare dati e funzionalità correlati — se hai provato a tenere traccia delle proprietà e dei metodi del nostro oggetto person in forma di variabili e funzioni separate, dovrebbe essere stato inefficente e frustrante, ed hai corso il rischio di confondere i dati con altre variabli con lo stesso  nome. Gli oggetti ci permettono di tenere le informazioni confinate in modo sicuro nel proprio pacchetto senza rischio.

+ +

Nel prossimo articolo incominceremo ad introdurre la teoria della programmazione object-oriented (OOP), ed in che modo queste tecniche possono essere usate in JavaScript.

+ +

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

diff --git a/files/it/learn/javascript/objects/index.html b/files/it/learn/javascript/objects/index.html new file mode 100644 index 0000000000..5fa859db74 --- /dev/null +++ b/files/it/learn/javascript/objects/index.html @@ -0,0 +1,51 @@ +--- +title: Introduzione agli oggetti in JavaScript +slug: Learn/JavaScript/Oggetti +tags: + - Articolo + - Guida + - JavaScript + - Oggetti + - Principiante + - Tutorial + - Verifica + - imparare +translation_of: Learn/JavaScript/Objects +--- +
{{LearnSidebar}}
+ +

In JavaScript molte cose sono oggetti, a partire da caratteristiche base di JavaScript come stringhe ed array, fino alle API del browser costruite in JavaScript. Potete anche creare i vostri oggetti, incapsulando funzioni e variabili tra loro correlate in pacchetti funzionalmente efficienti e che funzionano da comodi contenitori di dati. Se volete progredire nella vostra conoscenza di JavaScript, è importante comprendere la sua natura object-oriented (orientata agli oggetti), perciò abbiamo approntato questo modulo per aiutarvi. Qui parleremo in dettaglio della teoria e della sintassi degli oggetti; successivamente vedremo come creare i vostri oggetti personalizzati.

+ +

Prerequisiti

+ +

Prima di iniziare questo modulo, dovreste avere una qualche familiarità con HTML e CSS. Vi consigliamo di seguire i moduli Introduzione a HTML e Introduzione a CSS prima di cimentarvi con JavaScript.

+ +

Dovreste anche avere qualche familiarità con i fondamenti di JavaScript prima di affrontare in dettaglio gli oggetti in JavaScript. Prima di procedere con questo modulo vi consigliamo di seguire i moduli Primi passi con JavaScript e JavaScript building blocks.

+ +
+

Nota: Se state lavorando su un computer, tablet o altro dispositivo sul quale non fosse possibile creare i vostri file, potete sperimentare buona parte del codice di esempio in un programma di scrittura codice online, come ad esempio JSBin o Thimble.

+
+ +

Guide

+ +
+
Fondamenti sugli oggetti
+
Nel primo articolo riguardante gli oggetti JavaScript vedremo la sintassi fondamentale degli oggetti, e rivisiteremo alcune caratteristiche di JavaScript che abbiamo già introdotto durante il corso, verificando che molte delle caratteristche con cui avete già avuto a che fare sono di fatto oggetti.
+
Object-oriented JavaScript per principianti
+
Una volta acquisite le basi ci focalizzeremo sul JavaScript orientato agli oggetti (object-oriented JavaScript, OOJS) — questo articolo illustra i fondamenti della programmazione orientata agli oggetti (object-oriented programming, OOP), per poi esplorare come JavaScript emuli le classi di oggetti tramite le funzioni costruttore, e come creare istanze di un oggetto .
+
Prototipi di oggetto (object prototypes)
+
I prototipi sono il meccanismo tramite il quale gli oggetti JavaScript ereditano caratteristiche tra di loro, e funzionano diversamente dai meccanismi di ereditarietà presenti nei classici linguaggi orientati agli oggetti. In questo articolo esploreremo questa differenza, spiegheremo come funzionano le catene di prototipi, e vedremo come la proprietà di prototipo può essere usata per aggiungere metodi a costruttori esistenti..
+
Ereditarietà in JavaScript
+
Dopo aver spiegato buona parte delle frattaglie dell'OOJS, questo articolo mostra come creare classi di oggetti "figli" che ereditano caratteristiche dalle loro classi "antenate". Presentiamo inoltre alcuni consigli circa quando e dove potreste usare OOJS.
+
Lavorare con i dati JSON
+
JavaScript Object Notation (JSON) è un formato standard per rappresentare dati strutturati come oggetti JavaScript. Esso è comunemente usato per rappresentare e trasmettere dati sui siti web (ad esempio inviare alcuni dati dal server al client, cosicché venga visualizzato in una pagina web). Poiché lo incontrerete piuttosto spesso, in quest'articolo vi daremo tutto ciò di cui avete bisogno per lavorare con JSON usando JavaScript, incluso come accedere agli elementi di dati in un oggetto JSON e come scrivere il vostro JSON.
+
Pratica della costruzione di oggetti
+
Negli articoli precedenti abbiamo descritto la teoria essenziale degli oggetti JavaScript e i dettagli sulla sintassi, dandovi una base solida da cui Partire. In questo articolo ci cimenteremo in un esercizio pratico, in cui costruirete oggetti JavaScript personalizzati che producono qualcosa di divertente e colorato — alcune palline colorate rimbalzanti.
+
+ +

Verifiche

+ +
+
Aggiungere caratteristiche alla demo "bouncing balls"
+
In questa verifiche userete la demo delle palline rimbalzanti come punto di partenza, aggiungendole alcune nuove ed interessanti caratteristiche.
+
diff --git a/files/it/learn/javascript/objects/json/index.html b/files/it/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..71cf166e15 --- /dev/null +++ b/files/it/learn/javascript/objects/json/index.html @@ -0,0 +1,345 @@ +--- +title: Lavorare con JSON +slug: Learn/JavaScript/Oggetti/JSON +translation_of: Learn/JavaScript/Objects/JSON +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
+ +

JavaScript Object Notation (JSON) è un formato testuale standard, usato per rappresentare dati strutturati basati sulla sintassi degli oggetti in JavaScript. E' usato comunemente per la trasmissione dati nelle applicazioni web (ad es. inviare dati dal server al client in modo da visualizzarli in una pagina web o viceversa). Ti imbatterai abbastanza spesso in questo formato, così in questo articolo ti forniremo tutto ciò che ti occorre per lavorare con JSON usando JavaScript, incluso la lettura (parsing) del JSON in modo da accedere ai dati in esso contenuti, così come a generare JSON.

+ + + + + + + + + + + + +
Prerequisiti:Conoscenza informatica di base, comprensione base di HTML e CSS, familiarità con i concetti base di JavaScript (vedi Primi passi e Costruzione blocchi) e con i concetti base degli oggetti JS (vedi Introduzione agli oggetti).
Obiettivi:Comprendere il funzionamento dei dati megorizzati in JSON e creare i tuoi oggetti JSON.
+ +

No, davvero, cos'è JSON?

+ +

{{glossary("JSON")}} è un formato dati testuale che segue la sintassi degli oggetti JavaScript, reso popolare da Douglas Crockford. Anche se richiama da vicino la sintassi letterale degli oggetti JavaScript, può essere usato indipendentemente da JavaScript, e molti ambienti di programmazione supportano la lettura (parsing) e la generazione di JSON.

+ +

JSON esiste sotto forma di una stringa — utile quando vuoi trasmettere dati in una rete. Deve essere poi convertito in un oggetto javaScript nativo quando vuoi accedere ai dati che rappresenta. La conversione tra i due è piuttosto banale —  grazie ai metodi dell'oggetto globale JSON di JavaScript.

+ +
+

Nota: Convertire una stringa in un oggetto nativo è chiamata deserializzazione, mentre convertire un oggetto nativo in una stringa in modo da poterlo trasmettere in rete, è chiamata serializzazione.

+
+ +

Un oggetto JSON object può essere memorizzato in un file dedicato, essenzialmente un file di testo con estensione .json, e un {{glossary("tipo MIME")}} application/json.

+ +

Struutura di un JSON 

+ +

Come descritto sopra, un JSON non è altro che una stringa il cui formato è molto simile al formato letterale di un oggetto JavaScript. E' possibile includere in JSON gli stessi tipi di dato base possibili in un oggetto standard di JavaScript — stringhe, numeri, arrays, booleani e altri oggetti letterali. Questo ti consente di costruire una gerarchia dei dati, ad esempio:

+ +
{
+  "squadName": "Super hero squad",
+  "homeTown": "Metro City",
+  "formed": 2016,
+  "secretBase": "Super tower",
+  "active": true,
+  "members": [
+    {
+      "name": "Molecule Man",
+      "age": 29,
+      "secretIdentity": "Dan Jukes",
+      "powers": [
+        "Radiation resistance",
+        "Turning tiny",
+        "Radiation blast"
+      ]
+    },
+    {
+      "name": "Madame Uppercut",
+      "age": 39,
+      "secretIdentity": "Jane Wilson",
+      "powers": [
+        "Million tonne punch",
+        "Damage resistance",
+        "Superhuman reflexes"
+      ]
+    },
+    {
+      "name": "Eternal Flame",
+      "age": 1000000,
+      "secretIdentity": "Unknown",
+      "powers": [
+        "Immortality",
+        "Heat Immunity",
+        "Inferno",
+        "Teleportation",
+        "Interdimensional travel"
+      ]
+    }
+  ]
+}
+ +

Se carichiamo questo oggetto in un programma, processato in una variabile chiamata superHeroes per esempio, potremmo accedere ai dati che contiene usando la medesima notazione punto/parentesi vista nell'articolo Fondamentali degli oggetti JavaScript. Per esempio:

+ +
superHeroes.homeTown
+superHeroes['active']
+ +

Per accedere ai dati gerarchicamente inferiori, occorre semplicemente concatenare i nome delle proprietà e gli indici degli array.  Ad esempio, per accedere al terzo superpotere del secondo eroe nella lista dei membri, procedi come segue:

+ +
superHeroes['members'][1]['powers'][2]
+ +
    +
  1. Per primo abbiamo il nome della variabile — superHeroes.
    2. +
  2. All'interno della variabile vogliamo accedere alla proprietà members, così utilizziamo ["members"].
    3. +
  3. members contiene un array popolato da oggetti. Noi vogliamo accedere al secondo oggetto dell'array, quindi usiamo [1].
    4. +
  4. all'interno dell'oggetto così trovato, vogliamo poi accedere alla proprietà powers e per ciò usiamo ["powers"].
    5. +
  5. La proprietà powers contiene a sua volta un array in cui sono elencate i superpoteri dell'eroe selezionato. Noi vogliamo la terza in lista, usiamo quindi [2].
    6. +
+ +
+

Note: Abbiamo reso disponibile il JSON visto sopra, in una variabile del nostro esempio JSONTest.html (vedi il codice sorgente). Prova a caricarlo e poi accedi alla variabile dalla console JavaScript del tuo browser.

+
+ +

Arrays as JSON

+ +

Above we mentioned that JSON text basically looks like a JavaScript object, and this is mostly right. The reason we said "mostly right" is that an array is also valid JSON, for example:

+ +
[
+  {
+    "name": "Molecule Man",
+    "age": 29,
+    "secretIdentity": "Dan Jukes",
+    "powers": [
+      "Radiation resistance",
+      "Turning tiny",
+      "Radiation blast"
+    ]
+  },
+  {
+    "name": "Madame Uppercut",
+    "age": 39,
+    "secretIdentity": "Jane Wilson",
+    "powers": [
+      "Million tonne punch",
+      "Damage resistance",
+      "Superhuman reflexes"
+    ]
+  }
+]
+ +

The above is perfectly valid JSON. You'd just have to access array items (in its parsed version) by starting with an array index, for example [0]["powers"][0].

+ +

Other notes

+ + + +

Active learning: Working through a JSON example

+ +

So, let's work through an example to show how we could make use of some JSON data on a website.

+ +

Getting started

+ +

To begin with, make local copies of our heroes.html and style.css files. The latter contains some simple CSS to style our page, while the former contains some very simple body HTML:

+ +
<header>
+</header>
+
+<section>
+</section>
+ +

Plus a {{HTMLElement("script")}} element to contain the JavaScript code we will be writing in this exercise. At the moment it only contains two lines, which grab references to the {{HTMLElement("header")}} and {{HTMLElement("section")}} elements and store them in variables:

+ +
const header = document.querySelector('header');
+const section = document.querySelector('section');
+ +

We have made our JSON data available on our GitHub, at https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

+ +

We are going to load it into our page, and use some nifty DOM manipulation to display it, like this:

+ +

+ +

Obtaining the JSON

+ +

To obtain the JSON, we use an API called {{domxref("XMLHttpRequest")}} (often called XHR). This is a very useful JavaScript object that allows us to make network requests to retrieve resources from a server via JavaScript (e.g. images, text, JSON, even HTML snippets), meaning that we can update small sections of content without having to reload the entire page. This has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail.

+ +
    +
  1. To start with, we store the URL of the JSON we want to retrieve in a variable. Add the following at the bottom of your JavaScript code: + 
    let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    +
    2. +
  2. To create a request, we need to create a new request object instance from the XMLHttpRequest constructor, using the new keyword. Add the following below your last line: + 
    let request = new XMLHttpRequest();
    +
    3. +
  3. Now we need to open the request using the open() method. Add the following line: + 
    request.open('GET', requestURL);
    + +

    This takes at least two parameters — there are other optional parameters available. We only need the two mandatory ones for this simple example:

    + +
      +
    • The HTTP method to use when making the network request. In this case GET is fine, as we are just retrieving some simple data.
      • +
    • The URL to make the request to — this is the URL of the JSON file that we stored earlier.
      • +
    +
    4. +
  4. Next, add the following two lines — here we are setting the responseType to JSON, so that XHR knows that the server will be returning JSON, and that this should be converted behind the scenes into a JavaScript object. Then we send the request with the send() method: + 
    request.responseType = 'json';
+request.send();
    +
    5. +
  5. The last bit of this section involves waiting for the response to return from the server, then dealing with it. Add the following code below your previous code: + 
    request.onload = function() {
+  const superHeroes = request.response;
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
    +
    6. +
+ +

Here we are storing the response to our request (available in the response property) in a variable called superHeroes; this variable now contains the JavaScript object based on the JSON! We are then passing that object to two function calls — the first one fills the <header> with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the <section>.

+ +

We have wrapped the code in an event handler that runs when the load event fires on the request object (see onload) — this is because the load event fires when the response has successfully returned; doing it this way guarantees that request.response will definitely be available when we come to try to do something with it.

+ +

Populating the header

+ +

Now that we've retrieved the JSON data and converted it into a JavaScript object, let's make use of it by writing the two functions we referenced above. First of all, add the following function definition below the previous code:

+ +
function populateHeader(jsonObj) {
+  const myH1 = document.createElement('h1');
+  myH1.textContent = jsonObj['squadName'];
+  header.appendChild(myH1);
+
+  const myPara = document.createElement('p');
+  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
+  header.appendChild(myPara);
+}
+ +

We named the parameter jsonObj, to remind ourselves that this JavaScript object originated from JSON. Here we first create an {{HTMLElement("h1")}} element with createElement(), set its textContent to equal the squadName property of the object, then append it to the header using appendChild(). We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the homeTown and formed properties of the object.

+ +

Creating the hero information cards

+ +

Next, add the following function at the bottom of the code, which creates and displays the superhero cards:

+ +
function showHeroes(jsonObj) {
+  const heroes = jsonObj['members'];
+
+  for (let i = 0; i < heroes.length; i++) {
+    const myArticle = document.createElement('article');
+    const myH2 = document.createElement('h2');
+    const myPara1 = document.createElement('p');
+    const myPara2 = document.createElement('p');
+    const myPara3 = document.createElement('p');
+    const myList = document.createElement('ul');
+
+    myH2.textContent = heroes[i].name;
+    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
+    myPara2.textContent = 'Age: ' + heroes[i].age;
+    myPara3.textContent = 'Superpowers:';
+
+    const superPowers = heroes[i].powers;
+    for (let j = 0; j < superPowers.length; j++) {
+      const listItem = document.createElement('li');
+      listItem.textContent = superPowers[j];
+      myList.appendChild(listItem);
+    }
+
+    myArticle.appendChild(myH2);
+    myArticle.appendChild(myPara1);
+    myArticle.appendChild(myPara2);
+    myArticle.appendChild(myPara3);
+    myArticle.appendChild(myList);
+
+    section.appendChild(myArticle);
+  }
+}
+ +

To start with, we store the members property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.

+ +

Next, we use a for loop to loop through each object in the array. For each one, we:

+ +
    +
  1. Create several new elements: an <article>, an <h2>, three <p>s, and a <ul>.
    2. +
  2. Set the <h2> to contain the current hero's name.
    3. +
  3. Fill the three paragraphs with their secretIdentity, age, and a line saying "Superpowers:" to introduce the information in the list.
    4. +
  4. Store the powers property in another new constant called superPowers — this contains an array that lists the current hero's superpowers.
    5. +
  5. Use another for loop to loop through the current hero's superpowers — for each one we create an <li> element, put the superpower inside it, then put the listItem inside the <ul> element (myList) using appendChild().
    6. +
  6. The very last thing we do is to append the <h2>, <p>s, and <ul> inside the <article> (myArticle), then append the <article> inside the <section>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.
    7. +
+ +
+

Note: If you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.)

+
+ +
+

Note: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our JavaScript object basics article for more information on dot and bracket notation.

+
+ +

Converting between objects and text

+ +

The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:

+ +
request.responseType = 'json';
+ +

But sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in JSON object is available in browsers, which contains the following two methods:

+ + + +

You can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used parse() to convert it to an actual JavaScript object. The key snippet of code is here:

+ +
request.open('GET', requestURL);
+request.responseType = 'text'; // now we're getting a string!
+request.send();
+
+request.onload = function() {
+  const superHeroesText = request.response; // get the string from the response
+  const superHeroes = JSON.parse(superHeroesText); // convert it to an object
+  populateHeader(superHeroes);
+  showHeroes(superHeroes);
+}
+ +

As you might guess, stringify() works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:

+ +
let myJSON = { "name": "Chris", "age": "38" };
+myJSON
+let myString = JSON.stringify(myJSON);
+myString
+ +

Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using stringify() — saving the return value in a new variable — then checking it again.

+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: JSON.

+ +

Summary

+ +

In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

+ +

In this module

+ + diff --git a/files/it/learn/javascript/oggetti/basics/index.html b/files/it/learn/javascript/oggetti/basics/index.html deleted file mode 100644 index 539df5c2e0..0000000000 --- a/files/it/learn/javascript/oggetti/basics/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: Basi degli oggetti JavaScript -slug: Learn/JavaScript/Oggetti/Basics -translation_of: Learn/JavaScript/Objects/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}
- -

Nel primo articolo sugli oggetti JavaScript, vedremo la sintassi fondamentale degli oggetti JavaScript, e rivedremo alcune funzionalità di JavaScript che abbiamo già esamintato in precedenza in questo corso, rimarcando il fatto che molte delle funzionalità che abbiamo già incontrato son di fatto oggetti.

- - - - - - - - - - - - -
Prerequisiti:Conoscenza basilare dei computers, comprensione di base di HTML e CSS, familiarità con le basi di JavaScript (vedi Primi passi e Costruire blocchi).
Obiettivo:Capire le basi della teoria che stà dietro alla programmazione object-oriented, come questa si relazione con JavaScript ("la maggior parte delle cose sono oggetti"), e come incominciare a lavorare con gli oggetti JavaScript.
- -

Basi degli oggetti

- -

Un oggetto è una collezione di dati e/o funzionalità correlati (che di solito consiste in alcune variabili e funzioni — che sono chiamate proprietà e metodi quando fanno parte di oggetti.) Proviamo con un esempio per vedere come si comportano.

- -

Per incomiciare, facciamo una copia locale del nostro file oojs.html. Questo contiene un piccolissimo — elemento {{HTMLElement("script")}} che possiamo usare per scrivere il nostro sorgente, un elemento {{HTMLElement("input")}} per insrire istruzioni di esempio quando la pagina viene visualizzata, alcune definizioni di variabili, ed una funzione che invia ciò che si inserisce in input in un elemento {{HTMLElement("p")}}. Useremo questo come base per esplorare i concetti fondamentali della sintassi degli oggetti.

- -

Come molte cose in JavaScript, creare un oggetto spesso inizia definendo ed inizializzando una variabile. Prova ad inserire ciò che segue sotto al codice JavaScript già presente nel file, quindi salva e ricarica:

- -
var person = {};
- -

Se scrivi person nella casella di testo e premi il pulsante, dovresti ottenere il seguente risulatato:

- -
[object Object]
- -

Congratulazioni, hai appena creato il tuo primo oggetto. Ben fatto! Ma questo è un oggetto vuoto, perciò non ci possiamo fare molto. Aggiorniamo il nostro oggetto in questo modo:

- -
var person = {
-  name: ['Bob', 'Smith'],
-  age: 32,
-  gender: 'male',
-  interests: ['music', 'skiing'],
-  bio: function() {
-    alert(this.name[0] + ' ' + this.name[1] + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
-  },
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name[0] + '.');
-  }
-};
-
- -

Dopo aver salvato e ricaricato la pagina, prova ad inserire alcuni di questi nella casella di input:

- -
person.name[0]
-person.age
-person.interests[1]
-person.bio()
-person.greeting()
- -

Ora hai ottenuto alcuni dati e funzionalità nel tuo oggetto, ed ora puoi accedere ad essi con alcune sintassi semplici e graziose!

- -
-

Nota: Se hai problemi ad ottenere questo risultato, prova comparare quello che hai scritto con la nostra versione — vedi oojs-finished.html (e anche la versione funzionante). Un errore comune quando si inizia con gli oggetti è quello di mettere una virgola dopo l'ultimo elenemto — questo genera un errore.

-
- -

Quindi che cosa è successo qui? Bene, un oggetto è composto da svariati membri, ogniuno dei quali ha un nome (es. name e age sopra), ed un valore (es, ['Bob', 'Smith'] e 32). Ogni coppia nome/valore deve essere separata da una virgola, ed ogni nome e valore devono essere separati dai due punti. La sintassi segue sempre questo schema:

- -
var objectName = {
-  member1Name: member1Value,
-  member2Name: member2Value,
-  member3Name: member3Value
-}
- -

Il valore di un membro di un oggetto può essere qualsiasi cosa — nel nostro oggetto persona abbiamo una strigna, un numero, due array e due funzioni. I primi quatto elementi sono dati e ad essi ci si riferisce come le proprietà (properties) del oggetto. Gli ultimi due elementi sono funzioni che consentono all'oggetto di fare qualcosa con i dati, e ad esse ci si riferisce come i metodi (methods) dell'oggetto.

- -

Un oggetto come questo viene considerato un oggetto letterale — noi abbiamo scritto letteralmente il conenuto dell'oggetto nel momento che lo abbiamo creato. Questo è in contrasto con l'istanziazione di oggetti da classi, che vedremo un po' più avanti.

- -

È molto comune creare oggetti letterali quando si desidera trasferire una serie di dati relazionati e strutturati in qualche maniera, ad esempio per inviare richieste al server per inserire i dati nel database. Inviare un singolo oggetto è molto più efficiente che inviare i dati individualmente, ed è più facile lavorarci rispetto agli array, perché i dati vengono identificati per nome.

- -

Notazione puntata

- -

Sopra, abbiamo acceduto alle proprietà ed ai metodi degli oggetti utilizzando la notazione puntata. Il nome dell'oggetto (person) serve da namespace — e deve essere insirito prima per accedere a qualsiasi cosa incapsulata nell'oggetto. Quindi si scrive il punto seguito dell'elemento a cui si vuole accedere — 
- questo può essere il nome di una proprietà semplice, un elemento di una proprietà di tipo array, o una chiamata ad uno dei metodi dell oggetto, ad esempio:

- -
person.age
-person.interests[1]
-person.bio()
- -

Namespaces nidificati

- -

È anche possibile assegnare un altro oggetto ad un membro di un oggetto. Ad esempio prova a cambiare la property name da

- -
name: ['Bob', 'Smith'],
- -

a

- -
name : {
-  first: 'Bob',
-  last: 'Smith'
-},
- -

In questo modo abbiamo effettivamente creato un  sotto-namespace. Può sembrare complesso, ma non lo è veramente — per accedere a questi devi solo concatenare un ulteriore passo alla fine con un altro punto. Prova questi:

- -
person.name.first
-person.name.last
- -

Importante: A questo punto devi anche cambiare il codice dei tuoi metodi e cambiare ogni istanza di

- -
name[0]
-name[1]
- -

con

- -
name.first
-name.last
- -

Altrimenti i tuoi metodi non funzioneranno più.

- -

Notazione con parentesi quadre

- -

C'è un altro modo per accedere alle proprietà degli oggetti — usando la notazione delle parentesi quadre. Invece di usare questi:

- -
person.age
-person.name.first
- -

Puoi usare

- -
person['age']
-person['name']['first']
- -

Questo assomiglia molto al modo in cui accedi agli elementi di un array, ed è sostanzialmente la stessa cosa — invece di usare un indice numerico per scegliere un elemento, stai usando il nome associato ad ogni valore membro. Non c'è da meravigliarsi che gli oggetti a volte vengono chiamati array associativi — essi infatti associano le stringhe ai valori nello stesso modo in cui gli arrays associano i numeri ai valori.

- -

Assegnare i membri degli oggetti

- -

Fino a qui abbiamo solo recuperato (get) valori dei menbri degli oggetti — si possono anche assegnare (set) i valori ai menbri degli oggetti semplicemente dichiarando i membri che si desidera assegnare (usando la notazione puntata o con quadre), cone ad esempio:

- -
person.age = 45;
-person['name']['last'] = 'Cratchit';
- -

Prova ad inserire queste linee e poi rileggi i dati nuovamente per vedere che cosa è cambiato:

- -
person.age
-person['name']['last']
- -

Setting members doesn't just stop at updating the values of existing properties and methods; you can also create completely new members. Try these:

- -
person['eyes'] = 'hazel';
-person.farewell = function() { alert("Bye everybody!"); }
- -

Ora possiamo provare i nostri nuovi membri:

- -
person['eyes']
-person.farewell()
- -

Un utile aspetto della notazione con parentesi quadre è che non solo può essere usata per assegnare valori dinamicamente, ma anche per assegnare i nomi dei mebri. Ad esempio se desideriamo che gli utenti siano in grado di assegnare tipi di dato personalizzati scrivendo il nome della proprietà ed il suo valore in due campi di input, possiamo oggenere questi valori in questo modo:

- -
var myDataName = nameInput.value;
-var myDataValue = nameValue.value;
- -

e possiamo aggiungere questi nomi e valori nel nostro oggetto person in questo modo:

- -
person[myDataName] = myDataValue;
- -

Puoi testare questo aggiungendo le linee seguenti nel tuo codice appena prima della parentesi graffa chiusa nel oggetto person:

- -
var myDataName = 'height';
-var myDataValue = '1.75m';
-person[myDataName] = myDataValue;
- -

Ora prova s salvare e ricaricare la pagina ed inserisci ciò che segue nella casella di testo:

- -
person.height
- -

Non è possibile aggiungere proprità ad oggetti con il metodo descritto usando la notazione puntata, che accetta solo nomi aggiunti in modo letterale e non valori di variabili puntate da un nome.

- -

Che cos'è "this"?

- -

Forse ti sei accorto di qualcosa di leggermente strano nei nostri metodi. Guarda questo per esempio:

- -
greeting: function() {
-  alert('Hi! I\'m ' + this.name.first + '.');
-}
- -

Forse ti sei chiesto che cos'è "this". La parola chiave this fa riferimento all'oggetto in cui abbiamo scritto il codice — perciò in questo caso this è equivalente a person. Quindi perché non scrivere invece semplicemente person? Come vedrai nell'articolo Object-oriented JavaScript per principianti quando incominceremo a creare costruttori ecc., this è molto utile — perché garantisce sempre che venga trovato il valore corretto quando il contesto cambia (es. due diverse istanze dell'oggetto person possono avere nomi diversi, ma vogliamo accedere al nome corretto quando vogliamo fargli gli auguri).

- -

Proviamo ad illustrare ciò che intendiamo con un paio di oggetti person semplificati:

- -
var person1 = {
-  name: 'Chris',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
-
-var person2 = {
-  name: 'Brian',
-  greeting: function() {
-    alert('Hi! I\'m ' + this.name + '.');
-  }
-}
- -

In questo caso, person1.greeting() visualizza "Hi! I'm Chris."; e person2.greeting() "Hi! I'm Brian.", anche se il codice del metodo è esattamente identico. Come abbiamo detto prima, this fa riferimento al valore interno all'oggetto — questo non è molto importante per gli oggetti letterali scritti a mano, ma lo diventa quando gli oggetti vengono generati dinamicamente (per esempio usando i costruttori). Diventerà più chiaro in seguito.

- -

Finora hai usato oggetti tutto il tempo

- -

Avendo provato questi esempi, probabilmente hai pensato che la notazione a punto fin qui usata è molto familiare. Questo perché l'hai già usata durante il corso! Tutte le volte che abbiamo lavorato con un esempio che usa le API built-in del browser o oggetti JavaScript, abbiamo usato oggetti, perché quelle funzionalità sono state costruite usando lo stesso tipo di strutture di oggetti che stiamo vedendo qui, anche se molto più complesse dei nostri semplici esempi.

- -

Quindi quando ha usato un metodo di stringa come:

- -
myString.split(',');
- -

Non hai fatto altro che usare un metodo disponibile in una istanza della classe String. Ogni volta che crei una stringa nel tuo codice, viene automaticamente creata una istanza di String, che ha ha disposizione alcuni metodi/proprietà comuni.

- -

Quando hai acceduto al modello di oggetto documento usando righe come queste:

- -
var myDiv = document.createElement('div');
-var myVideo = document.querySelector('video');
- -

Tu hai usato i metodi disponibili in una istanza della classe Document. Per ogni pagina web caricara viene crata una istanza di Document chiamata document, che rappresenta l'intera struttura della pagina, il contenuto e le altre funzionalità come il suo URL. Nuovamente questo significa che ci sono diversi metodi/proprietà comuni disponibili.

- -

Questo è vero anche per molti degli altri oggetti/API built-in che hai usato — Array, Math, ecc.

- -

Nota che gli Oggetti/API built-in non sempre creano le istanze di oggetto automaticamente. Ad esempio, le Notifications API — che consentono ai browsers moderni di attivare notifiche di sistema — richiedono che venga instanziato una nuova istanza utilizzando il costruttore per ogni notifica che vuoi avviare. Prova scrivendo questo nella tua console JavaScript:

- -
var myNotification = new Notification('Hello!');
- -

Spiegheremo i costruttori in un prossimo articolo.

- -
-

Nota: È utile pensare al modo in cui gli oggetti comunicano come ad un passaggio di messaggi — quando un oggetto ha bisogno che un altro oggetto faccia qualcosa, spesso manda un messaggio all'altro oggetto usando uno dei suoi metodi, ed aspetta la risposta sottoforma di valore restituito.

-
- -

Sommario

- -

Congratulazioni, hai raggiunto la fine del nostro primo artocolo sugli oggetti JS — ora dovresti avere una buona idesa di come lavorare con gli oggetti in JavaScript — compresa la creazione di tuoi semplici oggetti. Dovresti anche apprezzare che gli oggetti sono molto utili come strutture per memorizzare dati e funzionalità correlati — se hai provato a tenere traccia delle proprietà e dei metodi del nostro oggetto person in forma di variabili e funzioni separate, dovrebbe essere stato inefficente e frustrante, ed hai corso il rischio di confondere i dati con altre variabli con lo stesso  nome. Gli oggetti ci permettono di tenere le informazioni confinate in modo sicuro nel proprio pacchetto senza rischio.

- -

Nel prossimo articolo incominceremo ad introdurre la teoria della programmazione object-oriented (OOP), ed in che modo queste tecniche possono essere usate in JavaScript.

- -

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

diff --git a/files/it/learn/javascript/oggetti/index.html b/files/it/learn/javascript/oggetti/index.html deleted file mode 100644 index 5fa859db74..0000000000 --- a/files/it/learn/javascript/oggetti/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Introduzione agli oggetti in JavaScript -slug: Learn/JavaScript/Oggetti -tags: - - Articolo - - Guida - - JavaScript - - Oggetti - - Principiante - - Tutorial - - Verifica - - imparare -translation_of: Learn/JavaScript/Objects ---- -
{{LearnSidebar}}
- -

In JavaScript molte cose sono oggetti, a partire da caratteristiche base di JavaScript come stringhe ed array, fino alle API del browser costruite in JavaScript. Potete anche creare i vostri oggetti, incapsulando funzioni e variabili tra loro correlate in pacchetti funzionalmente efficienti e che funzionano da comodi contenitori di dati. Se volete progredire nella vostra conoscenza di JavaScript, è importante comprendere la sua natura object-oriented (orientata agli oggetti), perciò abbiamo approntato questo modulo per aiutarvi. Qui parleremo in dettaglio della teoria e della sintassi degli oggetti; successivamente vedremo come creare i vostri oggetti personalizzati.

- -

Prerequisiti

- -

Prima di iniziare questo modulo, dovreste avere una qualche familiarità con HTML e CSS. Vi consigliamo di seguire i moduli Introduzione a HTML e Introduzione a CSS prima di cimentarvi con JavaScript.

- -

Dovreste anche avere qualche familiarità con i fondamenti di JavaScript prima di affrontare in dettaglio gli oggetti in JavaScript. Prima di procedere con questo modulo vi consigliamo di seguire i moduli Primi passi con JavaScript e JavaScript building blocks.

- -
-

Nota: Se state lavorando su un computer, tablet o altro dispositivo sul quale non fosse possibile creare i vostri file, potete sperimentare buona parte del codice di esempio in un programma di scrittura codice online, come ad esempio JSBin o Thimble.

-
- -

Guide

- -
-
Fondamenti sugli oggetti
-
Nel primo articolo riguardante gli oggetti JavaScript vedremo la sintassi fondamentale degli oggetti, e rivisiteremo alcune caratteristiche di JavaScript che abbiamo già introdotto durante il corso, verificando che molte delle caratteristche con cui avete già avuto a che fare sono di fatto oggetti.
-
Object-oriented JavaScript per principianti
-
Una volta acquisite le basi ci focalizzeremo sul JavaScript orientato agli oggetti (object-oriented JavaScript, OOJS) — questo articolo illustra i fondamenti della programmazione orientata agli oggetti (object-oriented programming, OOP), per poi esplorare come JavaScript emuli le classi di oggetti tramite le funzioni costruttore, e come creare istanze di un oggetto .
-
Prototipi di oggetto (object prototypes)
-
I prototipi sono il meccanismo tramite il quale gli oggetti JavaScript ereditano caratteristiche tra di loro, e funzionano diversamente dai meccanismi di ereditarietà presenti nei classici linguaggi orientati agli oggetti. In questo articolo esploreremo questa differenza, spiegheremo come funzionano le catene di prototipi, e vedremo come la proprietà di prototipo può essere usata per aggiungere metodi a costruttori esistenti..
-
Ereditarietà in JavaScript
-
Dopo aver spiegato buona parte delle frattaglie dell'OOJS, questo articolo mostra come creare classi di oggetti "figli" che ereditano caratteristiche dalle loro classi "antenate". Presentiamo inoltre alcuni consigli circa quando e dove potreste usare OOJS.
-
Lavorare con i dati JSON
-
JavaScript Object Notation (JSON) è un formato standard per rappresentare dati strutturati come oggetti JavaScript. Esso è comunemente usato per rappresentare e trasmettere dati sui siti web (ad esempio inviare alcuni dati dal server al client, cosicché venga visualizzato in una pagina web). Poiché lo incontrerete piuttosto spesso, in quest'articolo vi daremo tutto ciò di cui avete bisogno per lavorare con JSON usando JavaScript, incluso come accedere agli elementi di dati in un oggetto JSON e come scrivere il vostro JSON.
-
Pratica della costruzione di oggetti
-
Negli articoli precedenti abbiamo descritto la teoria essenziale degli oggetti JavaScript e i dettagli sulla sintassi, dandovi una base solida da cui Partire. In questo articolo ci cimenteremo in un esercizio pratico, in cui costruirete oggetti JavaScript personalizzati che producono qualcosa di divertente e colorato — alcune palline colorate rimbalzanti.
-
- -

Verifiche

- -
-
Aggiungere caratteristiche alla demo "bouncing balls"
-
In questa verifiche userete la demo delle palline rimbalzanti come punto di partenza, aggiungendole alcune nuove ed interessanti caratteristiche.
-
diff --git a/files/it/learn/javascript/oggetti/json/index.html b/files/it/learn/javascript/oggetti/json/index.html deleted file mode 100644 index 71cf166e15..0000000000 --- a/files/it/learn/javascript/oggetti/json/index.html +++ /dev/null @@ -1,345 +0,0 @@ ---- -title: Lavorare con JSON -slug: Learn/JavaScript/Oggetti/JSON -translation_of: Learn/JavaScript/Objects/JSON ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
- -

JavaScript Object Notation (JSON) è un formato testuale standard, usato per rappresentare dati strutturati basati sulla sintassi degli oggetti in JavaScript. E' usato comunemente per la trasmissione dati nelle applicazioni web (ad es. inviare dati dal server al client in modo da visualizzarli in una pagina web o viceversa). Ti imbatterai abbastanza spesso in questo formato, così in questo articolo ti forniremo tutto ciò che ti occorre per lavorare con JSON usando JavaScript, incluso la lettura (parsing) del JSON in modo da accedere ai dati in esso contenuti, così come a generare JSON.

- - - - - - - - - - - - -
Prerequisiti:Conoscenza informatica di base, comprensione base di HTML e CSS, familiarità con i concetti base di JavaScript (vedi Primi passi e Costruzione blocchi) e con i concetti base degli oggetti JS (vedi Introduzione agli oggetti).
Obiettivi:Comprendere il funzionamento dei dati megorizzati in JSON e creare i tuoi oggetti JSON.
- -

No, davvero, cos'è JSON?

- -

{{glossary("JSON")}} è un formato dati testuale che segue la sintassi degli oggetti JavaScript, reso popolare da Douglas Crockford. Anche se richiama da vicino la sintassi letterale degli oggetti JavaScript, può essere usato indipendentemente da JavaScript, e molti ambienti di programmazione supportano la lettura (parsing) e la generazione di JSON.

- -

JSON esiste sotto forma di una stringa — utile quando vuoi trasmettere dati in una rete. Deve essere poi convertito in un oggetto javaScript nativo quando vuoi accedere ai dati che rappresenta. La conversione tra i due è piuttosto banale —  grazie ai metodi dell'oggetto globale JSON di JavaScript.

- -
-

Nota: Convertire una stringa in un oggetto nativo è chiamata deserializzazione, mentre convertire un oggetto nativo in una stringa in modo da poterlo trasmettere in rete, è chiamata serializzazione.

-
- -

Un oggetto JSON object può essere memorizzato in un file dedicato, essenzialmente un file di testo con estensione .json, e un {{glossary("tipo MIME")}} application/json.

- -

Struutura di un JSON 

- -

Come descritto sopra, un JSON non è altro che una stringa il cui formato è molto simile al formato letterale di un oggetto JavaScript. E' possibile includere in JSON gli stessi tipi di dato base possibili in un oggetto standard di JavaScript — stringhe, numeri, arrays, booleani e altri oggetti letterali. Questo ti consente di costruire una gerarchia dei dati, ad esempio:

- -
{
-  "squadName": "Super hero squad",
-  "homeTown": "Metro City",
-  "formed": 2016,
-  "secretBase": "Super tower",
-  "active": true,
-  "members": [
-    {
-      "name": "Molecule Man",
-      "age": 29,
-      "secretIdentity": "Dan Jukes",
-      "powers": [
-        "Radiation resistance",
-        "Turning tiny",
-        "Radiation blast"
-      ]
-    },
-    {
-      "name": "Madame Uppercut",
-      "age": 39,
-      "secretIdentity": "Jane Wilson",
-      "powers": [
-        "Million tonne punch",
-        "Damage resistance",
-        "Superhuman reflexes"
-      ]
-    },
-    {
-      "name": "Eternal Flame",
-      "age": 1000000,
-      "secretIdentity": "Unknown",
-      "powers": [
-        "Immortality",
-        "Heat Immunity",
-        "Inferno",
-        "Teleportation",
-        "Interdimensional travel"
-      ]
-    }
-  ]
-}
- -

Se carichiamo questo oggetto in un programma, processato in una variabile chiamata superHeroes per esempio, potremmo accedere ai dati che contiene usando la medesima notazione punto/parentesi vista nell'articolo Fondamentali degli oggetti JavaScript. Per esempio:

- -
superHeroes.homeTown
-superHeroes['active']
- -

Per accedere ai dati gerarchicamente inferiori, occorre semplicemente concatenare i nome delle proprietà e gli indici degli array.  Ad esempio, per accedere al terzo superpotere del secondo eroe nella lista dei membri, procedi come segue:

- -
superHeroes['members'][1]['powers'][2]
- -
    -
  1. Per primo abbiamo il nome della variabile — superHeroes.
    2. -
  2. All'interno della variabile vogliamo accedere alla proprietà members, così utilizziamo ["members"].
    3. -
  3. members contiene un array popolato da oggetti. Noi vogliamo accedere al secondo oggetto dell'array, quindi usiamo [1].
    4. -
  4. all'interno dell'oggetto così trovato, vogliamo poi accedere alla proprietà powers e per ciò usiamo ["powers"].
    5. -
  5. La proprietà powers contiene a sua volta un array in cui sono elencate i superpoteri dell'eroe selezionato. Noi vogliamo la terza in lista, usiamo quindi [2].
    6. -
- -
-

Note: Abbiamo reso disponibile il JSON visto sopra, in una variabile del nostro esempio JSONTest.html (vedi il codice sorgente). Prova a caricarlo e poi accedi alla variabile dalla console JavaScript del tuo browser.

-
- -

Arrays as JSON

- -

Above we mentioned that JSON text basically looks like a JavaScript object, and this is mostly right. The reason we said "mostly right" is that an array is also valid JSON, for example:

- -
[
-  {
-    "name": "Molecule Man",
-    "age": 29,
-    "secretIdentity": "Dan Jukes",
-    "powers": [
-      "Radiation resistance",
-      "Turning tiny",
-      "Radiation blast"
-    ]
-  },
-  {
-    "name": "Madame Uppercut",
-    "age": 39,
-    "secretIdentity": "Jane Wilson",
-    "powers": [
-      "Million tonne punch",
-      "Damage resistance",
-      "Superhuman reflexes"
-    ]
-  }
-]
- -

The above is perfectly valid JSON. You'd just have to access array items (in its parsed version) by starting with an array index, for example [0]["powers"][0].

- -

Other notes

- - - -

Active learning: Working through a JSON example

- -

So, let's work through an example to show how we could make use of some JSON data on a website.

- -

Getting started

- -

To begin with, make local copies of our heroes.html and style.css files. The latter contains some simple CSS to style our page, while the former contains some very simple body HTML:

- -
<header>
-</header>
-
-<section>
-</section>
- -

Plus a {{HTMLElement("script")}} element to contain the JavaScript code we will be writing in this exercise. At the moment it only contains two lines, which grab references to the {{HTMLElement("header")}} and {{HTMLElement("section")}} elements and store them in variables:

- -
const header = document.querySelector('header');
-const section = document.querySelector('section');
- -

We have made our JSON data available on our GitHub, at https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json.

- -

We are going to load it into our page, and use some nifty DOM manipulation to display it, like this:

- -

- -

Obtaining the JSON

- -

To obtain the JSON, we use an API called {{domxref("XMLHttpRequest")}} (often called XHR). This is a very useful JavaScript object that allows us to make network requests to retrieve resources from a server via JavaScript (e.g. images, text, JSON, even HTML snippets), meaning that we can update small sections of content without having to reload the entire page. This has led to more responsive web pages, and sounds exciting, but it is beyond the scope of this article to teach it in much more detail.

- -
    -
  1. To start with, we store the URL of the JSON we want to retrieve in a variable. Add the following at the bottom of your JavaScript code: - 
    let requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
    -
    2. -
  2. To create a request, we need to create a new request object instance from the XMLHttpRequest constructor, using the new keyword. Add the following below your last line: - 
    let request = new XMLHttpRequest();
    -
    3. -
  3. Now we need to open the request using the open() method. Add the following line: - 
    request.open('GET', requestURL);
    - -

    This takes at least two parameters — there are other optional parameters available. We only need the two mandatory ones for this simple example:

    - -
      -
    • The HTTP method to use when making the network request. In this case GET is fine, as we are just retrieving some simple data.
      • -
    • The URL to make the request to — this is the URL of the JSON file that we stored earlier.
      • -
    -
    4. -
  4. Next, add the following two lines — here we are setting the responseType to JSON, so that XHR knows that the server will be returning JSON, and that this should be converted behind the scenes into a JavaScript object. Then we send the request with the send() method: - 
    request.responseType = 'json';
-request.send();
    -
    5. -
  5. The last bit of this section involves waiting for the response to return from the server, then dealing with it. Add the following code below your previous code: - 
    request.onload = function() {
-  const superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
    -
    6. -
- -

Here we are storing the response to our request (available in the response property) in a variable called superHeroes; this variable now contains the JavaScript object based on the JSON! We are then passing that object to two function calls — the first one fills the <header> with the correct data, while the second one creates an information card for each hero on the team, and inserts it into the <section>.

- -

We have wrapped the code in an event handler that runs when the load event fires on the request object (see onload) — this is because the load event fires when the response has successfully returned; doing it this way guarantees that request.response will definitely be available when we come to try to do something with it.

- -

Populating the header

- -

Now that we've retrieved the JSON data and converted it into a JavaScript object, let's make use of it by writing the two functions we referenced above. First of all, add the following function definition below the previous code:

- -
function populateHeader(jsonObj) {
-  const myH1 = document.createElement('h1');
-  myH1.textContent = jsonObj['squadName'];
-  header.appendChild(myH1);
-
-  const myPara = document.createElement('p');
-  myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
-  header.appendChild(myPara);
-}
- -

We named the parameter jsonObj, to remind ourselves that this JavaScript object originated from JSON. Here we first create an {{HTMLElement("h1")}} element with createElement(), set its textContent to equal the squadName property of the object, then append it to the header using appendChild(). We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the homeTown and formed properties of the object.

- -

Creating the hero information cards

- -

Next, add the following function at the bottom of the code, which creates and displays the superhero cards:

- -
function showHeroes(jsonObj) {
-  const heroes = jsonObj['members'];
-
-  for (let i = 0; i < heroes.length; i++) {
-    const myArticle = document.createElement('article');
-    const myH2 = document.createElement('h2');
-    const myPara1 = document.createElement('p');
-    const myPara2 = document.createElement('p');
-    const myPara3 = document.createElement('p');
-    const myList = document.createElement('ul');
-
-    myH2.textContent = heroes[i].name;
-    myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity;
-    myPara2.textContent = 'Age: ' + heroes[i].age;
-    myPara3.textContent = 'Superpowers:';
-
-    const superPowers = heroes[i].powers;
-    for (let j = 0; j < superPowers.length; j++) {
-      const listItem = document.createElement('li');
-      listItem.textContent = superPowers[j];
-      myList.appendChild(listItem);
-    }
-
-    myArticle.appendChild(myH2);
-    myArticle.appendChild(myPara1);
-    myArticle.appendChild(myPara2);
-    myArticle.appendChild(myPara3);
-    myArticle.appendChild(myList);
-
-    section.appendChild(myArticle);
-  }
-}
- -

To start with, we store the members property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.

- -

Next, we use a for loop to loop through each object in the array. For each one, we:

- -
    -
  1. Create several new elements: an <article>, an <h2>, three <p>s, and a <ul>.
    2. -
  2. Set the <h2> to contain the current hero's name.
    3. -
  3. Fill the three paragraphs with their secretIdentity, age, and a line saying "Superpowers:" to introduce the information in the list.
    4. -
  4. Store the powers property in another new constant called superPowers — this contains an array that lists the current hero's superpowers.
    5. -
  5. Use another for loop to loop through the current hero's superpowers — for each one we create an <li> element, put the superpower inside it, then put the listItem inside the <ul> element (myList) using appendChild().
    6. -
  6. The very last thing we do is to append the <h2>, <p>s, and <ul> inside the <article> (myArticle), then append the <article> inside the <section>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.
    7. -
- -
-

Note: If you are having trouble getting the example to work, try referring to our heroes-finished.html source code (see it running live also.)

-
- -
-

Note: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the superheroes.json file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our JavaScript object basics article for more information on dot and bracket notation.

-
- -

Converting between objects and text

- -

The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:

- -
request.responseType = 'json';
- -

But sometimes we aren't so lucky — sometimes we receive a raw JSON string, and we need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in JSON object is available in browsers, which contains the following two methods:

- - - -

You can see the first one in action in our heroes-finished-json-parse.html example (see the source code) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used parse() to convert it to an actual JavaScript object. The key snippet of code is here:

- -
request.open('GET', requestURL);
-request.responseType = 'text'; // now we're getting a string!
-request.send();
-
-request.onload = function() {
-  const superHeroesText = request.response; // get the string from the response
-  const superHeroes = JSON.parse(superHeroesText); // convert it to an object
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}
- -

As you might guess, stringify() works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:

- -
let myJSON = { "name": "Chris", "age": "38" };
-myJSON
-let myString = JSON.stringify(myJSON);
-myString
- -

Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using stringify() — saving the return value in a new variable — then checking it again.

- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: JSON.

- -

Summary

- -

In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.

- -

See also

- - - -

{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}

- -

In this module

- - -- cgit v1.2.3-54-g00ecf