DIU-EIL Lyon Bloc 1

Introduction à la programmation Web client en JavaScript

Romuald THION

Mercredi 24 avril 2019

Informations générales

Déroulé du mercredi 24/04/19, 10h-17h

  1. 10h00-11h00 Présentation générale plénière
  2. 11h00-13h00 Découverte de la programmation dans le navigateur
  3. 14h00-16h30 Interface dynamique
  4. 16h30-17h00 Restitution et retours

https://gonnord.gitlabpages.inria.fr/diu-lyon/bloc1/WEB/README.html

Objectifs pédagogiques

Couverture du programme du DIU

Ressources Lyon 1

Introduction à la programmation Web

Du PhP à la maturation de l’écosystème JavaScript pendant la guerre des navigateurs

Architecture générale client/serveur

Le serveur (a.k.a. back)

Serveur Web : répond aux requêtes HTTP, sert des pages :

Serveur web statique

Serveur d’application : génère des pages, gère des applications Web :

Serveur d'application

Le client (a.k.a. front)

Le trio HTML5, CSS3 et JavaScript (ES6+)

Le trio HTML5, CSS3, JS

Guides tous niveaux

https://developer.mozilla.org/en-US/docs/Learn

Le langage du navigateur : JavaScript

Des origines à ECMAScript 6 (2015)

Quelques caractéristiques :

La boucle d’évènements

Voir What the heck is the event loop anyway?, In The Loop et The browser event loop (source de l’image).

La boucle d'événements du navigateur

La boucle d’événement, grossièrement

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

Exemple avec setTimeout

console.log('Start');                 // (A)
setTimeout(                           // (T1)
  () => console.log('Call back #1')   // (CB1)
  , 3000);
console.log('Middle');                // (B)
setTimeout(                           // (T2)
  () => console.log('Call back #2')   // (CB2)
  , 1500);
console.log('End');                   // (C)

Modèle objet basé sur les prototypes

Voir javascript.info, Chap. 4, 8 et 9 et Working with objects

function Car(make, model, year) {
  this.make  = make;
  this.model = model;
  this.year  = year;
}

const mycar = new Car('Eagle', 'Talon TSi', 1993);
console.log(mycar.model);                                     //'Talon TSi'

console.log(mycar.constructor);                               //function Car()
console.log(Object.getPrototypeOf(mycar) === Car.prototype);  //true
console.log(mycar instanceof Car);                            //true
console.log(mycar instanceof Object);                         //true

La chaîne de prototypes

function Employee() {
  this.dept = 'general';
  this.name = 'default';
}

function WorkerBee() {
  this.projects = [];
}
WorkerBee.prototype = new Employee();

const amy = new WorkerBee;
console.log(amy.name);
console.log(amy.projects);

La chaîne de prototypes

amy.__proto__ === WorkerBee.prototype;
amy.__proto__.__proto__ === Employee.prototype;
amy.__proto__.__proto__.__proto__ === Object.prototype;
amy.__proto__.__proto__.__proto__.__proto__ === null;

Programmation fonctionnelle

Voir javascript.info, Chap. 6, First-class citizens functions, closures et arrows functions

Exemple de programmation fonctionnelle : l’usine à fonctions

// Version ES5
function creer_fonction(nom) {
  return function nom_inutile() {
    console.log("Bonjour " + nom);
  };
}
const maFonction = creer_fonction("Romuald");
maFonction();

// Version ES6 : arrows et template string
const creer_fonction_ES6 = (nom) => () => {console.log(`Bonjour ${nom}`);}
creer_fonction_ES6("Fabien")();

Exemple de programmation fonctionnelle : les méthodes de Array

const liste = [1 , 5 , 10 , 15];

const doubles = liste.map(x  => x * 2);
// doubles vaut [2 , 10 , 20 , 30]
const filtres = doubles.filter(x => x > 15) ;
// filtre vaut [20 , 30]
const somme = filtres.reduce((acc, cur) => acc + cur, 0) ;
// somme vaut 50

const s = [1 , 5 , 10 , 15]
  .map (x  => x * 2)
  .filter(x => x > 15)
  .reduce ((acc, cur) => acc + cur, 0) ;

Exemple de programmation fonctionnelle : décorateur maybe

function maybe(f,v) {
  return function(...x) {
    if (f(...x) === undefined) {
      return v;
    } else {
      return f(...x);
    }
  };
}

const maybe = (f,v) => (...x) => (f(...x)===undefined)?v:f(...x);

Exemple de programmation fonctionnelle : décorateur memoize

function memoize(f) {
  let results = new Map();
  return function(x) {
    if ( !results.get(x) ) {
      results.set(x, f(x));
    }
    return results.get(x);
  };
}

Document Object Model (DOM)

Le DOM fait le lien entre JavaScript et les documents (HTML, SVG, XML).

Voir Introduction to the DOM et Document Object Model (DOM)

document.addEventListener("DOMContentLoaded", () => {
  let heading = document.createElement("h1");
  let heading_text = document.createTextNode("Big Head!");
  heading.appendChild(heading_text);
  document.body.appendChild(heading);
});
function replace_btn() {
  this.value = prompt('Saisir une valeur');
}
document.getElementById('btn-exec').addEventListener('click', replace_btn);

Programmation asynchrone : CPS, callbacks

Voir javascript.info, Chap. 11, Overview of Events and Handlers et Callback function, Using Callbacks

Exemple AJAX avec l’API fetch

function chargeInsere(rendu) {
  return (url, id) =>
    fetch(url)
      .then(x => x.json())
      .then(rendu)
      .then(str => {document.getElementById(id).innerHTML= str;});
}

Activité pratique “programmation web”

  1. Matin : découverte de la programmation client
  2. Après-midi : interface dynamique

Documentation de référence

Outillage et bonne pratiques

Démonstration

les outils développeurs du navigateur

Réalisation des supports

Outils

Crédits images

Wikimedia Commons, Mozilla Developper Network, Node.js®, Ethan Bradley et Axel Rauschmayer.

Licence

CC BY-NC-SA 3.0 FR