ES6: l’avvento delle classi in Javascript (o quasi).

L’ultima incarnazione di Javascript (ES6*) ha portato diverse novità, tra cui l’introduzione delle Classi nella creazione degli oggetti, soppiantando la sintassi che definiva la “funzione costruttrice” che eravamo abituati ad usare. Ma come funzionano esattamente le “classi” in Javascript?

Diciamo subito le cose come stanno: più che di Classi sarebbe giusto chiamarle “Pseudo Classi” perché, ad essere sinceri, l’introduzione della keyword Class in Javascript è più un’operazione cosmetica che di sostanza; come vedremo, non si tratta infatti di Classi in senso stretto, come quelle che incontriamo in altri linguaggi di programmazione object-oriented (es. JAVA), Javascript rimane di fatto basato sui Prototipi (prototype-based), non sulle Classi (class-based), ma tant’è. Vediamo bene di cosa si tratta.

Prima di ES6*, volendo creare un oggetto, avremmo scritto una “Funzione Costruttrice” ed assegnato proprietà e metodi. Le prime, sotto forma di semplici coppie di variabili e valori; i secondi, definendo all’interno della Funzione Costruttrice altre funzioni, come fossero anch’esse proprietà abbinate a semplici variabili; oppure – meglio – ricorrendo al “Prototipo” dell’oggetto stesso. Meglio perché, così facendo, avremmo alleggerito la struttura di ogni singola istanza dell’oggetto, dal fardello di “portarsi dietro” i metodi che hanno in comune, delegando invece al Prototipo dell’oggetto tale compito, fungendo da riferimento univoco per tutte le istanze create su tale modello (attraverso il sistema di eredità prototipica).

// Prima di ES6 // utilizzando la Constructor Function

function Particle(x_, y_, w_, h_){
  this.x = x_;
  this.y = y_;
  this.w = w_;
  this.h = h_;
  /* // definendo il metodo all'interno dell'oggetto, come proprietà
  this.show = function(){
   rect(this.x, this.y, this.h, this.w);
  }
  */
}

/* Delegando al prototipo del mio oggetto la gestione della funzione Show una volta per tutte */

Particle.prototype.show = function(){
 rect(this.x, this.y, this.h, this.w);
 }

var p = new Particle(50, 50, 100, 50);
Se adesso, nella Console del mio Browser, digitassi “p“, potrei vedere la struttura del mio oggetto (provate per credere).

 

p
> Particle {x: 50, y: 50, w: 100, h: 50}
   h : 50
   w : 100
   x : 50
   y : 50
 > __proto__ :
     show : f()
     constructor : f Particle(x_, y_, w_, h_)
     __proto__ : Object
Con ES6 le cose sono leggermente cambiate, soprattutto a livello di sintassi: la funzione “speciale” deputata alla costruzione degli oggetti è stata mandata in pensione, in favore dell’introduzione della parola chiave “class“, ad indicare un blocco di codice che servirà da template per la creazione di un determinato tipo di oggetti,  seguita dal nome da noi scelto- con iniziale maiuscola -. All’interno di tale blocco è prevista la funzione “constructor“, deputata all’inizializzazione delle proprietà dell’oggetto, a seguire, i metodi che, dietro le quinte verranno automaticamente attribuiti al prototipo del nostro oggetto. Aggiorniamo l’esempio visto in precedenza con la nuova sintassi or ora descritta:

 

/* Costruiamo un oggetto "particella" utilizzando la sintassi introdotta da ES6 */

class Particle {
 constructor (x_, y_, w_, h_) { 
  this.x = x_;
  this.y = y_;
  this.w = w_;
  this.h = h_;
 }
 show() { 
  rect(this.x, this.y, this.h, this.w);
 }
 move() { 
  this.x = this.x + 1;
  this.y = this.y + 1;
 }
}

let p = new Particle(50, 50, 100, 50);
Ecco fatto, abbiamo appena creato un oggetto attraverso la nuova sintassi, incluso l’utilizzo della nuova keyword “let” che in ES6 ha sostituito la cara, vecchia, amata “var” (ma questa è un’altra storia). Tutto qua? Possiamo mettere a dormire il computer ed andarci a prendere una boccata d’aria? Nì. In verità, per completezza, ci sono alcune cose da aggiungere; quindi, se volete, fate pure una pausa, ma poi vi suggerisco di finire di leggere questo post.

 

Questa foto non ha assolutamente niente a che vedere con l’argomento di questo post. Interpretatela come una pausa pubblicitaria.

 

I fan di altri linguaggi di programmazione class-based, come Java e C++, potrebbero a questo punto esultare ma, come accennavo all’inizio di questo post, non è tutto oro quello che luccica. Ad esempio potremmo notare come Class Keyword in Javascript non supporta Membri Privati; è infatti sempre possibile accedere dall’esterno ai metodi definiti all’interno di una determinata classe e modificarli a piacimento (o piuttosto per errore). La ragione per cui tale supporto non è stato previsto nella recente release di ECMAScript è molto semplice: in realtà ES6 non ha introdotto delle vere e proprie Classi ma piuttosto una finzione sintattica, come possiamo facilmente dimostrare semplicemente interrogando la Console del Browser in merito al codice appena scritto:

 

typeof Particle 
"function"
Ebbene sì, se volete potete pure chiamarla Classe ma, quella da noi definita rimane, sotto al cofano di JavaScript pur sempre una funzione.

 

Particle.prototype.show 
ƒ (){
 rect(this.x, this.y, this.h, this.w);
 }
La sostanza non è cambiata rispetto a prima: rimane la struttura fondante basata sui Prototipi ed il principio di ereditarietà ad essi applicata.
Allora perché tutto questo sbattimento direte voi? Principalmente proprio per rendere JavaScript più appetibile a programmatori che vengono da altri linguaggi realmente class-based.

 

*ES6 – acronimo di ECMAScript 6 – è stata rilasciata a giugno 2015, e oggi vede un livello di implementazione da parte dei produttori dei Browser sufficientemente avanzato da spingere gli sviluppatori ad abbracciarne l’adozione nel proprio codice.

 

Piacere di conoscerti Node.Js

Il regno incontrastato di JavaScript è il browser; Node.Js è un framework che permette di espandere i suoi confini e scrivere codice javaScript che può essere eseguito al di fuori del browser; scrivere programmi che possono, ad esempio, essere eseguiti su di un server.

A cosa vi serve un programma che gira su di un server? Ad esempio potreste voler processare un’ingente quantità di dati, salvarne il risulti in un database, passarli all’utente che sta interagendo con l’interfaccia web sul vostro sito; permettere alla vostra applicazione di comunicare con l’interfaccia di programmazione di un’altra applicazione (API) o scriverne una tutta vostra… A dirla tutta Node.Js è nato per semplificare e velocizzare le operazioni di lettura/risposta (I/O in gergo, da Input/Output) del codice, da parte dell’elaboratore lato server, sfruttando a pieno l’asincronicità offerta da JavaScript. Ma, se avessi cominciato il paragrafo così, probabilmente molti di voi starebbero già a qualche click di distanza. Dovevo dirlo e l’ho detto. Ora, se volete addentrarvi oltre negli aspetti tecnici della questione, guardatevi questa fantastica presentazione per il lancio di Node.Js, del 2009, fatta direttamente dal suo creatore: Ryan Dahl, programmatore per antonomasia.
Poi continuiamo con roba pratica e torniamo a volare basso.

