Introduction à la programmation Web client en JavaScript
Romuald THION
Mercredi 24 avril 2019
Déroulé du mercredi 24/04/19, 10h-17h
https://gonnord.gitlabpages.inria.fr/diu-lyon/bloc1/WEB/README.html
Serveur Web : répond aux requêtes HTTP, sert des pages :
Serveur d’application : génère des pages, gère des applications Web :
Le trio HTML5, CSS3 et JavaScript (ES6+)
Des origines à ECMAScript 6 (2015)
Quelques caractéristiques :
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énement, grossièrement
Exemple avec setTimeout
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
La chaîne de prototypes
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
Exemple de programmation fonctionnelle : décorateur memoize
Le DOM fait le lien entre JavaScript et les documents (HTML, SVG, XML).
Voir javascript.info, Chap. 11, Overview of Events and Handlers et Callback function, Using Callbacks
Exemple AJAX avec l’API fetch
Wikimedia Commons, Mozilla Developper Network, Node.js®, Ethan Bradley et Axel Rauschmayer.