LIFWEB - CM1

Introduction au Web et à JavaScript

Romuald THION

Semestre printemps 2023-2024 UCBL

Introduction

Organisation de l’UE

informations générales
liens emploi du temps
MCC
programme et supports

http://lifweb.pages.univ-lyon1.fr/

Doctrine

Documentation de référence
Pré-requis variés
Use the platform : les standards d’abord
Toute la chaîne de la conception au déploiement
Focus sur la qualité, l’automatisation et l’efficacité

Faire

Les exercices 0 sont à préparer avant.
Les TPs sont à finir en intégralité hors BONUS.
- si vous avez le temps en séance
- sinon pour approfondir avant les épreuves.
Les assistants LLMs sont autorisés une fois qu’on sait évaluer la qualité de leurs réponses.

Changements de groupes

Hors motif impérieux, possible si vous donnez un-e camarade avec qui échanger.

Pour les motifs impérieux, j’affecterai d’office.

Sondage (1/2)

Qui a déjà programmé en JavaScript ?
Qui a déjà programmé en JavaScript, en AJAX (fetch etc.) ?
Qui a déjà programmé en JavaScript, avec un framework client (Angular, React etc.) ?
Qui a déjà programmé en JavaScript, côté serveur (Node.js etc.) ?

Sondage (2/2)

Qui n’a jamais utilisé https://code.visualstudio.com/ ?
Qui n’a jamais utilisé https://git-scm.com/ ?
Qui n’a jamais utilisé https://forge.univ-lyon1.fr ?
Qui n’a jamais utilisé Linux ?

Programmation Web

Mousquetaires du Web

L’écosystème du web

Les différents métiers du Web

Beaucoup de concepts, de technique et d’évolutions 😨

HTTP

Le protocole du Web

Basic aspects of HTTP

HTTP is simple
HTTP is extensible (via headers)
HTTP is stateless, but not sessionless

Méthodes des requêtes HTTP

Appelées aussi verbes, cf. MDN

GET : get a specific resource
POST: create a new resource
PUT: update an existing resource (or create)
DELETE: delete the specified resource
HEAD: get the metadata information
- comme GET mais sans contenu (en-tête seulement)
TRACE, OPTIONS, CONNECT, PATCH: avançées

Nomenclatures CRUD/HTTP/SQL

CRUD	HTTP	SQL
create	`POST`	`INSERT`
read	`GET`	`SELECT`
update	`PUT`	`UPDATE`
delete	`DELETE`	`DELETE`

Codes des réponses HTTP

Informational responses (100–199)
Successful responses (200–299)
- 200 OK / 201 Created / 204 No Content
Redirects (300–399)
- 301 Moved Permanently / 304 Not Modified / 307 Temporary Redirect / 308 Permanent Redirect
Client errors (400–499)
- 400 Bad Request / 401 Unauthorized / 403 Forbidden / 404 Not Found / 405 Not Allowed
Server errors (500–599)
- 500 Internal Server Error / 501 Not Implemented

Pourquoi HTTP est important ?

c’est le protocole du Web
en programmant une application web (backend) vous devrez choisir :
- les chemins (URL)
- les verbes possibles sur ces chemins
- les retours d’erreurs (status code)
- les formats des réponses (HTML, JSON, images)

Architecture classique n-tiers

Client, serveur Web et serveur d’application (source)

Démonstrations

Devtools
- Firefox
- Chrome
https://httpie.io/ et https://curl.se/
Analyseur de protocole https://www.wireshark.org/

HTML5 et CSS3

HTML : HyperText Markup Language

Langage de balises utilisé pour structurer le contenu d’un document destiné à être affiché par un navigateur.

Liste d’une 100aine d’éléments différents :
- http://html5doctor.com/.
À chaque balise HTML est associé une sémantique.
Chaque élément de contenu est placé dans une balise.
L’imbrication des balises donne une structure d’arbre.

Principales balises HTML5

https://css-tricks.com/how-to-section-your-html/

CSS : Cascading Style Sheets

Exemple https://csszengarden.com/.

Pour réviser les sélecteurs https://flukeout.github.io/ ou les Flexbox avec https://flexboxfroggy.com/.

Principe des priorités CSS

Héritage
- Les règles sont appliquées aux descendants
Surcharge
- Si plusieurs règles s’appliquent, on combine les propriétés qu’elles modifient
Spécificité, https://specificity.keegan.st/
- La règle la plus spécifique l’emporte
- #id >> .class >> element
Cascade
- En cas d’égalité de spécificité, l’ordre des définitions l’emporte

Voir exemple HTML et CSS.

Conseils généraux

Travaillez systématiquement en navigation privée
Utilisez des sources de référence
- https://developer.mozilla.org/
- https://javascript.info/
Validez vos documents HTML5/CSS3
- https://validator.w3.org/
- https://jigsaw.w3.org/css-validator/

JavaScript

