Bottoni dell'editor

▶️ Esegui

Questo bottone avvia l'esecuzione del codice

⏭️ Avanza

Questo bottone fa avanzare esecuzione del codice dopo un breakpoint

❌ Abort

Questo bottone annulla l'esecuzione del codice

💉 Injected

Questo bottone serve a visualizzare il codice generato dall'app (utile solo per debugging)

📊 Visualizzatore (attivo di default)

Questo bottone serve a visualizzare la gerarchia e i frame del programma (è attivo di default all'apertura dell'app)

🔄️ Refresh

Questo bottone rigenera la gerarchia e il codice iniettato

🔄️ Refresh

Questo bottone annulla l'esecuzione del codice

🤚 👋 Cambio scope

Questo bottone permette di passare da scope statico(🤚) a scope dinamico(👋) e viceversa

🛑 Breakpoint automatici

Questo bottone attiva i breakpoint automatici, ferma l'esecuzione quasi ad ogni passo, per il corretto funzionamento bisogna inserire sempre il return nelle funzioni. Si sconsiglia anche di innestare troppe chiamate di funzione (es. console.log(f(g(h())))) poichè l'esecuzione si interromperebbe solo una volta per riga

💾 Salva

Questo bottone permette di salvare su file il codice corrente

📤 Carica

Questo bottone permette di caricare e aprire un file javascript dal proprio dispositivo

ℹ️ Documentazione

Questo bottone permette di aprire la documentazione

Breakpoints

Per inserire un breakpoint in un specifico punto del programma è sufficente inserire "bp;" nella riga precedente, oppure usare i breakpoint automatici 🛑

Gerarchia

Mostra la catena statica del programma, può essere rigenerata con 🔄️ dopo aver effettuato modifiche al codice. Essa verrà rispettata solo durante l'esecuzione con scope statico. GlobalScope è lo scope globale

Frames

Mostra i frames(ambienti) delle funzioni durante l'esecuzione del codice, si consiglia di attivare i breakpoint 🛑 per visualizzarli passo passo. Global_frame è l'ambiente dello scope globale.

Esempio di esecuzione di un programma

Attività di laboratorio

Iniziare un laboratorio

Per iniziare un laboratorio scegliere tra uno di quelli esistenti sul sito, oppure caricare il file fornito dal professore nella pagina dedicata.

Test cases

Vi verrà fornita una traccia come "scrivere una funzione f che restituisce..."
Rispettare il nome della funzione e il numero di parametri. Quando eseguirete il codice verranno eseguiti dei test case, i risultati compariranno nella console.

Come creare un laboratorio (per il docente)

Partire dal file template(download) nella parte superiore va definita la traccia, dopo il tag "#test_cases" vanno definiti i vari test case che si vogliono eseguire, della forma _test(nome_della_funzione, risultato_atteso, parametro1, parametro2, ...)