Ecrire un programme pour intégrer des vidéos

Exemples : web component

https://mdn.github.io/web-components-examples/

import : espace de nom !

import {ItemList} from './item.js';
//import {qs, $on} from './helpers.js';
import * as Help from './helpers.js';
import Template from './template.js';


export default class View {
/**
* @param {!Template} template A Template instance
*/
constructor(template) {
this.template = template;

this.$todoList = Help.qs('.todo-list');
this.$newTodo = Help.qs('.new-todo');
}

Promise : Training

Une promesse est un objet auquel on attache des callbacks plutôt que de passer des callbacks à une fonction.

Une promesse est comme un bipeur de restaurant.

Vous partez avec le bipeur (une promesse).
Vous êtes libre de faire autre chose.

Codelab

https://codelabs.developers.google.com/codelabs/pwa-promises/index.html?index=..%2F..dev-pwa-training#0

Google I/O ’19

Avec par ordre :

private class fields 6:57 Regex matchAll 9:16 Numeric literals 10:19 BigInt formatting 11:50 flat & flatmap 13:23 fromEntries 15:28 Map to Object conversion 16:47 globalThis 19:18 Stable sort 20:00 Intl.RelativeTimeFormat 22:45 Intl.ListFormat 24:29 Intl.DateTimeFormat -> formatRange 26:32 Intl.Locale 27:10 Top-Level await 28:12 Promise.allSettled/Promise.any 31:13 WeakRef 32:30

Class et extend : en action

fonction délégation

Utils.js

function $delegate(target, selector, type, handler, capture) {
const dispatchEvent = event => {
const targetElement = event.target;
const potentialElements = target.querySelectorAll(selector);
let i = potentialElements.length;

while (i--) {
if (potentialElements[i] === targetElement) {
handler.call(targetElement, event);
break;
}
}
};

  target.addEventListener(type, dispatchEvent, !!capture);
}

Utilisation

$delegate(target,"span","mouseover",show,true)