Ho fatto questo esperimento interessante: partendo da un semplice input tag HTML, in cui inseriamo il nostro codice JavaScript, un evento di tipo listener che poi legge quanto inserito, lo salva in una variabile e tramite la funzione eval() eseguiamo questo stesso codice! Può avere risvolti interessanti, in pratica funziona in modo analogo alla Console di DevTools. Può essere più user-friendly della stessa e, cosa non da poco, superare limiti interessanti:
- personalizzazione dello stile (ad esempio tramite CSS, posso personalizzarlo come voglio)
- usabilità cross-device (che sia salvato in locale oppure hostato online), infatti i browser dei dispositivi mobile supportano certamente il codice JavaScript, ma non è presente la Console, DevTools!
Soprattutto il secondo punto può essere molto interessante. Riporto il codice completo HTML e infine qualche immagine di esempio (come stile è ovviamente rudimentale, rende però già l'idea della funzionalità). Per il momento il codice JavaScript va scritto tutto su una riga.
<html>
<style>
input{
width:50%;
}
</style>
<input name="input-field" placeholder="Inserisci codice JavaScript"></input><button id="submit1">Invia</button>
<h3 id="a"></h3>
<script>
const inputField = document.querySelector('input[name="input-field"]');
document.querySelector('#submit1').addEventListener('click', () => {
document.getElementById("a").innerHTML="<em>Codice JavaScript:<br></em>"+inputField.value;
eval(inputField.value);
});
</script>
</html>
