Introduction au JavaScript

Rendre vos pages web dynamiques et interactives

Par Loïc Durand / Formateur et développeur

Qu'est-ce que le JavaScript exactement ?

Le JavaScript est un langage de programmation qui s'exécute directement dans votre navigateur web.

Il permet de rendre vos pages web vivantes et réactives.

Mais attendez... Encore un nouveau langage ?

Je vous entends déjà 😅

Rassurez-vous, c'est la dernière pièce du puzzle en front ! 🧩

• HTML = La structure (les fondations de votre maison)
• CSS = Le style (la décoration)
• JavaScript = L'interactivité (l'électricité, la plomberie, tout ce qui fait vivre la maison)

Le JavaScript ne se limite pas au web ! 🚀

C'est une compétence qui vous ouvrira de nombreuses portes.

La preuve : même SpaceX l'utilise !

Eh oui, les interfaces de contrôle des fusées utilisent du JavaScript !

Points clés :

• Interface des astronautes : Les écrans tactiles utilisés par les pilotes du Crew Dragon ne fonctionnent pas avec des boutons manuels complexes, mais avec une interface utilisateur moderne. Cette interface est entièrement écrite en JavaScript et HTML, et elle tourne sur le moteur Chromium.

• Fiabilité prouvée : Le fait qu'une technologie de développement web soit utilisée pour piloter un vaisseau spatial dans l'espace démontre que JavaScript est suffisamment fiable et robuste pour des applications où des vies humaines sont en jeu.

Les différents environnements JavaScript

Le JavaScript peut s'exécuter dans plusieurs contextes :

1. Dans le navigateur 🌐

Chrome, Firefox, Safari, Edge...

C'est ce que nous allons étudier principalement.

2. Sur un serveur 🖥️

Avec Node.js, vous pouvez créer des applications serveur complètes en JavaScript.

3. Dans des applications 📱

• Electron : pour créer des applications desktop (comme VS Code ! ou Discord)
• React Native : pour créer des applications mobiles
• Cordova : pour transformer votre code web en application mobile

Une bonne nouvelle pour vous ! 😊

Tout ce que vous allez apprendre ici sera transférable à tous ces environnements.

Vous apprenez un seul langage pour créer des sites web, des applications mobiles, des applications desktop et des serveurs !

Les différentes versions de JavaScript

Vous entendrez parler de plusieurs noms...

EcmaScript : le standard officiel

JavaScript suit un standard appelé ECMAScript (ou ES)

• ES5 : l'ancienne version (2009)
• ES6 / ES2015 : la grande révolution moderne
• ES2016, ES2017... ES2026 : des améliorations chaque année

Mais attention aux navigateurs ! ⚠️

Chaque navigateur implémente JavaScript à sa façon :

• Google Chrome
• Mozilla Firefox
• Safari
• Edge
• ~~Internet Explorer 6~~ (LOL, oubliez-le, vraiment 😅)

Oui, c'est un peu le bazar...

Les navigateurs évoluent constamment

C'est à la fois une bonne et une mauvaise nouvelle :

✅ De nouvelles fonctionnalités arrivent régulièrement

❌ Toutes les fonctionnalités ne sont pas supportées partout

Comment savoir si une fonctionnalité est supportée ?

Utilisez caniuse.com !

C'est LE site de référence pour vérifier la compatibilité des fonctionnalités web.

Les trois approches pour coder en JavaScript

Maintenant que nous savons où et comment JavaScript fonctionne, voyons comment nous allons l'utiliser.

Approche 1 : VanillaJS 🍦

C'est-à-dire JavaScript pur, sans aucune bibliothèque externe.

Approche 2 : jQuery 📚

Une bibliothèque qui simplifie grandement JavaScript.

Très populaire pendant des années, aujourd'hui moins utilisée (mais toujours pertinente pour découvrir).

Approche 3 : Les frameworks modernes 🏗️

• Vue.js : simple et progressif
• React : développé par Facebook/Meta
• Svelte : le petit nouveau très performant

Pour des applications web complexes.

Alors, laquelle choisir ?

Pour apprendre, on va commencer par VanillaJS.

