• Programmazione
  • JavaScript: eseguire il proprio codice scritto in un campo input

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>

JavaScript esempio eval() da input tag HTML

    8 giorni dopo

    Giulio_M Utilissimo , aggiungo che la funzione "eval()" puo' essere rischiosa perchè puo' consentire a un malintenzionato di eseguire codice dannoso sul browser , molti framework e librerie di JavaScript, come ad esempio React sconsigliano l'utilizzo di eval().😉
    mancano solo opzioni per salvare o condividere il codice inserito ad esempio utilizzando i cookie del browser o salvando il codice su un server e qualche sistemazione grafica.😊😊

      Chiara ti ringrazio e benvenuta! 😊 certo resta sempre la questione sicurezza di eval(), diciamo che questo esperimento (era giusto un'impostazione di base) può avere senso ad esempio in locale su un dispositivo mobile, quindi uso dello stesso utente (o perché no, anche aggiungendo qualche sistemazione grafica, in modo statico o dinamico che sia, per avere una specie di propria JS Console personalizzata nello stile). Poi in realtà anche usando una <textarea> al posto di <input>, lo spazio per scrivere il codice e l'usabilità (potendo andare a capo) risultano senza dubbio migliori.

      Powered by: FreeFlarum.
      (remove this footer)