Cos'è JavaScript? Impara a programmare per il tuo successo

Agire, che si tratti del primo passo per imparare un nuovo hobby o di trasferirsi dall'altra parte del paese nella città dei tuoi sogni, può essere un'esperienza entusiasmante.

Mentre molti costruttori di siti web offrono interfacce comode di tipo drag-and-drop, padroneggiare JavaScript può darti un controllo senza pari sulla tua presenza online. Nel mondo tecnologico di oggi, un sito web è essenziale sia per gli individui che per le aziende. Imparare JavaScript è la chiave per sbloccare il suo pieno potenziale, creare esperienze coinvolgenti, e differenziare il tuo sito dai tanti altri costruiti con software per la costruzione di siti web.

Imparare a programmare e costruire il tuo sito web può sembrare opprimente all'inizio. Potresti pensare, "un carattere dimenticato e tutto il mio codice è sbagliato." Non sei solo in questo pensiero, ma è meglio rimboccarsi le maniche e iniziare semplicemente.

Se pensi al codice sul tuo sito web come a strati, HTML è il primo strato, seguito da CSS, e poi JavaScript. Questi tre linguaggi che gli sviluppatori web e di app mobili utilizzano lavorano insieme per creare un sito web, e ciascuno fa qualcosa di diverso:

• HTML definisce il contenuto sulla pagina web.
• CSS specifica il layout e lo stile della pagina web.
• JavaScript programma il comportamento sulla pagina web.

Esegui il codice all'interno di una scheda quando carichi un sito nel tuo browser. Una volta che HTML e CSS sono completamente caricati, JavaScript è abilitato nel motore JavaScript del browser. Questo assicura che la struttura (intestazioni, paragrafi, ecc.) e lo stile (dimensione del carattere, colori, ecc.) siano a posto quando JavaScript viene caricato.

A cosa serve JavaScript?

Il linguaggio principale di JavaScript consiste in una lunga lista di funzionalità di programmazione che ti permettono di fare molte azioni sul tuo sito web. Ad esempio, JavaScript viene utilizzato per eseguire codice in risposta a determinati eventi che accadono sulla pagina web. Se hai utilizzato un evento "click" nel tuo codice, rileverà quando un pulsante viene cliccato ed eseguirà l'azione specifica. JavaScript dice ai siti web o alle app di fare qualcosa in tempo reale senza ricaricare l'intera pagina, rendendo le interazioni più efficienti.

Oltre alla funzione di click, JavaScript può cambiare, nascondere o mostrare vari codici HTML e CSS.

Quando il tuo browser vede un blocco di codice JavaScript, lo esegue in ordine, cioè dall'alto verso il basso. Per questo motivo, è importante prestare attenzione all'ordine e a dove inserisci questo codice.

Non sei sicuro di quando hai visto JavaScript in azione? Pensa a quando la tua timeline di Facebook si è aggiornata automaticamente o quando Google suggerisce termini di ricerca basati su poche lettere della tua query di ricerca. Sì, entrambi JavaScript.

Cosa può fare JavaScript?

Hai qualcosa di specifico in mente per la tua pagina web e non sei sicuro se può essere fatto con JavaScript? Ecco solo alcune azioni che JavaScript può eseguire sul tuo sito web:

• Reagire alle azioni degli utenti, clic del mouse, pressioni di tasti e movimenti del mouse
• Ottenere e impostare cookie, mostrare messaggi, fare domande al visitatore
• Cambiare il contenuto esistente e modificare gli stili in HTML
• Scaricare e caricare file
• Inviare e richiedere dati da un server senza ricaricare la pagina

È correlato alla manipolazione delle pagine web o all'interazione con l'utente, e JavaScript può farlo.

Un esempio comune di JavaScript che è sempre più popolare sui siti web è l'attivazione di un pop-up mentre il mouse si muove per chiudere la scheda. Ad esempio, mentre spostavo il mouse per chiudere la homepage di Colourpop, ho ricevuto questo pop-up:

Foto per gentile concessione di Colourpop.com

In questo caso, Colourpop vuole che mi iscriva alla loro newsletter via email prima di chiudere il mio browser ed uscire dal loro sito web. Grazie a JavaScript, il codice ha tracciato il mio mouse mentre si avvicinava per chiudere il browser e ha attivato una call-to-action per iscrivermi alla loro newsletter via email prima che potessi andarmene.

Come funziona JavaScript

Il codice JavaScript viene eseguito all'interno di un browser web utilizzando un componente software specializzato chiamato motore JavaScript. I motori più popolari includono V8 (utilizzato in Chrome) e SpiderMonkey (utilizzato in Firefox).

Il processo di esecuzione coinvolge due componenti chiave:

• Event Loop: Questo meccanismo gestisce le operazioni asincrone, come la gestione delle interazioni con l'utente o l'esecuzione di richieste di rete. Funziona mantenendo uno stack di chiamate per memorizzare le funzioni attualmente in esecuzione e una coda di callback per i compiti in attesa di essere eseguiti.
• API del Browser: Il browser fornisce un insieme di funzioni e metodi noti come API del Browser, che permette al codice JavaScript di interagire con il Document Object Model (DOM), la struttura di una pagina web, e gestire eventi come clic su pulsanti o caricamenti di pagina.

Il motore JavaScript, l'event loop, e l'API del browser permettono a JavaScript di creare pagine web dinamiche e interattive che rispondono alle azioni degli utenti e forniscono feedback in tempo reale.

