Cosa È JavaScript? Uno Sguardo al Linguaggio di Scripting più Popolare del Web

Chi non si è mai trovato di fronte la richiesta di aggiornare Java tentando di accedere a certi siti web?

Anche se molti conoscono Java per le caratteristiche interattive che permette di aggiungere ai siti web, gli utenti potrebbero avere meno familiarità con JavaScript – o, in effetti, potrebbero erroneamente considerare i due linguaggi come la stessa cosa.

In questo articolo spieghiamo cos’è JavaScript e quali sono le differenze tra Java e JavaScript. Poi offriremo una panoramica di alcune delle funzionalità JavaScript più significative.

Cominciamo!

Guarda la nostra video guida a JavaScript

Cos’è JavaScript?

Più semplicemente, JavaScript è un popolare linguaggio di scripting che consente di aggiungere funzionalità interattive e altri contenuti dinamici alle pagine web. Esempi ben noti di contenuti JavaScript sono moduli compilabili, slideshow di gallerie fotografiche e grafica animata.

JavaScript è anche relativamente intuitivo e semplice da imparare. È un eccellente punto di partenza per chi cerca di sapere di più sullo sviluppo dei siti web.

JavaScript è lo strato finale di funzionalità dei siti web altamente interattivi. L’HTML fornisce la struttura di base della pagina. Il CSS rende i siti alla moda – ne stabilisce lo stile. JavaScript aggiunge il divertimento.

Quando si apprende JavaScript, è essenziale capire la relazione tra HTML, CSS e JavaScript e come si uniscono nella visualizzazione di un sito web.

A Cosa Serve JavaScript

JavaScript ha varie applicazioni che chiunque abbia visitato pagine web interattive o applicazioni mobili avrà probabilmente conosciuto. Anche se JavaScript è utilizzato tradizionalmente per lo sviluppo di siti web, compresa l’aggiunta di elementi come moduli interattivi e animazioni, trova impiego anche in:

• Giochi basati su browser web – sia giochi 2D che 3D
• Sviluppo di applicazioni mobili – vantaggioso perché è agnostico rispetto alle piattaforme mobili
• Presentazioni – ad esempio, la creazione di diapositive animate basate sul web

Anche se la maggior parte delle applicazioni JavaScript sono lato client, JavaScript è utile anche nelle applicazioni lato server, come la creazione di server web.

Differenze tra Java e JavaScript

Innanzitutto, è bene precisare che Java e JavaScript non sono correlati, nonostante condividano il termine “Java”. Sia Java che JavaScript sono linguaggi nati per sviluppare pagine e applicazioni web. Tuttavia, hanno differenze distintive, tra cui:

• Programmazione orientata agli oggetti: Java è un linguaggio di programmazione orientato agli oggetti. JavaScript è un linguaggio di scripting basato sugli oggetti.
• Sintassi: La sintassi di JavaScript non è così formale o strutturata come quella di Java. Quindi, è più semplice per la maggior parte degli utenti.
• Compilazione: Java è un linguaggio compilato, mentre JavaScript è un linguaggio interpretato, che viene interpretato linea per linea in fase di esecuzione; i linguaggi compilati tendono ad essere più veloci, ma i linguaggi interpretati tendono ad essere più flessibili.
• Ambiente: È possibile utilizzare le applicazioni Java essenzialmente in qualsiasi ambiente, eseguendole in macchine virtuali o in browser; JavaScript è solo per i browser.
• Utilizzo della memoria: Java richiede più memoria di JavaScript; questo rende JavaScript preferibile per le pagine e le applicazioni web

JavaScript è Sicuro?

Anche se JavaScript è ampiamente accettato e utilizzato per lo sviluppo web, presenta delle vulnerabilità ben note. Uno dei più comuni attacchi informatici introdotti attraverso le vulnerabilità di JavaScript è l’attacco cross-site scripting (XSS). I criminali informatici ricorrono agli attacchi XSS per ottenere accesso e rubare informazioni sull’identità.

Per ridurre al minimo gli exploit, è fondamentale testare e rivedere il codice durante lo sviluppo. I metodi di testing come il test di sicurezza statico e dinamico delle applicazioni (SAST e DAST) aiutano a identificare le vulnerabilità in tutti i punti del ciclo di vita dello sviluppo del software.

