1

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.




Javascript e le regular expression: illuminazioni celesti pronte all’ uso!

web developer umbriaSe non sai che cosa sono le espressioni regolari che vengono usate in tutti i linguaggi di programmazione don’t worry! Di solito un approfondimento nel mese di Aprile può aprire spiragli inaspettati se non altro perchè l’illuminazione celeste è una prerogativa di questo mese. Andiamo subito alla pratica. Ipotizziamo che come organizzatore di un torneo di scacchi mi debba trovare nella necessità di far inserire una serie di dati sulla pagina delo mio sito per una ipotetica iscrizione al più grande torneo di tutti i tempi dopo quello di Zurigo del 1953. Questi utenti devono essere sicuri di digitare l’elo giusto della loro forza agonistica senza che io organizzatore/webmaster debba preoccuparmi dei dati immessi che potrebbero essere anche stringhe conflittuali nei confronti del sistema. Come risolverla quindi in Javascript visto che in PHP lato server abbiamo a disposizione un meccanismo di validazione per ripulire e rendere i dati inseriti immacolati? Semplicemente usando le espressioni regolari. Quindi abbiamo un campo dove è richiesto:

var elo = “1987”;

ossia dichiaro una variabile di nome elo che verrà assegnata al valore di 1987 che non è un anno temporale ma solo l’elo del potenziale frequentatore del nostro torneo. Sorge quindi un problema, questa persona mi deve validare solo numeri come tipi di dato e non zucche e patate nel campo. Un dato va controllato quindi nel suo formato visto che l’elo di solito non supera i diecimila dobbiamo supporre che all’ interno del campo l’utente possa scrivere solo quattro campi, perchè finora nessuno è mai riuscito ad ottenere 10132 punti elo se non forse sulla lontana nebulosa di Orione. Dobbiamo quindi verificare il dato inserito e ancora prima verificare che LA STRINGA NON SIA VUOTA per permettere l’immissione. Per prima cosa devo limitare la mia espressione e questo lo si fa dichiarando due / / entro le quali vanno inseriti i criteri di convalida del campo. Per far capire a javascript che è alle prese con una espressione regolare nomina una variabile arbitraria (nell’ esempio exp) e gli assegno un valore che avrà una caratteristica avendo a che fare con contenuti inseriti dentro a /…contenuti…/ e ciè che quell’ assegnazione avrà a che fare con una espressione regolare. Quindi scriviamo una espressione per verificare che la stringa punti elo è vuota:

var exp = /.+/;

qui abbiamo un punto che sta ad indicare che all’ interno del campo ci deve essere qualsiasi tipo di carattere, da un numero piuttosto che una lettera, e il + sta ad indicare che ci dovrà essere almeno un carattere dentro il campo. In questo modo è palese che il campo NON PUO’ ESSERE VUOTO. Una espressione di questo tipo non è sufficiente a convalidare il nostro punteggio elo che per convenzione ha 4 cifre, ma dichiara esplicitamente che il campo NON PUO’ ESSERE VUOTO. Abbiamo solo detto che un cxarattere qualsiasi generico dovrà essere inserito nel campo nella sua quantità minimo di numero 1 item grazie al simbolo +. Le espressioni regolari mettono a disposizione un metodo che si chiama TEST. Quindi con questo metodo verifichiamo se la stringa ottenuta dal nostro punteggio elo è aderente al nostro PATTERN inserendo come argomento la var elo e il risultato sarà un booleano che possiamo stampare a video:

risultato=exp.test(elo);
document.write(risultato);

mandando in esecuzione questo file nel browser vedremo che come per magia comparirà sullo schermo la scritta TRUE e cioè la conferma che il campo dove l’utente ha inserito il suo elo non è vuoto. Ovviamente inserendo var elo = “”; a video otterremo un FALSE. A questo punto sorge un problema. Se l’utente scrivesse nel campo qualcosa tipo var elo = “hebl”; noi a video otterremo un TRUE ma sappiamo bene che l’elo si esprime con i numero e non con le lettere. Quindi come fare per risolvere il problema e migliorare la nostra espressione? Togliamo il punto e inseriamo tra parentesi quadre una serie di numeri consentiti :

var exp = /[0123456789]+/;

è come se dicessimo all’ utente senza che lui lo sappia guarda puoi digitare una serie di valori che noi riteniamo accettabili. Volendo possiamo ancora migliorare questa espressione rielaborando il tutto in un insieme di caratteri consentiti per l’immissione usando il simbolo del trattino, quindi:

var exp = /[0-9]+/;

se ritornassi a stampare a video la sequenza:

var elo = “jshe”;
risultato=exp.test(elo);
document.write(risultato);

adesso dopo i vincoli imposti con var exp = /[0-9]+/; otterrei sul browser la bella scritta di FALSE, come è logico che sia, perchè la regular expression fa bene il suo lavoro e ci dice che vuole solo un range di numeri e non lettere. Attenzione però, se avessi scritto:

var exp = /[0-9]*/;

seo specialist umbriasostituendo il + con il * é come se dicessi alla nostra bella espressione accetta tutti i caratteri compresi tra zero e nove OPPURE accetta la loro assenza, mentre sappiamo che il + come simbolo sta ad indicare che almeno UN CARATTERE DOVRA’ ESSERE PRESENTE per la convalida. A questo punto però potrebbe sorgere un altro problema. Ipotizziamo che l’utente ubriaco si metta a digitare prima i due numeri e che poi vittima dei vapori alcolici immetta due lettere, che succederebbe in stampa? Si otterrebbe comunque un TRUE perchè di fatto l’espressione da noi sottolineata come vincolo fa capire alla macchina che i numeri ci sono, ma è palese che la comparsa delle lettere non dovrebbe comparire. Dobbiamo usare dei delimitatori per risolvere il problema: con l’accento circonflesso ^ messo a inizio stringa e il carattere $ inserito a fondo espressione è come se dicessimo alla macchina “guarda, adesso l’utente può digitare solo numeri, escludi la possibilità che impazzisca e che digiti lettere a suo piacimento”: var exp = /^[0-9]+$/; mandando in esecuzione il tutto dopo aver salvato questa volta otteniamo un TRUE se ci sono solo numeri i campi perchè abbiamo imposto alla stringa di soddisfare SOLO certi criteri. Ma se io volessi imporre che l’utente possa digitare solo quattro numeri come faccio? Posso usando le {} togliendo il + che come detto ci dice solo che almneno un carattere deve essere presente nella nostra espressione quindi:

var exp = /^[0-9]{4}$/;

Ok, in questo esempio è tutto facile ma ipotizziamo di lavorare su una variabile telefono piuttosto che elo, come faccio a far accettare all’ utente ad esempio il fatto che dopo il prefisso possa digitare un trattino? Come faccio a veicolare l’utente sul fatto che un prefisso di solito ha tre numeri di inserimento e almeno dai cinque ai nove aggiuntivi dopo il trattino? Posso dare una impostazione rigida al mio pattern? Certo che si, ipotizzando:

var telefono = “011-250644”;

scriverò:

var exp = /^[0-9]{3} – ? [6-9] {} $/;

dove [0-9]{3} – sta ad indicare la coercizione 011 e dove ? inserito dopo il simbolo – sta ad indicare che questo trattino è solo opzionale dopodichè però dovrò vincolare l’utente con l’espressione [0-9] {6} per guidarlo all’ esatta digitazione delle sei cifre successive. Ovviamente a browser sia che io imposti
var telefono = “011-250644” con il trattino o var telefono = “011250644” senza trattino otterrò un TRUE perchè in entrambi i casi la clausola -? mi assicura che l’utente possa scegliere o non scegliere di immettere nel campo il simbolo di trattino -. E se io per sbaglio di trattini ne inserisco due? Non verrebbe rispettata la condizione della regular expression e a browser vedrei un bel FALSE di conferma perchè nella nostra condizione abbiamo imposto che un trattino c’è o non c’è (ma non due!).

CONCLUSIONI: qui abbiamo usato solo il metodo test per capire i fondamenti delle espressioni regolari ma l’universalità e l’ambito in cui questi criteri di validazione operano su più linguaggi ci fanno intuire come il discorso sia solo all’ inizio e da esplorare ulteriormente. Di sicuro la Pasqua del 2020 seppure farcita di elementi apocalittici di demolizione alla Blade Runner qualcosa di buono ha portato, se non altro ha illuminato e fatto chiarezza senza ramoscello d’ultivo su un aspetto misterioso tipo la scrittura babibolonese-sumerica. Adesso quelle sibilline espressioni del tipo  = /^[0-9]{3} – ? [6-9] {} $/ saranno più facilmente decodificabili per il nuovo novizio che indossa le vesti del moderno Champollion della programmazione, che le regular expression siano con voi, amen.