Sintassi di JavaScript

Mentre HTML e CSS hanno un codice specifico che viene utilizzato frequentemente, JavaScript ha centinaia e centinaia di opzioni di codifica che puoi utilizzare.

Per quanto riguarda la sintassi di JavaScript, i valori fissi all'interno del codice sono chiamati letterali, mentre i valori variabili sono chiamati variabili.

Letterali

I valori fissi, o letterali, si presentano in varie forme. Possono essere numeri, scritti con o senza decimali, o stringhe di testo, scritte con virgolette doppie o singole.

Le stringhe JavaScript memorizzano o manipolano il testo e consistono nei caratteri scritti all'interno delle virgolette. Nel caso seguente, G2 Learning Hub è il valore fisso scritto come stringa.

var blogName = ‘G2 Learning Hub’;

Variabili

Le variabili all'interno di JavaScript sono contenitori che memorizzano valori di dati e sono scritte utilizzando le parole chiave var, let o const (ciascuna delle quali ha casi leggermente diversi per il suo utilizzo). Nell'esempio seguente, a, b e c sono variabili:

var a = 2;
let b = 4;
const c = a + b;

È comune pensare alle variabili come all'algebra. Quindi, in questo caso, const c sarebbe uguale a 6. Il segno di uguale viene utilizzato per assegnare i valori alle variabili ed è chiamato operatore di assegnazione. Il segno più è un operatore aritmetico che calcola i valori.

Quando nomini le tue variabili, ricorda che devono essere uniche. Questi sono chiamati identificatori. Possono essere nomi brevi (come a e b) o più descrittivi (come età e somma).

Quando scegli i nomi per le tue variabili o identificatori unici, tieni presente:

• I nomi possono contenere lettere, numeri, trattini bassi e segni di dollaro
• I nomi sono case-sensitive
• I nomi devono iniziare con una lettera, un segno di dollaro o un trattino basso, ma non con un numero

Case Sensitive

Non importa per quale tipo di azione stai scrivendo il codice JavaScript, è importante ricordare che JavaScript è case-sensitive. La variabile lastName e lastname sarebbero due righe di codice diverse.

var lastname, lastName;
lastname = ‘Jones’;
lastName = ‘Smith’;

Il modo più comune in cui i programmatori codificano in JavaScript è usando il Camel Case. Questo significa che la prima parola inizia con una lettera minuscola, e ogni parola successiva inizia con una lettera maiuscola.

Pratica di scrittura di JavaScript

Pronto a praticare la scrittura di JavaScript prima di lanciarlo sul tuo sito web? Se stai usando Chrome, puoi farlo semplicemente usando la console integrata.

Per prima cosa, vai alla homepage di Google. Sotto "Visualizza", scorri fino a Sviluppatore e seleziona Console JavaScript.

Questo apre un editor JavaScript direttamente nel browser, che puoi usare per vedere il tuo codice in tempo reale. Per questo esempio, voglio creare un avviso che dice "Ciao, benvenuto al G2 Learning Hub."

Per farlo, scriverei:

alert (“Ciao, benvenuto al G2 Learning Hub”)

In questo caso, alert è un'"azione" integrata che traduce al browser di visualizzare una finestra di avviso, e il testo è la stringa.

Quando premo invio, ottengo questo popup:

Per vedere le variabili in azione, posso usare JavaScript per sapere che il mio nome è Mara e che voglio che il popup sia il mio nome.

Il codice che ho digitato nella Console JavaScript è:

var name = “Mara”

Poi, ho semplicemente digitato name e poi premuto invio, e sapeva che il mio nome è Mara. Per l'avviso ho digitato: alert(name), premuto invio e ho ricevuto questo popup.

Una volta che ho usato il codice per specificare il mio nome e metterlo tra virgolette, il codice sapeva che la stringa per name è Mara.

Se provassi a fare un avviso per una stringa che non ho ancora creato o definito, alert (message), riceverò un errore.

Pro e contro di JavaScript

JavaScript offre diversi vantaggi ma ha anche alcuni svantaggi.

Pro

• Versatilità: L'adattabilità di JavaScript gli consente di essere utilizzato per creare sia il front-end (interfaccia utente) che il back-end (logica lato server) delle applicazioni web.
• Interattività: JavaScript consente alle pagine web di essere dinamiche e interattive, rispondendo alle azioni degli utenti e fornendo feedback in tempo reale.

Contro

• Sicurezza: JavaScript può essere suscettibile a vulnerabilità di sicurezza, come attacchi di cross-site scripting (XSS), se non gestito con attenzione.
• Compatibilità del Browser: I diversi browser web possono interpretare il codice JavaScript in modo diverso, portando a potenziali incoerenze nel modo in cui le pagine web vengono visualizzate o funzionano.

Comprendere questi pro e contro aiuta gli sviluppatori a prendere decisioni informate sull'uso di JavaScript.

Le azioni parlano più delle parole

Quando cerchi un'azione specifica da far accadere su una pagina web che stai costruendo, JavaScript è la strada da percorrere. Come ciliegina sulla torta, o l'ultimo strato di codice, al tuo sito web, il codice più semplice può portare la tua pagina web al livello successivo e migliorare l'esperienza dell'utente.

Cercando i prossimi passi? Esplora il nostro hub di costruzione di siti web, dove puoi ottenere 50 risorse gratuitamente!

Questo articolo è stato originariamente pubblicato nel 2019. È stato aggiornato con nuove informazioni.