JavaScript è un linguaggio di programmazione che aggiunge interattività al tuo sito internet (per esempio: giochi, risposte al premersi di un bottone o inserimento di dati in moduli, stili dinamici e animazioni). Questo articolo ti aiuterà a iniziare il tuo percorso in questo fantastico linguaggio dandoti un'idea di ciò che è possibile costruire (spoiler alert: molte, molte cose).

Cos'è JavaScript, davvero?

JavaScript ("JS" per i fan) è un linguaggio dinamico di programmazione che, quando applicato a un documento HTML, può dare interattività dinamica al sito web. Fu inventato da Brendan Eich, co fondatore del Mozilla project, Mozilla Foundation e Mozilla Corporation.

JavaScript è incredibilmente versatile. Puoi iniziare dal piccolo, con slider (carousel), gallerie di immagini, layout fluttuanti, risposte al premersi di un bottone. Con più esperienza sarai in grado di creare giochi, grafiche animate 2D e 3D, applicazioni con database e molto altro!

JavaScript è un linguaggio abbastanza compatto ma comunque flessibile. Gli Sviluppatori hanno scritto una grande varietà di plugins e snippets di codice da inserire sopra al linguaggio nativo che è il cuore di JavaScript, aprendo alle potenzialità e alle extra funzionalità del linguaggio, diminuendo gli sforzi. Queste includono:

  • Application Programming Interfaces per il Browser (APIs) — Le API all'interno dei web browsers regalano funzionalità come la creazione dinamica di HTML e stili CSS, la collezione e manipolazione di streaming video dalla webcam dell'utente o la generazione di grafiche 3D o di audio. 
  • API di terze parti permettono agli Sviluppatori di incorporare funzionalità nei loro siti da altri providers come Twitter o Facebook.
  • Framework e librerie di terze parti possono essere applicate al tuo HTML per permetterti di costruire siti e applicazioni più rapidamente.

Questo articolo vuole essere una leggera introduzione a JavaScript, non andremo a confoderti parlando dei dettagli e delle differenze tra il linguaggio nativo di JavaScript e tutte le varie librerie e framework che sono state costruite. Potrai imparare più in dettaglio nell'area di apprendimento JavaScript, oppure nel resto di MDN.

Sotto introdurremo alcuni aspetti del linguaggio nativo e potrai giocare anche con alcune delle API del browser. Divertiti!

"ciao mondo"

Quanto scritto sopra potrebbe sembrare eccitante, e dovrebbe — JavaScript è una delle tecnologie più vivaci e iniziando a usarlo, i tuoi siti si apriranno a nuove dimensioni di potere e creatività.

Ad ogni modo, JavaScript è un po' più complesso di HTML e CSS (che non sono propriamente linguaggi di programmazione, bensì di markup e di stile). Puoi iniziare con piccole cose come questa qui sotto. Iniziamo con l'aggiungere del JavaScript di base alla nostra pagina creando un esempio "ciao mondo" (lo standard negli esempi base di programmazione).

Importante: Se non hai seguito il resto del corso, scarica questo esempio e usalo come punto di inizio.

  1. Per prima cosa andiamo dove abbiamo salvato il nostro sito di test e creiamo una nuova cartella 'scripts' (senza gli apici). Poi al suo interno creiamo un file e chiamiamolo main.js (questo file è uno script di JavaScript).
  2. Poi, nel tuo file index.html inserisci questo elemento in una nuova riga prima del tag di chiusura </body>:
    <script src="scripts/main.js"></script>
  3. Praticamente stiamo facendo quello che avremmo fatto per un file di stile CSS con <link> - applichiamo il JavaScript alla pagina così che possa avere effetto su questa (e così anche sul CSS e qualsiasi altra cosa sulla pagina).
  4. Ora aggiungi questo snippet di codice al file main.js:
    var myHeading = document.querySelector('h1'); // Seleziono tutti i tag h1
    myHeading.textContent = 'Hello world!'; // Cambio il testo
  5. Assicurati che i file HTML e JavaScript siano salvato e carica index.html nel browser. Dovresti vedere qualcosa di simile:

Note: Abbiamo inserito l'elemento script sul fondo della pagina HTML perchè l'HTML carica in ordine lettura, in maniera sincrona. Se il JavaScript venisse caricato prima e non in fondo alla pagina, potrebbe causare dei problemi in quanto sarebbe caricato prima dell'HTML su cui lo script lavorerebbe, ma non sempre è così. Di solito è buona pratica, anche per i tempi di caricamento, inserire il JavaScript a fine pagina HTML, ma ciò può cambiare a seconda delle necessità.

Cos'è successo?

Il testo nell'elemento h1 è stato cambiato in "Hellow world!" usando JavaScript. Lo hai fatto utilizzando una funzione chiamata querySelector() per prendere un riferimento del tuo elemento h1 e poi salvando l'elemento in una variabile chiamata myHeading. Questo è molto simile a quello che abbiamo fatto con i selettori CSS. Quando vogliamo fare qualcosa con un elemento, dobbiamo prima selezionarlo.

Dopo aver selezionato l'elemento e averlo inserito nella variabile myHeading, hai cambiato la proprietà textContent , una proprietà che fa parte nativamente degli elementi HTML grazie alla DOM API, in "Hello world!".

Nota: Entrambe le funzionalità che hai usato fanno parte della Document Object Model (DOM) API, che ti permette di manipolare i documenti HTML.

Basi del linguaggio

Parliamo di alcune delle funzionalità principali del linguaggio JavaScript, per darti un'idea migliore di come tutto funziona. Inoltre, alcune di queste funzionalità sono comuni a tutti i linguaggi di programmazione. Se riuscirai a padroneggiare queste fondamenta, sarai sulla strada giusta per programmare più o meno tutto!

Importante: In questo articolo, prova a inserire il codice di esempio nella tua console di JavaScript per vedere cosa succede. Per maggiori dettagli sulle console di JavaScript vedi Scoprire i tool di sviluppo del browser

Variabili

Le Variabili sono contenitori dove puoi immagazzinare o salvare dei valori. Puoi iniziare dichiarando una variabile con la parola chiave var, seguita da qualsiasi nome tu voglia (più o meno JavaScript Keywords and Preserved Words):

var myVariable; // ok
var _myVariable; // ok
var $myVariable; // ok
var my_Variable; // ok
var -myVariable; // error
var delete; // error, preserved keyword
myVariable; // error

Nota: Il punto e virgola indica la fine di un'istruzione; è solo necessario quando devi separare le varie istruzioni su una singola riga, ma è anche buona pratica. Ci sono altre regole per sapere quando usarli e quando non usarli - vedi Your Guide to Semicolons in JavaScript per maggiori dettagli.

Nota: Puoi chiamare una variabile più o meno con qualsiasi nome ma ci sono alcune regole o restrizioni da seguire (vedi questo articolo). Se non sei sicuro puoi controllarne la validità.

Nota: JavaScript è case sensitive quindi myVariable e myvariable sono due variabili diverse. Se riscontri dei problemi nel tuoi codice, controlla le lettere!

Dopo aver dichiarato la variabile, puoi dargli un valore:

myVariable = 'Bob';

Oppure puoi usare una scorciatoia e unire i passaggi:

var myVariable = 'Bob';

Puoi richiamare il valore della variabile chiamandola:

myVariable;

Dopo avergli assegnato un valore puoi anche cambiarlo:

var myVariable = 'Bob';
myVariable = 'Steve';

Nota che queste variabili sono di tipi diversi:

Variable Explanation Example
String Per denotare che una variabile è una stringa, dovresti metterne il valore tra virgolette. var myVariable = 'Bob';
Number I numeri non hanno virgolette intorno a loro. var myVariable = 10;
Boolean

Un valore Vero/Falso. Le parole true e false sono parole chiave in JS e non hanno bisogno di virgolette.