Pourquoi ? Parce que comprendre les bases vous permettra de mieux utiliser n'importe quelle bibliothèque ou framework par la suite !

Pourquoi utiliser JavaScript ?

Voyons concrètement ce que JavaScript va vous permettre de faire.

1. Valider les saisies utilisateur ✓

Vérifier qu'un email est correct, qu'un mot de passe est assez fort... Tout ça avant d'envoyer les données au serveur.

2. Créer de l'interactivité 🎮

Menus déroulants, sliders, onglets, modales... Tout ce qui rend une page vivante !

3. Utiliser des bibliothèques puissantes 📦

Graphiques, cartes interactives, éditeurs de texte... Des milliers de bibliothèques sont disponibles.

4. Créer des animations 🎨

Même si CSS peut faire beaucoup, JavaScript permet des animations beaucoup plus complexes et interactives.

Où écrire votre code JavaScript ?

Deux possibilités s'offrent à vous.

Option 1 : Directement dans le HTML

Pratique pour tester rapidement, mais déconseillé pour de vrais projets.

Option 2 : Dans des fichiers externes 📁

Mon conseil de formateur 👨‍🏫

Dès le début, organisez votre code :

• Un dossier js/ pour vos scripts JavaScript
• Des noms de fichiers explicites
• Un fichier = une responsabilité

Vous me remercierez plus tard ! 😊

Les alternatives à JavaScript

Vous entendrez peut-être parler d'autres langages...

CoffeeScript ☕

Syntaxe plus concise, très utilisée dans le monde Ruby.

Moins populaire aujourd'hui.

TypeScript 💙

JavaScript avec du typage fort. Développé par Microsoft.

Idéal pour les gros projets où vous devez maintenir du code propre.

Kotlin 🟣

Le langage d'Android peut aussi être compilé en JavaScript !

Intéressant si vous venez du monde mobile.

Les outils indispensables

Avant de commencer à coder, parlons des outils qui vont vous accompagner.

Les outils de développement du navigateur 🔧

Tous les navigateurs modernes intègrent des DevTools (outils de développement).

La console JavaScript 💻

C'est votre meilleur ami pour :

• Tester du code rapidement


• Déboguer vos scripts


• Afficher des informations

Vous allez passer beaucoup de temps avec elle !

Un bon éditeur de code ✍️

Quelques recommandations :

• VS Code : gratuit, puissant, très populaire (mon choix personnel !)
• WebStorm : payant mais très complet
• Sublime Text : léger et rapide

Votre premier "Hello World" 👋

Le moment est venu d'écrire votre première ligne de code JavaScript !

TP1 : Mise en pratique

Maintenant que vous avez les bases, passons à la pratique !

JavaScript : un langage de programmation

Maintenant que vous avez touché du code, parlons plus en détail du langage lui-même.

JavaScript est un langage faiblement typé

Qu'est-ce que ça veut dire ? 🤔

Le typage, c'est quoi ?

En programmation, chaque donnée a un type :

• Un nombre


• Du texte


• Un booléen (vrai/faux)


• etc.

Faiblement typé = Flexible

En JavaScript, vous n'avez pas à déclarer explicitement le type de vos variables.

Le langage s'adapte automatiquement !

Oui, ça peut faire un peu peur au début...

Mais ça va bien se passer ! 😊

Ne vous inquiétez pas, avec un peu de pratique, tout deviendra naturel.

JavaScript est conçu pour être accessible aux débutants.

Les fondamentaux du langage

Comme tout langage de programmation, JavaScript a sa syntaxe et ses règles.

Voyons les plus importantes.

Le point-virgule ;

Chaque instruction se termine par un point-virgule.

Les commentaires 💬

Commenter votre code est essentiel pour vous et vos collègues !

Commentaire sur une ligne

Commentaire multi-lignes

Les variables 📦

Une variable, c'est comme une boîte dans laquelle vous rangez une information.

Trois façons de déclarer une variable

let : pour les variables

Utilisez let quand la valeur de votre variable va changer.

const : pour les constantes

Utilisez const quand la valeur ne doit jamais changer.

Pourquoi utiliser const ?

Cela rend votre code plus sûr et plus prévisible.

Si vous savez qu'une valeur ne doit pas changer, utilisez const !

Les différents types de données

JavaScript connaît plusieurs types de données. Découvrons-les !

Les nombres (Numbers) 🔢

En JavaScript, pas de distinction entre entiers et décimaux : tout est number.

Les chaînes de caractères (Strings) 📝

Trois façons d'écrire du texte, avec une préférence pour les backticks (\`) qui permettent d'insérer des variables.

Les booléens (Booleans) ✓✗

Un booléen ne peut avoir que deux valeurs : true (vrai) ou false (faux).

Très utile pour les conditions !

Les tableaux (Arrays) 📋

Un tableau, c'est une liste ordonnée d'éléments.

Les objets (Objects) 🏗️

Un objet, c'est une structure avec des propriétés (ou "clés") et leurs valeurs.

Tableau récapitulatif des types

| Type | Exemple | Usage |
| --------- | -------------------------- | ------------------------------------------ |
| number | 42 ou 3.14 | Pour les calculs mathématiques |
| string | "Bonjour" | Pour stocker du texte |
| boolean | true ou false | Pour les conditions logiques |
| array | [1, 2, 3] | Pour les listes d'éléments |
| object | {nom: "Durand"} | Pour structurer des données complexes |

Une particularité importante de JavaScript

JavaScript permet de changer le type d'une variable.

C'est puissant mais peut causer des erreurs, soyez vigilant !

Attention aux redéclarations !

Une variable ne peut être déclarée qu'une seule fois avec let ou const.

Cas pratique : les constantes

Imaginez que vous gérez des statuts de commande :

Comparez ces deux approches

Les constantes rendent votre code auto-documenté !

Découvrons les outils de développement

Avant d'aller plus loin, familiarisons-nous avec notre meilleur allié : la console.

Testons JavaScript en direct ! 🎯

La console permet de tester du code sans avoir à créer de fichier.

Ouvrez-la et expérimentez !

Quelques commandes utiles

Les points d'arrêt (breakpoints)

Vous pouvez mettre en pause l'exécution de votre code pour l'inspecter.

Extrêmement utile pour comprendre ce qui se passe !

Les fonctions 🎯

Une fonction, c'est comme une recette de cuisine : un ensemble d'instructions qu'on peut réutiliser.

Déclarer une fonction simple

Appeler (utiliser) une fonction

C'est aussi simple que ça !

Fonction avec des paramètres

Les paramètres permettent de personnaliser le comportement.

Fonction qui retourne une valeur

Le mot-clé return permet à la fonction de renvoyer un résultat.

Exemple complet

À votre tour de tester ! 🧪

Ouvrez la console et créez vos propres fonctions :

• Une fonction qui multiplie deux nombres
• Une fonction qui calcule le carré d'un nombre
• Une fonction qui convertit des euros en dollars

Les conditions ⚖️

Les conditions permettent à votre programme de prendre des décisions.

Structure de base : if / else

"Si l'âge est supérieur ou égal à 18, alors ... sinon ..."

Condition avec un booléen

Quand la variable est déjà un booléen, pas besoin de == true !

Conditions multiples

Conditions avec des fonctions

Vous pouvez utiliser des fonctions dans vos conditions !

Exercice pratique 📝

Créez un petit programme qui :

1. Demande l'âge de l'utilisateur


2. Affiche s'il peut conduire (18 ans minimum)


3. Affiche s'il peut voter (18 ans minimum)

Testez dans la console !

Les boucles 🔄

Une boucle permet de répéter une action plusieurs fois.

La boucle while (tant que)

"Tant que compteur est inférieur à 5, affiche et incrémente"

⚠️ Attention à la boucle infinie !

Évitez ça ! Votre navigateur va se bloquer.

La boucle for (pour)

La syntaxe classique, très utilisée.

Décortiquons le for

• let i = 0 : Initialisation
• i < 5 : Condition de continuation
• i++ : Incrémentation (équivalent à i = i + 1)

Les méthodes modernes pour les tableaux 🚀

