Premiers pas - La console JavaScript

Bienvenue au laboratoire de génétique de Jurassic Park ! Tout comme les scientifiques du parc avaient besoin d'équipements spécialisés pour étudier l'ADN des dinosaures, nous avons nous aussi besoin d'un outil pour expérimenter avec le code JavaScript. Cet outil, c'est la console JavaScript - notre propre laboratoire pour tester et expérimenter avec le langage.

Qu'est-ce que la console JavaScript ?

La console JavaScript est un environnement interactif qui te permet d'exécuter du code JavaScript en temps réel et d'observer immédiatement les résultats. C'est comme le microscope d'un généticien - il te permet d'observer précisément comment notre code se comporte.

Comment accéder à la console JavaScript ?

Dans le navigateur

Tous les navigateurs modernes possèdent une console JavaScript intégrée, accessible via les outils de développement. Voici comment y accéder :

1. Chrome, Edge, Firefox, Safari :

   • Appuie sur F12 ou Ctrl+Maj+I (Windows/Linux) / Cmd+Option+I (Mac)
   • Sinon, fais un clic droit sur la page et sélectionne « Inspecter » ou « Outils de développement »
   • Va dans l'onglet « Console »

2. Raccourci direct vers la console :

   • Ctrl+Maj+J (Windows/Linux)
   • Cmd+Option+J (Mac)

Dans Node.js

Si Node.js est installé, tu peux accéder à la console JavaScript en tapant simplement node dans le terminal :

1node
2> console.log("Bienvenue dans le monde des dinosaures !");
3Bienvenue dans le monde des dinosaures !

Utiliser la console pour expérimenter

Opérations de base

La console JavaScript est l'endroit idéal pour expérimenter avec des expressions et des opérations simples. Tout comme le laboratoire de génétique de Jurassic Park permettait des expériences sur l'ADN, la console permet de tester les fonctionnalités du langage :

1// Opérations mathématiques simples
22 + 3     // 5
310 * 5    // 50
42 ** 8    // 256 (2 puissance 8)
5
6// Opérations sur les chaînes
7"Tyranno" + "saurus" // "Tyrannosaurus"
8"Veloci".toUpperCase() // "VELOCI"
9
10// Opérations logiques
11true && false // false
12true || false // true
13!true         // false

Utiliser console.log()

La méthode console.log() est l'un des outils les plus importants pour apprendre et déboguer JavaScript - c'est comme une caméra de surveillance à Jurassic Park, qui te permet d'observer ce qui se passe dans notre code :

1console.log("Bienvenue à Jurassic Park !");
2
3const dinosaur = {
4  species: "Velociraptor",
5  height: 0.5, // mètres
6  speed: 40, // km/h
7  dangerous: true
8};
9
10console.log(dinosaur);

Autres méthodes utiles de l'objet console

La console offre plus que le simple log(). Tout comme les différents types d'équipement du laboratoire, chaque méthode a son usage :

1// Avertissements
2console.warn("Attention ! La clôture du Velociraptor a été endommagée !");
3
4// Erreurs
5console.error("ERREUR CRITIQUE : Système de sécurité du parc désactivé !");
6
7// Informations
8console.info("Nouvelle éclosion de T-Rex prévue à 15h30");
9
10// Regrouper les logs
11console.group("Statut des dinosaures");
12console.log("T-Rex : Dans l'enclos");
13console.log("Velociraptors : !!! AUCUNE DONNÉE !!!");
14console.log("Triceratops : Dans l'enclos");
15console.groupEnd();
16
17// Mesurer le temps d'exécution
18console.time("Séquençage ADN");
19// ... code dont on veut mesurer le temps d'exécution
20console.timeEnd("Séquençage ADN");
21
22// Tableaux
23console.table([
24  { species: "T-Rex", status: "Dans l'enclos", dangerous: true },
25  { species: "Triceratops", status: "Dans l'enclos", dangerous: false },
26  { species: "Velociraptor", status: "ÉVADÉ !", dangerous: true }
27]);

Déboguer avec console.assert()

La méthode console.assert() permet de tester des conditions et n'affiche un message que lorsque la condition est fausse. C'est comme le système de sécurité de Jurassic Park qui n'alerte que lorsque quelque chose tourne mal :

1const dino = { species: "Velociraptor", paddock: 7 };
2console.assert(dino.paddock === 7, "Dinosaure dans le mauvais enclos !");  // Rien ne s'affiche
3console.assert(dino.species === "T-Rex", "Espèce incorrecte !");  // Affiche une erreur avec le message

Commandes multi-lignes dans la console

Dans la console du navigateur, tu peux aussi écrire du code sur plusieurs lignes. Utilise Maj+Entrée pour passer à une nouvelle ligne sans exécuter le code :

1// Appuie sur Maj+Entrée après chaque ligne sauf la dernière
2function analyzeDNA(species) {
3  console.log("Analyse de l'ADN pour l'espèce : " + species);
4  return `L'ADN de ${species} contient des séquences génétiques de grenouille`;
5}
6
7analyzeDNA("Dilophosaurus"); // Appuie sur Entrée pour exécuter la fonction