Prima di parlare di programmi che girano su un qualche server, seppellito in qualche bunker sotterraneo, partiamo dal terminale del vostro computer. Anzi, prima ancora, di aprire il terminale, visitate nodejs.org e scaricate la versione di Node.js per il vostro sistema (Mac OS nel mio caso).

Aprite il terminale (applicazioni/utility/terminale), questo è il giardino segreto in cui potete parlare al vostro computer nella maniera più diretta ed esplicita possibile; ovviamente dovete parlare la sua lingua ed il turpiloquio non è contemplato. Ecco alcuni dei comandi d’uso più comune:

$pwd // print working directory: vi dice dove vi trovate
$cd .... // change directory: per andare da qualche altra parte

$cd documents // ad es. vi porterà nella vostra cartella documenti
$pwd // Users/SetupDraw/documents

$ls // list files: elenca i file presenti nella directory corrente
$clear // pulisce lo schermo del terminale

Una volta che avete istallato Node, potete lanciarlo nel terminale scrivendo semplicemente ‘$node’. Noterete il simbolo del dollaro cambiare nel simbolo maggiore di ‘>’; è il segno che siete passati da comandi Unix a Javascript, potete adesso parlare con il vostro computer utilizzando questo linguaggio e fargli leggere file scritti in JavaScript (per uscire ‘Ctrl+C’ ed ancora ‘Ctrl+C’).

SetupDraw$ node
> var myMessage = "Hello Node!";
undefined
> myMessage
'Hello Node!'
> 
(To exit, press ^C again or type .exit) 
> 
MBP-of-SetupDraw:Programming SetupDraw$ node hello.js
this is the text message launched by console.log in hello.js file!
$

Adesso mettiamo il turbo e scopriamo Node Package Manager (NPM): un piccolo programma che avete istallato assieme con Node e che apre le porte ad una copiosa raccolta di utilissimi moduli JavaScript a vostra disposizione. Innanzi tutto però, prima di perdersi tra i moduli offerti da NPM, predisponiamo un file che ci permetta di gestire il nostro intero progetto nella maniera più ordinata possibile, una sorta di file di settaggio generale, chiamato convenzionalmente ‘package.json‘ (JSON è l’acronimo di Javascript Object Notation). Potete lasciare che Node predisponga tale file per voi, in modo automatico, semplicemente digitando il comando ‘npm init‘, dopo aver individuato la directory in cui volete salvare il vostro progetto.

MBP-of-SetupDraw:testfolder SetupDraw$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.

name: (testFolder) ...

A questo punto vi verrà richiesto di battezzare il vostro progetto e fornire tutta una serie di informazioni (su alcune delle quali potete al momento tranquillamente sorvolare).

name: (testFolder) testproject 
version: (1.0.0)
description: testing npm
entry point: (index.js) test.js
test command:
git repository:
keywords:
author:
license: (ISC)

About to write to /Users/SetupDraw/Documents/Programming/node/testFolder/package.json:
 {
"name": "testproject",
"version": "1.0.0", 
"description": "testing npm",
"main": "test.js",
"scripts": { "test": "echo \"Error: no test specified\" && exit 1" },
"author": "", "license": "ISC" 
}

Is this ok? (yes) yes

Basatevi sull’esempio di cui sopra, lasciate pure in bianco test command, git repository, keywords, author, license, tirate un bel sospiro e dite yes. Et voilà! Nella cartella del vostro progetto troverete ad attendervi il file package.json che Node ha appena generato per voi. Potete aprirlo con il vostro editor preferito, il mio attualmente è Atom, ma, in mancanza di altro, va bene anche il buon vecchio text editor. Potete infatti modificare in qualsiasi momento package.json secondo le vostre necessità, anche manualmente.

Adesso potete scaldarvi una tazza di tè e farvi un giro panoramico su npmjs.com, tra centinaia e centinaia di moduli creati da una copiosissima community di sviluppatori. Se ad esempio volete istallare un modulo che vi consenta di “parlare” con le API di Twitter e creare un Twitter Bot, potete istallare Twit, digitando il seguente comando:

$ npm install twit --save

Alcuni dei moduli disponibili presso npmjs.com sono molto popolari, ben rodati, costantemente aggiornati e corredati da una esaustiva documentazione, altri meno. Tutti sono pronti all’uso. Il giro di prova è a portata di click. Buon divertimento!

A proposito degli oggetti in Javascript

In JavaScript, tutto o quasi ruota intorno agli oggetti; capire come funzionano è perciò essenziale. Libri, corsi e tutorial, spesso liquidano la questione in modo sbrigativo ma la parte che affiora in superficie è solo la piccola punta di un grande e grosso iceberg. Questo post è solo una boa, che segnala il pericolo: attenzione, iceberg a dritta!

Javascript è un linguaggio di programmazione object-oriented, fondato cioè su oggetti che potremmo definire come strutture di dati, costruite sulla base di template che ne definiscono proprietà e funzionalità. Allo stesso modo in cui possiamo definire gli oggetti del mondo reale, come ad esempio la mia auto: una utilitaria, del 2015, di colore bianco, 5 porte, motore ibrido, marca Toyota (proprietà). Capace di accelerare, frenare, sterzare, trasportando oggetti e persone da un luogo all’altro (funzioni).

Javascript ci mette a disposizione tutta una serie di oggetti di uso comune, preconfezionati, accessoriati di tutto punto con funzionalità e proprietà utilizzabili e definibili a piacimento; come ad esempio gli Array.

Gli array sono oggetti pensati per creare liste di “cose”: dati primitivi come numeri, e/o dati complessi come altri oggetti.
In javascript un array è un contenitore molto generico e flessibile, che può essere riempito e svuotato a piacimento, con qualsiasi tipo di dato (diversamente da ciò che accade, ad esempio, in Java).

Tipicamente, per utilizzare un oggetto, ne definiamo/creiamo un’istanza attraverso un operatore speciale, l’operatore “new” che precede la particolare “funzione costruttrice” designata all’assemblaggio dell’ istanza dell’oggetto in questione, sulla base di una sorta di template predefinito.

var myArray = new Array(); // object constructor notation rarely used

A dire il vero, in pratica, nel 99% dei casi, vedrete gli array creati in quest’altro modo:

var myArray = []; // literal notation

La sostanza comunque non cambia. Adesso abbiamo il nostro bell’Array (a cui fare riferimento attraverso la variabile myArray), che possiamo popolare ad esempio con una lista di 10 numeri casuali.

populateArray(myArray, 10); 

var populateArray = function(whichArray, arraySpots) {
 for (var i = 0; i < arraySpots; i++) {
 whichArray[i] = Math.floor(Math.random() * 100);
 }
}

// avrei anche potuto popolare l'array quando l'ho creato es. myArray = [15, 12, 1, 56, 89, 99, ....];

