Skip to content
Narration Interactive

JavaScript

📋 Inclure JavaScript

Section titled “📋 Inclure JavaScript”
<head>
  <script src="js/main.js" defer></script>
</head>

defer = charge après le HTML ✅

🎯 Sélectionner des éléments

Section titled “🎯 Sélectionner des éléments”
// Un seul élément
const button = document.querySelector('.button');
const menu = document.querySelector('#menu');
const firstLink = document.querySelector('a');


// Tous les éléments
const allButtons = document.querySelectorAll('.button');
const allCards = document.querySelectorAll('.card');

🎨 Manipuler les classes

Section titled “🎨 Manipuler les classes”
const element = document.querySelector('.card');


// Ajouter
element.classList.add('active');


// Retirer
element.classList.remove('active');


// Basculer (toggle)
element.classList.toggle('active');


// Vérifier
if (element.classList.contains('active')) {
  console.log('Actif !');
}

👂 Écouter des événements

Section titled “👂 Écouter des événements”
const button = document.querySelector('.button');


// Click
button.addEventListener('click', () => {
  console.log('Cliqué !');
});


// Autres événements
element.addEventListener('mouseenter', () => {});  // Souris entre
element.addEventListener('mouseleave', () => {});  // Souris sort
element.addEventListener('keydown', () => {});     // Touche pressée
element.addEventListener('submit', () => {});      // Formulaire soumis

💡 Exemples essentiels

Section titled “💡 Exemples essentiels”

Toggle menu mobile

Section titled “Toggle menu mobile”
const menuButton = document.querySelector('.menu-toggle');
const nav = document.querySelector('.nav');


menuButton.addEventListener('click', () => {
  nav.classList.toggle('open');
});
.nav {
  display: none;
}
.nav.open {
  display: block;
}

Accordion / FAQ

Section titled “Accordion / FAQ”
const questions = document.querySelectorAll('.faq-question');


questions.forEach(question => {
  question.addEventListener('click', () => {
    const answer = question.nextElementSibling;
    answer.classList.toggle('open');
  });
});
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-answer.open {
  max-height: 500px;
}

Smooth scroll vers section

Section titled “Smooth scroll vers section”
const links = document.querySelectorAll('.smooth-scroll');


links.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const targetId = link.getAttribute('href');
    const target = document.querySelector(targetId);
    target.scrollIntoView({ behavior: 'smooth' });
  });
});
<a href="#section1" class="smooth-scroll">Section 1</a>
<section id="section1">...</section>

Tabs / Onglets

Section titled “Tabs / Onglets”
const tabs = document.querySelectorAll('[data-tab]');
const contents = document.querySelectorAll('[data-content]');


tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const target = tab.dataset.tab;


    // Retirer 'active' de tous
    tabs.forEach(t => t.classList.remove('active'));
    contents.forEach(c => c.classList.remove('active'));


    // Ajouter 'active' aux éléments ciblés
    tab.classList.add('active');
    document.querySelector(`[data-content="${target}"]`).classList.add('active');
  });
});
<button data-tab="tab1">Tab 1</button>
<button data-tab="tab2">Tab 2</button>


<div data-content="tab1">Contenu 1</div>
<div data-content="tab2">Contenu 2</div>

Modal / Popup

Section titled “Modal / Popup”
const openModal = document.querySelector('.open-modal');
const closeModal = document.querySelector('.close-modal');
const modal = document.querySelector('.modal');


openModal.addEventListener('click', () => {
  modal.classList.add('active');
});


closeModal.addEventListener('click', () => {
  modal.classList.remove('active');
});


// Fermer au click en dehors
modal.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.classList.remove('active');
  }
});
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
.modal.active {
  display: flex;
}

📝 Manipuler le contenu

Section titled “📝 Manipuler le contenu”
const element = document.querySelector('.text');


// Changer le texte
element.textContent = 'Nouveau texte';


// Changer le HTML
element.innerHTML = '<strong>Texte en gras</strong>';


// Changer un attribut
element.setAttribute('data-id', '123');


// Lire un attribut
const id = element.getAttribute('data-id');


// Changer le style inline (à éviter, préférez les classes)
element.style.color = 'red';

⚡ Exemples pratiques avec données

Section titled “⚡ Exemples pratiques avec données”

Compteur

Section titled “Compteur”
let count = 0;
const counter = document.querySelector('.counter');
const btnPlus = document.querySelector('.btn-plus');
const btnMinus = document.querySelector('.btn-minus');


btnPlus.addEventListener('click', () => {
  count++;
  counter.textContent = count;
});


btnMinus.addEventListener('click', () => {
  count--;
  counter.textContent = count;
});

Dark mode toggle

Section titled “Dark mode toggle”
const toggle = document.querySelector('.dark-mode-toggle');


toggle.addEventListener('click', () => {
  document.body.classList.toggle('dark-theme');


  // Sauvegarder la préférence
  const isDark = document.body.classList.contains('dark-theme');
  localStorage.setItem('darkMode', isDark);
});


// Charger la préférence au démarrage
if (localStorage.getItem('darkMode') === 'true') {
  document.body.classList.add('dark-theme');
}

🔑 Gestion du clavier

Section titled “🔑 Gestion du clavier”
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    // Fermer modal, menu, etc.
    modal.classList.remove('active');
  }


  if (e.key === 'Enter') {
    // Soumettre formulaire
  }
});

Touches courantes :

  • 'Enter', 'Escape', 'Tab'
  • 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'
  • ' ' (espace)

⚠️ Bonnes pratiques

Section titled “⚠️ Bonnes pratiques”

✅ À faire :

  • defer sur les scripts
  • Vérifier que l’élément existe avant manipulation
  • Utiliser classList plutôt que style inline
  • Event delegation pour listes dynamiques

❌ À éviter :

  • Trop de JavaScript inline dans le HTML
  • Manipuler le DOM dans une boucle
  • Oublier de retirer les event listeners
Vérifier l’existence d’un élément
const element = document.querySelector('.element');


if (element) {
  // L'élément existe, on peut le manipuler
  element.classList.add('active');
} else {
  console.log('Élément non trouvé');
}

🧪 Template complet

Section titled “🧪 Template complet”
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>JS Example</title>
  <script src="js/main.js" defer></script>
  <style>
    .box { padding: 2rem; background: #eee; }
    .box.active { background: #667eea; color: white; }
  </style>
</head>
<body>
  <button class="toggle-btn">Toggle</button>
  <div class="box">Cliquez le bouton</div>
</body>
</html>
js/main.js
const button = document.querySelector('.toggle-btn');
const box = document.querySelector('.box');


button.addEventListener('click', () => {
  box.classList.toggle('active');
});