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

Ce guide reproduit fidèlement toutes les informations techniques, définitions, et exemples de la Partie 1 du document pour une préparation d'examen complète.

1. Concepts & Définitions

• Compilation : Processus qui consiste à transformer le code écrit dans un langage de programmation de haut niveau (lisible par l'homme) en code machine compréhensible par un processeur informatique (bits binaires 1 et 0).
• Compilateur : Programme informatique qui transforme le code en code machine avant l'exécution du programme. Il s'assure que le programme est correct du point de vue du TYPE et de la syntaxe. Il crée un fichier exécutable (exe).
• Interpréteur : Programme informatique qui convertit chaque déclaration de programme de haut niveau en code machine, ligne par ligne, au moment de l'exécution du programme. Il inclut le code source, le code précompilé et les scripts.
• Langage de script (ou script) : Une série de commandes qui peuvent être exécutées sans compilation. Ils utilisent un interpréteur pour traduire les commandes.
• Relation Langage de script / Langage de programmation : Tous les langages de script sont des langages de programmation, mais tous les langages de programmation ne sont pas des langages de script.
• Scripts Côté Serveur (Server-side) : S'exécutent sur un serveur Web. Ils 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.
• Scripts Côté Client (Client-side) : S'exécutent du côté du client, sur son navigateur Web. Ils peuvent réduire la demande sur le serveur, permettant aux pages de se charger plus rapidement. Ils sont axés sur l'interface utilisateur et ses fonctionnalités.
• Architecture Client-Serveur : Architecture d'un réseau informatique dans lequel de nombreux clients (processeurs distants) demandent et reçoivent des services d'un serveur centralisé (Serveur).
• Client : Souvent situé sur des postes de travail ou des ordinateurs personnels. Fournit une interface (navigateur) pour demander des services et afficher les résultats.
• Serveur : Situé ailleurs sur le réseau, généralement sur des machines plus puissantes. Il peut s'agir d'un Serveur de bases de données, Serveur web, ou Serveur stockage de fichiers.
• Interaction Client / Serveur : Processus par lequel les ordinateurs clients, via une interface comme le navigateur, demandent des services au serveur et affichent les résultats.
• Serveurs Web et HTTP : Les navigateurs (clients) communiquent avec les serveurs web via le protocole HTTP (Hypertext Transfer Protocol), un protocole de requête-réponse.
• Connexion TCP : Les clients HTTP utilisent généralement des connexions TCP (Transmission Control Protocol) pour communiquer avec les serveurs.
• IDE (Environnement de Développement Intégré) : Outil de développement "tout en un" qui permet aux programmeurs de consolider les différents aspects de l'écriture d'un programme informatique en une seule application.
• Front-end : Désigne l'interface utilisateur. Construit avec des technologies comme HTML, JavaScript, et CSS.
• Back-end : Désigne le serveur, l'application et la base de données qui travaillent en coulisses. C'est la logique informatique d'un site, du stockage des données à la création d'algorithmes.

2. Syntaxes & Codes

• Exemple de syntaxe valide pour un compilateur : "x * y"
• Exemple de syntaxe non valide pour un compilateur : "x @ y"
• Langages compilés (Exemples) : C, C++, C#, CLEO, COBOL, etc.
• Langages interprétés (Exemples) : JavaScript, Perl, Python, BASIC, etc.
• Langages de script côté serveur (Exemples) : PHP, ASP .NET, Node.Js, Java, Ruby, Perl.
• Langages de script côté client (Exemples) : HTML, CSS, JavaScript.
• IDE pour le web (Exemples) : IntelliJ IDEA, CodePen, JSFiddle, Visual Studio Code, Bluefish, SUBLIME TEXT 3.
• Frameworks front-end (Exemples) : Angular JS, React.js, JQuery, Vue.js.
• Langages back-end populaires (Exemples) : Ruby, Python, Java, ASP .Net et PHP.

3. Attributs & Propriétés

• Composants d'une requête HTTP :
  • URL : Pointeur sur la cible et la ressource (fichier HTML, document, etc.).
  • Méthode de requête : Spécifie la tâche à effectuer.
• Méthodes de Requêtes HTTP et leurs Rôles :
  • GET : Récupération d’une ressource spécifique (fichier html par exemple).
  • 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.
• Codes d'état HTTP (HTTP status codes) :
  • "200 OK" : succès.
  • "404 Not Found" : ressource introuvable.
  • "403 Forbidden" : accès non autorisé.
• Propriétés d'un IDE :
  • Édition du code source
  • Mise en évidence de la syntaxe (colorisation)
  • Saisie automatique (Auto-complétion)
  • Création d'exécutables
  • Débogage
• Propriétés de Visual Studio Code (VS Code) :
  • 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.

4. Exemples Pratiques

• Fonctionnement d'un langage compilé (Figure 1) :
  1. Le développeur rédige le code source.
  2. Le Compilateur lance la compilation.
  3. Le compilateur crée un logiciel (exécutable).
  4. Ce logiciel est envoyé à l'ordinateur du client.
  5. L'OS Windows exécute le code.
• Fonctionnement d'un langage interprété (Figure 2) :
  1. Le Fichier contenant le code source est envoyé à l'ordinateur.
  2. L'Interpréteur lit le code ligne par ligne.
  3. L'OS Windows exécute le code au fur et à mesure qu'il arrive.
• Interaction Client/Serveur Web (6 étapes) :
  1. L'utilisateur saisit l'URL. Le navigateur demande au serveur 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.
  5. Le serveur envoie les fichiers nécessaires du site web (pages html, documents, images, …).
  6. Le navigateur rend les fichiers et le site s'affiche. Ce rendu utilise l'interpréteur DOM, l'interpréteur CSS et le moteur JS (compilateurs JIT).
• Cycle de fonctionnement d'un système client-serveur (Figure 5) :
  1. Le client (navigateur web) demande la page au serveur.
  2. Un langage serveur (ex: PHP) accède à la BD (ex: MySQL) et génère la page HTML demandée.
  3. Le serveur envoie la page HTML générée au client.
  4. Le code JS est exécuté par le navigateur du client pour modifier la page HTML.
• Exemple de réponse HTTP (Figure 6) :
  • Request URL: https://www.ofppt.ma/themes/custom/ofppt/assets/images/logo.png
  • Request Method: GET
  • Status Code: 200 OK
  • Content-Type: image/png
  • Server: Apache

5. Spécifications Techniques

• Différence fondamentale Compilateur vs Interpréteur : Un compilateur convertit le code en code machine (crée un exe) avant l'exécution. L'interpréteur convertit le code en code machine, ligne par ligne, au moment de l'exécution.
• Rôle de l'interpréteur : Assure le fonctionnement des langages de script. Il traduit les instructions du programme source en code machine. En cas d'erreur, il termine le processus de traduction et affiche un message d'erreur, ne passant à la ligne suivante qu'après correction.
• Format des réponses HTTP : Se présentent sous la forme d'un texte brut formaté au format JSON ou XML.
• Lien de téléchargement des IDE : https://www.guru99.com/web-development-ide.html

6. Points Critiques à Mémoriser

• Compilé vs. Interprété : La distinction clé est le moment de la traduction du code (avant vs. pendant l'exécution).
• Client vs. Serveur : Comprendre où le code s'exécute (navigateur de l'utilisateur vs. machine distante) et les implications (visibilité, accès aux données).
• Le cycle de vie d'une requête web : Les 6 étapes (URL, DNS, IP, Requête HTTP, Réponse Serveur, Rendu Navigateur) sont un processus fondamental à connaître par cœur.
• Les verbes HTTP : GET pour lire, POST pour envoyer/créer. C'est la base de la communication web.
• Les codes de statut HTTP : 200 (tout va bien), 404 (page non trouvée), 403 (accès refusé) sont les plus courants.
• Le rôle de l'IDE : C'est un outil centralisateur qui facilite le développement en combinant éditeur, débogueur, etc.
• Front-end vs. Back-end : Le front-end est ce que l'utilisateur voit et avec quoi il interagit (interface). Le back-end est la "machinerie" invisible qui fait fonctionner le site (serveur, base de données).