La filosofia di Javascript

Javascript è un linguaggio di programmazione nato come linguaggio per il web, un linguaggio front-end che aveva come scopo quello di rendere dinamico un sito web.

La filosofia di Javascript

La filosofia di Javascript foto 2
La filosofia di Javascript foto 2

Si tratta di un linguaggio di scripting e ad interpretazione che funziona proprio perché il browser è fatto per poterlo interpretare.

Il linguaggio nasce da Brendan Eich della Netscape Communications.

All'inizio portava il nome di Mochan e successivamente di Livescript.

Oggi lo conosciamo come Javascript, ma questo mutamento è dovuto solo a motivi di marketing, perché il linguaggio, in realtà, non centra nulla con il linguaggio Java.

Questo processo è avvenuto a seguito della sua standardizzazione nel 1997 da parte della ECMA (da qui ECMAscript). Questo linguaggio, che inizialmente era solo un linguaggio orientato agli eventi con lo scopo di rendere dinamico un sito web (ad esempio avere dei menu a tendina o slider di immagini), adesso ha incominciato ad applicarsi un po’ ovunque, facendo in modo che qualsiasi programmatore non possa assolutamente farne a meno.

In breve, ma lo vedremo meglio lungo tutto l’articolo, oggi in Javascript

possiamo creare delle single page application che sono in grado di interrogare un database

(basta usare un framework come Angular),

possiamo lavorare back-end (basta usare un framework come Node.js),

possiamo creare applicazioni per lo smarthphone (basta usare un framework come React)

e possiamo persino creare intelligenza artificiale (usando certe librerie di Node.js come Brain.js).

Il concetto fondamentale che sta alla base del puro Javascript è il concetto di evento.

Javascript, sfruttando il D.O.M. (Document Object Model) come grafo ad albero della pagina html sul web e lavorando sui nodi (gli elementi html) del grafo, riesce a modificare dinamicamente gli elementi della pagina html.

Per capire questo dobbiamo prima comprendere come funziona html.

Html è il linguaggio standard per il web, inventato originariamente da Berners Lee.

Quando giriamo sul web con il nostro browser siamo sempre su delle pagine html o pagine con codice html. L’html è non un linguaggio di programmazione ma un linguaggio di markup, ossia un linguaggio di marcatura.

Con l’html, ad esempio, possiamo mettere in grassetto alcuni elementi, possiamo definire paragrafi, titoli, tabelle, liste ordinate e molto altro ancora.

Tutto ciò che vedete di statico e di prettamente testuale sul web normalmente è fatto in html.

In una pagina Html troviamo principalmente due parti:

head e body. Html, dunque, partecipa di un singolare dualismo cartesiano dove la testa è divisa dal corpo.

La res cogitans dell’html è l’insieme dei meta dati di una pagina. Normalmente nell'head mettiamo il meta-title, la meta descrizione, ma anche collegamenti ad altre pagine, per esempio i fogli di stile.

Tutti questi dati potrebbero sembrare irrilevanti perché tanto non compaiono nella pagina web. Tuttavia sono rilevanti almeno per il motore di ricerca che comunque legge questi dati e spesso sono scritti con la finalità di indicizzare una pagina nel web (ossia fare Seo).

Curiosamente i file di javascript spesso non sono inseriti nell'head. Questo perché javascript stesso potrebbe non funzionare, in quanto il browser leggerebbe il codice javascript molto prima di conoscere il codice html che è scritto nel body.

La filosofia di Javascript foto 6
La filosofia di Javascript foto 6

Potrebbe interessarti anche: Oggetti: che cosa insegna la programmazione alla filosofia.

Quindi spesso i collegamenti ai file javascript vengono inseriti alla fine del body.

La res extensa di una pagina web è invece il suo corpo, dunque il body. Nel body troviamo tutto il codice html che rappresenta ogni cosa che vediamo nella pagina web.

All'inizio nella storia del web, intendo dire nel web 2.0, come ha notato lo stesso Snowden, la sperimentazione nella creazione del siti web era molto più alta. Oggi, invece, i siti web, spesso per motivi di accessibilità (creare un sito che sia accessibile anche a disabili, ciechi, ecc.), sono diventati decisamente più standard.

La struttura di una pagina html nel web viene definita come layout.

Nel layout troviamo spesso le seguenti componenti partendo dall’alto: header, navbar, content, article, aside, footer.

L’header qualche volta sta sopra la navbar, ma altre volte è incorporato nella stessa navbar. Non sempre la navbar è orizzontale sopra il contenuto, potrebbe anche essere verticale a fianco.

Nell’header spesso troviamo il nome del sito e il logo, ma qualche volta il logo stesso è incorporato nella navbar.

