01 HTML5

Comprendre HTML5
Benjamin Canou, OCaml PRO

16 & 23 fvrier 2016
Dveloppement dApplications Rticulaires

HTML5 ?
DAR Comprendre HTML5 2 / 69

HTML5 ?
Derrire cet acronyme se cache :

une proposition du WHATWG pour faire avancer le W3C plus vite,
maintenant adopte par le W3C.
En fait, on y associe toutes les technologies Web client modernes :
la version 5 dHTML,
les versions rcentes dECMAScript (ES6 en cours),
les nouvelles APIs JavaScript du navigateur,
les nouveaux attributs CSS 3.
Buts de ces premiers cours :
Rappels des bases de la programmation client.
Nhsitez pas poser vos questions ou demander une dmo !
tudier les principales nouveauts.

Rappels

Fonctionnement dun navigateur
Application des CSS

Modle dexcution : la boucle dvnements Rendu graphique
Gestion des vnements
Pas de mise jour de laffichage pendant la gestion dvnements.
Impossible de toucher la queue dvnements de linstant courant.
Excution bloque durant la gestion dvnements.
(Dont) try javascript:setTimeout(function(){while(true){}}) .
Gestion dvnements :
Prendre en charge un vnement = lui affecter une fermeture JavaScript
Mcanisme particulier dinhibition/propagation dvnements (le bullage).
Pour dclencher un vnement : setTimeout (pour le tour prochain).

Chargement de la page
1/2
Lorsque le navigateur rencontre un lment script :

il stoppe lanalyse syntaxique,
lance le tlchargement du script,
met jour le DOM avec la partie dj analyse,
interprte le script ds son arrive,
reprend lanalyse syntaxique.
Laffichage est bloqu pendant le tlchargement.
Le navigateur peut tlcharger en parallle plusieurs scripts conscutifs.
Il les excute dans lordre une fois chargs.
Les CSS sont traites de la mme faon.

Chargement de la page
2/2
retenir :
Les calculs longs bloquent le chargement de la page.
Seul le DOM de la partie avant le script est disponible.
La boucle peut mme dmarrer avant le chargement complet.
Il ne suffit pas dutiliser setTimeout pour tre sr que le DOM est prt.
Astuce classique : utiliser les vnements onload ;
ou insrer les scripts la fin du document.
Nouveauts HTML5 :
async , le script est excut ds quil est tlcharg
defer , le script est excut une fois le document complet

Mise jour de la page
1/2
Lorsquon modifie le document depuis JavaScript :
la structure DOM est modifi instantanment,
si la modification est illgale,
soit une exception DOM est leve,
soit une modification alternative est applique
(ex : insrer un nud dans un pre , affecter un littral de style),
et cest tout !
Au dbut du prochain tour de boucle,
lapplication des rgles CSS est recalcule,
la mise en page est recalcule,
laffichage est mis jour,
les nouvelles tailles sont refltes dans le DOM.

Mise jour de la page
2/2
Comment observer un changement de style ?

on coupe le code en deux parties (avant / aprs la modification),
on insre une pause avec setTimeout ou requestAnimationFrame .
Aie aie aie, a clignotte !
Meilleure solution : viter ce type de design autant que possible.
Les CSS modernes permettent

dviter beaucoup de code de calcul dinterface,
de rendre fluide les transitions lorsque ce code est invitable.

HTML

La syntaxe
1/3
Une longue histoire :

lorigine, SGML et HTML.
Dcouplage structure / grammaire avec XML et DTD.
Variante XML dHTML : XHTML.
Plusieurs versions dXHTML, et variantes strict et transitional.
Support variable des navigateurs.
La version 5 est un effort duniformisation, centre sur les implantations.

La syntaxe
2/3
Finalement, HTML5 cest :

