Tuto Programmation 2 : Piégé dans le labo

📜 Scénario

Continuons l’entraînement jeune recrue ! Vous avez été enfermé dans le laboratoire de simulation. Par chance, vous avez trouvé un bouton mystérieux. A vous de l’exécuter dans un environnement sécurisé !

🎯 Objectif du Tutoriel

Dans ce défi, vous allez :

• 🔹 Créer un bouton interactif dans une page web
• 🔹 Utiliser du HTML et du JavaScript pour afficher un message secret
• 🔹 Découvrir l‘encodage des lettres de l’alphabet en ASCII

Pas besoin d’être un expert : ce tutoriel est conçu pour les débutants. Vous allez voir comment le code dans un navigateur peut réagir à vos actions (comme un clic) !

🛠️ Outils Nécessaires

Pour ce défi, vous aurez besoin de :

• Un navigateur internet (Chrome, Firefox, Edge, etc.).

📝 Instructions Pas à Pas

1️⃣ Copier le Code HTML/JavaScript

<button 
        onclick="alert('The pass is: ' + String.fromCharCode(67, 71, 123, 116, 117, 116, 111, 114, 105, 97, 108, 95, 106, 115, 95, 97, 115, 99, 105, 105, 125))">
  Click me
</button>

2️⃣ Exécuter le Code sur CodePen

1. Rendez-vous sur CodePen.
2. Dans la section HTML, collez le code ci-dessus.
3. Le bouton apparaîtra automatiquement dans la fenêtre de prévisualisation.
4. Cliquez sur le bouton : une fenêtre d’alerte s’affichera avec le message secret.

Bravo !!

💡 Explications (Pour Comprendre le Code !)

1️⃣ Le HTML : <button>

• <button> : Une balise HTML qui crée un bouton cliquable.
• onclick="..." : Un attribut qui définit ce qui se passe quand on clique sur le bouton. Ici, il exécute du code JavaScript.

2️⃣ Le JavaScript : alert() et String.fromCharCode()

• alert(...) : Affiche une fenêtre pop-up avec un message.
• String.fromCharCode(...) : Convertit une liste de codes ASCII en caractères.
  • Par exemple, 67 correspond à la lettre C, 71 à G, etc.
  • Testez-le vous-même : Ouvrez la console de votre navigateur (F12 > onglet “Console”) et tapez : CopyString.fromCharCode(67, 71) Résultat : "CG"

3️⃣ Les Outils de Développement (Dev Tools)

• Ouvrez les Dev Tools : Appuyez sur F12 (ou Ctrl+Maj+I).
• Onglet “Console” : Vous pouvez y exécuter du JavaScript en direct.
  • Essayez d’y coller cette ligne pour voir le flag : Copyalert('The pass is: ' + String.fromCharCode(67, 71, 123, 116, 117, 116, 111, 114, 105, 97, 108, 95, 106, 115, 95, 97, 115, 99, 105, 105, 125))

📌 Pourquoi c’est utile ?

• Les Dev Tools sont indispensables pour déboguer ou explorer des pages web.
• En cybersécurité, elles permettent d’analyser le comportement des sites.