034.1 Lezione 1

Certificazione:

Web Development Essentials

Versione:

1.0

Argomento:

034 Programmazione JavaScript

Obiettivo:

034.1 Esecuzione e Sintassi in JavaScript

Lezione:

1 di 1

Introduzione

Le pagine web sono sviluppate utilizzando tre tecnologie standard: HTML, CSS e JavaScript. JavaScript è un linguaggio di programmazione che permette al browser di aggiornare dinamicamente il contenuto di un sito web. Il JavaScript è solitamente eseguito dallo stesso browser usato per visualizzare una pagina web. Questo significa che, come per i CSS e l’HTML, il comportamento esatto di qualsiasi codice che si scrive potrebbe differire tra i vari browser. Fortunatamente i browser più comuni aderiscono alla specifica ECMAScript. Questo è uno standard che unifica l’uso di JavaScript nel web, e sarà la base per la lezione, insieme alla specifica HTML5, che indica come JavaScript deve essere inserito in una pagina web affinché un browser lo esegua.

Esecuzione di JavaScript nel Browser

Per eseguire JavaScript, il browser ha bisogno di ottenere il codice o direttamente, come parte dell’HTML che compone la pagina web, o come una URL che indica una posizione per uno script da eseguire.

L’esempio seguente mostra come includere il codice direttamente nel file HTML:

<html>
  <head>
  </head>
  <body>
    <h1>Website Headline</h1>
    <p>Content</p>

    <script>
      console.log('test');
    </script>

  </body>
</html>

Il codice è inserito tra i tag <script> e </script>. Tutto ciò che è incluso in questi tag sarà eseguito direttamente dal browser quando si andrà a caricare la pagina.

La posizione dell’elemento <script> all’interno della pagina indica con precisione quando il codice JavaScript verrà eseguito. Un documento HTML viene analizzato dall’alto verso il basso, e il browser decide quando visualizzare gli elementi sullo schermo. Nell’esempio appena mostrato, i tag <h1> e <p> del sito web vengono analizzati, e probabilmente visualizzati, prima dell’esecuzione dello script. Se il codice JavaScript all’interno del tag <script> impiegasse molto tempo per essere eseguito, la pagina verrebbe comunque visualizzata senza alcun problema. Se, tuttavia, lo script fosse stato messo sopra gli altri tag, il visitatore della pagina web dovrebbe aspettare che lo script finisca di essere eseguito prima di vedere la pagina. Per questa ragione, i tag <script> sono solitamente posizionati in uno dei due posti:

Alla fine del “corpo” HTML, in modo che lo script sia l’ultima cosa che viene eseguita. Fatelo quando il codice aggiunge qualcosa alla pagina che non sarebbe utile senza il contenuto. Un esempio potrebbe essere l’aggiunta di funzionalità a un pulsante, dato che il pulsante deve esistere perché la funzionalità abbia senso.
All’interno dell’elemento <head> dell’HTML. Questo assicura che lo script venga eseguito prima che il corpo dell’HTML venga analizzato. Se vuoi cambiare il comportamento di caricamento della pagina, o hai qualcosa che deve essere eseguito mentre la pagina non è ancora completamente caricata, puoi mettere lo script qui. Inoltre, se hai più script che dipendono da un particolare script, puoi mettere quello script condiviso in questa sezione HTML per assicurarti che venga eseguito prima degli altri script.

Per una varietà di ragioni, inclusa la gestibilità, è utile mettere il tuo codice JavaScript in file separati che esistono al di fuori del codice HTML. I file JavaScript esterni sono inclusi usando un tag <script> con un attributo src, nel modo seguente:

<html>
  <head>
    <script src="/button-interaction.js"></script>
  </head>
  <body>
  </body>
</html>

Il tag src comunica al browser la posizione del sorgente, cioè il file che contiene il codice JavaScript. La posizione può essere un file sullo stesso server, come nell’esempio precedente, o qualsiasi URL accessibile come https://www.lpi.org/example.js. Il valore dell’attributo src segue la stessa convenzione dell’importazione di file CSS o delle immagini, nel senso che può essere sia relativo sia assoluto. Quando si incontra un tag script con l’attributo src, il browser cercherà di ottenere il file sorgente usando una richiesta HTTP GET, quindi i file esterni devono essere accessibili.

Quando usi l’attributo src, qualsiasi codice o testo posto tra i tag <script>…</script> viene ignorato, secondo le specifiche HTML.

<html>
  <head>
    <script src="/button-interaction.js">
      console.log("test"); // <-- This is ignored
    </script>
  </head>
  <body>
  </body>
</html>

Ci sono altri attributi che puoi aggiungere al tag script per specificare ulteriormente come il browser dovrebbe ottenere i file e come dovrebbe gestirli in seguito. La seguente lista entra nel dettaglio sugli attributi più importanti:

async

Può essere usato sui tag script e indica al browser di recuperare lo script in background, in modo da non bloccare il processo di caricamento della pagina. Il caricamento della pagina sarà ancora interrotto dopo che il browser avrà ottenuto lo script, perché il browser deve analizzarlo, cosa che viene fatta immediatamente dopo che lo script è stato recuperato completamente. Questo attributo è booleano, quindi scrivere il tag come <script async src="/script.js"></script> è sufficiente e non è necessario fornire alcun valore.

defer

Simile a async, questo indica al browser di non bloccare il processo di caricamento della pagina mentre recupera lo script. Piuttosto, il browser rinvierà l’analisi dello script. Il browser aspetterà che l’intero documento HTML sia stato analizzato e solo allora analizzerà lo script, prima di annunciare che il documento è stato caricato completamente. Come async, defer è un attributo booleano ed è usato nello stesso modo. Poiché defer implica async, non è utile specificare entrambi i tag insieme.

Note

Quando una pagina è completamente analizzata, il browser indica che è pronta per la visualizzazione innescando un evento DOMContentLoaded, quando il visitatore sarà in grado di vedere il documento. Così, il JavaScript incluso in un evento <head> ha sempre la possibilità di agire sulla pagina prima che venga visualizzata, anche se si include l’attributo defer.

type

Indica il tipo di script che il browser dovrebbe aspettarsi all’interno del tag. Il default è JavaScript (type="application/javascript"), quindi questo attributo non è necessario quando si include codice JavaScript o si punta a una risorsa JavaScript con il tag src. Generalmente, tutti i tipi MIME possono essere specificati, ma solo gli script che sono denotati come JavaScript saranno eseguiti dal browser. Ci sono due casi d’uso realistici per questo attributo: dire al browser di non eseguire lo script impostando type ad un valore arbitrario come template o other, o dire al browser che lo script è un modulo ES6. Non tratteremo i moduli ES6 in questa lezione.

Warning

Quando più script hanno l’attributo async impostato, saranno eseguiti nell’ordine in cui finiscono di essere scaricati, non nell’ordine dei tag script nel documento. L’attributo defer, invece, mantiene l’ordine dei tag script.

La Console del Browser

Mentre di solito viene eseguito come parte di un sito web, c’è un altro modo di eseguire JavaScript: attraverso la console del browser. Tutti i moderni browser desktop forniscono un menu attraverso il quale è possibile eseguire codice JavaScript nel motore JavaScript del browser. Questo di solito viene fatto per testare nuovo codice o per eseguire il debug di siti web esistenti.

Ci sono diversi modi per accedere alla console del browser. Il modo più semplice è attraverso le scorciatoie da tastiera. Ecco di seguito le scorciatoie da tastiera per alcuni dei browser attualmente più in uso:

Chrome: Ctrl+Shift+J (Cmd+Option+J sul Mac)
Firefox: Ctrl+Shift+K (Cmd+Option+K sul Mac)
Safari: Ctrl+Shift+? (Cmd+Option+? sul Mac)

Puoi anche cliccare con il tasto destro del mouse su una pagina web e selezionare l’opzione “Ispeziona” o “Ispeziona Elemento”. Nel pannello che verrà ad aprirsi, puoi selezionare la scheda “Console”; ciò farà apparire la console del browser.

Una volta richiamata la console, è possibile eseguire JavaScript sulla pagina digitando il codice direttamente nel campo di input. Il risultato di qualsiasi codice eseguito sarà mostrato in una riga separata.

Istruzioni in JavaScript

Ora che sappiamo come avviare l’esecuzione di uno script, copriremo le basi di come uno script viene effettivamente eseguito. Uno script JavaScript è un insieme di istruzioni e blocchi. Un esempio di istruzione è console.log('test'). Questa istruzione dice al browser di scrivere la parola test nella console del browser.

Ogni istruzione (statement) in JavaScript è terminata da un punto e virgola (;). Questo dice al browser che l’istruzione è terminata e che una nuova può essere iniziata. Considerate il seguente script:

var message = "test"; console.log(message);

Abbiamo scritto due istruzioni. Ciascuna è terminata da un punto e virgola o dalla fine dello script. Per motivi di leggibilità, possiamo mettere le istruzioni su linee separate. In questo modo, lo script potrebbe anche essere scritto come:

var message = "test";
console.log(message);

Questo è possibile perché tutti gli spazi bianchi tra le istruzioni (come uno spazio, una nuova linea o un tab) vengono ignorati. Gli spazi bianchi possono anche essere spesso messi tra le singole parole chiave all’interno delle istruzioni, ma questo sarà ulteriormente spiegato in una prossima lezione. Le istruzioni possono anche essere vuote o composte solo da spazi bianchi.

Se un’istruzione non è valida perché non è stata terminata da un punto e virgola, ECMAScript farà un tentativo per inserire automaticamente il punto e virgola corretto, sulla base di un complesso insieme di regole. La regola più importante è: Se un’istruzione non valida è composta da due istruzioni valide separate da una linea nuova, inserire un punto e virgola alla linea nuova. Per esempio, il seguente codice non forma un’istruzione valida:

console.log("hello")
console.log("world")

Un browser moderno però lo eseguirà automaticamente come se fosse scritto con il punto e virgola appropriato:

console.log("hello");
console.log("world");

Pertanto, è possibile omettere il punto e virgola in alcuni casi. Tuttavia, poiché le regole per l’inserimento automatico del punto e virgola sono complesse, vi consigliamo di terminare sempre correttamente le vostre istruzioni per evitare errori indesiderati.

I Commenti in JavaScript

Script estesi possono diventare abbastanza complicati. Potresti voler commentare ciò che stai scrivendo, per rendere lo script più facile da leggere ad altre persone, o per te stesso in futuro. In alternativa, potresti voler includere meta informazioni nello script, come informazioni sul copyright, o informazioni su quando lo script è stato scritto e perché.

Per rendere possibile l’inclusione di tali meta informazioni, JavaScript supporta i commenti. Uno sviluppatore può includere caratteri speciali in uno script che denotano certe parti di esso come un commento, che sarà saltato durante l’esecuzione. Quella che segue è una versione commentata dello script che abbiamo visto precedentemente.

/*
 This script was written by the author of this lesson in May, 2020.
 It has exactly the same effect as the previous script, but includes comments.
*/

// First, we define a message.
var message = "test";

console.log(message); // Then, we output the message to the console.

I commenti “non” sono istruzioni e non hanno bisogno di essere terminati da un punto e virgola. Seguono invece le proprie regole per la terminazione, a seconda del modo in cui il commento è stato scritto. Ci sono due modi per scrivere commenti in JavaScript:

Commento multi-linea

Usa /* e */ per segnalare l’inizio e la fine di un commento multilinea. Tutto ciò che viene dopo /*, fino alla prima occorrenza di */ viene ignorato. Questo tipo di commento è generalmente usato per coprire linee multiple, ma può anche essere usato per linee singole, o anche all’interno di una linea come la seguente:

console.log(/* what we want to log: */ "hello world")

Poiché l’obiettivo dei commenti è generalmente quello di aumentare la leggibilità di uno script, si dovrebbe evitare di usare questo stile di commento all’interno di una linea.

Commento su singola linea

Usa // (doppio slash) per commentare una linea. Tutto ciò che viene dopo, sulla stessa linea, viene ignorato. Nell’esempio mostrato prima, questo schema è usato prima per commentare un’intera linea. Dopo l’istruzione console.log(message);, si usa per scrivere un commento sul resto della linea.

In linea generale e per semplicità, i commenti a linea singola dovrebbero essere usati per linee singole, e i commenti a più linee per linee multiple. I commenti all’interno di un’istruzione dovrebbero essere evitati.

I commenti possono anche essere usati per rimuovere temporaneamente linee di codice attivo, come nel modo seguente:

// We temporarily want to use a different message
// var message = "test";
var message = "something else";

Esercizi Guidati

Crea una variabile chiamata ColorName e assegnatele il valore RED.

Quali dei seguenti script sono validi?

console.log("hello") console.log("world");

console.log("hello"); console.log("world");

// console.log("hello") console.log("world");

console.log("hello"); console.log("world") //;

console.log("hello"); /* console.log("world") */

Esercizi Esplorativi

Quante istruzioni JavaScript possono essere scritte su una singola linea senza usare un punto e virgola?
Crea due variabili chiamate x e y, poi mostra la loro somma nella console.

Sommario

In questa lezione abbiamo imparato diversi modi di eseguire JavaScript e come modificare il comportamento del caricamento degli script. Abbiamo anche imparato i concetti base della composizione e del commento degli script, e abbiamo imparato a usare il comando console.log().

HTML utilizzato in questa lezione:

<script>: Il tag script può essere usato per includere JavaScript direttamente o specificando un file con l’attributo src. Modificare come lo script viene caricato con gli attributi async e defer.

Concetti JavaScript introdotti in questa lezione:

;: Il punto e virgola è usato per separare le istruzioni. I punti e virgola possono - ma non dovrebbero - essere omessi.
//, /*…*/: I commenti possono essere usati per aggiungere commenti o meta informazioni a un file di script, o per evitare che le istruzioni vengano eseguite.
console.log("text"): Il comando console.log() può essere usato per scrivere testo nella console del browser.

Risposte agli Esercizi Guidati

Crea una variabile chiamata ColorName e assegnatele il valore RED.
```
var ColorName = "RED";
```

Quali dei seguenti script sono validi?

console.log("hello") console.log("world");

Non valido: Il primo comando console.log() non è terminato correttamente e l’intera linea non forma un’istruzione valida.

console.log("hello"); console.log("world");

Valido: Ogni istruzione è terminata correttamente.

// console.log("hello") console.log("world");

Valido: L’intero codice viene ignorato perché è un commento.

console.log("hello"); console.log("world") //;

Non valido: All’ultima istruzione manca un punto e virgola. Il punto e virgola alla fine viene ignorato perché è commentato.

console.log("hello"); /* console.log("world") */

Valido: Un’istruzione valida è seguita da codice commentato, che viene ignorato.

Risposte agli Esercizi Esplorativi

Quante istruzioni JavaScript possono essere scritte su una singola linea senza usare un punto e virgola?

Se siamo alla fine di uno script, possiamo scrivere un’istruzione e questa sarà terminata dalla fine del file. Altrimenti, non è possibile scrivere un’istruzione senza punto e virgola con la sintassi che hai imparato finora.
Crea due variabili chiamate x e y, poi mostra la loro somma nella console.
```
var x = 5;
var y = 10;
console.log(x+y);
```