JS

JavaScript

Le langage du Web

Introduction Histoire Premiers pas

Défiler pour commencer

Cours C122

Programmation du client web

ESIG 1ère année — Semestre 2

Présentation

Objectifs, outils et organisation du cours

Plan d'enseignement

15 séances détaillées avec objectifs

Liste des exercices

44 exercices répartis en 9 modules

Informations

📅 21 janvier → 27 mai 2026
🕐 Mercredi 12:55 - 14:25
📍 Salle A2-07
⏱️ 30 périodes (15 séances)

Objectifs

✓ Maîtriser JavaScript
✓ Manipuler le DOM
✓ Créer des formulaires
✓ Consommer une API

01 / Introduction

Qu'est-ce que JavaScript ?

JavaScript est un langage de script, multiplateforme et orienté objet.

C'est un langage léger qui doit faire partie d'un environnement hôte (un navigateur web par exemple) pour pouvoir être utilisé.

Créé en 1995 par Brendan Eich chez Netscape, initialement appelé LiveScript.

Le saviez-vous ?

JavaScript ≠ Java

Renommé JavaScript pour bénéficier de la popularité de Java dans les années 90. Les deux langages n'ont rien en commun !

ECMAScript

Nom officiel standardisé par ECMA (European Computer Manufacturers Association). ES6 (2015) est la version majeure moderne.

Documentation MDN →

02 / Histoire

L'évolution de JavaScript

1995

Naissance

Création par Brendan Eich. Pages web interactives, validation de formulaires.

2006

jQuery

Simplification du DOM, animations, compatibilité navigateurs.

2009

ES5

Mode strict, JSON natif, nouvelles méthodes tableaux.

2010-14

Frameworks MVC

Backbone.js, AngularJS, Ember.js. Applications web structurées.

2015

ES6 / ES2015

let, const, arrow functions, Promises, modules.

2013-16

Frameworks modernes

React (2013), Vue.js (2014), Angular 2+ (2016). Composants & Virtual DOM.

💡 Aujourd'hui

JavaScript est le langage le plus utilisé au monde. Il évolue chaque année avec de nouvelles fonctionnalités (ES2020, ES2023...).

03 / Caractéristiques

Généralités sur JavaScript

Langage interprété

Exécuté ligne par ligne, pas de compilation

Orienté objet

Basé sur les prototypes

Typage dynamique

Les types sont déterminés à l'exécution

Multiplateforme

Navigateur, serveur, mobile, desktop

Sensible à la casse

maVariable ≠ mavariable

Attention !

JavaScript ≠ Java (aucun lien !)

04 / Navigateur

JavaScript côté client

JavaScript est principalement utilisé dans le navigateur pour rendre les pages web interactives.

Les traitements côté client permettent des interactions plus rapides sans attendre le serveur.

Architecture client-serveur

Moteurs JavaScript

V8

Chrome, Edge

SpiderMonkey

Firefox

JavaScriptCore

Safari

Chakra

IE (obsolète)

Pourquoi le côté client ?

⚡

Réactivité

Interactions instantanées sans requête serveur

💰

Économie serveur

Moins de charge sur l'infrastructure

📈

Scalabilité

Plus d'utilisateurs simultanés

🎨

UX améliorée

Interfaces riches et dynamiques

05 / Capacités

Que peut faire JavaScript ?

Dans le navigateur

✓ Modifier le HTML et les styles CSS
✓ Réagir aux actions utilisateur (clics, clavier)
✓ Envoyer des requêtes réseau (AJAX, fetch)
✓ Gérer les cookies
✓ Stocker des données (localStorage)
✓ Afficher des alertes et messages

Limitations (sécurité)

✗ Accéder au disque dur (lecture/écriture)
✗ Récupérer des fichiers sans accord
✗ Utiliser caméra/micro sans permission
✗ Interagir avec d'autres onglets/domaines

🔒 Sécurité — Ces limitations protègent l'utilisateur contre les sites malveillants.

06 / Atouts

Ce qui rend JavaScript unique

🔗

Intégration totale

Fonctionne nativement avec HTML et CSS — la trinité du web

🌐

Universel

Supporté par tous les navigateurs par défaut

🎯

Polyvalent

Frontend, Backend, Mobile, Desktop

Écosystème JavaScript

Frontend

Vue.js, React, Angular

Backend

Node.js, Deno

Mobile

React Native, Ionic

Desktop

Electron (Slack, Discord)

07 / Pratique

Où écrire du JavaScript ?

1

Dans la console

Idéal pour tester rapidement du code.

// Ouvrir avec :

Ctrl + Shift + J // Windows

Cmd + Option + J // Mac

alert("Bonjour !");

2

Dans une page HTML

Code entre balises <script>.

<h1>Ma page</h1>

<script>
  alert("Bonjour !");
</script>

⚠️ Éviter de mélanger JS et HTML dans le même fichier.

🧪 Bacs à sable en ligne

Testez du code JavaScript directement dans votre navigateur !

🖊️

CodePen

HTML + CSS + JS

🎻

JSFiddle

Classique

▶️

PlayCode

Rapide

📦

JS Bin

Avec console

08 / Bonnes pratiques

Fichier externe

La meilleure pratique est de séparer le JavaScript dans des fichiers .js externes.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Ma page</title>
</head>
<body>
  <h1>Contenu</h1>

  <!-- Script à la fin ! -->
  <script src="app.js"></script>
</body>
</html>

💡 Pourquoi à la fin du body ?

• La page s'affiche plus vite
• Tous les éléments HTML existent déjà

Avantages de la séparation

📦

Organisation

HTML, CSS et JS séparés

♻️

Réutilisation

Un fichier JS pour plusieurs pages

🚀

Cache navigateur

Le JS est mis en cache

🔧

Maintenance

Plus facile à débugger

09 / Qualité

La directive "use strict"

En ajoutant "use strict" au début d'un script, on demande au navigateur de respecter la norme ECMAScript et d'arrêter le script à la moindre erreur.

"use strict";

// Erreur ! Variable non déclarée
msg = "Bonjour";  // ❌ Crash

// Correct
let msg = "Bonjour";  // ✅ OK

✅ Toujours utiliser "use strict"

Évite les auto-corrections silencieuses du navigateur qui masquent les bugs.

Ce que "use strict" empêche

Variables non déclarées

x = 10; // Erreur

Mots réservés comme variables

let private = 1; // Erreur

Paramètres en double

function f(a, a) {} // Erreur

Suppression de variables

delete x; // Erreur

10 / Style

Conventions de nommage

camelCase

Variables, fonctions, méthodes

let userName = "Alice";
let totalPrice = 99.90;
function calculateTotal() { }
function getUserById() { }

SCREAMING_SNAKE_CASE

Constantes globales

const MAX_USERS = 100;
const API_ENDPOINT = "/api";
const DEFAULT_TIMEOUT = 5000;

PascalCase

Classes et constructeurs

class UserController { }
class ProductModel { }
class ShoppingCart { }

Éléments HTML

Préfixe descriptif + camelCase

const btnSubmit = document...
const inputEmail = document...
const divContainer = document...
const listItems = document...

Google Style Guide → Airbnb Style Guide → ESLint →

11 / Pour aller plus loin

Ressources

📚

Prêt à coder ?

Ouvrez la console de votre navigateur et tapez :

alert("Hello World!");

Voir le cours complet