Introduzione a JavaScript

Nonostante il nome, JavaScript è correlato solo a Java, in quanto i due condividono alcune somiglianze sintattiche. La sintassi di JavaScript nel suo sviluppo iniziale era ampiamente ispirata alla sintassi di Java ed è stata chiamata "LiveScript" quando è stata distribuita per la prima volta in una versione beta di Netscape Navigator nel 1995, sia per allinearsi ad alcune delle altre offerte con nome di Netscape sia per ricordare il fatto che viene eseguito "live" nel browser. Poco dopo, Microsoft ha rilasciato la propria implementazione di JavaScript, "JScript", con Internet Explorer 3.0.

Netscape ha presentato questi primi lavori a Ecma International, un'organizzazione che sviluppa e pubblica standard tecnici, per formalizzare e descrivere in dettaglio come questo linguaggio di scripting deve essere compreso dagli altri browser. Nel 1997, Ecma International ha rilasciato ECMA-262, standardizzando la prima versione di un linguaggio di scripting chiamato ECMAScript. ECMAScript è lo standard che informa la creazione di linguaggi di scripting più specifici, ad esempio i lavori successivi di Microsoft su JScript, ora defunto, ActionScript di Adobe e JavaScript stesso.

Questa distinzione è importante quando si parla di aspetti e funzionalità specifici di JavaScript. "ES5" si riferisce alla prima versione principale dello standard ECMAScript nel 2009, dopo anni di sviluppo frammentario. "ES6" (o "ES2015") è un'abbreviazione degli standard stabiliti nella sesta edizione di ECMAScript, pubblicata nel 2015. Dopo ES6, le nuove edizioni dello standard ECMAScript sono state rilasciate annualmente, con modifiche e aggiunte di ogni edizione indicate per anno come "ES2016" o "ES2017".

Le regole di base

A differenza dei linguaggi compilati, JavaScript non viene tradotto da un codice che una persona scrive in un modulo che il browser è in grado di comprendere. Al browser viene inviato uno script insieme ad asset come markup, immagini e fogli di stile e il browser lo interpreta come era stato scritto: come una sequenza leggibile di caratteri Unicode, analizzata da sinistra a destra e dall'alto verso il basso.

Quando un interprete JavaScript riceve uno script, esegue innanzitutto un'analisi lessicale, analizzando la lunga stringa di caratteri che compongono uno script e convertendolo nei seguenti elementi di input discreti:

  • Token
  • Caratteri di controllo della formattazione
  • Terminatori di riga
  • Commenti
  • Spazio vuoto (quasi sempre ovvero tabulazioni e spazi).

I risultati di uno script non vengono mantenuti dopo il ricaricamento o l'uscita dalla pagina corrente, a meno che tu non includa istruzioni esplicite per agire in altro modo nello script.

A livello generale, le applicazioni JavaScript sono composte da istruzioni ed espressioni.

Dichiarazioni

Un'istruzione è un'unità di istruzione composta da una o più righe di codice che rappresentano un'azione. Ad esempio, puoi utilizzare la seguente istruzione per assegnare un valore a una variabile denominata myVariable:

let myVariable = 4;

myVariable;
> 4

Per essere interpretate correttamente, le istruzioni devono terminare con un punto e virgola. Tuttavia, questi punti e virgola non sono sempre obbligatori per la scrittura di JavaScript. La funzionalità denominata inserimento automatico del punto e virgola consente di trattare un'interruzione di riga dopo un'istruzione completa come un punto e virgola se manca un punto e virgola causa un errore.

L'ASI è la correzione degli errori, non un aspetto permissivo di JavaScript stesso. A causa dell'eccessiva correzione degli errori, che può portare a ambiguità che potrebbero indebolire il codice, dovresti comunque terminare manualmente ogni istruzione con un punto e virgola.

Istruzioni di blocco

Un'istruzione di blocco raggruppa un numero qualsiasi di istruzioni e dichiarazioni in una coppia di parentesi graffe ({}). Ti consente di combinare istruzioni in posizioni in cui JavaScript ne prevede solo una.

Molto spesso vedrai le istruzioni di blocco insieme alle istruzioni flusso di controllo, ad esempio if:

if ( x === 2 ) {
  //some behavior;
}

Espressioni

Un'espressione è un'unità di codice che genera un valore e può quindi essere utilizzata ovunque sia previsto un valore. 2 + 2 è un'espressione che genera il valore 4:

2 + 2;
> 4

L'"operatore di raggruppamento", una coppia abbinata di parentesi che racchiudono un'espressione, viene utilizzato per raggruppare parti di un'espressione e assicurare che una parte dell'espressione venga valutata come singola unità. Ad esempio, puoi utilizzare un operatore di raggruppamento per override the mathematical order of operations o per migliorare la leggibilità del codice:

2 + 2 * 4;
> 10

( 2 + 2 ) * 4;
> 16

let myVariable = ( 2 + 2 );

myVariable;
> 4

Digitazione debole

JavaScript è un linguaggio con una digitazione debole, il che significa che un valore dei dati non deve essere contrassegnato esplicitamente come tipo di dati specifico. A differenza di un linguaggio fortemente digitato, JavaScript può dedurre il tipo previsto dal contesto di un valore e convertire il valore in quel tipo. Questo processo è chiamato coercizione dei tipi.

Ad esempio, se aggiungi un numero a un valore stringa in un linguaggio altamente digitato, come Python, il risultato è un errore:

>>> "1" + 1
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
TypeError: cannot concatenate 'str' and 'int' objects

Invece di restituire un errore, JavaScript forza il valore numerico in una stringa e concatena i due valori, il comportamento previsto molto probabilmente quando si aggiunge un valore a una stringa:

"1" + 1;
> "11"

Anche i tipi di dati possono essere forzati esplicitamente. L'esempio seguente forza il valore numerico 100 a un valore stringa pari a "100" utilizzando il metodo toString integrato di JavaScript:

let myVariable = 100;

typeof myVariable;
> "number"

myVariable = myVariable.toString();
> "100"

typeof myVariable;
> "string"

Distinzione tra maiuscole e minuscole

A differenza del codice HTML e della maggior parte dei CSS, JavaScript è totalmente sensibile alle maiuscole. Ciò significa che devi sempre utilizzare le maiuscole in modo coerente, dalle proprietà e i metodi integrati nel linguaggio agli identificatori che definisci personalmente.

console.log( "Log this." );
> Log this.

console.Log( "Log this too." );
> Uncaught TypeError: console.Log is not a function
const myVariable = 2;

myvariable;
> Uncaught ReferenceError: variablename is not defined

myVariable;
> 2

Spazio vuoto

JavaScript non è sensibile agli spazi vuoti. Ciò significa che l'interprete ignora la quantità e il tipo (tabulazioni o spazi) di spazi vuoti utilizzati.

                     console.log(       "Log this"  );console.log("Log this too");
> "Log this."
> "Log this too."

Tuttavia, la presenza di spazi vuoti può essere significativa come separatore tra token lessicali:

let x;

[token: [let] [x] ]

letx;
> Uncaught ReferenceError: letx is not defined

[token: [letx] ]

Se gli spazi vuoti vengono utilizzati per separare i token lessicali significativi, il parser ignora la quantità e il tipo di spazi vuoti:

let           x                             =                           2;

[token: [let] [x] [=] [2] ]

Lo stesso vale per le interruzioni di riga, anche se ci sono casi in cui le interruzioni di riga possono causare problemi con la fine prematura di un'istruzione:

let x
=
2;

[token: [let] [x] [=] [2] ]

In termini stilistici, alcuni tipi di affermazioni spesso occupano una sola riga:

let x = 1;
let y = 2;

Alcune dichiarazioni in genere utilizzano più righe:

if ( x == 2 ) {
  //some behavior;
}

Queste convenzioni sono tuttavia strettamente legate alla leggibilità. JavaScript interpreta gli esempi precedenti come segue:

let x=1;let y=2;
if(x==2){}

Per questo motivo, un processo automatizzato che rimuove gli spazi vuoti non essenziali dai file di script per ridurre le dimensioni del trasferimento è un passaggio comune nella preparazione di JavaScript per un ambiente di produzione, insieme a una serie di altre ottimizzazioni.

L'utilizzo di spazi vuoti in JavaScript è in gran parte una questione di preferenze di autore e gestore. I progetti JavaScript con più sviluppatori che contribuiscono al codice spesso suggeriscono o applicano determinate convenzioni di spazi vuoti per garantire una formattazione del codice coerente, ad esempio l'uso di tabulazioni o spazi per far rientrare le istruzioni nidificate:

let myVariable = 10;

if ( typeof myVariable === "number" ) {
    console.log( "This variable is a number." );
    if( myVariable > 5 ) {
     console.log( "This variable is greater than five." );
    }
}

> "This variable is a number."
> "This variable is greater than five."

Verifica le tue conoscenze

Che cos'è un'espressione?

Un'unità di codice che restituisce un valore.
Un commento che spiega cosa fa il codice.
Un gruppo di dichiarazioni e dichiarazioni.

JavaScript è sensibile alle maiuscole.

True
False