var myVariable = true;
Array Una struttura che ti permette di immagazzinare più valori su un singolo riferimento. var myVariable = [1,'Bob','Steve',10];
Riferisciti a ogni membro dell'array:
myVariable[0], myVariable[1], etc.
Object Tutto in JavaScript è un oggetto e può essere salvato in una variabile. Tienilo a mente mentre impari. var myVariable = document.querySelector('h1');

Quindi perchè abbiamo bisogno delle variabili? Le variabili sono necessarie per rendere le cose interessanti nella programmazione. Se i valori non potessero cambiare non potremmo fare niente di dinamico, come personalizzare un messaggio di benvenuto o cambiare l'immagine mostrata in una galleria d'immagini.

Commenti

Puoi commentare il tuo codice JavaScript come faresti con il CSS:

/*
Qui dentro è un commento
*/

Se il tuo commento non contiene più di una riga è a volte più semplice fare un commento inline:

// Questo è un commento inline

Operatori

Un operatore è un simbolo matematico che produce risultati basandosi su due valori (o variabili). Nella seguente tabella puoi vedere gli operatori più semplici seguiti da alcuni esempi di JavaScript che puoi provare nella tua console.

Operator Explanation Symbol(s) Example
addizione/concatenazione Usato per fare la somma tra due numeri o incollare insieme due stringhe. + 6 + 9;
"Hello " + "world!";
sottrazione,moltiplicazione,divisione Queste fanno ciò che ci si aspetta. -, *, / 9 - 3;
8 * 2; // per moltiplicare in JS si usa l'asterisco
9 / 3;
operatore di assegnazione L'hai già visto. Serve per assegnare un valore a una variabile. = var myVariable = 'Bob';
operatore di identità Fa un test per vedere se due variabili sono uguali o meno e restituisce un valore booleano (true/false) === var myVariable = 3;
myVariable === 4; // false
negazione, non uguale Restituisce l'opposto logico. !, !==

L'espressione di base è true ma restituisce false perchè l'abbiamo negata:

var myVariable = 3;
!(myVariable === 3);

Qui testiamo che myVariable NON E' UGUALE a 3". Questo restituisce false perchè myVariable E' uguale a 3.

var myVariable = 3;
myVariable !== 3;

Ci sono molti altri operatori da esplorare, per ora va bene così. Vedi Espressioni e operatori per una lista completa.

Nota: Mischiare tipi di dati diversi può portare a strani comportamenti quando andiamo a affrontare calcoli quindi stai attento a riferirti alle variabili corretamente per avere il risultato che ti aspetti. Per esempio, "35" + "25" non darà il risultato sperato, questo perchè i numeri sono stati messi tra virgolette e sono diventati stringhe. In questo caso stiamo facendo una concatenazione di stringhe, non un'addizione, quindi il risultato sarà 3525. Togliendo le virgolette il risultato sarà quello che ci aspettavamo.

Condizionali

I Condizionali sono strutture di codice che ci permettono di testare delle espressioni che restituiscono valore vero o falso, facendo funzionare parti di codice a seconda del risultato. La forma più comune è chiamata if ... else. Quindi per esempio:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

L'espressione dentro il condizionale if ( ... ) è il test — questo usa l'operatore di identità (come descritto sopra) per comparare la variabile iceCream con la stringa "chocolate" per vedere se sono uguali. Se la comparazione restituisce true, il primo blocco di codice viene eseguito, altrimenti (else) si passa al secondo blocco di codice.

Funzioni

Le Funzioni sono un modo di impacchettare funzionalità che pensi di riutilizzare. Quando hai bisogno di una procedura puoi chiamare una funzione con il suo nome invece di riscrivere lo stesso codice ogni volta. Avrai visto alcuni esempi di usi di funzione, per esempio:

  1. var myVariable = document.querySelector('h1');
  2. alert('hello!');

Queste funzioni, documents.querySelector e alert, sono già presenti nel browser da poter utilizzare quando vuoi.