En JavaScript moderne, on préfère utiliser des méthodes plus élégantes.

forEach : parcourir un tableau

Plus lisible et moins d'erreurs possibles !

map : transformer un tableau

filter : filtrer un tableau

Version plus concise (syntaxe fléchée)

Quand il n'y a qu'une instruction, on peut simplifier !

Mon conseil de formateur 💡

Privilégiez les méthodes modernes (forEach, map, filter) aux boucles for classiques.

Elles sont :

• Plus lisibles


• Moins sujettes aux erreurs


• Plus "dans l'esprit" du JavaScript moderne

Attention sur Internet ! ⚠️

Vous trouverez beaucoup d'anciens tutoriels utilisant les boucles for classiques.

Ce n'est pas faux, mais c'est moins moderne.

Apprenez les deux, mais préférez les nouvelles méthodes dans votre code.

Pratiquons ensemble ! 🎮

Ouvrez la console et testez :

• Une boucle qui affiche les nombres de 1 à 10
• Une boucle qui parcourt votre tableau de fruits préféré
• Une fonction qui double tous les éléments d'un tableau

Prenez votre temps, la pratique est la clé !

Le DOM : votre page web devient manipulable 🎪

Maintenant que vous maîtrisez JavaScript, voyons comment interagir avec votre page HTML.

Qu'est-ce que le DOM ?

C'est une représentation de votre page HTML sous forme d'arbre.

Votre page HTML = un arbre 🌳

Chaque élément HTML est un nœud dans cet arbre.

Explorons le DOM avec les DevTools 🔍

Ouvrez les outils de développement (F12) et allez dans l'onglet Elements.

Vous voyez votre page représentée sous forme d'arbre !

JavaScript peut manipuler cet arbre ! ✨

Vous pouvez :

• Sélectionner des éléments


• Modifier leur contenu


• Changer leur apparence


• Les créer ou les supprimer


• Et bien plus !

Les sélecteurs : cibler des éléments

Comme en CSS, on utilise des sélecteurs pour cibler des éléments.

Les trois types de sélecteurs principaux

| Sélecteur CSS | Dans HTML | Usage |
| ------------- | --------------------- | ------------------------------ |
| #monId | id="monId" | Élément unique |
| .maClasse | class="maClasse" | Plusieurs éléments similaires |
| p |

| Tous les éléments de ce type |

Sélectionner avec VanillaJS

Deux approches : l'ancienne et la moderne.

L'ancienne méthode (à connaître)

Fonctionnelle mais verbeuse.

La méthode moderne (recommandée) ✅

Plus simple et cohérent avec CSS !

Exemple pratique

Parcourir plusieurs éléments

On change la couleur de tous les paragraphes !

Alternative : jQuery

jQuery simplifie encore plus la syntaxe (si vous incluez la bibliothèque).

Simple et élégant, mais moins utilisé aujourd'hui.

Créer des éléments dynamiquement 🏗️

Vous pouvez créer de nouveaux éléments HTML avec JavaScript !

Exemple de création d'élément

Une méthode alternative plus simple

⚠️ Attention à la sécurité !

Cette méthode peut créer une faille XSS (Cross-Site Scripting) si vous insérez du contenu utilisateur non nettoyé.

Modifier l'apparence des éléments 🎨

JavaScript peut changer le CSS de vos éléments.

Méthode 1 : Modifier le style directement

Méthode 2 : Ajouter/retirer des classes CSS ✅

Avec jQuery

TP : Manipulation du DOM 🚀

Passons à la pratique pour bien assimiler tout ça !

Récupérer les valeurs saisies par l'utilisateur 📝

Élément crucial pour créer des formulaires interactifs !

Exemple avec un champ de texte

Avec jQuery

Encore plus concis !

TP : Le Générateur de punitions 📄

Un TP amusant pour pratiquer tout ce que nous avons vu !

Les événements : réagir aux actions 🎯

C'est là que votre page devient vraiment interactive !

Qu'est-ce qu'un événement ?

Un événement, c'est quelque chose qui se passe :

• L'utilisateur clique sur un bouton
• L'utilisateur tape au clavier
• La page a fini de charger
• La souris survole un élément
• etc.

