PROGRAMMIAMO
JS - Correggere gli errori
Il problema degli errori: errori sintattici e logici

Il JS è un linguaggio interpretato. Ciò significa che la traduzione del linguaggio e la sua esecuzione sono realizzate istruzione per istruzione, in modo sequenziale. In altre parole, se c'è un errore negli script (es. manca una parentesi), tale errore viene individuato solo al momento dell'esecuzione dello script stesso. Invece nei linguaggi compilati (come es. il C), gli eventuali errori sintattici vengono individuati in fase di compilazione e impediscono la successiva esecuzione del programma.

Invece in JS gli errori non vengono neppure segnalati dal browser, il quale visualizza comunque la pagina e cerca di eseguire il codice, anche se questo contiene un errore. Tutto ciò causa numerosi problemi al programmatore, poiché spesso risulta molto difficile individuare e correggere errori anche banali.

Per comprendere la correzione degli errori in JS (e in generale in qualsiasi linguaggio di programmazione) è bene aver presente la distinzione fra errori sintattici (cioè quelli che riguardano la grammatica del linguaggio) ed errori logici (che invece concernono la correttezza logica del codice scritto).

Errori sintattici: validare il codice online

Un metodo per verificare che non ci siano errori sintattici (cioè errori grammaticali) nei propri script, consiste nel validare il codice usando un validatore online. Si tratta di strumenti abbastanza semplici da usare, poiché basta in genere copiare e incollare il codice da validare in un'apposita finestra e poi il validatore segnala gli errori individuati.

Fra i migliori validatori online disponibili segnaliamo:

Questi strumenti non sono perfetti, in quanto non individuano tutti gli errori, ma almeno possono aiutare a individuare e correggere quelli più gravi.

Errori logici: usare "alert"

L'individuazione e correzione degli errori logici viene detta debug (o debugging) del programma.

Per individuare gli errori logici, è spesso utile inserire all'interno dei propri script delle chiamate al metodo window.alert (oppure semplicemente alert) per visualizzare durante l'esecuzione lo stato del programma e il contenuto delle variabili. Si consideri per esempio questo caso:

function down(){
count--;
                        alert(count);     // Visualizza il valore di count
return count;
}

Si osservi come alert sia stato scritto con una indentazione maggiore rispetto al resto del codice. Questo accorgimento consente di individuare e successivamente rimuovere rapidamente dal codice gli alert inseriti a scopo di debug.

Ogni volta che viene eseguito l'alert viene aperta una mini finestra di pop up che visualizza il contenuto della variabile count, in questo modo:

alert javascript

Debugging con gli Strumenti per gli sviluppatori

Tutti i browser moderni offrono ormai integrati strumenti raffinati per il debugging di script in JS e in altri linguaggi. Per accedere a questi strumenti bisogna generalmente usare il tasto F12 (oppure cercare il menu corrispondente Strumenti Sviluppatore). Questi strumenti consentono di individuare errori sintattici e di eseguire il programma passo passo per trovare errori logici.

Qui nel seguito ci limiteremo a considerare un semplice esempio di uso di questi strumenti di sviluppo, presentando l'uso della console degli errori.

 

Errori logici: usare la console

L'uso di alert è abbastanza efficace per script brevi e quando non ci sono troppi alert: in caso contrario la continua interruzione nell'esecuzione del codice e la conseguente visualizzazione di finestre di pop up, rendono talvolta difficile comprendere con chiarezza ciò che avviene nel programma.

Un'alternativa più sofisticata consiste nell'uso di console.log. Si tratta di un metodo che, senza interrompere l'esecuzione del programma e senza visualizzare fastidiosi pop up, permette di tenere traccia di ciò che avviene durante l'esecuzione. Facendo riferimento di nuovo all'esempio precedente, abbiamo:

function down(){
count--;
                        console.log(count);    // Visualizza il valore di count
return count;
}

Si osservi che l'uso e la disposizione di console.log è la stessa di alert nell'esempio precedente. Tuttavia console.log, come abbiamo detto, non interrompe l'esecuzione, ma i messaggi vengono dirottati verso la console di debugging del programma.

Per visualizzare la console di debugging nel proprio browser in genere è sufficiente premere il tasto F12 (o andare sul meno Strumenti Sviluppatore). Per esempio nel caso di Firefox, premendo F12 viene visualizzata una finestra sotto alla propria pagina dove vengono visualizzati i messaggi di console:

In modo abbastanza simile in Chrome con F12 viene aperta una finestra secondaria, dove si possono trovare i messaggi di console:

Per imparare a usare gli altri strumenti di debugging offerti da Chrome, raccomandiamo di vedere la video lezione linkata qui sotto.

 

Debugging semplice in Javascript: una videolezione

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it