Deux variantes : une rtro-compatible SGML et une XML.
Grammaire moins exigeante.
Spcification de limbrication clarifie :
Avant : inline et block comme en CSS.
HTML5 : metadata, flow, sectioning, heading, phrasing, embedded,
interactive.
Spcification complte de linterprtation des documents mal forms.
Quelques lments modifis / ajouts / supprims.
Attributs personnaliss : data-xxxxxx .

La syntaxe
3/3
Les lments de structure ajouts :

Buts : indexation, accessibilit.
main , aside , header , footer , nav : lments principaux de la page.
section (inclut un h1 h6 ), article , figure (inclut un figcaption ).
Identification de contenu : mark , output , ruby , bdi , etc.
lments dinterface : progress , meter , time
Nouveaux types de champs de formulaire : <input type='email'> , etc.
Contenu non-HTML inclus : math , svg , audio , video , canvas

Un petit exemple
1 : < !DOCTYPE html >

2 : < html >
3 : < head >
4 : < meta charset = 'UTF -8 ' >
5 : < title > Bienvenue sur presse -le - bouton . com </ title >
6 : < style >
7 : body { text - align : center ; }
8 : </ style >
9 : </ head >
10 : < body >
11 : < button > PRESSE MOI </ button >
12 : </ body >
13 : </ html >
crit en variante polyglotte : compatible SGML et XML.

CSS

La syntaxe
1/4
Syntaxe de base : selecteur { attribut: valeur; } .

Slecteur : expression ciblant un lment de la page.
Attribut : parmi une liste bien dfinie.
Valeur : syntaxe dpendante de lattribut.
Exemple : body { color: red; } .
Commentaires : /* ... */
Styles inclus dans une page :

Par lment : <body style="color: red"> ... </body> .
Feulle incluse : <style> /*  */ </style> .

La syntaxe
2/4
On peut factoriser un slecteur :

body { color: red; background: pink; }
qui est strictement quivalent :
body { color: red; }
body { background: pink; }
On peut aussi factoriser les attributs :

div,span { color: red; }
qui est strictement quivalent :
div { color: red; }
span { color: red; }

La syntaxe
3/4
On peut factoriser certains attributs lis avec des macro attributs :

body { border: 3px solid yellow; }
qui est trictement quivalent :
body { border-color: yellow; }
body { border-width: 3px; }
body { border-style: solid; }
mais attention, en ralit il sagit de :
body { border-top-color: yellow; }
body { border-right-color: yellow; }
body { border-bottom-color: yellow; }
body { border-left-color: yellow; }
body { border-top-width: 3px; }
...

La syntaxe
4/4
Certains macro-attributs -vendor-xxxx dfinissent une variante propritaire.
-moz-xxxx pour Gecko, Servo (Firefox)
-webkit-xxxx pour Webkit (Chrome, Safari)
-ms-xxxx pour les navigateurs Microsoft
En gnral, il sagit dintroduire un brouillon de spcification.
Une fois la spcification implante, les attributs prfix et dfinitif sont des alias.
On se retrouve souvent avec un motif comme suit :

1 : - webkit - opacity : 0.5 ;
2 : -moz - opacity : 0.5 ;
3 : opacity : 0.5 ;
Des prprocesseurs existent pour faire ce travail automatiquement (SASS, LESS).

Les slecteurs
1/9
Slecteurs de base :
xxx cible les lments <xxx>...</xxx> .
#xxx cible les lments avec lattribut id="xxx" .
.xxx cible les lments avec lattribut class="... xxx ..." .
Attention, on ne slection que les lments, pas les nuds texte.
Pour personnaliser une partie de texte, on peut la mettre dans un <span> .

Les slecteurs
2/9
Pour slectionner un lment rpondant plusieurs critres,

coller simplement plusieurs slecteurs sans espace.
Par exemple,
le slecteur div#saucisse.com
slectionne llment <div id="saucisse" class="com"></div> .
On peut inverser un slecteur avec :not(selecteur) .
Exemple : :not(div) slectionne tous les lments sauf les divs.

