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 FARE – STO FACENDO – FATTO 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(); });
}
Analizzando 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.
Be the first to comment