Les contenus du cours BRE03 Web Dev Course © 2024 par Mari Doucet sont sous licence CC BY-NC-SA 4.0
Jusqu’ici, dans le cadre du cours (hors remise à niveau) vous avez fait 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.
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 ne comprend que deux choses : il y a une impulsion électrique ou bien, il n’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.
Ç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
Chaque modèle de processeur a son propre langage assembleur, ici, c’est un exemple 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, parmi 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!");
La particularité principale du développement web par rapport à d’autres types de développement, 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.
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).
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 abré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.
Il existe 4 grands types de requêtes HTTP :
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”.
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”
On envoie des infos au serveur dans le but de modifier partiellement une ressource.
PATCH c’est “je veux modifier ça”
On envoie des infos au serveur pour supprimer une ressource
DELETE c’est “je veux effacer ça”
La liste complète : https://fr.wikipedia.org/wiki/Liste_des_codes_HTTP
OK.
Erreur serveur.
Redirection.
La ressource existe, mais vous n’avez pas le droit d’y accéder.
La ressource n’existe pas
Je suis une théière.
À 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é 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.
Ç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 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.
Une variable en programmation, c’est une sorte de boite dans laquelle on met une valeur et que l’on va pouvoir promener pour la manipuler.
Un exemple : quand on fait des calculs pour de la génération d’image de synthèse, on a souvent des calculs complexes, équations du troisième degré etc, etc. Plutôt que de devoir refaire le calcul à chaque fois, on le stocke dans une variable et on se sert directement de cette variable qui contient le résultat.
Un scope (ou portée en français) c’est la “zone de code” dans laquelle une variable existe, quel que soit le type de cette variable.
Une variable peut être globale ou bien limitée à une fonction ou encore limitée à une condition.
Pour déclarer une variable en JavaScript vous avez trois options :
let animal = "Dog"; // la variable animal contient Dog
let permet de déclarer une variable muable, c’est-à-dire que l’on pourra changer sa valeur :
let age1 = 12;
let age2 = 13;
let averageAge = (age1 + age2) / 2;
let age3 = 20;
averageAge = (age1 + age2 + age3) / 3; // pas besoin de remettre let la variable est déjà déclarée
const name = "Yep";
Lorsqu’une variable est déclarée avec const c’est que l’on veut qu’elle soit immuable. Sa valeur est constante et ne changera pas.
const name = "Yep";
name = "Nope"; // provoquera une erreur, on ne peut pas modifier une variable const
Vous ne devez pas utiliser var. Si ce mot clé fonctionne sur le même principe que let il est aujourd’hui une mauvaise pratique, et c’est lié au scope. var créé des variables aux scopes très larges, elles existent donc partout et peuvent très facilement être modifiées par erreur.
On lui préfère donc let qui limite le scope de la variable aux accolades qui l’entourent.
Pour tester des variables, on utilise toujours console.log() et on a deux techniques possibles
let name = "Yep";
console.log(name); // Affichera Yep
Vous donnez simplement le nom de la variable que vous avez déclarée et console.log affichera sa valeur.
Parfois, on a plusieurs données et on veut localiser très vite dans ses logs des valeurs, ou bien des rapports entre les valeurs. On utilise donc l’injection des variables dans une chaine de caractères.
let name = "Yep";
let age = 18;
console.log(`My name is ${name} and I am ${age} years old`); // affichera My name is Yep and I am 18 years old
En utilisant window.prompt(), vous allez pouvoir ouvrir une fenêtre qui demande une info à l’utilisateur :
let name = window.prompt("Comment vous appelez-vous ?");
En utilisant window.alert()vous allez pouvoir ouvrir une petite fenêtre qui transmet une information à l’utilisateur :
window.alert("Coucou !");
Pour commencer, nous allons principalement utiliser trois grands types de variables :
Les chaines de caractères ou String sont tout simplement des textes.
let name = "Yep" // name est de type String
Les nombres et les chiffres sont représentés par le type Number, qu’ils soient entiers ou décimaux, positifs ou négatifs.
let x = 345; // x est de type Number
let y = -67; // y est de type Number
let z = 4.23; // z est de type Number
Enfin les booléens représentent un état purement binaire, ils peuvent être soit true soit false.
let truth = true; // truth est un boolean
let lie = false; // lie est un boolean
C’est ce qui permet de faire une opération mathématique.
let x = 4 + 5; // x est égal à 9
let x = 5 - 4; // x est égal à 1
let x = 5 * 4; // x est égal à 20
let x = 20 / 4; // x est égal à 5
Un modulo, c’est le reste d’une division euclidienne.
let x = 3 / 2; // x est égal à 1,5 mais ramené à l'entier x égal à 1
let y = 3 % 2; // y est égal à 1
let x = (3 + 4) * 2; // x est égal à 14
let y = 3 + 4 * 2; // y est égal à 11
Une expression booléenne, c’est une expression dont le résultat peut-être soit true, soit false.
let equal = (2 === 2); // equal va contenir true
let unequal = (2 === 3); // unequal va contenir false
C’est particulièrement utile pour faire des comparaisons.
Permet de vérifier si une chose est égale à une autre.
let name = "Yep";
let equal = (name === "Yep"); // equal vaudra true
let unequal = (name === "Nope"); // unequal vaudra false
Permet de vérifier si une chose n’est pas égale à une autre.
let name = "Yep";
let equal = (name !== "Nope"); // equal vaudra true
let unequal = (name !== "Yep"); // unequal vaudra false
Permet de vérifier qu’une valeur est supérieure à une autre.
let x = 4;
let y = 1;
let yes = (x > y); // 4 > 1 donc yes vaudra true
let no = (y > x); // 1 < 4 donc no vaudra false
Permet de vérifier qu’une valeur est inférieure à une autre.
let x = 1;
let y = 4;
let yes = (x < y); // 1 < 4 donc yes vaudra true
let no = (y < x); // 4 > 1 donc no vaudra false
Permet de vérifier qu’une valeur est supérieure ou égale à une autre.
let x = 4;
let y = 1;
let z = 4;
let yes = (x >= y); // yes vaudra true
let no = (y >= x); // no vaudra false
let maybe = (x >= z); // maybe vaudra true
Permet de vérifier qu’une valeur est inférieure ou égale à une autre.
let x = 2;
let y = 4;
let z = 2;
let yes = (x <= y); // yes vaudra true
let no = (y <= x); // no vaudra false
let maybe = (x <= z); // maybe vaudra true
Un ET logique permet de vérifier si deux comparaisons renvoient toutes les deux true.
let x = 5;
let y = 2;
let z = 3;
let yes = ((x > 2) && (z < 3)); // yes vaudra true
let no = ((x > 5) && (z < 2)); // no vaudra false
Un OU logique permet de vérifier si au moins une de deux comparaisons renvoie true.
let x = 5;
let y = 2;
let z = 3;
let yes = ((x > 2) || (z < 3)); // yes vaudra true
let maybe = ((x >= 5) || (z < 2)); // maybe vaudra true
let no = ((x > 5) || (z < 2)); // no vaudra false
Lorsque l’on a besoin d’affiner le comportement de son code, on utilise souvent des conditions. Une condition ça utilise le résultat d’une expression booléenne ou d’une comparaison pour déterminer le comportement du code.
Une condition if cela équivaut à dire, si l’expression entre parenthèse donne true alors fait ça.
let age = 24;
if(age > 18) // si l'age est supérieur à 18
{
console.log("Majeur"); // alors affiche Majeur
}
Une condition else cela équivaut à dire sinon, par rapport à l’if précédent.
let age = 24;
if(age > 18) // si l'age est supérieur à 18
{
console.log("Majeur"); // alors affiche Majeur
}
else // sinon
{
console.log("Mineur"); // affiche Majeur
}
Une condition else if permet de nuancer entre un if et un else. C’est l’équivalent d’un “sinon si”.
let age = 37;
if(age < 25) // si l'age est inferieur à 25
{
console.log("Réduction junior");
}
else if(age >=25 && age < 60) // sinon si l'age est entre 25 et 60
{
console.log("Pas de réduction");
}
else // sinon
{
console.log("Réduction senior")
}
En programmation, lorsque nous voulons répéter une action, nous pouvons l’insérer dans une boucle.
Une boucle while c’est une boucle qui s’éxécute tant que la condition est true.
let i = 0;
while(i < 5) // tant que i est inferieur à 5
{
console.log(i); // affiche i
i = i + 1; // ajoute 1 à i
}
Si la condition est toujours vraie, vous aurez une boucle infinie et ça, c’est à éviter (ça bloque votre programme et votre navigateur).
Nous verrons les autres boucles en JavaScript, for et forEach plus tard dans le cours sur les tableaux.
Ici, vous avez deux sujets différents pour le mini-projet : un sujet où les étapes sont découpées pour vous aider à progresser dans le projet et l’autre où vous avez simplement les consignes et à vous de jouer.