Se vedi quaclosa che assomiglia a una variabile ma ha delle parentesi dopo il nome — ( ) — allora probabilmente è una funzione. Le Funzioni spesso prendono degli argomenti — pezzi di dati che gli servono per fare il proprio lavoro. Questi dati vanno all'interno delle parentesi, separati da virgole.

Per esempio, la funzione alert() fa apparire un box dentro la finestra del browser, ma dobbiamo dargli una stringa come argomento per dire alla funzione cosa scrivere all'interno del pop-up.

La buona notizia è che puoi definire le tue funzioni — nel prossimo esempio scriviamo una semplice funzione che prende due numeri come argomenti e li moltiplica, restituendo il risultato:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Prova a eseguire la funzione sopra nella console con degli argomenti di test. Per esempio:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

Nota: La parola chiave return dice al browser di restituire la variabile risultato per renderla utilizzabile al di fuori della funzione. Questo è necessario perchè le cose che vengono definite all'interno di una funzione sono disponibili solo alla funzione. Questo è chiamato scoping (Leggi di più variable scoping.)

Eventi

La vera interattività di un sito dipende dagli eventi. Questi sono strutture di codice che ascoltano le varie cose che succedono nel browser, rispondendo con l'esecuzione di codice. Un esempio ovvio è l'evento click che è inizializzato dal browser quando si preme qualcosa con il mouse. Per dimostrarlo, inserisci il seguente codice nella console e poi premi ovunque sulla pagina corrente.

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Ci sono molti modi per attaccare un evento a un elemento. Qui selezioniamo un elemento HTML, impostando la proprietà del suo gestore onclick  a una funzione anonima (i.e. senza nome), che contiene il codice che vogliamo eseguire quando l'elemento viene premuto.

Nota che

document.querySelector('html').onclick = function() {};

è uguale a

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

E' solo più corta come soluzione.

Diamo i superpoteri al nostro sito web di esempio

Adesso che abbiamo visto un po' le basi di JavaScript, aggiungiamo alcune funzionalità interessanti al nostro sito di esempio per vedere cos'è possibile fare con JavaScript.

Aggiungere un cambio immagine

In questa sezione, aggiungeremo un'ulteriore immagine al nostro sito utilizzando alcune funzionalità della DOM API, usando un po' di JavaScript per scambiare le immagini quando vengono premute.

  1. Prima di tutto, trova un'altra immagine che vorresti usare per il tuo sito. Assicurati che sia della stessa grandezza della prima immagine o più o meno uguale (oppure, se conosci il CSS, applica alcune regole di stile).
  2. Salva quest'immagine nella cartella images.
  3. Rinomina quest'immagine a 'firefox2.png' (senza apici).
  4. Val al tuo main.js file e inserisci il seguente JavaScript. (Se il tuo "hello world" è ancora lì, cancellalo.)
    var myImage = document.querySelector('img');
    
    myImage.onclick = function() {
        var mySrc = myImage.getAttribute('src');
        if(mySrc === 'images/firefox-icon.png') {
          myImage.setAttribute ('src','images/firefox2.png');
        } else {
          myImage.setAttribute ('src','images/firefox-icon.png');
        }
    }
  5. Salva tutti i file e carica index.html nel browser. Ora quando premi sull'immagine, dovrebbe scambiarsi con la seconda!

Immagazzini un riferimento al tuo elemento immagine nella variabile myImage. Poi definisci il gestore della proprietà onclick della variabile myImage con una funzione anonima. Ora, tutte le volte che l'elemento immagine viene premuto:

  1. Recuperi il valore dell'attributo src dell'immagine.
  2. Usi un condizionale per sapere se il valore src è uguale alla destinazione dell'immagine originale:
    1. Se lo è, cambi la destinazione nell'attributo src con quella della seconda immagine, forzando l'altra immagine a essere caricata nell'elemento <image>.
    2. Se non lo è (quindi è già stata scambiata), il valore di src torna a essere quello della destinazione dell'immagine originale.

