1. Dynamic HTML

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