!! Attenzione. Al contrario di ciò che avviene per i dati così detti “primitivi” come ad esempio numeri. La variabile che assegnamo all’oggetto (in questo caso myArray), non contiene il dato, fa riferimento ad esso. Si veda l’esempio seguente.

var myPrimitiveDataVariable = 2;
var myPrimitiveDataVariable2 = myPrimitiveDataVariable;
myPrimitiveDataVariable = 5;
//console.log(myPrimitiveDataVariable2); // ancora 2

//-----------------------

var myArrayObject = [2];
var myArrayObject2 = myArrayObject;
myArrayObject[0] = 4;
//console.log(myArrayObject2); // 4


Come già detto, gli oggetti hanno proprietà e metodi, ovvero variabili e funzioni. Alcune funzioni ritornano un valore, altre semplicemente svolgono dei compiti. Ad esempio posso accedere alla proprietà nativa “length“, di cui è “dotato di serie” ogni Array per conoscere da quanti elementi è composta la mia lista.

myArray = [];
console.log(myArray.length); // 0

Oppure posso invocare uno dei metodi nativi come “sort()“, ideato per riordinare l’array.

myArray = [15, 12, 1, 56, 89, 99];
console.log(myArray.sort()); // [1, 12, 15, 56, 89, 99]

Oggetti preconfezionati a parte, la vera potenza creativa di un linguaggio object-oriented come JavaScript si sprigiona attraverso la possibilità per il programmatore di creare i propri oggetti personalizzati.

In questo caso però non basta dichiarare l’oggetto attraverso l’operatore “new” a precedere la funzione costruttrice. Quest’ultima infatti non esiste ancora. È necessario definirla. Alternativamente, possiamo creare il nostro oggetto utilizzando la notazione letterale ma ad un costo: l’impossibilità di riutilizzare tale codice per creare altre istanze dell’oggetto. In pratica la notazione letterale si presta alla creazione di pezzi unici, che forse avranno un valore sul mercato dell’arte, ma che in programmazione non hanno un gran seguito. Partiamo comunque da qua: dicevamo all’inizio della mia auto… Costruiamo un oggetto in grado di rappresentarla.

var myCar = {};

Notate la somiglianza con la notazione letterale vista poco fa per gli array? Cambiano le parentesi, da quadre a graffe ma non solo quelle! Potreste magari pensare: “Ok, cominciamo a buttar roba dentro il mio oggetto! Dunque… myCar{0} = …. 
Assolutamente no. State definendo un oggetto con delle proprietà specifiche, non una lista ordinata di cose! Per quella andava benissimo l’oggetto preconfezionato Array. Per definire le proprietà della mia auto dovrò utilizzare una sintassi che mi permette di definire nome e valore di ciascuna proprietà (key-value pairs).

A tal proposito, una prima opzione prevede una sintassi che utilizza la parentesi quadra:

myCar["type"] = "furgoncino";

Questa sintassi è però quella che presumibilmente utilizzerete di meno; viene infatti usata in casi specifici ove diventa una scelta obbligatoria.
Tali casi includono: nomi di proprietà composti da più parole, nomi di proprietà numerici, nomi di proprietà costituiti da una variabile (in quest’ultimo caso vanno però omesse le virgolette).

L’altra sintassi, quella più diffusa, è la sintassi del punto, che vedete a seguire. Entrambe le sintassi possono non solo essere utilizzare per creare una proprietà, ma anche semplicemente per cambiar il valore di una proprietà già esistente, con lo stesso nome.

myCar.type = "utilitaria";

Omettendo la parte del codice in cui assegno un valore alla proprietà, tramite l’operatore “=”, ho invece semplicemente accesso al valore di tale proprietà

console.log(myCar.type); // utilitaria 
// oppure
console.log(myCar["type"]); // utilitaria

Continuando con l’assemblaggio della mia automobile:

myCar.year = 2015;
myCar.brand = "Toyota";
myCar.engine = "Hybrid";
//etc.

Invece di creare l’oggetto vuoto, e riempirlo successivamente, è anche possibile, e più comune, accorpare le due fasi. Nel caso dell’Array, abbiamo visto: semplicemente scrivendo ad esempio var myArray = [1998, 1999, 2000, 2001, 2002]; Nel caso del mio oggetto, avrei potuto definire direttamente myCar in questo modo:

var myCar = {
 type: "furgoncino",
 year: 2011,
 brand: "VolksWagen",
 engine: "Diesel"
};

Sarebbe stato bello avere l’uguale invece dei due punti? Invece no, è così: ci vogliono i due punti e per di più ogni proprietà deve essere separata da una virgola, tranne l’ultima proprietà che invece non ha bisogno di alcun segno di punteggiatura, esattamente come per gli elementi di un Array.

Ho appena creato un pezzo unico. Nel caso in cui avessi una seconda auto, dovrei ricominciare a scrivere da zero il codice per un nuovo oggetto:

var myCar2 = {
 type: "utilitaria",
 year: 2015,
 brand: "Toyota",
 engine: "Hybrid"
};

Fortunatamente in famiglia non abbiamo altre auto, e quindi non devo scrivere molte altre righe di codice ma immaginate di essere un concessionario con un centinaio di auto… Vi trovereste a dover scrivere migliaia di righe di codice, malgrado la struttura sia sempre la stessa.

Abbiamo un’altra strada: definire una funzione costruttrice (!*) che ci permetterà di create tutte le istanze dell’oggetto che vogliamo, semplicemente invocandola attraverso l’operatore “new” e passando gli argomenti necessari all’assemblaggio delle nostre auto.

!* Con l’adozione di ES6 la funzione costruttrice è stata “rivoluzionata” dall’introduzione delle classi, si veda a riguardo questo post.

Facciamo finta di averla già definita è chiamiamo la funzione che ci serve per costruire le 2 auto di cui sopra (per convenzione utilizzeremo per la funzione un nome dall’iniziale maiuscola: Car):

var myCar = new Car("furgoncino", 2011, "VolksWagen", "Diesel");
var myCar2 = new Car("utilitaria", 2015, "Toyota", "Hybrid");

Ed ecco la funzione che fa al caso nostro, un’unica funzione, per tutte le auto che vogliamo:

function Car(temptype, tempyear, tempbrand, tempengine) {
 this.type = temptype;
 this.year = tempyear;
 this.brand = tempbrand;
 this.engine = tempengine;
}

A cosa si riferisca la parola chiave “this” meriterebbe un post tutto per se o, anche meglio, un’intero libro! Diciamo qua semplicemente che “this” fa le veci del nome dell’oggetto.

A parte le specifiche proprietà di ciascuna auto, tutte le auto hanno generalmente le medesime funzionalità: accelerare, frenare, sterzare etc. Tecnicamente si parla di metodi di un oggetto, in pratica si tratta di funzioni che operano su di un oggetto. Anche in questo caso non c’è un solo modo di implementarle nel codice: possiamo inserirle direttamente come una proprietà qualsiasi come di seguito.

