"La plupart des langages contiennent des bons et des mauvais éléments. … Le JavaScript est un langage particulièrement bien loti en ce qui concerne les mauvais éléments… Mais le JavaScript contient heureusement un certain nombre d'éléments exceptionnellement bons…" Douglas Crockford

Comme le dit Douglas Crockford, JavaScript contient un certain nombre de particularités qui en font un langage pouvant se révéler plein de pièges, il est donc important de maîtriser un minimum les outils de débogage qui sont vite indispensables lorsque vous développez dans ce langage. Les deux premiers exercices ont donc pour objet de vous faire découvrir le 'minimum vital' de la console web et du débogueur JavaScript intégrés au navigateur. Les exercices présentés sont réalisés avec les outils de développement de Firefox, mais on retrouve des outils similaires dans tous les navigateurs modernes (Chrome, Edge, Safari...). Si vous ne souhaitez pas utiliser Firefox, il vous est donc possible d'utiliser le navigateur de votre choix (il faudra vous adapter pour retrouver l'équivalent des outils Firefox présentés par la suite).

Pour en savoir plus sur les outils de développement dans Firefox vous pouvez vous reporter aux tutoriaux de MDN (Mozilla Developers Network) : https://developer.mozilla.org/tools, en particulier les tutoriaux sur la console web et sur le débogueur JavaScript.

1. La console Web

La console Web est un outil essentiel lorsque l'on effectue du développement Web, entre autres c'est là que s'affichent les messages d'erreur des programmes JavaScript s'exécutant dans le navigateur. Dans ce premier exercice, vous allez découvrir le minimum vital de son utilisation à savoir afficher et exploiter les messages d'erreurs affichés. La console JavaScript permet beaucoup plus, vous pouvez y afficher vos propres traces d'exécution avec des instructions console.log(), vous pouvez y tapper et exécuter du code JavaScript. Pour en savoir plus sur son fonctionnement dans Firefox, reportez vous au tutoriel de MDN Console Web (Mozilla Developers Network).

1. Dans votre répertoire de travail PLAI-TW créez un répertoire TP06 dans lequel vous téléchargerez et décompresserez le fichier tribulles.zip.

2. Ouvrez dans votre navigateur (Firefox) le fichier tribules.html situé dans dans le dossier TP06/tribulles créé précédemment.

   

3. La page HTML tribulles.html intègre du code JavaScript afin de tracer le déroulement d'un algorithme de tri à bulles (ou tri par propagation). Cet algorithme consiste à comparer répétitivement les éléments consécutifs d'un tableau, et à les permuter lorsqu'ils sont mal triés. Il doit son nom au fait qu'il déplace rapidement les plus grands éléments en fin de tableau, comme des bulles d'air qui remonteraient rapidement à la surface d'un liquide (Wikipedia).

   Le code JavaScript invoqué par tribulles.html permet de mélanger un tableau de 10 entiers contenant les chiffres de 0 à 9, et ensuite pour chaque étape du parcours du tableau d'afficher les échanges effectués entre deux élements consécutifs ceci jusqu'à ce que le tableau soit entièrement trié. Malheureusement des erreurs dans le code HTML et le code JavaScript empêchent le bon déroulement du programme et l'affichage obtenu ne correspond pas à celui attendu.

   

4. Ouvrez la console web du navigateur. Pour cela, plusieurs moyens sont possibles On peut passer par les menus de Firefox, mais le plus simple et le plus rapide est certainement de procéder comme le montre la vidéo ci-dessous, en effectuant un clic bouton droit sur la fenêtre du navigateur, puis en sélectionnant dans le menu contextuel l'item Examiner l'élément, et ensuite en activant l'onglet Console dans les outils de développement web qui s'affichent en dessous du contenu de votre page.

   
   