Auto-complétion et historique des commandes

La plupart des consoles JavaScript offrent des fonctionnalités pratiques qui accélèrent le travail :

• Auto-complétion - après avoir tapé une partie du nom d'une variable ou d'une méthode, appuie sur Tab pour que la console complète automatiquement le nom
• Historique des commandes - utilise les flèches haut et bas pour parcourir les commandes saisies précédemment

Raccourcis et astuces utiles

1. $0 - référence à l'élément actuellement sélectionné dans l'onglet Elements
2. $ - raccourci pour document.querySelector(), p. ex. $('div') renvoie le premier élément div de la page, et $$ - raccourci pour document.querySelectorAll(), p. ex. $$('div') renvoie tous les éléments div (sous forme de tableau)
3. $_ - contient la valeur de la dernière expression exécutée

1Math.random()  // p. ex. 0.7589453290389485
2$_             // renvoie le même résultat : 0.7589453290389485

Effacer la console

Lorsque ton « laboratoire » devient trop encombré, tu peux effacer la console de plusieurs façons :

1. Appuie sur Ctrl+L (Windows/Linux/Mac)
2. Tape console.clear()
3. Clique sur l'icône de la corbeille dans la console du navigateur

Autres types de consoles utiles pour apprendre JavaScript

Outre la console du navigateur et Node.js, il existe d'autres environnements qui facilitent l'expérimentation avec JavaScript :

1. JSFiddle, CodePen, CodeSandbox - des plateformes en ligne permettant d'écrire et de tester du code JavaScript avec du HTML et du CSS
2. RunJS - une application de bureau fonctionnant comme un carnet JavaScript avec évaluation instantanée
3. Quokka.js - une extension pour les éditeurs de code, permettant un aperçu des résultats en temps réel

Exercice pratique

Place aux expériences ! Ouvre la console JavaScript de ton navigateur et essaie les exemples suivants :

1. Crée un objet représentant un dinosaure avec différentes propriétés

   1const trex = {
   2  name: "Tyrannosaurus Rex",
   3  height: 5.6,
   4  weight: 8000,
   5  speed: 27,
   6  carnivoreDiet: true
   7};

2. Essaie différentes méthodes pour afficher des informations sur le dinosaure

   1console.log(trex);
   2console.table(trex);
   3console.log(`${trex.name} pèse ${trex.weight} kg et court à ${trex.speed} km/h`);

3. Crée un tableau de dinosaures et filtre-le pour trouver tous les dinosaures carnivores

   1const dinosaurs = [
   2  { name: "T-Rex", carnivoreDiet: true, weight: 8000 },
   3  { name: "Velociraptor", carnivoreDiet: true, weight: 15 },
   4  { name: "Triceratops", carnivoreDiet: false, weight: 9000 },
   5  { name: "Brachiosaurus", carnivoreDiet: false, weight: 50000 }
   6];
   7
   8const carnivores = dinosaurs.filter(dino => dino.carnivoreDiet);
   9console.table(carnivores);

Résumé

La console JavaScript est ton laboratoire personnel pour expérimenter avec le code. Tout comme les scientifiques de Jurassic Park devaient d'abord tester leurs théories en laboratoire avant de les appliquer à des dinosaures vivants, tu devrais utiliser la console pour expérimenter avec JavaScript avant d'implémenter du code dans de vraies applications.

Dans les prochaines leçons, nous utiliserons fréquemment la console pour tester de nouveaux concepts et fonctionnalités JavaScript. Plus tu expérimentes, mieux tu comprends le fonctionnement du langage - tout comme le Dr Henry Wu, le généticien en chef de Jurassic Park, qui, à force d'expériences continues, est devenu un expert de l'ADN des dinosaures.

Souviens-toi : contrairement aux expériences de Jurassic Park, les expériences dans la console JavaScript sont totalement sûres - aucun T-Rex ne s'échappera de ton navigateur !

1// Laboratoire d'ADN - Catalogage des types de données
2// Exercice : Travailler avec différents types de données
3
4// String - texte
5const dinoName = "Tyrannosaurus Rex";
6console.log("Espèce (string):", dinoName, typeof dinoName);
7
8// Number
9const dinoAge = 68000000;
10console.log("Âge (number):", dinoAge, typeof dinoAge);
11
12// Boolean - valeur logique
13const isDangerous = true;
14console.log("Dangereux (boolean):", isDangerous, typeof isDangerous);
15
16// null et undefined
17const unknownDNA = null;
18let pendingSample;
19console.log("ADN inconnu (null):", unknownDNA, typeof unknownDNA);
20console.log("Échantillon en attente (undefined):", pendingSample, typeof pendingSample);
21
22// Ta mission :
23// 1. Crée des variables de différents types pour un profil de dinosaure
24// 2. Utilise typeof pour vérifier les types
25// 3. Affiche toutes les données dans la console
26
27// Ton code ici :
28