La navbar è utilizzata normalmente per avere una barra di navigazione con almeno le pagine principali del nostro sito web.

L’article, invece, è dentro il content ed è un tag che contiene normalmente un articolo, dunque c’è ne possono essere più di uno.

L’aside non sempre è presente, perché non è sempre necessario e contiene spesso dei collegamenti ad altri link.

Il footer, invece, lo troviamo sempre in fondo al sito con le informazioni generali di contatti e altro ancora. In pratica esistono diverse varianti di layout, ma alla fine le componenti sono grosso mondo sempre le stesse.

Non mi interessa parlare di ogni singolo tag di html, quello che dovete sapere su html è semplicemente questo:

1) Esistono solo due tipi di tag: quelli che si aprono e si chiudono; quelli che non sono doppi e dunque si chiudono da sé. Nella prima categoria rientrano tag come il paragrafo, l’heading title o la lista. Che si scrivono rispettivamente: <p></p>, <h1></h1>, <ul></ul>. Nella seconda rientrano le immagini o gli input. Che si scrivono rispettivamente: <img />, <input />.

2) Ogni tag può contenere degli attributi che, per esempio, possono assegnare dello stile al tag oppure definire il tipo del tag. Per lo stile troviamo tag come width=””, mentre per il tipo troviamo type=””. Ovviamente il risultato cambia a seconda del valore che noi assegniamo agli attributi.

Se costruissimo un sito web in puro html avremmo solamente un sito fatto di componenti testuali. Per aggiungere dello stile, per esempio per lavorare sulle dimensioni, il colore, lo sfondo e la posizione, bisogna usare un altro linguaggio noto come Css (Cascade style sheet).

Css prende tutti i tag html usando i nomi dei tag, delle classi o degli id e gli assegna un particolare stile come un certo tipo specifico di colore, di sfondo, di posizione o di grandezza.

Sono importanti questi concetti di classe e id perché sono usati tantissimo anche in Javascript. In breve posso dirvi che se in Css assegnate dello stile ad un tag di un certo tipo, allora quello stile verrà assegnato a tutti i tag di quel tipo.

Come in questo esempio:

p{
color: green;
}

Se invece si intende assegnare quello stile solo ad un particolare tag della pagina, allora conviene usare le classi o gli id. Per usare le classi o gli id bisogna assegnare degli attributi di classe o di id ai tag.

Un attributo classe si sceglie spesso perché ci sono più elementi sul quale si intende lavorare, dunque si usa quella classe più volte. L’id, invece, per definizione è unico.

In Css una classe porta il punto prima del nome, mentre un id porta un # prima del nome.

Classe:
.nav{
background-color: #333;
}
Id:
#testo{
font-family: Helvetica;
}

Una cosa interessante è il fatto che Css lavora sull'aspetto delle cose.

Questo significa che possiamo letteralmente prendere un elemento html e dargli l’aspetto di un altro. Per esempio possiamo prendere una serie di list item e dargli l’aspetto dei bottoni, pur non essendo dei tag button.

Css, dunque, filosoficamente parlando, agisce sul fenomeno delle cose.

Certo l’intero front-end rappresenta per l’utente il campo del visibile.

Tuttavia mentre html definisce la natura degli elementi, Css si concentra sempre sugli aspetti fenomenici di quegli elementi. Con Css quindi possiamo dare un aspetto diverso alle cose rispetto alla loro natura.

Ricordo che Immanuel Kant nella Critica del giudizio sosteneva che l’arte è la figura, mentre il colore è soltanto un’attrattiva.

Tuttavia Css si occupa sia della figura che del colore.

Si occupa della figura perché lavora sul margine, il padding, la grandezza, l’altezza, ecc.

Si occupa del colore perché lavora sul colore degli elementi e il colore dello sfondo.

Molte delle cose che si fanno in Javascript oggi si possono anche parzialmente fare in Css o in uno dei suoi framework come Bootstrap. Il punto, però, è che Bootstrap non potrebbe mai funzionare senza Javascript e JQuery.

Prima di passare a parlare di eventi in Javascript, penso sia necessario spendere due parole sulle basi di questo linguaggio.

Javascript è un linguaggio che può essere inteso come procedurale, ma in realtà ha anche una versione orientata agli oggetti particolare, molto diversa dai classici linguaggi orientati agli oggetti come Java. La programmazione procedurale si basa sui principi della programmazione strutturata.

I principi della programmazione strutturata sono principalmente tre: sequenza, selezione e iterazione.

1) Sequenza:

Significa che le istruzioni del codice sono lette ed eseguite una alla volta partendo dall'alto verso il basso.

Sotto questo principio possiamo trovare cose come le variabili, gli array, tutte le operazioni di input e output.

In Javascript per stampare qualche messaggio abbiamo tre opzioni:

a) Stampare il messaggio nella console scrivendo:

console.log(‘Messaggio’);

b) Stampare il messaggio nella pagina:

document.writeln(‘Messaggio’);

c) Mandare un messaggio pop up:

window.alert(‘Messaggio’);

Se invece voglio che l’utente invii degli input posso usare il classico tag input di html, ma posso anche usare questo elemento che è di Javascript:

window.prompt(‘Scrivi qui il tuo messaggio’, ‘Messaggio’);

Dopo di che in ogni linguaggio che si rispetti ci sono delle variabili e delle costanti. Le variabili sono semplicemente dei contenitori di dati.

Javascript non è un linguaggio tipizzato come Java, dunque non dovete dichiarare il tipo quando definite una variabile. Semplicemente la variabile è di tipo variabile ossia: var. Inoltre i tipi, che pure in Javascript esistono, non sono così tanti e, per esempio, nei numeri troviamo solo il tipo “number”. Una variabile è tale perché può mutare il suo valore lungo il codice, mentre la costante, invece, rimane sempre la stessa. Nello scrivere una variabile prima la definiamo, mettendo il nome della variabile e poi la inizializziamo assegnandoli un valore.

Una variabile in Javascript:

var nome = ‘Daniele’;

Una costante in Javascript:

const sesso = ‘F’;

Se vogliamo lavorare con gruppi di dati, invece di dover scrivere moltissime variabili, quel che ci conviene fare è usare un Array.

L’Array è un vettore di elementi.

In Javascript, proprio perché non è un linguaggio tipizzato, un vettore può contenere elementi di tipo differente. Per esempio può contenere dei numeri, delle stringhe e dei booleani nello stesso Array.

Un Array ha un indice di elementi che designa il numero di elementi che esso contiene, ma gli elementi si cominciano a contare dallo zero.

Un array in Javascript:

var studenti = new Array(‘Matteo’, ‘Simone’, ‘Francesco’);

Da dato questo array è vero che:

studenti[0] = ‘Matteo’

2) I selettori

Si parla di selettori quando si ha a che fare con delle parti di codice che vengono eseguite solo se certe condizioni risultano vere.

Il condizionale è lo stesso della logica filosofica, come quando dico ‘Se piove, allora il terreno sarà umido’. La struttura è grosso modo la stessa con tanto di antecedente e conseguente.

I selettori veri e propri che troviamo in Javascript principalmente sono gli if, lo switch e l’operatore ternario.

Gli if sono come i condizionali e possono essere a una via o a due vie. Un condizionale a una via ha delle condizioni che solo quando risultano vere eseguirà un codice specifico.

Condizionale if ad una via:

if(score > 233){
document.writeln(‘Hai vinto’);
}

Nel caso del condizionale a due vie, quando la condizione è falsa viene eseguita un’altra istruzione alternativa.

if(score > 233){
document.writeln(‘Hai vinto’);
} else{
document.writeln(‘Hai perso’);
}

Lo switch è un selettore con una condizione e una serie di casi, ma funziona solo con la comparazione di uguaglianza. In questo senso lo switch compara il valore della condizione con tutti quelli dei casi e se ne trova uno che combacia esegue il codice sottostante per poi uscire con il break, altrimenti esegue il valore impostato di default.

Esempio di switch:

switch(dice){

case 1:
res = ‘Stai fermo un turno’;
break;

case 2:
res = ‘Vai indietro di due’;
break;

case 3:
res = ‘Vai avanti di uno’;
break;

case 4:
res = ‘più 10 score’;
break;

case 5:
res = ‘Vai avanti di due’;
break;

case 6:
res = ‘Hai trovato un tesoro’;
break;
default:
res = ‘Nessun risultato’;
}

3) Iterazione

L’iterazione consiste in pezzi di codice che vengono eseguiti ripetutamente, a patto che certe condizioni continuino a risultare vere.

Sono importanti per le iterazioni principalmente tre componenti:

una variabile per il contatore;

una condizione per il contatore stesso;

un incremento o un decremento del contatore.

Di solito il contatore viene chiamato count o i (da index).

I loop dal punto di vista filosofico mi affascinano particolarmente per la loro natura. Io, personalmente, penso che i loop siano come dei condizionali nei quali la condizione è soggetta al tempo e dunque in un tempo potenzialmente infinito, cambiando lo stato di una variabile nel tempo, ad un certo punto la condizione risulta falsa e il loop si ferma.

In Javascript troviamo principalmente tre tipi di iteratori o loop: while, do while, for.

Nel quale troviamo tra parentesi solo le condizioni da rispettare che sono chieste all’inizio.

Esempio:

var count = 0;
while(count < 10){
document.writeln(count);
count++;
}

