Fondamenti di JavaScript. Parte 2 Corso di JavaScript da Principiante ad Avanzato

Questa è la seconda parte della serie di post sul blog di JavaScript che ti porterà da principiante ad avanzato. Alla fine di questa serie conoscerai tutte le basi necessarie per iniziare a programmare in JavaScript. Senza ulteriori indugi, iniziamo con il secondo tutorial.

Fondamenti di JavaScript – indice:

1. Fondamenti di JavaScript
2. Esecuzione riga per riga
3. Due modi per terminare le istruzioni
4. Commenti

In questo post del blog continueremo da dove ci eravamo lasciati nel primo post del blog. A questo punto dovresti avere aperto il tuo browser Google Chrome e, più specificamente, avere aperta la console JavaScript. Se per qualche motivo le hai chiuse, sarebbe un buon momento per riaprirle. Iniziamo a imparare le basi di JavaScript.

Se sei su un Mac, la scorciatoia da tastiera per aprire la console è premere “option + command + J”, dopo aver aperto Chrome. Se stai usando un dispositivo Windows, puoi usare la scorciatoia da tastiera “Control + Shift + J” per aprire la Console JavaScript, una volta aperto Chrome. Oppure puoi anche andare al menu in alto e selezionare Visualizza -> Sviluppatore -> Console JavaScript.

Fondamenti di JavaScript

JavaScript, come tutte le altre lingue di programmazione, è un linguaggio che usi per comunicare con i computer. Come una lingua naturale ha grammatica e parole conosciute per formare frasi corrette, anche i linguaggi di programmazione hanno certe regole che dovresti seguire per comunicare efficacemente con il computer.

Ad esempio, alcune parole significano certe cose per il motore JavaScript che esegue il nostro codice, come la parola chiave “alert” che abbiamo usato nel tutorial precedente, che aveva il significato di visualizzare un avviso all’utente con le parole specifiche che hanno inserito tra le parentesi subito dopo. Nel nostro caso, abbiamo scritto “Hello, World!” e quindi abbiamo ricevuto un avviso che diceva “Hello, World!”.

Ci sono anche altre parole chiave riservate in JavaScript di cui dovremmo essere a conoscenza in modo da poter comunicare efficacemente con il computer usando le parole e la grammatica giuste. Inoltre, proprio come la grammatica che abbiamo nella lingua naturale, c’è anche una grammatica nei linguaggi di programmazione. Quella grammatica è comunemente chiamata “sintassi” nei linguaggi di programmazione e JavaScript non fa eccezione. Ecco perché è una buona idea comprendere le parole chiave principali e la grammatica che abbiamo in JavaScript mentre iniziamo a imparare le basi di JavaScript. Vediamo alcune delle cose principali che dovremmo sapere su JavaScript.

Esecuzione riga per riga

Quando si tratta di fondamenti di JavaScript, una delle prime cose che dovresti sapere è che il codice che scrivi verrà eseguito riga per riga, dall’alto verso il basso. Questo stile di esecuzione del codice è anche definito come JavaScript che è un “linguaggio di programmazione interpretato”.

Al contrario, alcuni linguaggi di programmazione sono “linguaggi di programmazione compilati”. Alcuni esempi di linguaggi compilati sarebbero: C, C++, C#, Swift, Java e così via. La principale differenza è che con i linguaggi di programmazione compilati, tutto il codice che scrivi verrà “compilato” e verrà eseguito in un’unica volta dal computer. Ecco perché può essere più difficile iniziare a imparare un linguaggio di programmazione compilato, poiché può essere più difficile individuare dove hai commesso un errore nel tuo programma.

Alcuni esempi di linguaggi di programmazione interpretati sarebbero JavaScript, Python, Bash e Matlab. Con i linguaggi di programmazione interpretati hai il vantaggio intrinseco di vedere in quale riga hai commesso l’errore, ad esempio dimenticando un punto e virgola o non abbinando le parentesi nel tuo codice. Avere questa caratteristica potrebbe non fare una grande differenza in alcune applicazioni, ma quando stiamo cercando di caricare un sito web con una connessione internet lenta, preferisci che ogni singola riga di JavaScript venga eseguita il più velocemente possibile.

Due modi per terminare le istruzioni

Un programma per computer, alla fine della giornata, è un insieme di istruzioni per il computer. Ma dove finisce un programma e dove inizia la successiva istruzione? Ci sono diversi approcci a questo problema. JavaScript utilizza due elementi principali, il punto e virgola e le parentesi.

