JavaScript

Pr. Ahmed Drissi el maliani

FSR, February 28, 2025 1/56

Plan

Internet et le Web

Roadmap du Développeur web

Développement Front-end

Javascript

2/56
Origine de l’Internet et du WWW

• L’Internet est né dans les années 1970 comme une évolution du projet ARPANET
( transmission de données en découpant les informations en petits paquets pour
un acheminement plus efficace).
• Le World Wide Web (WWW) a été développé en 1989 par Tim Berners-Lee et
Robert Cailliau.
• WWW utilise le protocole HTTP pour transférer des fichiers à travers Internet.
• communication entre les navigateurs et les serveurs web,
• permettant ainsi l’affichage des contenus sur les pages web.

3/56
Statistiques
• En 2023, 5,3 milliards d’utilisateurs d’Internet dans le monde.
• Plus de 65 % de la population mondiale a accès à Internet.

4/56
Concepts de base du Web

• Un document web est un fichier comportant la strcture et le contenu (texte,

tabkleaux, images, ...) de la page web.
• Un site web est un ensemble de fichiers web interconnectés.
• Hébergement assuré par un serveur web.

5/56
Concepts de base du Web
Conception d’un Site Web:
• Thème du site.
• Disposition des pages.
• Fonctionnalité du site.
• Mise en page : couleurs, polices, animations, sons.

6/56
Concéption d’un site web

• Définir les objectifs : Clarifier le but du site.

• Identifier le public cible : Analyser les besoins des utilisateurs.
• Choisir un nom de domaine : Simple, mémorable et adapté.
• Sélectionner un hébergeur : Fiable et sécurisé.
• Créer une arborescence : Structurer les pages.
• Concevoir des maquettes : Visualiser la mise en page.
• Développer le contenu : Textes clairs et optimisés.
• Développer le site : Rendre le site fonctionnel.
• Tester : Vérifier le bon fonctionnement.
• Lancer et promouvoir : Mettre en ligne et attirer du trafic.
• Analyser et optimiser : Améliorer selon les performances.

7/56
Types de sites web

Sites statiques :
• Utilisent HTML, CSS, JavaScript.
• Affichage identique pour tous les utilisateurs.
• Mise à jour manuelle par le développeur.

Sites dynamiques :
• Utilisent PHP, AJAX, ASP, MySQL.
• Génèrent des pages adaptées aux interactions.
• Mise à jour automatique via base de données.

8/56
Communication Client-Serveur

• HTTP:
• Protocole régissant l’échange de requêtes et réponses.
• Processus:
• Le client (navigateur) envoie une requête au serveur.
• Le serveur répond en fournissant le contenu demandé.
• Des Intermédiaires comme les routeurs, proxys, passerelles peuvent intervenir.

9/56
Cycle d’une Requête Web Statique

1. L’utilisateur saisit une URL dans le navigateur.

2. Le navigateur recherche l’adresse IP du site.
3. Une requête HTTP est envoyée au serveur.
4. Le serveur trouve la page et la renvoie au navigateur.
5. Le navigateur affiche la page web.

10/56
Cycle d’une Requête Web Dynamique

1. L’utilisateur saisit une URL.

2. Le serveur reçoit la requête et détecte du code PHP.
3. Le moteur PHP exécute le script et interroge la base MySQL.
4. MySQL retourne les résultats à PHP.
5. PHP génère une page HTML et l’envoie au navigateur.
6. Le navigateur affiche le contenu dynamique.

11/56
Plan

Internet et le Web

Roadmap du Développeur web

Développement Front-end

Javascript

12/56
Front-end vs Back-end
• Front-end développe l’interface utilisateur : ce que l’utilisateur peut voir.
• Back-end concerne le serveur et la base de données : l’infrastructure qui supporte
le front-end.
• Traditionnellement, le développement back-end était le plus important.
• Aujourd’hui, le front-end devient essentiel grâce à l’importance du design et des
interfaces.

13/56
Apprentissage du Développement Web

• Apprendre les bases.

• Étudier des micro-composants d’autres projets : navbar, en-tête, pied de page,
formulaire de contact.
• Coder pour apprendre.
• Répéter, beaucoup de répétition.

14/56
Conseils pour Apprendre
• Prenez votre temps. Ne soyez pas pressé. Apprenez lentement. Apprenez bien.
• Essayez de maı̂triser, ne vous contentez pas d’apprendre.
• Beaucoup de développeurs full-stack ne sont pas capables de réaliser des tâches
simples en CSS.
• Appliquez ce que vous avez appris.

15/56
Maı̂triser HTML et CSS

Quand passer à autre chose ?

• Avoir construit des dizaines de micro-composants sans JS.
• Avoir réalisé quelques pages web.
• Être à l’aise avec CSS : positionnement, flexbox, grid.
• Pouvoir créer une barre de navigation responsive.

16/56
Comment maı̂triser JS ?

• Résoudre des problèmes algorithmiques (Travaux dirigés TD).

• Ne pas seulement se focaliser sur les événements et fonctions JS.
• Personnaliser des scripts disponibles sur les Travaux Pratiques (TP).
• Construire des projets (Projet de fin de module).

17/56
Construire de petites choses

• Facebook, Amazon, etc., sont composés de petits éléments : commentaires,

navbar, stories, ajouter au panier, etc.
• Construire de petits composants mais de bonne qualité.

18/56
Projets plus grands

• Cloner les sites web plus complexes.

• Ecommerce site (Amazon)
• Social media site (Twitter, FB)
• Music app (Spotify)
• Forum site (Reddit)

19/56
Conseils pour Construire des Projets

• Ne pas utiliser de frameworks

• Ne pas toucher à JQuery, React, Angular, ...
• Soyez prêt avec JavaScript avant

