Dopo aver visto Tradurre COBOL in JavaScript: programmazione "perversa", ho fatto una riflessione: nei dispositivi mobile (smartphone, tablet) JavaScript è generalmente supportato dai browser, però manca la possibilità di avere il classico DevTools, con la Browser Console. Molti di voi diranno "chissene frega", ho pensato comunque come risolvere, con un semplice programmino (che può essere ampliato, migliorato anche nella grafica), che rispetto alla Console tradizionale (F12 oppure in genere la combinazione di tasti Ctrl+Shift+J) presenta quindi questi benefici:
- funzionamento cross-device, sia in locale che online: questo "programmino" (un file HTML contenente tutto) può anche essere tenuto in locale nella memoria del dispositivo (aprirlo quindi con il browser anche senza connessione internet), non occorre che sia hostato online da qualche parte: il funzionamento è appunto cross-platform,
- possibile personalizzazione dello stile grafico: tramite CSS possiamo definire lo stile la nostra "textarea", ho anche previsto dei bottoni per cambiarla dinamicamente (es. vogliamo il testo nero, rosso, blu... Così come la dimensione dei caratteri)
Il mio programma dunque funziona così: c'è un campo di testo (textarea) in cui scriviamo direttamente codice JavaScript. Poi per eseguirlo si preme il pulsante "Invia", che attiva una funzione eval() che esegue il codice JavaScript preso in input da quanto abbiamo scritto nella textarea. Come detto, ho aggiunto alcuni pulsanti per le personalizzazioni grafiche, in modo dinamico (volendo se ne possono ovviamente aggiungere degli altri, su questo stile).
Ecco tutto il codice (copia-incolla in un file salvato con estensione .html, da mettere nel dispositivo che vogliamo e funziona).
<html>
<style>
textarea{
width:50%;
height:50%;
}
</style>
<textarea name="input-field" placeholder="Inserisci codice JavaScript"></textarea><br><button id="submit1"><strong>Invia</strong></button><button id="size14">size14</button><button id="size16">size16</button><button id="nero">nero</button><button id="blu">blu</button><button id="rosso">rosso</button>
<h3 id="output"></h3>
<script>
size14.addEventListener("click",function(){
inputField.style.fontSize="14px";
});
size16.addEventListener("click",function(){
inputField.style.fontSize="16px";
});
nero.addEventListener("click",function(){
inputField.style.color="#000";
});
blu.addEventListener("click",function(){
inputField.style.color="#00F";
});
rosso.addEventListener("click",function(){
inputField.style.color="#F00";
});
const inputField = document.querySelector('textarea[name="input-field"]');
document.querySelector('#submit1').addEventListener('click', function(){
document.getElementById("output").innerHTML="<em>Codice JavaScript:<br></em>"+inputField.value;
eval(inputField.value);
});
</script>
</html>
Vediamo ora un'immagine che ne mostra il funzionamento 🙂 ho fatto un esempio semplice, scrivere del testo nella Browser Console (tramite console.log()), ovviamente possiamo scrivere il codice JavaScript che vogliamo!
Vi piace questa idea? Pensate sia utile? 🙂
