Guida Javascript per principianti: Parte 1

Pubblicato il

Perché Javascript

Javascript è un linguaggio di programmazione che nel corso degli anni ha subito una forte evoluzione.

Nato come “semplice” linguaggio di scripting lato client, ad oggi risulta essere uno dei linguaggi di programmazione più utilizzati e richiesti sul mercato.

Il motivo? Te lo spiego subito: ad oggi, con Javascript puoi creare davvero di tutto!

Vuoi sviluppare un sito web? Oltre ad utilizzare l’HTML per creare la struttura del sito, e CSS per realizzare la veste grafica, ti servirà Javascript per aggiungere dinamicità al tuo sito web!

Vuoi creare un’applicazione desktop per Windows/Mac/Linux? Con Javascript puoi farlo, esistono dei framework che ti permetteranno di scrivere la tua applicazione una sola volta, per poi eseguirla sul sistema operativo che preferisci!

Vuoi creare una web-app? Nessun problema, esistono diversi framework Javascript pensati proprio per questo! React, Angular e Vue sono i più diffusi, e grazie a loro potrai realizzare un’applicazione web veloce, dinamica e al passo con i tempi.

Vuoi creare un’app mobile? Javascript è in grado di fare anche questo! Come per le applicazioni desktop, potrai lavorare alla tua app e, una volta pronta, pubblicarla sugli store Apple e Android!

Ultimo punto, ma non per importanza, riguarda i cosiddetti linguaggi “server-side”: vengono chiamati tali tutti quei linguaggi che vengono eseguiti sul server; fino a qualche tempo fà, il server era un’ambiente precluso a Javascript, in quanto esso era appunto un linguaggio nato per essere eseguito sui client. Con l’introduzione di Node.js però, le carte in tavola sono cambiate drasticamente, in quanto è proprio grazie ad esso che oggi Javascript può essere utilizzato per creare anche applicazioni backend.

Insomma, come avrai capito, Javascript ad oggi risulta essere una scelta vincente, ed il mercato del lavoro è costellato di posizioni aperte per Javascript Developer.

Ma basta chiacchiere, iniziamo!

Procuriamoci l’occorrente per iniziare

Il modo più veloce per “vedere” il nostro codice Javascript all’opera è tramite un browser; indipendentemente da quale browser sceglierai infatti, esso sarà in grado di interpretare ed eseguire il codice Javascript presente all’interno di una pagina web. Personalmente ti consiglio Google Chrome, in quanto proprio lui sarà il browser che utilizzerò per tutta la durata delle guida.

Per iniziare a scrivere del codice Javascript dobbiamo procurarci un editor di testo; in rete ce ne sono a bizzeffe, gratis e a pagamento, ma per iniziare puoi sceglierne uno tra questi gratuiti; se non sai quale scegliere, personalmente ti consiglio il primo della lista:

Bene, ora che hai l’editor installato sulla tua macchina, crea una nuova cartella sul desktop, lancia l’editor e trascina la cartella appena creata all’interno dell’editor; se tutto è andato per il verso giusto l’editor avrà impostato come cartella di lavoro la tua cartella sul desktop…sei pronto per cominciare!

Primi passi

Ci sarebbe davvero tanto da spiegarti prima di cominciare a scrivere codice, ma capisco che potresti sentirti spaesato e trovarti sommerso da una valanga di nozioni a primo impatto di difficile comprensione.

Per questo motivo cercherò di spiegarti passo passo ogni singola cosa, dandoti allo stesso modo gli strumenti necessari affinché tu possa provare con mano, sperimentare ed avere subito un riscontro tangibile di quanto fatto.

Disclaimer

Come ti spiegavo poco fà, Javascript per essere eseguito dal browser ha necessità di essere incluso all’interno di una pagina web; quello di cui abbiamo bisogno quindi è una pagina HTML. Il linguaggio HTML però non sarà argomento di questa guida, pertanto ti fornirò al bisogno porzioni di codice HTML pronte all’uso che potrai utilizzare all’interno del tuo progetto.

Procediamo quindi a creare la nostra pagina HTML: crea un nuovo file chiamato index.html e al suo interno copia il codice HTML che trovi qui di seguito

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World from HTML!</h1>
</body>
</html>

Fatto ciò, salva il file; dopodiché aprendo il tuo browser e trascinando al suo interno il file che hai appena creato, dovresti vedere una cosa del genere:

Guida Javascript - Hello World HTML

Tornando sull’editor, proviamo ora ad includere Javascript all’interno della nostra pagina web.

Crea un nuovo file chiamato app.js, poi tornando nella pagina HTML modificala in questo modo affinché includa il file appena creato:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World from HTML!</h1>

    <script type="text/javascript" src="./app.js"></script>
</body>
</html>

Fatto ciò, salva il file e ricarica la pagina del browser per rendere effettive le modifiche; non noterai alcun cambiamento all’interno della pagina web, ma il browser avrà recepito il cambiamento nella pagina ed avrà caricato il tuo nuovo file app.js, al momento vuoto.

Per avere conferma di ciò ti basterà aprire i Developer Tools inclusi all’interno di Google Chrome; potrai accederci tramite il menù del browser oppure tramite una shortcut da tastiera che però cambia in base al sistema operativo in uso; se sei su Windows dovrai premere F12, su Mac option + shift + i

Noterai una finestra comparire nella parte bassa del browser, composta da diverse sezioni; cliccando su Network ti comparirà una sezione dove potrai visualizzare tutte le risorse che il browser caricherà all’apertura di una pagina web; con i Developer Tools aperti quindi, prova a ricaricare ora la pagina, dovresti trovarti di fronte una situazione di questo tipo:

Corso Javascript - Developer Tools

Come vedi, ora il browser ci conferma che ha caricato sia il file index.html, sia il file app.js.

Concludiamo questa prima parte con qualcosa di pratico: il nostro primo Hello World!

Hello World!

Procediamo ora a scrivere la nostra prima istruzione Javascript; faremo in modo che il browser ci stampi a schermo un messaggio personalizzato.

Apriamo il file app.js e scriviamo la seguente istruzione:

alert('Hello World from Javascript!!!');

Salviamo il file e ricarichiamo la pagina aperta sul browser; se tutto è andato a buon fine, al caricamento della pagina vedrete comparire un messaggio a schermo; l’istruzione alert() infatti serve proprio a questo: stampa a schermo un messaggio di sistema.

Potrei proseguire oltre, ma credo che per il momento sia meglio fermarci qua; abbiamo visto come impostare un progetto basico, cosa ci serve per iniziare a lavorare con Javascript e siamo arrivati a far eseguire la nostra prima istruzione Javascript al browser.

Dalla prossima lezione entreremo nel vivo del linguaggio, analizzando i tipi di dati che è possibile manipolare, come rendere dinamiche le nostre pagine web, e molto altro.

Resta sintonizzato, ci sarà da divertirsi 🙂