alphorm.com - formation html5, css 3 et javascript (70-480)

162
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 : [email protected]

Upload: alphormcom

Post on 07-Jul-2015

2.637 views

Category:

Technology


11 download

DESCRIPTION

Formation complète ici http://www.alphorm.com/tutoriel/formation-en-ligne-html5-css-3-et-javascript-70-480 Cette vidéo/tutorial fait partie de la Formation HTML5, CSS 3 et JavaScript (70-480). Elle est réalisée par Chamseddine OUERHANI pour http://www.alphorm.com. Vous pouvez retrouver toute la formation ici http://www.alphorm.com/formation/formation-html5-css-3-et-javascript-70-480 Voici le plan de cette vidéo/tutorial : Vue d'ensemble de HTML et CSS Créer et styler une page HTML5 Introduction à JavaScript Créer des formulaires pour collecter des données et valider les entrées utilisateurs Communiquer avec une source de données distante Styler HTML5 en utilisant CSS3         Créer des objets et des méthodes en utilisant JavaScript         Créer des pages interactives en utilisant les API HTML5 Ajouter le support du mode hors ligne aux applications Implémenter une interface utilisateur adaptative     Créer des graphiques avancés         Animer l'interface utilisateur         Implémenter la communication temps-réel avec les Web Sockets         Créer un processus Web Worker         Bonne formation.

TRANSCRIPT

Page 1: 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.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

Présentation du formateur• OUERHANI Chamseddine

• Email: [email protected]

• Développeur et formateur DOTNet

• Expert auditeur en sécurité des systèmes d’information

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

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.

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

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

Le plan de formation1. 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

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

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

La certification MCSD• Cette formation est associée à l’examen 70707070----480480480480

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

� MCSD (Microsoft MCSD (Microsoft MCSD (Microsoft MCSD (Microsoft Certified Solutions Certified Solutions Certified Solutions Certified Solutions Developer) Developer) Developer) Developer) : Web : Web : Web : Web ApplicationsApplicationsApplicationsApplications

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

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

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

La certification

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

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

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

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

Publics concernés• Développeur junior ou senior

• Chef de projet

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

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/applicationessentielle pour une variété de types d'applications et plates-formesmatérielles/logicielles en utilisant JavaScript.

• Les candidats doivent également avoir un minimum de un à deux ansd'expérience dans le développement en HTML dans une modèle deprogrammation axé sur les événements et orienté objet.

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

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/

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

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

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

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

Are you ready ? ☺

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

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

Notions de bases et évolution

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

Vue d’ensemble de HTML et de CSS

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

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

Plan• Historique et évolution

� Internet

� Le Web

� Html

� CSS

� JavaScript

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

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…

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

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-LeeInventeur du World Wide Web

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

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 ensemblede balises pour décrire les données àafficher.

• HTML 1.0 ->HTML 2.0-> HTML 4.0 ->XHTML ->HTML 5

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

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

CSS(Cascading Style Sheets)

• CSS est un langage consacré à la miseen forme des contenus HTML.

• CSS1 -> CSS2 -> CSS2.1 -> CSS3 -> CSS4 en cours d’écriture.

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

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

• Ce n'est que lors de la sortie deNetscape 2.0 que le nom « JavaScript »est apparu.

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

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

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

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

Vue d’ensemble de HTML

Vue d’ensemble de HTML et de CSS

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

Page web statique

Requête HTTP

Réponse HTTP

HTML est un langage de programmation de page web statique

Client Serveur

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

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

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é

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

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

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

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

Vue d'ensemble de CSS

Vue d'ensemble de HTML et CSS

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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:

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

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

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

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

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

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)

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

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:

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

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

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

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

Créer une application Web en utilisant Visual Studio

Vue d'ensemble de HTML et CSS

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

Plan• Présenter Visual Studio

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

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

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

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

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

Créer une page HTML5

Créer et styler une page HTML5

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

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

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

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

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

Appliquer des styles à une page HTML5

Créer et styler une page HTML5

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

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

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

Modèle en boite CSS

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

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)

}

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

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 )

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

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

Vue d'ensemble de JavaScript

Introduction à JavaScript

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

Le langage JavaScriptRequê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.

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

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

Les règles de syntaxe de JavaScript�VariablesVariablesVariablesVariables:

Une variable est un objet repéré par son nom, pouvant contenirdes données, qui pourront être modifiées lors de l'exécution du programme.

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

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

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

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

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

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

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

Instruction simple, conditionnelle et itérative

Forme générale:

Exemple:

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

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

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

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

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

Instruction simple, conditionnelle et itérative

Forme générale:Exemple:

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

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

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

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

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:

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

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

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édiaired’une liste non ordonnée de clés et devaleurs.

• Définition d’un tableau simple par l’intermédiaire d’une liste non ordonnéede valeurs.

• Exemple :

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

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

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

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

Programmer le DOM HTML avec JavaScript

Introduction à JavaScript

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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.

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

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 ouXML(eXtensible Markup Language), sous la forme d’un arbre basé surdes 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 laspécification DOM et le mettre à jour pour HTML5 et CSS3.

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

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

