Una giornata tipo di Ken Shiro: salvare il mondo con JavaScript e il Drag and Drop

web design umbria

LA TERRA E’ PRECIPITATA NELLE BARBARIE: SOLO KEN SHIRO E LE SETTE STELLE DELLA DIVINA SCUOLA DI HOKUTO CI POSSONO SALVARE!

Quale è la giornata tipica di Ken Shirov? Certamente avrà molto da fare sulla terra. Ce lo immaginiamo: estirpare i laboratori dove vengono creati virus artificiali, debellare i politici corretti in ogni dove, dare una lezione ai prepotenti, salvare la Terra dall’ inquinamento atmosferico, distruggere le mafie locali, fare a pezzi i terrapiattisti etc etc etc. Ma come si organizza Ken Shiro nelle sue attività quotidiane? Ha forse fatto un corso di Time Management o le sette stella della scuola di Hokuto lo hanno anche fornito di un orologio divino che gli dà solo il tempo di dedicare pochi minuti per ogni task? Vediamo in dettaglio quale è il suo pannello di controllo all’ indirizzo https://www.farwebdesign.com/projectcsshtmljs/kenshiro.html. Ken suddivide gli appuntamenti della sua agenda in tre fasi distinte: quello che deve fare, quello che sta facendo e quello che è stato risolto. La catena di montaggio è sempre la stessa, prima fa a pezzi un terrorista che lancia virus nelle stazioni e mentre lo demolisce lo lascia sospeso nell’ area dell’ agenda IN PROGRESSO poi finito il working progress il terrorista diventa mangime per i polli e la sua missione è completata. Poi deve volare fino a Garbatella dove un gruppo di imprenditori locali vendono le mascherine a dieci euro cadauna e il compito passa di nuovo dalla fase in sospeso a risolto e così via finchè arrivando a fine giornata si concede un attimo di respiro telefonando a Carlsen e battendolo con lo scacco matto della divina scuola di Hokuto. Vediamo come tecnicamente lato frontend una tecnologia come JQuery riesce a fare tutto questo; il progetto è composto da un file CSS, un file con estensione JS e il file statico kenshiro.html che ha le inclusioni alle risorse esterne. Dentro questo file in alcuni punti sono definiti degli ID, identificativi unici, che serviranno a JQuery per dinamicizzare i contenuti. Ovviamente ci sarà un CDN per inserire Jquery a scelta fra i tanti che si trovano in rete: <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> , con questo abilitiamo lo script che abbiamo dentro la cartella JS a lavorare. Come funziona il DRAG and DROP come evento di javascript? Si clicca su un elemento per trascinarlo (metodo dragstart), lo si sposta a piacimento grazie al metodo dragover e INFINE LO SI RILASCIA sfruttando il metodo drag, il tutto dicendo agli elementi iniziali che si sposteranno che hanno un nome e un cognome e alcune caratteristiche di trascinabilità che dovranno interagire con certe aree specifiche e non altre, altrimenti l’azione non avrebbe compimento. Analizziamo la parte statica della pagina:

<div id=”board”>
<div id=”todo”>
<div class=”title”>Da fare</div>
<div id=”item1″ draggable=”true”>
<div class=”cardTitle”>Fermare un gruppo di politici corrotti che governano per se stessi</div>
</div>
<div id=”item2″ draggable=”true”>
<div class=”cardTitle”>risanare le terre di Murdor dall’ inquinamento denunciato da Greta</div>
</div>
<div id=”item3″ draggable=”true”>
<div class=”cardTitle”>Distruggere un laboratorio dove creano virus artificiali</div>
</div>
<div id=”item4″ draggable=”true”>
<div class=”cardTitle”>Convincere i terrapiattisti a cambiare religione</div>
</div>
<div id=”item5″ draggable=”true”>
<div class=”cardTitle”>Bloccare le fake news e sgominare la mafia delle scommesse clandestine</div>
</div>
<div id=”item6″ draggable=”true”>
<div class=”cardTitle”>Tra una bonifica e l’altra risanarsi battendo Carlsen a scacchi</div>
</div>
</div>
<div id=”inprogress”>
<div class=”title”>In corso</div>
</div>
<div id=”done”>
<div class=”title”>Fatto</div>
</div>

Da notare come ciascun compito o task definito con l’abilitazione draggable=”true” sia preso dallo script JS per intercettare l’evento dragstart che consente lo spostamento iniziale degli oggetti su aree in cui verrà rilasciato un evento dragover che intercetterà questa volta le TRE aree di rilascio definite come id=”todo” , id=”inprogress” e id=”done” che ospiteranno anche l’azione finale dello spostamento definitivo (metodo DROP) che per Ken stanno proprio a significare leggo l’agenda, vedo quello che c’è da fare, faccio le cose che riempono uno spazio della giornata “inprogress” e archivio il tutto nella dimensione “DONE” e così il ciclo DA FARESTO FACENDOFATTO giunge a compimento. A guardare il risultato finale si penserebbe che tutta la parte di script è lunga due km, ma JQuery nasce proprio con il dono della sintesi che migliora la prolissità di javascript:

$(‘document’).ready(init); function init() {

$(‘#item1, #item2, #item3, #item4, #item5, #item6’).bind(‘dragstart’, function (event) { event.originalEvent.dataTransfer.setData(“text/plain”, event.target.getAttribute(‘id’)); });

$(‘#todo, #inprogress, #done’).bind(‘dragover’, function (event) { event.preventDefault(); });

$(‘#todo, #inprogress, #done’).bind(‘drop’, function (event) { var notecard = event.originalEvent.dataTransfer.getData(“text/plain”); event.target.appendChild(document.getElementById(notecard)); event.preventDefault(); });

}

web design umbriaAnalizzando bene il tutto, ci sono solo TRE funzioni che utilizzano la famosa pala del rottamatore per le autorimesse, $(afferro_un_elemento): quella che afferra dal cielo gli elementi ITEM per metterli in relazione con una azione che devono compiere (DRAGSTART), quella del trascinamento in corsa usando il metodo DRAGOVER e quella predisposta al RILASCIO usando il metodo definitivo DROP che completa il ciclo, spostamento che agisce sempre sulle aree predisposte al parcheggio dei compiti marcate dalla loro carta di identità rappresentata da corrispettivi ID todo, inprogress e done. Il BIND come espressione in programmazione indica un collegamento con qualcosa, una base dati, una procedura. Notare anche che ci sono espressioni tipiche del DOM molto famigliari, come appendChild, getElementById e funzioni come event.preventDefault() che stanno a significare rispettivamente appendi al figlio dell’ elemento, afferra l’elemento in base all’ ID (potrei farlo anche per style o tag) e resetta tutti i comportamenti anomali prima di compiere la successiva operazione, una azione che ricorda molto il famoso RESET.CSS che si utilizza per inizializzare il documento vuoto quando si parla di problematiche dei fogli di stile, al fine di annullare le varie differenze di visualizzazione tra i browser. Nel frattempo grazie al DRAG AND DROP, evento di trascinare e rilasciare, Ken Shiro ha salvato la Terra dalle nefandezze del male. La parte di abbellimento finale sulla struttura HTML per l’esempio di Umbriaway Consulting all’ indirizzo https://www.farwebdesign.com/projectcsshtmljs/kenshiro.html è responsabilità del file CSS che si può modificare a piacere.




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.