function Car(temptype, tempyear, tempbrand, tempengine) {
 this.type = temptype;
 this.year = tempyear;
 this.brand = tempbrand;
 this.engine = tempengine;
 this.accelerate = function() {
 // do something
 console.log("accceeeleratinnnng!!!");
 };
}

Oppure, e specialmente in casi come questo, in cui le medesime funzionalità appartengono a tutte le istanze del nostro oggetto, possiamo definire il metodo per l’accelerazione abbinandola alla proprietà superiore “prototype” scrivendo il seguente codice all’esterno della funzione costruttrice Car.

Car.prototype.accelerate = function() {
 // do something
 console.log("Wroooooommmmm");
}

In entrambi i casi la chiamata per accedere a tale metodo è la medesima:

myCar.accelerate();

In qualsiasi momento ci si può appoggiare al prototipo per aggiungere sia nuove proprietà che nuovi metodi a tutti gli oggetti basati su di esso. Contrariamente a quanto si potrebbe pensare, se eseguite il codice di cui sopra, senza rimuovere il duplicato del metodo all’interno del corpo della funzione costruttrice, noterete che quest’ultimo prevale comunque sempre sul suo omonimo definito successivamente attraverso prototype. E questa non è l’unica cosa a cui prestare attenzione quando si ha a che fare con i prototipi. Conoscere meglio i prototipi ed imparare a maneggiarli con cura è tuttavia argomento per un altro post.

Spero che questa breve panoramica sul complesso ed affascinante mondo degli oggetti in JavaScript possa risultarvi utile. Nel caso in cui voleste approfondire l’argomento, vi consiglio di leggere “You Don’t Know JS: this & Object Prototypes” di Kyle Simpson.

Le funzioni in JavaScript: cosa sono, a cosa servono, come si usano

Le funzioni costituiscono una delle colonne portanti di JavaScript. Permettono di riutilizzare parti di codice in modo flessibile, il che vuol dire meno codice da scrivere, il che vuol dire meno possibilità di errori, più tempo per portare il cane al parco.

Una funzione è un blocco di codice che possiamo riutilizzare più volte ed in modo flessibile; il codice scritto all’interno di una funzione può infatti operare su dati diversi, definiti e passati ad essa, quando tale funzione viene chiamata, producendo risultati diversi. Pensate ad una calcolatrice: al suo interno il codice “registra” i dati corrispondenti ai tasti digitati e compie i calcoli desiderati. Non dovete comprare una nuova calcolatrice ogni volta che volete fare un calcolo, basta tenere a portata di mano quella che avete!

my calculator

JavaScript ci mette a disposizione tutta una serie di funzioni preconfezionate che possiamo chiamare ed utilizzare a piacimento. Ci da inoltre la possibilità di definire nuove funzioni, secondo le nostre particolari esigenze. In JavaScript possiamo quindi, ad esempio, chiamare la funzione random(), predefinita per l’oggetto Math, che ci restituirà un numero casuale compreso tra 0 ed 1.

Math.random(); // 0.9082075429676537

Inoltre, possiamo costruire una funzione ad hoc, che risponda ad una nostra specifica esigenza e svolga un determinato compito. Ad esempio potremmo aver bisogno di una funzione che restituisca un numero compreso tra 0 e 100. Per prima cosa dovremo definire la nostra funzione attraverso la parola chiave function, dandogli un nome e definendo il codice che dovrà eseguire ogni volta che la chiameremo.

function random100() {
 var myResult = Math.random() * 100;
 return Math.round(myResult); 
}

var myNumber = random100();

console.log(myNumber + "%"); // 85%

Nell’esempio qua sopra, ogni volta che chiameremo la nostra funzione random100(), questa ci restituirà un numero intero compreso tra 0 e 100.

Possiamo spingerci oltre ed “equipaggiare” la nostra prossima funzione con dei parametri, dargli cioè la possibilità di accettare determinati argomenti, che verranno passati alla funzione quando la chiameremo. Poniamo il caso volere maggiore flessibilità, di aver bisogno di una funzione che restituisca un numero compreso tra 0 ed un numero intero a nostro piacimento, che decideremo volta per volta.

function randomN(n) {
 var myResult = Math.random() * n;
 return Math.round(myResult); 
}

var myNumber = randomN(20);

console.log(myNumber + "%"); // 15%

La funzione che abbiamo definito nell’esempio appena descritto, ci permette di passare un argomento alla funzione: un numero, che verrà utilizzato dal codice all’interno della funzione stessa nell’esecuzione del calcolo, restituendo un numero a caso compreso tra 0 ed il numero che abbiamo indicato. E se, invece di passare un numero, come argomento, passassimo per errore una stringa di testo? La funzione non potrebbe funzionare per come è stata concepita e restituirebbe NaN (Not a Number).

var myNumber = randomN("pippo");

console.log(myNumber + "%"); // NaN%

Fortunatamente possiamo fare in modo che la nostra funzione effettui un controllo sul tipo di argomento ricevuto e risponda di conseguenza.

function randomN(n) {
 var endResult;
 if(isNaN(n)){
 endResult = "'" + n + "'" + " non è un numero!";
 } else {
 var myResult = Math.random() * n;
 endResult = Math.round(myResult); 
 }
 return endResult
}

var myNumber = randomN("pippo");

console.log(myNumber); // 'pippo' non è un numero!

inside my calculator

C’è di più. Ogni volta che chiamate una funzione in JavaScript, gli argomenti della funzione vengono memorizzati in un particolare array chiamato arguments. Poniamo il caso che voglia creare una funzione che calcoli la somma di una serie di numeri, passati alla funzione come argomenti; la somma potrebbe essere tra 2 numeri, oppure 4, o 100. Voglio una funzione che sia flessibile, che funzioni a prescindere dal numero di argomenti che mi troverò a passarle.

function sum(){
 var somma = 0;
 for(var i = 0; i < arguments.length; i++){
   somma = somma + arguments[i];
 }
 return somma;
}

var myNumber = sum(546, 12, 4090);

console.log(myNumber); // 4648

Andiamo oltre; rendiamo la nostra funzione ancora più flessibile. Supponiamo ad esempio di poterla voler utilizzare anche nel caso in cui la serie di numeri da sommare sia definita dagli elementi di un array. Per fare ciò abbiamo bisogno di apportare alcuni accorgimenti al codice;

function sum(arr){
 if(arr instanceof Array){
   //console.log("it's an Array!");
   var somma = 0;
   for(var i = 0; i < arr.length; i++){
     somma += arr[i];
   } 
 }
 else {
   var somma = 0;
   for(var i = 0; i < arguments.length; i++){
     somma = somma + arguments[i];
   }
 }
 return somma;
}

var myArray = [10, 22, 2];

var myNumber = sum(myArray);

console.log(myNumber); // 34

Bene, ma forse non abbastanza… Per com’è scritta adesso, infatti, la funzione non è in grado di darci il risultato della somma, nel caso in cui riceva come argomenti sia una serie di numeri contenuti in un array, che semplici numeri singoli. Per far ciò dovremo implementare ulteriormente il nostro codice.

