Vous êtes sur la page 1sur 271

Présentation de la formation

Programmation en HTML5 avec


JavaScript et CSS3 (70-480)

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Qu’est-ce que c’est 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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Le plan de formation
1. Vue d'ensemble de HTML et CSS 9. Ajouter le support du mode hors ligne aux
2. Créer et styler une page HTML5 applications
3. Introduction à JavaScript 10. Implémenter une interface utilisateur
4. Créer des formulaires pour collecter des adaptative
données et valider les entrées utilisateurs 11. Créer des graphiques avancés
5. Communiquer avec une source de données 12. Animer l'interface utilisateur
distante 13. Implémenter la communication temps-réel
6. Styler HTML5 en utilisant CSS3 avec les Web Sockets
7. Créer des objets et des méthodes en utilisant 14. Créer un processus Web Worker
JavaScript
8. Créer des pages interactives en utilisant les API
HTML5

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


La certification MCSD
• Cette formation est associée à l’examen 70-480

• Cette formation prépare au passage de la certification :


MCSD (Microsoft Certified Solutions Developer) : Web Applications

MCSD (Microsoft Certified Solutions Developer) : Windows Store Apps Using HTML5

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


La certification

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Formation ASP.NET sur alphorm.com
• Formation Développez des applications Web avec ASP.NET MVC 4 (70-486)

• Formateur : Djamel BOUCHOUCHA

• Durée : 12 heures 32 minutes

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Publics concernés
• Développeur junior ou senior

• Chef de projet

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Les ressources logicielles
• IDE: Visual studio 2012
https://www.microsoft.com/france/visual-studio/

• Bibliothèque: JQuery
http://jquery.com/

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Les liens utiles
• Formation
http://www.microsoft.com/france/vision

• Académie virtuelle de Microsoft


http://www.microsoftvirtualacademy.com/

• Passage d’examen
https://www.prometric.com/en-us/Pages/home.aspx

• Repassage d’examen
http://www.microsoft.com/learning/en-us/second-shot.aspx

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Are you ready ? ☺

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Vue d’ensemble de HTML et de CSS

Notions de bases
et évolution

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Historique et évolution
Internet
Le Web
Html
CSS
JavaScript

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Internet
• Internet est 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…

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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 (the European Research Consortium
for Informatics and Mathematics)

Timothy John Berners-Lee


Inventeur du World Wide Web

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


CSS(Cascading Style Sheets)

• CSS est un langage consacré à la mise


en forme des contenus HTML.

• CSS1 -> CSS2 -> CSS2.1 -> CSS3 ->


CSS4 en cours d’écriture.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
Des notions indispensables au développement WEB.
• Internet, Le Web, Html, CSS, JavaScript

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Vue d’ensemble de HTML et de CSS

Vue d’ensemble
de HTML

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Page web statique

Requête HTTP

Réponse HTTP

Client Serveur

HTML est un langage de programmation de page web statique

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Langage interprété vs langage compilé
Compilation Exécution

Ordinateur

Système
d’exploitation

Navigateur

Interprétation

HTML est un langage de programmation interprété


HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Ce qu’on a couvert
• Notion de site statique et site dynamique

• Notion de Langage interprété, langage compilé et langage hybride

• Notion de balises et attributs

• Les différentes balises de HTML

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Vue d'ensemble de HTML et CSS

Vue d'ensemble de
CSS

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Les règles générales
• Structure de base

Sélecteur {
Porpriété 1: Valeur 1;
Porpriété 2: Valeur 2;
}
Exemple:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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


HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Méthodes d’application des styles CSS
• Dans l’élément <style>

• Dans un fichier externe

• Dans l’attribut style

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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)

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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).
Exemple:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Les règles générales: notions de sélecteur, attributs et valeurs

• Les sélecteurs

• D’élément, universel, d’identifiant, de classe

• D’attribut de valeurs d’attributs

• Comment appliquer le styles CSS:


• Dans l’élément <style>
• Dans un fichier externe
• Dans l’attribut style

• Notion de cascade et d’héritage


HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Vue d'ensemble de HTML et CSS
Créer une application Web
en utilisant Visual Studio

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Présenter Visual Studio

• Créer une première application web avec Visual Studio

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Présenter Visual Studio

• Explorer les menus principaux

• Créer une première application web avec Visual studio

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer et styler une page HTML5

Créer une page


HTML5

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Structure d’un document HTML 5

• Démonstration: Créer notre première page HTML5 avec Visual Studio

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Nouvelle structure du document HTML5

• Nouvelles balises dans HTML5


Affichage du Texte et des images dans HTML5

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer et styler une page HTML5

Appliquer des styles


à une page HTML5

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Modifier la police du texte

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;
}

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Modèle en boite CSS

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


L’arrière plan et les couleurs

Exemple:

nouveauStyle1 {
background-color: white ;
background-color: #FFFFFF;
background-color: rgb(255,255,255)
}

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Police et arrière plan

• Les couleurs

• Modèle en boite de CSS


Les bordures, l’encadrement (Rembourrage et marge )

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Introduction à JavaScript

Vue d'ensemble
de JavaScript

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Le langage JavaScript
Requête HTTP

Client Réponse HTTP


Serveur

• JavaScript est un langage de script Langage interprété


qui offre la possibilité d’ajouter de
Utilisé pour la programmation
l’interactivité à une page Web.
dynamique
Exécuté côté client, ce qui
signifie dans un navigateur Web.
Mais peut aussi être employé
côté serveur.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Les règles de syntaxe de JavaScript
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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Les règles de syntaxe de JavaScript
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 ||.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Instruction simple, conditionnelle et itérative
Forme générale:

Exemple:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Instruction simple, conditionnelle et itérative
Forme générale: Exemple:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Instruction simple, conditionnelle et itérative
Exemple:
Forme générale:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Les fonctions
Les fonctions représentent le concept de base de la programmation JavaScript
afin de modulariser les traitements.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

• Exemple :

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• JavaScript est un langage de script interprété coté client

• Les notions de variable, type de donnée et opérateur

• Les instructions simples, conditionnelles et itératives

• Les Fonctions en JavaScript

• Notation Objet issue de JavaScript (JSON)

• Démonstration: appliquer du JavaScript à une Page HTML5 avec Visual


Studio

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Introduction à JavaScript

Programmer le DOM
HTML avec JavaScript

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


DOM (Modèle Objet de Document)
• DOM (Document Object Model) est une interface de programmation API
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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Accès aux objets
• Accès directe
Avec: document.getElementById("")

Avec document.getElementsByTagName("")

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

firstChild : premier noeud enfant parentNode : noeud parent

lastChild : dernier noeud enfant nextSibling : noeud suivant au


même niveau (à droite)
childNodes : tous les noeuds
enfant (sous forme de tableau) previousSibling : noeud
précédent au même niveau (à
gauche).

• Exemple:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• DOM (Modèle Objet de Document)

• Les spécifications DOM1, DOM2 et DOM3

• Manipulation des éléments


Accès aux éléments
• Accès direct à des éléments spécifiques/aux balises
• Accès aux éléments à partir d’un nœud
Ajout d’élément
Suppression d'éléments

• Démonstration: Utiliser DOM pour ajouter de l’interactivité à une


page HTML5 avec JavaScript
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Introduction à JavaScript

Introduction à JQuery

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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)

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Manipulation de l’arbre DOM avec JQuery
• Ajout d’un nœud:

• Remplacement d’un nœud:

• Suppression d’un nœud:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• JQuery est une bibliothèque de JavaScript.

• Les sélecteurs et les filtres.

• Manipulation de l’arbre DOM avec JQuery.


Insertion, remplacement et suppression

• Démonstration: afficher des données et gérer des évènement avec


JavaScript.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer des formulaires pour collecter des
données et valider les entrées utilisateurs
Vue d'ensemble
des formulaires et des
éléments de formulaire

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Les formulaires

• Les balises

• Démonstration : manipuler les champs d’un formulaire avec Visual


Studio

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.).

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Les balises
• Zone de texte et libellé

• Zone de mot de passe

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Les balises
• Zone de saisie enrichie

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Les balises
Les cases à cocher
Les zones d'options
Les listes déroulantes

Les boutons d'envoi

Regrouper les champs

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Qu’est ce qu’un formulaire?

• Les balises
• La balise <form> et les attributs action et method
• Zone de saisie simple et enrichie
• Cases à cocher, zones d'options
• Listes déroulantes
• Boutons d'envoi
• Regrouper les champs

• Démonstration : manipuler les champs d’un formulaire avec


Visual Studio

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer des formulaires pour collecter des
données et valider les entrées utilisateurs
Valider les entrées
utilisateurs en utilisant
les attributs HTML5
Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Validation avec l’attribut style et CSS
• Ajouter du style à des champs

• Ajouter du style CSS3 aux input

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Les validations du formulaire coté client et coté serveur.

• Le coté client:
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 les CSS3.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer des formulaires pour collecter des
données et valider les entrées utilisateurs
Valider les entrées utilisateurs
en utilisant JavaScript

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Valider les champs avec JavaScript
• La fonction "setCustomValidity"

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Validation d’un formulaire avec JavaScript en utilisant le bouton « submit ».

• Validation des champs d’un formulaire avec JavaScript.

• Démonstration: Validation des entrées utilisateurs d’un formulaire HTML5

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Communiquer avec une source de
données distante
Envoyer et recevoir des
données avec l'objet
XMLHTTPRequest
Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Initialiser et Instancier XMLHTTPRequest
• Instancier XMLHTTPRequest

• Initialiser XMLHTTPRequest
open (method, URL [, asyncFlag[,
userName [, password]]])

method : "GET" ou "POST" (ou "HEAD")


URL : relative ou absolue
asyncFlag : mode asynchrone ? true ou false
userName : nom d'utilisateur
password : mot de passe

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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 sur les données renvoyées.

• Utilisation de XMLHTTPRequest
Requête de type "GET" ou "HEAD "
Requête de type "POST"

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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)

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• 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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Communiquer avec une source de
données distante
Envoyer et recevoir des
données avec AJAX jQuery

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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( )

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• 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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Styler HTML5 en utilisant CSS3

Appliquer un style
à du texte

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Le style des textes

• Font personnalisé

• Effet sur le texte

• Démonstration: Appliquer un style CSS3 à du texte

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Le style des textes
• Forme générale

• Interprétation
[ ] 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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.
modifier l’interligne par défaut du texte d’un élément,
• line-height
en « aérant » son contenu.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Le style des textes

• Font personnalisé

• Effet sur le texte

• Démonstration: Appliquer un style CSS3 à du texte

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Styler HTML5 en utilisant CSS3

Appliquer un style à
des blocs d'éléments

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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>).

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Nouvelles propriétés de bloc en CSS3
Propriété outline / outline-offset, border-radius, Overflow, Resize
column ,column-gap, column-rule

• Le rendu des éléments avec inline, Block, list-item

• Le positionnement des éléments fixed, absolute, relative et float

• Démonstration: Appliquer un style CSS3 à des blocs d'éléments.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Styler HTML5 en utilisant CSS3

Les sélecteurs CSS3

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Pseudo-classes et pseudo-éléments

• Démonstration: utiliser les sélecteurs Pseudo-classes et pseudo-


éléments CSS3

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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é

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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 et de négation.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Pseudo-classes dynamiques, de lien et de structure

• pseudo-éléments first-line, first-letter, before et after

• Démonstration: utiliser les sélecteurs Pseudo-classes et pseudo-


éléments CSS3

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Styler HTML5 en utilisant CSS3

Améliorer les effets


graphiques à l'aide de CSS3

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


De la géométrie avec CSS

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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)

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• 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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer des objets et des méthodes
en utilisant JavaScript
Ecrire du code
JavaScript bien structuré

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

Exemple1: Exemple2:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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)

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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()

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• 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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer des objets et des méthodes
en utilisant JavaScript
Créer des objets
personnalisés

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Notation littérale et constructeur
Création d’objet simple en JavaScript Utiliser la notation littérale

Utiliser un constructeur

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Attribut prototype/méthode Object.create()
• Prototype est un attribut (propriété) particulier • Object.create() crée un objet qui a un prototype spécifié et
que possèdent toutes les classes JS. Il permet en qui contient éventuellement les propriétés spécifiées.
effet de définir tous les attributs et méthodes de
toutes les instances de la classe.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• 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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer des objets et des méthodes
en utilisant JavaScript
Etendre des objets

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Encapsulation

• Héritage

• Le chainage de prototypes

• Démonstration: manipuler des objets JavaScript .

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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’autre 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:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Héritage
Citoyen
Prop1:
Homme Prop2:
Prop1:nom Prop3:
Prop2:âge
Prop3:profession
Prop4:

Femme
Prop1:nom
Prop2:âge Homme Femme
Prop3:profession Prop1:service_militaire Prop1:congé_maternité
Prop4:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Encapsulation

• Héritage

• Le chainage de prototypes

• Démonstration: manipuler des objets JavaScript .

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer des pages interactives en utilisant
les API HTML5
Interagir avec les fichiers

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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 .
Propriété: Méthodes:

• Error : une erreur durant la lecture du fichier. • abort( ) : Abandonne la lecture du Blob.
• readyState : l'état du FileReader. • readAsArrayBuffer() : Démarre la lecture du Blob.
• Result : le contenu du fichier. • 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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• 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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer des pages interactives en
utilisant les API HTML5

Intégrer du multimédia

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


É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.

Exemple 1: Exemple 2:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Ajout du contrôle vidéo HTML5 une page Web

• Prendre en charge plusieurs formats

• Utiliser JavaScript pour gérer le contrôle vidéo

• Contrôle audio HTML5

• Démonstration: Intégrer du multimédia dans une page HTML5

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer des pages interactives en utilisant
les API HTML5
Réagir à la géolocalisation
du navigateur et au contexte

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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).

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


La méthode getCurrentPosition

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• 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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer des pages interactives en utilisant
les API HTML5
Déboguer et appliquer
un profil à une application Web

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Les interfaces Navigation Timing

• Démonstration: Déboguer et appliquer un profile à une application


Web.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Les interfaces Navigation Timing

• Démonstration: Déboguer et appliquer un profile à une application


Web.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ajouter le support du mode hors ligne aux
applications
Lire et écrire des données
localement

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

• 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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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 :

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• 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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ajouter le support du mode hors ligne aux
applications
Ajouter un support en mode hors ligne
en utilisant le cache d'application

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


l’API du cache d’application
• Les fichiers manifeste sont composés des 3 sections ‘ nom_du_fichier.manifest ’
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:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• 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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Implémentation d’une interface utilisateur
adaptative
Supporter plusieurs
facteurs de forme

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Les facteurs de forme selon le dispositif d’affichage

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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: Tablette ordinateur Smartphone

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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• La nécessité de prendre en charge les différents dispositifs d’affichage

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Implémentation une interface utilisateur
adaptative
Créer une interface
utilisateur adaptative

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Le type CSS media

• Les requêtes de media

• Démonstration: Créer une interface utilisateur adaptative

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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 :

Types de médias : Exemple 2 :

• 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é.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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
• …

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Le type CSS media

• Les requêtes de media

• Démonstration: Créer une interface utilisateur adaptative

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer des graphiques avancés
Créer des graphiques interactifs
en utilisant les Graphiques
Vectoriels Adaptables

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• SVG ?

• Eléments et attributs

• Les remplissages

