Introduction

Jusqu'ici vous avez vu des langages de balisage (HTML + CSS) mais pas de programmation au sens strict. Aujourd'hui on va donc rentrer dans le vif du sujet et commencer à développer.

Commençons par revoir quelques fondamentaux :

C'est quoi un ordinateur ?

Si on prend le struct minimum, un ordinateur c'est une machine à calculer (le processeur) à qui on ajoute une mémoire à court terme (la RAM) et une mémoire à long terme (le Disque Dur).

Comme l'ordinateur est quand même souvent manipulé par des humains on lui ajoute des périphériques d'entrée (clavier, souris, ...) pour que l'humain lui parle. On lui ajoute aussi des périphériques de sortie (écran, haut-parleurs) pour qu'il parle à l'humain.

Le processeur

Le processeur ne comprend que deux choses : il y a une impulsion électrique ou bien il y en a pas. Vrai ou Faux. Oui ou Non. Quand on l'écrit on le représente par des séries de 1 et de 0. Ça s'appelle le binaire. Nous devons donc trouver un moyen d'envoyer du binaire au processeur sans devoir intégralement le taper à la main. Il nous faut donc une forme de traduction.

Les langages de programmation

Ça tombe bien il existe tout plein de techniques de traduction. On appelle ça des langages de programmation.

Au plus bas niveau par exemple, on a ce qu'on appelle le langage assembleur :

SECTION .data  
msg:  
 db "Hello World!\n"  
 len equ $ - msg  
SECTION .text  
 global start  
start:  
 mov edx,len  
 mov ecx,msg  
 mov ebx,1  
 mov eax,4  
 int 0x80  
 mov ebx,0  
 mov eax,1  
 int 0x80

(ici une version pour un processeur Intel).

Ce n'est pas forcément très souple ni facile à apprendre, on a donc créé des langages qui vont être traduits vers l'assembleur, parmis lesquels, le langage C :

#include <stdio.h>  
   
int main(void)  
{  
 printf("Hello World!\n");  
 return 0;  
}

Puis on a trouvé que le C était trop rigide ou trop limité et on a inventé le C++ qui sera traduit vers le C :

#include <iostream>  
  
int main()  
{  
 std::cout << "Hello World!\n";  
}

Puis on a utilisé C++ (qui est donc traduit en C qui est traduit en assembleur) pour créer un moteur qui allait interpréter un nouveau langage que l'on allait utiliser sur les pages Web : le JavaScript :

console.log("Hello World!");

C'est quoi le dev web ?

La particularité principale du développement web par rapport à d'autres types de dÃéeloppement c'est que votre utilisateur n'installera jamais votre site web. Il n'aura pas un .exe ou un .dmg ou que sais-je. Votre travail, il le verra via un navigateur.

Ce navigateur est un client qui ira demander les informations de votre site à un serveur.

Clients et serveurs

Internet, en très gros, c'est un énorme paquet d'ordinateurs. Chacun de ces ordinateurs peut théoriquement héberger un certain nombre de sites internets (en réalité ils ne le font pas tous, ou certains n'en hébergent qu'un).

Un ordinateur que l'on peut interroger à distance, on appelle généralement ça un serveur. Et ce qui vous sert à interroger un serveur, c'est un client (votre navigateur donc).

Requêtes et réponses

Pour interroger un serveur, on lui envoie une requête. Il y a un vocabulaire particulier, qu'on appelle le protocole HTTP pour ça. Vous vous ne le voyez pas, vous tapez simplement une requête dans votre moteur de recherche ou une adresse dans une barre d'URL.

Mais votre navigateur lui va transformer vos actions en une requête formatée pour le protocole HTTP et va envoyer cette requête au serveur.

Et le serveur va lui envoyer une réponse, elle aussi répondant au format HTTP. Parfois, vous pouvez vous en rendre compte. Par exemple, 404 est le code HTTP pour "qu'est-ce que tu racontes ça existe pas ton truc" plus poliment abbrégé en "Not found".

Quand tout se passe bien le code de réponse c'est le code 200 et le serveur vous envoie ce que vous avez demandÃ©. Un fichier, une image, du JSON etc etc. L'immense majorité du temps le serveur vous renvoie du HTML. Et c'est ce HTML que vous lisez ensuite.

Les méthodes HTTP

Il existe 4 grands types de requêtes HTTP :

GET

On demande une ressource au serveur, parfois en lui envoyant des paramètres directement dans l'URL de la requête.

GET c'est "je veux voir ça".

POST

On envoie des ressources aux serveurs qui n'apparaissent pas dans l'URL de la requête.

POST c'est "je veux créer ça"

PATCH

On envoie des infos au serveur dans le but de modifier partiellement une ressource.

PATCH c'est "je veux modifier ça"

DELETE

On envoie des infos au serveur pour supprimer une ressource

DELETE c'est "je veux effacer ça"

Les codes réponses HTTP

La liste complète : https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP

200

OK.

500

Erreur serveur.

301 et 302

Redirection.

403

La ressource existe mais vous n'avez pas le droit d'y accéder.

404

La ressource n'existe pas

418

Je suis une théière.

JavaScript

À quoi ça sert ?

À plein de choses mais principalement à animer les contenus d'une page web.

Lorsque vous recevez le contenu HTML + CSS de votre page, il est fixe, il ne changera plus, l'intégration est jolie.

Oui, mais voilà, vous aimez pouvoir filtrer des produits sans devoir attendre que tout le dialogue client > serveur se refasse.

Vous aimez que votre chat soit maintenu à jour alors que votre interlocuteur ou interlocutrice est en train de taper.

C'est là que JavaScript intervient. Il dynamise les contenus, coté client. Il fait de jolies animations, vous permet de faire des zooms sur des cartes ou des images, de filtrer des listes de mettre à jour des contenus sans que vous ayez à faire de requête.

À quoi ça ressemble ?

Ça peut par exemple ressembler à ça (c'est la fonction pour déplacer un personnage sur la gauche dans un jeu en JS) :

function moveLeft($character)
{
    if($character.posX > 1)
    {
        let $newBox = document.querySelector("section.col-start-" + ($character.posX - 1) + ".row-start-" + $character.posY);

        if(canIMoveThere($newBox))
        {
            let $currentBox = document.querySelector("section.col-start-" + $character.posX + ".row-start-" + $character.posY);
            $newBox.classList.add("character");
            $currentBox.classList.remove("character");
            $character.posX--;
            localStorage.setItem("character", JSON.stringify($character));
        }
    }
}

Ça peut aussi ressembler à ça (quand on clique sur le bouton, une fenêtre nous dit bonjour) :

button.addEventListener("click", function() {
  window.alert("Hello!");
});

Comment tester ?

Comment on teste en Javascript ? On utilise une fonction appelée console.log()

console.log("Coucou c'est moi");

affichera "Coucou c'est moi" dans la console des outils de développement de votre navigateur.

19 December 2025