Cos'è JavaScript e perché studiarlo?

Scopri cos'è JavaScript, a cosa serve e cosa puoi costruire con il linguaggio del web.

Cos'è JavaScript e perché studiarlo?

Cos'è JavaScript?

JavaScript è un linguaggio di programmazione (detto anche di scripting). Tutti gli sviluppatori conoscono JavaScript in qualche misura. Da semplici animazioni sulle pagine web ad interazioni complesse, tutti ci siamo trovati almeno una volta ad utilizzarlo.

JavaScript è un linguaggio di programmazione nato in origine per il web. Brendan Eich, il creatore di JavaScript, si ritrovò nel 1995 a lavorare per Netscape. Il project manager assegnò a Brendan un compito in apparenza impossibile da portare a termine: creare un linguaggio di programmazione che funzionasse nel browser Netscape Navigator.

Brendan Eich concepì JavaScript (originariamente denominato Mocha), sviluppato in soli 10 giorni. Il risultato di quei 10 giorni di sviluppo? Un linguaggio strano, costellato di cose a loro volta strane. Da quel momento JavaScript è diventato il linguaggio universale del web, anche se non ha mai goduto di una reputazione stellare.

A cosa serve JavaScript?

A cosa serve esattamente JavaScript? In poche parole: immagina di avere un bottone su una pagina web. Dopo aver premuto il bottone vuoi che l'utente veda un altro elemento nella pagina, che prima era nascosto.

Come pensi si possa ottenere un effetto del genere? Con JavaScript! In altre parole, ogni pagina web costruita con puro HTML è inanimata (escludendo le animazioni CSS). Per aggiungere effetti ed interazioni è necessario lanciare JavaScript nella mischia.

JavaScript viene utilizzato anche fuori dal suo contesto naturale, rimasto confinato per quasi 2 decenni nei browser. Poi è nato Node.js, il motore che fa girare JavaScript anche fuori dal browser.

Ma nonostante l'utilizzo di Node.js sia cresciuto il campo principale di applicazione rimane comunque il browser. Se dovessi rispondere alla domanda "ma a cosa serve davvero JavaScript?" direi che il motivo principale è uno: la possibilità di creare o rimuovere elementi HTML dinamicamente.

Cosa posso costruire con JavaScript?

JavaScript è nato per aggiungere interazioni abbastanza innocenti sulle pagine web (clicco qui e succede una cosa 40px più avanti).

Ma dai quei tempi è cambiato molto. JavaScript viene usato ora per costruire interfacce web interattive di altissimo livello: le Single Page Application.

Le Single Page Application sono applicazioni web costruite con JavaScript ed offrono dei benefici per l'utente (se costruite in modo adeguato). Ma come è strutturata una Single Page Application? Le Single Page Application non sono altro che un singolo file HTML. Considera questo banale esempio:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>titolo SPA</title>
<link href="main.css" rel="stylesheet"></head>

<body>
    <div id="app">
    </div>
<script type="text/javascript" 
        src="main.4a4c.js" 
        async="">
</script>
<script type="text/javascript" 
        src="vendors~main.613f.js" 
        async="">
</script>

</html>

Il file HTML d'ingresso è un index.html che carica uno o più file (detti anche bundle) JavaScript. Da quel momento in poi è JavaScript a prendere le redini.

Una Single Page Application quindi è in parole povere un'applicazione dinamica il cui contenuto viene generato con JavaScript, un linguaggio ormai maturo ed in rapidissima crescita.

Perché dovrei studiare JavaScript?

JavaScript ha una reputazione di linguaggio "giocattolo" ma negli ultimi anni ha fatto passi da gigante. Continuare ad ignorare JavaScript o trattarlo come un linguaggio di serie B è una mossa controproducente.

Sembra una frase fatta ma JavaScript sta diventando sempre di più un linguaggio universale. Non possiamo ancora dire se questo sia un bene o un male. Ma JavaScript è diventato un requisito di base per qualsiasi posizione di Web Developer (o Front End Developer).

Non si parla più di "conoscenza base jQuery". Ora le posizioni di lavoro per Front End Developer hanno nella maggior parte dei casi requisiti minimi molto avanzati.

Sono d'accordo con te sul fatto che a volte le competenze tecniche elencate negli annunci sono esagerate. Ti candidi per lavorare con React e poi ti ritrovi a customizzare un tema Wordpress.

Ma un fatto è certo: non puoi più ignorare JavaScript se ambisci a posizionarti bene sul mercato come Web Developer. Senza contare che studiare React, JavaScript modern, e Redux è un investimento per il futuro, a prescindere se li userai o meno.

React è una libreria front-end sviluppata da Facebook. E' una libreria JavaScript moderna che permette di costruire interfacce UI con un'intelligente sistema a "componenti".

