Questi esempi servivano per iniziare. Il pacchetto all’interno del browser è divertente ma non è una soluzione reale per programmare in JavaScript: per farlo correttamente, c’è bisogno di un editor di codice e di un motore di esecuzione (ovvero un server software).
Secondo un recente sondaggio degli sviluppatori di Stack Overflow, lo strumento di sviluppo più popolare in tutte le categorie è VS Code. Molti sviluppatori preferiscono altri editor come Atom. Entrambi hanno estensioni di terze parti: VS Code ha un numero piccolo ma significativo di estensioni e temi, mentre per Atom ne sono state pubblicate 11K-12K.
Sia Atom, sia VS Code, sono liberamente scaricabili. I nostri esempi utilizzeranno quest’ultimo.
Finora abbiamo introdotto le prime generalità: passiamo, ora, a vere strutture di programmazione JavaScript, in vista – per ora solo all’orizzonte – di mettere le mani su un esempio pratico che opera sul browser. È il momento di scaricare un ambiente di sviluppo!
Visual Studio Code e Live Server
Questo notebook è disponibile per Windows, Linux e Mac, gratuitamente, a questo indirizzo.
Una volta scaricato il software ed eseguita l’installazione, si può aprire una nuova pagina e scegliere il linguaggio che s’intende adottare. Ecco la parte della lista, più lunga, dove compare il linguaggio JavaScript.
Lista linguaggi
Si dovrà creare un directory nel quale registrare tutti i file generati. Lo si può fare all’inizio, oppure aspettare che sia lo stesso VS Code a chiederlo, come normalmente accade alla generazione delle prime linee di codice.
Inoltre, è comodo avere già pronto un file index.html. La creazione di questo file può essere fatta, tra gli altri modi, cliccando sulla prima icona a destra dell’indicazione del workspace.
Finestra di comando, in alto a sinistra
Una volta cliccato, l’area editor a destra si predispone all’aggiunta di codice. La base da cui partire viene generata automaticamente da VSC, premendo in successione il punto esclamativo e il tab. Ed ecco il risultato.
Prima versione di index.html
Osserva la riga 5:
<meta http-equiv="X-UA-compatible" content="IE=edge">
Questa riga di codice HTML indica che il sito web viene visualizzato in modalità di compatibilità con Internet Explorer, utilizzando la versione più recente (Edge).
Per indicare che un sito web deve essere visualizzato solo in modalità di compatibilità con Google Chrome, è possibile utilizzare questa riga di codice HTML:
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Metterai il valore “IE=Edge,chrome=1” per ottenere i migliori risultati sia con Internet Explorer (Edge), sia con Google Chrome.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
È, ora, opportuno installare anche il web server, ad esempio Live Server. Sempre con riferimento alla finestra di comando, la barra verticale di sinistra ospita alcune icone, tra le quali quella di un quadrato diviso in quarti, uno dei quali è staccato. È il pulsante che permette di accedere a package aggiuntivi. Cliccando lì si abilita la ricerca degli add-on, che in qualche secondo si completa. Scrivendo Live Server nella riga di ricerca, appaiono le varie versioni, ciascuna con il bottone “installa”.
Clicca sulla prima ed installa LS. Quindi, File>Exit da VBC e, infine, riapri VBC.
Cliccando su index.html con il tasto destro, dal menù a tendina seleziona “Open with Live Server”. Apparirà una pagina del tuo browser predefinito nella quale viene eseguito index.html: poiché in questo file non abbiamo messo niente, vedrai una pagina vuota!
L’azione nel linguaggio HTML avviene tra i due tag <body>, ora in riga 9 e 10. Se qui in mezzo aggiungiamo una riga di testo e ripetiamo il right-click su index.html, la pagina si aggiornerà, mostrando la scritta. Se inseriamo il testo tra il tag che indica un titolo (header) molto grande e aggiorniamo, la scritta sarà molto grande 😎
<body> <h1>Guida AULAB su JavaScript</h1> </body>
È giunto il momento di scrivere del vero codice JavaScript. Il metodo che abbiamo ora è di usare index.html come contenitore che VSC esegue su LS e i cui risultati diventano visibili sul browser.
Manca un solo elemento: come si inserisce JavaScript in index? È, in realtà, molto semplice: occorre inserire il codice tra i tag script, ovvero
<script> – codice – </script>
Il codice JavaScript verrà eseguito correttamente.
In generale, questa sezione si inserisce alla fine del corpo del codice html, ovvero subito prima del tag di chiusura </body>. Esistono altre opzioni, che hanno, però, usi specifici dei quali puoi non occuparti in questo momento.
