c. Tester le code javascript avec la console et l'éditeur de code

Console du navigateur


La console est un outil essentiel pour le développement et le débogage en JavaScript. Elle permet d’évaluer des expressions, d'afficher des messages avec console.log(), et de suivre les erreurs d'exécution et de syntaxe. C'est idéal pour tester rapidement des morceaux de code ou comprendre le comportement d'un programme.

Voici quelques fonctionnalités clés de la console :

  • Ouvrez la console de votre navigateur :
  • - sur chrome , firefox , microfost edge : click droit > inspecter > onglet console


  • Évaluation des expressions : Vous pouvez tester des expressions JavaScript en temps réel. Tapez simplement votre code dans la console et appuyez sur Entrée pour voir le résultat.
2 + 4


  • Affichage de messages : Utilisez console.log() pour afficher des messages dans la console. Cela est utile pour déboguer et comprendre le flux de votre programme.
console.log("Hello, World!");


  • Suivi des erreurs : La console affiche les erreurs d'exécution et de syntaxe, ce qui vous aide à identifier les problèmes dans votre code. Les messages d'erreur sont souvent cliquables, ce qui vous permet de naviguer directement vers la ligne problématique dans votre code.
hello.addEventListener()



Éditeur de code


Pour le développement de projets plus complexes, un éditeur de code est préférable. Les éditeurs comme Visual Studio Code, Sublime Text ou Atom offrent des fonctionnalités avancées, telles que la coloration syntaxique, l'autocomplétion, et des extensions pour faciliter le développement. Avec un éditeur de code, vous pouvez écrire des scripts, les organiser dans des fichiers, et exécuter le tout directement dans le navigateur.

Dans ce cours je vais utiliser visual studio code Lisez cet article pour l'installer.

Voici un exemple d'utilisation d'un éditeur de code pour créer un fichier JavaScript externe :

  • 1. Créez un fichier script.js dans votre éditeur de code. Les fichiers javascript ont une extension .js
  • 2. Ajoutez le code suivant :
function afficherMessage() {
    console.log("Bonjour, monde !");
}


afficherMessage();


  • 3. Créez un fichier html dans le même dossier que le fichier javascript : 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple de JavaScript</title>
</head>
<body>
   
</body>
</html>


  • 4. Intégrez le fichier dans votre HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple de JavaScript</title>
</head>
<body>
   
<script src="script.js"></script> <!-- intégration de notre fichier javascript-->
</body>
</html>


  • 5. Le résultat : ouvrez la console pour observer le résultat :



Prev Next