Redux è un'altra libreria JavaScript utilizzata molto spesso in combinazione con React. Lo scopo di Redux è gestire lo stato di un'applicazione web, ovvero tutti i dati, le interazioni, e le azioni che l'utente vede e manipola.

Studiare JavaScript non significa soltanto conoscere variabili e funzioni. Lo sviluppatore che vuole ambire a padroneggiare il linguaggio deve sapere non solo come usarlo ma anche come funziona internamente.

E' fondamentale per lo sviluppatore JavaScript approfondire le parti più complicate del linguaggio, ed è quello che faremo nel libro.

Devo studiare anche jQuery?

jQuery è una libreria JavaScript che contiene tutto il necessario per creare interazioni avanzate per le pagine web. All'inizio jQuery veniva utilizzato per aggiungere banali animazioni sulla pagina e poi per effetti più avanzati.

Per anni ed anni gli sviluppatori web hanno usato questa libreria che ormai è diventata quasi universale. Ma oggi jQuery è in graduale declino. JavaScript è diventato abbastanza maturo e completo da rendere jQuery obsoleto.

Oggi è possibile ottenere gli stessi risultati utilizzando JavaScript "puro". Ha senso quindi avere una conoscenza marginale di jQuery, della serie "so che esiste", e studiare la libreria sul momento, se e quando ne avrai bisogno.

ECMAScript, ES5, ES6 e altri termini tecnici

Quando inizierai a studiare sviluppo web troverai in rete diversi riferimenti a termini tecnici che potrebbero non esserti familiari. Ecco una breve spiegazione per ognuno.

API: il termine API inteso come acronimo di Advanced Programming Interface si riferisce ad un insieme di funzioni messe a disposizione del programmatore finale. In altre parole è una sorta di cassetta degli attrezzi già pronta a cui lo sviluppatore può attingere.

API native: nel contesto dei browser si parla di API native in riferimento a tutte quelle funzionalità che sono disponibili senza bisogno di installare librerie aggiuntive. Un esempio di API nativa è document.querySelector che serve per selezionare elementi HTML all'interno di una pagina.

Browser API o Web API: come sopra, i produttori dei vari browser mettono a disposizione una serie di funzioni che un qualsiasi web developer può sfruttare nel proprio codice. Esempi di browser API sono setTimeout, setInterval, console. Un elenco completo e sempre aggiornato è disponibile su Web APIs

ECMAScript: il termine ECMAScript ricorre spesso ed è un sinonimo per "JavaScript". Nel 1996, un anno dopo la nascita di JavaScript il linguaggio venne standardizzato e messo sotto l'ala protettiva di un comitato denominato ECMA. ECMAScript è lo standard da cui JavaScript è stato ricavato.

ES5: acronimo di ECMAScript 2009, ovvero la versione 5 di JavaScript.

ES6: acronimo di ECMAScript 2015, ovvero la versione 6 di JavaScript, rilasciata nel 2015.

ES7: acronimo di ECMAScript 2016, ovvero la versione 7 di JavaScript, rilasciata nel 2016.

ES8: acronimo di ECMAScript 2017, ovvero la versione 8 di JavaScript, rilasciata nel 2017.

Spec o specifica: "spec JavaScript" e "specifica JavaScript" sono sinonimi per indicare un documento tecnico su cui i produttori si basano per implementare i motori JavaScript.

OOP: il termine OOP è un acronimo per Object Oriented Programming, ovvero programmazione orientata agli oggetti.

REST API: le REST API sono dei servizi web che espongono informazioni e dati. Questi dati possono essere recuperati attraverso la rete con richieste HTTP. Un esempio di REST API è jsonplaceholder.typicode.com.

Richiesta HTTP: per richiesta HTTP si intende l'atto di visitare un qualsiasi indirizzo web, con un browser o dal codice. Nell'ambito delle REST API parliamo di richiesta HTTP quando recuperiamo (o inviamo) dati verso un'API.

Errore HTTP: l'errore HTTP è una condizione di errore che deriva da problemi con il sito web o l'API REST che stiamo tentando di contattare. Codici di errore comuni sono 404 per le pagine non trovate, 500 per errori interni del server ecc.

JSON: JSON è un acronimo per JavaScript Object Notation, un formato di interscambio dati basato su JavaScript.

Vanilla JavaScript: vanilla JavaScript è diventato un termine di uso comune per indicare codice JavaScript "puro", ovvero scritto senza l'ausilio di librerie esterne come jQuery, React ecc.

Need to refresh your JavaScript skills? Check out The Little JavaScript Book!

I WANT THE BOOK
Valentino Gagliardi

Hi! I’m Valentino! Educator and consultant, I help people learning to code with on-site and remote workshops. Looking for JavaScript and Python training? Let’s get in touch!

More from the blog: