Introduction à la Programmation

Web

2024/2025

Intoduction à la Programmation Web 1

 Rappel
Programmation Informatique Programme - Script
appelée aussi codage, est l'ensemble La finalité de la programmation informatique en
des activités qui permettent utilisant un langage de programmation et en
l'écriture des programmes respectant un ou plusieurs paradigme de
informatiques via un langage de programmation;
programmation. C'est une étape Une suite d’instructions s'enchaînant de manière
importante du développement de séquentielle pour résoudre un problème donné;
logiciels.

Notion d’algorithme
Langage de programmation
Un algorithme est écrit dans un pseudo-langage,
Une notation conventionnelle destinée à
souvent proche d’un langage informatique mais
formuler des algorithmes et produire des
programmes informatiques qui les appliquent, débarrassé de détails techniques.
dont le but est produire des programmes. Le but est :
de décomposer un problème complexe en une
Langage machine; suite d’opérations simples,
Langage assembleur;
Langage évolué.
de bien rédiger et structurer notre programme.

Intoduction à la Programmation Web 2

 Rappel
Paradigme de programmation :
Paradigme = modèle de pensée, façon de voir les choses.

En informatique, un paradigme est employé pour exprimer la façon dont un système a été conçu et pensé dans
ses grandes lignes.

Les paradigmes en programmation est un style de programmation informatique qui traite de la manière dont les
solutions aux problèmes doivent être formulées dans un langage de programmation.

Un langage de programmation peut être suivi par un ou plusieurs paradigmes, comme le cas du JavaScript.

Intoduction à la Programmation Web 3

 Rappel
Paradigme de programmation :
Pourquoi les paradigmes sont importants?
Ce sont les paradigmes qui définissent la manière dont vous programmez.

Les paradigmes suivant sont regroupés par des grandes familles:

• Programmation impérative;
• Programmation déclarative;
• Programmation orientée objet;
• …

Intoduction à la Programmation Web 4

 Rappel
Paradigme de programmation :

 Programmation impérative :
• Programmation structurée, visant à structurer les programmes impératifs pour en supprimer les
instructions goto : Pascal, C, C++, Java, Python, PHP, Javascript …
On parcourt le code de haut en bas et quand on passe à un autre morceau de code c'est toujours par le
début qu'on commence (l’ordre est important).
• Programmation procédurale, visant à décomposer un programme en routines et sous routines qui
contiennent une série d'étapes : Pascal, C, C++, …
L'ordre dans lequel ces procédures sont appelées n'est pas important.

 Programmation déclarative :
 Programmation orientée objet :

Intoduction à la Programmation Web 5

 Rappel
Paradigme de programmation :

 Programmation impérative :
 Programmation déclarative :
• Programmation descriptive, qui permet de décrire des structures de données : HTML, XML, LaTeX,...
• Programmation fonctionnelle, avec laquelle un programme est une fonction au sens mathématique du
terme : Python, Lisp, Eiffel, Javascript …
On ne manipule que des fonctions pour produire une grosse fonction (le programme) auquel on passe
les paramètres pour obtenir le résultat.
• Programmation logique, consistant à exprimer les problèmes et les algorithmes sous forme de
prédicats : Python, Prolog, ...

 Programmation orientée objet :

Intoduction à la Programmation Web 6

 Paradigme de programmation

Programmation procédurale Programmation fonctionnelle

Procédure 1 Procédure 2 Procédure 3

Intoduction à la Programmation Web 7

 Rappel
Paradigme de programmation :

 Programmation impérative :
 Programmation déclarative :

 Programmation orientée objet :

• Programmation consistant en la définition et l’assemblage de briques logicielles appelées objets : Python,
C++, Java, , Javascript ..

Intoduction à la Programmation Web 8

 Rappel
Les types de développement informatique :
Développement web
Front-end : Conception de l'interface utilisateur
d'applications ou de sites web, en utilisant Développement desktop (Bureau)
HTML, CSS, et JavaScript. Création d'applications pour ordinateurs
Back-end : Gestion des serveurs, bases de personnels, souvent destinées à des tâches
données, et logique d'application, souvent avec spécifiques (bureautique, design, etc.), en
des langages comme PHP, Python, Ruby, ou utilisant des langages comme C#, Java, ou
Node.js. Python.
Développement mobile
Applications natives : Développement d'applications spécifiques à
une plateforme (iOS ou Android) utilisant des langages natifs comme Développement cloud
Swift ou Kotlin.
Applications hybrides : Utilisation de technologies web pour créer Création d'applications et de services hébergés sur le
des applications qui fonctionnent sur plusieurs plateformes, par cloud, offrant scalabilité et flexibilité, en utilisant des
exemple avec React Native ou Ionic. plateformes comme AWS, Azure, ou Google Cloud.
Applications multiplateformes : Développement d'applications
pouvant fonctionner sur plusieurs systèmes d'exploitation avec un
seul code (ex : Flutter). Intoduction à la Programmation Web 9
 Rappel
Le Développement Web :
Le développement web consiste à créer et maintenir des applications ou des site web accessibles via
un navigateur web

Front-end : Conception de l'interface utilisateur d'applications ou de sites web, en utilisant HTML,