Aggiungere un messaggio di benvenuto personalizzato

Aggiungiamo un altro po' di codice, cambiando il titolo della pagina in un messaggio personalizzato quando l'utente visita il sito web. Questo messaggio di benvenuto rimarrà in memoria qualora l'utente dovesse lasciare il sito per tornare in un momento successivo — lo salveremo usando la Web Storage API. Includeremo un'opzione per cambiare l'utente e quindi il messaggio di benvenuto in qualsiasi momento risulti necessario.

  1. In index.html, aggiungiamo la seguente riga prima dell'elemento <script>:
    <button>Cambia utente</button>
  2. In main.js, inserisci il seguente codice alla fine del file, proprio come scritto —  questo prende i riferimenti di un nuovo bottone e dell'elemento h1, immagazzinandoli in delle variabili:
    var myButton = document.querySelector('button');
    var myHeading = document.querySelector('h1');
  3. Inserisci questa funzione per personalizzare il messaggio di benvenuto — questo ancora non farà niente ma lo sistemeremo tra poco:
    function setUserName() {
      var myName = prompt('Inserisci il tuo nome.');
      localStorage.setItem('name', myName);
      myHeading.textContent = 'Mozilla is cool, ' + myName;
    }
    Questa funzione utilizza la funzione prompt() che fa apparire un piccolo box di dialogo, un po' come alert(). Questo prompt() però chiede all'utente di inserire dei dati, salvandoli in una variabile dopo che l'utente ha premuto OK. In questo caso chiediamo all'utente di inserire il proprio nome. Dopo chiamiamo un'API chiamata localStorage che ci permette di immagazzinare dati nel browser per poi recuperarli successivamente. Usiamo la funzione setItem() di localStorage per creare e immagazzinare un oggetto chiamato 'name', impostando il suo valore a quello della variabile myName che contiene il dato inserito dall'utente. Finalmente, impostiamo il textContent dell'elemento h1 a una stringa più il valore della variabile myName che contiene il nome dell'utente.
  4. Poi aggiungiamo un blocco if ... else — possiamo chiamare questo codice di inizializzazione per strutturare la app al suo avvio:
    if(!localStorage.getItem('name')) {
      setUserName();
    } else {
      var storedName = localStorage.getItem('name');
      myHeading.textContent = 'Mozilla is cool, ' + storedName;
    }
    Questo blocco prima usa l'operatore di negazione logica, poi controlla se il dato name esiste nel localStorage. Se non esiste (primo blocco), fa partire la funzione setUserName(), altrimenti recuperiamo il nome dal localStorage con la funzione getItem() e impostiamo textContent dell'elemento h1 a una stringa più il valore della stringa restituita da getItem().
  5. Inserisci il gestore dell'evento onclick dell'elemento button. Quando premuto, la funzione setUserName() viene eseguita. Questo permette all'utente di inserire un nuovo nome quando vogliono, premendo il bottone:
    myButton.onclick = function() {
      setUserName();
    }
    

Ora quando visitiamo il sito per la prima volta, ti verrà richiesto il tuo username, poi ti sarà dato un messaggio personalizzato. Puoi cambiare il tuo nome quando vuoi premendo il bottone. Come bonus aggiunto, il nome è salvato in localStorage quindi rimane in memoria anche dopo la chiusura del browser mantenendo il messaggio personalizzato quando riaprirai il sito.

Conclusione

Se hai seguito tutte le istruzioni in questo articolo, dovresti avere una pagina così (puoi vedere la nostra versione qui):

Se ti blocchi, puoi comparare il tuo lavoro con il nostro esempio finito su Github.

Abbiamo appena iniziato con JavaScript. Se ti è piaciuto giocare e vorresti avanzare ancora di più, vai al nostro JavaScript learning topic.

Tag del documento e collaboratori

Tag: 
 Hanno collaborato alla realizzazione di questa pagina: Tonystrel, mnemosdev
 Ultima modifica di: Tonystrel,