Nozioni di base su JavaScript. Parte 2 Corso JavaScript da Principiante ad Avanzato

Questa è la seconda parte della serie di post sul blog JavaScript che ti porterà dal principiante all'avanzato. Entro la fine di questa serie conoscerai tutte le nozioni di base che devi sapere per iniziare a scrivere codice in JavaScript. Senza ulteriori indugi, iniziamo con il secondo tutorial.

Nozioni di base su JavaScript – sommario:

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

In questo post sul blog continueremo con il punto in cui abbiamo lasciato il primo post sul blog. A questo punto dovresti avere il tuo browser Google Chrome aperto e più specificamente la tua console JavaScript aperta. Se per qualche motivo li chiudessi, sarebbe un buon momento per riaprirli. Iniziamo ad imparare le basi di JavaScript

Se sei su un Mac, la scorciatoia da tastiera per aprire la console è premere "opzione + comando + J", dopo aver aperto Chrome. Se stai utilizzando un dispositivo Windows, puoi utilizzare la scorciatoia da tastiera "Control + Shift + J", per aprire la Console JavaScript, una volta aperto Chrome. Oppure puoi anche andare nel menu in alto e andare su Visualizza -> Sviluppatore -> Console JavaScript.

Nozioni di base su JavaScript

JavaScript, come tutti gli altri linguaggi di programmazione, è un linguaggio che usi per comunicare con i computer. Come un linguaggio naturale ha grammatica e parole conosciute per formare frasi corrette, anche i linguaggi di programmazione hanno alcune regole che dovresti seguire per comunicare efficacemente con il computer.

Ad esempio certe parole significano certe cose per il motore JavaScript che esegue il nostro codice, come la parola chiave "alert" che abbiamo usato nel tutorial precedente aveva il significato di visualizzare un avviso all'utente con le parole specifiche che inserivano tra parentesi subito dopo . Nel nostro caso, abbiamo scritto "Hello, World!" 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 nel linguaggio naturale, esiste 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 conoscere le basi di JavaScript. Vediamo alcune delle cose principali che dovremmo sapere su JavaScript.

Esecuzione riga per riga

Quando si tratta delle basi 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 viene anche definito JavaScript come "linguaggio di programmazione interpretato".

Al contrario, alcuni linguaggi di programmazione sono “linguaggi di programmazione compilati”. Alcuni esempi di linguaggi compilati potrebbero essere: C, C++, C#, Swift, Java e così via. La differenza principale è che con i linguaggi di programmazione compilati, tutto il codice che scrivi verrà "compilato" e verrà eseguito in un unico pezzo dal computer. Questo è anche il motivo per cui può essere più difficile iniziare a imparare un linguaggio di programmazione compilato in quanto 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 quale riga hai commesso l'errore, ad esempio dimenticando un punto e virgola o non corrispondenti 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 al computer. Ma dove finisce un programma dove inizia l'istruzione successiva? Ci sono diversi approcci a questo problema. JavaScript utilizza due cose principali, il punto e virgola e le parentesi.

A seconda del tipo di istruzione che scriviamo, generalmente ne utilizzeremo una per terminare o impacchettare un set di istruzioni. Useremo diversi tipi di parentesi per diverse funzionalità e tipi di dati. Ad esempio, nell'avviso ("Hello, World"); codice che abbiamo eseguito in precedenza, le parentesi che circondano la scrittura 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 all'istruzione successiva. Questo è molto simile al modo in cui usiamo un punto "." per terminare le frasi in inglese.

Commenti

L'aggiunta di 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.

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

Ci sono due modi per aggiungere commenti è JavaScipt. Il primo è aggiungere un semplice commento di "riga singola" con due barre in avanti come questa:

// this is a comment

In questo modo tutto ciò che scrivi dopo le due barre in avanti verrà ignorato sulla riga specifica in cui hai inserito le barre in avanti. Puoi ripetere questo tante volte per avere più righe coperte con commenti come questo:

// this is a comment.
// this is another comment.
// you can keep commenting like this.

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

Vai avanti e copia e incolla il seguente codice sulla tua console JavaScript che hai aperto su Chrome.

// greet user
alert("Hello, User!");
alert("Hi, User!");

Se vuoi esercitarti in più scrivendo tu stesso l'intero codice, puoi farlo anche tu. Una cosa che dovresti sapere sulla scrittura di più righe di codice nella console è che per passare alla riga successiva senza eseguirla puoi premere "shift + invio" per farlo. Altrimenti, dopo aver scritto una singola riga di codice, se premi semplicemente invio, verrà eseguita quella riga di codice. In questo esempio, questo non è un grosso problema e in realtà va bene anche eseguirlo riga per riga, perché abbiamo un semplice esempio che può funzionare anche in quello stile.

Dopo averlo copiato e incollato o scritto tu stesso il codice, vai avanti e premi "invio" per eseguire il codice. Il risultato dovrebbe darti due avvisi separati. Anche per ignorare gli avvisi puoi cliccare su “OK”, in questo caso non faranno nulla perché questo è un semplice avviso e non fa scattare nulla dopo aver mostrato il messaggio che vogliamo visualizzare.

Quando eseguiamo il codice in questo modo, eseguiamo 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 solo la seconda implementazione di "Hi, User!" viene giustiziato.

Una volta completata la sfida, o se rimani bloccato durante la sfida, puoi vedere il codice della soluzione alla sfida di seguito. Prima di dare un'occhiata alla soluzione, consiglio sempre vivamente di provarla tu stesso poiché imparerai il meglio quando la farai davvero pratica. Se hai completato la sfida con successo, dovresti guardare una schermata come questa:

Si noti che quando si commenta una riga di codice, diventa dello stesso colore della riga commentata precedente. Questa differenza di colore è qui in realtà non fa la differenza per il computer, ma è una caratteristica piuttosto utile per noi quando scriviamo il codice. In questo modo è molto più semplice commentare erroneamente una riga di codice poiché i colori lo renderanno ovvio.

Un altro modo per commentare il codice è con l'uso della barra e del carattere asterisco. In questo modo possiamo creare commenti a riga singola o multilinea nel nostro codice.

/* a single line comment */
/* the commenting starts when we put a forward slash and an asterisk
and the commented areas ends
when we close of the comment with an asterisk and the forward slash
like this */

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.

Autore: Robert Whitney

Esperto di JavaScript e istruttore che allena i dipartimenti IT. Il suo obiettivo principale è aumentare la produttività del team insegnando agli altri come cooperare efficacemente durante la programmazione.

Visualizza tutti i post

Corso JavaScript dal principiante all'avanzato in 10 post del blog:

1. Come iniziare a codificare in JavaScript?
2. Nozioni di base su JavaScript
3. Variabili e diversi tipi di dati in JavaScript
4. Snippet e strutture di controllo
5. While loop e for loop
6. matrice Java
7. Funzioni JavaScript
8. oggetti JavaScript
9. Metodi JavaScript e altro
10. Riepilogo del corso JavaScript