“Tout ce qui peut être fait en JavaScript sera fait en JavaScript.”

20/56
Utilisation de Git et GitHub

Git : Système de contrôle de version (Linus Torvalds, 2005).

• Suivi des modifications de code.
• Collaboration à distance.
• Historique complet des versions.
• Réversibilité des changements.
GitHub : Plateforme d’hébergement de code basée sur Git.

21/56
Node.js et Frameworks JS

Node.js n’est ni un langage ni un framework, mais un environnement d’exécution

open-source.
• Permet d’exécuter du JavaScript côté serveur.
• Évite l’attente de requêtes PHP ou ASP.
Frameworks JS : Permettent de construire des applications plus rapidement, mais
nécessitent une bonne base en JavaScript.

22/56
Plan

Internet et le Web

Roadmap du Développeur web

Développement Front-end

Javascript

23/56
Les trois technologies du Web

• HTML : Structure le contenu (titres, paragraphes, images).

• CSS : Définit le style et l’apparence (couleurs, animations).
• JavaScript : Ajoute l’interactivité et la logique dynamique.

24/56
Processus
• Chargement de la page web : Le navigateur reçoit le code HTML, CSS et
JavaScript.
• Exécution du code : Le code est exécuté dans l’environnement d’exécution (le
navigateur).
• Production de la page web : Le navigateur génère le produit final, qui est la
page que l’utilisateur voit et avec laquelle il interagit.

25/56
Rappel HTML, CSS: structure HTML et Nesting

26/56
Sélecteur CSS

27/56
Sélecteur CSS

28/56
CSS dans HTML: Inline

29/56
CSS dans HTML: Interne

30/56
CSS dans HTML: Externe

31/56
CSS id

32/56
CSS id

33/56
CSS class

34/56
Box model

35/56
Box model

36/56
CSS Position

37/56
CSS Position

38/56
CSS Position

39/56
Plan

Internet et le Web

Roadmap du Développeur web

Développement Front-end

Javascript

40/56
Introduction à JavaScript

JavaScript est un langage de script ou de programmation qui permet d’implémenter

des fonctionnalités complexes sur les pages web:
• Affichage de mises à jour de contenu en temps réel
• Cartes interactives
• Animations graphiques 2D/3D
• Jukebox vidéo défilant

41/56
Pourquoi apprendre JavaScript ?

• Langage incontournable du Web (98% des sites l’utilisent)

• Facile à apprendre, puissant à maı̂triser !
• Opportunités professionnelles en développement web

42/56
JavaScript est PARTOUT !

• Web : Sites dynamiques, animations

• Apps mobiles : React Native, Ionic
• IoT et Serveurs : Node.js
• IA Data Science : TensorFlow.js

43/56
StackOverlow survey
• JavaScript en tête : 11e année consécutive comme langage le plus utilisé.
• Python devant SQL : Python est le plus populaire chez les nouveaux codeurs.

44/56
Syntaxe ultra-simple !

Exemple de code JavaScript :

alert("Bienvenue dans le monde JS !");

45/56
Histoire de JavaScript

• 1995 : Création en 10 jours (concurrence entre Netscape et Microsoft) par

Brendan Eich
• Initialement appelé Mocha, puis LiveScript, il a été renommé JavaScript lors de sa
sortie officielle avec le navigateur Netscape Navigator
• 2005: Sortie de JQuery et AJAx (plus de puissance pour JS)
• 2009 : Arrivée de Node.js → JS côté serveur
• 2015 : ES6 révolutionne JS
• Aujourd’hui : Frameworks comme React, Vue, Angular

46/56
Versions

• JavaScript 1.0 : Netscape Navigator 2.0 (1995).

• JScript : Version de Microsoft pour Internet Explorer (1996).
• ECMAScript 1 : Première standardisation (1997).
• ECMAScript 5 (ES5) : Introduction du strict mode et JSON (2009).
• ECMAScript 6 (ES6) : Classes, modules, promesses (2015).

47/56
Frameworks et bibliothèques modernes

• React.js : Développement d’interfaces utilisateur interactives.

• Vue.js : Simplicité et rapidité pour créer des applications web.
• Angular : Framework puissant pour applications complexes.
• Node.js : Exécuter JavaScript côté serveur.

48/56
Sites crées avec JS

49/56
Sites crées avec JS

50/56
Sites crées avec JS

51/56
Sites crées avec JS

52/56
Pourquoi JavaScript est essentiel ?

• Seul langage nativement supporté par les navigateurs.

• Les navigateurs ne comprennent que JavaScript.
• Permet de manipuler le contenu d’une page web (DOM).
• Fonctionne côté client et peut être utilisé côté serveur avec Node.js.

53/56
Caractéristiques de JavaScript

• Interprété : Pas besoin de compilation.

• Faiblement typé : Une variable peut changer de type.
• Asynchrone : Permet d’exécuter du code sans bloquer l’affichage (promesses et
async/await).
• Multi-plateforme : Fonctionne sur PC, mobile et tablette.

54/56
”Apprendre JavaScript signifiait que vous n’étiez pas un développeur de logiciels
sérieux. Aujourd’hui, ne pas apprendre JavaScript signifie la même chose”.
Tim O’Reilly, fondateur d’O’Reilly Media.

55/56
JavaScript vs Java

Java :
JavaScript :
• Code compilé en bytecode.
• Intégré dans HTML.
• Langage plus complexe et performant.
• Interprété par le navigateur.
• Basé sur une programmation
• Orienté objet avec prototypes.
orientée objet stricte.
• Permet d’accéder aux objets du
• Ne permet pas d’accéder aux objets
navigateur.
du navigateur.

56/56