Comprendre les concepts de base du web front-end

Leçon 1

Les fondamentaux des sites web statiques

Un site web statique est une série de fichiers HTML : chaque page du site est un fichier distinct. Quand tu visites la page d'accueil, tu vois seulement le fichier de la page d'accueil. Tous les sites étaient construits ainsi pendant les premières années du Web.

Leçon 2

La différence entre front-end et back-end

	Front-end	Back-end
où ?	dans le navigateur de l'utilisateur	sur le serveur
technologies	HTML, CSS, JavaScript (et React)	un serveur, une application (PHP/Laravel, Node.js…) et une base de données
rôle	construire ce que l'utilisateur voit et touche : boutons, menus, pages, liens, graphiques	fournir les données, les traiter et les stocker

Leçon 3

Les frameworks front-end

Type	Rôle	Exemples
framework back-end	communiquer avec la base de données (utilisateurs, sessions, articles…)	Node.js, Laravel, Django, Flask, Ruby on Rails
framework front-end applicatif	créer l'interface que l'utilisateur utilise	React, Angular, Vue.js
framework front-end de présentation

Leçon 4

Les aspects avancés de JavaScript (ES6)

Vidéo · À regarder

Apprendre le JavaScript : Les classes

Grafikart · YouTube

Regarde de 0:00 à la fin

Ouvrir sur YouTube à 0:00

	`export default`	`export` (nommé)
combien par fichier ?

Leçon 5

La programmation fonctionnelle

Vidéo · À regarder

Apprendre le JavaScript : Les fonctions

Grafikart · YouTube

Regarde de 0:00 à la fin

Ouvrir sur YouTube à 0:00

Vidéo · À regarder

Apprendre le JavaScript : Les timers

Grafikart · YouTube

Regarde de 0:00 à la fin

Ouvrir sur YouTube à 0:00

Travaux pratiques

TP · Le chronomètre (TD, exercice 6)

Exercices

Exercice 1.1

QCM de révision (TD officiel)

1Dans une page HTML, le JavaScript se place dans la balise…
2Pour changer le contenu de <span id='span1'>, on écrit…
3La bonne syntaxe pour un script externe est…
4Comment écrire « x n'est pas égal à 7 » ?
5La bonne syntaxe de for est…
6L'événement déclenché par un clic s'appelle…
7JavaScript est-il sensible à la casse ?
8[3,7,2,5,9,4,10].filter(n => n >= 5) affiche…
9[3,7,2,5,9,4,10].find(n => n >= 5) affiche…
10[3,7,2,5,9,4,10].find(n => n == 6) affiche…
11[3,7,2,5,9,4,10].map(n => n * 2) affiche…
12[3,7,2,5,9,4,10].reduce((total, n) => total + n, 0) affiche…

0/12 répondues

L'essentiel du chapitre

À retenir

Site statique = des fichiers HTML ; front-end (navigateur : HTML, CSS, JS) ; back-end (serveur, application, base de données).
Framework : boîte à outils et squelette ; back-end (Laravel, Node), front-end applicatif (React, Angular, Vue), présentation (Bootstrap).
React (Facebook/Meta) : bibliothèque d'interfaces, composants réutilisables, DOM virtuel + réconciliation ; idéal pour les SPA ; demande une bonne maîtrise de JS.
ES6 : classes (class, constructor, this, new, extends, super), modules (export default sans accolades, export avec accolades, as, type="module"), template literals `${x}`, ternaire c ? a : b, déstructuration { nom, age } = personne, [a, b, ...rest].
Tableaux : map (même taille), filter (condition), find (premier ou undefined), reduce (une valeur) ; copie [...tab].
Fonctionnel : récursivité, fermetures, fonctions passées en paramètre, fonctions fléchées, spread, fonctions pures (ajouter [...t, v], supprimer filter, modifier filter + ajout, objet {...o, x}) ; splice n'est pas pur.

