PARTIE 1 Définir le rôle de javascript dans le développement

CHAPITRE 1
Comparer un langage de script avec un langage compilé

1. Définir un langage de script

2. Fonctionnement d'un langage de script
1. Définir un langage de script
Notion de compilateur / interpréteur
• La compilation consiste à transformer le code écrit dans un langage de programmation de
haut niveau (code lisible par l'homme) en code machine compréhensible par un processeur
informatique (bits binaires 1 et 0). Le compilateur s'assure également que le programme
est correct du point de vue TYPE : on n’est pas autorisé à affecter une chaîne de caractères
à une variable entière. Le compilateur veille également à ce que votre programme soit
syntaxiquement correct. Par exemple, "x * y" est valide, mais "x @ y" ne l'est pas.
• Un interpréteur est un programme informatique qui convertit chaque déclaration de
programme de haut niveau en code machine. Cela inclut le code source, le code précompilé
et les scripts.

Différence : Un compilateur convertit le code en code machine (crée un exe) avant

l'exécution du programme. L’interpréteur convertit le code en code machine, ligne par ligne,
au moment d’exécution du programme.

Exemples de langages compilés : C, C++, C#, CLEO, COBOL, etc.

Exemples de langages interprétés : JavaScript, Perl, Python, etc. 2
1. Définir un langage de script Langage compilé

Figure 1 : Fonctionnement
d’un langage compilé
PARTIE 1

3
1. Définir un langage de script
Langage interprété

Figure 2 : Fonctionnement d’un langage interprété

4
 1. Définir un langage de script Langage de script
Un langage de script (également Tous les langages de script sont des Les langages de script
appelé script) est une série de langages de programmation, mais utilisent un programme
commandes qui peuvent être tous les langages de programmation appelé interpréteur pour
exécutées sans compilation. ne sont pas des langages de script. traduire les commandes.

Types d’un langage de script : coté client et coté serveur

• Les langages de script côté serveur s'exécutent sur un serveur Web. Lorsqu'un client envoie
une requête, le serveur répond en envoyant du contenu via le protocole HTTP. Les scripts côté
serveur ne sont pas visibles par le public. Leur rôle est d’assurer la rapidité du traitement,
l'accès aux données et la résolution des erreurs.
Exemples de langages de script côté serveur : PHP, ASP .NET, Node.Js, Java, Ruby, Perl.
• Les langages de script côté client s'exécutent du côté du client, sur son navigateur Web.
L'avantage des scripts côté client est qu'ils peuvent réduire la demande sur le serveur, ce qui
permet aux pages Web de se charger plus rapidement. Ces scripts sont axés sur l'interface
utilisateur et ses fonctionnalités.
Exemples de langages de script côté client : HTML, CSS, JavaScript. 5
2. Fonctionnement d'un langage de script Le rôle de l'interpréteur
• Le fonctionnement des langages de script est assuré par l’interpréteur. Son rôle réside
dans la traduction des instructions du programme source en code machine.
• S'il y a une erreur dans l'instruction courante, l'interpréteur termine son processus de
traduction à cette instruction et affiche un message d'erreur. L'interprète ne passe à
la ligne d'exécution suivante qu'après avoir éliminé l'erreur.
• Un interpréteur exécute directement les instructions écrites dans un langage de script
sans les convertir préalablement en code objet ou en code machine.

Code source Code exécutable

(langage de programmation Interpréteur (langage machine)
haut niveau) / Output
PARTIE 1

Aller à l’instruction
suivante
Figure 3: Fonctionnement d’un langage de script
12
 CHAPITRE 2
Comprendre l’architecture client/serveur

1. Composition d’une architecture client/serveur

2. Fonctionnement d'un système client/serveur pour le
cas d'une architecture Web
1. Composition d’une architecture
client/serveur Définition de l'architecture Client / Serveur
• L’architecture client-serveur correspond à l’architecture d'un réseau informatique dans
lequel de nombreux clients (processeurs distants) demandent et reçoivent des services
d'un serveur centralisé (Serveur).
• Les clients sont souvent situés sur des postes de travail ou des ordinateurs personnels,
tandis que les serveurs sont situés ailleurs sur le réseau, généralement sur des
machines plus puissantes.

Serveur stockage
Serveur de bases Serveur web
de fichiers
de données

Figure 4 : Architecture Client-serveur

15
2. Fonctionnement d'un système
client/serveur Web Interaction Client / Serveur

Les ordinateurs clients fournissent une interface (comme les navigateurs) permettant à un
utilisateur de demander des services auprès de serveur et d'afficher les résultats.
Cette interaction passe par les étapes suivantes :
1. L'utilisateur saisit l'URL (Uniform Resource Locator) du site web ou du fichier. Le
navigateur demande alors au serveur le DNS (DOMAIN NAME SYSTEM).
2. Le serveur DNS recherche l'adresse du serveur WEB.
3. Le serveur DNS répond avec l'adresse IP du serveur Web.
4. Le navigateur envoie une requête HTTP/HTTPS à l'adresse IP du serveur WEB (fournie par
le serveur DNS).
5. Le serveur envoie les fichiers nécessaires du site web (pages html, documents, images, ….).
6. Le navigateur rend alors les fichiers et le site web s'affiche. Ce rendu est effectué à l'aide
de l'interpréteur DOM (Document Object Model), de l'interpréteur CSS et du moteur JS,
collectivement connus sous le nom de compilateurs JIT ou (Just in Time).