Nel do-while prima si esegue il codice e poi sono verificare le condizioni. Questo significa che, anche se le condizioni fossero false, il codice verrebbe eseguito almeno una volta.

Esempio:

var count = 10;
do{
document.writeln(count);
count--;
} while(count > 0);

Nel for abbiamo nelle parentesi tre componenti dati dalla dichiarazione della variabile, le condizioni, il suo decremento o incremento.

Esempio:

for(var i = 0; i < 10; i++){
document.writeln(i);
}

È importante che le condizioni ad un certo punto siano false perché altrimenti il loop diventerebbe letteralmente infinito. Con il loop possiamo anche ciclare un array, è sufficiente usare il valore della variabile i come indice degli elementi dell’array.

Veniamo ora, invece, al concetto di evento in Javascript.

Un evento è una iterazione di un utente con un elemento dell’interfaccia.

Nel caso di pagine Html abbiamo a che fare con delle vere e proprie iterazioni degli utenti con degli elementi Html. Queste iterazioni producono modifiche dinamiche della pagina Html. Dunque se Html definisce quelli che sono gli elementi di una pagina web, Css assegna l’aspetto a questi elementi, Javascript, invece, definisce la dinamicità del sito.

Esempi di eventi sono il cliccare su un bottone, lo scroll sulla barra laterale, il caricare la pagina, ecc.

In filosofia un evento è definito come un incorporeo, come qualcosa di virtuale che eccede l’attuale. L’evento, tuttavia, non viene mai fatto coincidere con l’azione.

L’evento è sempre un doppio di uno stato di cose che esiste in quanto virtualmente eccede su quello stato di cose. Un esempio di Gilles Deleuze, filosofo degli eventi, è la ferita che da un lato si manifesta come taglio attuale del corpo, ma dall'altro si manifesta come evento.

L’evento è l’eccedenza del virtuale sul reale. L’evento è possibile filosoficamente proprio perché un oggetto ha dei “poteri”, dunque delle capacità virtuali che si possono attualizzare all'occasione. L’evento, tuttavia, non si ridurrà mai all'attualizzazione di qualcosa.

Nel caso di Javascript non abbiamo a che fare con veri e propri oggetti.

O meglio, in Javascript ci sono gli oggetti ma non riguardano gli eventi.

In realtà qui, volendo, potremmo dire che i veri oggetti sono definiti, come corpi dell’Html.

Tutti gli elementi che stanno dentro il tag body sono degli oggetti con degli attributi come width, src, alt, ecc… Il corpo della pagina è a sua volta composto da altri corpi, definiti come elementi html con attributi propri.

Noi, però, possiamo applicare degli eventi a questi corpi. Per esempio ci sono degli attributi come onclick, onmouseover, onchange, ecc… Questi attributi permettono all'elemento html di invocare delle funzioni di Javascript che spesso stanno appositamente su un altro file e in questo modo eseguire dei codici Javascript contenuti nella funzione che viene invocata solo quando l’evento accade per rendere il sito dinamico.

Spesso si dice che l’evento è l’azione compiuta dall'utente, per esempio il cliccare, lo scrollare, il caricare la pagina, ecc. Tuttavia, da un punto di vista filosofico, questo può essere problematico. Per esempio potremmo chiederci se l’evento sia soltanto l’azione dell’utente o se sia anche l’effetto di questa azione.

Problematico, dal punto di vista filosofico, è il concetto di evento perché non si capisce mai quali e quanti sono gli eventi. Se accendo la luce, vedo un ladro in casa, il ladro corre via. Questi eventi, se accadono nello stesso tempo, non sarebbero forse un evento solo?

In Javascript accade, ad esempio, questo:

un utente compila un form, inserendo tutti i dati necessari;

successivamente clicca sul bottone e compare in alto un messaggio che gli indica che tutto è andato bene e che i dati erano corretti, ora è iscritto alla app.

Il messaggio pop up si ottiene in Javascript con l’alert().

Questo evento del cliccare forma una cosa sola con l’evento dell’alert oppure no? Ecco un bel problema filosofico.

Penso che in Javascript non vadano considerati come parte dell’evento le sole azioni dell’utente, ma anche le modifiche dinamiche.

La riduzione che si applica di solito dipende soprattutto dal fatto che si vuole ridurre l’evento ad un processo causale, nel quale si vede il corpo del bottone essere premuto e l’alert come messaggio. In realtà l’evento è un incorporeo che non viene mai ridotto a nessuno dei due corpi e probabilmente anche il cliccare è solo una parte di questo incorporeo, dal momento che l’evento continua dopo il click con una serie di processi interni che producono l’effetto dell’evento.

Vediamo ora nel dettaglio come funziona l’evento.