function sum(arr){
 var somma =0 
 for(var i = 0; i < arguments.length; i++){
   if (arguments[i] instanceof Array){
   var argArray = arguments[i];
   for(var a = 0; a < argArray.length; a++){
   somma += argArray[a];
  } 
 }
 else {
   somma += arguments[i]; 
  }
 } 
 return somma; 
}

var myArray = [10, 22, 2];
var myArray2 = [5, 10, 20];

var myNumber = sum(6, myArray, 10, myArray2);

console.log(myNumber); // 85

Come mostrato in quest’ultimo esempio, adesso posso passare alla funzione uno o più numeri ed anche uno o più array contenenti serie di numeri; grazie ad un nested loop (ciclo for annidato), la nostra funzione passerà in rassegna tutti gli elementi dell’arguments array ed effettuerà l’operazione corretta in base al tipo di dato, infine restituirà la somma totale.

Mmm, tutta questa fatica per delle semplici addizioni? Niente affatto. Fortunatamente con la stessa logica possiamo spingerci ben oltre, ad esempio scrivere funzioni per la costruzione di oggetti più o meno complessi. Avvalendoci di funzioni “speciali”, le cosiddette constructor functions: funzioni deputate alla costruzione di oggetti appunto.

Eventi: l’interazione con le pagine web attraverso Javascript

L’utente clicca su di un link, tocca il touch screen, digita un tasto, il browser carica un contenuto di una pagina, l’utente ridimensiona la finestra, compila un form… Ciascuno di questi eventi può essere usato per richiamare una funzione in Javascript, consentendo alla pagina web di “rispondere” ad un determinato evento.

Quando l’utente clicca su di un link Html, il browser risponde caricando l’url corrispondente. Qualcuno, tanto tempo fa, ha inventato ed implementato il collegamento ipertestuale, che risponde al click dell’utente. Allo stesso modo in cui, in Html, ad un testo viene associata la funzionalità di collegamento ad un determinato link, così, in Javascript, è possibile selezionare un determinato elemento e “sintonizzarlo” su di un dato evento, affinché ne registri l’avvenimento e risponda, processando il codice predisposto in una determinata funzione.

women telephone operators at work

Teoricamente esistono tre modi per “sintonizzare” un elemento su di un evento; in pratica solo uno dei tre ha un futuro nel Web. Saltiamo quindi a piè pari i primi due, dimentichiamoci della guerra dei browser del tempo che fu, e concentriamoci sui così detti “Event Listeners” (ascoltatori di eventi), l’approccio più moderno ed efficiente per gestire gli eventi. Morte ai vecchi browser! Morte a Internet Explorer 8 e compagni!

Da dove cominciamo? Dunque, c’è questa cosa, chiamata DOM (Document Object Model), che fornisce una struttura del documento Html, organizzata in “nodi”, rendendo così possibile agli sviluppatori, far riferimento a ciascun elemento della pagina Web, attraverso Javascript, sfruttando i marcatori e gli attributi Html, come ad esempio l’attributo “id”. Poniamo il caso di voler far riferimento ad un paragrafo, nel nostro codice html, a cui abbiamo dato un attributo “id” uguale a “pippo”.

<p id="pippo">sono un paragrafo di testo!</p>

Grazie all’id specifico con il quale abbiamo battezzato il nostro paragrafo, possiamo farvi riferimento, in Javascript, utilizzando la stringa di codice: document.getElementById(“pippo”) e cambiare ad esempio il testo al suo interno.

document.getElementById("pippo").innerHTML = "Ciao Mondo!";

Ma possiamo anche abbinare al nostro paragrafo un Event Listener, in grado di registrare l’avvenimento di un determinato evento e rispondere eseguendo il codice contenuto in una determinata funzione, semplicemente utilizzando la funzione addEventListener, specificando come argomenti: il tipo di evento su cui mettersi in ascolto, la funzione che vogliamo venga eseguita (senza parentesi però, giacché l’esecuzione non è immediata ma posticipata nel tempo!), l’ordine di propagazione dell’evento ai vari elementi html in cui il nostro paragrafo è nidificato (false: dall’interno verso l’esterno, oppure true: dall’esterno verso l’interno. Vedremo meglio questo ultimo aspetto in seguito*).

var pippoParagraph = document.getElementById("pippo");

pippoParagraph.addEventListener("click", changeContent, false);

Chiaramente dobbiamo predisporre la funzione che intendiamo eseguire al verificarsi dell’evento sul nostro elemento.

function changeContent() {
 document.getElementById("pippo").innerHTML = "Ciao Mondo!";
}

//o, più semplicemente, facendo riferimento alla parola chiave "this"

function changeContent() { 
 this.innerHTML = "Ciao Mondo!";
 }

Cliccando sul paragrafo il contenuto testuale cambierà secondo quando specificato nella funzione di esempio changeContent. È anche possibile dichiarare la nostra funzione in forma anonima, direttamente all’interno del codice in addEventListener, in questo modo:

var pippoParagraph = document.getElementById("pippo");

pippoParagraph.addEventListener("click", function(){this.innerHTML = "Ciao Mondo!"}, false);

Risparmiate qualche linea di codice ma la leggibilità è peggiore e tale funzione non è riutilizzabile. Ciò non di meno, scrivere una funzione anonima può risultare una soluzione preziosa, nel caso particolare, in cui abbiate l’esigenza di passare degli argomenti; in tal caso, infatti, non essendo previste parentesi dopo il nome di una funzione, l’unico modo per aggirare il problema è quello di racchiuderla al suo interno!

var pippoParagraph = document.getElementById("pippo");

pippoParagraph.addEventListener("click", function(){changeContent("Ciao Mondo!")}, false); 

function changeContent(arg) { 
  this.innerHTML = arg; // ERRORE! "this" non è sufficiente!
 };

Ops! In questo caso la funzione richiamata dall’interno, non può fare riferimento all’elemento Html a cui fa capo semplicemente con “this” (come abbiamo invece visto in precedenza); dovrà invece essere più specifica e riferirsi al paragrafo utilizzando l’aiuto di due altre parole chiave: “event” e “target”:  this.event.target.innerHTML, riscriviamo il codice in maniera corretta, di seguito.

var pippoParagraph = document.getElementById("pippo");