Les slecteurs
3/9
Deux slecteurs spars par une espace sel1 sel2 signifient que :
llment cible doit tre slectionn par sel2 ,
un de ses anctre doit tre slectionn par sel1 .
En ralit, on peut dcrire un chemin complet dans larbre :
par exemple div#main h1 a { color: red; }
colore en rouge slection les liens dans les titres du div lid main .

Les slecteurs
4/9
Oprateurs de chemin :
sel1 sel2 : un anctre de llment doit vrifier sel1
sel1>sel2 : le parent de llment doit vrifier sel1
sel1+sel2 : le frre juste gauche de llment doit vrifier sel1
sel1~sel2 : un frre gauche de llment doit vrifier sel1
o llment cible doit vrifier sel2 , qui nest pas un oprateur de chemin.
noter :
Les chemins ne peuvent que descendre ou avancer.
On slectionne toujours le dernier lment de chemin.

Les slecteurs
5/9
Il est possible de slectionner selon les attributs de llment :

[attr] : llment possde un attribut attr
[attr=val] : lattribut attr vaut val
[attr^=val] : lattribut attr commence par val
[attr$=val] : lattribut attr finit par val
[attr*=val] : lattribut attr contient val
[attr~=val] : lattribut attr contient le mot val
[attr|=val] : lattribut attr est val ou commence par val-

Les slecteurs
6/9
Certains slecteurs sont appels pseudo classes.

Ils permettent de tester ltat de llment (et non sa structure).
Slecteurs secifiques aux liens :

:link , un lien non visit
:visited , un lien visit
Slecteurs secifiques aux tats de linterface :
:active , un lment activ (bouton press, lien cliqu)
:hover , un lment survol
:focus , llment ayant le focus clavier
Formulaires : :enabled , :disabled , :checked , etc.

Les slecteurs
7/9
Le slecteur :target slectionne llment cible de lURL du document.
Par exemple, voir mette en valeur la cible dun lien une fois cliqu :
On identifie la partie cible <div id="sec4">...</div> .
On insre un lien vers cette ancre Voir <a href="#sec4">section 4</a>.
On met en valeur la cible div:target { background: yellow; } .

Les slecteurs
8/9
Slecteurs de position :
:first-child , llment est le premier fils de son parent
:nth-child(an+b) , n. llment est le a nime + b fils de son parent
:only-child , :last-child , :nth-last-child(n)
:only-of-type , :first-of-type , :last-of-type ,
:nth-of-type(n) , :nth-last-of-type(n)

Les slecteurs
9/9
Attention : ne pas confondre avec les pseudo lments :

::first-letter la premire lettre du contenu texte dun lement
::first-line la premire ligne du contenu texte dun lement
::before un pseudo lment vide avant le texte dun lment
::after un pseudo lment vide aprs le texte dun lment
Ces slecteurs crent un lment virtuel dans larbre !
On peut modifier leur contenu avec lattribut content .
Exemple : button::before {content: "["} button::after {content: "]"}
Ajoute des crochets autour du texte des boutons.

Les priorits
1/2
Pour chaque (lment, attribut), on regarde les slecteurs qui sappliquent.
Puis on jour au jeu suivant.

1 #id donne 100 point !
1 .classe , :pseudoclasse ou [attribut] donne 10 point !
1 element ou ::pseudoelement donne 1 point !
La rgle avec la meilleure somme gagne.
En cas dgalit, la dernire rgle sapplique.

Lattribut style gagne sur les slecteurs.
Le mot clef !important :

donne la plus haute priorit une rgle, mme sur lattribut style ;
en cas de conflit, la dernire rgle sapplique ;
ne devrait tre utilis que trs rarement.

Les priorits
2/2
Et si aucune rgle ne sapplique ?

Une valeur par dfaut (initiale), dfinie dans une table, est applique.
Si cet attribut est hritable, lattribut de llment parent est prfr.
On peut dfinir lhritage manuellement :
Affecter inherit un attribut force lhritage.
Affecter initial casse lhritage et donne la valeur par dfaut.
Affecter unset un attribut hritable quivaut inherit .
Affecter unset un attribut non hritable quivaut initial .

