Tutoriel pour apprendre la programmation en JavaScript

Avant de catégoriser les différents types d'erreurs, définissons la différence entre du code synchrone et asynchrone.

Une instruction synchrone est dite « bloquante ». C'est-à-dire que l'instruction suivante sera exécutée seulement une fois que l'opération invoquée par cette instruction aura fini de s'exécuter.

Exemple :

// alert() est une fonction synchrone, car :
alert('cliquez sur OK'); // exécution du programme bloquée jusqu'au clic de l'utilisateur
console.log('bonjour !');
// bonjour sera affiché dans la console seulement une fois que l'utilisateur aura cliqué

Une instruction asynchrone est dite « non bloquante ». C'est-à-dire qu'elle déclenche une opération qui va se dérouler en arrière-plan, pendant que les instructions suivantes du programme vont être exécutées.

Conséquence importante : le résultat de l'exécution d'une instruction asynchrone n'était pas disponible immédiatement, il va falloir définir et fournir une fonction qui sera appelée à la fin de l'opération asynchrone correspondante.

Exemple :

function direBonjour() {
  console.log('bonjour !');
}
setTimeout(direBonjour, 1000);
console.log('salut !');
// => salut va s'afficher avant bonjour, car setTimeout() est une fonction asynchrone.

Généralement, une instruction asynchrone consiste à appeler une fonction, en passant une autre fonction de callback en paramètre. Cette fonction de callback sera appelée à la fin de l'opération asynchrone, et un résultat sera passé en paramètre de cette fonction.

Le résultat passé en paramètre de la fonction de callback peut être une valeur résultante de l'opération (équivalent à l'usage de l'instruction return, dans le cas d'une fonction synchrone) ou une description de l'erreur qui serait éventuellement survenue pendant cette opération (équivalent à l'usage de l'instruction throw, dans le cas d'une fonction synchrone).

On peut alors discerner quatre types d'erreurs :

Avez-vu déjà vu ce type d'erreurs dans la console JavaScript de votre navigateur ?

Les erreurs de programmation sont causées par le développeur du programme. Souvent par inattention, ou cas non prévus.

Exemples d'erreurs de programmation  :

• erreur de syntaxe. Ex. : il manque une accolade fermante ;
• usage d'un symbole non défini : variable ou instruction mal orthographiée ;
• usage d'une propriété ou méthode d'un objet non défini (undefined) ;
• non-respect du type d'un paramètre de fonction ;
• fonction de callback non passée en paramètre de l'appel d'une fonction asynchrone.

Quand une erreur survient dans un programme JavaScript s'exécutant dans un navigateur web, ce dernier arrête l'exécution de ce programme et affiche l'erreur dans la console, afin que le développeur puisse corriger son programme.

Les erreurs de ce type peuvent être corrigées en relisant attentivement le code (ex. : localiser les paires de parenthèses et accolades) et en exécutant des tests couvrant un maximum de cas limites (ex. : que se passe-t-il si l'utilisateur clique sur le bouton « annuler » au lieu de fournir la valeur demandée ?)

Une erreur opérationnelle n'est pas directement causée par le développeur du programme. Elle peut survenir dans des cas en dehors de son contrôle.

Exemples d'erreurs opérationnelles  :

• le serveur auquel une requête AJAX a été envoyée met trop de temps à répondre ;
• le paramètre passé à JSON.parse() n'est pas un objet JSON valide ;
• le navigateur de l'utilisateur a empêché le pop-up de s'ouvrir ;
• l'utilisateur a désactivé le stockage de cookies, ou la localisation ;
• l'utilisateur n'est plus connecté à Internet ;
• le système est à court de mémoire.

Ce type d'erreurs arrive généralement de manière imprévue, et peut nuire gravement à l'expérience de l'utilisateur si votre programme ne les gère pas correctement. En effet, comme pour les erreurs de programmation, le navigateur interrompra l'exécution de votre programme si une de ces erreurs survient et que votre programme ne décrit pas comment les gérer.

L'interception d'une erreur opérationnelle dépend de la nature de l'instruction qui l'a indirectement causée : synchrone ou asynchrone.

XVIII-A-3-a. Cas synchrone▲

try {
  var json = JSON.parse('{ JSON invalide }'); // cause une erreur interceptée par le catch()
  console.log('résultat :', json); // => cette instruction ne sera pas exécutée
} catch (error) {
  console.log('une erreur est survenue :', error.message);
}
console.log('cette ligne s\'affichera dans tous les cas.');

XVIII-A-3-b. Cas asynchrone▲

uneFonctionAsynchrone(function(err, res) {
  if (err) {
    alert('une erreur est survenue : ' + err.message);
  } else {
    alert('resultat de la fonction : ' + res);
  }
});

function traiterPos(pos) {
  alert('Coordonnées GPS : ' + pos.coords.latitude + ', ' + pos.coords.longitude);
}
function traiterErr(err) {
  alert('Une erreur nous empêche de déterminer votre position : ' + err.message);
    // exemple d'erreur : l'utilisateur n'a pas accepté de partager sa position
}
navigator.geolocation.getCurrentPosition(traiterPos, traiterErr);