pippoParagraph.addEventListener("click", function(){changeContent("Ciao Mondo!"}, false); 

function changeContent(arg) { 
 this.event.target.innerHTML = arg; // FUNZIONA!
 };

Ogni volta che avviene un evento, Javascript crea per noi un “oggetto evento“, contenente tutta una serie di dati preziosi, e, dietro le quinte, lo passa alla funzione che ha atteso il suo verificarsi, come un parametro invisibile a cui è possibile far riferimento attraverso la parola chiave event. Tra le proprietà più utili dell’oggetto event abbiamo: target, che ci restituisce l’elemento sui cui l’evento si è verificato, e type, che ci restituisce informazioni sul tipo di evento. A dirla tutta in questo caso possiamo omettere this che risulta pleonastico, e riferirci direttamente all’evento.

var pippoParagraph = document.getElementById("pippo");

pippoParagraph.addEventListener("click", function(){changeContent("Ciao Mondo!"}, false); 

function changeContent(arg) { 
 event.target.innerHTML = arg; // CORRETTO!
 console.log(event.target + " " + event.type);
 };

Abbiamo appena creato una funzione, in grado di essere riutilizzata più e più volte, per mandare messaggi diversi a seconda di interazioni diverse con elementi diversi della nostra pagina web. Urrà!

Senza dover toccare nuovamente la funzione changeContent, posso ad esempio aggiungere altri EventListener ad altri elementi, e creare per ciascuno un messaggio diverso:

var pippoParagraph = document.getElementById("pippo");
var plutoParagraph = document.getElementById("pluto");
var paperinoParagraph = document.getElementById("paperino");

pippoParagraph.addEventListener("click", function(){changeContent("Sono Pippo!")}, false); 

plutoParagraph.addEventListener("click", function(){changeContent("Sono Pluto!")}, false);

paperinoParagraph.addEventListener("click", function(){changeContent("Sono Paperino!")}, false);

paperinoParagraph.addEventListener("mouseout", function(){changeContent("Ciao, ciao!")}, false);

function changeContent(arg) { 
 event.target.innerHTML = arg; // CORRETTO!
 console.log(event.target + " " + event.type);
 };

telegraph

*La struttura degli elementi della nostra pagina Html è nidificata, vale a dire che gli elementi sono contenuti in altri elementi, che a loro volta sono contenuti in altri elementi ancora. Quando l’utente clicca su di un pulsante, clicca anche sull’elemento che contiene il pulsante (ad esempio una lista), e su quello che contiene quest’ultimo (ad esempio un div), e così via, risalendo fino all’oggetto documento. Dato che gli Event Listeners possono essere abbinati a ciascuno di questi elementi, anche contemporaneamente, è importante poter determinare l’ordine con cui, le relative funzioni vengono processate: il cosiddetto flusso degli eventi, “Event Flow“. Di default l’evento fluisce dall’elemento più interno, verso quello più esterno, ma è anche possibile invertire tale flusso, specificando “true” come ultimo argomento della funzione addEventListener.

myElement.addEventListener('theEventToListenTo', theFunctionToCall, false);

Sfortunatamente, più event listener aggiungete ai vari elementi della vostra pagina Html, maggior memoria usate, fino a rischiare di pregiudicare le performance del vostro codice. Fortunatamente, grazie all’Event Flow, potete aggiungere un solo listener ad un oggetto contenitore, e delegare ad esso, utilizzando la proprietà Target dell’oggetto Event, il compito di determinare su quale elemento, nidificato al suo interno, si sia verificato. Questa tecnica, chiamata “Event Delegation” ci consente anche aggiungere nuovi elementi “figli” all’interno di quello “genitore”, in corso d’opera, senza dover modificare il codice Javascript.

Immaginiamo, ad esempio, di avere una lista di elementi in un ipotetico menu, possiamo aggiungere un unico Event Listener all’elemento Html “ul“, e risalire a quale elemento “li” della lista l’utente abbia fatto click. Provate per credere!

<!DOCTYPE html>
<html>

<head>
 <title>JavaScript &amp; Event Delegation</title>
</head>

<body>
 <h2>Lista della spesa</h2>
 <ul id="shoppingList">
 <li>Coffee</li>
 <li>Tea</li>
 <li>Milk</li>
 </ul>
 <script>
  var el = document.getElementById('shoppingList');
  el.addEventListener("click", changeContent, false);

  function changeContent() {
    event.target.style.textDecoration = "line-through";
    console.log(event.target + " "  + event.type); 
  };
 </script>
</body>

</html>

Facendo click su qualsiasi elemento della lista, la scritta corrispondente apparirà barrata. Niente male, vero? 😉

Infine, è bene sapere che, oltre agli eventi appartenenti al Document Object Model (DOM), ce ne sono altri, specifici per il Browser Object Model (BOM), che fanno riferimento alla finestra (window), anziché al documento (document); eventi concernenti il caricamento, il ridimensionamento, le modalità di interazione touch con la finestra ed altro ancora, che non è però argomento per questo post.

Algoritmi Genetici: il fascino dell’ informatica evolutiva

Avete un problema da risolvere e state cercando la soluzione ma c’è un ma: ci sono tante, tantissime, troppe possibilità da vagliare e non vi basterebbe una vita intera per vagliarle tutte. State cercando il cosiddetto ago in un pagliaio.

Poniamo il caso che vogliate indovinare la parola che sto pensando in questo momento (spoiler alert: la parola che sto pensando è “processing”). Senza potervi avvalere di nessun altro indizio, probabilmente comincereste a chiedermi: “comincia con la lettera A?” No. “Comincia con la lettera B?” No. “lettera C?” Nope. “D? E? F? G? …” No, No, No, No … “P?” Yes! Bene, avanti: “Segue la lettera A?” No “lettera B? No. Insomma, ho reso l’idea? Che palle!

Fortunatamente oggi abbiamo a disposizione potenti calcolatori in grado di sobbarcarsi volumi di calcolo impressionanti in un una manciata di millisecondi, quindi il problema è risolto, giusto? Non proprio. Applicare la forza bruta appellandosi esclusivamente alla potenza di calcolo dei computer a nostra disposizione, può risultare comunque un processo molto, molto dispendioso sia in termini di risorse che di tempo.

Come sarebbe bello se un programma, un’applicazione, potesse evolvere il proprio calcolo attraverso algoritmi genetici che mettano in pratica strategie evoluzionistiche simili a quelle teorizzate da Charles Darwin, basate sul principio della selezione naturale ed evoluzione biologica. Bè, ciò non è solo bello ed affascinante, è anche possibile ed alla portata di chiunque voglia cimentarsi con qualche riga di codice.

Karl Sims – Evolved Virtual Creatures, Evolution Simulation, 1994

I tre principi della teoria Darwiniana che vogliamo applicare al nostro codice sono: ereditarietà, varietà e selezione. In parole semplici, affinchè avvenga una evoluzione naturale, è necessario che ci sia un passaggio di proprietà tra genitori e figli; è poi necessario che ci sia varietà nei dati passati di generazione in generazione (in caso contrario avremmo cloni perfetti). È infine necessario che intervenga un meccanismo di selezione per cui le caratteristiche di certi elementi, in un certo contesto, siano o meno preferibili rispetto a quelle di altri (un pinguino ha poche chance di sopravvivere nel deserto del Sahara. Viceversa, ha ottime probabilità di prosperare e riprodursi in Antartide).

Step 1:  Inizializzazione.  Creare una popolazione di N elementi, ciascuno con un proprio DNA, generato in modo casuale.
Charles Darwin
Charles_Darwin

Passando dai pinguini alla programmazione, immaginiamo un DNA elettronico costituito da variabili: valori memorizzati nelle proprietà di un oggetto. La struttura del nostro algoritmo genetico prevede un primo step di inizializzazione, in cui viene creata una popolazione di elementi in modo casuale; una popolazione contraddistinta da tratti genetici che presentino una certa varietà tra un elemento e l’altro. Questi valori, memorizzati nelle variabili che costituiscono il DNA elettronico di ciascun elemento della popolazione, rappresentano il genotipo.

Step 2: Valutazione. Impiegare un metodo che valuti l’idoneità di ciascun elemento a rimanere nel nostro sistema.

Il passo successivo prevede l’utilizzo di una funzione che valuti tutti gli elementi della nostra popolazione, attribuendo ad essi un punteggio basato su determinati criteri, chiamato in gergo “fitness score” (mentre alla funzione, generalmente, ci si riferisce come “fitness function”).

Step 3: Selezione. Determinare quali sono gli elementi migliori, i cui caratteri genetici meritano di essere trasmessi alla generazione successiva.

Adesso non ci resta che decidere e programmare il meccanismo di selezione attraverso cui determinati geni vengono passati alle generazioni successive. A riguardo ci sono vari metodi; uno di questi prevede un approccio probabilistico, una sorta di “ruota della fortuna”: facciamo la media di tutti i punteggi di ciascuno dei “candidati alla riproduzione”, dividendo il punteggio di ciascuno per il punteggio totale (dato dalla somma di tutti i punteggi), sulla base delle percentuali ottenute determiniamo le probabilità di ciascun elemento di riprodursi. In questo modo il patrimonio genetico degli elementi che hanno ricevuto un punteggio migliore avrà maggiori probabilità di essere selezionato e viceversa.

Step 4 : Riproduzione. Combinare il DNA dei genitori, prevedendo un piccolo tasso di mutazione. Ripetere il processo con la nuova generazione.

L’ultima fase è quella della riproduzione, in cui entra in gioco il principio darwiniano dell’ereditarietà, la fase in cui avviene il passaggio delle informazioni genetiche alla generazione successiva, attraverso due momenti fondamentali: scambio e mutazione (crossover e mutation). Anche in questo caso, ci sono vari metodi: potremmo decidere di optare per una riproduzione asessuata da un unico individuo generante, oppure contemplare una coppia di genitori, ma anche tre, quattro, cinque… Siamo noi a decidere le regole del nostro mondo fatto di linee di codice.

Decidiamo di optare per un meccanismo di riproduzione basato su una coppia di genitori. Una parte del DNA di uno dei genitori viene scambiato con una parte del DNA dell’altro genitore (crossover). Prima d’essere assemblato nel DNA del nuovo elemento, il patrimonio genetico dei genitori, dopo essere stato “mischiato”, può subire una piccola mutazione, che contribuisce ad introdurre maggiore varietà nel processo evolutivo. La varietà deve essere come il sale, nelle ricette di cucina: quanto basta. Troppa varietà renderà di fatto nullo il processo evoluzionistico scaturito dal meccanismo di selezione dei genitori, troppo poca varietà e rischieremo di non avere mai quel particolare gene in grado di determinare un salto evolutivo.

Poniamo che, come risultato di un’evoluzione avvenuta generazione dopo generazione, il DNA dei nostri genitori sia costituito rispettivamente dalle lettere P, R, O, C, E, D, U, M, U, T e dalle lettere F, U, Z, A, T, A, S, I, N, G. Il nostro DNA, grazie al processo di crossover, potrebbe quindi risultare: D, U, M, U, T, A, S, I, N, G  oppure  P, R, O, C, E, F, U, Z, A, T oppure P, R, O, C, E, A, S, I, N, G. E magari, l’intervento di una piccola mutazione genetica: il cambiamento di una singola lettera del DNA, in quest’ultimo caso, potrebbe generare come risultato: P, R, O, C, E, S, S, I, N, G; le cui lettere, guarda caso, formano proprio la parola che vi avevo chiesto di indovinare all’inizio di questo post: “processing”. Se non fosse intervenuta quella piccola mutazione che ha modificato una A in una S, forse, anche attendendo mille generazioni, non saremmo mai arrivati a questo risultato. Per arrivare al quale abbiamo dovuto ripetere il processo di valutazione, selezione e riproduzione più e più volte, dai capostipiti ai genitori di “processing”.

Quella che avete appena letto è ovviamente solo una breve e sommaria introduzione al tema degli algoritmi genetici, parte di un vasto filone di ricerca, in forte espansione, che va sotto il nome di “Evolutionary Computing” (Computazione evolutiva). Per chi volesse approfondire, divertendosi con Processing, tra i tanti libri in circolazione consiglio caldamente The Nature of Code di Daniel Shiffman che volendo è disponibile anche online (al momento solo in lingua inglese).

Non potevo però concludere il post senza includere almeno un piccolo esempio pratico in cui vedere all’opera un algoritmo genetico. Si tratta di un esempio piuttosto semplice, ispirato dal libro di Shiffman e scritto in Javascript. Un mondo popolato da triangoli rossi e bianchi: cacciatori e prede. Per sopravvivere, le prede devono nutrirsi di quadratini verdi e sfuggire ad i cacciatori, mentre quest’ultimi, notoriamente allergici ai quadratini verdi, se non vogliono morire di fame devono cacciare.

See the Pen Evolving Creatures by Setup Draw (@SetupDraw) on CodePen.

Premete il mouse per aggiungere nuove prede; la barra spaziatrice per aggiungere nuovi cacciatori.

Più a lungo le prede sopravvivono, più probabilità hanno di riprodursi. Più prede riescono a cacciare i cacciatori più predatori si aggiungeranno alla caccia. Ogni qual volta una preda “muore” lascia dietro di se un quadratino verde: cibo per i suoi simili.

Le opportinità d’impiegare degli algoritmi genetici vanno ben oltre la programmazione di poligoni assassini. La struttura tipo dell’algoritmo genetico appena descritta, è infatti adattabile e riutilizzabile per una serie infinita di progetti. Dovrete solo definire la vostra “fitness function“, vale a dire, definire il criterio con cui attribuire un punteggio ai vostri elementi, e decidere come implementare il genotipo (da cosa è composto il DNA) ed il fenotipo (come si esprime/manifesta il DNA) del vostro sistema.

Se siete a corto di idee, ecco una lista di progetti interessanti, basati su algoritmi genetici:

Piacere di conoscerti JQuery

JQuery è una file JavaScript: una libreria di funzioni con cui selezionare e manipolare agilmente gli elementi delle nostre pagine Html via CSS e gestire eventi.

Non c’è niente in JQuery che non possa esser fatto usando semplicemente codice JavaScript, ciò non di meno, questa libreria è estremamente popolare tra gli sviluppatori web per tre ragioni fondamentali:

  1. Semplifica notevolmente il modo di selezionare elementi del DOM (Document Object Model), vale a dire tutti gli elementi che compongono a livello strutturale un documento Html.
  2. Ci mette a disposizione decine e decine di funzioni preconfezionate che ci consentono di risparmiare righe su righe di codice.
  3. Offre un’ottima compatibilità cross-browser.

Detail of JavaScript and JQuery book

Cominciare ad utilizzare JQuery è semplice. Per prima cosa dobbiamo includere la libreria nella pagina Html, aggiungendo il seguente codice:

<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>

Questo breve script ci apre le porte ad una pletora di funzioni in grado di semplificarci notevolmente la vita (di sviluppatori web). Se, ad esempio, per selezionare elementi appartenenti ad una determinata classe CSS chiamata “miaClasse”, in JavaScript, avremmmo dovuto scrivere:

document.getElementsByClassName('miaClasse');

Grazie a JQuery possiamo ottenere lo stesso risultato semplicemente scrivendo:

$('.miaClasse');

Quella qua sopra non è altro che una funzione chiamata jQuery, scritta in modo fancy: anzichè scrivere “jQuery()”, per brevità e convenzione, viene usato il simbolo del dollaro “$”. Lo scopo di questa funzione è di creare un oggetto JQuery. L’unico parametro richiesto è il selettore CSS a cui volete far riferimento: una Classe, un ID, un Tag Html. Dovete semplicemente dire a JQuery dove puntare, ricordandovi di includere il punto, prima del nome di una classe, oppure il cancelletto, prima del nome che avete dato al vostro ID. Se volete, potete immagazzinare la funzione in una variabile che, per convenzione, gli sviluppatori nominano con il simbolo $ all’inizio del nome, in modo da rendere evidente che si tratta di una variabile che contiene un certo tipo di valore.

var $laMiaClasse = $('.miaClasse');
var $ilMioID = $('#mioID');
var $ilMioTagHtml = $('h1');

Prima di iniziare ad armeggiare con JQuery c’è però ancora un passo da fare: dobbiamo assicurarci che la nostra pagina Html sia pronta all’uso. Compito che lasciamo svolgere ad una funzione ad hoc che includeremo nel nostro codice JavaScript:

$(document).ready(laMiaFunzione);

Quando il documento è pronto (ie. quando tutto quello che dobbiamo caricare è stato caricato), JQuery richiama una funzione da me indicata, deputata alla gestione del codice che fa uso della libreria che dovrà quindi essere contenuto in questa funzione.

Bene. Adesso possiamo cominciare ad applicare agli elementi che vogliamo selezionare, tutti i metodi che JQuery ci mette a disposizione (e sono tanti, ma tanti tanti). Uno di questi è il metodo “hide“, che serve a nascondere un elemento. Per utilizzarlo basta abbinarlo all’elemento che abbiamo selezionato, tramite la cosiddetta “dot syntax” (sintassi del punto):

$('#mioID').hide(); // se utilizzate direttamente la funzione jQuery 
$ilMioID.hide(); // se avete usato una variabile

Dietro le quinte, JQuery ha aggiunto una proprietà CSS “display : none” all’elemento contraddistinto dall’identificativo “#mioID”.

Ponendo di avere una classe dedicata ai pulsanti del nostro sito, chiamata “buttonClass”, tramite JQuery protremmo abbinare ad ogni pulsante una funzione che risponda ad un evento da parte dell’utente, come il click del mouse, in questo modo:

$('.buttonClass').on('click, function() {
  console.log("un pulsante è stato cliccato!");
});

Sappiamo che un pulsante è stato cliccato, sarebbe anche bello poter sapere quale, in modo da poter programmare azioni diverse a seconda del pulsante. Ma come? Ecco che una delle parole chiave di JavaScript ci viene in soccoro: “this“, che ci permette di accedere all’elemento corrente. Possiamo ad esempio cambiare lo stato del pulsante su cui l’utente ha cliccato, utilizzando “toggleClass” un’altro dei metodi che JQuery ci mette a disposizione, scrivendo:

$('.buttonClass').on('click, function() {
  $(this).toggleClass('active');
});