Smantique des attributs CSS

Le box-model
top (1)
right (2)
left (4)
bottom (3)
content (de taille width / height )

padding (affect par background )
border
outline (par dessus la margin )
margin (parfois recouvertes par celles dautres lments)

Les attributs comsmtiques
1/5
Marges :
margin: top right bottom left , valeurs ngatives autorises !
padding: top right bottom left
Fond :
background-image: image, ...
background-color: couleur, ...
background-position: x y
background-size: width height
background-repeat: no-repeat|repeat|repeat-x|repeat-y

2/5
Texte :
font-family: serif|sans-serif|monospace ou un nom specifique
font-style: normal|italic|oblique
font-weight: normal|bold|bolder|lighter
font-size: size
line-height: height
Fonte personnalise :
1 : @font - face {
2 : font - family : mafonte ;
3 : src : url ( ma_fonte . woff) ;
4 : }
Plusieurs fournisseurs de fontes sur le Web (ex : google fonts).

3/5
Bordures (idem pour outline) :

border-left-width: width
border-left-style: solid|dotted|dashed|none
border-left-color: color
Raccourci border: width color style
Raccourci border-left: width color style
Raccourci border-width|style|color: top right bottom left
border-top-left-radius: hradius (/ vradius)
Raccourci border-radius: topleft topright bottomright bottomleft

4/5
Les couleurs :
couleurs nommes
#RGB , #RRGGBB
rgb(0..255, 0..255, 0..255) , rgba(0..255, 0..255, 0..255, 0..1)
Les images :
url('url') , y compris url('data:image/gif;base64,...')
linear-gradient(0..360deg|to top..., color pos, color pos, ...)
radial-gradient(...) attention, kitsch assur !
Les longueurs :
px : pixels virtuels ( 200%, un px prend 4 vrais pixels)
ex : hauteur dun x
em : largeur dun m

5/5
Les effets :
transform: scale(0..1)|scaleX(0..1)|scaleY(0..)|rotateX(ndeg)
filter: blur(radius) | contrast(pct)| ... (effets SVG)
background-blend-mode
blend-mode: normal|multiply|screen|overlay|...
text-shadow: x y radius color
box-shadow: x y spread radius color

Lattribut display
1/2
Deux modes historiques :
display: block , blocs principaux aligns verticalement,
exemple dlment ayant lattribut display block par dfaut : <div> .
display: inline , contenu des blocs, align horizontalement avec csure
exemple dlment ayant lattribut display inline par dfaut : <span>
<span> <span> <span>
<span> <img> <span>

<div>
<span>
suite
<div>

Lattribut display
2/2
Linterprtation de certains attributs dpend du mode de display :
text-align ( left , justify , etc.) na de sens quen mode block .
vertical-align ( top , baseline , etc.) na de sens quen mode inline
(mais on peut le dfinir sur le bloc parent et utiliser lhritage).
Modes spciaux :
inline-block : permet dinclure un bloc dans une ligne.
none : lelment napparait pas du tout
(diffrent de visibility: hidden ou opacity: 0 ).
run-in : choisit selon le contexte
(par exemple block dans un div mais inline dans un p ).
Simulation de tableaux et listes :
list-item , table , table-cell , table-row , etc.
inline-table : permet dintgrer un tableau au milieu dune ligne.

display : flex
1/2
Modle reprenant la mise en page dinterfaces graphiques classiques.
quivalent des botes et des glues des toolkits classiques.
Un bloc dont le contenu est une liste de blocs rpartis de faon flexible.
Sur le parent (la bote) :
display: flex ou display: inline-flex
(opt) flex-direction: row ou column
(opt) align-items: strech|center|baseline|flex-start|flex-end
Sur les enfants (les lments) :
flex: 0 , ne prendre que lespace ncessaire
flex: n , prendre lespace disponible avec un poids de n
(opt) flex-shrink: n dfinir le poids lorsquil ny a pas assez de place
(opt) flex-grow: n dfinir le poids lorsquil y a trop de place
(opt) flex-basis: n dfinir la taille nominale
(opt) order: n pour rordonner les lments