• Démonstration: Créer des graphiques interactifs en utilisant les Graphiques


Vectoriels Adaptables

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Eléments et attributs
• Les éléments de base réalisables avec le svg sont :

Line, rect, circle ,ellipse, polygon, polyline https://developer.mozilla.org/fr/docs/SVG/Element

• Les attributs ou propriétés :

stroke, width, height, x, y https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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)

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• SVG ?

• Eléments et attributs

• Les remplissages

• Démonstration: Créer des graphiques interactifs en utilisant les Graphiques


Vectoriels Adaptables

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer des graphiques avancés
Dessiner des graphiques par
programmation en utilisant
un Canvas

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Canvas ?

• Le rectangle

• Les lignes

• Les courbes, cercle et arc

• Démonstration: Dessiner des graphiques par programmation en


utilisant un Canvas.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Les lignes
Les lignes: dessiner un triangle

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Canvas ?

• Le rectangle

• Les lignes

• Les courbes, cercle et arc

• Démonstration: Dessiner des graphiques par programmation en


utilisant un Canvas

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Animer l'interface utilisateur
Appliquer des transitions CSS

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Les transitions

• Évènements DOM de transitions

• Démonstration: Appliquer des transitions CSS

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


É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:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Les transitions

• Événements DOM de transitions

• Démonstration: Appliquer des transitions CSS

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Animer l'interface utilisateur
Les éléments de transformations

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Transformation 2D

• Transformation 3D

• Démonstration: appliquer les éléments de transformations.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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 :

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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);

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Transformation 3D
transform : rotate(30deg) transform : rotate3d(5, 5.0, 3.0, 30deg)

Le 3D est disponible avec :


translate3d(x, y, z), scale3d(x, y, z), rotate3d(x, y, z)

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Transformation 2D

• Transformation 3D

• Démonstration: appliquer les éléments de transformations.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Animer l'interface utilisateur

Appliquer des animations


CSS Key-frame

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Les propriétés CSS d’animation
• animation un raccourci pour définir les propriétés ci- Exemple:
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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


É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 .

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Les animations CSS Key-frame

• Les propriétés CSS d’animation

• Évènements d’animation

• Démonstration: Appliquer des animations CSS Key-frame

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


La communication temps-réel via les Web Sockets

Introduction
aux Web Sockets

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• La Communication Temps Réel

• WebSocket

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• La Communication Temps Réel

• WebSocket

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


La communication temps-réel via les Web Sockets

Envoyer et recevoir des données


en utilisant les Web Sockets

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Créer un Websocket

• Méthodes et évènements

• Récupérer un message et gestion d’erreurs

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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 :

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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'); }

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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');}

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Créer un Websocket

• Méthodes et évènements

• Récupérer message et gestion erreur

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer un processus Web Worker

Introduction aux Web


Workers

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Plan
• Programmation parallèle

• WebWorkers

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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 .

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• Programmation parallèle

• WebWorkers

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer un processus Web Worker
Effectuer des traitements
asynchrones en utilisant
les Web Workers

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Créer un Web Worker dédié
Dans un fichier JavaScript séparé:

• postMessage( ) envoyer des messages au thread principal.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


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.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Web Worker partagé
• Insérer directement du script dans la page web:

• Dans un fichier JavaScript séparé:

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Ce qu’on a couvert
• 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

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Conclusion

Chamseddine OUERHANI
Site : http://www.alphorm.com Développeur et Formateur DOTNET
Blog : http://www.alphorm.com/blog Contact :
Forum : http://www.alphorm.com/forum chamseddine.ouerhani@gmail.com
HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©
Conclusion

Reprendre les exercices pour chaque module

Réaliser ses propres applications web

Rester connecté (site officiel de Microsof,


blog, forum…) pour suivre les évolutions du
Web.

HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©


Bonne chance pour l’examen


HTML5 avec JavaScript et CSS3 (70-480) alphorm.com™©

Vous aimerez peut-être aussi