A questo punto potremmo anche voler cambiare il contenuto testuale de paragrafo appena sotto il nostro pulsante. Niente di più facile, grazie al metodo “next” ed al metodo “text“.

$('.buttonClass').on('click, function() {
  $(this).toggleClass('active');
  $(this).next().text('il pulsante qua sopra è stato cliccato!');
});

E potremmo andare avanti all’infinito, utilizzando innumerevoli altri metodi della libreria per aggiungere animazioni, effetti, filtri, per cambiare immagine, forma e dimensione a qualsiasi elemento Html presente nelle pagine del nostro sito web, ma questa voleva essere solo una brevissima introduzione a JQuery su cui sono stati scritti interi libri ed a cui sono dedicati dettagliatissimi tutorial video su cui, chi vuole, può approfondire l’argomento. Personalmente, se può tornarvi comoda anche una guida di riferimento a JavaScript, vi suggerisco il sempre ottimo “JavaScript & JQuery“, celebre libro di Jon Duckett, recentemente tradotto in Italiano ed edito da Apogeo. Un bel malloppo di oltre 600 pagine che però si legge come un numero di Wired. Abbinabile al gemello, dedicato a Html e CSS ed intitolato “Html & CSS” per l’appunto.

 

Come creare un Child Theme in WordPress