display : flex
2/2
Quelques exemples :
flex:0 flex:1 flex:0

display: flex; flex-direction: row;
flex:0 flex:1 flex:1 flex:0

flex:0 flex:1 flex:3 flex:0


Lattribut position
1/2
Trois cas :
position: static par dfaut
position: relative
position: absolute
Dans les deux cas position: relative|absolute , cet attribut :

permet de positionner les bords llment avec top , left , right et bottom ;
de le redimensionner avec width et height ;
de contraindre ses descendants dans le rectangle englobant llment ;
accessoirement, ouvre une porte locale de z-index .
Il est impossible de dissocier ces trois comportements.

Lattribut position
2/2
Cet attribut influence les attributs ainsi :
width: largeur de llment en pourcentage du rectangle englobant
left: distance du bord gauche au bord gauche du rectangle englobant
etc.
En position: absolute ,
le rectangle englobant pour llment lui-mme est celui de son premier
parent en position: relative|absolute (ou la fentre) ;
celui de ses descendants est le rectangle une fois le positionnement appliqu.
En position: relative ,
le rectangle englobant pour llment lui-mme est celui originellement
calcul par le navigateur ;
celui de ses descendants est le rectangle une fois le positionnement appliqu.

Transitions
Faon facile danimer les changements de style.
On anime avec les attributs suivants.

transition-property': opacity|width|...
transition-duration: 44s
transition-timing-function: linear|ease-in|ease-out
transition-delay: 13s
Attention,
tous les attributs ne sont pas animables ;
toutes les valeurs ne sont pas animables
(ex. seules les tailles absolues).

Animations
Faon plus complte mais plus complexe.
On anime un lment avec les attributs suivants.

animation-name: monAnimation
animation-duration: 42s
animation-timing-function: linear|ease-in|ease-out
animation-delay: 13s
animation-iteration-count: n
animation-direction: normal|reverse|alternate
Exemple de dfinition
1 : @keyframes monAnimation {
2 : 0% { width : 50 px }
3 : 0% { width : 150 px }
4 : }
Raccourci : animation: monAnimation 1s alternate ease-in-out

Media queries
Permet dadapter laffichage au support :

1 : < style >
2 : @media ( min - width : 400 px ) {
3 : # main { display : flex ; flex - direction : row ; }
4 : # main . menu { flex : 0 0 400 px ; order : 2 ; }
5 : # main . content { flex : 1 ; order : 1 ; }
6 : }
7 : </ style >
8 : < div id = " main " >
9 : < div class = " menu " >.. . </ div >
10 : < div class = " content " >. .. </ div >
11 : </ div >

CSS pour SVG
1 : < !DOCTYPE html >
2 : < html >
3 : < head >
4 : < meta charset = 'UTF -8 ' >
5 : < title > Bienvenue sur presse -le - bouton . com </ title >
6 : < style >
7 : body { text - align : center ; }
8 : # bigbutton { fill :red ; transition : fill 1s ; }
9 : button :hover # bigbutton { fill : pink ; }
10 : </ style >
11 : </ head >
12 : < body >
13 : < button >
14 : < svg width = " 60 " height = " 60 " >
15 : < circle id = " bigbutton " cx = " 30 " cy = " 30 " r = " 28 " / >
16 : </ svg >
17 : </ button >
18 : </ body >
19 : </ html >

Quelques API Modernes

API ajoutant des fonctionnalits
Principalement du multimdia :
Canvas, dessin 2D
WebGL, dessin 3D
Web Audio, API de synthtiseur numrique
GamePad, gestion de priphriques dentee
WebRTC, visioconfrence
Golocalisation

API amliorant le langage
Standard ou en voie de standardisation :