Secondo gli analisti della sicurezza di Cloud Defense, SAST controlla il vostro codice per verificare che non violi le regole di sicurezza e confronta le vulnerabilità trovate tra il branch sorgente e quello di destinazione. Riceverete una notifica se le dipendenze del vostro progetto sono affette da vulnerabilità.

Vanilla JavaScript

Vanilla JavaScript è un’implementazione leggera del linguaggio JavaScript puro senza l’aggiunta di librerie. Il termine “vaniglia” si riferisce a JavaScript non personalizzato.

Molte grandi aziende usano Vanilla JS, tra cui Google, Microsoft, Apple, Amazon e altre. Vanilla JavaScript è una strada eccellente per imparare le basi della programmazione JavaScript prima di legarsi alle funzionalità più avanzate offerte nelle librerie.

Librerie JavaScript

Una libreria JavaScript è una raccolta di codice pre-scritto che esegue determinate funzioni. Le librerie permettono anche agli utenti inesperti di costruire rapidamente siti web utili e fanno risparmiare un tempo significativo nella costruzione di siti e applicazioni sia agli utenti principianti che a quelli esperti.

Anche se ci sono molte librerie JavaScript, alcune delle più popolari sono jQuery, Anime.js, Animate on Scroll e Leaflet.js.

Come si Relaziona JavaScript con i Framework dei Siti Web

I framework per siti web sono site builder avanzati, normalmente con ampie librerie di funzionalità pre-costruite e suite di testing. Potreste avere familiarità con framework lato server come Laravel, Ruby on Rails o Django. Ma ci sono anche diversi framework popolari basati su JavaScript lato client, tra cui React.js, Vue.js e Node.js.

Il DOM di JavaScript

Il DOM, o Document Object Model, agisce come interfaccia tra un linguaggio di programmazione come JavaScript e un documento sottostante – in particolare, documenti HTML e XML.

DOM è uno standard del W3C (World Wide Web Consortium), definito come “un’interfaccia indipendente dalla piattaforma e dal linguaggio che permette a programmi e script di accedere dinamicamente e aggiornare il contenuto, la struttura e lo stile di un documento”. I documenti consistono in un insieme di singoli elementi e proprietà (testo, pulsanti, link, ecc.).

Componenti di Base di JavaScript

Come per altri linguaggi di programmazione, JavaScript usa le variabili per identificare le posizioni in cui vengono memorizzati i dati. Le variabili possono essere globali (accessibili da qualsiasi funzione nel codice) o locali, note anche come block-scoped (accessibili solo nel blocco in cui sono dichiarate).

Le variabili possono contenere sia valori fissi (costanti note come literal) che valori modificabili. JavaScript ha una sintassi particolare per dichiarare (creare) costanti e variabili, e assegnare loro dei valori.

Dichiarare una Costante

Le costanti vere sono create utilizzando la dichiarazione const. Const crea delle costanti di sola lettura, immutabili e con un block-scoped (“block-scoped” significa che la costante non è accessibile dall’esterno del suo blocco dichiarato).

Un esempio di utilizzo di const per creare una costante è:

const GOLDEN_RATIO = 1.618; // create a constant named GOLDEN_RATIO with value 1.618

Notate l’uso di lettere maiuscole per nominare la costante; questa è una convenzione di denominazione comunemente accettata, sebbene non sia obbligatoria. I nomi delle variabili, inclusi quelli delle costanti, devono iniziare con una lettera (minuscola o maiuscola), il carattere di sottolineatura (_) o il simbolo del dollaro ($). Sono sensibili alle maiuscole e alle minuscole, quindi attenti a ricordare i nomi che assegnate alle vostre variabili.

Alle costanti, a differenza delle variabili, deve essere assegnato un valore al momento della creazione. La seguente dichiarazione restituirà un errore:

const GOLDEN_RATIO;

Dichiarare una Variabile

Le variabili sono dichiarate utilizzando la parola chiave var. Non è necessario che abbiano un valore assegnato al momento della dichiarazione, anche se è permesso farlo e viene fatto spesso. La parola chiave var ha uno scopo globale piuttosto che di blocco (a meno che non sia in una funzione, allora ha uno scopo di funzione).

var variable1; // declare a variable called variable1

var variable2 = "2021"; // declare a string variable called variable2 and initialize with value 2021

variable1 = "Thank goodness it's" // assign string value to previously declared variable variable1

console.log(variable1 + " " + variable2); // display "Thank goodness it's 2021"