5. La console affiche les messages des erreurs qui ont été rencontrées au chargement de la page et à l'exécution des scripts qu'elle contient. Les figures ci-dessous, vous montrent son contenu (ATTENTION : selon la manière dont vous avez ouvert le fichier tribulles.html le contenu de la console peut légèrement différer).
   

   Si vous avez chargé le fichier dans le navigateur sans passer par un serveur web et une requête HTTP (url file://... dans la barre d'adresse) le contenu de la console est le suivant.

   

   Si vous avez chargé le fichier dans le navigateur en passant par un serveur web (par exemple LiveServer depuis VSCode) et une requête HTTP (url http://... dans la barre d'adresse) le contenu de la console est le suivant.

   

6. Effectuez un clic sur le lien tribulles.html situé à droite de l'erreur Echec du chargement .... La aussi le cmportement du navigateur peut être légèrement différent selon qe vous avez ouvert directement le fichier tribulles.html (url file://... dans la barre d'adresse) ou que vous l'avez chargé depuis un serveur (url http://... dans la barre d'adresse.

   Dans le premier cas le code source de la page HTML est affiché dans un nouvel onglet.

   

   Dans le deuxième cas, l'onglet Débogueur des outils de développement est activé et vous permet de visualiser le code source de l'erreur.(figure 3).

   

   question 1: Qu'elle est la cause de l'erreur ? Quelle correction devez-vous apporter au fichier tribulles.html?
   Réponse

7. Ouvrez dans VSCode le dossier TP06 et éditez le fichier tribulles.html, corrigez l'erreur et rechargez la page dans le navigateur (si vous avez ouvert directement le fichier (url file://..) faites le rechargement depuis le navigateur). Si l'erreur a été correctement corrigée vous devriez obtenir l'affichage montré sur la figure 4 ci-dessous (Le contenu initial du tableau non trié est affiché).

   

   Dans la console, le message d'erreur indique un problème à la ligne 16 du script contenu dans le fichier Tribulles.js.

   question 2: Quelle est la cause de l'erreur ? Corrigez-la dans votre éditeur VSCode puis rechargez la page dans le navigateur. Répétez ce processus jusqu'à ce que toutes les erreurs soient corrigées.
   Réponse

2. Utilisation du débogueur JavaScript dans Firefox

MDN (Mozilla Developer Network) propose un tutorial sur le débogueur de FireFox auquel vous pourrez vous référer pour compléter les différents points abordés dans cet exercice.

1. Pour commencer téléchargez le fichier dist2sun.zip que vous décompresserez dans votre répertoire de travail (PLAI-TW/TP06). Le dossier dist2sun ainsi créé contient un page HTML index.html qui intègre du code JavaScript permettant de calculer le nombre de fois où il faut plier une feuille de papier pour obtenir une distance égale à la distance terre/soleil (un peu moins de 150M de km).

   

2. Chargez la page index.html dans votre navigateur FireFox (par exmple en utilisant LiveShare) puis ouvrez le débogueur du navigateur

   

   Le debogueur s'ouvre au bas de la fenêtre Firefox, la figure 2 ci dessous vous présente les différents éléments de la fenêtre de débogage (le document Visite guidée de l'interface utilisateur vous donne une explication détaillée de ces différents éléments).

   

3. Dans la page index.html placez un point d'arrêt au niveau du premier appel de la fonction afficherDistance() ligne 27 (fig. 3).

   (la page Comment ajouter un point d'arrêt de MDN détaille la manière de définir un point d'arrêt).

   

4. Rechargez la page, le débogueur doit s'arrêter sur votre point d'arrêt (fig. 4).

   

   Question 1 :Quel est l'affichage produit dans la page HTML ? Pourquoi ? Réponse

5. Cliquez sur le bouton de la barre d'outils du débogueur.

   Question 2 : Qu'observez-vous dans la page HTML et dans le débogueur ? A votre avis que s'est-il passé ? Réponse

6. Cliquez maintenant sur le bouton de la barre d'outils du débogueur.

   Question 3 : Qu'observez-vous dans la page HTML et dans le débogueur ? A votre avis que s'est-il passé ? A quel endroit du code l'exécution s'est-elle arrêtée ? Réponse

   Quelle est la différence entre les boutons et ? Réponse

   Qu'affiche l'élément Portées du panneau d'observation ? Réponse

   La variable n affiche la valeur unitialized. A votre avis pourquoi ? Réponse

7. Cliquez à nouveau sur le bouton . Normalement vous devez vous trouver sur la première ligne de la fonction calculerNbrePlis (fig. 5).

   

   question 4 : Qu'affiche la partie pile d'éxécution dans le panneau d'observation à droite ?

   Que se passe-t-il lorsque vous cliquez sur la fonction afficherDistance dans cette pile ?

   Réponse

8. Cliquez à nouveau sur le bouton . Vous devez normalement vous trouver sur la deuxième instruction de la fonction calculerNbrePlis.

9. Cliquez à nouveau sur ce bouton afin d'avancer pas à pas jusqu'à ce que le débogueur s'arrête sur l'instruction nbPlis++; (fig. 6).

   

   question 5 : D'après vous que va-t-il se passer si vous cliquez à nouveau sur le bouton ?

   Faites-le et vérifiez que votre prédiction était correcte.

   Réponse

10. Continuez l'exécution pas à pas pour déterminer le nombre de fois que la feuille doit être pliée pour atteindre l'épaisseur d'une ramette de 500 pages, c'est à dire 5 cm.

    question 6 : Quelle est la valeur de nbrePlis ? Quelle est celle de epaisseur ?
    Réponse

11. Cliquez sur le bouton .

    question 7 : Quel est l'effet de ce bouton ? Sur quelle instruction vous trouvez vous ?
    Réponse

12. Cliquez sur le bouton .

    question 8 : Quel est l'effet de ce bouton ?
    Réponse