Se avete appena istallato WordPress e state pensando di customizzare il tema scelto per il vostro sito web, una cosa è certa: non volete rischiare che le vostre modifiche vengano spazzate via al primo aggiornamento. È perciò buona pratica creare un Tema-Figlio (Child Theme) su cui metter mano a cuor leggero.

Tramite un client FTP (io uso Cyberduck), entrate entrate nel vostro spazio web e cercate la cartella dove risiede il vostro sito WordPress; all’interno della cartella “wp-content” trovate la cartella “themes”, individuate il tema che state correntemente usando per il vostro sito, create una cartella vuota con lo stesso identico nome, seguito da “-child” (es. twentysixteen-child).

Dentro la nuova cartella del Tema-Fglio create un file “style.css” ed un file “functions.php”. Questi due file sono i due componenti necessari al funzionamento del Tema-Figlio, tutto il resto verrà automaticamente attinto dal Tema-Genitore (Parent Theme).

Wordpress theme screenshot

Editate style.css inserendo alcune indicazioni di base riportate in questo testo di esempio:

/*
 Theme Name: Twenty Sixteen Child
 Theme URI: https://wordpress.org/themes/twentysixteen/
 Author: SetupDraw
 Author URI:
 Description: Twenty Sixteen Child
 Template: twentysixteen
 Version: 1.0.0
 */

/* =============== Theme customiziation starts here =============== */

Grazie a tali informazioni WordPress sarà in grado di riconoscere il votro tema come Child-Theme di un determinato Parent-Theme.  A tal fine è essenziale che alla voce “Template:” corrisponda il percorso in cui si trova la cartella del Tema-Genitore.

Adesso editate il file “function.php”. Copiate ed incollate il codice seguente nel vostro file:

<?php
 function theme_enqueue_styles() {
 $parent_style = 'parent=style';
 wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
 wp_enqueue_style('child=style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ));
 }
 add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
 ?>

Se volete sapere di più riguardo a cosa serva tale codice, in questo post su HTML.it trovate tutte le informazioni del caso ma, per il momento, potete soprassedere e tirar dritto.

Adesso, sotto “Aspetto” (Appearence) nel menu principale di WordPress, troverete, assieme al/ai tema/i istallati, il vostro Child-Theme che aspetta solo di essere attivato e personalizzato a piacimento. Fatto. Da questo mometo avete un Tema-Figlio su da customizzare liberamente. Buon lavoro! Nel caso in cui vogliate approfondire l’argomento, presso WordPress.org trovate la documentazione ufficiale.