Notate che le dichiarazioni in JavaScript devono finire con un punto e virgola. Potete creare commenti utilizzando // – JavaScript ignora qualsiasi cosa tra // e la fine della linea.

Le variabili possono contenere una varietà di tipi di dati, tra cui numeri, stringhe e oggetti. L’assegnazione delle variabili in JavaScript è dinamica. Quindi potete assegnare una variabile ad un diverso tipo di dati nello stesso codice.

Hoisting

Ora che avete capito come avviene la dichiarazione delle variabili in JavaScript, possiamo vedere come JavaScript si occupa della posizione della dichiarazione delle variabili. La pratica di codifica comunemente accettata richiede di dichiarare le variabili prima o contemporaneamente alla definizione. Alcuni linguaggi di programmazione in realtà lo richiedono.

JavaScript, tuttavia, permette alle variabili di essere dichiarate dopo che sono state definite o utilizzate. Usando una caratteristica chiamata hoisting, JavaScript sposta le dichiarazioni all’inizio dello script o della funzione corrente. Mentre l’hoisting può semplificare la programmazione permettendo ad un programmatore di correggere una mancata dichiarazione senza dover scorrere indietro il codice, dichiarare le variabili dopo l’utilizzo non è coerente con le best practice della programmazione.

L’hoisting può anche causare problemi inaspettati, principalmente perché l’hoisting si applica solo alla dichiarazione. Se una variabile è dichiarata e inizializzata nella stessa dichiarazione, l’hoisting creerà una dichiarazione all’inizio del blocco e assegnerà alla variabile un valore non definito. Così, qualsiasi utilizzo della variabile nel blocco prima dell’effettiva dichiarazione assumerà che la variabile sia indefinita piuttosto che avere il valore di inizializzazione.

Usiamo l’esempio precedente per rivedere il comportamento di hoisting:

var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1

console.log(variable_1 + " " + variable_2); //

var variable_2 = "2021" // declare and initialize a string variable called variable2

Mentre l’hoisting sposta la dichiarazione variabile_2 all’inizio del blocco, non sposta il valore assegnato. Questa logica funziona in modo approssimativamente equivalente alla seguente sintassi:

var variable_1 = "Thank goodness it's"; // declare and initialize a string variable called variable_1

var variable_2;

console.log(variable1 + " " + variable2); //

variable_2 = "2021" // assign string value to variable2

In entrambi i casi, il valore finale “Grazie al cielo è il 2021” non fa parte dell’output.

Vi consigliamo di seguire la best practice di dichiarare le variabili per evitare potenziali problemi e creare un codice più pulito.

Oggetti

JavaScript si basa sul concetto di oggetti. Gli oggetti sono contenitori che possono racchiudere proprietà, metodi o entrambi.

Ecco un semplice esempio. Avete un oggetto chiamato “country”. Le sue proprietà includono il nome, il continente, la capitale e la popolazione. Potete creare questo oggetto in diversi modi con JavaScript.

In primo luogo, potete seguire l’approccio object literal o object initializer:

var country = {

    name:"France",

    continent:"Europe",

    capital:"Paris",

    population:62250000;

}

Potete anche istanziare un oggetto e poi assegnare le sue proprietà:

var country = new Object();

country.name = "France";

country.continent = "Europe";

country.capital = "Paris";

country.population = 62250000;

Notate che vi riferite alle proprietà di un oggetto usando la sintassi object.property.

Infine, potete creare oggetti usando le funzioni constructor:

function country(name, continent, capital, population) {

    country.name = name;

    country.continent = continent;

    country.capital = capital;

    country.population = population;

}

La creazione di un’istanza dell’oggetto verrebbe poi fatta da:

france = new country("France","Europe","Paris",62250000)

Le proprietà degli oggetti possono essere variabili o funzioni. Come vedremo più avanti, quando la proprietà di un oggetto è una funzione, si chiama metodo.

Oggetti contro classi

In breve, una classe è un modello di struttura generica per un oggetto. Le classi usano la forma del costruttore per descrivere gli oggetti.

class country {

    Constructor (name,continent,capital,population) {

        country.name = name;

        country.continent = continent;

        country.capital = capital;

        country.population = population;

    }

}

Proprio come gli oggetti, le classi possono avere dei metodi.

Lavorare con Costanti e Variabili