Workers
Local Storage
Weak References
Typed Arrays
Promises
Et dautres en tat dexprimentation.

Query Selectors
Recherche dlments dans le DOM

mme syntaxe que les slecteurs CSS ;
fonctionnement similaire jQuery.
Deux fonctions :
document.querySelector("selector") renvoie un lment
document.querySelectorAll("selector") renvoie tous les lments
Exemple :
1 : for ( var elt of document . querySelectorAll ( " span " )) {
2 : elt . style . border = '13 px red dotted ' ;
3 : }

Web Workers
1/4
Des threads dans le navigateur !

On lance un script dams un espace spar.
Communication par passage de messages uniquement.
changes asynchrones uniquement.
Petit exemple : un additionneur
Un fichier add.html pour linterface
Un fichier add_worker.js pour ladditionneur
Un fichier add_main.js pour lappeler

Web Workers
2/4
Fichier add.html :
1 : < !doctype html >
2 : < html >
3 : < head >
4 : < title > add </ title >
5 : < script src = " add_main . js " defer > </ script >
6 : < meta charset = " utf -8 " / >
7 : </ head >
8 : < body >
9 : < input type = " number " id = "x" value = "0" > +
10 : < input type = " number " id = "y" value = "0" > =
11 : < input type = " number " id = "r" value = "0" readonly >
12 : </ body >
13 : </ html >

Web Workers
Fichier add_main.js : 3/4
1 : var adder = new Worker ( " add_worker . js " ) ;
2 : var x = document . querySelector ( "#x" ) ;
3 : var y = document . querySelector ( "#y" ) ;
4 : adder . onmessage = function ( e) {
5 : document . querySelector ( "#r" ) . value = e . data [ 0] ;
6 : }
7 : x . onchange = y . onchange = function ( ) {
8 : adder . postMessage ([ x . value , y. value ]) ;
9 : }
Fichier add_worker.js :
1 : onmessage = function ( e) {
2 : postMessage ([ parseInt ( e. data [0 ])
3 : + parseInt ( e. data [1 ]) ] )
4 : }

Web Workers
4/4
Options avances :
Transfert dobjets au lieu de copie
Terminaison interne ( close ) ou externe ( terminate )
Des variantes :
SharedWorker communication entre fentres
ServiceWorker interception des XHR
AudioWorkerNode gnration de son en tche de fond

Local Storage
1/2
Stockage (cl,valeur) dans le navigateur pour chaque domaine.

localStorage.length , nombre de (cls,valeurs)
localStorage.key(n) , nom de la clef n
localStorage.getItem("key")
localStorage.setItem("key", "value")
localStorage.removeItem("key")
localStorage.clear()
Et cest tout !

Local Storage
2/2
On amliore notre additionneur :
1 : var adder = new Worker ( " add_worker . js " ) ;
2 : var x = document . querySelector ( "#x" ) ;
3 : var y = document . querySelector ( "#y" ) ;
4 : adder . onmessage = function ( e) {
5 : document . querySelector ( "#r" ) . value = e . data [ 0] ;
6 : }
7 : x . onchange = y . onchange = function ( ) {
8 : localStorage . setItem ( "x" , x. value )
9 : localStorage . setItem ( "y" , y. value )
11 : }
12 : x . value = localStorage . getItem ( "x" ) || "0" ;
13 : y . value = localStorage . getItem ( "y" ) || "0" ;

Typed arrays
Api de gestion de grands tableaux :

Tableaux dentiers de taille variable.
Vues dun mme tableau sous diffrents types.
Utilis :
pour reprsenter le contenu des images (canvas) ;
pour manipuler des fichiers binaires ;
pour crire du code numrique avec asm.js ;
par Qemu-JavaScript pour simuler mmoire ;
par Emscripten pour simuler la gestion mmoire de C.

Weak Sets / Weak Maps
var set = new WeakSet() :

