Programmation Web 2
Série de TP N°1 LFI 4
Utilisation de la console sur l’outil du développeur du navigateur
Les navigateurs modernes comme Google Chrome, Firefox ou Microsoft Edge intègrent
un outil puissant appelé "Outils du développeur" (DevTools), destiné à aider les développeurs
web à inspecter, tester et déboguer leurs pages web.
Parmi les différentes fonctionnalités disponibles (comme l’inspection HTML/CSS, le suivi
réseau ou les performances), l’onglet « Console » joue un rôle central. Il permet d’interagir
directement avec le JavaScript de la page en temps réel.
La console est particulièrement utile pour :
Afficher des messages de débogage ([Link]) ou des erreurs,
Exécuter du code JavaScript à la volée, pour tester des fonctions ou manipuler le DOM,
Explorer des objets, des tableaux, ou suivre l’évolution de variables dans le navigateur,
Visualiser les avertissements et messages système du navigateur.
Accessible via F12 (ou la combinaison Ctrl + Shift + i) ou clic droit → Inspecter, la console
est un véritable laboratoire de test rapide pour les développeurs, que ce soit pour du code
temporaire ou pour comprendre le comportement d'une page.
En utilisant la console du DevTools de votre navigateur, réalisez les manipulations suivantes :
Manipulation 1
Déclarez un tableau T avec l’instruction suivante :
const T = [1, 2, 3, [true, false], "Mohammed", "Omar", [-1.5e-5, 17.5, 9e+10]]
Appliquez les traitements suivants et affichez à chaque étape le résultat, en cas d’erreur
expliquez le problème, aussi chacun des traitements demandés devra être réalisé avec
une seule instruction :
1. Affectez au tableau T une chaine de caractères,
2. Construisez un autre tableau « Tn » qui contient les valeurs de type « number »,
3. Insérer à la fin du tableau « Tn » une nouvelle valeur correspondant à la somme des
éléments du tableau,
4. Insérer au début du tableau « Tn » une nouvelle valeur correspondant au produit des
éléments du tableau,
5. Triez le tableau avec un ordre décroissant,
6. Eliminez les valeurs en double (utilisez un Set),
7. Construisez un autre tableau « Ts » à partir du tableau « T » en extrayant seulement
les chaine de caractères,
8. Insérez la valeur « Abou Bakr » au milieu du tableau « Ts »
1/2
Programmation Web 2
Série de TP N°1 LFI 4
Utilisation de la console sur l’outil du développeur du navigateur
9. Créez un nouveau tableau « Tt » à partir du tableau « T » et qui contient toutes les
valeurs de ce dernier. Dans le cas où l’une des valeurs est un tableau, alors ses valeurs
devront être aussi extraites. Au final, le tableau « Tt » ne contiendra que de simples
valeurs (tous les tableaux à l’intérieur seront éclatés). Utilisez une simple boucle « for »
sans aucun imbrication (un seul niveau).
Manipulation 2
Déclarez un objet F avec l’instruction suivante :
let F = {
code:"LFI4",
titre:"Licence Fondamentale en Informatique",
semestre:4,
modules:["Programmation web 2", "Algèbre relationnelle et SQL",
"Programmation orientée objet C++",
"Système d'exploitation 2", "Structures de données"]
} ;
[Link](F) ;
Appliquez les traitements suivants et affichez à chaque étape le résultat, en cas d’erreur
expliquez le problème, aussi chacun des traitements demandés devra être réalisé avec
une seule instruction :
1. Incrémentez la valeur de la propriété « semestre »,
2. Ajoutez la valeur « Langues étrangères 4 » au tableau des modules,
3. Sérialisez l’objet « F » vers le format JSON,
4. Créez un clone de l’objet « F » en utilisant la syntaxe de décomposition. Nommez le nouvel
objet « F2 »,
5. Supprimez la propriété semestre de l’objet « F2 »,
6. Transformez la valeur de la propriété « modules » en un Set pour l’objet « F2 »,
7. Transformez l’objet « F2 » en un Map (affectez le résultat à la même variable),
8. Affichez les clés du Map « F2 »,
9. Ajoutez la valeur « Développement Personnel » au Set « modules » du Map « F2 »,
2/2