13. Placez deux nouveaux points d'arrêt dans la fonction calculerNbrePlis() (ligne 12 et 15 comme indiqué sur la figure 8).

    

14. Rechargez à nouveau la page et constater que le débogueur s'arrête sur votre premier point d'arrêt (premier appel de la fonction afficherdistance() ligne 27 de index.html.

15. Cliquez sur le bouton .

    question 9 : Sur quelle instruction vous trouvez-vous ? Quel a été l'effet de ce bouton ?
    Réponse

16. Cliquez à nouveau sur le bouton .

    question 10 : Sur quelle instruction vous trouvez-vous ? Quel a été l'effet de ce bouton ?
    Réponse

17. Désactivez le point d'arrêt situé ligne 12 de pliages.js (fig. 9) et cliquez à nouveau sur le bouton .

    

    Sur quelle instruction vous trouvez-vous ? Quel a été l'effet de ce bouton ?
    Réponse

18. Terminez l'exécution du programme (vous pouvez cliquer sur le bouton ).

Nous terminerons ici, l'exercice sur le débogueur, mais il vous est vivemement recommandé de vous exercez avec celui-ci et d'explorer ses nombreuses fonctionnalités en vous référant au tutoriel de MDN.

Partie 3: Gestion des événements et manipulation du DOM.

Chargez le fichier Calculette.zip sur votre compte, décompressez le. Il contient une petite application HTML/JavaScript permettant d'effectuer des opérations arithmétiques simples (addition, soustraction, multiplication, division).

Exercice 2: En vous inspirant de la page calculette.html réalisez un page HTML (degres.html) qui permet de convertir une température exprimée en degrés Fahrenheit en une température exprimée en degrés Celsius et inversement en utilisant la formule de conversion suivante:

température en Celcius = (5/9) x température en Farenheit - 32

Partie 4: Dessiner avec canvas.

<canvas> est une nouvelle balise HTML5 qui permet de définir un zone dans laquelle il est possible de dessiner en utilsant l'API (Application Programer Interface) javascript standard canvas. Pour en savoir plus sur les canvas et leur utilisation vous pourrez vous reporter au tutoriel de w3schools qui leur est consacré.

Exercice 1: Les "escaliers"

Exercice 2: Les "fleurs"

La fonction ellipse() ci-après permet de dessiner une ellipse dans un canvas.

/**
 * Dessine une ellipse dans un canvas
 * @param {CanvasRenderingContext2D} ctx le contexte graphique du canvas
 * @param {number} cx l'abscisse du centre de l'ellipse
 * @param {number} cy l'ordonnée du centre de l'ellipse
 * @param {number} rx le rayon horizontal de l'ellipse
 * @param {number} ry le rayon vertical de l'ellipse
 * @param {number} angle l'angle (en degrés) de l'ellipse par rapport à l'horizontale
 * @param {string} style le style de tracé (couleur) pour le contour de l'ellipse
 */
function ellipse(ctx, cx, cy, rx, ry, angle, style) {
    ctx.save(); // sauvegarde l'état du contexte graphique
    ctx.beginPath();
    ctx.translate(cx, cy);
    ctx.rotate(angle * Math.PI / 180);
    ctx.scale(rx, ry);
    ctx.arc(0, 0, 1, 0, 2 * Math.PI, false);
    ctx.restore(); // restaure l'état original du contexte graphique
    ctx.save();
    if (style) {
        ctx.strokeStyle = style;
    }
    ctx.stroke();
    ctx.restore();
}

En supposant un page HTML contenant un canevas défini comme suit.

<canvas id="zoneDessin" height="600" width="600">
</canvas>

le code javascript suivant permet de dessiner une ellipse bleue et une ellipse rouge centrées au milieu du canvas, de rayons 200 et 40, la première étant horizontale (angle = 0) et la seconde inclinée de 30° (figure 3).

let canvas = document.getElementById("zoneDessin");
let ctx = canvas.getContext("2d");
ellipse(ctx,300,300,200,40,0,'blue');
ellipse(ctx,300,300,200,40,30,'red');

Question 1: En utilisant la fonction ellipse() ecrivez une fonction fleur() (dont les paramètres sont à votre discretion) permettant de dessiner dans un canvas le motif suivant (figure 4).

Pour tester votre fonction, réalisez une page HTML fleur.html permettant d'afficher un canvas avec une fleur centrée au mileu de celui-ci.

Question 2: En reprenant le code que vous avez écrit à l'exercice 3, créez une page HTML champDeFleurs.html qui permet à l'utilisateur de remplir un canvas avec des "fleurs", l'utilisateur fixant à l'aide d'un champ de saisie le nombre de fleurs à afficher par ligne (figure 5). Toute modification du nombre de fleurs par ligne (événement "onchange" provoque immédiatement le réaffichage du canvas).