1 / 175

1. Dynamic HTML

1. Dynamic HTML. De l'HTML au Dynamic HTML. Table des matières. Introduction au D-HTML HTML 4.0 Introduction au DOM Différences actuelles entre IE et NN Le langage JavaScript Feuille de style en cascade Mise en pratique du D-HTML Bibliographie. Dynamic HTML.

malcolm-larsen
Télécharger la présentation

1. Dynamic HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 1. Dynamic HTML De l'HTML au Dynamic HTML D-HTML

  2. Table des matières • Introduction au D-HTML • HTML 4.0 • Introduction au DOM • Différences actuelles entre IE et NN • Le langage JavaScript • Feuille de style en cascade • Mise en pratique du D-HTML • Bibliographie D-HTML

  3. Dynamic HTML • Dynamic HTML est un concept qui regroupent plusieurs technologies permettant de rendre les pages Web plus dynamiques et interactives • Dynamic et HTML : • D-HTML n'est pas une nouvelle version du langage HTML • intégration de plusieurs technologies : • HTML (plutôt la version 4.0) • Cascading Style Sheet (Feuille de style en cascade) : CSS (CSS1, CSS2 et CSS-P) • Document Object Model (Modèle Objet du Document) • Langage script côté client (JavaScript de préférence) • vue de D-HTML différente entre Netscape et Microsoft D-HTML

  4. Dynamic HTML • Notions de base: • une page Web est composée d'éléments • les caractéristiques de ces éléments peuvent être définies dans des règles de style • description d'une hiérarchie d'éléments (objets) qui composent la page et qui est accessible à un langage script (le DOM) • ces objets proposent des attributs et des méthodes • permettre de modifier dynamiquement les attributs des éléments • permettre d'invoquer dynamiquement les méthodes des éléments • permettre d'inter-changer n'importe quel élément avec un autre • concentration maximum des activités côté client avec intervention limitée du serveur D-HTML

  5. Dynamic HTML • Fonctionnalités principales offertes par D-HTML: • utilisation des feuilles de style • accéder directement les éléments d'une page et en modifier les caractéristiques • positionnement exact d'élément avec déplacement possible • superposition des éléments d'un document • modification dynamique des styles, de la présentation des pages • rafraîchissement du contenu d'une page sans interaction avec le serveur • génération dynamique de code HTML • gestion des événements et de la propagation des événements • utilisation de filtre graphique (IE seulement) D-HTML

  6. Exemples d'utilisation de D-HTML • http://localhost/dhtml/ex/ex1/Buttons.htm • http://localhost/dhtml/ex/ex1/3dtitles.htm • http://localhost/dhtml/ex/ex1/zindex.htm • http://localhost/dhtml/ex/ex1/CompatObjects.htm • http://localhost/dhtml/ex/ie4/Jigsaw/Jigsaw.htm • http://localhost/dhtml/ex/ex1/formControl.htm D-HTML

  7. Dynamic HTML • DOM, document object model, modèles des objets qui peuvent composer un document. • Ce DOM est l'interface entre la dynamique de la page et le navigateur. • Composant D-HTML dont la maîtrise est indispensable • le W3C a standardisé un DOM qui n'est pas encore complètement supporté D-HTML

  8. Dynamic HTML • Technologie D-HTML pas encore vraiment arrivée à maturité actuellement. • Gros problèmes de compatibilité entre les navigateurs NS et IE surtout en ce qui concerne les DOM • A ce stade des technologies, l'incompatibilité des DOM complexifie la pratique du D-HTML • Navigator 4.0 : limité à la notion de layer et de positionnement CSS (voir projet GECKO, NN 5.0) • IE 4.0 : plus avancé, plus d'objets manipulables avec support du positionnement CSS (encore plus standard avec IE 5.0) D-HTML

  9. 2. HTML 4.0 La dernière version HTML 4.0 D-HTML

  10. La dernière version HTML 4.0 • nombreuses évolutions par rapport à 3.2 • en avance sur les navigateurs • évolution fondamentale : le langage HTML apporte des éléments de structuration du contenu d'un document et se distance des aspects formatage et présentation des éléments qui relèvent de la mécanique des styles • fonctionnalités pour l'internationalisation, acceptation du jeu de caractères Unicode (ISO 10646), sens d'écriture (selon possibilité offerte par la plate-forme) D-HTML

  11. La dernière version HTML 4.0 • tables : optimisation de l'affichage des tables, utilisation des styles, meilleur support des en-têtes et bas de tableau (TFOOT, THEAD, TBODY) • accessibilité : les styles et d'autres fonctionnalités offrent un meilleur support pour l'accessibilité • formulaire : regroupement de champs en "fieldset", ordre de tabulation, protection de champs, boutons de submit • référence d'objets : le tag "<OBJECT>" doit être privilégié pour l'intégration d'objets dans le document (images, applet, control, …) D-HTML

  12. La dernière version HTML 4.0 • style : HTML 4.0 favorise l'utilisation de style, sans privilégier un langage de définition de style (CSS ou autres), par ex., le tag "<FONT>" n'est plus recommandé. • scripting : support standardisé des "event handler", spécification du langage script se fait par "<SCRIPT TYPE="text/javascript" …>" (LANGUAGE est toujours supporté) • support officiel des frames avec iframe D-HTML

  13. 3. Introduction au DOM D-HTML

  14. Introduction au DOM • Le Document Object Model est l'ensemble des éléments composant la page • Cet ensemble d'éléments est organisé en une hiérarchie d'objets avec l'objet racine, la fenêtre du navigateur (window) ou la frame, contenant un document qui contient lui-même d'autres objets (les éléments HTML, formulaire ou autres) • Chaque objet dispose de propriétés et de méthode D-HTML

  15. Introduction au DOM • Le navigateur expose, par exemple, les objets : • window : la fenêtre du navigateur qui est à la racine des autres éléments contenus dans cette fenêtre • document : le document couramment affiché dans la fenêtre et dont la parent est une window • sa méthode write() permet d'afficher du texte dans le document courant • screen : objet proposant d'accéder au caractéristiques de l'écran • les propriétés width et height permettent de connaître la dimension en pixel de la fenêtre D-HTML

  16. Référencer les objets du DOM (1) • La plupart des objets exposés par le navigateur via le DOM sont accessibles à partir de langages scripts tels que JavaScript ou VBScript. • Un script accède à un objet en spécifiant le chemin d'accès dans la hiérarchie suivi du nom de la propriété ou de la méthode • Exemple: window.document.write("Hello") // méthode de l'objet document, window est optionnel screen.width // propriété de l'objet screen D-HTML

  17. Référencer les objets du DOM (2) • L'attribut NAME ou ID des balises HTML permettent également d'accéder à un élément : (en général, priviliégiez ID) <DIV ID="madiv" …> <FORM NAME="maform" …> <INPUT … NAME="nom" …> … document.all.madiv.style.color // IE document.madiv.color // NN document.maform.nom.value // accès à la valeur d'un champ texte d'un formulaire D-HTML

  18. Les éléments d'un document <TABLE> <TR> <TD>Cellule 1</TD> <TD>Cellule 2</TD> </TR> <TR> <TD>Cellule 3</TD> <TD>Cellule 4</TD> </TR> </TABLE> D-HTML

  19. Les éléments d'un document • Tous les balises HTML ouvrantes, fermantes et leur contenu sont considérés comme des éléments ou objets. • Les éléments sont organisés en une structure hiérarchique représentant la relation de contenant / contenu. D-HTML

  20. DOM de Microsoft D-HTML

  21. DOM de Microsoft D-HTML

  22. DOM de Microsoft • Tous les éléments d'un document sont indexés: • document.all[0].tagName donne "HTML" • http://localhost/dhtml/ex/ex1/exdom0.htm • Quatre propriétés pour référencer le contenu d'un élément: • outerHTML : l'élément HTML complet y compris les tags HTML • innerHTML : le contenu de l'élément HTML • outerText : le contenu texte (diffère pour l'écriture de contenu) • innerText : le contenu texte D-HTML

  23. Exemples d'accès au DOM IE <HTML> <HEAD> <TITLE>Essai d'accès au DOM IE</TITLE> </HEAD> <SCRIPT LANGUAGE="JavaScript"> function showEle() { var tagList, i; tagList = ""; for (i=0; i < document.all.length; i++) { tagList += (document.all(i).tagName + " - " + document.all(i).id + "\n"); } alert(tagList); } function changeEle() { document.all.cell1.innerText = "Cell 1"; } </SCRIPT> D-HTML

  24. Exemples d'accès au DOM IE <BODY> <TABLE ID="theTable"> <TR> <TD ID="cell1">Cellule 1</TD> <TD>Cellule 2</TD> </TR> <TR> <TD>Cellule 3</TD> <TD>Cellule 4</TD> </TR> </TABLE> <FORM> <INPUT TYPE=BUTTON onClick="showEle();" VALUE="Affichage des Elements"> <INPUT TYPE=BUTTON onClick="changeEle();" VALUE="Modifier Element"> </FORM> </BODY> </HTML> D-HTML

  25. DOM de Netscape D-HTML

  26. Les DOM de Netscape et MS • Depuis la version de IE 4.0, le DOM de Microsoft expose tous les éléments et sont accessible dynamiquement via script (IE 5.0 offre encore plus de possibilités) • Netscape 4.0 expose moins d'éléments et supporte moins de fonctionnalités dynamiques. (voir NN 5 et projet GECKO) D-HTML

  27. 4. Différences actuelles entre NN et IE • Nestcape et Microsoft, dans la version 4.x de leur navigateur ont implémenté leur propre vue des technologies de D-HTML • A la fois pour des raisons de dates de disponibilité et de stratégie • Le futur devrait converger vers les standards avec IE 5 et Gecko/NN 5.0 D-HTML

  28. D-HTML et NN 4.x • CSS1 en majorité supporté • Peu de support réellement dynamique pour le changement des règles de style, NN ne réaffiche pas dynamiquement un élément dont le style à changer sans rafraichissement complet de la page • Pour dynamique, il faut utiliser la technique de 'hiding' pour masquer des éléments et ensuite les rendre à nouveau visible (par ex. : avec attribut CSS 'display : none') (voir exemples) D-HTML

  29. D-HTML et NN 4.x • Possibilité de spécifier les règles de style en JavaScript: <STYLE TYPE="text/javascript"> tags.H1.marginleft = 20 </STYLE> • Support de CSS-P pour les éléments de type "conteneurs": <STYLE TYPE="text/css"> #item1 {position:absolute; top:50px; left:100px; } </STYLE> … <DIV ID="item1><IMG ….></DIV> D-HTML

  30. D-HTML et NN 4.x • Technique de layer unique à NN, utilisé pour créer, au sein d'un document, des conteneurs de document • Un layer se superpose au document de base • Position, contenu et visibilité de chaque layer indépendant des autres • La fonction JS layer() permet de créer une nouvelle couche dynamiquement • Contenu de layer exprimé en HTML (une page en tant que tel). Un layer dispose de son objet 'document' propre. D-HTML

  31. D-HTML et NN 4.x • Possibilités en NN 4 de changement dynamique du contenu sans rechargement de page: • swap d'image • changement du contenu d'un layer • changement position d'un élément • changement de la visibilité d'un élément • Captures d'événement avec propagation ou non • Polices de caractères téléchargeables (bitstream Truedoc) D-HTML

  32. D-HTML et IE 4.x • IE4 offre des fonctionnalités de modification dynamique du contenu et des attributs de style d'éléments avec réaffichage automatique sans rechargement de page • Tous les éléments HTML du document sont accessibles et modifiables via script avec réaffichage • IE4 implémente CSS1 (+- 100%) et quelques aspects de CSS2 • Support de CSS-P pour positionnement du contenu ou d'élément D-HTML

  33. D-HTML et IE 4.x • Chaque élément dispose de ces 'event handler' (même les éléments sans interactivité directe avec l'utilisateur) • Les événements sont propagés de l'élément vers les éléments contenant avec capture possible et non-propagation • Attribut de style 'FILTER': • pour rendu graphique d'élément • pour effet de transition lorsqu'un élément devient visible • Polices de caractères téléchargeables (TrueType) D-HTML

  34. Stratégie pour portabilité plate-forme • Redirection vers page non-DHTML ou page spécifique à type et version de navigateur • soit à partir de servlet (CGI ou autres) • soit à partir de scripplet • Adaptation du code à l'intérieur de la page selon le navigateur • Génération du code D-HTML côté serveur selon navigateur • Développer des collections de fonctions génériques adaptées aux versions des navigateurs • Utilisation du commun dénominateur • voir exemple D-HTML

  35. 5. Le langage JavaScript D-HTML

  36. Javascript • JavaScript est un langage script destiné, au départ, à développer des scripplets s'exécutant dans des pages Web • Offre de nombreuses possibilités d'extensions ainsi que des contrôles sur les formulaires, d'enrichissement de l'interface utilisateur, gestion des événements, par exemple réagir à des événements tels qu'un changement de focalisation ou un clic de souris. • JavaScript permet des traitements qui s'exécutent du côté du client (le navigateur) sans intervention du serveur. D-HTML

  37. Javascript • JavaScript n'est pas une variante de Java. • JavaScript a été inventé par Netscape. • Langage script utile pour écrire des séquences d'instructions courtes et fonctionnellement limitées. • JavaScript nécessite un environnement hôte (le navigateur par exemple). • Le code est embarqué dans la page HTML, est interprété et exécuté par le navigateur compatible. • Les navigateurs offrent une collection d'objets prédéfinis exposant l'environnement d'exécution. D-HTML

  38. Les versions de JavaScript • JavaScript 1.0 supporté par Navigator 2.0 • JScript (version MS de JavaScript 1.0) par MS IE 3.0 (partiel et instable) • JavaScript 1.1 supporté par Navigator 3.0 • JavaScript 1.1 rendu publique par Netscape et standardisé par ECMA • JScript 3.0 supporté par IE 4.0 annoncé comme respectant le standard • JavaScript 1.2 supporté par Navigator 4 (pas identique à ECMA, apporte de nombreuses améliorations) • Challenge d'écrire du code compatible pour les différents navigateurs. D-HTML

  39. Les outils pour JavaScript • Editeur de texte • Outil de composition de pages HTML (Dreamweaver de Macromédia, FrontPage de MS, autres) • ScriptEase de Nombas • JavaScript côté serveur avec Enterprise Server de Netscape, IIS de MS, IntraBuilder de Inprise D-HTML

  40. Javascript <HTML> <HEAD><TITLE>Mon premier script en JavaScript!</ TITLE > </HEAD> <BODY> <BR>Ceci est un document HTML classique.<BR> <SCRIPT LANGUAGE="JavaScript"> document.write("Ceci provient de JavaScript!") </SCRIPT> <BR> </BODY> </HTML> D-HTML

  41. Première scripplet • La balise <SCRIPT> permet d'inclure à n'importe quel endroit du code JavaScript • L'attribut LANGUAGE permet de spécifier le language (utiles pour les versions, voir l'attribut TYPE également) • La ligne de code invoque la méthode "write()" de l'objet "document" de la "window" courante. • Ces objets et méthodes font partie du DOM et sont connues de l'environnement hôte qui est le navigateur. D-HTML

  42. JavaScript embarqué • Le code JavaScript est généralement embarqué dans une page • Possible d'intégrer autant de séquences de code que nécessaires dans une même page HTML <script language="JavaScript"> <!-- document.write("Bonjour le monde!"); //--> </script> • L'attribut "language" est optionnel et défaut est défini par les paramètres du navigateur. Attribut utile pour indiquer la version du langage. • Les commentaires HTML <!-- … //--> évitent que le code s'affiche dans des navigateurs ne supportant pas le JavaScript.(les commentaires de JS, //, évitent l'interprétation de -->) D-HTML

  43. Code JavaScript dans fichier externe • L'attribut "SRC" permet de spécifier un fichier externe contenant le code, qui est une simple fichier texte contenant du code JavaScript : <script src="fonctutil.js"> </script> • L'attribut "LANGUAGE" n'est pas nécessaire. • Attribut supportée par Netscape >= 3 et MS IE >= 3.02 • Serveur HTTP doit être configuré avec un type MIME "application/x-javascript" pour les fichiers avec extension js. • voir exemple exjs0a.htm D-HTML

  44. Architecture de l'environnement du langage • Définition selon le standard ECMA • Le langage et les objets natifs : ce sont les fonctionnalités propres du langage ECMAScript • Spécificités du constructeur : ajoutes et améliorations du concepteur de l'environnement hôte liées au langage JavaScript mais non standard • Objets hôtes avec méthodes et propriétés : collections des objets permettant d'interagir à partir du langage avec l'environnement hôte (pour entrées-sorties, etc.) D-HTML

  45. Grammaire JavaScript • Le grammaire JavaScript comme d'autres langages de programmation est composée des éléments suivants: • variables (var total) • opérateurs, expressions (total < 200, stotal = total + 10) • instructions (if (total > 200) { … ; }) • objets (entités caractérisées par propriétés (attributs) et comportement) • fonctions (ensemble d'instructions regroupées) D-HTML

  46. Variable JavaScript (1) • Une variable est caractérisée par un nom, un type et une valeur • Nom : débute par lettre ou _, suivi par lettres et chiffres • JavaScript est sensible majuscule, minuscule • Variable globale ou locale D-HTML

  47. Variable JavaScript (1) • Variable globale définie à la première assignation n'importe où dans le code et accessible partout dans la page : nouvVar = 5; leNom = "Arthur"; • Variable locale à une fonction avec le mot "var": function maFonction() { var locVar = 1; nouvVar = 10; // modif de la variable globale } D-HTML

  48. Type de données • Types reconnus en JavaScript: • number = entier (0 ou 0x) ou réel • boolean = True ou False • string = chaîne de caractère entre ' ou '' • object = objets (monObj = new Object();) • null = pas de valeur • undefined = créé mais non assigné D-HTML

  49. Type de données • JavaScript n'est pas un langage fortement typé, il n'est pas nécessaire de spécifier le type de la variable à la déclaration et le type est converti à l'exécution du script. • Selon le type certaines opérations sont possibles ou non: "5" + "10" donne "510" 5 + 10 donne 15 5 + "10" donne "510" (conversion de 5 en string) "ab" * "cd" n'est pas supporté D-HTML

  50. Opérateurs JavaScript (1) • Les opérateurs sont: • arithmétique + - * / % ++ -- - • comparaison == != > >= < <= • booléen && || ! >= < <= • sur chaînes de caractère "abc" + "def" • assignation : = += -= *= /= &= |= D-HTML

More Related