Premiers pas en Javascript

Comme pour les TP précédents, on vous demande de créer un répertoire tp4 qui contiendra les exercices de cette feuille de TP et de faire un compte rendu de TP en HTML.
Ce TP sera noté, mais vous pouvez bien sûr demander de l'aide à vos enseignants : le but de la note est de vous pousser à travailler sérieusement et de vous donner une idée de votre niveau de compréhension du cours.
Vous devez uploader ce TP (compte-rendu, feuille CSS et un fichier HTML par exercice) sur e-learning avant le mardi 20 février à 22h. Les retards ne seront pas autorisés.
Les éléments suivants seront pris en compte dans la note :

Le code html produit pour le compte-rendu et les exercices passe les tests du validateur W3.org sans erreurs.
Une feuille de style externe permet une mise en forme élégante du compte-rendu.
Les réponses formulées dans le compte-rendu sont claires et respectent la syntaxe française (ou éventuellement anglaise pour les étudiants étrangers).
Lorsque cela est demandé, le code JavaScript produit répond aux attentes en respectant les éventuelles contraintes imposées.
Le code JS est commenté à bon escient.
Le code JS produit respectent les règles de forme et de syntaxe usuelles et vues en cours, notamment l'usage des indentations, des accolades `{}`, du point-virgule `;` et des mots-clés `let / const`.

