JavaScript

JavaScript apporte de l'interactivité aux pages web. Il modifie le contenu, réagit aux actions utilisateur et pilote une grande partie des applications modernes.

Rôle

HTML       → structure
CSS        → apparence
JavaScript → comportement

JavaScript peut :

• modifier une page dynamiquement
• vérifier des formulaires
• afficher des menus interactifs
• créer des animations
• mettre à jour du contenu sans recharger la page
• appeler des API
• lire certains éléments du navigateur

Bases du langage

Variables :

let nom = "Alice"
let age = 25

Conditions :

if (age >= 18) {
  console.log("Accès autorisé")
} else {
  console.log("Accès refusé")
}

Fonctions :

function saluer(nom) {
  console.log("Bonjour " + nom)
}

DOM

Le DOM représente la page sous forme d'arbre.

HTML
 └── BODY
      ├── H1
      ├── P
      └── BUTTON

JavaScript peut modifier cet arbre.

document.getElementById("titre").textContent = "Nouveau titre"
document.querySelector(".menu")

Événements

Un événement correspond à une action : clic, saisie clavier, mouvement de souris, envoi de formulaire.

document
  .getElementById("bouton")
      .addEventListener("click", function () {
    alert("Bouton cliqué")
  })

Appels API

Les applications modernes utilisent souvent JavaScript pour interroger une API sans recharger toute la page.

fetch("/api/profile")
  .then((response) => response.json())
  .then((data) => {
    console.log(data)
  })

Dans les outils de développement, l'onglet réseau permet de voir ces requêtes, leurs paramètres, leurs headers, leurs cookies et les réponses reçues.

Stockage navigateur

JavaScript peut utiliser différents espaces de stockage côté navigateur.

Les secrets sensibles ne doivent pas être stockés dans du JavaScript accessible côté client. Une clé API privée ou un mot de passe présent dans le front-end doit être considéré comme exposé.

Point sécurité

La validation côté client améliore l'expérience utilisateur, mais elle ne suffit jamais. Le code JavaScript peut être modifié ou contourné par l'utilisateur.

Risques associés :

• XSS
• manipulation du DOM
• contournement de validation côté client
• exposition de secrets dans le code front-end
• dépendances JavaScript vulnérables
• logique métier trop présente côté client

Bons réflexes

• valider les données côté serveur
• encoder correctement les sorties
• éviter les secrets dans le front-end
• limiter les dépendances inutiles
• garder les dépendances à jour
• surveiller les erreurs côté navigateur
• appliquer une politique CSP quand c'est pertinent