Accès aux objets• Accès directe

� Avec: document.getElementById("")

� Avec document.getElementsByTagName("")

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

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.

• ExempleExempleExempleExemple:

firstChild : premier noeud enfant

lastChild : dernier noeud enfant

childNodes : tous les noeudsenfant (sous forme de tableau)

parentNode : noeud parent

nextSibling : noeud suivant au même niveau (à droite)

previousSibling : noeudprécédent au même niveau (à gauche).

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

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

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:

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

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

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

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é à unepage HTML5 avec JavaScript

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

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

Introduction à JQuery

Introduction à JavaScript

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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.

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

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)

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

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

• FiltresFiltresFiltresFiltres:

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

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:

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

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.

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

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

Vue d'ensemble des formulaires et des éléments de formulaire

Créer des formulaires pour collecter des données et valider les entrées utilisateurs

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

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

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

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.

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

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

Les balises• Zone de texte et libellé

• Zone de mot de passe

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

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

Les balises• Zone de saisie enrichie

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

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

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

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

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

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

Valider les entrées utilisateurs en utilisant les attributs HTML5

Créer des formulaires pour collecter des données et valider les entrées utilisateurs

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

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

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

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

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

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

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.

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

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

Valider les entrées utilisateurs en utilisant JavaScript

Créer des formulaires pour collecter des données et valider les entrées utilisateurs

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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.

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

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

Valider les champs avec JavaScript• La fonction "setCustomValidity"

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

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

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

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

Envoyer et recevoir des données avec l'objet XMLHTTPRequest

Communiquer avec une source de données distante

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

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.

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

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

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.

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

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

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

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

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

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"

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

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

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)

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

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

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

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

Envoyer et recevoir des données avec AJAX jQuery

Communiquer avec une source de données distante

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

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.

• Fonction Fonction Fonction Fonction (facultative) exécutée lorsque l'élément a été mis à jour.

• Charger un élément dans une réponse avec load( )

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

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

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.

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

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

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

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

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

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

Appliquer un style à du texte

Styler HTML5 en utilisant CSS3

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

Le style des textes• 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:

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

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

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

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

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

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.

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

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

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----size size size size règle le corps d'une police.font-size: <taille-absolue> | <taille-relative> | <long> | <pourcent> | inherit

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

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

Le style des textes• fontfontfontfont----stylestylestylestyle pour modifier le style des polices de caractères.

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

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

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

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.

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

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

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.

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

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

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

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

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

Styler HTML5 en utilisant CSS3

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

Plan• Nouvelles propriétés de bloc en CSS3

� Propriété outline outline outline outline

� Présentation et propriété columncolumncolumncolumn

• Le rendu des éléments

• Le positionnement des éléments

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

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

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

Propriété outline• La propriété outlineoutlineoutlineoutline gère le liseré visible autour des éléments d'une page HTML

• La propriété outlineoutlineoutlineoutline----offset offset offset offset gère l’espace entre la bordure de l'élément et son contour.

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

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

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

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

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

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

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

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

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.

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

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.

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

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

Les sélecteurs CSS3

Styler HTML5 en utilisant CSS3

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

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

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

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

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 hrefhrefhrefhreffaisant 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é

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

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

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.

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

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

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.

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

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

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.

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

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

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

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

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

Styler HTML5 en utilisant CSS3

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

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

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.

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

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

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

De la géométrie avec CSS

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

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

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)

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

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

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

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

Ecrire du code JavaScript bien structuré

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

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

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

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

Les fonctionsTroisTroisTroisTrois 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)

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

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

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

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

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:

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

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

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

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

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

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 globales fonctions globales fonctions globales fonctions globales comme parseInt(), parseFloat(), et isNan()

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

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

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

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

Créer des objets personnalisés

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

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

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

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

Notation littérale et constructeur

Utiliser la notation littéraleCréation d’objet simple en JavaScript

Utiliser un constructeur

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

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

Attribut prototype/méthode Object.create()• PrototypePrototypePrototypePrototype est un attribut (propriété) particulier

que possèdent toutes les classes JS. Il permet eneffet de définir tous les attributs et méthodes detoutes les instances de la classe.

• ObjectObjectObjectObject....createcreatecreatecreate()()()() crée un objet qui a un prototype spécifié etqui contient éventuellement les propriétés spécifiées.

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

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

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

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

Etendre des objets

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

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Chamseddine OUERHANIDéveloppeur et Formateur DOTNETContact : [email protected]

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

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

Plan• Encapsulation

• Héritage

• Le chainage de prototypes

• Démonstration: manipuler des objets JavaScript .

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

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

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:

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

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

Héritage

CitoyenProp1: Prop2: Prop3:

HommeProp1:nomProp2:âgeProp3:professionProp4:

FemmeProp1:nomProp2:âgeProp3:professionProp4:

FemmeProp1:congé_maternité

HommeProp1:service_militaire

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

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.

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

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

Le chainage de prototypesLors 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.

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

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 .