JavaScript

JavaScript
Autore	Brendan Eich
Data di origine	maggio 1996
Ultima versione	ECMAScript 2023 (giugno 2023) e ECMAScript 2025 (27 marzo 2024)
Utilizzo
Paradigmi	Programmazione a oggetti e a eventi
Tipizzazione	debole
Estensioni comuni	js
Influenzato da	Scheme, Self, Java, C, Python, Awk, HyperTalk
Ha influenzato	ActionScript, AtScript, CoffeeScript, Dart, JScript .NET, Objective-J, QML, TypeScript, Node.js, LiveScript
Implementazione di riferimento
Implementazione	KJS, Rhino, SpiderMonkey, V8, Presto, Chakra
Sito web	www.ecma-international.org/publications-and-standards/standards/ecma-262/

Premessa

JavaScript nasce come linguaggio di scripting lato-client orientato agli oggetti e agli eventi per aggiungere funzionalità alle pagine web. Occorre distinguerlo da falsi-simili come il Java che ha natura e scopi totalmente differenti, o da altre tecnologie come il NodeJS che usano JavaScript ma elevandolo a linguaggio lato-server. Di suo, Javascript può essere utilizzato per fornire interattività alle componenti HTML di una pagina, quindi ad esempio menù e form interattivi, ed è in genere già integrato nei temi dei più diffusi CMS, pronto all'uso. Per inserire codice JavaScript è sufficiente inserire il codice nel tag HTML <script>, importare un file '.js' nella pagina HTML, da una fonte locale o da CDN.

Questa lezione tratta perciò del linguaggio JavaScript interpretato lato-client, incluso in pagine HTML.

Introduzione

Fu originariamente sviluppato da Brendan Eich della Netscape Communications come linguaggio di scripting interpretato lato-client e debolmente orientato agli oggetti. Si contrappone all'HTML e al CSS che non sono linguaggi di programmazione ma bensì di formattazione.

Concetti base

Integrazione in una pagina HTML

I comandi JavaScript vengono interpretati dentro all'apposito tag <script>. È possibile utilizzarlo più volte sullo stesso documento inserendolo nell'<head> o nel <body> del documento HTML:

<!DOCTYPE HTML>
<html>
<head>
	<title>Esempi</title>
</head>
<body>
	<h1>Esempio 1</h1>
	<script>
		// Spazio per JavaScript
		var a = "Ciao";
		var b = ", Mondo!";
		console.log( a + b );
	</script>
</body>
</html>

È possibile richiamare anche uno script su un file esterno. Il file deve contenere solo codice JavaScript ed è bene che abbia estensione .js:

<script src="prova.js"></script>

Nota: I prossimi esempi di codice saranno implicitamente in un tag <script>, come nell'esempio sopra.

Console di debug

Molti browser-web moderni come Mozilla Firefox o Chromium includono una console di debug, utile per l'analisi del codice di una pagina web.

Ad esempio su Mozilla Firefox la console di debug si apre con il tasto F12 e permette di digitare direttamente comandi JavaScript, o vedere l'output di console.log() utilizzato nell'esempio precedente.

La console di debug mostra errori normalmente non visibili durante la semplice navigazione.

Commenti

I commenti non vengono considerati dall'interprete JavaScript. Così come per qualsiasi software è buona abitudine usare i commenti multi-riga all'inizio del file per riassumere cosa fa il codice, insieme al nome dell'autore e la licenza del proprio codice.

/*
 Codice che fa cose
 Autore: Mario Rossi
 Licenza: GNU GPL
*/

// Questa variabile serve, credo
var a = 4;

Variabili

JavaScript non è un linguaggio a tipizzazione forte: alle variabili non si specifica a priori il tipo e può cambiare nel corso del programma. Solitamente la prima istanziazione si effettua tramite var.

Le variabili sono case-sensitive.

var a = 'ciao';
console.log( a );

a = 1;
console.log( a );

a = true;
console.log( a );

a = [1, 2, 3, 4];
console.log( a );

Qualsiasi variabile istanziata in una pagina ha visibilità globale, al contrario qualsiasi variabile istanziata in una funzione ha visibilità locale.

Funzioni

I seguenti codici hanno il medesimo risultato:

Funzione classica:

var N = 2;

function square(n) {
	return n * n;
}

console.log( square(N) );

Funzione anonima:

var N = 2;

var square = function (n) {
	return n * n;
};

console.log( square(N) );

Funzione anonima auto-richiamata (avanzata):

var N = 2;

console.log( function (n) {
	return n * n;
}(N) );

Notazione a cammello

Solitamente le funzioni e le variabili JavaScript sono chiamate secondo la notazione a cammello:

function doSomethingIncredible(superVariable) {
	return ! superVariable;
}

var okWikiversity = doSomethingIncredible(false);

console.log( okWikiversity );

Output: true

Oggetti e prototipi

La programmazione orientata agli oggetti in JavaScript può risultare un po' caotica, questo perché il concetto di classe in JavaScript è sostituita dalla possibilità di creare oggetti manualmente o tramite "prototipi polimorfi".

Un oggetto creato manualmente:

var marioRossi = {
	name: 'Mario Rossi',
	score: 0,
	goal = function () {
		this.score++;
	}
};

marioRossi.goal();

console.log( marioRossi.score );

Output: 1

O ancora manualmente:

var marioRossi = {name: 'Mario Rossi', score: 0};

// Appendo un metodo
marioRossi.goal = function() {
	this.score++;
}

marioRossi.goal();

console.log( marioRossi.score );

Output: 1

Un oggetto creato tramite un prototipo:

// Questa funzione costruirà il mio oggetto
function GamePlayer(name) {
	this.name = name;
	this.score = 0;
}

// Istanzio un nuovo oggetto col costruttore
var marioRossi = new GamePlayer('Mario Rossi');

// Appendo un nuovo metodo al prototipo
GamePlayer.prototype.goal = function () {
	this.score++;
};

marioRossi.goal();

console.log( marioRossi.score );

Output: 1

Si può anche modificare uno dei prototipi predefiniti per appenderci metodi personalizzati:

// Appendo il metodo sandwich() nel prototipo String
String.prototype.sandwich = function (bread) {
	return bread + this + bread;
}

console.log( 'Wikiversità'.sandwich('@@') );

Output: @@Wikiversità@@