JavaScript

Da Wikiversità, l'apprendimento libero.
Jump to navigation Jump to search
lezione
JavaScript
Tipo di risorsa Tipo: lezione
Materia di appartenenza Materia: Linguaggi di programmazione web
JavaScript
Javascript icon.svg
Autore Brendan Eich
Data di origine 4 dicembre 1995
Ultima versione ECMAScript 2018 (giugno 2018)
Utilizzo
Paradigmi Programmazione a oggetti e a eventi
Tipizzazione debole
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 developer.mozilla.org/docs/Web/JavaScript

Premessa[modifica]

JavaScript nasce come linguaggio di scripting lato-client orientato agli oggetti e agli eventi per aggiungere qualche funzionalità alle pagine web. Occorre subito 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.

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

Introduzione[modifica]

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[modifica]

Integrazione in una pagina HTML[modifica]

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[modifica]

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[modifica]

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[modifica]

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[modifica]

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[modifica]

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[modifica]

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[modifica]

JavaScript viene sempre più utilizzato anche in ambito web per siti e applicazioni, tuttavia sotto l'aspetto SEO la resa non sempre è ottimale. 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.[1]

New (approfondimento)[modifica]

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?"

  1. https://www.evemilano.com/2017/01/seo-angularjs/