Come per altri linguaggi, JavaScript ha diversi tipi di operatori adoperati con variabili e funzioni, la maggior parte dei quali saranno immediatamente riconoscibili:

• Operatori di assegnazione (=, +=, -=, *=, /=, %=)
• Operatori di confronto (==, ===, !=, !==, >, >=, <, <=)
• Operatori logici e bitwise (vedi sotto)
• Operatori aritmetici (+, -, *, /, %, ++, --)
• Operatori speciali

Alcuni operatori sono meno familiari ai programmatori principianti, come gli operatori di confronto identici e non identici.

=== confronta se due operandi hanno lo stesso valore e tipo (cioè sono identici). !== confronta se due operandi non sono identici.

Considerate il seguente esempio:

var variable_1 = 5; // declare variable_1 and assign numeric value 5

var variable_2 = "5"; // declare variable_2 and assign string value "5"

console.log(variable_1 === variable_2);

console.log(variable_1 !== variable_2);

L’output per questo frammento di codice sarebbe:

FALSE
TRUE

È essenziale anche comprendere la differenza tra = (operatore di assegnazione) e == (operatore di confronto).

Mentre = imposta il valore di una variabile, == controlla se due operandi hanno lo stesso valore, e anche se una variabile ha un dato valore. Non dovreste utilizzare l’operatore = in dichiarazioni condizionali (come le dichiarazioni IF) per verificare l’equivalenza.

Operatori Bitwise e Logici

JavaScript supporta le operazioni AND (& ), OR (|), NOT (~) e XOR (^). In JavaScript, questi sono conosciuti come operatori bitwise. Le operazioni bitwise convertono gli operandi in rappresentazioni binarie a 32 bit prima di operare (ad esempio, 20 diventa 10100). Queste operazioni sono chiamate bitwise perché confrontano gli operandi convertiti bit per bit, quindi restituiscono un risultato binario a 32 bit convertito in un intero.

Esempio:

var variable_1 = 20;

var variable_2 = 50;

console.log(variable_1 | variable_2) // display the result of variable_1 OR variable_2

Converte gli operandi in binario:

20 = 010100

50 = 110010

Un’operazione OR restituisce vero (1) quando uno dei due bit è 1, quindi il valore di confronto visualizzato è 110110 o 53. In JavaScript, il termine operatore logico si riferisce alle operazioni i cui operandi hanno solo i valori booleani 0 o 1. Gli operatori logici JavaScript sono && (AND logico), || (OR logico), e ! (NOT logico).

var variable_1;

var variable_2;

variable _1 = (6 > 5); // sets variable_1 to true or 1

variable_2 = (7 <= 6); // sets variable_2 to false or 0

Console.log(variable_1 && variable_2); // displays 0

Funzioni e Metodi

Pensate alle funzioni come ai cavalli di battaglia di JavaScript. Sono blocchi di codice che eseguono compiti specifici. Se avete familiarità con procedure e subroutine in altri linguaggi di programmazione, riconoscerete immediatamente le funzioni.

Le funzioni sono definite utilizzando la seguente sintassi:

function function_name(parameter list) {

    // tasks to be performed

}

Definire le funzioni è solo il primo passo; in seguito dovrete invocare le funzioni utilizzando () nel codice:

$()

La funzione $() è l’abbreviazione del metodo getElementByID, che, come notato sopra, restituisce l’ID di uno specifico elemento del DOM HTML. È spesso utilizzato per manipolare elementi in un documento. $() permette una codifica JavaScript più breve ed efficiente.

Metodo tradizionale:

document.getElementByID("element_id")

$() method:

$("element_id")

Funzione vs Metodo

Le funzioni eseguono dei compiti; i metodi sono proprietà degli oggetti che contengono la definizione funzionale. La sintassi per invocare i metodi è object.function(). Le funzioni sono autonome; i metodi sono associati agli oggetti.

Nell’esempio visto sopra, il metodo document.getElementByID("element_id") si riferisce a un oggetto (document) e alla proprietà associata per quell’oggetto (getElementbyID()).

Ci sono due tipi di metodi in JavaScript:

• Metodi di istanza
• Metodi statici

I metodi d’istanza possono accedere e manipolare le proprietà di un’istanza dell’oggetto. I metodi di istanza possono anche invocare un altro metodo di istanza o un metodo statico.