ensemble dobjets faiblement rfrencs ;
un objet disparait lorsquil next plus point que par set ;
for (var elt of set) , itre sur les objets encore vivants ;
set.add(obj) ;
set.delete(obj) ;
set.has(obj) .
WeakMap identique mais avec une valeur attache lobjet.
Exemple : utilisation dans un toolkit dinterface :

on ajoute les composants un WeakSet la cration ;
les rfrences sont casses quand les composants sont supprims ;
on a un moyen ditrer sur les lments encore affichs.

Promises
1/9
Quest-ce quune promesse ?

Cest un objet JavaScript (de prototype Promise ),
qui reprsente la terminaison dune tche,
aprs laquelle on peut brancher une continuation,
une tche peut se terminer avec une valeur, passe la continuation.
Une promesse peut tre :
en attente (la tche est encore en cours),
acquitte : tenue ou rompue.

Promises
2/9
Cration dune promesse :

par certaines nouvelles API,
pour le code utilisateur avec le constructeur Promise .
1 : var p = new Promise ( function ( resolve , reject ) {
2 : resolve ( result ) ;
3 : // acquitte la promesse comme tenue
4 : reject ( Error ( message )) ;
5 : // acquitte la promesse comme rompue
6 : }) ;
7 : // initialement , p est en attente

Promises
3/9
Utilisation dune promesse :

la promesse a une mthode then ;
premier argument : fonction de rappel de rsultat ;
second argument : fonction de rappel dchec.
1 : p . then ( function ( result ) {
2 : // result est la valeur passe resolve
3 : } , function ( err ) {
4 : // result est la valeur passe reject
5 : })

Promises
Exemple : version promesse de getElementById :
4/9
1 : < script language = " JavaScript " >
2 : function elementById ( id ) {
3 : var p = new Promise ( function ( resolve , reject ) {
4 : window . addEventListener ( " load " , function () {
5 : var elt = document . getElementById ( id ) ;
6 : if ( elt ) resolve ( elt ) ;
7 : else reject ( Error ( " not found " )) ;
8 : })
9 : }) ;
10 : return p ;
11 : }
12 : elementById ( " bob " ). then ( function ( elt ) {
13 : elt . innerHTML = " saucisse " ;
14 : }) ;
15 : </ script >
16 : < body >< div id = " bob " ></ div ></ body >

Promises
5/9
Combinaison sequentielle :
la mthode then renvoie une promesse ;
les fonctions de rappel peuvent renvoyer directement cette promesse ;
sinon, cest une promesse tenue, avec la valeur du return ;
ou une promesse rompue, avec la valeur du throw ;
si une des fonctions des undefined , la promesse parente.
Mthodes utilitaires :
Promise.resolve(result) ,
Promise.reject(Error(message)) ,
. catch(f) signifie .then(undefined,f) .

Promises
6/9
Exemple : transformation de promesse rompue en promesses tenue

1 : ( Math . random ( ) > 0. 5 ?
2 : Promise . resolve ( ' result ' ) :
3 : Promise . reject ( Error ( ' fail ' )) )
4 : . then (
5 : function ( result ) { return ' result : ' + result } ,
6 : function ( err ) { return Promise . resolve ( ' failure ' ) ; } )
7 : . then (
8 : function (v ) { console . log (v ) ; } )

Promises
Exemple : boucle interne en promesse rcursive
7/9
1 : function countdown ( elt , nb ) {
2 : return new Promise ( function ( resolve , reject ) {
3 : window . setTimeout ( function ( ) {
4 : if ( nb == 0 ) {
5 : resolve ( ) ;
6 : } else {
7 : elt . innerHTML = nb ;
8 : resolve ( countdown ( elt , nb - 1 )) ;
9 : } } , 1000 ) ;
10 : }) ;
11 : }
12 : elementById ( " bob " ) . then ( function ( elt ) {
13 : countdown ( elt , 5 ). then ( function ( ) {
14 : elt . innerHTML = " saucisse " ;
15 : }) ;
16 : }) ;

