Qu’est-ce que le code JavaScript ?

Le JavaScript est un langage de programmation qui s’exécute côté client dans le navigateur. Créé en 1995 par Brendan Eich chez Netscape, c’est un langage à prototype : tous les objets dérivent d’autres objets via un système de chaînage prototypal, pas de classes traditionnelles (avant ES6).

JavaScript utilise un système unique  basé sur le prototype. Chaque objet hérite directement des propriétés/méthodes de son prototype.

objet1 → prototype → Object.prototype
         ↑
      objet2

Ce qu’on peut faire avec JavaScript

Domaine	Exemple concret	Code correspondant
Interactivité	Bouton change couleur au clic	onclick, addEventListener
Formulaires	Validation email en temps réel	onkeyup, regex
Animations	Menu qui s’ouvre/ferme	transition, requestAnimationFrame
Calculs	Panier e-commerce total TTC	reduce(), parseFloat()
AJAX/Fetch	Charger données sans recharger page	fetch('/api/users')
LocalStorage	Sauvegarder panier entre sessions	localStorage.setItem()
Canvas 2D	Dessiner graphiques, jeux simples	, getContext('2d')
Web APIs	Accès caméra, géolocalisation	navigator.geolocation

Préparer son environnement de développement

Aucun téléchargement complexe. JavaScript s’exécute nativement dans tout navigateur moderne.

1. Crée dossier : C:\mes-projets-js\
2. Crée fichier : index.html (PAS .js seul)
3. Double-clic = exécution instantanée
4. F12 → Console = débogage en direct

Choisir un éditeur de code

Éditeur	Pourquoi débutant ?	Astuce rapide
VS Code	Coloration + auto-complétion	Ctrl+P (recherche fichier)
Notepad++	Ultra-léger	Ctrl+B (barre outils)
Bloc-notes	Disponible partout	Ctrl+S systématique

Recommandation : VS Code est gratuit et met à disposition une extension « Live Server ». Cette extension permet un rafraichissement à chaud de la page html dans le navigateur dès que les changements dans le code sont enregistrés.

Comment commenter du code JS ?

Les commentaires expliquent sans s’exécuter.Voici une petite astuce: Ctrl+/ permet de commenter/décommenter instantanément.

// commentaire sur une ligne

/*
Ce bloc explique
l'algorithme complet
pour les débutants
*/

Comment intégrer du code JavaScript dans une page HTML ?

Il existe plusieurs façon d’intégrer:

• En le mettant dans la balise head. Cette façon d’intégrer du code Javascript n’est pas recommandé car les bloque le chargement de la page.

• A la fin de la balise body. C’est une façon acceptable mais si elle n’est pas idéale/optimale car elle permet le chargement rapide de la première partie de la page.
• Dans un fichier externe.

La troisième méthode est la meilleure façon d’ajouter du code Javascript pour deux raison. D’abord on ne surcharge pas la page avec du code qui n’a pas à être dans le code HTML. Ensuite, l’attribut « defer » permet de charger la page en premier, puis de charger le code Javascript

Il est également possible d’utiliser un deuxième attribut à la place de « defer ». Ce second attribut est « async », il est utiliser quand les fichiers javascript n’ont pas d’interactions entre eux. Ils peuvent donc être charger de façon asynchrone.

Les notions de base du code JavaScript

• Les variables
• Les opérateurs
• Les opérateurs de comparaison
• Les conditions
• Les boucles
  • for et while

  • for (nombre connu)

  • while

  • for…of pour les tableaux

  • Les fonctions qui encapsulent du code réutilisable.

  • Les fonction anonyme

• La manipulation du DOM

• La programmation orientée objet

JavaScript utilise des classes pour grouper les données et les méthodes. Dans une classe , les fonctions sont appelées « méthodes »

Quand utiliser la POO en JavaScript ?

Projet	Procédural	POO
1 bouton cliquable	✅	❌
Formulaire validation	✅	⚠️
Liste produits	⚠️	✅
Application complète	❌	✅

Seuil : Si la même logique répétée 3 fois, alors on peut créer une classe pour centraliser cette logique.

Bonnes pratiques pour ton code JavaScript

• Il faut toujours vérifier l’existence d’une variable avant d’éxécuter des actions dessus
• Utiliser === pour une comparaison stricte , on vérifie l’égalité de la valeur et du type de la variable

• parseFloat() pour les nombres saisis

• try/catch pour capturer et gérer les erreurs