JavaScript

lezione JavaScript
	Tipo: lezione
	Materia: Linguaggi di programmazione web

JavaScript

Autore	Brendan Eich
Data di origine	maggio 1996
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/

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^[1].

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

Approfondimento

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]

New (approfondimento)

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 usi come funzione?";
}

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

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

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

[1] CDN, Content Delivery Network

[2] ttps://www.seoroma.com/news/luso-corretto-di-javascript-in-termini-di-seo.php

[3] ttps://www.evemilano.com/2017/01/seo-angularjs/

[1]

[2]

[3]