Promises
8/9
Combinaison de promesses :
Promise.all
prend un tableau de promesses,
renvoie la promesse tenue du tableau des rsultats,
ou la promesse rompue dun des checs.
Promise.race
prend un tableau de promesses,
renvoie la promesse tenue dun des rsultats,
ou la promesse rompue dun des checs.

Promises
9/9
Exemple :
1 : Promise . all (
2 : [ [ " bob " , 2 ] , [ " bab " , 5 ] , [ " bib " , 10 ] ]. map (
3 : function ( [id , nb ] ) {
4 : return elementById ( id ). then ( function ( elt ) {
5 : return countdown ( elt , nb ) . then ( function () {
6 : return elt ;
7 : }) ;
8 : }) ;
9 : } )) . then ( function ( elts ) {
10 : for ( var elt of elts ) {
11 : elt . innerHTML = " STOP " ;
12 : }
13 : }) ;

Comprendre HTML5
Questions ?
Dveloppement dApplications Rticulaires

01 HTML5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

01 HTML5

Uploaded by

Copyright:

Available Formats

Comprendre HTML5

Benjamin Canou, OCaml PRO

Dveloppement dApplications Rticulaires

DAR Comprendre HTML5 2 / 69

Derrire cet acronyme se cache :

DAR Comprendre HTML5 3 / 69

DAR Comprendre HTML5 4 / 69

Application des CSS

DAR Comprendre HTML5 5 / 69

Lorsque le navigateur rencontre un lment script :

DAR Comprendre HTML5 6 / 69

DAR Comprendre HTML5 7 / 69

DAR Comprendre HTML5 8 / 69

Comment observer un changement de style ?

Meilleure solution : viter ce type de design autant que possible.

Les CSS modernes permettent

DAR Comprendre HTML5 9 / 69

DAR Comprendre HTML5 10 / 69

Une longue histoire :

DAR Comprendre HTML5 11 / 69

Finalement, HTML5 cest :

DAR Comprendre HTML5 12 / 69

Les lments de structure ajouts :

DAR Comprendre HTML5 13 / 69

1 : < !DOCTYPE html >

crit en variante polyglotte : compatible SGML et XML.

DAR Comprendre HTML5 14 / 69

DAR Comprendre HTML5 15 / 69

Syntaxe de base : selecteur { attribut: valeur; } .

Styles inclus dans une page :

DAR Comprendre HTML5 16 / 69

On peut factoriser un slecteur :

On peut aussi factoriser les attributs :

DAR Comprendre HTML5 17 / 69

On peut factoriser certains attributs lis avec des macro attributs :

DAR Comprendre HTML5 18 / 69

On se retrouve souvent avec un motif comme suit :

DAR Comprendre HTML5 19 / 69

DAR Comprendre HTML5 20 / 69

Pour slectionner un lment rpondant plusieurs critres,

DAR Comprendre HTML5 21 / 69

DAR Comprendre HTML5 22 / 69

DAR Comprendre HTML5 23 / 69

Il est possible de slectionner selon les attributs de llment :

DAR Comprendre HTML5 24 / 69

Certains slecteurs sont appels pseudo classes.

Slecteurs secifiques aux liens :

DAR Comprendre HTML5 25 / 69

Le slecteur :target slectionne llment cible de lURL du document.

DAR Comprendre HTML5 26 / 69

DAR Comprendre HTML5 27 / 69

Attention : ne pas confondre avec les pseudo lments :

DAR Comprendre HTML5 28 / 69

Puis on jour au jeu suivant.

En cas dgalit, la dernire rgle sapplique.

Le mot clef !important :

DAR Comprendre HTML5 29 / 69

Et si aucune rgle ne sapplique ?

DAR Comprendre HTML5 30 / 69

DAR Comprendre HTML5 31 / 69

content (de taille width / height )

DAR Comprendre HTML5 32 / 69

DAR Comprendre HTML5 33 / 69