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.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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
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.
• 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)
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.
• 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.).
• 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:
• 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 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.
• 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.
� 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.
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.
� 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.
[ ][ ][ ][ ] 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.
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.
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.
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
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.
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.
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.
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:
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.
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.