alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)

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

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

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.

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

La certification MCSD
• Cette formation est associée à l’examen 70707070----480480480480
• Cette formation prépare au passage de la certificationla certificationla certificationla certification :
MCSD (MicrosoftMCSD (MicrosoftMCSD (MicrosoftMCSD (Microsoft Certified SolutionsCertified SolutionsCertified SolutionsCertified Solutions Developer)Developer)Developer)Developer) : Web: Web: Web: Web ApplicationsApplicationsApplicationsApplications
MCSDMCSDMCSDMCSD (Microsoft Certified Solutions Developer) :(Microsoft Certified Solutions Developer) :(Microsoft Certified Solutions Developer) :(Microsoft Certified Solutions Developer) : Windows Store Apps UsingWindows Store Apps UsingWindows Store Apps UsingWindows Store Apps Using HTML5HTML5HTML5HTML5

La certification

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 minutes12 heures 32 minutes12 heures 32 minutes12 heures 32 minutes

Publics concernés
• Développeur junior ou senior
• Chef de projet

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.

Les ressources logicielles
• IDE: Visual studio 2012
https://www.microsoft.com/france/visual-studio/
• Bibliothèque: JQuery
http://jquery.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

Are you ready ? ☺

Notions de bases
et évolution
Contact :
Vue d’ensemble de HTML et de CSS

Plan
• Historique et évolution
Internet
Le Web
Html
CSS
JavaScript

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…

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

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

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.

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.

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

Vue d’ensemble
de HTML
Vue d’ensemble de HTML et de CSS
Contact :

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

Page web statique
Requête HTTP
Réponse HTTP
HTML est un langage de programmation de page web statique
Client Serveur

Langage interprété vs langage compilé
Ordinateur
Système
d’exploitation
Navigateur
Compilation Exécution
Interprétation
HTML est un langage de programmation interprété

• 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

Vue d'ensemble de
CSS
Vue d'ensemble de HTML et CSS
Contact :

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

Les règles générales
• Structure de base
Sélecteur {
Porpriété 1: Valeur 1;
Porpriété 2: Valeur 2;
}
Exemple:

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

Méthodes d’application des styles CSS
• Dans l’élément <style>
• Dans un fichier externe
• Dans l’attribut style

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)

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:

• 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

Créer une application Web
en utilisant Visual Studio
Vue d'ensemble de HTML et CSS
Contact :

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

• Présenter Visual Studio
• Explorer les menus principaux
• Créer une première application web avec Visual studio

Créer une page
HTML5
Créer et styler une page HTML5
Contact :

Plan
• Structure d’un document HTML 5
• Démonstration: Créer notre première page HTML5 avec Visual Studio

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

• Nouvelle structure du document HTML5
• Nouvelles balises dans HTML5
Affichage du Texte et des images dans HTML5

Appliquer des styles
à une page HTML5
Créer et styler une page HTML5
Contact :

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

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

Modèle en boite CSS

L’arrière plan et les couleurs
Exemple:
nouveauStyle1 {
background-color: white ;
background-color: #FFFFFF;
background-color: rgb(255,255,255)
}

• Police et arrière plan
• Les couleurs
• Modèle en boite de CSS
Les bordures, l’encadrement (Rembourrage et marge )

Vue d'ensemble
de JavaScript
Introduction à JavaScript
Contact :

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

Le langage JavaScript
Requête HTTP
Réponse HTTPClient Serveur
• JavaScript est un langage de script
qui offre la possibilité d’ajouter de
l’interactivité à une page Web.
Langage interprété
Utilisé pour la programmation
dynamique
Exécuté côté client, ce qui
signifie dans un navigateur Web.
Mais peut aussi être employé
côté serveur.

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

Type de donnée:Type de donnée:Type de donnée:Type de donnée:
Types primitifsTypes primitifsTypes primitifsTypes primitifs: Boolean, Number, String, Null, Undefined
Objets référencésObjets référencésObjets référencésObjets référencés
Conversion:Conversion:Conversion:Conversion:
JavaScript est un langage nonnonnonnon typétypétypétypé. Cela signifie que le type d’une variable est
défini uniquement au moment de l’exécution.

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

Forme générale:
Exemple:

Forme générale: Exemple:

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

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:

Notation Objet issue de JavaScript
• JSONJSONJSONJSON (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 :

• 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

Programmer le DOM
HTML avec JavaScript
Contact :

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

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.

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.

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

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.
• ExempleExempleExempleExemple:
firstChild : premier noeud enfant
lastChild : dernier noeud enfant
childNodes : tous les noeuds
enfant (sous forme de tableau)
parentNode : noeud parent
nextSibling : noeud suivant au
même niveau (à droite)
previousSibling : noeud
précédent au même niveau (à
gauche).

Ajoutd’é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:

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

• 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

Introduction à JQuery
Contact :

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.

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)

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électeursSélecteursSélecteursSélecteurs:
• FiltresFiltresFiltresFiltres:

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

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

Vue d'ensemble
des formulaires et des
éléments de formulaire
Créer des formulaires pour collecter des
Contact :

Plan
• Les formulaires
• Les balises
• Démonstration : manipuler les champs d’un formulaire avec Visual
Studio

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

Les balises
• La balise principale
methodmethodmethodmethod:
• methodmethodmethodmethod="="="="getgetgetget"""" : c'est une méthode est limitée à 255 caractères. Les
informations seront envoyées dans l'adresse de la page (http://…).
• methodmethodmethodmethod="post"="post"="post"="post" : permet d'envoyer un grand nombre d'informations. Les
données saisies dans le formulaire ne transitent pas par la barre
d'adresse.
actionactionactionaction: 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.

Les balises
• Zone de texte et libellé
• Zone de mot de passe

Les balises
• Zone de saisie enrichie

Les balises
Les cases à cocher
Les zones d'options
Les listes déroulantes
Les boutons d'envoi
Regrouper les champs

• 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

Valider les entrées
utilisateurs en utilisant
les attributs HTML5
Contact :

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

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:Coté client:Coté client: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:Côté serveur:Côté serveur: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.

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

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

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

Valider les entrées utilisateurs
en utilisant JavaScript
Contact :

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

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.

Valider les champs avec JavaScript
• La fonction "setCustomValidity"

• 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

Envoyer et recevoir des
données avec l'objet
XMLHTTPRequest
Communiquer avec une source de
données distante
Contact :

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

Objet XMLHttpRequest
• XMLHttpRequest est un objetobjetobjetobjet JavaScriptJavaScriptJavaScriptJavaScript qui a été créé par Microsoft et adopté
par Mozilla. Cet objet permet de faire des requêtesrequêtesrequêtesrequêtes HTTPHTTPHTTPHTTP afin de récupérer des
données au format XMLXMLXMLXML 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.

Objet XMLHttpRequest
• L'objet XMLHttpRequestXMLHttpRequestXMLHttpRequestXMLHttpRequest s'utilise dans une architecture client/serveurclient/serveurclient/serveurclient/serveur.
Le client: Le navigateur avec son moteur JavaScriptJavaScriptJavaScriptJavaScript.
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.
AsynchroneAsynchroneAsynchroneAsynchrone: 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.

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

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

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"

Récupérer le résultat de la requête
• Sous forme de texte
• Sous forme d'un objet DOM XML
• Sous forme de données JSON
texte brut
texte contenant du code HTML
XMLHTTPRequest.responseText
XMLHTTPRequest.responseXML
Serveur : Content-Type: text/xml
texte contenant du code JSON
JSON.parse(XMLHTTPRequest.responseText)

• 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

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

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

JQuery pour envoyer une requête asynchrone
• Requête HTTP GET
• Adresse:Adresse:Adresse:Adresse: le nom de la page web cible.
• DonnéesDonnéesDonnéesDonnées: les données à passer à la page web.
• FonctionFonctionFonctionFonction (facultative) exécutée lorsque l'élément a été mis à jour.
• Charger un élément dans une réponse avec load( )

Utiliser la fonction ajax() de JQuery
• Ajax (AsynchronousAsynchronousAsynchronousAsynchronous JavaScriptJavaScriptJavaScriptJavaScript AndAndAndAnd XMLXMLXMLXML )est une technique qui fait usage des éléments
suivants:
HTMLHTMLHTMLHTML pour l'interface.
CSSCSSCSSCSS (Cascading Style-Sheet) pour la présentation de la page.
JavaScriptJavaScriptJavaScriptJavaScript (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 XMLHttpRequestXMLHttpRequestXMLHttpRequestXMLHttpRequest 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é serveurcoté serveurcoté serveurcoté serveur.

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:Paramètres:Paramètres:Paramètres:
typetypetypetype : type de la requête, GET ou POST
urlurlurlurl : adresse à laquelle la requête doit être envoyée.
datadatadatadata : données à envoyer au serveur.
dataTypedataTypedataTypedataType : type des données qui doivent être retournées par le serveur : xml, html, script,json, text.
successsuccesssuccesssuccess : fonction à appeler si la requête aboutit.
errorerrorerrorerror : fonction à appeler si la requête n'aboutit pas.
timeouttimeouttimeouttimeout : 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.

• 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

Appliquer un style
à du texte
Styler HTML5 en utilisant CSS3
Contact :

Plan
• Le style des textes
• Font personnalisé
• Effet sur le texte
• Démonstration: Appliquer un style CSS3 à du texte

Le style des textes
La meta-propriété CSS fontfontfontfont concerne les propriétés que l'on peut appliquer aux
polices. Elle représente un raccourci pour la définition de fontfontfontfont----stylestylestylestyle, fontfontfontfont----variantvariantvariantvariant,,,, fontfontfontfont----
weightweightweightweight, fontfontfontfont----sizesizesizesize, linelinelineline----heightheightheightheight et fontfontfontfont----familyfamilyfamilyfamily dans une seule règle dans la feuille de style.
Exemple:Exemple:Exemple:Exemple:

Le style des textes
[ ][ ][ ][ ] 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}{A,B}{A,B}{A,B} signifie que ce qui précède survient au moins A fois et au plus B fois.
• Forme générale
• Interprétation

Le style des textes
• La propriété fontfontfontfont----familyfamilyfamilyfamily permet de définir une ou plusieurs familles de polices par
leur nom.
• Forme générale
• Exemple :Exemple :Exemple :Exemple :
• CSS propose cinq familles de polices génériques.

Le style des textes
• La propriété fontfontfontfont----weightweightweightweight décrit avec quel degré de graisse (ou de
« noir ») présenter la police.
• la propriété fontfontfontfont----sizesizesizesize règle le corps d'une police.
font-size: <taille-absolue> | <taille-relative> | <long> | <pourcent> | inherit

Le style des textes
• fontfontfontfont----stylestylestylestyle pour modifier le style des polices de caractères.
• fontfontfontfont----variantvariantvariantvariant les petites capitales ont la forme des lettres majuscules
mais avec la hauteur des minuscules.
• linelinelineline----heightheightheightheight modifier l’interligne par défaut du texte d’un élément,
en « aérant » son contenu.

Font personnalisée
• La règle CSS @font@font@font@font----facefacefaceface 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
• .ttfttfttfttf : True Type Font.
.eoteoteoteot : Embedded Open Type.
.otfotfotfotf : Open Type Font.
.svgsvgsvgsvg : SVG Font.
.woffwoffwoffwoff : Web Open Font Format.

Effet sur le texte
• La propriété CSS hyphenshyphenshyphenshyphens 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 overflowoverflowoverflowoverflow a été conçue pour administrer les débordements d'éléments au
sein d'un bloc
• La propriété CSS wordwordwordword----wrapwrapwrapwrap 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.

• Font personnalisé
• Effet sur le texte
• Démonstration: Appliquer un style CSS3 à du texte

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

Plan
• Nouvelles propriétés de bloc en CSS3
Propriété outlineoutlineoutlineoutline
Présentation et propriété columncolumncolumncolumn
• Le rendu des éléments
• Le positionnement des éléments
• Démonstration: Appliquer un style CSS3 à des blocs
d'éléments.

Propriété outline
• La propriété outlineoutlineoutlineoutline gère le liseré visible autour des éléments d'une page HTML
• La propriété outlineoutlineoutlineoutline----offsetoffsetoffsetoffset gère l’espace entre la bordure de l'élément et son
contour.

Présentation et propriété columncolumncolumncolumn
• borderborderborderborder----radiusradiusradiusradius peut être utilisée pour arrondir les coins des
bordures.
• overflowoverflowoverflowoverflow définie comment le contenu est rogné.
• resizeresizeresizeresize permet de maîtriser le redimensionnement d'un
élément.
• columncolumncolumncolumn----gapgapgapgap pour gérer l'espacement entres les colonnes
• columncolumncolumncolumn----rulerulerulerule pour gérer l'apparence de la séparation des
colonnes

Le rendu des éléments
• Tous les éléments peuvent être classés en grands groupes de mise en page comme les
blocsblocsblocsblocs, les éléments en ligneéléments en ligneéléments en ligneéléments en ligne, les listeslisteslisteslistes ou les tableauxtableauxtableauxtableaux avec les caractéristiquescaractéristiquescaractéristiquescaracté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é displaydisplaydisplaydisplay.
---- nonenonenonenone : l’élément n’est pas affiché et la boîte qui lui est associée n’est pas créée.
- inlineinlineinlineinline : l’élément devient du type en ligne (comme <span> par exemple).
- blockblockblockblock : l’élément devient du type bloc (comme <h1>, <p>, <div>…).
- listlistlistlist----itemitemitemitem : l’élément devient du type liste (équivalent de <li>).

Le positionnement des éléments
• selon le fluxfluxfluxflux normalnormalnormalnormal : par défaut opéré par les navigateurs sans définition de styles particuliers.
• absoluabsoluabsoluabsolu : le bloc généré par l’élément devient complètement indépendant du flux normal.
• relatifrelatifrelatifrelatif: l’élément est déplacé par rapport à la position qu’ils auraient dû occuper.
• fixedfixedfixedfixed : un élément occupe une position fixe dans la fenêtre du navigateur et ne défile pas avec le reste
de la page.
• flottantflottantflottantflottant : 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.

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

Les sélecteurs CSS3
Contact :

Plan
• Pseudo-classes et pseudo-éléments
• Démonstration: utiliser les sélecteurs Pseudo-classes et pseudo-
éléments CSS3

Pseudo-classes et pseudo-éléments
• Les pseudopseudopseudopseudo----classesclassesclassesclasses et les pseudopseudopseudopseudo----élémentsélémentsélémentsé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:Forme générale:Forme générale:Forme générale:
• Exemples de pseudoExemples de pseudoExemples de pseudoExemples de pseudo----classes:classes:classes:classes:
• : visited: visited: visited: visited L'historique du navigateur
• : checked: checked: checked: checked L'état du contenu
• : hover: hover: hover: hover la position du pointeur

Les pseudo-classes
• DynamiquesDynamiquesDynamiquesDynamiques: elles permettent d’attribuer un style à
un élément en fonction des actions effectuées par le
visiteur.
• Applicables aux liensliensliensliens: spécifiques à l’attribut hrefhrefhrefhref
faisant référence à un document externe ou interne.
• E:firstE:firstE:firstE:first----childchildchildchild cible un élément E qui est le premier
enfant de son parent.
• E:lang(frE:lang(frE:lang(frE:lang(fr)))) cible un élément E dans le langage spécifié

Les pseudo-classes
• Les pseudo-classes structurelles
E:lastE:lastE:lastE:last----childchildchildchild E qui est le dernier enfant de son parent.
E:firstE:firstE:firstE:first----ofofofof----typetypetypetype E qui est le premier frère de son type.
E:lastE:lastE:lastE:last----ofofofof----typetypetypetype E qui est le dernier frère de son type.
E:onlyE:onlyE:onlyE:only----childchildchildchild E qui est le seul enfant de son parent.
E:onlyE:onlyE:onlyE:only----ofofofof----typetypetypetype E qui est le seul de son type dans sa fratrie.
E:emptyE:emptyE:emptyE:empty E qui n'a pas d'enfants, ni de texte.

Les pseudo-classes
• E:nthE:nthE:nthE:nth----ofofofof----type(ntype(ntype(ntype(n)))) E qui est le n-ième frère du même type.
• E:nthE:nthE:nthE:nth----lastlastlastlast----ofofofof----type(ntype(ntype(ntype(n)))) E qui est le n-ième frère du même
type, en partant du dernier.
• E:rootE:rootE:rootE:root E qui est la racine du document.
• Pseudo-classe de cible, d'UI et de négation.

Pseudo-éléments
• E:firstE:firstE:firstE:first----linelinelineline cible la première ligne formatée d'un élément E.
• E:firstE:firstE:firstE:first----letterletterletterletter cible la première lettre d'un élément E.
• E:beforeE:beforeE:beforeE:before et E:afterE:afterE:afterE:after ciblent un contenu généré avant ou après un élément E.

• 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

Améliorer les effets
graphiques à l'aide de CSS3
Contact :

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

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.
backgroundbackgroundbackgroundbackground----color , backgroundcolor , backgroundcolor , backgroundcolor , background----image , backgroundimage , backgroundimage , backgroundimage , background----position , backgroundposition , backgroundposition , backgroundposition , background----repeat , backgroundrepeat , backgroundrepeat , backgroundrepeat , background----size , backgroundsize , backgroundsize , backgroundsize , background----attachmentattachmentattachmentattachment
• Les CSS3 apportent une simplification et une souplesse avec les background multiples.

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.
• linearlinearlinearlinear----gradientgradientgradientgradient une fonction qui permet de créer un dégradé linéaire.
- direction du dégradé (optionnel)
- couleur de départ
- couleur de fin
• repeatingrepeatingrepeatingrepeating----linearlinearlinearlinear----gradientgradientgradientgradient linéaire avec répétition.
• radialradialradialradial----gradientgradientgradientgradient 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
• repeatingrepeatingrepeatingrepeating----radialradialradialradial----gradientgradientgradientgradient radial avec répétition.

De la géométrie avec CSS

Les transformations en CSS
• La propriété CSS transformtransformtransformtransform 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.
---- skewskewskewskew( )( )( )( ) incliner un élément horizontalement ou/et verticalement.
---- rotaterotaterotaterotate()()()() tourner un élément. rotate3d(x,y,z,a)
---- scalescalescalescale(),(),(),(), scaleXscaleXscaleXscaleX()()()() etetetet scaleYscaleYscaleYscaleY()()()() modifier l'échelle d'un élément horizontalement ou verticalement. scale3d(x,y,z)
---- translate(),translate(),translate(),translate(), translateXtranslateXtranslateXtranslateX()()()() etetetet translateYtranslateYtranslateYtranslateY()()()() décaler un élément horizontalement ou verticalement.
translate3d(x,y,z)

• 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

Ecrire du code
JavaScript bien structuré
Créer des objets et des méthodes
Contact :

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

Visibilité et portée d’une variable
• Selon l'endroit où une variable est déclarée, celle-ci pourra être accessible ((((visiblevisiblevisiblevisible)))) de partout dans le
script ou bien uniquement dans une portion confinée du code, on parle de « portéeportéeportéeportée » d'une variable.
Exemple1: Exemple2:

Les fonctions
TroisTroisTroisTrois façons pour définir des fonctions:
1. Déclarer une fonction (l'instructionl'instructionl'instructionl'instruction function)
2. Exprimer une fonction (l'opérateurl'opérateurl'opérateurl'opérateur function)
3. Le (constructeurconstructeurconstructeurconstructeur function)

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 IIFEIIFEIIFEIIFE: tout le code du fichier d'extension est encapsulé
dans une IIFE exécutée dès la fin de sa définition.

Espaces de noms (namespace) en JavaScript
• Un namespacenamespacenamespacenamespace 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 1:Exemple 1:Exemple 1: Exemple 2:Exemple 2:Exemple 2:Exemple 2:

Le mode strict
• Le mode strictmode strictmode strictmode 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

Objets singleton et fonctions globales
• Le SingletonSingletonSingletonSingleton 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 globalesfonctions globalesfonctions globalesfonctions globales comme parseInt(), parseFloat(), et isNan()

• 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

Créer des objets
personnalisés
Contact :

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

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

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

• 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

Etendre des objets
Contact :

Plan
• Encapsulation
• Héritage
• Le chainage de prototypes
• Démonstration: manipuler des objets JavaScript .

Encapsulation
• L'encapsulation est un mécanismemécanismemécanismemécanisme qui permet de garantir l'intégritél'intégritél'intégritél'intégrité des données d’un objet. Il consiste à rassembler les données et les
méthodes au sein d'une structurestructurestructurestructure en proposant des servicesservicesservicesservices « fonction » comme uniqueuniqueuniqueunique moyen d’accès.
• Dans d’autre langages de POO, ce concept est concrétisé avec des mots clés comme privateprivateprivateprivate, publicpublicpublicpublic, protectedprotectedprotectedprotected…………
• En JavaScript on utilise d’autres techniques.
• Les fermeturesfermeturesfermeturesfermetures, ou closuresclosuresclosuresclosures 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:

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

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.

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 prototypehéritage de prototypehéritage de prototypehéritage de prototype.

• Encapsulation
• Héritage
• Le chainage de prototypes
• Démonstration: manipuler des objets JavaScript .

alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)

Contenu connexe

Tendances

En vedette

Similaire à alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)

Plus de Alphorm

alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)