Programmer en html5, css 3 et java script (70 480)

Chamseddine OUERHANI
Société : Petite Sicile Informatique
Tél : +216 97 480 671 / +216 24 345 193 / +216 71 254 754
Programmation en
HTML5 avec JavaScript et CSS3
(70-480)
Présentation La formation
Programmation en HTML5 avec JavaScript et CSS3 vous permet de mettre en œuvre la
logique de programmation, créer et utiliser des variables, réaliser des boucles, développer
des interfaces utilisateurs, capturer et valider des entrées utilisateurs, stocker des données
et créer des applications structurées. Votre formateur Chamseddine OUERHANI vous
guidera durant cette formation pour apprendre comment utiliser HTML5, CSS3 et JavaScript
pour construire des applications Web évolutives qui peuvent dynamiquement détecter et
s’adapter à différentes capacités de périphériques et de formats.
Formateur
Chamseddine OUERHANI est un expert auditeur en sécurité des systèmes d'information.
Outre son domaine d'expertise, il est passionné de la programmation événementielle,
orientée objet ou encore orientée prototype et s'intéresse de près aux technologies de
Microsoft (C#, asp.net…) et aux évolutions du web.
Il est parallèlement formateur depuis plusieurs années.
Public concerné
Développeur junior ou sénior
Objectif
Apprendre comment utiliser HTML5, CSS3 et JavaScript
Construire des applications Web évolutives
Pré requis
Les candidats à cet examen doivent avoir une ou plusieurs années d'expérience dans la
programmation de la logique métier/application essentielle pour une variété de types
d'applications et plates-formes matérielles/logicielles en utilisant JavaScript.
Les candidats doivent également avoir un minimum d’un à deux ans d'expérience dans le
développement en HTML dans un modèle de programmation axé sur les événements et
orienté objet.
Méthode pédagogique
Théorie, démonstration et exercices.

Tél : +216 97 480 671 / +216 24 345 193 / +216 71 254 754
Plan de la formation :
Vue d'ensemble d'HTML et CSS
• Notions de bases et évolution
• Vue d'ensemble de HTML
• Vue d'ensemble de CSS
• Créer une application Web en utilisant Visual Studio 2015
Créer et styler une page HTML5
• Créer une page HTML5
• Appliquer des styles à une page HTML5
Introduction à JavaScript
• Vue d'ensemble de la syntaxe JavaScript
• Programmer le DOM HTML avec JavaScript
• Introduction à jQuery
Créer des formulaires pour collecter des données et valider les entrées utilisateurs
• Vue d'ensemble des formulaires et des champs de formulaire
• Valider les entrées utilisateurs en utilisant les attributs HTML5
• Valider les entrées utilisateurs en utilisant JavaScript
Communiquer avec une source de données distante
• Envoyer et recevoir des données en utilisant l'objet XMLHTTPRequest
• Envoyer et recevoir des données en utilisant des opérations AJAX jQuery
Styler HTML5 en utilisant CSS3
• Les styles pour le texte
• Les styles pour les blocs d'éléments
• Les sélecteurs CSS3
• Améliorer les effets graphiques à l'aide de CSS3
Créer des objets et des méthodes en utilisant JavaScript
• Ecrire du code JavaScript bien structuré
• Créer des objets personnalisés
• Etendre des objets
Créer des pages interactives en utilisant les API HTML5
• Interagir avec les fichiers
• Intégrer du multimédia
• Réagir au contexte et à la géolocalisation du navigateur
• Déboguer et profiler une application Web

Tél : +216 97 480 671 / +216 24 345 193 / +216 71 254 754
Ajouter le support du mode hors ligne aux applications Web
• Lire et écrire des données localement
• Ajouter le support du mode hors ligne en utilisant le cache d'application
Mettre en œuvre une interface utilisateur adaptative
• Supporter plusieurs facteurs de forme
• Créer une interface utilisateur adaptative
Créer des graphiques avancés
• Créer des graphiques interactifs en utilisant les Scalables Vector Graphics
• Utiliser le Canvas pour dessiner des graphiques par programmation
Animer les éléments de l'interface utilisateur
• Appliquer des transitions CSS
• Appliquer des transformations CSS
• Appliquer des animations CSS
Mettre en œuvre de la communication temps-réel en utilisant les Web Sockets
• Introduction aux Web Sockets
• Envoyer et recevoir des données en utilisant les Web Sockets
Créer un processus Web Worker
• Introduction aux Web Workers
• Effectuer des traitements asynchrones en utilisant les Web Workers

13/07/2016
1
Programmation en
HTML5 avec JavaScript et CSS3
Ce document, accompagné d’une série d’exercices corrigés,
constitue un support de formation présentielle d’une durée
de 5 jours basé sur le cours officiel de Microsoft 20480B.
Par Chamseddine OUERHANI
Développeur et formateur DOTNET
Contact : chamseddine.ouerhani@gmail.com
Module
Présentation de la formation

13/07/2016
2
Module
Plan
• Présentation du formateur
• Qu’est-ce que c’est HTML5, CSS3 et JavaScript ?
• Le plan de formation
• La certification MCSD
• Publics concernés
• Connaissances requises
• Liens des ressources logicielles
3
Module
Présentation du formateur
• OUERHANI Chamseddine
• Email: chamseddine.ouerhani@gmail.com
• Développeur et formateur DOTNet
• Expert auditeur en sécurité des systèmes d’information
4

13/07/2016
3
Module
Qu’est-ce que HTML5, CSS3 et Javascript ?
• HTML5 : décrit plus de 100 spécifications défini par le (W3C) relatives à la nouvelle génération
de technologies Web.
• CSS3 : (Cascading Style Sheets) sont un langage permettant de décrire la restitution de
documents HTML à l'écran, sur papier, vocalement, etc.
• JavaScript : est un langage de script léger utilisant le concept de prototype, principalement
connu comme le langage de script des pages web.
5
Module Présentation de la formation
Le plan de formation
1. Vue d'ensemble de HTML et CSS
2. Créer et styler une page HTML5
3. Introduction à JavaScript
4. Créer des formulaires pour collecter des
données et valider les entrées utilisateurs
5. Communiquer avec une source de
données distante
6. Styler HTML5 en utilisant CSS3
7. Créer des objets et des méthodes en
utilisant JavaScript
8. Créer des pages interactives en utilisant
les API HTML5
9. Ajouter le support du mode hors ligne aux applications
10. Implémenter une interface utilisateur adaptative
11. Créer des graphiques avancés
12. Animer l'interface utilisateur
13. Implémenter la communication temps-réel avec les
Web Sockets
14. Créer un processus Web Worker
6

13/07/2016
4
Module Présentation de la formation
7
Module
La certification
8

13/07/2016
5
Module
Publics concernés
• Développeur junior ou senior
• Chef de projet
9
Module
Connaissances requises
• Les candidats à cet examen doivent avoir une ou plusieurs années d'expérience
dans la programmation de la logique métier/application essentielle pour une
variété de types d'applications et plates-formes matérielles/logicielles en utilisant
JavaScript.
• Les candidats doivent également avoir un minimum de un à deux ans
d'expérience dans le développement en HTML dans une modèle de
programmation axé sur les événements et orienté objet.
10

13/07/2016
6
Module
Les ressources logicielles
• IDE: Visual studio 2015
• https://www.visualstudio.com/fr-fr/visual-studio-homepage-vs.aspx
• Bibliothèque: JQuery
• http://jquery.com/
11
Module
Les liens utiles
• Formation
• http://www.microsoft.com/france/vision
• Académie virtuelle de Microsoft
• http://www.microsoftvirtualacademy.com/
• Passage d’examen(Pearson Vue)
• https://www.microsoft.com/fr-fr/learning/exam-70-480.aspx
• Repassage d’examen
• http://www.microsoft.com/learning/en-us/second-shot.aspx
12

13/07/2016
7
Module
Vue d’ensemble de HTML et CSS
1
Module
Leçon
Leçon
Leçon
Leçon
Notions de bases et évolution1
1 Vue d’ensemble de HTML et CSS
2
3
Vue d’ensemble de HTML
Vue d’ensemble de CSS
4 Créer une application Web en utilisant Visual Studio 2015
Community

13/07/2016
8
Module
Plan
• Historique et évolution
• Internet
• Le Web
• Html
• CSS
• JavaScript
15
Module
Internet
• Un regroupement de réseaux, reliant des ordinateurs.
• Origine (ARPANET)
• L'ARPA (Advanced Research Project Agency), un organisme du département de la défense
américain. 1969
• Apparition (INTERconnected NETworks )
• Sa date d'inauguration retenue le plus souvent est le 1er janvier 1983 avec l'apparition du
protocole TCI/IP.
• Constitution
• messagerie, transfert de fichier, web…
16

13/07/2016
9
Module
Le Web (World Wide Web)
• Le Web est une des applications d’internet.
• Installation au CERN situé près de Genève.
• Le Web est supervisé par le W3C, un Consortium International.
• Le W3C est dirigé depuis janvier 2003 par l'ERCIM (European
Research Consortium for Informatics and Mathematics)
17
Timothy John Berners-Lee
Inventeur du World Wide Web
Module
HTML (HyperText Mark-Up Language)
• HTML est le langage de base du Web. Apparu en août
1991, il utilise un ensemble de balises pour décrire les
données à afficher.
• HTML 1.0 ->HTML 2.0-> HTML 4.0
->XHTML ->HTML 5 -> HTML 5.1 en cours d’écriture.
18

13/07/2016
10
Module
CSS(Cascading Style Sheets)
• CSS est un langage consacré à la mise en forme
des contenus HTML.
• CSS1 -> CSS2 -> CSS2.1 -> CSS3 ->
CSS5 est une « rumeur ».
19
Module
JavaScript
• Un langage qui ajoute de l'interactivité aux pages
Web.
• JavaScript a été développé par Netscape en 1995.
• Ce n'est que lors de la sortie de Netscape 2.0 que
le nom « JavaScript » est apparu.
20

13/07/2016
11
Module
Leçon
Leçon
Leçon
Leçon
1
2
3
Notions de bases et évolution
Community
Module
Plan
• Caractéristiques de HTML
• Démonstration: Première page web avec Bloc-notes
• Notion de balises et attributs
• Les bases, le doctype, l’encodage, les paragraphes, les titres, les listes, les liens, les images, les
commentaires
22

13/07/2016
12
Module
23
Requête HTTP
Réponse HTTP
HTML est un langage de programmation de page web statique
Client Serveur
Page web statique
Module
Langage interprété vs langage compilé
24
Ordinateur
Système
d’exploitation
Navigateur
Compilation Exécution
Interprétation
HTML est un langage de programmation interprété

13/07/2016
13
Module
Leçon
Leçon
Leçon
Leçon
1
2
3
Community
Module
Plan
• Les règles générales
• Les sélecteurs d’élément, d’identifiant, de classe et d’attribut
• Cascade et héritage
• Méthodes d’application des styles CSS
26

13/07/2016
14
Module
Les règles générales
• Structure de base
Sélecteur {
Porpriété 1: Valeur 1;
Porpriété 2: Valeur 2;
}
Exemple:
27
Module
Les sélecteurs
• Sélecteur d’élément
• Sélecteur de plusieurs éléments
• Sélecteur universel
• Sélecteur d’identifiant
• Sélecteur de classe
• Sélecteur d’attribut
• Sélecteur de valeur d’attribut
28

13/07/2016
15
Module
Méthodes d’application des styles CSS
• Dans l’élément <style>
• Dans un fichier externe
• Dans l’attribut style
29
Module
Cascade et héritage
• Cascade:
• Sélection selon le média
• Dans les éléments <link> ou <style> l’attribut « media » (peut prendre les valeurs screen, print, projection,
aural, braille, handheld, tty, tv et all
• Sélection selon le créateur du style
• Sélection par spécificité
• d’un nombre N de quatre chiffres, sous la forme abcd
• Sélection selon l’ordre d’apparition
• Dans l’attribut style >> dernier apparu (Dans l’élément <style > Dans un fichier externe)
30

13/07/2016
16
Module
Cascade et héritage
• Héritage:
C’est le fait qu’un élément enfant possède les mêmes
styles que l’élément qui le contient (son parent dans
la hiérarchie des éléments d’une page).
31
Module
Leçon
Leçon
Leçon
Leçon Créer une application Web en utilisant Visual Studio 2015
Community
1
2
3
4

13/07/2016
17
Module
Plan
• Présentation de Visual Studio 2015 Community
• Démonstration: Créer une première application web avec Visual Studio
33
Module
Créer et styler une page
HTML5
2

13/07/2016
18
Module
Leçon
Leçon
Créer une page HTML51
2 Créer et styler une page HTML5
2 Appliquer des styles à une page HTML5
Module
Plan
• Structure d’un document HTML 5
• Démonstration: Créer notre première page HTML5 avec Visual Studio 2015
36

13/07/2016
19
Module
37
Structure d’un document HTML 5
• Header: est une entrée en matière.
• Nav: signale la navigation principale du site.
• Section: permet de définir les différentes sections
thématiques du document.
• Article: L’élément article délimite une portion du document.
Ce peut être un message de forum, un article de presse…
• Aside: contient les contenus contextuels, c’est-à-dire en
relation thématique avec ce qui l’entoure.
• Footer: contient les informations traditionnelles de pied de
page
Module
Leçon
Leçon Appliquer des styles à une page HTML5
1
2
Créer une page HTML5

13/07/2016
20
Module
Plan
• Modifier la police du texte
• Les boites en CSS
• Modifier L’arrière plan et les couleurs
• Démonstration: appliquer les styles CSS aux pages HTML5
39
Module
Modifier la police du texte
40
Exemple:
nouveauStyle {
font-size: medium;
font-weight: bold;
font-style: normal;
color: #000080;
text-decoration: underline;
font-family: Cambria, Cochin, Georgia,
Times, "Times New Roman", serif;
}

13/07/2016
21
Module
41
Modèle en boite CSS
Module
42
Exemple:
nouveauStyle1 {
background-color: white ;
background-color: #FFFFFF;
background-color: rgb(255,255,255)
}
L’arrière plan et les couleurs

13/07/2016
22
Module
Introduction à JavaScript
3
Module
Leçon
Leçon
Leçon
Vue d'ensemble de JavaScript1
3 Introduction à JavaScript
2
3
Programmer le DOM HTML avec JavaScript
Introduction à JQuery

13/07/2016
23
Module
Plan
• Le langage JavaScript
• Les règles de syntaxe de JavaScript
• Variable, type de donnée et opérateur
• Instruction simple, conditionnelle et itérative
• Fonction
• Notation Objet issue de JavaScript
45
Module
Le langage JavaScript
• JavaScript est un langage de script qui offre la possibilité d’ajouter de l’interactivité
à une page Web.
Caractéristiques:
• Langage interprété
• Utilisé pour la programmation dynamique
• Exécuté côté client, ce qui signifie dans un navigateur Web.
• Mais peut aussi être employé côté serveur. 46
Requête HTTP
Réponse HTTPClient Serveur

13/07/2016
24
Module
Les règles de syntaxe de JavaScript
• Variables:
Une variable est un objet repéré par son nom, pouvant contenir des données, qui
pourront être modifiées lors de l'exécution du programme.
47
Module
• Type de donnée:
• Types primitifs: Boolean, Number, String, Null, Undefined
• Objets référencés
• Conversion:
• JavaScript est un langage non typé. Cela signifie que le type d’une variable est
défini uniquement au moment de l’exécution.
48

13/07/2016
25
Module
• Opérateurs:
• Opérateurs unaires: Signe(+)(-),
Incrémentation(++), décrémentation(--)
• Opérateurs d’égalité: égale(==), strictement égale(===)
• Opérateurs de comparaison: Inférieur(<) ,Supérieur(>)
• Opérateurs de calcul: Opérateurs arithmétiques
Addition(+)
Soustraction (-)
Division (/)
Multiplication (*)
Modulo(%)
• Opérateurs logiques: !, && et ||.
49
Module
Instruction simple, conditionnelle et itérative
Forme générale:
Exemple:
50

13/07/2016
26
Module
51
Forme générale: Exemple:
Module
52
Forme générale: Exemple:

13/07/2016
27
Module
Les fonctions
• Les fonctions représentent le concept de base de la programmation JavaScript afin
de modulariser les traitements.
53
Module
Inclusion du code JavaScript
Il existe deux manières d’utiliser JavaScript dans une page Web :
• Directement dans la page:
• Dans un fichier JavaScript externe:
54

13/07/2016
28
Module
Notation Objet issue de JavaScript
JSON (JavaScript Object Notation) est un format léger d'échange de données. Il
définit deux structures de données différentes.
• Définition d’un objet par l’intermédiaire
d’une liste non ordonnée de clés et de valeurs.
• Définition d’un tableau simple par
l’intermédiaire d’une liste non ordonnée
de valeurs.
55
Module
Leçon
Leçon
Leçon
1
2
3
Vue d'ensemble de JavaScript
Introduction à JQuery

13/07/2016
29
Module
Plan
• DOM (Modèle Objet de Document)
• Les spécifications DOM
• Manipulation des éléments
• Accès aux éléments, ajout et suppression d'éléments
57
Module
DOM (Modèle Objet de Document)
• DOM (Modèle Objet de Document) est une API
(interface de programmation) totalement indépendante
de la plateforme et du langage qui la manipule.
• Elle correspond à une représentation objet normalisée
des documents, dont le contenu est arborescent.
• C’est, donc, grâce à cette structure hiérarchisée que les
langages de programmation (dont le JavaScript),
peuvent accéder aux objets présents dans la page.
• DOM permet de modifier l’apparence mais aussi le
contenu d’une page HTML.
58

13/07/2016
30
Module
DOM (Modèle Objet de Document
• Tous les éléments d'un document HTML sont des noeuds
• Tout le document est un "document node"
• Tout élément html est un "element node"
• Le texte dans les éléments HTML sont des "text nodes"
• Les attributs HTML sont des « attribute nodes »
• Le premier noeud de l'arbre est appelé la racine
• Tout noeud, sauf la racine, a un seul noeud père
• Un noeud peut avoir plusieurs fils
• Une feuille est un noeud sans fils
• Les frères sont des noeuds ayant le même père
59
Module
Les spécifications DOM
• Le niveau 0 fait référence à des fonctionnalités non spécifiées formellement.
• DOM1 (1998) a défini la représentation d’un document HTML ou XML(eXtensible Markup
Language), sous la forme d’un arbre basé sur des nœud.
• DOM2 (2000) contient six spécifications différentes: Le DOM2 base, Vues, Événements, Style,
Traversal et Range, et le DOM2 HTML.
• DOM3 (2004) contient cinq spécifications différentes: Le DOM3 base, charger et enregistrer,
validation, Evénements, et XPath.
• DOM4 des travaux sont actuellement en cours pour simplifier la spécification DOM et le
mettre à jour pour HTML5 et CSS3.
W3C Recommendation 19 November 2015
60

13/07/2016
31
Module
Accès aux objets
• Accès directe
• Avec: document.getElementById("")
• Avec document.getElementsByTagName("")
61
document.documentElement; root
document.body; body
Module
Accès aux éléments à partir d’un nœud
Une fois à l'intérieur de DOM, on peut monter et descendre ou aller à droite et à
gauche.
Exemple:
62
firstChild : premier noeud enfant
lastChild : dernier noeud enfant
childNodes : tous les noeuds enfant
(sous forme de tableau)
parentNode : noeud parent
nextSibling : noeud suivant au même
niveau (à droite)
previousSibling : noeud précédent au
même niveau (à gauche).
innerHTML: la valeur du texte dans
le nœud
nodeName: le nom du nœud
nodeValue: la valeur du nœud
Attributes: les attributs du noeud

13/07/2016
32
Module
nodeName & nodeValue
• nodeName:
• N'est pas éditable
• Pour un noeud texte c'est #text
• Pour un noeud document c'est #document
• Pour un attribut c'est le nom de l'attribut
• nodeValue:
• Pour un noeud texte c'est le texte entre les 2 balises
• Pour un attribut c'est la valeur de l'attribut
63
Module
64
Ajout d’élément
3 étapes:
1. Création de l'élément avec: document.createElement("Nom élément")
2. Affectation des attributs: document.createTextNode("texte")
3. Insertion dans le document: appendChild("Nom élément")
Exemple:

13/07/2016
33
Module
Suppression d'éléments
• La suppression d’un nœud de l'arborescence DOM se fait avec la méthode La
méthode removeChild().
Exemple:
65
Module
Leçon
Leçon
Leçon Introduction à JQuery
1
2
3
Vue d'ensemble de JavaScript

13/07/2016
34
Module
Plan
• JQuery la bibliothèque.
• Les sélecteurs et les filtres.
• Manipulation de l’arbre DOM avec JQuery.
• Démonstration: afficher des données et gérer des évènement avec JavaScript.
67
Module
JQuery la bibliothèque
• Une bibliothèque JavaScript open-source et cross-browser. Elle permet de
traverser et manipuler très facilement l'arbre DOM. ("write less, do more".)
• Utilisation:
• Télécharger le fichier JavaScript
• Accès via CDN (Content Delivery Network)
68

13/07/2016
35
Module
Les sélecteurs et les filtres
• La principale fonction de JQuery est: JQuery() [ Abréviation $() ]
Elle permet de sélectionner des éléments dans une page web.
• Sélecteurs:
• Filtres:
69
Module
Manipulation de l’arbre DOM avec Jquery
• Ajout d’un nœud:
• Remplacement d’un nœud:
• Suppression d’un nœud:
70

13/07/2016
36
Module
Créer des formulaires pour
collecter des données et
valider les entrées utilisateurs
4
Module
Leçon
Leçon
Leçon
Vue d'ensemble des formulaires et des éléments de
formulaire
1
4 Créer des formulaires pour collecter des données et valider
les entrées utilisateurs
2
3
Valider les entrées utilisateurs en utilisant les attributs
HTML5
Valider les entrées utilisateurs en utilisant JavaScript

13/07/2016
37
Module
Plan
• Les formulaires
• Les balises
• Démonstration: manipuler les champs d’un formulaire avec Visual Studio 2015
73
Module
Les formulaires
• Un formulaire HTML est une partie du document constituée d'un contenu normal:
• Balises
• Eléments spéciaux appelés commandes (cases à cocher, boutons radio, menus, etc.)
• Labels sur ces commandes.
• L'utilisateur « remplit » généralement le formulaire avant de le soumettre à un
agent pour son traitement (par exemple, à un serveur Web, à un serveur de
courrier, etc.).
74

13/07/2016
38
Module
Les balises
• La balise principale
• method:
• method="get": c'est une méthode est limitée à 255 caractères. Les informations seront envoyées
dans l'adresse de la page (http://…).
• method="post": permet d'envoyer un grand nombre d'informations. Les données saisies dans le
formulaire ne transitent pas par la barre d'adresse.
• action: attribut qui contient l'adresse de la page ou du programme qui va traiter les
informations:
• envoyer un e-mail
• enregistrer dans une base de données.
75
Module
Les balises
• Zone de texte et libellé
• Zone de mot de passe
76

13/07/2016
39
Module
Les balises
• Zone de saisie enrichie
77
Module
Les balises
• Les cases à cocher
• Les zones d'options
• Les listes déroulantes
• Les boutons d'envoi
• Regrouper les champs
78

13/07/2016
40
Module
Leçon
Leçon
Leçon
HTML5
1
2
3
formulaire
Valider les entrées utilisateurs en utilisant JavaScript
Module
Plan
• Validation du formulaire
• Coté client vs coté serveur
• Valider avec les attributs required, min, max et pattern
• Validation avec l’attribut style et CSS3
• Démonstration: Valider les entrées utilisateurs d’un formulaire en utilisant les attributs HTML5
et CSS3
80

13/07/2016
41
Module
Validation coté client coté serveur
• Une fois un formulaire saisi par un utilisateur, il faut qu’il soit validé un minimum.
Cette validation peut se faire à deux endroits :
• Coté client:
• Avant HTML5, il n'existait aucune façon d'obtenir nativement une
validation et les développeurs devaient passer par différentes solutions
basées sur JavaScript.
• Côté serveur:
• Les champs sont envoyés non ou mal remplis. L'inconvénient est que
cette méthode risque, en cas d'affluence sur le site, de faire ralentir le
serveur.
81
Module
Valider avec required, min, max et pattern
• Veiller à ce que les champs ne sont pas vides à travers l’attribut required
• Valider une entrée numérique à travers les attributs min et max
• Validation du texte saisi à travers l’attribut pattern
82

13/07/2016
42
Module
Validation avec l’attribut style et CSS
• Ajouter du style à des champs
• Ajouter du style CSS3 aux input
83
Module
Leçon
Leçon
Leçon Valider les entrées utilisateurs en utilisant JavaScript
1
2
3
HTML5
formulaire

13/07/2016
43
Module
Plan
• Valider un formulaire avec JavaScript en utilisant le bouton « submit ».
• Valider les champs d’un formulaire avec JavaScript.
• Démonstration: Valider les entrées utilisateurs d’un formulaire HTML5
85
Module
Valider un formulaire avec le bouton submit
• L'événement « onsubmit », spécifique à la balise form, est déclenché lorsque le formulaire est sur
le point d'être envoyé, suite à l'appui sur la touche Entrée, ou d'un clic sur un bouton « submit »,
ou toute autre action indiquant au navigateur d'envoyer le formulaire.
86
les entrées utilisateur

13/07/2016
44
Module
Valider les champs avec JavaScript
• La fonction "setCustomValidity"
87
Module
Communiquer avec une source
de données distante
5

13/07/2016
45
Module
Leçon
Leçon
Envoyer et recevoir des données avec l'objet XMLHTTPRequest1
5 Communiquer avec une source de données distante
2 Envoyer et recevoir des données avec AJAX jQuery
Module
Plan
• Objet XMLHttpRequest
• Initialiser et Instancier XMLHTTPRequest
• Etat de XMLHTTPRequest
• Utilisation et traitement du résultat de XMLHttpRequest
• Démonstration: Envoyer et recevoir des données en utilisant l'objet XMLHttpRequest
90

13/07/2016
46
Module
Objet XMLHttpRequest
• XMLHttpRequest est un objet JavaScript qui a été créé par Microsoft et adopté
par Mozilla.
• Cet objet permet de faire des requêtes HTTP afin de récupérer des données au
format XML qui pourront être intégrées à un document.
• XMLHttpRequest est très utile pour mettre à jour des données sans pour autant
recharger la page.
91
Module
Objet XMLHttpRequest
• L'objet XMLHttpRequest s'utilise dans une architecture client/serveur.
• Le client: Le navigateur avec son moteur JavaScript.
• Le serveur: une application délivrant du XML à travers HTTP .
• La communication entre les deux peut se faire suivant deux modes :
• Synchrone: les traitements suivant une requête ne sont exécutés que lorsque celle-ci est
terminée.
• Asynchrone: les traitements sont exécutés sans attendre son résultat. C'est ce dernier cas qui
est intéressant pour créer des applications interactives et dynamiques.
92

13/07/2016
47
Module
Initialiser et Instancier XMLHTTPRequest
• Instancier XMLHTTPRequest
• Initialiser XMLHTTPRequest
• open (method, URL [, asyncFlag[,
userName [, password]]])
93
 method : "GET" ou "POST" (ou "HEAD")
 URL : relative ou absolue
 asyncFlag : mode asynchrone ? true ou false
 userName : nom d'utilisateur
 password : mot de passe
Module
Etat de XMLHTTPRequest
• Chaque changement d'état de la requête engendre un événement. L'état de la
requête est reflété par l'état de l'objet XMLHTTPRequest avec la propriété
readyState.
• 0  non initialisé
• 1  ouverture. La méthode open() a été appelée avec succès
• 2  envoyé. La méthode send() a été appelée avec succès
• 3  en train de recevoir. Des données sont en train d'être transférées, mais le transfert n'est
pas terminé
• 4  terminé. Les données sont chargées
94

13/07/2016
48
Module
Utilisation de XMLHttpRequest
• Traitement du résultat de XMLHTTPRequest
• onreadystatechange Gestionnaire d'événements pour les changements d'état. Il faut assigner
une fonction à cette propriété pour traiter les données renvoyées.
• Utilisation de XMLHTTPRequest
• Requête de type "GET" ou "HEAD "
• Requête de type "POST"
95
Module
Récupérer le résultat de la requête
• Sous forme de texte
 texte brut
 texte contenant du code HTML
 XMLHTTPRequest.responseText
• Sous forme d'un objet DOM XML
 XMLHTTPRequest.responseXML
 Serveur : Content-Type: text/xml
• Sous forme de données JSON
 texte contenant du code JSON
 JSON.parse(XMLHTTPRequest.responseText)
96

13/07/2016
49
Module
Leçon
Leçon Envoyer et recevoir des données avec AJAX jQuery
1
2
Envoyer et recevoir des données avec l'objet XMLHTTPRequest
Module
Plan
• Utiliser la librairie JQuery pour envoyer une requête asynchrone
• Utiliser la fonction ajax() de Jquery
• Démonstration: Envoyer et recevoir des données en utilisant des opérations AJAX JQuery
98

13/07/2016
50
Module
JQuery pour envoyer une requête asynchrone
• Requête HTTP GET
• Adresse: le nom de la page web cible.
• Données: les données à passer à la page web.
• Fonction (facultative) exécutée lorsque l'élément a été mis à jour.
• Charger un élément dans une réponse avec load( )
99
Module
Utiliser la fonction ajax() de Jquery
• Ajax (Asynchronous JavaScript And XML) est une technique qui fait usage des
éléments suivants:
• HTML pour l'interface.
• CSS (Cascading Style-Sheet) pour la présentation de la page.
• JavaScript (EcmaScript) pour les traitements locaux, et DOM (Document Object Model) qui
accède aux éléments de la page ou du formulaire ou aux éléments d'un fichier XML chargé sur
le serveur.
• L'objet XMLHttpRequest lit des données ou fichiers sur le serveur de façon asynchrone.
• ASP.NET, PHP ou un autre langage de scripts peut être utilisé coté serveur.
100

13/07/2016
51
Module
Utiliser la fonction ajax() de Jquery
• Charge une page externe en utilisant une requête HTTP. Cette méthode fait partie de
l'implémentation de bas niveau de JQuery.
• Paramètres:
• type : type de la requête, GET ou POST
• url : adresse à laquelle la requête doit être envoyée.
• data : données à envoyer au serveur.
• dataType : type des données qui doivent être retournées par le serveur : xml, html, script, json,
text.
• success : fonction à appeler si la requête aboutit.
• error : fonction à appeler si la requête n'aboutit pas.
• timeout : délai maximum (en millisecondes) pour que la requête soit exécutée. Si ce délai est
dépassé, la fonction spécifiée dans le paramètre error sera exécutée.
101
Module
Styler HTML5 en utilisant CSS3
6

13/07/2016
52
Module
Leçon
Leçon
Leçon
Leçon
Appliquer un style à du texte1
6 Styler HTML5 en utilisant CSS3
2
3
Appliquer un style à des blocs d'éléments
Les sélecteurs CSS3
4 Améliorer les effets graphiques à l'aide de CSS3
Module
Plan
• Le style des textes
• Font personnalisé
• Effet sur le texte
• Démonstration: Appliquer un style CSS3 à du texte
104

13/07/2016
53
Module
Le style des textes
• Le style des textes
• La meta-propriété CSS font concerne les propriétés que l'on peut appliquer aux polices. Elle
représente un raccourci pour la définition de:
font-style, font-variant, font-weight, font-size, line-height et font-family
dans une seule règle dans la feuille de style.
• Exemple:
105
Module
106
Le style des textes
• Forme générale
• Interprétation
• Exemple:
• [ ] regroupements
• | deux ou plusieurs options : seule l'une d'entre elles doit survenir
• || deux ou plusieurs options l'une de ces options doit survenir et plusieurs peuvent survenir quel que
soit leur ordre
• plusieurs mots juxtaposés signifient que tous doivent survenir dans l'ordre donné
• ? ce qui le précède est optionnel
• * ce qui le précède peut survenir de zéro à plusieurs fois
• +ce qui le précède survient une ou plusieurs fois
• {A,B} signifie que ce qui précède survient au moins A fois et au plus B fois.

13/07/2016
54
Module
Le style des textes
• La propriété font-family permet de définir une ou plusieurs familles de polices
par leur nom.
• Forme générale
• Exemple :
• CSS propose cinq familles de polices génériques.
107
Module
Le style des textes
• La propriété font-weight décrit avec quel degré de graisse (ou de « noir »)
présenter la police.
• la propriété font-size règle le corps d'une police.
• font-size: <taille-absolue> | <taille-relative> | <long> | <pourcent> | inherit
108

13/07/2016
55
Module
Le style des textes
• font-style pour modifier le style des polices de caractères.
• font-variant les petites capitales ont la forme des lettres majuscules mais avec la hauteur des
minuscules.
• line-height modifier l’interligne par défaut du texte d’un élément, en « aérant » son contenu.
109
Module
Font personnalisée
• La règle CSS @font-face permet à l'auteur de spécifier des polices en ligne afin
d'afficher le texte sur leur pages web.
• Il existe différent type de fichiers font
.ttf : True Type Font.
.eot : Embedded Open Type.
.otf : Open Type Font.
.svg : SVG Font.
.woff : Web Open Font Format.
110

13/07/2016
56
Module
Effet sur le texte
• La propriété CSS hyphens communique au navigateur la méthode à utiliser pour faire la
césure des mots afin d'améliorer l'agencement du texte.
• La propriété CSS overflow a été conçue pour administrer les débordements d'éléments au
sein d'un bloc
• La propriété CSS word-wrap force le retour à la ligne d’un mot long, appliquée au parent et
qui aura pour effet de couper le mot à un endroit arbitraire afin de provoquer un retour à la
ligne.
111
Module
Leçon
Leçon
Leçon
Leçon
1
2
3
Appliquer un style à du texte

13/07/2016
57
Module
Plan
• Nouvelles propriétés de bloc en CSS3
• Propriété outline
• Présentation et propriété column
• Le rendu des éléments
• Le positionnement des éléments
• Démonstration: Appliquer un style CSS3 à des blocs d'éléments.
113
Module
Propriété outline
• La propriété outline gère le liseré visible autour des éléments d'une page HTML
• La propriété outline-offset gère l’espace entre la bordure de l'élément et son
contour.
114

13/07/2016
58
Module
Présentation et propriété column
• border-radius peut être utilisée pour arrondir les coins des bordures.
• overflow définie comment le contenu est rogné.
• resize permet de maîtriser le redimensionnement d'un élément.
• column-gap pour gérer l'espacement entres les colonnes
• column-rule pour gérer l'apparence de la séparation des colonnes
115
Module
Le rendu des éléments
• Tous les éléments peuvent être classés en grands groupes de mise en page comme les
blocs, les éléments en ligne, les listes ou les tableaux avec les caractéristiques qui s’y
rattachent.
• Il est possible d’intervenir sur l’appartenance à un de ces groupes et modifier le rendu
d’un élément en fonction des besoins avec la propriété display.
• none : l’élément n’est pas affiché et la boîte qui lui est associée n’est pas créée.
• inline : l’élément devient du type en ligne (comme <span> par exemple).
• block : l’élément devient du type bloc (comme <h1>, <p>, <div>…).
• list-item : l’élément devient du type liste (équivalent de <li>). 116

13/07/2016
59
Module
Le positionnement des éléments
• selon le flux normal : par défaut opéré par les navigateurs sans définition de styles particuliers.
• absolu : le bloc généré par l’élément devient complètement indépendant du flux normal.
• relatif: l’élément est déplacé par rapport à la position qu’ils auraient dû occuper.
• fixed : un élément occupe une position fixe dans la fenêtre du navigateur et ne défile pas avec
le reste de la page.
• flottant : l’élément est générée dans le flux normal et elle peur être déplacée le plus haut et le
plus à gauche dans le contenu.
117
Module
Leçon
Leçon
Leçon
Leçon
1
2
3

13/07/2016
60
Module
Plan
• Pseudo-classes et pseudo-éléments
• Démonstration: utiliser les sélecteurs Pseudo-classes et pseudo-éléments CSS3
119
Module
Pseudo-classes et pseudo-éléments
• Les pseudo-classes et les pseudo-éléments, permettent d'appliquer une
décoration à des éléments en relation avec le contenu de l'arborescence du
document et avec des facteurs externes.
• Forme générale:
• Exemples de pseudo-classes:
• : visited L'historique du navigateur
• : checked L'état du contenu
• : hover la position du pointeur
120

13/07/2016
61
Module
Les pseudo-classes
• Dynamiques: elles permettent d’attribuer un style à un élément en fonction des actions
effectuées par le visiteur.
• Applicables aux liens: spécifiques à l’attribut href faisant référence à un document externe ou
interne.
• E:first-child cible un élément E qui est le premier enfant de son parent.
• E:lang(fr) cible un élément E dans le langage spécifié
121
Module
Les pseudo-classes
• Les pseudo-classes structurelles
• E:last-child E qui est le dernier enfant de son parent.
• E:first-of-type E qui est le premier frère de son type.
• E:last-of-type E qui est le dernier frère de son type.
• E:only-child E qui est le seul enfant de son parent.
• E:only-of-type E qui est le seul de son type dans sa fratrie.
• E:empty E qui n'a pas d'enfants, ni de texte.
122

13/07/2016
62
Module
Les pseudo-classes
• E:nth-of-type(n) E qui est le n-ième frère du même
type.
• E:nth-last-of-type(n) E qui est le n-ième frère du
même type, en partant du dernier.
• E:root E qui est la racine du document.
• Pseudo-classe de cible,
• d'UI
• de négation. 123
Module
Pseudo-éléments
• E:first-line cible la première ligne formatée d'un élément E.
• E:first-letter cible la première lettre d'un élément E.
• E:before et E:after ciblent un contenu généré avant ou après un élément E.
124

13/07/2016
63
Module
Leçon
Leçon
Leçon
Leçon Améliorer les effets graphiques à l'aide de CSS3
1
2
3
4
Module
Plan
• La propriété background
• Créez un dégradé en CSS
• De la géométrie avec CSS
• Les transformations en CSS
• Démonstration: créer des éléments graphiques avec CSS
126

13/07/2016
64
Module
La propriété background
• La propriété CSS background est un raccourci pour définir les valeurs des propriétés d'arrière-plan
dans une seule et unique règle CSS.
background-color , background-image , background-position , background-repeat , background-size , background-attachment
• Les CSS3 apportent une simplification et une souplesse avec les background multiples.
127
Module
Créez un dégradé en CSS
• Les dégradés permettent de créer une image qui représente une transition douce
d’une couleur à une autre.
• linear-gradient une fonction qui permet de créer un dégradé linéaire.
- direction du dégradé (optionnel)
- couleur de départ
- couleur de fin
• repeating-linear-gradient linéaire avec répétition.
• radial-gradient une fonction qui permet de créer un dégradé radial.
- centre du dégradé (optionnel)
- taille et forme (optionnel)
- couleur de départ
- couleur de fin
• repeating-radial-gradient radial avec répétition.
128

13/07/2016
65
Module
De la géométrie avec CSS
129
Module
Les transformations en CSS
• La propriété CSS transform permet de modifier les coordonnées spatiales du modèle de
formatage visuel de CSS. En l'utilisant, les éléments pourront subir des translations, rotations,
homothéties ou être inclinées selon les valeurs définies.
• skew( ) incliner un élément horizontalement ou/et verticalement.
• rotate( ) tourner un élément. rotate3d(x,y,z,a).
• scale( ), scaleX( ) et scaleY( ):
modifier l'échelle d'un élément horizontalement ou verticalement. scale3d(x,y,z)
• translate( ), translateX( ) et translateY( ):
décaler un élément horizontalement ou verticalement. translate3d(x,y,z)
130

13/07/2016
66
Module
Créer des objets et des
méthodes en utilisant
JavaScript
7
Module
Leçon
Leçon
Leçon
Ecrire du code JavaScript bien structuré1
7 Créer des objets et des méthodes en utilisant JavaScript
2
3
Créer des objets personnalisés
Etendre des objets

13/07/2016
67
Module
Plan
• Visibilité et portée d’une variable
• Gestion de l'espace de noms global
• Les fonctions immédiatement invoquées en JavaScript
• Espaces de noms en JavaScript
• Le mode strict
• Objets singleton et fonctions globales
• Démonstration: Ecrire du code JavaScript bien structurée
133
Module
Visibilité et portée d’une variable
• Selon l'endroit où une variable est déclarée, celle-ci pourra être accessible (visible) de partout dans
le script ou bien uniquement dans une portion confinée du code.
On parle de « portée » d'une variable.
134
Exemple1: Exemple2 :

13/07/2016
68
Module
Les fonctions
• Trois façons pour définir des fonctions:
1. Déclarer une fonction (l'instruction function)
2. Exprimer une fonction (l'opérateur function)
3. Le(constructeur function)
135
Module
Les fonctions immédiatement invoquées
• Les variables globales peuvent très facilement entrainer des conflits. Ce problème peut être résolu
de différentes manières.
• Les fonctions immédiatement invoquées IIFE: tout le code du fichier d'extension est encapsulé
dans une IIFE exécutée dès la fin de sa définition.
136

13/07/2016
69
Module
Espaces de noms (namespace) en JavaScript
• Un namespace est un ensemble fictif qui contient des informations, généralement
des propriétés et des méthodes, ainsi que des sous-namespaces.
• Le but d'un namespace est de s'assurer de l'unicité des informations qu'il contient.
Exemple 1: Exemple 2:
137
Module
Le mode strict
• Le mode strict s'applique à des scripts entiers ou à des fonctions individuelles. Il
ne peut s'appliquer à des blocs d'instructions entourés d'accolades {};
• Le mode strict pour les scripts
• Le mode strict pour les fonctions
138

13/07/2016
70
Module
Objets singleton et fonctions globales
• Le Singleton répond à deux exigences :
• Garantir qu'une unique instance d'une classe donné sera créée
• Offrir un point d'accès universel à cette instance.
• JavaScript défini des objets singletons: Math et JSON
• JavaScript défini des fonctions globales comme parseInt(), parseFloat() et isNan()
139
Module
Leçon
Leçon
Leçon
1
2
3
Ecrire du code JavaScript bien structuré
Etendre des objets

13/07/2016
71
Module
Plan
• Création d’objet simple en JavaScript
• Utiliser la notation littérale
• Utiliser un constructeur
• Utiliser l’attribut Prototype
• Utiliser la méthode Object.create()
• Démonstration: Créer des objets personnalisés en JavaScript avec Visual Studio 2015
141
Module
Notation littérale et constructeur
Création d’objet simple en JavaScript Utiliser la notation littérale
Utiliser un constructeur
142

13/07/2016
72
Module
Attribut prototype/méthode Object.create()
• Prototype est un attribut (propriété) particulier(ère) que possèdent toutes les classes JS. Il permet
de définir tous les attributs et méthodes de toutes les instances de la classe.
143
• Object.create() crée un objet qui a un
prototype spécifié et qui contient
éventuellement les propriétés spécifiées.
Module
Leçon
Leçon
Leçon Etendre des objets
1
2
3
Ecrire du code JavaScript bien structuré

13/07/2016
73
Module
Plan
• Encapsulation
• Héritage
• Le chainage de prototypes
• Démonstration: manipuler des objets JavaScript.
145
Module
Encapsulation
• L'encapsulation est un mécanisme qui permet de garantir l'intégrité des données d’un objet.
Il consiste à rassembler les données et les méthodes au sein d'une structure en proposant des
services « fonction » comme unique moyen d’accès.
• Dans d’autres langages de POO, ce concept est concrétisé avec des mots clés comme private,
public, protected…
• En JavaScript on utilise d’autres techniques.
• Les fermetures (ou closures en anglais), sont des fonctions qui utilisent des variables libres.
Les variables de la fonction parente de la fermeture restent liées à la portée parente.
Exemple:
146

13/07/2016
74
Module
Héritage
147
Citoyen
Prop1:
Prop2:
Prop3:
Homme
Prop1:nom
Prop2:âge
Prop3:profession
Prop4:
Femme
Prop1:nom
Prop2:âge
Prop3:profession
Prop4:
Femme
Prop1:congé_maternité
Homme
Prop1:service_militaire
Module
Héritage
• Le concept d’héritage a
été concrétiser par deux
actions principales:
• copier le prototype qui
nous intéresse.
• écraser les méthodes
que l’on souhaite
modifier.
148

13/07/2016
75
Module
Le chainage de prototypes
• Lors de l’appel de la propriété d'un objet,
JavaScript va chercher si l'objet contient cette
méthode.
• Si ce n'est pas le cas, JavaScript va vérifier si
elle est disponible dans le prototype du type
correspondant (sa classe).
• Sinon JavaScript va remonter progressivement
jusqu'au prototype de la super classe Object.
• C'est une mécanique d'héritage de
prototype.
149
Module
Créer des pages interactives en
utilisant les API HTML5
8

13/07/2016
76
Module
Leçon
Leçon
Leçon
Leçon
Interagir avec les fichiers1
8 Créer des pages interactives en utilisant les API HTML5
2
3
Intégrer du multimédia
Réagir à la géolocalisation du navigateur et au contexte
4 Déboguer et appliquer un profil à une application Web
Module
Plan
• La suite d'API File
• L’interface Blob
• L‘interface FileReader
• Le glisser déposer en HTML
• Démonstration: utiliser la suite HTML d’API File pour interagir avec les fichiers.
152

13/07/2016
77
Module
La suite d'API File
• HTML5 fournit des API (Application Programming Interface) très puissantes
permettant d'interagir avec les données binaires et le système de fichiers local
d'un utilisateur.
• La suite d'API File offre aux applications Web la possibilité de:
• Lire des fichiers de façon synchrone ou asynchrone.
• Créer des objets Blob arbitraires.
• Ecrire des fichiers dans un emplacement temporaire
• Glisser-déposer de fichiers depuis le Bureau vers le navigateur
• …
153
Module
L’interface Blob
• Les blobs ( Binary Large Object ) sont des objets représentent des données
binaires qui ne changent pas et qui sont disponibles lecture seule.
• Propriétés:
• Size : La taille, en octets, des données contenues dans l'objet Blob.
• Type : Une chaîne de caractères indiquant le type MIME des données contenues dans le Blob
• Constructeur :
• Permet de créer un objet Blob à partir d’un tableau.
154

13/07/2016
78
Module
L‘interface FileReader
• L'objet FileReader permet aux applications Web de lire le contenu des fichiers
(ou des tampons de données brutes) stockés sur l'ordinateur de l'utilisateur de
manière asynchrone .
155
Propriété:
• Error : une erreur durant la lecture du fichier.
• readyState : l'état du FileReader.
• Result : le contenu du fichier.
Méthodes:
• abort( ) : Abandonne la lecture du Blob.
• readAsArrayBuffer() : Démarre la lecture du Blob.
• readAsBinaryString() : result contient les données binaires
• readAsDataURL() : result contient des données URL
• readAsText() : result contient une chaîne de caractère.
Evènement :
• onabort : Appelé lorsque l'opération de lecture est interrompue.
• onerror : Appelé quand une erreur survient.
• onload : Appelé lorsque l'opération de lecture s'est terminée avec succès.
• onloadend : Appelé lorsque la lecture est terminée.
• onloadstart : Appelé lorsque la lecture est sur le point de commencer.
• onprogress : Appelé régulièrement durant la lecture des données.
Module
Le glisser déposer en HTML
• Le principe du Drag and Drop (DnD) est simple
• Prendre un objet sur la page: cliquer et maintenir le bouton pressé.
• Déplacer l'objet sur la page.
• Relâcher le bouton de la souris. Si c'est fait dans une zone destinée au déplacement, l'objet est
physiquement copié ou déplacé dans la page.
• La propriété draggable="true" indique qu'un élément HTML peut être déplacé
dans la page. certains élément qui sont déplaçable par défaut , comme les images.
• Dropzone Attribut d'un conteneur dans lequel on peut déposer un objet. La
valeur de cet attribut varie selon les permissions accordées.
156

13/07/2016
79
Module
Leçon
Leçon
Leçon
Leçon
1
2
3
Interagir avec les fichiers
Module
Plan
• Ajout du contrôle vidéo HTML5 dans une page Web
• Prendre en charge plusieurs formats
• Utiliser JavaScript pour gérer le contrôle video
• Contrôle audio HTML5
• Démonstration: Intégrer du multimédia dans une page HTML5
158

13/07/2016
80
Module
Contrôle vidéo HTML5
• Forme élémentaire
• Attributs
• src URL pointant sur un fichier vidéo.
• controls Attribut booléen activant une série de contrôles intégrés de lecture, de pause, de
recherche et de réglage du volume.
• poster une image d’espace réservé affichée dans le lecteur vidéo lorsqu’une vidéo n’est pas
disponible.
• loop Attribut booléen qui lit la vidéo à plusieurs reprises jusqu’à indication.
• muted Attribut booléen qui lit la vidéo avec la piste audio désactivée.
• autoplay Attribut booléen qui démarre automatiquement la lecture de la vidéo.
• preload Attribut booléen définissant un indice sur le volume de mise en tampon requis.
• height Définit en pixels la hauteur du lecteur vidéo.
• width Définit en pixels la largeur du lecteur vidéo.
159
Module
Prendre en charge plusieurs formats
• L’élément source pour prendre en charge plusieurs formats de fichiers et plusieurs
navigateurs. En général :
• un fichier .mp4 pour Internet Explorer
• un format .ogg/.ogv pour d’autres navigateurs.
160

13/07/2016
81
Module
Événements vidéo HTML5
• Une fois le média intégré dans votre document HTML à l'aide de ces nouveaux
éléments, vous pouvez les contrôler depuis du code JavaScript.
161
Exemple 2:Exemple 1:
Module
Contrôle audio HTML5
• L'élément HTML audio désigne du contenu sonore présent dans un document.
• Utilisation de l’élément source pour indiquer plusieurs formats audio.
162

13/07/2016
82
Module
Leçon
Leçon
Leçon
Leçon
1
2
3
Module
Plan
• L’API de géolocalisation
• La méthode getCurrentPosition
• La méthode watchPosition
• L'API Page Visibility, online/offline, userAgent
• Démonstration: Réagir à la géo-localisation du navigateur et au contexte.
164

13/07/2016
83
Module
L’API de géolocalisation
• L’API de géolocalisation expose la latitude et la longitude à JavaScript dans une
page Web à l’aide de l’objet geolocation.
165
Module
La méthode getCurrentPosition
• La méthode getCurrentPosition: initie une requête asynchrone pour détecter la
position de l'utilisateur et demande au matériel de garder cette position
actualisée.
• Paramètres :
• successCallback est une fonction qui récupère l'objet Position retourné. Cet objet contient les
coordonnées de la position : latitude, longitude et accuracy (précision en mètres), accessibles
via l'attribut coords.
• errorCallback qui permet de définir une fonction pour gérer les cas d'erreurs.
• Des options de géolocalisation (timeout, maximumAge, enableHighAccuracy). 166

13/07/2016
84
Module
167
La méthode getCurrentPosition
Module
La méthode watchPosition
• La méthode watchPosition de l’objet geolocation pour recevoir des mises à jour de
localisation à chaque fois que la position de l’ordinateur ou du périphérique hébergeant
l’application Web change.
• La méthode clearWatch pour arrêter l’écoute des mises à jour en lui passant la valeur de
retour de watchPosition.
168

13/07/2016
85
Module
L'API Page Visibility ,online/offline,userAgent
• L'API Page Visibility renseigne sur la visibilité d'une page, qu'elle occupe une fenêtre à
elle toute seule ou juste un onglet. Dès qu'il y a changement d'état, un événement
JavaScript est déclenché.
Exemple :
• navigator.onLine est une propriété qui maintient une valeur ( true / false ). Cette
propriété est mise à jour chaque fois que l'utilisateur passe en mode « Hors ligne ».
• Les évènements « online » et « offline »: Ces deux évènements sont déclenchés sur
l’élément body de chaque page lorsque le navigateur passe d'un mode à l'autre.
• La propriété javascript userAgent de l'objet navigator renvoie l'en-tête du protocole
HTTP du navigateur.
169
Module
Leçon
Leçon
Leçon
Leçon Déboguer et appliquer un profil à une application Web
1
2
3
4

13/07/2016
86
Module
Plan
• Les interfaces Navigation Timing
• Démonstration: Déboguer et appliquer un profile à une application Web.
171
Module
Les interfaces Navigation Timing
• Les interfaces Navigation Timing fournissent à une application Web des mesures
de minutage précises pour chaque phase de navigation.
• Grâce à Navigation Timing, les développeurs obtiennent:
• le temps précis de chargement de la page de bout en bout (en prenant en compte le temps
nécessaire pour obtenir la page auprès du serveur).
• la répartition du temps consacré à chaque phase de mise en réseau et de traitement du DOM :
• Déchargement
• Redirection
• Mise en cache de l'application
• DNS, TCP, demande, réponse
• Traitement du DOM et événement de chargement
172

13/07/2016
87
Module
Ajouter le support du mode
hors ligne aux applications
9
Module
Leçon
Leçon
Lire et écrire des données localement1
9 Ajouter le support du mode hors ligne aux applications
2 Ajouter un support en mode hors ligne en utilisant le cache
d'application

13/07/2016
88
Module
Plan
• La gestion des données persistantes avec HTML5
• La famille DOM Storage
• L'interface sessionStorage
• L’interface LocalStorage
• IndexedDB
• Démonstration: Lire et écrire des données localement.
175
Module
La gestion des données persistantes
• La gestion des données persistantes avec HTML5 est le stockage de données chez le client afin de
pouvoir profiter du mode déconnecté.
• Avant HTML5, la seule solution pour stocker des données sur le poste du client était de passer par le
système des cookies (témoin de connexion) qui sont de petits fichiers texte (4ko) stockés dans le
navigateur lors de l’utilisation des sites Web.
176
• HTML5 permet d’utiliser les objets de la famille DOM
Storage (10 Mo) avec 2 types de stockage web :
• L’objet SessionStorage, qui conservera vos données le
temps de votre session.
• L’objet LocalStorage, qui va conserver vos données
indéfiniment.

13/07/2016
89
Module
La famille DOM Storage
• Chaque objet storage permet d'accéder à une liste de clés/valeurs (items).
• Les clés sont des string (la clé peut être vide).
• Attributs :
• length : le nombre de paires clé/valeur.
• Méthodes :
• key(n) : retourne la clé à l'index n, retourne NULL s’il n'y a pas de résultat.
• getItem(key) : retourne la valeur de la clé key.
• setItem(key, value) : ajoute une paire clé/valeur.
* Les exceptions : NOT_SUPPORTED_ERR : la valeur n'est pas supportée
QUOTA_EXCEEDED_ERR :mémoire dépassée ou storage désactivé.
• removeItem(key) : supprime la paire clé/valeur dont la clé est key.
• clear() : vide toutes les paires clé/valeur.
177
Module
L’interface sessionStorage
• L'interface sessionStorage mémorise les données sur la durée d'une session de navigation.
• Sa portée est limitée à la fenêtre ou l'onglet actif.
• Lors de sa fermeture, les données sont effacées.
• Chaque stockage de session est limité à un domaine.
• Tester la compatibilité :
• Utilisation de l'objet :
• Accéder aux données stockées :
178

13/07/2016
90
Module
L’interface LocalStorage
• Le localStorage fonctionne de la même manière que le sessionStorage, mais il
conserve les données pour une durée indéterminée.
• On accède uniquement aux paires clé/valeur d'un même domaine.
179
Module
IndexedDB
• IndexedDB est un moyen pour stocker des données dans le navigateur d'un
utilisateur, de manière persistante.
• Un catalogue de DVDs dans une bibliothèque
• Des applications qui n'ont pas forcément besoin d'une connectivité Internet en continu des
clients de messagerie électronique, des listes de tâches, des bloc-notes.
• Caractéristiques
• Les bases d'IndexedDB stockent des paires clé-valeur.
• L'API IndexedDB est majoritairement asynchrone.
• IndexedDB est orienté objet.
• IndexedDB ne s'utilise pas avec le langage SQL.
180

13/07/2016
91
Module
Leçon
Leçon Ajouter un support en mode hors ligne en utilisant le cache
d'application
1
2
Lire et écrire des données localement
Module
Plan
• l’API du cache d’application
• Objet ApplicationCache
• Mise à jour du manifeste
• Démonstration: Ajouter un support en mode hors ligne en utilisant le cache d'application.
182

13/07/2016
92
Module
l’API du cache d’application
• AppCache permet aux pages Web de mettre en cache (ou d’enregistrer) des
ressources localement.
• Des images.
• Des bibliothèques de scripts.
• Des feuilles de style.
• Et de servir les URL à partir du contenu en cache à l’aide de la notation URI
(Uniform Resource Identifier) standard.
• Pour mettre en cache les ressources localement nous avons besoin de:
• Créez un fichier manifeste qui définit les ressources à enregistrer.
• Référencez le fichier manifeste dans toutes les pages Web conçues pour utiliser les ressources
mises en cache.
183
Module
l’API du cache d’application
• Les fichiers manifeste sont composés des 3
sections suivantes :
• CACHE : cette section définit les ressources qui seront stockées
localement.
• FALLBACK : cette section définit les ressources à utiliser lorsque
d’autres ressources ne sont pas disponibles.
• NETWORK : cette section spécifie les ressources à exploiter
lorsqu’une connexion réseau existe. Les ressources dans cette
section ne sont pas mises en cache.
• Déclaration d’un manifeste:
184
‘ nom_du_fichier.manifest ’

13/07/2016
93
Module
Objet ApplicationCache
• L’objet ApplicationCache fournit les
méthodes et les propriétés permettant
de gérer le cache d’application.
• Propriétés :
• La propriété status pour déterminer l’état
du cache d’application pour le document.
185
Module
Objet ApplicationCache
• Événement :
• cached est déclenché lorsque le manifeste est mis en cache.
• checking est déclenché lorsque la présence d’une mise à jour est vérifiée.
• downloading est déclenché lorsque les ressources du manifeste sont téléchargées.
• progress est déclenché pendant que les ressources du manifeste sont téléchargées.
• error est déclenché lorsqu’un problème se produit, comme un code de réponse HTML 404 ou
410. L’événement est également déclenché lorsque le fichier manifeste ne peut pas être
téléchargé.
• updateready est déclenché lorsqu’une nouvelle version du cache est disponible.
• noupdate est déclenché lorsqu’une mise à jour a été demandée, mais le manifeste n’a pas été
modifié.
• obsolete est déclenché lorsque le cache actuel est signalé comme obsolète.
186

13/07/2016
94
Module
Mise à jour du manifeste
• La fonction update( ) lance une vérification volontaire de la présence d’un
nouveau manifeste
• La fonction swapCache( ) Permet de mettre à jour le manifeste
187
Module
Implémentation d’une
interface utilisateur adaptative
10

13/07/2016
95
Module
Leçon
Leçon
Supporter plusieurs facteurs de forme1
10 Implémentation d’une interface utilisateur adaptative
2 Créer une interface utilisateur adaptative
Module
Plan
• Les facteurs de forme selon le dispositif d’affichage
190

13/07/2016
96
Module
Interface utilisateur adaptative
• Le « responsive design » représente l’adaptation du design du site à la résolution de l'écran du
visiteur, que ce soit tablette, Smartphone ou ordinateur.
• Il faut prendre en compte plusieurs paramètres:
• La résolution de l’écran: le site web doit pouvoir être affiché avec différentes résolutions (320x480px,
320x568px, 768x1024px...).
La balise meta viewport pour les appareils mobiles et screen pour les ordinateurs.
• Pour le texte: mettre en pratique les propriétés CSS:
• text-indent, hyphens, word-wrap, word-spacing.
• Utiliser <wbr> au lieu de <br>.
• Pour les images: utiliser les propriété CSS minimum et maximum width et height.
• Les propriétés offsetHeight, offsetWidth pour récupérer la longueur et la largeur.
• Pour le menu de navigation: changer la liste en menu déroulant 191
ordinateur SmartphoneTablette
Module
Interface utilisateur adaptative
• La densité de l’affichage: Augmenter la densité d’affichage en augmentant la font size.
• Changer les images au format SVG (Scalable Vector Graphics).
• Les méthodes Input:
Ne pas utiliser le pseudo élément hover.
Augmenter la taille des boutons et des liens.
Prendre en compte l’orientation du device mode paysage ou portrait
• Les capacités des navigateurs: prendre en considération la version des navigateurs.
• Imprimer des pages web ou section
• Non-content: enlever les entêtes et pied de pages
• Textes: modifier la font enlever les ombres (text-shadow)
• Liens
• Colonnes 192

13/07/2016
97
Module
Leçon
Leçon Créer une interface utilisateur adaptative
1
2
Supporter plusieurs facteurs de forme
Module
Plan
• Le type CSS media
• Les requêtes de media
• Démonstration: Créer une interface utilisateur adaptative
194

13/07/2016
98
Module
Le type CSS media
• Attribut media :
• La règle CSS @media définit les types de médias ciblés par un ensemble de règles.
• Forme générale : Exemple 1 :
Exemple 2 :
195
Types de médias :
allValable : tous les supports.
braille : appareils braille à retour tactile.
embossed : appareils à impression braille.
handheld : appareils portatifs.
print : supports paginés.
projection : projections.
screen : moniteurs.
speech : synthétiseur vocaux.
tty : télétypes, terminaux ou les appareils portables aux capacités
d'affichage réduites.
tv : appareils du type télévision (basse résolution, couleur, défilement
limité, sonorisé.
Module
Requêtes de media
• Media Queries (ou requêtes de media) est une expression dont la valeur est
toujours vraie ou fausse. Elle est composée de plusieurs éléments: le media et
les propriétés, le tout est lié avec des opérateurs logiques.
• Opérateurs logiques
• and "et" ; only "uniquement" ; not "non" ; , "ou"
• Les propriétés
• Color
• height
• device-height
• …
196

13/07/2016
99
Module
Créer des graphiques avancés
11
Module
Leçon
Leçon
Créer des graphiques interactifs en utilisant les Graphiques Vectoriels
Adaptables
1
11 Créer des graphiques avancés
2 Dessiner des graphiques par programmation en utilisant un Canvas

13/07/2016
100
Module
Plan
• SVG
• Eléments et attributs
• Les remplissages
• Démonstration: Créer des graphiques interactifs en utilisant les Graphiques Vectoriels
Adaptables
199
Module
SVG ?
• SVG (Scalable Vector Graphics) est un modèle de graphiques.
• Permet d’afficher des objets graphiques vectoriels (2D) décrits dans un langage XML.
• Utilise le mode différé (Retained Mode)
• Les graphiques sont stockés dans la mémoire et peuvent être manipulés grâce au code dans le
réaffichage.
200

13/07/2016
101
Module
Eléments et attributs
• Les éléments de base réalisables avec le svg sont :
• Line, rect, circle ,ellipse, polygon, polyline
• Les attributs ou propriétés :
• stroke, width, height, x, y
201
https://developer.mozilla.org/fr/docs/SVG/Element
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
Module
Les remplissages
• À toutes ces formes s'appliquent des couleurs de remplissage ou de contours.
• Les attributs suivants en définissent l'apparence :
• stroke : couleur du contour
• fill: couleur de remplissage
• stroke-opacity: opacité du contour (de 0 à 1)
• fill-opacity: opacité du remplissage (de 9 à 1)
202

13/07/2016
102
Module
Leçon
Leçon Dessiner des graphiques par programmation en utilisant un Canvas
1
2
Créer des graphiques interactifs en utilisant les Graphiques Vectoriels
Adaptables
Module
Plan
• Canvas ?
• Le rectangle
• Les lignes
• Les courbes, cercle et arc
• Démonstration: Dessiner des graphiques par programmation en utilisant un Canvas.
204

13/07/2016
103
Module
Canvas
• L’élément canvas permet le rendu des graphiques dans une zone de dessin d’image
dépendant de la résolution.
• Canvas permet des scénarios de dessin qui comprennent des rectangles, des tracés, des lignes,
des remplissages, des arcs et des courbes de Bézier et quadratiques.
• La balise canvas utilise le « mode immédiat » les commandes de dessin sont envoyées
directement au matériel graphique.
• Pour dessiner sur le canvas, les « contextes » sont utilisés, tels que le contexte Canvas 2D,
spécifié dans la spécification HTML Canvas 2D Context.
205
Module
Le rectangle
• Le rectangle fillRect(x, y, largeur, hauteur);
• L'objet canvas est accessible par le getElementById( ).
• Récupérer un objet contexte de dessin par la méthode getContext( ) de l'objet canvas.
• «fill», pour des formes pleines.
• «stroke», pour les contours de la forme qui seront tracés 206

13/07/2016
104
Module
Les lignes
• Dessiner un triangle
207
Module
Les courbes, cercle et arc
• Dessiner un cercle
• arc( x, y, radius, startAngle, endAngle, sensAntiHoraire )
• Le point de départ horizontal.
• Le point de départ vertical.
• Le rayon.
• L'angle de départ. Détermine l'inclinaison initiale.
• L'angle terminal. Détermine la courbure.
• Un drapeau pour l'inversion du sens de rotation: false dans le sens des aiguilles d'une
montre, true sinon.
208

13/07/2016
105
Module
Animer l'interface utilisateur
12
Module
Leçon
Leçon
Leçon
Appliquer des transitions CSS1
12 Animer l'interface utilisateur
2
3
Les éléments de transformations
Appliquer des animations CSS Key-frame

13/07/2016
106
Module
Plan
• Les transitions
• Événements DOM de transitions
• Démonstration: Appliquer des transitions CSS
211
Module
Les transitions
• Les transitions permettent de créer des animations simples en modifiant
progressivement les valeurs des propriétés CSS au cours d’une période de temps
donnée.
• Transition s’applique à des propriétés CSS
http://msdn.microsoft.com/fr-fr/library/ie/dn254934(v=vs.85).aspx
212

13/07/2016
107
Module
Les transitions
• transition est un raccourci de 4 propriétés:
• transition-property identifier une ou plusieurs propriétés CSS auxquelles les effets de la transition sont
appliqués.
• transition-duration définir la durée nécessaire à la réalisation d’une transition.
• transition-delay vous permet de retarder le démarrage d’une transition.
• transition-timing-function modifier la vitesse d’une transition au cours de sa durée en décrivant le
mode de calcul des valeurs intermédiaires utilisées durant la transition.
 ease la valeur par défaut. La fonction de chronométrage accélère graduellement au début, exécute l’animation à la
vitesse optimale, puis ralentit graduellement à la fin.
 linear fonction de chronométrage qui a une vitesse constante du début à la fin.
 ease-in fonction de chronométrage qui accélère graduellement au début.
 ease-out fonction de chronométrage qui ralentit graduellement à la fin.
 ease-in-out fonction de chronométrage qui accélère au début, puis ralentit graduellement à la fin.
213
Module
Événements DOM de transitions
• L’événement transitionstart se produit au début de la transition.
• L’événement transitionend se produit à la fin de la transition.
Infos de contexte : propertyName, elapsedTime
Exemple:
214

13/07/2016
108
Module
Leçon
Leçon
Leçon
1
2
3
Appliquer des transitions CSS
Appliquer des animations CSS Key-frame
Module
Plan
• Transformation 2D
• Démonstration: appliquer les éléments de transformations.
216

13/07/2016
109
Module
Transformation 2D
• La propriété CSS transform permet de modifier les coordonnées spatiales du
modèle de formatage visuel de CSS pour leurs faire subir des translations,
rotations, homothéties ou encore une inclinaison.
• rotate: Applique une rotation dans le sens horaire.
Exemple :
217
Module
Transformation 2D
• scale, scaleX, scaleY: permettent de
modifier l'échelle d'un élément
horizontalement ou verticalement.
• Exemple: transform : scale(2,4);
• skew, skewX, skewY : Incline l'élément
autour des axes X et Y des angles spécifiés.
• Exemple: transform : skew(30deg,-10deg);
• translate, translateX , translateY: Spécifie
une translation 2D par le vecteur [tx, ty].
• Exemple: transform : translate(50px, 80px);
218

13/07/2016
110
Module
Le 3D est disponible avec :
translate3d(x, y, z), scale3d(x, y, z), rotate3d(x, y, z)219
transform : rotate(30deg) transform : rotate3d(5, 5.0, 3.0, 30deg)
Module
Leçon
Leçon
Leçon Appliquer des animations CSS Key-frame
1
2
3
Appliquer des transitions CSS

13/07/2016
111
Module
Plan
• Les animations CSS Key-frame
• Les propriétés CSS d’animation
• Évènements d’animation
• Démonstration: Appliquer des animations CSS Key-frame
221
Module
Les animations CSS Key-frame
• La règle CSS @keyframes permet de
contrôler les étapes intermédiaires d'une
séquence d'animation CSS en établissant
des Images Clés (keyframes) qui sont atteint
à certains points durant l'animation.
222

13/07/2016
112
Module
Les propriétés CSS d’animation
• animation un raccourci pour définir les propriétés ci-
dessous, excepté la propriété animation-play-state.
• animation-name une liste d'animations @keyframes qui
doivent être appliquées à l'élément sélectionné.
• animation-duration la durée que l'animation doit utiliser
pour compléter un cycle.
• animation-timing-function la manière dont l'animation
CSS progresse au cours de chaque cycle.
"linear", "ease", "ease-in", "ease-out", "ease-in-out"
• animation-delay quand doit commencer l'animation.
• animation-iteration-count le nombre d’itérations
• animation-direction précise si l'animation doit se jouer à
l'envers ou selon des cycles alternés.
• animation-play-state détermine si l'animation est en
cours de lecture ou en pause. 223
Exemple:
Module
• Événements d’animation
• L'objet AnimationEvent propose 3 évènements pour détecter quand une
animation démarre, se termine ou commence un nouveau cycle.
animationstart, animationend et animationiteration.
• Ces événements donnent les détails suivants:
• animationName: nom de l’animation ayant levée l’événement.
• elapsedTime: le temps écoulé depuis le début de l’animation, en secondes .
224

13/07/2016
113
Module
La communication temps-réel
via les Web Sockets
13
Module
Leçon
Leçon
Introduction aux Web Sockets1
13 La communication temps-réel via les Web Sockets
2 Envoyer et recevoir des données en utilisant les Web Sockets

13/07/2016
114
Module
Plan
• La Communication Temps Réel
• WebSocket
227
Module
Communication Temps Réel
• Les pages statiques, dynamiques et celles autorisant des rechargements partiels
avec Ajax.
• Aujourd’hui, les applications web ont besoins d’une communication bidirectionnelle et en
temps réel (emails, tweets, etc...).
• Deux manières pour implémenter la Communication Temps Réel:
• L’AJAX Polling: le client exécute une requête vers son serveur à intervalle de temps régulier,
espérant ainsi être mis au courant d’une mise à jour.
• Le long polling est une variation du polling. Une requête est envoyée au serveur, mais si
celui-ci ne possède pas de données à envoyer, la connexion est laissée ouverte. Elle sera par la
suite fermée soit par l’arrivée d’une réponse, soit après un certain laps de temps (aussi appelé
« timeout »). Le client relance alors une requête dès la fermeture de la connexion précédente,
ce qui permet au serveur d’envoyer des données à n’importe quel moment. 228

13/07/2016
115
Module
WebSocket
• Le protocole WebSocket est standardisé dans la RFC6455. Il permet d'ouvrir un canal de
communication interactif entre un navigateur (côté client) et un serveur.
• La communication est bidirectionnelle, le client peut envoyer des messages au serveur,
et inversement.
• Le serveur peut envoyer un message spontanément.
• WebSocket facilite l’utilisation de formats de données fixes (texte, tableaux binaires ou objets
blob) et contourne le protocole HTTP qui lui doit demander les documents auprès d’un serveur.
• Le protocole WebSocket est également full-duplex, c'est à dire que les données sont échangées
simultanément dans les deux sens. 229
Module
Leçon
Leçon Envoyer et recevoir des données en utilisant les Web Sockets
1
2
Introduction aux Web Sockets

13/07/2016
116
Module
Plan
• Créer un Websocket
• Méthodes et évènements
• Récupérer un message et gestion d’erreurs
231
Module
Créer un Websocket
• Dans un premier temps tester si le navigateur de l'utilisateur est compatible.
• Pour créer un websocket il suffit de créer l'objet socket via new WebSocket( )
Cette fonction prend un paramètre : l'url du serveur hôte.
• Vérifier si le socket serveur est ouvert avec onopen :
232

13/07/2016
117
Module
Méthodes et évènements
• Méthodes:
• Permet l'envoie de données contenue dans la variable données: socket.send(données)
• Ferme la connexion courante: socket.close()
• Évènements:
• onopen est appelée une fois la connexion établie avec le serveur.
• socket.onopen = function() { alert('socket ouverte'); }
• onclose est appelée quand le client ou le serveur coupe la connexion.
• socket.onclose = function() { alert('socket fermée'); }
233
Module
Récupérer message et gestion d’erreur
• onmessage permet de récupérer les informations transmises par le serveur.
Elle récupère comme argument message, puis on recherche les données
transmises via message.data
• socket.onmessage = function(message) {alert('message reçu : ' + message.data);}
• onerror est appelée si websocket rencontre une erreur (serveur KO, erreur dans le
protocole,...).
• socket.onerror = function() { alert('Une erreur est survenue');}
234

13/07/2016
118
Module
Créer un processus Web
Worker
14
Module
Leçon
Leçon
Introduction aux Web Workers1
14 Créer un processus Web Worker
2 Effectuer des traitements asynchrones en utilisant les Web Workers

13/07/2016
119
Module
Plan
• Programmation parallèle
• WebWorkers
237
Module
Programmation parallèle
• Le navigateur peut se freezer dans le cas d’un chargement de script trop lourd,
voir même demander à l’utilisateur s’il souhaite le stopper.
• D’où la solution de programmation parallèle qui consiste à exécuter plusieurs
tâches en même temps.
238

13/07/2016
120
Module
WebWorkers
• Les WebWorkers fournissent une API JavaScript pour exécuter des scripts à
l’arrière-plan parallèlement à la page principale, sans en perturber le
fonctionnement.
• Il existe deux types de WebWorkers:
1. Les Workers déidés:
• Ils sont directement liés à leur créateur.
• Ils appartiennent à une seule page.
• Ils peuvent communiquer uniquement avec cette page et s’arrête lorsque cette page s’arrête.
2. Les Workers partagés:
• Peuvent communiquer avec tout script provenant de la même origine que leur créateur.
• S’arrêtent lorsque l’application s’arrête.
239
Module
Leçon
Leçon Effectuer des traitements asynchrones en utilisant les Web Workers
1
2
Introduction aux Web Workers

13/07/2016
121
Module
Plan
• Créer un Web Worker dédié
• Méthodes, attributs et évènements
• Web Worker partagé
• Démonstration: Effectuer des traitements asynchrones en utilisant les Web Workers
241
Module
Créer un Web Worker dédié
• Chaque worker va utiliser un thread dédié, ce qui implique que leur code devra
être hébergé dans des fichiers séparés de la classe principale.
• Insérer directement du script dans la page web:
• new Worker( ) créer un nouveau worker avec comme argument l'url du code javascript à
exécuter dans ce worker.
• worker.onmessage un listener appliqué sur le worker.
• event.data le message reçu.
242

13/07/2016
122
Module
Créer un Web Worker dédié
• Dans un fichier JavaScript séparé:
• postMessage( ) envoyer des messages au thread principal.
243
Module
Méthodes, attributs et évènements
• Méthode
close( ) Stop le worker thread.
importScripts(urls) Une liste de fichiers JavaScript additionnels à importer séparés par des virgules.
postMessage(data) Envoies un message depuis et vers un worker thread.
clearInterval(handle) Annule un traitement programmé identifié par le handle fournit en paramètre.
setInterval(handler, valeur de timeout, arguments) Programme un traitement devant être exécuté de
manière répétitive après le nombre indiqué de millisecondes. Retourne un handle.
setTimeout(handler, valeur de timeout, arguments) Programme un traitement devant être exécuté
après le nombre indiqué de millisecondes. Retourne un handle.
• Attributs
location une URL absolue.
navigator l'identité et l'état onLine du navigateur actuel.
self La portée totale du worker, ce qui inclus donc les objets WorkerLocation et WorkerNavigator.
• Evènement
onerror Une erreur s'est produite pendant l'exécution.
onmessage Un message contenant des données a été reçu. 244

13/07/2016
123
Module
Web Worker partagé
• Insérer directement du script dans la page web:
• Dans un fichier JavaScript séparé:
245

Programmer en html5, css 3 et java script (70 480)

Contenu connexe

Tendances (20)

Similaire à Programmer en html5, css 3 et java script (70 480) (20)

Dernier (7)

Programmer en html5, css 3 et java script (70 480)