Perché esistono una serie di strumenti, spesso usati per gli eventi, in Javascript che permettono di prendere un elemento sfruttando la sua classe oppure il suo identificativo.

Per creare un evento bisogna usare richiamare l’evento nell'elemento sul quale volete applicare l’evento stesso usando un attributo.

Per esempio attributi come onclick=””, onchange=””, onmouseover=””. Questo significa che il potere dell’evento o la capacità di azionare l’evento viene assegnato all’oggetto/ corpo di html come sua proprietà.

Con questo attributo viene invocata una funzione di questo tipo:

function bottonePremuto(){
alert(‘mi hai premuto’);
}

Molto spesso quando di usano questi sistemi l’interesse diventa quello che di prendere degli elementi html, proprio perché l’obbiettivo è quello di modificare tali elementi. Per farlo si devono sfruttare delle classi e degli id che sono stati assegnati agli elementi di Html.

Esistono diversi modi per prendere un elemento html e applicare modifiche dinamiche all’html:

1) getElementByClassName() (prendere l’elemento per la classe)

2) getElementById() (prendere l’elemento per l’id)

3) getElementByTagName() (prendere l’elemento sfruttando il nome del tag)

4) querySelector() (in questo caso si può usare la classe o l’id)

Una volta che avete preso l’elemento potete acquisirne il valore scrivendo “.value”, oppure applicarne delle modifiche. Per esempio è possibile cambiare dinamicamente lo stile di un elemento. Si può cambiare, ad esempio il colore di background di un elemento html semplicemente scrivendo questo:

document.getElementById(‘main’).style.background = ‘red’;

Ogni corpo ha il potere, con Javascript, di agire sugli altri corpi o su se stesso cambiando dinamicamente alcuni attributi o l’aspetto di quegli oggetti/elementi html.

Così in un form di registrazione si assegna ad un piccolo bottone il potere di scatenare un evento che permetterà di prendere tutti i dati di un form e salvarli in un database comunicando, ovviamente, con qualche linguaggio backend come intermediario.

Potete, visto che Javascript lavora lato client, addirittura divertirvi a cambiare lo stile di un sito che trovate sul web, semplicemente scrivendo codici Javascript nella console del browser.

Tenente presente però che vale solo per il vostro browser in locale e basta che facciate refresh e tutto ritorna come prima. Un po’ come nell'illusione della magia, per un attimo le cose appaiono diverse da come sono.

L’ultima parte che potrebbe essere interessante del Javascript puro è la parte orientata agli oggetti, spesso usata nei giochi perché torna molto utile.

Javascript ha una componente orientata agli oggetti, ma è molto diversa dalla programmazione orientata agli oggetti classica.

Per quest’ultimo motivo hanno inventato una estensione di Javascript, nota come Typescript,

Non parlerò, tuttavia, di Typescript, mi basta dire giusto alcune cose sugli oggetti, i costruttori e le classi in Javascript.

L’oggetto, come la vecchia Sostanza di Aristotele o i contemporanei oggetti di Levi Bryant, è fatto di attributi (proprietà dell’oggetto) e metodi (capacità dell’oggetto). Dunque un oggetto potrebbe essere una persona che ha nome, cognome, età, ma che è anche in grado di fare tante cose come lavorare, salutare, baciare, ecc.

Un altro oggetto potrebbe essere un coltello che ha un manico, una lama ed è in grado di tagliare un alimento o ferire una persona.

Javascript ha almeno due modi per creare gli oggetti:

un metodo diretto nel quale si crea l’oggetto e nell'oggetto si dichiarano le proprietà e i metodi;

creare una classe con un costruttore per creare oggetti.


var persona = {'nome': 'John', 'cognome': 'Doe', 'eta': 34, saluta: function(){document.writeln('Ciao')}};

Con questo metodo dobbiamo definire le proprietà dentro le parentesi e soprattutto quando creiamo l’oggetto (es. ‘nome’ : ‘john’).

Questo è il secondo metodo:

class Guerriero{
constructor (vita, attacco, difesa, agilita, velocita){
this.vita = vita;
this.attacco = attacco;
this.difesa = difesa;
this.agilita = agilita;
this.velocita = velocita;
}
}
var orco = new Guerriero(300, 60, 50, 30, 30);
var umano = new Guerriero(300, 50, 40, 40, 40);

Con questo metodo prima creiamo una classe, definiamo un costruttore nel quale passiamo tutti i parametri che ci interessano, che saranno le proprietà e i metodi dell’oggetto che vogliamo costruire. Fuori dalla classe creiamo degli oggetti e sfruttando il costruttore possiamo passare delle proprietà.

La filosofia di Javascript 5
La filosofia di Javascript 5