Framework	À retenir
Angular (Google)	plateforme et framework pour créer des applications SPA en HTML et TypeScript ; structure standard, adapté aux grandes applications
Vue.js	framework basé sur HTML, CSS, JavaScript, déclaratif et à composants ; flexible (peut s'exécuter dans le navigateur) et facile à intégrer dans une application existante

Méthode	Renvoie	Exemple
`map`	un nouveau tableau de même taille, avec chaque élément transformé	`personnes.map(p => p.nom)` → `["Rami", "Fatihi", "Chakib", "Mounir"]`
`filter`	un nouveau tableau avec les éléments qui vérifient la condition	`personnes.filter(p => p.age >= 35)` → Chakib et Mounir
`find`	le premier élément qui vérifie la condition, ou `undefined`	`personnes.find(p => p.age >= 45)` → Chakib ; `find(p => p.age == 50)` → `undefined`
`reduce`	une seule valeur calculée à partir de tous les éléments	voir ci-dessous

class Etudiant {
  constructor(nom, age) {
    this.nom = nom;      // on garde les valeurs dans l'objet avec this
    this.age = age;
  }
  info() {
    return `Etudiant nom:${this.nom} a pour age:${this.age}`;
  }
}

let et1 = new Etudiant("Rami", 23);
let et2 = new Etudiant("Karimi", 21);
console.log(et1.info());   // Etudiant nom:Rami a pour age:23
console.log(et2.info());

class Stagiaire extends Etudiant {
  constructor(nom, age, stage) {
    super(nom, age);        // appelle le constructeur de Etudiant
    this.stage = stage;
  }
  info() {
    return `${super.info()} stage:${this.stage}`;
  }
}

let stg1 = new Stagiaire("Rami", 23, "dev mobile");
console.log(stg1.info());   // Etudiant nom:Rami a pour age:23 stage:dev mobile

compteur.js (extrait)

function incrementer(temps) {
  let time = { ...temps };
  return function () {          // la fermeture renvoie une fonction
    time.second++;
    if (time.second >= 60) {
      time.second = 0;
      time.minute++;
      if (time.minute >= 60) { time.minute = 0; time.heure++; }
    }
    affiche(time);
    currentTime = time;
    return time;
  };
}

function incrementerTimer() {
  stopTimer();
  let next = incrementer(currentTime);
  timer = setInterval(next, 1000);   // la fonction next est passée en paramètre
}

function somme(a, b) { return a + b; }
const mySomme = (a, b) => a + b;          // la même fonction
console.log(mySomme(3, 4));               // 7

const fact3 = n => (n === 0 ? 1 : n * fact3(n - 1));

let mutateValue = 10;
function impureFonction(newValue) {
  return mutateValue += newValue;     // modifie la variable extérieure
}
impureFonction(20);
console.log(mutateValue);             // 30 : la variable a changé

let immutableValue = 10;
function pureFonction(newValue) {
  return immutableValue + newValue;   // ne modifie rien
}
pureFonction(20);
console.log(immutableValue);          // 10 : inchangée

Etudiant.js

const Etablissement = 'ISGI';

class Etudiant {
  constructor(nom, age) {
    this.nom = nom;
    this.age = age;
  }
}

function info(etudiant) {
  return `nom:${etudiant.nom} age:${etudiant.age}`;
}

export default Etudiant;
export { Etablissement, info };

Index.js

import Etudiant, { Etablissement, info } from './Etudiant.js';

let etd1 = new Etudiant("Rami", 33);
console.log(info(etd1));

// avec des alias (as)
import Etd, { Etablissement as Etab } from './Etudiant.js';
console.log(new Etd("Rami", 33).nom + " Etablissement: " + Etab);

let isMember = true;
let remise = isMember == true ? 0.2 : 0.1;
console.log("remise: ", remise);              // 0.2

let nom;                                       // undefined
let salutation = nom ? "salut " + nom : "inconnu";
console.log(salutation);                       // inconnu (valeur nulle gérée)

const personne = { nom: "fatihi", age: 23, adresse: { rue: 14, ville: "casa" } };

const { nom, age, adresse: { rue }, adresse: { ville } } = personne;
console.log(nom, age, rue, ville);      // fatihi 23 14 casa

function presentation({ nom, age, adresse: { rue }, adresse: { ville } }) {
  console.log("salut ", nom, age, rue, ville);   // déstructuration dans les paramètres
}
presentation(personne);

Les données utilisées

const personnes = [
  { nom: "Rami", age: 33, estMember: true },
  { nom: "Fatihi", age: 24, estMember: false },
  { nom: "Chakib", age: 45, estMember: true },
  { nom: "Mounir", age: 37, estMember: false },
];

reduce : le total des montants

const clients = [
  { nom: "Rami", montant: 4500 }, { nom: "Karimi", montant: 2300 },
  { nom: "Chaouki", montant: 5500 }, { nom: "Ramoun", montant: 7700 },
];
const totalMontants = clients.reduce(function (total, client) {
  return total += client.montant;
}, 0);                         // 0 = valeur de départ du total
console.log(totalMontants);    // 20000

let numbers = [10, 20, 30, 40, 50];
const [a, b, ...rest] = numbers;
console.log(a, b, rest);           // 10 20 [30, 40, 50]

const numbers2 = [...numbers];     // une COPIE du tableau
let x = 10, y = 20;
[x, y] = [y, x];                   // permuter : x = 20, y = 10

Exemples du support

let myList = [1, 2, 3, 4, 5];
function pureAppend(value) {
  return [...myList, value];
}
console.log(pureAppend(10));   // [1, 2, 3, 4, 5, 10]
console.log(myList);           // [1, 2, 3, 4, 5] : inchangé

let dontMutateInjection = [6, 7, 8];
function pureInject(index, newValue) {
  return [...dontMutateInjection.slice(0, index), newValue, ...dontMutateInjection.slice(index)];
}
console.log(pureInject(1, 10));   // [6, 10, 7, 8]

const notes = [
  { id: 10, module: 'Algorithme', note: 15 }, { id: 10, module: 'POO', note: 17 },
  { id: 11, module: 'Algorithme', note: 16 }, { id: 11, module: 'POO', note: 14 },
];
function pureUpdateNote(id, module, note) {
  return [...notes.filter(n => !(n.id === id && n.module === module)), { id: id, module: module, note: note }];
}
console.log(pureUpdateNote(10, 'POO', 18));   // la note POO de l'étudiant 10 devient 18 (à la fin du tableau)

ajouter	`[...myList, value]`
insérer à l'index `i`	`[...tab.slice(0, i), newValue, ...tab.slice(i)]`
supprimer	`tab.filter(ins => ins.id != id)`
modifier	`[...notes.filter(n => !(n.id === id && n.module === module)), { id, module, note }]`
changer un objet	`{ ...personne, age: age }` ou `Object.assign({}, personne, { age: age })`

Comprendre les concepts de base du web front-end

Comprendre les concepts de base du web front-end

Les fondamentaux des sites web statiques

La différence entre front-end et back-end

Les frameworks front-end

Les aspects avancés de JavaScript (ES6)

La programmation fonctionnelle

TP · Le chronomètre (TD, exercice 6)

Exercices

QCM de révision (TD officiel)

À retenir

Les exercices du cours

Les classes Document et Livre (TD, exercice 1)

La classe Book (TD, exercice 2)

Les tableaux de livres (TD, exercices 3 à 5)