Exemples d'événements courants

• click : clic de souris
• submit : envoi d'un formulaire
• keypress : touche du clavier pressée
• mouseover : survol de la souris
• scroll : défilement de la page
• resize : redimensionnement de la fenêtre

Et même des événements avancés ! 🚀

• Géolocalisation (GPS)
• NFC (puce sans contact)
• Notifications push
• Webcam et microphone
• etc.

Deux façons d'attacher des événements

Voyons comment écouter ces événements.

Méthode 1 : Dans le HTML

Simple mais mélange HTML et JavaScript (pas idéal).

Méthode 2 : En JavaScript ✅

Avec jQuery

Le mot-clé magique : this

Simple ou compliqué ?

Au début, les événements peuvent sembler complexes.

Mais avec la pratique, ils deviennent naturels !

La liste complète des événements

Il existe beaucoup d'événements possibles.

TP : Gestion d'événements (partie 1) 🎮

Pratiquons avec des exercices concrets !

TP : Gestion d'événements (partie 2) 🎮

Continuons avec des cas plus avancés !

L'AJAX : communiquer avec un serveur 🌐

Le Saint Graal du web moderne !

AJAX, c'est quoi ?

Cela permet à votre page de communiquer avec un serveur sans recharger la page.

Exemple concret

Quand vous aimez une photo sur Instagram, la page ne recharge pas.

C'est de l'AJAX !

Le code asynchrone ⏱️

Concept fondamental à comprendre.

Question piège ! 🤔

Que va afficher le console.log() ?

Réponse

Il va afficher une chaîne vide "" !

Pourquoi ? Parce que la requête AJAX prend du temps, et le console.log() s'exécute avant que la réponse arrive.

Le principe de l'asynchrone

JavaScript continue de s'exécuter sans attendre la fin de l'AJAX.

C'est comme si vous envoyiez un email et que vous continuiez votre travail sans attendre la réponse.

Deux approches pour l'AJAX

Approche 1 : VanillaJS moderne

Avec fetch et les Promises

Approche 2 : jQuery

Les Promises : gérer l'asynchrone

Une Promise représente une valeur qui sera disponible plus tard.

Anatomie d'une Promise

L'AJAX, un vaste sujet ! 📚

C'est un domaine complexe, on pourrait y passer des heures.

Commençons par une première expérimentation pratique !

TP : Découverte de l'AJAX 🚀

Aller plus loin : les frameworks modernes 🏗️

Une fois les bases maîtrisées, vous pouvez explorer des outils plus puissants.

Les trois grands frameworks JavaScript

• Vue.js : progressif et accessible
• React : développé par Meta (Facebook)
• Svelte : nouveau et très performant

Pourquoi utiliser un framework ?

Pour des applications web complexes :

• Gestion d'état simplifiée
• Composants réutilisables
• Performances optimisées
• Écosystème riche

Pour en savoir plus

Félicitations ! 🎉

Vous avez terminé cette introduction au JavaScript.

Ce que vous avez appris

• Les bases du langage JavaScript
• La manipulation du DOM
• La gestion des événements
• Les requêtes AJAX
• Les bonnes pratiques

La suite de votre apprentissage 🚀

JavaScript est un langage immense.

Continuez à pratiquer, à expérimenter, à casser (et à réparer) !

Mes conseils pour progresser

1. Pratiquez régulièrement (un peu chaque jour)
2. Lisez du code (GitHub, CodePen)
3. Créez des projets personnels
4. Rejoignez des communautés (forums, Discord)
5. Restez curieux et à jour

Ressources recommandées 📚

• MDN Web Docs : LA référence
• JavaScript.info : tutoriel complet
• FreeCodeCamp : exercices pratiques
• Eloquent JavaScript : livre gratuit

N'oubliez pas

"Le meilleur moment pour planter un arbre était il y a 20 ans.

Le deuxième meilleur moment, c'est maintenant."

Continuez à apprendre et à créer ! 💪

Merci de votre attention ! 🙏

Des questions ?

Formateur et développeur

Bon courage pour la suite de votre parcours ! 🚀