Come probabilmente ti sarà noto, JavaScript è il linguaggio principale per creare logiche client-side nello sviluppo web, essendo per questo il linguaggio utilizzato per frameworks client-side, come Angular.
Ecco perché può essere utile avere la capacità di eseguire codice JavaScript su qualunque pagina web, on-demand.
Indice
Eseguire codice JavaScript custom con Chrome
Questa funzionalità è disponibile su Google Chrome, per sfruttarla sono necessari pochi passi:
- Su una qualunque pagina web, apri lo strumento per sviluppatori (Chrome DevTools), ad esempio premendo il tasto F12.
- Clicca sul tab “Sources” (Sorgenti)
- Lateralmente dovrebbe visibile la sezione “Snippets”, nella quale potrai creare nuovi Snippet cliccando su “New Snippet”.
In uno snippet è possibile eseguire codice JavaScript, avendo accesso al DOM della pagina visualizzata.
Eseguire snippet JavaScript con Firefox
Anche Firefox mette a disposizione degli strumenti per poter eseguire degli estratti di codice JavaScript on-demand, ecco gli steps necessari:
- Su una qualunque pagina web, apri lo strumento per sviluppatori (Web Console), ad esempio premendo il tasto F12.
- Clicca sul tab “Console”
- Premi sulla tastiera la combinazione di tasti Ctrl + B per attivare la modalità di inserimento multi-line.
Rispetto a Chrome, Firefox non permette di salvare nel browser estratti di codice JavaScript per poterli eseguire successivamente on-demand.
Tuttavia, è possibile salvare quanto inserito nella modalità multi-line usando la combinazione di tasti Ctrl + S.
In maniera duale, è possibile caricare file JavaScript esistenti utilizzando la combinazione di tasti Ctrl + O.
Un esempio di JavaScript snippet
Vediamo ora un esempio pratico di cosa sia possibile fare usando le funzionalità descritte in precedenza.
Supponiamo che vogliamo sapere quanti tags <h2></h2> siano presenti nella pagina.
Lo snippet di codice di seguito accederà al DOM per trovare tutti gli <h2></h2> presenti e stamperà nella console il risultato.
titles = document.getElementsByTagName("h2");
console.log(`in questa pagina web ci sono ${titles.length} titoli`);
Utilizzare codice JavaScript on-demand per aumentare la propria produttività
Essendo JavaScript un linguaggio di scripting, si presta molto bene per essere utilizzato per definire logiche che automatizzino delle azioni su alcune pagine web, consentendo quindi di incrementare in maniera notevole la propria produttività!
Calcolare statistiche utilizzando uno snippet JavaScript
Nell’articolo Le statistiche delle fatture nel software di fatturazione elettronica Aruba è fornito un esempio pratico di snippet JavaScript utilizzato per calcolare delle statistiche (come il totale delle fatture emesse) nel software di fatturazione elettronica di Aruba.
Altri articoli riguardo a JavaScript
Questo blog ha diversi articoli che riguardano JavaScript. Eccone alcuni:
- setTimeout javascript: programmare l’esecuzione di codice
- Come fare una chiamata AJAX ( GET / POST )
- Operatori RxJS: imparare il funzionamento dinamicamente
- RxJS: Subject vs BehaviorSubject
- Controllare il supporto dei browser per CSS e JavaScript
Altri approfondimenti sono disponibili nella sezione dedicata al Web Development.