9
1. Fonctionnement d'un système
client/serveur Web
Fonctionnement
Le fonctionnement d’un système client/serveur peut être illustré par le schéma suivant :

Client
4) Le code JS est exécuté par le IHM (pages html) - navigateur web
navigateur du client pour
1) Le client demande la page au serveur
modifier la page HTML
Serveur (Serveur web /
Serveur d’application)
Programmes, traitement BD
3) Le serveur envoie la
page HTML générée au
2) Un langage serveur (comme PHP)
client
Langage serveur accède à la BD (comme MySQL) et
génère la page HTM demandée
10

Figure 5 : Fonctionnement d’un système client serveur

2. Fonctionnement d'un système client/serveur Web Serveurs Web et HTTP
Les navigateurs web (clients) communiquent avec les serveurs web via le protocole HTTP
(Hypertext Transfer Protocol). En tant que protocole de requête-réponse, ce protocole permet aux
utilisateurs d'interagir avec des ressources Web telles que des fichiers HTML en transmettant des
messages hypertextes entre les clients et les serveurs. Les clients HTTP utilisent généralement des
connexions TCP (Transmission Control Protocol) pour communiquer avec les serveurs.
Une requête HTTP inclut :
• Une URL pointant sur la cible et la ressource (un fichier HTML, un document, …).
• Une méthode de requête spécifique afin d'effectuer diverses tâches (par exemple mise à jour des
données, récupération d’un fichier, …).
Les différentes méthodes de requêtes et les actions associées sont présentées dans le tableau ci-
dessous :
Méthode Rôle
GET Récupération d’une ressource spécifique (fichier html par exemple).
PARTIE 1

POST Création d’une nouvelle ressource, enregistrement des données d'un formulaire d'inscription...
HEAD Récupération des informations "metadata" d'une ressource spécifique sans le "body« .
PUT Met à jour une ressource existante ou en crée une si elle n'existe pas.
DELETE Suppression la ressource spécifiée. 11
2. Fonctionnement d'un système
Serveurs Web et HTTP
client/serveur Web

• La réponse HTTP (HTTP Response) est l'information fournie par le serveur suite à la
demande du client. Elle sert à confirmer que l'action demandée a été exécutée avec
succès. En cas d'erreur dans l'exécution de la demande du client, le serveur répond par
un message d'erreur.
• Les réponses HTTP se présentent sous la forme d'un texte brut formaté au format JSON
ou XML, tout comme les demandes HTTP. Le corps d'une réponse aboutie à une requête
GET contiendrait la ressource demandée.

Exemples de code d’état HTTP (HTTP status codes) :

•"200 OK" : succès
•"404 Not Found" : ressource introuvable
•"403 Forbidden" : accès non autorisé
12
 2. Fonctionnement d'un système Serveurs Web et HTTP
client/serveur Web
Exemple de réponse HTTP (clic sur le logo du site
www.ofppt.ma en utilisant le navigateur Google Chrome) :

Figure 6: Exemple de réponse HTTP

PARTIE 1

13
 CHAPITRE 3

Découvrir l’écosystème de développement

1. Environnements de développement
2. Découverte des librairies appropriées (jQuery, React, Vue JS,
Angular, …)
1. Environnements de développement
Choix de l'environnement de développement
Un Environnement de Développement Intégré (Integrated development environment–
IDE an anglais) désigne un outil de développement dit tout en un qui permet aux
programmeurs de consolider les différents aspects de l'écriture d'un programme
informatique.
Les IDE assistent les programmeurs dans l’édition des logiciels en combinant les activités
courantes de programmation en une seule application :
• Édition du code source
• Mise en évidence de la syntaxe (colorisation)
• Saisie automatique (Auto-complétion)
• Création d'exécutables
IDE pour le web :
• Débogage
(Liste complète et lien de téléchargement disponible sur
https://www.guru99.com/web-development-ide.html)

IntelliJ IDEA CodePen JSFiddle Visual Studio Code Bluefish SUBLIME TEXT 3
1. Environnements de développement
Rappel : Visual Studio Code
Comme discuté dans M104, nous utiliserons le logiciel Visual Studio Code qui est un
logiciel gratuit qui permet l’édition, la correction et le débogage du code source dans
plusieurs langages informatiques : Visual Basic, JavaScript, XML, Python, HTML, CSS, ….

VS code offre :

•Une présentation sophistiquée du code.

•Une auto-complétion du code source.
•Un ensemble d'extensions permettant de simplifier la programmation.
•La détection du langage de programmation par l'extension du fichier.

16
2. Découverte des librairies appropriés
Front-end vs back-end
Front-End Back-End
•Le terme "front-end" désigne l'interface •Le terme "back-end" désigne le serveur, l'application
utilisateur. et la base de données qui travaillent en coulisses pour
•Le front-end est construit en utilisant fournir des informations à l'utilisateur.
une combinaison de technologies telles •La programmation back-end est définie comme la
que le langage de balisage hypertexte logique informatique d'un site Web ou d'un logiciel,
(HTML), JavaScript et les feuilles de style depuis le stockage et l'organisation des données jusqu'à
en cascade (CSS). la création des algorithmes et des séquences logiques
Les frameworks front-end complexes qui fonctionnent, d’une manière
1.Angular JS
transparente, sur le front-end.
2.React.js
3.JQuery •Les langages back-end les plus populaires pour sont
4.Vue.js Ruby, Python, Java, ASP.Net et PHP. 27