A seconda del tipo di istruzione che scriviamo, generalmente utilizzeremo uno dei due per terminare o raggruppare un insieme di istruzioni. Utilizzeremo diversi tipi di parentesi per diverse funzionalità e tipi di dati. Ad esempio, nel codice alert(“Hello, World”); che abbiamo eseguito in precedenza, le parentesi che circondano la scritta hello world dicono al computer cosa dovrebbe dire l’avviso, e il punto e virgola alla fine dell’istruzione dice al computer che questa istruzione finisce qui, puoi passare alla successiva. Questo è molto simile a come usiamo un punto “.” per terminare le frasi in inglese.

Commenti

Aggiungere commenti al codice è una parte essenziale della programmazione. Può essere facile capire quale codice scrivi mentre lo stai scrivendo, ma a seconda della complessità del codice potresti avere pochissime idee sei mesi dopo, quando torni al codice.

Aggiungere commenti non solo rende molto più facile comprendere il tuo codice per il tuo futuro, ma rende anche molto più facile per chiunque lavori con te comprendere il codice. Può anche aiutarti a sviluppare meglio la tua comprensione del problema con cui stai lavorando, poiché di solito è molto più facile risolvere i problemi dividendoli in pezzi più piccoli. Le parti commentate del tuo codice verranno ignorate dall’interprete e non verranno eseguite.

Ci sono due modi per aggiungere commenti in JavaScript. Il primo è aggiungere un semplice commento “a riga singola” con due barre in avanti in questo modo:

// questo è un commento

In questo modo, tutto ciò che scrivi dopo le due barre in avanti verrà ignorato nella riga specifica in cui hai messo le barre in avanti. Puoi ripetere questo quante volte vuoi per avere più righe coperte da commenti in questo modo:

// questo è un commento.
// questo è un altro commento.
// puoi continuare a commentare in questo modo.

Un altro motivo per cui usiamo i commenti è per commentare un pezzo di codice per sperimentare con il codice. Ad esempio, puoi scrivere la stessa funzionalità in più modi e potresti voler commentare una versione dello stesso codice per confrontare le loro prestazioni o risultati individuali. Vediamo anche un esempio di questo.

Vai avanti e copia e incolla il seguente codice nella console JavaScript che hai aperto in Chrome.

// saluta l'utente
alert("Hello, User!");
alert("Hi, User!");

Se vuoi esercitarti a scrivere l’intero codice da solo, puoi farlo anche. Una cosa che dovresti sapere su come scrivere più righe di codice nella console è che per passare alla riga successiva senza eseguirla puoi premere “shift + enter” per farlo. Altrimenti, dopo aver scritto una singola riga di codice, se premi solo invio, eseguirà quella riga di codice. In questo esempio, non è un grande problema ed è effettivamente corretto eseguirlo riga per riga, poiché abbiamo un esempio semplice che può funzionare anche in quel modo.

Dopo aver copiato e incollato o scritto il codice da solo, vai avanti e premi “invio” per eseguire il codice. Il risultato dovrebbe darti due avvisi separati. Inoltre, per chiudere gli avvisi puoi cliccare su “OK”, in questo caso non faranno nulla perché si tratta di un semplice avviso e non attiva nulla dopo aver mostrato il messaggio che vogliamo visualizzare.

Quando abbiamo eseguito il codice in questo modo, stiamo eseguendo la stessa funzionalità due volte. Ma cosa dovresti fare se vuoi vedere solo un’implementazione alla volta? Bene, sai esattamente cosa fare in questo caso perché ne abbiamo già parlato. Vai avanti e commenta una delle righe dopo aver incollato o scritto il codice in modo che venga eseguita solo la seconda implementazione di “Hi, User!”.

Una volta completata la sfida, o se ti blocchi durante la sfida, puoi vedere il codice di soluzione per la sfida qui sotto. Prima di dare un’occhiata alla soluzione, ti consiglio sempre vivamente di provare da solo, poiché imparerai meglio quando lo pratichi davvero. Se hai completato con successo la sfida, dovresti vedere uno schermo come questo:

Nota che quando commenti una riga di codice, diventa dello stesso colore della riga precedentemente commentata. Questa differenza di colore non fa effettivamente differenza per il computer, ma è una caratteristica piuttosto utile per noi quando scriviamo codice. In questo modo è molto più facile se per errore commenti una riga di codice, poiché i colori lo renderanno ovvio.

Un altro modo di commentare il codice è utilizzare la barra in avanti e il carattere asterisco. In questo modo possiamo creare commenti a riga singola o multilinea nel nostro codice.

/* un commento a riga singola *//* il commento inizia quando mettiamo una barra in avanti e un asterisco
e le aree commentate finiscono
quando chiudiamo il commento con un asterisco e la barra in avanti
in questo modo */

Ora conosci le basi di JavaScript. Nel prossimo tutorial, vedremo un concetto estremamente comune nella programmazione chiamato “variabili” insieme ai tipi di dati di base in JavaScript.