Apprendre JavaScript : rendre une page interactive

Qu'est-ce que JavaScript ?

JavaScript est un langage de programmation exécuté par le navigateur. Contrairement à HTML qui décrit et CSS qui présente, JavaScript donne un comportement à la page : ouvrir un menu, vérifier un formulaire, filtrer une liste ou mettre à jour une progression.

Il a été créé en 1995 par Brendan Eich chez Netscape. Malgré son nom, JavaScript est différent de Java. Il a évolué pour devenir l'un des langages les plus utilisés, aussi bien dans le navigateur que sur des serveurs avec Node.js.

Où écrire et tester votre code ?

Sur une page web, JavaScript est généralement chargé depuis un fichier externe avec une balise script placée avant la fin du body. Ouvrez la console des outils de développement du navigateur pour lire vos messages et tester des instructions.

<script src="assets/script.js"></script>

console.log('Mon script fonctionne');

Les types de données essentiels

Une valeur peut être du texte ('bonjour'), un nombre (42), un booléen (true ou false), une liste ou un objet. Comprendre le type d'une donnée évite de nombreuses erreurs.

const message = 'Bonjour';
const prix = 19.99;
const estDisponible = true;
const couleurs = ['cyan', 'rose', 'vert'];

1. Déclarer des variables

Utilisez const par défaut pour une valeur qui ne change pas et let lorsqu'elle doit évoluer. Évitez var, plus ancien et moins prévisible.

const nom = 'Kreatix';
let nombreDeVisites = 0;

nombreDeVisites = nombreDeVisites + 1;

2. Prendre une décision

Une condition if exécute un bloc seulement si une expression est vraie. Utilisez l'égalité stricte === pour comparer la valeur et son type.

const estConnecte = true;

if (estConnecte === true) {
  console.log('Bienvenue !');
} else {
  console.log('Connectez-vous.');
}

3. Réutiliser une action avec une fonction

Une fonction regroupe des instructions. Elle peut recevoir des paramètres et retourner un résultat. Donnez-lui un nom qui décrit l'action réalisée.

function calculerTotal(prix, quantite) {
  return prix * quantite;
}

const total = calculerTotal(12, 3);

4. Sélectionner et modifier le DOM

Le DOM est la représentation de la page par le navigateur. document.querySelector sélectionne le premier élément correspondant à un sélecteur CSS. Vous pouvez ensuite modifier son texte, ses classes ou ses attributs.

const titre = document.querySelector('h1');
titre.textContent = 'Nouveau titre';
titre.classList.add('est-visible');

5. Réagir aux événements et mémoriser une donnée

Un événement est une action, par exemple un clic, une saisie ou l'envoi d'un formulaire. addEventListener exécute une fonction lorsqu'il se produit. Pour conserver une petite donnée entre deux visites, utilisez localStorage.

const bouton = document.querySelector('button');

bouton.addEventListener('click', () => {
  localStorage.setItem('theme', 'sombre');
});

6. Travailler avec des listes et des objets

Un tableau stocke une série de valeurs. Utilisez map pour transformer ses éléments, filter pour en garder certains et find pour rechercher le premier résultat. Un objet regroupe des informations sous des clés nommées.

const projet = { nom: 'Portfolio', publie: true };
const prixAvecTaxe = [10, 20, 30].map(prix => prix * 1.2);

7. Anticiper les opérations asynchrones

Une requête réseau prend du temps. Les mots-clés async et await permettent d'attendre son résultat sans bloquer la page. Entourez les opérations qui peuvent échouer d'un try...catch pour informer la personne plutôt que de laisser une erreur silencieuse.

async function chargerProjets() {
  const reponse = await fetch('/api/projets');
  return reponse.json();
}