I metodi statici contengono la logica relativa a una classe invece di un’istanza della classe. Per creare un metodo statico, dovete usare la parola static prima della definizione della funzione. I metodi statici possono accedere solo a campi statici; non possono accedere a campi di istanza.

Promesse in JavaScript

Una promessa è un oggetto che produce un risultato in un momento futuro. Nella terminologia JavaScript, le promesse sono conosciute come codice di produzione e consumo.

Per essere completate, le funzioni possono richiedere una quantità di tempo non specificata e significativa. Il codice consumer attende i risultati del codice produttore asincrono prima di eseguire le sue funzioni. Le promesse definiscono la relazione tra il codice produttore e il codice consumer.

Le promesse hanno tre possibili stati: pending, fulfilled, o rejected. Nella definizione di una promessa, sono specificati due argomenti: resolve o reject. Pending è lo stato iniziale di una promessa e significa che la promessa non è stata né soddisfatta né rifiutata. Fulfilled implica che la promessa è tornata risolta. Rejected significa che la promessa è tornata indietro. Una promessa che non è più nello stato di pending è considerata risolta.

La sintassi di esempio per creare una promessa è:

var newPromise = new Promise(

    function(resolve, reject) {

        // condition to be tested

    }

)

Chiusure in JavaScript

Le chiusure sono una funzionalità di JavaScript che spesso lascia perplessi i programmatori, anche se non sono così complicate. Le chiusure JavaScript sono metodi per indirizzare il funzionamento delle funzioni annidate. In particolare, le chiusure permettono ad una funzione interna di accedere al contenuto di una funzione madre, oltre alle variabili globali ordinariamente accessibili. Notate che mentre la funzione interna ha accesso alle variabili della funzione esterna, il contrario non è vero.

Per capire le chiusure, dovete ricordare i fondamenti dello scopo. Le variabili all’interno di una funzione sono generalmente accessibili solo da quella funzione, e lo scopo viene creato per ogni chiamata, non genericamente per la funzione. Le chiusure fanno fronte al fatto che le variabili di solito scompaiono dopo il completamento di una funzione. Permettono anche alle variabili di rimanere accessibili dopo che una funzione è stata eseguita.

Considerate il seguente codice di esempio:

function outer_closure_function() {

    var outer_variable = "we want to keep the outer variable";

    var inner_closure_function = function() {

        inner_variable = "use closures because"

        console.log(inner_variable + " " + outer_variable);

    }

    return inner_closure_function;

}

var closure = outer_closure_function(); // returns a reference to inner_closure_function

closure(); // displays "use closures because we want to keep the outer variable"

Per capire come funziona questa chiusura, analizziamo il codice linea per linea. Prima si definisce la funzione esterna e poi una variabile associata. Successivamente, si definisce la funzione interna. È importante notare che non avete invocato la funzione interna – l’avete solo definita. Poi c’è una dichiarazione che restituisce la funzione interna. Ma ciò che restituisce non è il risultato della funzione interna, ma è la funzione stessa.

Così, quando si definisce la chiusura come outer_closure_function, non restituisce il valore effettivo della funzione interna. Restituisce invece un riferimento a inner_closure_function. Anche se la funzione esterna è stata completata dopo questa dichiarazione e outer_variable ufficialmente non esiste più. Ma è ancora conservata nel riferimento a inner_closure_function. Ora, quando si chiama la chiusura nell’ultima istruzione, viene visualizzato il risultato desiderato.

Per capire meglio le chiusure, dovreste creare e testare voi stessi alcuni esempi. Ci vuole tempo per farli bene. Inoltre, ripetuti aggiornamenti e test vi aiuteranno a crearvi una mentalità di sviluppo agile.

Ma mentre procedete, tenete sempre a mente i problemi di sicurezza – JavaScript può essere suscettibile di gravi problemi di sicurezza, come iniezioni SQL e LDAP, attacchi XSS, ecc.

Riepilogo

Se siete interessati a fare qualcosa di più con le vostre pagine web di quanto possiate ottenere da servizi out-of-the-box come Wix e Square, dovreste considerare la possibilità di imparare JavaScript. È un’introduzione semplice alla programmazione di siti web e applicazioni che può aiutarvi ad aggiungere caratteristiche altamente interattive al vostro sito senza investire troppo tempo nello studio.

JavaScript è anche un modo eccellente per iniziare a sviluppare le vostre abilità di codifica, se alla fine decidete di passare al livello successivo.