CSS, et JavaScript.
Back-end : Gestion des serveurs, bases de données, et logique d'application, souvent avec des
langages comme PHP, Python, Ruby, ou Node.js.

Avantages : Accessibilité sur tous les appareils avec un navigateur, mises à jour faciles.
Inconvénients : Dépendance à une connexion Internet.

Intoduction à la Programmation Web 10

 Rappel
Le Développement Web :

La partie serveur qui

La partie visible et
gère les données, la
interactive pour les
logique métier, et
utilisateurs (interfaces
les bases de
graphiques)
données

Intoduction à la Programmation Web 11

 Rappel
Le Développement Web :

Front-end (côté client) : Back-end (côté serveur) :

• C'est la partie visible par l'utilisateur, l'interface avec • C'est la partie cachée de l'application qui gère la logique, les
laquelle il interagit ; bases de données, et la communication entre le serveur et le
• Les technologies utilisées incluent principalement HTML, front-end;
CSS, et JavaScript (avec des bibliothèques comme React, • Les technologies incluent des langages de programmation
et des Framework comme Angular, ou Vue.js) ; comme Python, Java, Node.js, Ruby, et des bases de données
• Le front-end s'occupe de la présentation visuelle, du comme MySQL, PostgreSQL, MongoDB;
design, de la mise en page, et de l'ergonomie de • Le back-end traite les requêtes des utilisateurs, gère les
l'application. données, et assure que le contenu soit renvoyé correctement
au front-end.

Intoduction à la Programmation Web 12

 Rappel
Le Développement Web :

• CSR (Client-Side Rendering) : • SSR (Server-Side Rendering) :

Le rendu se fait côté client (dans le navigateur). Le rendu se fait côté serveur.
Le serveur envoie un fichier HTML de base, et le Le serveur génère le HTML complet de la page
JavaScript charge et rend le contenu avant de l'envoyer au navigateur. Le contenu
dynamiquement. Le contenu est visible après est immédiatement visible pour l'utilisateur à
que le JavaScript soit exécuté, ce qui peut l'arrivée de la page, offrant un chargement plus
entraîner un chargement initial plus lent, mais rapide initialement, et c'est meilleur pour le
l'application devient ensuite très réactive. SEO.

le rendu (ou rendering) en développement web : est le processus par lequel les données (HTML,
CSS, JavaScript) sont transformées en une page web visible par l'utilisateur.

Intoduction à la Programmation Web 13

 Rappel
Le Développement Web :

Bibliothèque : C'est un ensemble de fonctions et de Framework : C'est une structure complète qui définit comment
modules que vous pouvez appeler pour accomplir des votre application doit être organisée. Avec un framework, c'est lui
tâches spécifiques. Avec une bibliothèque, vous contrôlez le qui contrôle votre code. Vous suivez ses règles et son flux. Il vous
flux de votre application. fournit une architecture sur laquelle vous construisez.
Exemples : Jquery, React, … Exemples : Vue.js, Angular

En programmation, un flux (ou "flow") désigne la manière dont les données ou les événements se déplacent à travers
une application, en suivant un certain chemin ou une logique. (flux de contrôle, de données, d'évènement)

Intoduction à la Programmation Web 14

 Rappel
Le Développement Web :

le fonctionnement client/serveur

• HTTP / HTTPS : Protocoles utilisés pour la communication

entre le client et le serveur,

• API (Application Programming Interface) : Permet aux

applications d'interagir entre elles.
Exemple : Une API permet à un site de consulter la
météo ou des informations via une requête HTTP.

Intoduction à la Programmation Web 15

 Rappel
Compilation et interprétation

Intoduction à la Programmation Web 16

 Rappel
Compilation et interprétation

• Après l’écrire du programme, il reste que le traduire à un langage qui est compris par la machine.

• Il existe deux techniques principales pour effectuer la traduction d'un programme source en code
binaire exécutable par la machine :
la compilation et l'interprétation

Intoduction à la Programmation Web 17

 Rappel
Compilation et interprétation
Chinois Traditionnel:

Intoduction à la Programmation Web 18

 Rappel
Compilation et interprétation

Compilation:
• La compilation consiste à traduire la totalité du texte source en une fois.
• Le logiciel compilateur lit toutes les lignes du programme source et produit une nouvelle suite de codes que l'on
appelle programme objet (ou code objet).
• Celui-ci peut désormais être exécuté indépendamment du compilateur et être conservé tel quel dans un fichier,
c’est un fichier exécutable.

Intoduction à la Programmation Web 19

 Rappel
Compilation et interprétation

Interprétation:
• Dans la technique appelée interprétation, le logiciel interpréteur doit être utilisé chaque fois que l'on veut faire
fonctionner le programme.
• Dans cette technique en effet, chaque ligne du programme source analysé est traduite au fur et à mesure en
quelques instructions du langage machine, qui sont ensuite directement exécutées.
Aucun programme objet n'est généré.

Intoduction à la Programmation Web 20

 Rappel
Compilation et interprétation

Compilation :

Interprétation :

Intoduction à la Programmation Web 21

 Rappel
Compilation et interprétation

Compilation :

Interprétation :

Intoduction à la Programmation Web 22