Categorie
Tips

Eseguire codice JavaScript su qualunque pagina web

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.

Eseguire codice JavaScript custom con Chrome

Questa funzionalità è disponibile su Google Chrome, per sfruttarla sono necessari pochi passi:

  1. Su una qualunque pagina web, apri lo strumento per sviluppatori (Chrome DevTools), ad esempio premendo il tasto F12.
  2. Clicca sul tab “Sources” (Sorgenti)
  3. Lateralmente dovrebbe visibile la sezione “Snippets”, nella quale potrai creare nuovi Snippet cliccando su “New Snippet”.

eseguire codice javascript custom chrome
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:

Hai bisogno di una privacy policy per il tuo sito?

Scopri Iubenda
  1. Su una qualunque pagina web, apri lo strumento per sviluppatori (Web Console), ad esempio premendo il tasto F12.
  2. Clicca sul tab “Console”
  3. Premi sulla tastiera la combinazione di tasti Ctrl + B per attivare la modalità di inserimento multi-line.

eseguire codice javascript custom firefox
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.

Hai bisogno di una cookie policy per il tuo sito?

Scopri Iubenda

Hai bisogno di un servizio di hosting veloce ed affidabile?

Scopri ora

Seguimi su