Potrebbe interessarti anche: Wesachannel: cosa significa fare filosofia.

Molto spesso gli oggetti del Javascript puro sono utilizzati per i videogiochi.

Ad esempio potrei realizzare un costruttore di questo tipo per programmare un gioco di astronavi:

function component(width, height, color, x, y, type) {
this.type =type;
if (type=="image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function () {
ctx = myGameArea.context;
if(type=="image"){
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function () {

this.x += this.speedX;
this.y += this.speedY;
}
}

Successivamente creare degli oggetti di astronave in questo modo:

function startGame(){
redGamePiece = new component(70, 40, "astronave.png", 10, 120, "image");
nemico1 = new component(70, 40, " Nemico1.png", 1000, 60, "image");
nemico2 = new component(70, 40, "Nemico2.png", 1000, 180, "image");
myGameArea.start();
}

Ma questo ovviamente presuppone un’area di gioco (myGameArea) :

var myGameArea = {
canvas : document.createElement("canvas"),
start : function(){

this.canvas.width = 1200;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas,
document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
window.addEventListener('keydown', function (e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
window.addEventListener('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
clear : function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop : function () {
clearInterval(this.interval);
}
}

A questo punto possiamo creare una funzione per gli spostamenti delle astronavi nello spazio, una volta che il giocatore preme determinati tasti.

function updateGameArea() {
redGamePiece.speedX = 0;
redGamePiece.speedY = 0;

if (myGameArea.keys && myGameArea.keys[37])
{redGamePiece.speedX = -3;}
if (myGameArea.keys && myGameArea.keys[39])
{redGamePiece.speedX = 3;}
if (myGameArea.keys && myGameArea.keys[38])
{redGamePiece.speedY = -3;}
if (myGameArea.keys && myGameArea.keys[40])
{redGamePiece.speedY = 3;}
nemico1.x -= 1;
nemico2.x -= 1;
myGameArea.clear();
redGamePiece.newPos();
nemico1.newPos();
nemico2.newPos();
redGamePiece.update();
nemico1.update();
nemico2.update();
}

Questo, ovviamente è solo un esempio per dare un’idea su come si potrebbe lavorare per creare di giochi di Javascript.

E con questo penso di aver detto tutto su Javascript puro.

Oggi però, come ho già detto, non si usa molto il Javascript puro, si tende, invece di più ad usare librerie e framework.

Vorrei dunque parlarvi ancora di cose come Angular, Jquery, Node.js, React.js.

Partiamo da JQuery che è una libreria di javascript.

JQuery è nata per semplificare il lavoro di Javascript e permette di poter lavorare sfruttando i selettori di Css.

Per usare JQuery dobbiamo cercare il progetto online e o mettere il link di collegamento oppure mettere in locale il file della libreria.

Quando si usa JQuery si crea un js a parte e si crea una funzione di base che si attiva una volta che la pagina è caricata.

$(document).ready(function(){
});

JQuery una libreria di javascript
JQuery una libreria di javascript

Potrebbe interessarti anche: Introduzione all’intelligenza artificiale (AI).

Il simbolo “$” è un simbolo che sta per JQuery ed è molto utilizzato in questa libreria di Javascript.

Il bello di questa libreria è che, rispetto a Javascript, permette di fare le stesse cose con molto meno codice. Infatti, una volta che avete scritto quella funzione, usando i vari selettori, potete lavorare su molti eventi nella pagina.

Per esempio è possibile usare queste funzioni per far comparire e scomparire un paragrafo in html:

$("#nascondi").click(function(){
$("p").hide();
});

$("#mostra").click(function(){
$("p").show();
});

Queste due funzioni, ovviamente, vanno inserire all'interno della funzione che carica la pagina.

La cosa bella di JQuery è che se volete aggiungere altre funzioni potete semplicemente inserirle sempre dentro la funzione di caricamento della pagina.

Come avrete notato che si utilizzano come con css degli id (es. #nascondi), oppure si prende direttamente il nome del tag (es. p) attraverso un metodo di selezione (es. $(“#mostra”)).

Dal punto di vista della filosofia dietro Javascript qui non cambia nulla, nella misura in cui JQuery lavora sempre sugli eventi, ma usa molto meno codice.

Il punto è che oggi un programmatore non usa quasi mai Javascript puro. Se deve lavorare sugli eventi fa uso di JQuery.

Due altri tool interessanti di javascript sono Angular e Vue.js.

Si tratta di due framework che vengono usati per creare single page application.

Non parlerò di Vue.js, ma solamente di Angular.

Angular funziona con codici javascript, ma permette anche di estendere html con degli attributi appositi. Gli attributi di html estesi da Angular sono facilmente riconoscibili perché incominciano con “ng” (es. ng-model, ng-bind, ecc.).

Angular con questi attributi, ad esempio, riesce a legare degli elementi html tra di loro di modo che se, ad esempio, scriviamo in una casella input, in tempo attuale cambia un paragrafo.

Riprendendo il mio discorso filosofico:

l’html è caratterizzato da una concezione dualista che divide la pagina nella testa (res cogitans) e il corpo (res extensa);

nel corpo troviamo una serie di oggetti che sono gli elementi html con le proprie proprietà definite dagli attributi di html stesso;

l’html puro definisce solo la natura degli oggetti o gli elementi nel corpo, ma non definisce l’aspetto delle cose;

l’aspetto delle cose è definito da Css, un linguaggio che da colore e forma all’html e che allo stesso tempo può dare l’aspetto di un elemento html ad un elemento html diverso;

Javascript aggiunge l’elemento dinamico al sito, lavorando sul concetto di evento e provocando effetti particolari sulla base delle iterazioni dell’utente sull’app.

Angular è un framework che aumenta ulteriormente la dinamicità del sito o dell’app. Angular principalmente aumenta la dinamicità in due modi:

permettendo di cambiare in tempo reale l’html legando elementi di html diversi;

i routing di Angular che permette di passare da una parte dell’applicazione ad un’altra rimanendo sulla stessa pagina.

Angular foto 4
Angular foto 4

Potrebbe interessarti anche: Michel Foucault e la morte delle scienze umane.

Questo è un esempio di biding in Angular:

<div ng-app="">
<p>Nome : <input type="text" ng-model="name"></p>
<h1>Ciao {{name}}</h1>
</div>

In questo caso tutto quello che scriviamo nell'input comparirà scritto nell'h1 sottostante dopo “Ciao”.

Per quanto riguarda il routing, invece, il discorso è diverso:

bisogna prima di tutto collegare dei file;

il codice andrà scritto in un file javascript separato in cui è definita una app e un controller.

In questo secondo caso prima si crea la app come variabile in questo modo:

var app = angular.module("app", ["ngRoute"]);

Successivamente si configura un route provider che permette di passare da una pagina all'altra quando è dato un certo parametro.

Qui andiamo a definire la pagina di destinazione e possiamo anche associare un controller a cui normalmente è associata una funzione.

Ad esempio:

app.config(function($routeProvider){
$routeProvider
.when("/panoramica", {
templateUrl: "Panoramica.html",
controller: "panoramicaCtrl"
})
.when("/articolo", {
templateUrl: "ArticoloAdd.html",
controller: "articoloCtrl"
})
});

Per far funzionare tutto sul lato html dobbiamo aggiungere alcuni tag. Prima di tutto creare un ng-view, che è dove compariranno tutte le nuove pagine.

Esempio:

<div ng-view></div>

Ma affinché compaiano realmente quelle pagine nel div dovete usare altri attributi html da legare ai link da cliccare e, ovviamente, collegare la app.

Esempio:

<p><a href="#/!">Home</a></p>

<a href="#!panoramica">Pnoramica</a>
<a href="#!articolo">Articolo</a>

Con Angular è anche possibile interrogare un database e collegare direttamente il codice Angular ad un linguaggio back-end come Java, Php o Python.

Per farlo bisogna adoperare un linguaggio particolare come JSON (Javascript Object Notation), il quale permette di trasformare stringhe in oggetti e oggetti in stringhe. Il problema attuale è che Angularjs, il linguaggio di cui poco prima vi ho parlato, è deprecato, ossia non si usa quasi più. Oggi esiste un’altra versione di Angular, ma molto diversa perché si basa su un linguaggio come Typescript.

Gli ultimi due importanti framework di Javascript sono React.js e Node.js.

React.js è una libreria Javascript creata da Facebook che attualmente permette di creare delle app mobile con Javascript. Ma per capire React prima bisogna avere delle basi di Node.

Node.js è un framework javascript che permette a javascript stesso di lavorare back-end.

Di solito Node è famoso per la sua capacità di gestire più request alla volta. Una request è una chiamata al server, dalla quale ci si attende una response, ossia una risposta da parte del server. Quello che qui descrivo è la base classica del web che è fondato su un client e un server che comunicano.

Sul server solitamente sta il database su cui si basa la app e il client va ad interrogare proprio quel database, per esempio compilando il form. Il server di riferimento può essere un host di quelli che possiamo trovare su internet con siti come altervista o aruba, oppure può essere un host locale.

La cosa davvero interessante di Node è che possiamo creaci il nostro server locale. È sufficiente scrivere questo codice:

var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Questo è il mio Server!');
}).listen(8080)

Una volta creato il server possiamo lavorare in locale con Node.

Node è un framework che si basa, per il suo funzionamento, molto sui moduli. Ci sono dei moduli già definiti in Node, uno l’ho definito nel codice sopra: var http = require('http'); (il modulo si definisce nel require()).

Questo metodo permette a Node di trasferire dati con http. Ci sono altri moduli in Node come questo: var fs = require('fs'); . Questo, ad esempio serve per lavorare con i file. Dopo di ché su questa variabile si applicano delle funzioni per creare, eliminare e scrivere file, come questa: fs.writeFile().

Ovviamente, essendo Node.js un framework che lavora back end, Node è in grado di lavorare con i database e lavora molto bene sia con i database relazionali che con quelli non relazionali. Infatti questo framework lo vediamo spesso associato a Mongo DB, un database non relazionale basato su no Sql.

Si può usare anche Node per l’intelligenza artificiale, bisogna usare delle librerie come Brain.js, librerie che, ad esempio di permettono di costruire vere reti neurali.

Spesso si sente dire, a ragione, che Javascript è la più valida alternativa a Python per quanto riguarda l’intelligenza artificiale.

Compreso grosso modo come funziona Node, possiamo passare a React js.

React è un framework, come ho detto, creato dagli ingegneri di Facebook.

Il principale scopo di React è quello di renderizzare dinamicamente dell’html. In pratica React js lavora molto con le viste, solamente che l’html che usa React in realtà è JSX.

Esistono due metodi principali per usare React:

creare a tutti gli effetti una app font-end di React e poi collegarci tutto il codice backend;

utilizzare React solo per graficare alcune parti della app e dunque usare React dentro la app che sfrutta il codice back end.

Nel primo caso si deve installare proprio la app di React usando Node. Nel secondo caso, sempre con Node, si deve ricorrere altri sistemi, per esempio usare webpack.

Se scegliamo il primo metodo avremo un file json che illustra le caratteristiche della nostra app e che serve anche per definire tutto ciò che è necessario di Node, ciò che troveremo nella poderosa cartella dei moduli di Node.

Oltre a questo abbiamo due cartelle principali: una pubblica e una dei file sorgenti. Nella cartella pubblica vediamo tutti i file come l’index.html, il robot.txt e le immagini.

Nella cartella dei file sorgente, invece, troviamo tutto il javascript che ci serve per l’applicazione:

index.js, app.js e i vari componenti.

Tutto parte da un file index.js che va a lavorare sul DOM html. Nel file index.js troviamo un codice simile:

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

‘root’ non è altro che l’id di un div dove intendiamo renderizzare l’html.

Gli altri elementi come <App/> sono di JSX e funzionano secondo le regole di xml.

In questo caso si tratta di elementi che invocano altri componenti, che sono, ad esempio funzioni o classi scritti in altri file. In verità, in questo caso, si poteva semplicemente scrivere una costante, assegnargli dell’html e inserire la costante in ReactDOM. Per esempio si potrebbe scrivere un codice in questo modo:

const myelement = (
<h1>Hello World</h1>
);
ReactDOM.render(myelement, document.getElementById('root'));

In questo avremo nel nostro div con id root un h1.

Secondo l’altro metodo, invece, bisogna importare una funzione o una classe da un altro file.

Una classe in React si scrive in questo modo:

class Hello extends React.Component {
render() {
return <h2>Hello World!</h2>;
}
}
Una funzione, invece, in React si scrive in questo modo:

function Hello() {
return <h2>Hello World!</h2>;
}
Un’altra cosa molto interessante che si può fare in React è usare delle proprietà da passare alla classe e poi sfruttare come variabili per inserire dei dati nell’html.

Le proprietà vanno sempre scritte tra le parentesi graffe.

Queste proprietà poi vengono passate in JSX come fossero le classiche proprietà dell’html.

Se questo vi sembra poco sappiate che il lavoro di React non finisce qua.

Oltre a React js esiste anche React native, che è un framework che permette a javascript di lavorare sulle applicazioni app, sia per quanto riguarda android, che per quanto riguarda ios.

La sintassi del framework è la stessa di React js. Questo significa che se imparate bene javascript, un po’ di Node e soprattutto React js, potere lavorare mobile senza dover conoscere linguaggi come Java o Swift.

Javascript è oramai un linguaggio sempre più importante che ci permette di fare moltissime cose. Partito come linguaggio per gli eventi è diventata una competenza indispensabile per ogni programmatore.

Questo perché, a prescindere dal linguaggio back-end che si sceglie di usare (Java, Python, Php, Node.js, ecc.), Javascript resta un un forte linguaggio front-end e spesso sono richiesti molti framework come Angular o React da conoscere a qualsiasi programmazione, proprio a causa della loro potenza.

Foto da Pixabay e Wikipedia. Elaborazioni CaffèBook.