Sviluppato nel 1995 da Brendan Eich della Netscape Communications con il nome di Mocha e poi di LiveScript, è stato rinominato "JavaScript" e formalizzato con una sintassi più vicina a quella di Java di Sun Microsystems, per poi essere standardizzato nel ‘97 come ECMAScript.
Javascript appartiene alla categoria dei linguaggi di programmazione di alto livello, poiché utilizza parole chiave e sintassi che lo fanno somigliare ad una lingua naturale, nello specifico l'inglese.
Da non confondere con Java perché se quest’ultimo può essere utilizzato per realizzare programmi e app da installare sulla memoria del computer funzionanti anche offline, JavaScript viene utilizzato esclusivamente per realizzare siti web interattivi e multimediali.
-
1. Punti e virgola, commenti e maiuscole
Il codice JavaScript è composto da una sequenza di istruzioni interpretata ed eseguita dall'engine, ciascuna delimitata da un punto e virgola (;) che consente anche di scriverne diverse sulla stessa riga:
var x = 5; x = x + 1;
Occorre massima attenzione perché JavaScript è case sensitive, nel senso che fa distinzione tra maiuscole e minuscole nei nomi di istruzioni, variabili e costanti, senza però evidenziare alcun errore.
Per inserire commenti nel codice che non verranno presi in considerazione dall'interprete, si usa o il commento a singola riga (inline):
// Questo è un commento
var x = 5;
Oppure il commento multiriga (multiline):
/* Questo è un commento sulla prima riga
Questo è un commento sulla seconda riga */
var x = 5;
Gli spazi bianchi possono essere utilizzati per aumentare la leggibilità del codice, tranne che per gli spazi all'interno delle stringhe.
-
2. Stringhe, numeri e altri tipi di dati
JavaScript prevede cinque tipi di dati primitivi, numeri, stringhe, booleani, null e undefined, e un tipo di dato complesso, gli oggetti. Tutti gli altri elementi come array, espressioni regolari, funzioni, sono oggetti. Anche i tipi di dato "primitivi" hanno degli oggetti corrispondenti con relative proprietà e metodi.
Una stringa è una sequenza di caratteri delimitata da doppi o singoli apici. Il delimitatore finale deve essere uguale a quello iniziale.
"stringa numero uno"
'stringa numero due'
Per inserire caratteri speciali all'interno di una stringa si fa ricorso al carattere di escaping \ (backslash). Ad esempio, per inserire un ritorno a capo possiamo utilizzare la sequenza \n:
"Ieri pioveva.\nOggi c'è il sole."
JavaScript ha un unico tipo di dato numerico: non c'è distinzione formale tra intero e decimale. Per rappresentare un numero non intero serve il punto come separatore della parte decimale. Oltre alla notazione in base dieci, possiamo rappresentare i numeri in notazione ottale ed esadecimale.
Tra i valori numerici speciali: NaN (Not a Number), un valore numerico non definito; null, un valore numerico non valido; undefined, un valore che non esiste; booleano che prevede due soli valori: true (vero) e false (falso).
-
3. Variabili
Possiamo utilizzare le variabili per memorizzare valori o oggetti durante l'esecuzione degli script, identificandole con un nome.
var miaVariabile;
Abilitando lo strict mode all'inizio del codice ("use strict";) opzione introdotta nella versione 5 dello standard ECMAScript, possiamo ricevere una segnalazione di errore quando non dichiariamo le variabili così da prevenire eventuali futuri malfunzionamenti.
A partire dalla versione 6 dello standard viene introdotta la possibilità di dichiarare costanti tramite la parola chiave const:
const PIGRECO = 3.14;
Questo garantisce l'utilizzo in sola lettura del valore, evitando rischi di modifica durante l'esecuzione.
-
4. Espressioni e operatori
Un'espressione è una combinazione di valori, variabili ed operatori che rappresentano un nuovo valore. JavaScript prevede operatori unari, binari e ternari a seconda che possano combinare rispettivamente uno, due o tre valori.
Gli operatori aritmetici sono operatori binari corrispondenti ai classici operatori matematici e prevedono anche tre operatori unari. La negazione (-) consente di ottenere un valore negativo di un numero. Gli operatori di incremento (++) e decremento (--) sono applicabili soltanto a variabili e consentono di ottenere un valore aumentato o diminuito di uno.
Gli operatori relazionali sono utilizzati per il confronto tra valori (e stabilire una "relazione d'ordine"):
<minore
<= minore o uguale
>maggiore
>= maggiore o uguale
== uguale
!= diverso
=== strettamente uguale
!== strettamente diverso
Gli operatori logici consentono la combinazione di espressioni booleane:
&& and
|| or
! not
L'unico operatore ternario previsto da JavaScript è l'operatore condizionale che restituisce un valore in base ad una espressione booleana.
condizione ? valore1 : valore 2
Se condizione è vera viene restituito valore1, altrimenti valore2.
L’unico operatore su stringhe specifico è l'operatore di concatenazione che consente di creare una nuova stringa come risultato della concatenazione di due stringhe:
"piano" + "forte" // "pianoforte"
-
5. Array in JavaScript
Considerate come matrici matematiche a una o più dimensioni, gli array consentono di associare ad un unico nome di variabile (o identificatore) più valori, accessibili tramite un indice numerico che parte da zero. In genere, i valori contenuti in un array hanno una qualche affinità (ad esempio l'elenco dei giorni della settimana). L'uso degli array evita di definire più variabili e semplifica lo svolgimento di operazioni cicliche su tutti i valori.
Un esempio di array basato sulla rappresentazione letterale:
var giorniDellaSettimana = [
"lunedì",
"martedì",
"mercoledì",
"giovedì",
"venerdì",
"sabato”,
"domenica"];
L’impiego di array si sposa bene con quello degli oggetti, in cui con parentesi graffe si possono definire una serie di proprietà con uno specifico valore etichettate con un nome.
Studente1 = {"nome":"Michele",
"cognome":"Rossi",
"citta":"Roma"
}
-
6. Metodi e proprietà
Di qualsiasi tipo di oggetti sia composto un array possiamo sfruttare su di esso alcuni metodi e proprietà. La più utilizzata è length che indica il numero di elementi in esso contenuti.
Utilizzando l’array:
nomi = ["Michele", "Sergio", "Simona", "Eva", "Giorgia", "Melania", "Marco"]
connomi.length viene restituito 7.
Per aggiungere elementi in coda all’array possiamo invocare nomi.push("Alessandro"):
["Michele", "Sergio", "Simona", "Eva", "Giorgia", "Melania", "Marco", “Alessandro”]
e la lunghezza, di conseguenza, sarà pari a 8.
Connomi.pop() svolgiamo due operazioni: ci facciamo restituire l’ultimo oggetto e lo rimuoviamo dall’array.
Altro aspetto è la possibilità di trasformare un array in una stringa: toString restituisce una stringa con tutti i nomi separati da virgola:
‘Michele,Sergio,Simona,Eva,Giorgia,Melania,Marco’
nomi.join(' -- ') permette di specificare il separatore con cui verranno accodati tutti gli oggetti tra loro:
‘Michele -- Sergio -- Simona -- Eva -- Giorgia -- Melania -- Marco’
-
7. Il ciclo forEach e il metodo replace
forEach è un metodo che consente di applicare una azione a ciascun elemento di un array percorrendolo in senso discendente (da 1 a n). Si tratta di un ciclo ottenuto associando una funzione di callback che deve essere eseguita ad ogni step.
var mesi = ["Gennaio", "Febbraio", "Marzo", "Aprile", "Maggio", "Giugno", "Luglio", "Agosto", "Settembre", "Ottobre", "Novembre", "Dicembre"];
mesi.forEach(function(item, index){
console.log('['+index+'] '+item);
});
Il metodo replace in JavaScript serve a sostituire tutte le occorrenze di una stringa, simultaneamente. Un esempio in cui sostituiamo JS, valorizzato nella variabile str, con la definizione estesa del nostro linguaggio JavaScript restituita da document.write:
var str = "Tutti gli utilizzi dei metodi JS.";
str = str.replace('JS','JavaScript');
document.write(str);
Questo metodo è utile anche per sostituire lettere maiuscole e minuscole e per gestirle facilmente attraverso poche righe di codice.
var str = "BRAVI Tutti. BRAVI Tutti.";
str = str.replace(/bravi/ig,'Bravi');
document.write(str);