Des pénalités éventuelles seront appliquées si les consignes sont mal respectées, et en cas de plagiat. La frontière entre le fait de se faire aider et celui de plagier est parfois confuse pour certain-e-s d'entre vous. Le plagiat résulte d'un travail effecué sous la dictée (d'un camarade, de chatGPT, ...) ou reproduit à partir d'un modèle produit par un tiers (travail d'un autre étudiant ou code trouvé sur le web). Les modifications mineures telles que le renommage des variables ou la modification des commentaires ne changent rien à l'acte de plagiat et restent détectables.
Vous êtes encouragés à lire l'intégralité du sujet du TP pour comprendre où on souhaite que vous alliez.
Attention : Chaque fois que l'on vous demande de réécrire une fonction ou de remplacer votre code par un nouveau code, il faudra mettre l'ancien code en commentaire et surtout pas le supprimer. Sinon, votre chargé de TP ne sera plus en mesure de vérifier que l'ancien code répondait à la question précédente.

Exercice 1 : Hello World

Cet exercice montre comment utiliser les outils de developpement présents sur les navigateurs, comme la console.

Recopiez la page Web exo1.html dans votre répertoire tp4.
Que se passe-t-il lorsque l'on visualise la page ?
Comment fait-on pour ouvrir la console avec Firefox ?
Et avec Chrome ?
Mettez l'ancien code en commentaire.
Ecrivez un code permettant d'afficher, toujours dans la console, les nombres de 0 à 2023 inclus (il n'est pas nécessaire de faire une fonction pour l'instant).
Note : par pitié, pas de copier/coller, d'autant plus que l'on doit afficher 2024 nombres !
Mettez l'ancien code en commentaire.
Réécrivez un nouveau code code pour afficher dans la console les nombres divisibles par 2 ou par 3 allant de 0 à 2023 inclus : 0, 2, 3, 4, 6, 8, …, 2018, 2019, 2020, 2022.
Commentez l'ancien code et écrire une fonction (que vous nommerez de façon claire et intelligente) prenant un entier en paramètre et affichant sur la console les nombres divisibles par 2 ou par 3 allant de de 0 à cet entier (inclus). Puis écrivez un code de test de la fonction avec les valeurs 7 et puis 10. Que se passe-t-il si on teste la fonction avec la valeur -1 ?

Exercice 2 : Damier

On cherche à faire un damier avec des cases blanches et noires et la diagonale affichée en marron.
Attention : Chaque fois que l'on souhaitera donner un style spécifique à tel ou tel élément HTML, on lui donnera une classe on un ID et on créera le sélecteur CSS correspondant : écrire des informations de style en dur dans une balise HTML, c'est une méthode de sauvages !

Recopiez la page Web exo2b.html dans votre répertoire tp4.
Expliquez ce que fait la première ligne du script :
```
"use strict";
```
Attention : La bonne manière de sauver une copie de exo2b.html est de faire un clic droit sur le lien hypertexte puis d'appuyer sur enregistrer sous. Sinon, vous risquez d'avoir une version qui vous affiche deux cases l'une sur l'autre au lieu d'une seule case (car vous aurez sauvé le code HTML tel que réécrit après une première application du code Javascript sur votre page).
Expliquez comment faire pour ajouter un enfant ou une classe à un élément, puis expliquer comment fonctionne la fonction makeCell.
Remplissez le contenu de la fonction makeLine de sorte que l'appel à makeLine(5, "table-2"); transforme la table d'identifiant "table-2" en un tableau d'une ligne et cinq colonnes.
Remplissez le contenu de la fonction makeSquare de sorte que l'appel à makeSquare(8, "table-3"); transforme la table d'identifiant "table-3" en un tableau de huit lignes et huit colonnes.
Vérifiez que la table d'identifiant "table-4" est maintenant un tableau de trois lignes et trois colonnes.
Si ce n'est pas le cas, reprenez la fonction précédente.
Complétez le style de la balise style du document pour définir une case noire et une case blanche et utilisez ce style pour les cases de chacun des quatre tableaux (vous êtes libre de commencer par une case blanche ou par une case noire).
Note : une balise HTML peut avoir plusieurs classes CSS !
Astuce : la somme (ça marche aussi avec la différences, si vous préférez) des coordonnées des cases modulo 2 (le reste de la division par 2) vous indique s'il s'agit d'une case blanche ou d'une case noire.
Ajoutez un style de case marron puis commentez votre code de la fonction makeSquare et réécrivez-la pour ajouter un dernier paramètre à makeSquare ; ce paramètre pouvant être vrai ou faux. Si le paramètre est vrai, alors il faudra afficher la diagonale en marron.
Au cours de ce processus, vous pourrez être amené à commenter les codes de vos différentes fonctions pour leur ajouter des paramètres additionnels que vous aurez jugés pertinents.
Testez en affichant en marron la diagonale du premier carré (mais pas celle du second).

Exercice 3 : On fera en fonction…

On peut améliorer la "beauté" du code, et le rendre un peu plus professionnel, en évitant de passer en paramètre un booléen pour dire s'il faut dessiner ou non la diagonale.

Copiez-collez le document exo2b.html et nommez exo3.html votre copie. Ci-dessous, vous effectuerez vos modifications sur ce nouveau document exo3.html.
Faites en sorte que la fonction makeCell prenne un argument supplémentaire, qui sera la couleur (black, white ou brown) de la case.
Par exemple, si j'appelle makeCell("table-1","brown"), on dessinera une case de classe "brown", qui aura vocation à être dessinée en marron comme indiqué dans les informations de style du document.
Définissez une fonction color(i,j) qui renvoie la couleur de la case en ligne i et colonne j d'un damier carré sans cases marron (comme à la question 6 de l'exercice 2).
Redéfinissez la fonction makeSquare pour que, outre l'identifiant du tableau à transformer et la dimension de la grille qu'elle doit dessiner, le troisième argument que prend cette fonction soit non plus un booléen qui dira si on doit peindre (ou non) en marron la diagonale de la grille, mais une fonction d'affichage qui associera à paire (i,j) la couleur de la case en ligne i et colonne j.
Notez que dans cette question, la fonction makeSquare prend en troisième argument une fonction, comme la fonction doItTwice vue en cours. Par exemple, si j'appelle makeSquare(3, "table-4", color), où color est la fonction de la question 3, on dessinera 3×3 cases, et la case en ligne 1 et colonne 2 sera de couleur color(1,2).
Définissez enfin une fonction diagonalColor dont le seul argument est un booléen, et telle que l'appel à makeSquare(size, id, diagonalColor(true)) transformera la table d'identifiant id en une grille dont la diagonale sera marron, tandis que l'appel à makeSquare(size, id, diagonalColor(false)) transformera cette table en une grille dont la diagonale n'aura pas de couleur particulière (par rapport aux autres cases de la grille).