Il gatto di Schrodinger é vivo o morto? Risponde javascript!

Javascript è un piccolo passo per un uomo ma grande per l’umanità visto che è utilizzato a man bassa su tutti i moderni applicativi nelle nuove formule lato server con tecnologie come node, vue, typescript angular, react etc etc. Ma come avviene l’interazione con l’utente con javascript? Analizziamo la seguente pagina presente all’ indirizzo: https://www.farwebdesign.com/schrodinger/gatto.html che consente varie interazioni sugli elementi dislocati all’ interno del tag body. Prendiamo in esame uno per uno facendo prima una carrelata su metodi che lo sviluppatore lato front end si ritroverà a aplleggiare quotidianamente. Prendiamo ad esempio il metodo getElementById ma prima prendiamo il toro per le corna: javascript ha a che fare con l’intero documento che è considerato l’oggetto principale del DOM. Il DOM è l’acronimo di document object model, ossia un luogo di gerarchie di oggetti che prende a modello gli alberi della natura nella sua struttura in cui si annidano elementi padri ed elementi figli. Nell’ HTML il body è un elemento padre ma pur sempre figlio del tag HTML. Un paragrafo è un elemento figlio rispetto a un paragrafo e anche a un blocco divisore <DIV> se dovesse essere contenuto al suo interno. Quindi possiamo considerare il nostro metodo come qualcosa che restituisce l’elemento che ha l’attributo ID con il valore specificato. Questo metodo è uno dei metodi più comuni nel DOM HTML e viene utilizzato quasi ogni volta che si desidera manipolare o ottenere informazioni da un elemento del documento. Restituisce null se non esiste alcun elemento con l’ID specificato. Un ID dovrebbe essere univoco all’interno di una pagina. Tuttavia, se esiste più di un elemento con l’ID specificato, il metodo getElementById () restituisce il primo elemento nel codice sorgente. Posso usare anche altri metodi che catturano gli elementi della pagina come una giugantesca tenaglia di un rottamatore di auto. Ad esempio l’espressione var x = document.getElementsByTagName(“p”); non fa altro che catturare tutto il valore contenuto all’ interno del paragrafo P all’ interno della variabile X e in questo caso abbiamo usato il selettore di javascript getElementsByTagName(“p”). Decisamente la tecnica di contrassegnare gli elementi divisori della pagina a un identificativo univoco (ID) è largamente diffuso tra gli sviluppatori. Vediamo quindi il contenuto della pagina https://www.farwebdesign.com/schrodinger/gatto.html e analizziamo tutti gli elementi presenti:

<!–
<head>
<meta charset=”UTF-8″>
<script>
function myFunction() {
document.getElementById(“demofunction”).innerHTML = “ho cambiato il paragrafo con una funzione”;
}
</script>
</head>
<body>

<div align=center>
<h3>Scopri che cosa puoi fare con javascript!</h3>
<p id=”demostyle”>Cambia il font del paragrafo con la proprietà style del metodo getElementById </p>

<button type=”button” onclick=”document.getElementById(‘demostyle’).style.fontSize=’35px'”>Cambia il testo del paragrafo con la proprietà style</button></br>
<hr>

<h2>Il gatto di Schrodinger è vivo o morto?</h2>

<p >In questo caso javascript cambia il valore del sorgente immagine con la proprietà SRC del metodo getElementById</p>

<button onclick=”document.getElementById(‘myImage’).src=’gattomorto.jpg'”>Scopri se il gatto dentro la scatola ha fatto danni</button><br>

<div id=demogatto><img id=”myImage” src=”gattovivo.jpg” style=”width:100px”></br>

<button onclick=”document.getElementById(‘myImage’).src=’gattovivo.jpg'”>Riporta il gatto in vita</button></div>
<button type=”button” onclick=”document.getElementById(‘demogatto’).style.display=’none'”>Fai fuori il gatto per sempre!</button><br>
<button type=”button” onclick=”document.getElementById(‘demogatto’).style.display=’block'”>Lazzaro gatto ritorna!</button>
<hr>
<button type=”button” onclick=”document.getElementById(‘demochange’).innerHTML = ‘testo cambiato'”>Cambia il testo del paragrafo</button><br>
<p id=demochange>Cambia il testo</p><br><br>
<button type=”button” onclick=”myFunction()”>Cambia il testo del paragrafo usando una funzione</button><br>
<p id=demofunction>Cambia il testo</p><br>
<hr>
</div>
</body>
–>

schiacciando il primo tasto in alto modifico la dimensione del font usando la proprietà STYLE.FONTSIZE messa disposizione dal metodo getElementById per cui azionando il click sul pulsante con l’evento onclick azionerò il cambio di dimensioni del paragrafo contrassegnato da id=demostyle con l’istruzione completa document.getElementById(‘demostyle’).style.fontSize=’35px’. A questo punto siamo riusciti ad analizzare la spinosa questione del gatto di Schrodinger, estrapolando infatti da wikipedia:

…il paradosso del gatto di Schrödinger è un ESPERIMENTO MENTALE ideato nel 1935 da Erwin Schrödinger, con lo scopo di illustrare come la meccanica quantistica fornisca risultati paradossali se applicata ad un sistema fisico macroscopico. Andando decisamente contro il senso comune, esso presenta un gatto che, in uno stato noto come sovrapposizione quantistica, può essere contemporaneamente sia vivo che morto, come conseguenza dell’essere collegato a un evento subatomico casuale che può verificarsi o meno. Il paradosso è descritto spesso anche nelle discussioni teoriche sulle interpretazioni della meccanica quantistica. Il gatto romperà la fiala disposta in una scatola chiusa dopo che ne è stato segregato? Quali comportamenti imprevedibili avrà all’ interno dello spazio compresso?

Per javascript queste questioni paradossali sono facilmente risolvibili, infatti utilizzando sempre il metodo di contrassegno degli ID che sono tutti registrati con coordinate anagrafiche sulla pagina, possiamo assegnare loro dei compiti solo usando il metodo di attribuzione proposto dal metodo getElementById per cui schiacciando un pulsante posso sapere che fine farà il gatto, se voglio riportarlo allo stato iniziale lo potrò fare e anche ucciderlo definitivamente se il gatto dopo l’esperimento si comporta come un leone e tenta di sbranarci. Tuttavia c’è anche un tasto di ripristino che farà ritornare in vita il nostro amato gattino cambiando lo stato del DIV che contiene tutti gli elementi che da display = none ridiventa display = block nelle proprietà di stile. Poi abbiamo anche la dimostrazione dopo Schrodinger di cosa può fare il metodo getElementById in sincronia con la proprietà innerHTML che cambia il testo e poi dulcis in fundo (Dulcis in fundo è un’espressione pseudo-latina che, all’orecchio di un parlante Italiano, significherebbe “il dolce giunge alla fine del pranzo”. Come tale è considerata da Giuseppe Fumagalli, “Il dolce viene in fondo”). Insomma per afferrare gli elementi all’ interno della pagina javascript propone numerose soluzioni, nel frattempo ne sappiamo di più sulla fisica quantistica.




NODE, javascript lato server, istruzioni per l’uso

Se c’è qualcosa di interessante in questa epoca che stiamo vivendo è che la distribuzione della conoscenza non è più esclusiva di scienziati, prelati o uomini di armi come nel medioevo di Leonardo Da Vinci per esempio, che avrebbero avuto da perderci nei loro profitti favorendo i loro bellicosi competitors, oggi una quantità inesauribile di tecnologie per costruire web app sono a disposizione di tutti per favorire sviluppo e innovazione tecnologica. Javascript lato server è una tecnologia ormai di ampia diffusione e Node, https://nodejs.org/en/, in quanto runtime JavaScript guidato da eventi asincroni, il software è progettato per creare applicazioni di rete scalabili. Per seguire questo post è sufficiente avere un minimo di base con JS tradizionale e HTML, nulla di trascendentale. Rispetto alla programmazione classica dove il web developer deve costruire i suoi mattoni uno per uno a livello fisico con tanto di tocco di mouse, qui abbiamo il vantaggio di passare a una programmazione velocizzata grazie all’ uso dei comandi che DOBBIAMO eseguire da terminale, operazione un pò ostica all’ inizio se non si è abituati a un simile approccio. Nel seguente esempio “ciao mondo”, molte connessioni possono essere gestite contemporaneamente. Ad ogni connessione viene attivato il callback, ma se non c’è lavoro da fare, js asincrono dormirà, per usare una metafora letteraria. Ciò è in contrasto con il modello di concorrenza più comune di oggi in cui vengono utilizzati i thread del sistema operativo. Il networking basato su thread è relativamente inefficiente e molto difficile da utilizzare. Inoltre, gli utenti di Node sono liberi da preoccupazioni di blocco permanente del processo, poiché non ci sono blocchi. Quasi nessuna funzione in Node esegue direttamente I / O, quindi il processo non blocca mai. Perché nulla blocca, i sistemi scalabili sono molto ragionevoli da sviluppare in Node. Il nodo è simile nel design e influenzato da sistemi come Ruby’s Event Machine o Python’s Twisted. Nodo prende un po ‘più in basso il modello di evento. Presenta un ciclo di eventi come un costrutto di runtime invece che come una libreria. In altri sistemi c’è sempre una chiamata di blocco per avviare il ciclo degli eventi. In genere il comportamento è definito tramite callback all’inizio di uno script e alla fine avvia un server attraverso una chiamata di blocco come EventMachine :: run (). In node non esiste una tale chiamata di ciclo di avvio-evento. Il nodo entra semplicemente nel ciclo degli eventi dopo aver eseguito lo script di input. Node esce dal ciclo degli eventi quando non ci sono più callback da eseguire. Questo comportamento è simile al browser JavaScript: il ciclo degli eventi è nascosto all’utente. HTTP è un cittadino di prima classe in Node, progettato pensando allo streaming e alla latenza bassa. Ciò rende Node adatto alla fondazione di una libreria o di un framework web. Solo perché il nodo è progettato senza thread, non significa che non è possibile sfruttare i core multipli nel proprio ambiente. I processi figlio possono essere generati utilizzando la nostra API child_process.fork () e sono progettati per essere facili da comunicare. Costruito sulla stessa interfaccia è il modulo cluster, che consente di condividere i socket tra i processi per consentire il bilanciamento del carico sui core. Per lavorare con Node è sufficiente un editor performante tipo https://code.visualstudio.com/ per esempio o anche Sublime Text, Brackets o Atom. Il framework che lavora con Node è https://expressjs.com/it/ , libreria web veloce, non categorica e minimalista per Node.js installabile con una semplice riga di comando: $ npm install express –save dove per npm si intende il gestore dei moduli a disposizione per lo sviluppatore. Npm che gestisce le dipendenze modulari è fornito automaticamente al momento dell’ istallazione di Node, ulteriori informazioni sono reperibili anche all’ indirizzo https://www.npmjs.com/. Il comando npm-init create a package.json file ad esempio il comando $ npm init react-app ./my-react-app crea un nuovo progetto basato su React usando create-react-app. il comando npm i npm aggiorna alla versione più recente. Con il comando node posso entrare nella console di programmazione dove posso dire ad esempio che a = 1 e digitando a invio mi verrà restituito 1 e ancora digitando a = 2 posso cambiare il valore della variabile. Posso anche definire una costante con global.a = 3 per esempio; con il comando .exit ritorno alla root utente. Ora proviamo a creare un file con estensione JS nella stessa cartella dove abbiamo creato il JSON ad esempio module1.js e all’ interno scriviamo le seguenti righe di codice:

consol.log(“ciao”);
a = 2;
console.log(a);

quale sarà il risultato lanciando da console con il comando node module1.js il file creato? Vedremo esattamente prima il ciao stampato a video e successivamente nella riga successiva l’esecuzione della istruzione che viene dopo quindi un due. web developer umbriaNelle architetture basate su richiesta risposta nel processo tradizionale io ho una partita a tennis dove il lato client del browser interroga il lato server, con Node abbiamo già detto che questo meccanismo non corre il rischio di interruzioni in quanto il processo è asincrono. Ora nella stessa cartella test creata prima creiamo il file server.js e creiamo un localserver sulla porta 3000 come quello che mette a disposizione xampp per esempio. Nel file server.js scriveremo:

var http = require(‘http’);
var server = http.createServer(function(req, res) {
console.log(‘inizia la richiesta!’);
res.write(‘ho ottenuto la tua richiesta’);
res.end();
});
server.listen(3000);

lanciando il file con il solito comando node server.js (anche senza estensione) e aprendo la pagina 127.0.0.1:3000 o anche localhost:3000, vedremo come si comporta esattamente lo script dalla finestra terminale non appena avrò digitato a video il mio URL. Ovviamente con Node abbiamo il vantaggio di usare EXPRESS Server. Con il comando npm i express –save posso installare il mio pacchetto modulo all’ interno della cartella node_modules. Ora posso fare lo stesso rispetto alla creazione di un localserver, quindi creo il file serverex.js e dentro scriverò le seguenti istruzioni, precedendo questa operazione dalla creazione del famoso file index.html che si trova nella root che andremo a inserire dentro la famosa cartella PUBLIC tipica dell’ architettura da erigere per una web app, ossia l’area dove saranno visibili le parti interattive con l’utente a video. Quindi:

var express = require(‘express’);
var app = express();
var server = app.listen(3000, listening);
function listening() {
console.log(“sono in ascolto”);
}
app.use(express.static(‘public’));

web developer umbriaA questo punto lanciando il comando node serverex.js il terminale si metterà in ascolto e lanciando il nostro localhost noteremo che automaticamente il contenuto della nostra cartella PUBLIC verrà mostrato all’ utente. Riassumento in questo post abbiamo visto che javascript lato server o NODE è facilmente installabile sul nostro computer. Abbiamo anche visto come installare il modulo EXPRESS o il server dedicato che ha i suoi comandi per il restart o lo spegnimento. Abbiamo visto la semplicità di alcuni comandi (ma non tutti, ad esempio il parametro -g alla fine di una stringa viene usato per le installazione GLOBALI sulla propria macchina) per iniziare ad entrare nella shell di programmazione o per installare o lanciare eseguibili. Abbiamo anche dato una occhiata all’ architettura di base capito l’importanza di alcune cartrelle funzionali come PUBLIC o la cartella NODE_MODULES, oltre a padroneggiare a livello base alcuni strumenti legati al browser come la web.consol o gli editor di testo per gestire il codice. Come primo approccio può bastare, in uno dei prossimi appuntamenti entreremo nella progettazione vera e propria di una WEB APP con NODE!