JavaScript (JS) is a lightweight interpreted (or JIT compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, […]. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. (Source MDN)

What the f*ck JavaScript?

[1, 2, 10, 11, 20].sort();
// 🤯 [ 1, 10, 11, 2, 20 ]

"b" + "a" + +"a" + "a";
// 🤯 'baNaNa'

NaN === NaN;
// 🤯 false

null == 0;
// false
null > 0;
// false
null >= 0;
// 🤯 true

Une grande partie des problèmes provient des nombreuses conversions implicites (typage faible).

Programmation et Web

Côté client (navigateur Web)

Langages pour la programmation frontend : JavaScript, éventuellement transpilé depuis un autre langage ou une version plus récente.

Moteur JS : V8, SpiderMonkey ou JavaScriptCore
Gérer les interactions avec l’utilisateur et avec les serveurs

Côté serveur

Langages pour la programmation backend : à peu près tous : rust, Go, PhP, Java, JavaScript, Python, ruby… Plus ou moins adapté selon les traits du langage.

Runtime JS : moteur JS + environnement système : Node.js (V8) ou alternatives récentes Bun, Deno
Générer le contenu, éventuellement le présenter dans un format
S’interfacer avec d’autres composants systèmes

Langage multi-paradigmes

JS est impératif / structuré

Affectation de variable
Séquences d’instructions
Boucles et conditionnelles
Exceptions (throw .. catch .. finaly ..)

function fact(n) {
  let x = 1;
  for (let i = 1; i <= n; i++) {
    console.debug(i);
    x *= i;
  }
  return x;
}
console.assert(fact(6) === 720);

JS est orienté objet

Notion d’objet native
- création d’objets par prototypage
- pas de système de classe (ajout de sucre en ES6)
Tout est objet, notamment les fonctions

function funct(x) {
  return x * x;
}

console.assert(typeof funct === "function");
console.assert(funct instanceof Object);
console.assert(funct instanceof Function);
console.assert(typeof [1, 2, 3] === "object");
console.assert([1, 2, 3] instanceof Object);
console.assert([1, 2, 3] instanceof Array);

JS est fonctionnel

Fonctions valeurs citoyennes de premier ordre — Fonctions valeurs *citoyennes de premier ordre*

Peuvent être affectées à des variables
Peuvent être passées en paramètre
Peuvent être retournées comme résultat
- Fermetures lexicales : (\lambda x.e)(v) \equiv_{\beta} e[x \mapsto v]

// syntaxe usuelle
function adderFunction(x, y) {
  return x + y;
}
console.assert(adderFunction(2, 3) === 5);

// expression fonctionnelle
const adderFunctExpr = function (x, y) {
  return x + y;
};
console.assert(adderFunctExpr(2, 3) === 5);

// syntax fat arrows
const adderArrow = (x, y) => x + y;
console.assert(adderArrow(2, 3) === 5);

const adderCurry = (x) => (y) => x + y;
const adderCurryExplicite = function (x) {
  return function (y) {
    x + y;
  };
};

console.assert(typeof adderCurry === "function");
console.assert(typeof adderCurry(2) === "function");
console.assert(typeof adderCurry(2)(3) === "number");

function fact(n) {
  return n < 2 ? n : n * fact(n - 1);
}
console.assert(fact(6) === 720);

API fonctionnelle des tableaux

const isEven = (x) => x % 2 === 0;
const square = (x) => x * x;

const allSquaresOfEvensAreEvens = Array.from({ length: 8 })
  .map((_, idx) => idx)
  .filter(isEven)
  .map(square)
  .every(isEven);
console.assert(allSquaresOfEvensAreEvens);

const fact = (n) =>
  Array.from({ length: n })
    .map((_, idx) => idx + 1)
    .reduce((acc, x) => acc * x, 1);
console.assert(fact(6) === 720);

Affectation par décomposition

un pattern matching léger
existe pour les tableaux et les objets
voir MDN - destructuring assignment

const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.debug(a, b, rest);

// swap Python style
let x = 42;
let y = 13;
[x, y] = [y, x];
console.assert(x === 13 && y === 42);

const obj = { name: "Romu", emoji: "😀", age: "42" };
const { age, emoji: icon, unk = false } = obj;
console.log(age, icon, unk);
function get({ age, name }) {
  return `${name} is ${age}`;
}

JS est événementiel

Dit aussi asynchrone, voire concurrent coopératif

Suspension de l’exécution des fonctions (coroutines)
Adapté aux longues actions imprévisibles (I/O) :
- lire des données disques
- échange réseau
- action utilisateur
- requêtes SQL
L’ordre des actions est impossible à prévoir (concurrence)

C’est un des traits principaux de JavaScript, qui le différencie de Python.

Navigateur

const event = new Event("greet");
const target = new EventTarget();

target.addEventListener("greet", (e) => {
  console.log(`${JSON.stringify(e)} emmitted`);
});

target.dispatchEvent(event);

Node.js

const EventEmitter = require("node:events");
const eventEmitter = new EventEmitter();

eventEmitter.on("greet", (e) => {
  console.log(`${JSON.stringify(e)} emmitted`);
});

eventEmitter.emit("greet");

Syntaxe de base JS

Types de données

MDN - Primitive : tous immutables
- null (à aviter) et undefined
- Boolean
- Number et BigInt (taille arbitraire)
- String immutable
- Symbol (cas d’usage spécifique)
MDN - Object

Objets standards MDN - Standard built-in objects

Déclaration de variables (MDN)

~~var x;~~, ~~var x = val;~~ : à bannir
- portée fonction/global
let x; let x = val; : à éviter
- portée bloc
const x = val; à privilégier
- portée bloc
- naturel pour les types primitifs
- pour les objets : constant, mais mutable ⚠️

Boucles

for : style C, à éviter (MDN)
do...while : style C, à réserver (MDN)
while : style C, à réserver (MDN)
for...in : spécifique JS, à craindre (MDN)
for...of : style Python via itérables (MDN)
for await...of : itérables asynchrones (MDN)