GeezerVison

JavaScript
Autore	Brendan Eich
Data di origine	4 dicembre 1995
Ultima versione	ECMAScript 2024 (giugno 2024) e ECMAScript 2025 (27 marzo 2024)
Utilizzo
Paradigmi	Programmazione a oggetti e a eventi
Tipizzazione	debole
Estensioni comuni	js e mjs
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/

JavaScript è un linguaggio di programmazione lato-client, orientato agli oggetti, che aggiunge funzioni alle pagine web.

Il codice JavaScript può essere scritto direttamente all’interno del tag <script> oppure importato da un file .js esterno, tramite l’attributo src del tag <script`. Il file può essere locale o provenire da una CDN.^[1].

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

Fu originariamente sviluppato da Brendan Eich della Netscape Communications.

Si completa con HTML e con CSS (questi ultimi non sono linguaggi di programmazione, ma sono linguaggi di formattazione delle pagine web visibili su internet).

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.

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.

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;

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.

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) );

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

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à@@

JavaScript viene sempre più utilizzato anche in ambito web per siti e applicazioni, tuttavia sotto l'aspetto SEO la resa non sempre è ottimale. In generale, pero', seguendo una serie di good practices è possibile farne uso anche in ottica motori di ricerca, che nel frattempo si sono evoluti e riescono a leggere ed interpretare, ad oggi, anche i contenuti scritti in questo linguaggio^[2]. JavaScript in passato non era eseguito dai bot dei motori di ricerca., quindi il testo generato dinamicamente non veniva indicizzato. Ultimamente Google ha fatto notevoli progressi nell'interpretazione di JavaScript in modo massivo (durante il crawling delle pagine), resta comunque necessario seguire alcuni accorgimenti per ottimizzare l'indicizzazione.^[3]

Dato che una funzione e un costruttore per l'interprete JavaScript sono la stessa cosa, è importante ricordarsi di esplicitare la parola chiave new se si sta istanziando un oggetto con un costruttore. Omettere new fa ottenere l'eventuale valore di ritorno della funzione.

In questo esempio stampo in console un oggetto correttamente creato col costruttore, e poi ciò che otterrei senza new:

// Definisco un costruttore
function GamePlayer(nome) {
	this.nome = nome;
	this.score = 0;

	// Per scopo didattico la funzione ha valore di ritorno
	return "Eh? Mi utilizzi come funzione?";
}

console.log( new GamePlayer('Mario Rossi') );
console.log(     GamePlayer('Mario Rossi') );

Output: Object { nome: "Mario Rossi", score: 0 }
Output: "Eh? Mi utilizzi come funzione?"

1. ↑ CDN, Content Delivery Network
2. ↑ https://www.seoroma.com/news/luso-corretto-di-javascript-in-termini-di-seo.php
3. ↑ https://www.evemilano.com/2017/01/seo-angularjs/

• Lezioni di Linguaggi di programmazione web
• Risorse con il parametro avanzamento non compilato o errato

• Stub — argomento sconosciuto
• Sito web ufficiale letto da Wikidata