La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.

Présentations similaires


Présentation au sujet: "D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante."— Transcription de la présentation:

1 D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.

2 DOM, cela veut dire : Document : C’est tout simplement la page HTML vue par l’utilisateur. Ne pas confondre avec le fichier HTML qui a été chargé. Objet : C’est le concept informatique d’objet. Il est nommé ainsi par analogie avec les objets du monde réel. Modèle : Représentation reproduisant les caractéristiques et comportements de façon appréhendable par l’ordinateur.

3 DOM, une interprétation : C’est une représentation sous forme d’objet informatique du code HTML tel qu’il a été compris et affiché par le navigateur. Pouvoir manipuler cette représentation, c’est pouvoir agir sur l’affichage de la page. Ce qui est possible, est au plus ce que permet le langage HTML. Ce qui limite, c’est la qualité du modèle.

4 L’Objet : L’outil de modélisation La représentation de la page est construite en la décomposant en Objets génériques. C’est une utilisation de la programmation orientée Objet, il est utile de comprendre ce que recouvre le concept d’Objet informatique. Utiliser le DOM, ce n’est pas faire de la programmation orientée Objet. C’est employer le modèle Objet fournit par le navigateur.

5 Ce qu’est un Objet informatique Le concept d’Objet a été nommé ainsi par analogie avec les objets du monde réel. Un Objet a des :  Propriétés : son état statique caractéristique. Ex : Objet téléphone Propriété allumé allumé permet de savoir si le téléphone est allumé, en assignant une valeur à allumé on peut changer son état  Méthodes : comportement dynamique, traitements qu’il peut effectuer. Ex: Objet téléphone Méthodes appeler() appeler( ) permet d’effectuer un appel

6 Des notions de programmation Objet La programmation orientée Objet c’est utiliser le concept d’Objet pour structurer les programmes. Un objet en informatique c’est la réunion :  De variables (Propriétés)  Et de Code (Méthodes) Dans un ensemble cohérent et opaque vu de l’extérieur (Encapsulation)  Ex : vous vous moquer de savoir comment fonctionne votre téléphone

7 Programmation Objet : La généricité Tous les téléphones ont les mêmes fonctionnalités (propriétés, méthodes), il est inutile de les définir pour chacun. On parle de Classe d’Objet, on y définit l’ensemble des propriétés et méthodes de ces objets. Un Objet un_téléphone manipulé par le programme sera une Instance de la Classe téléphone  Le téléphone_de_Paul sera représenté par une Instance de la Classe. Il aura la Propriété d’être rouge.  Le téléphone_de_Jean sera représenté par une autre Instance de la Classe. Il aura la Propriété d’être vert.

8 Programmation Objet : tout un monde Il existe d’autres concepts en programmation orientée Objet notamment :  L’Héritage : Les téléphones portables et fixes ont beaucoup de points communs, on peut les définir dans la Classe téléphone (Parent). Ce qui est propre au téléphone fixe sera définit dans la Classe téléphone_fixe (Enfant), et ce qui est propre au téléphone mobile sera définit dans la Classe téléphone_mobile (Enfant).  Le Polymorphisme : on utilise un téléphone_fixe comme un téléphone_mobile.

9 Les concepts Objets utiles en JavaScript On se limitera aux Objets fournit par le navigateur :  On modifiera ces Objets en lisant ou assignant les valeurs à leurs Propriétés.  On utilisera ces objets en appelant leurs Méthodes. Ces Objets seront :  Les Objets issus de la page HTML affichée (Par le biais de l’objet document en général).  De Nouveaux Objets que l’on aura créés par l’instanciation d’une Classe (l’opérateur new de JavaScript rempli cette fonction)

10 Exemples d’objets JavaScript : document.write(' dans la page ! '); Appelle la méthode write de l’objet document avec comme paramètre ' dans la page ! ' : Action d’écrire dans la page. alert(document.location); Lit la propriété location de l’objet document et l’affiche dans un dialogue ( alert ) document.location='file:///C:/'; Modifie la page affichée en mettant la valeur 'file:///C:/‘ dans la propriété location de l’objet document

11 Exemples d’objets JavaScript : Changer une image puce_rouge

12 Exemples d’objets JavaScript : Les Objet de Type Image rslt = new Image(); L’opérateur new crée une Instance de la Classe Image et l’affecte à la variable rslt qui sera ainsi un Objet de Classe(Type) Image. Rq: Image() est ce qu’on appelle un Constructeur.

13 Exemples d’objets JavaScript : Les Objet de Type Image rslt.src = 'images/puce_rouge_01-over.gif'; On affecte la valeur 'images/puce_rouge_01-over.gif‘ à la propriété src de l’Objet rslt

14 Exemples d’objets JavaScript : Les Objet de Type Image document.images['puce_rouge_01'].src = 'images/puce_rouge_01-over.gif'; L’Objet document a une propriété images qui est un tableau référençant tous les Objets de Classe(Type) Image de la page

15 Rq : sur le modèle Objet de JavaScript Image() est ce qu’on appelle un Constructeur Son rôle est d’initialiser l’Objet avant son utilisation. En JavaScript c’est tout simplement une fonction. C’est elle qui définit également la Classe Il n’existe pas de distinction entre Classe et Type car les variables (et Objets) ne sont pas typées. Pour les mêmes raisons le polymorphisme est implicite du fait de l’absence de Type.

16 Rq : sur le modèle Objet de JavaScript Les Objets sont en fait des tableaux associatifs (dictionnaire) d’où la dualité : notation pointée et adresse entre crochets. Ainsi la notion de Classe est facultative, JavaScript n’est pas un langage Objet. Il ne fait qu’emprunter la notation pointée courante dans un langage Objet. Le seul intérêt est d’utiliser les Objets du navigateur.

17 Le DOM ne s’est pas fait en un jour L’évolution vers le concept de DOM s’est fait en trois grandes étapes :  Les débuts du JavaScript  L’apparition des « calques »  Le vrai modèle de document

18 Les débuts du DOM Dés le début JavaScript a incorporé des Objets représentant différents éléments, on retiendra surtout la possibilité de manipuler les éléments :  window : la fenêtre du navigateur  document : le document affiché form : formulaire image : image Des possibilités limitées définies principalement par leurs simplicités, aucune ne change profondément l’affichage de la page.

19 Les débuts du DOM : Les collections Avec les premiers navigateurs JavaScript, on n’a accès qu’a un nombre limité d’éléments, les formulaires et les images principalement. On y accède par le biais des collections : Ce sont des Propriétés de l’objet document, qui contiennent un tableau regroupant l’ensemble des éléments HTML du type correspondant  document.images[] Toutes les images de la page (balise IMG)  document.forms[] Tous les formulaires de la page (balise FORM)

20 Les collections et l’attribut name Les collections sont un tableau donnant accès à l’ensemble des éléments d’un type donnés.  document.images[0] est la première image de la page  document.images[1] est la seconde image de la page  … En utilisant l’attribut name de la balise, on peut retrouver directement l’élément.  Code HTML :  Code JavaScript : document.images['puce_rouge_01']

21 La guerre des navigateurs Avec la sortie des navigateurs de quatrième génération, Netscape et Microsoft se livrèrent une concurrence féroce. L’enjeu était la domination du marché avec pour argument des pages plus dynamiques, plus attrayantes, le Dynamic HTML. Chacun proposa sa propre solution, totalement incompatible avec celle de l’autre.  Netscape : Les Layers  Microsoft : DHTML Object Model Aujourd'hui on connaît la fin de l’histoire, Microsoft a gagné.

22 Netscape : Les Layers (calques) Le modèle choisi par Netscape était très simple, les calques sont considérés un peu comme des documents indépendants (Mais dans le même fichier). Il sont déclarés par la balise On peut les superposer, déplacer, cacher et redimensionner. On y accède par la collection : document.layers[] On utilise l’attribut id pour nommer les éléments (comme pour name les autres collections)

23 Netscape : Le perdant Le concept de layer n’était pas très novateur, il offre des possibilités assez limitées. C’est un ajout de plus au code HTML, qui plus est totalement propriétaire. Netscape a été incapable de sortir un navigateur de cinquième génération. Netscape a perdu la guerre commerciale Netscape a placé sa technologie en Open Source pour lui donner un avenir (Mozilla) Les Layers sont tombés dans l’oubli, Mozilla le successeur ne les prend pas en charge.

24 L’étape intermédiaire du DOM C’est Microsoft qui a promulgué le concept de Modèle Objet de Documents avec IE 4.0 Il a introduit la possibilité de manipuler la quasi- totalité du document. Ainsi que l’exploitation du modèle Objet pour regrouper les propriétés et méthodes communes. Mais il l’a fait de façon propriétaire. Il a été employé le terme de DOM à son sujet, mais aujourd'hui on y fait référence par : DHTML Object Model C’est Internet Explorer 4.0 qui a "inventé" le DHTML

25 DHTML Object Model Le modèle de IE4 possède beaucoup de similitudes avec le DOM tel qu’il a été standardisé. document.all[] permet d’accéder à l’ensemble du document (tous les éléments HTML). On utilise l’attribut id pour nommer les éléments. Il est possible de changer dynamiquement le contenu de la page. Il n’est supporté que par Microsoft qui le garde pour des raisons de compatibilité ascendante. IE5 supporte assez bien le vrai DOM standard

26 Le DOM, le vrai ! C’est un standard fixé par le W3C, qui évolue Le Modèle Objet de Document est une interface de programmation indépendante de la plateforme et du langage. Elle permet aux programmes et scripts d’accéder dynamiquement et de mettre à jour le contenu, la structure et les styles d’un document. Il a été développé pour permettre la portabilité de scripts JavaScript et de programmes Java d'un navigateur Web à l'autre.

27 Rapport entre DOM et XML Langage de balisage extensible XML est un méta langage c’est-à-dire qu’il permet de définir des langages. XML utilise le même système de balise que HTML Par exemple : XHTML est la transposition du HTML suivant les spécifications XML. Le but d’XML est de définir un format d’échange d’information aussi universel que le HTML, mais avec une interopérabilité parfaite avec toutes plateformes et langages. Le DOM est un des outils permettant d’employer le XML dans un programme.

28 Ce que représente le DOM : un document HTML Test Un titre Un texte en gras Ce qu’affiche le navigateur

29 Ce que représente le DOM : une arborescence Test Un titre Un texte en gras Ce que comprend le navigateur

30 Ce que représente le DOM : explication du modèle Le langage HTML est constitué de balises. Une balise ouvrante et une balise fermante forment un élément HTML. Un élément HTML peut contenir d’autre éléments, on les appelle éléments enfants. Il existe un élément particulier l’élément #text Il ne peut pas avoir d’éléments enfants. Il contient simplement du texte littéral. Le DOM modélise tout cela par une arborescence reflétant l’imbrication et les relations parent/enfants

31 Comment accéder au DOM : La racine de l’arborescence C’est l’Objet document qui est le point d’entrée du DOM Il possède une propriété documentElement qui donne accès à l’élément racine d’un document HTML, l’élément HTML. Pour des raisons de compatibilité il est préférable d’utiliser document.documentElement pour accéder à l’élément HTML. … …

32 Comment accéder au DOM : Un ou des éléments particuliers L’Objet document possède des méthodes pour aider à retrouver des éléments HTML texte Un texte en gras Sélectionner l’élément ayant un id particulier document.getElementById('para')

33 Comment accéder au DOM : Un ou des éléments particuliers L’Objet document possède des méthodes pour aider à retrouver des éléments HTML texte Un texte en gras Sélectionner tous les éléments ayant un nom de balise données, retourne un tableau: document.getElementsByTagName('p') Ici on appel le 1 er : document.getElementsByTagName('p')[0]

34 Le modèle Objet du DOM : Structure et éléments Le DOM modélise la structure des éléments du document HTML sous la forme d’une arborescence d’Objets. Les Objets du modèle ont des propriétés et méthodes : Communes pour la structure Distinctes suivant le type d’éléments HTML HEAD BODY H1 P #text

35 Le modèle Objet du DOM : Le concept de la structure arborescente Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY Parent désigne l’élément dans lequel il est inclus Frère désigne les éléments ayant même parent Enfant désigne les éléments dont il est le parent

36 Le concept de la structure arborescente Le parent d’un noeud Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY BODY a pour parent HTML En notation Objet : Mon_BODY.parentNode == Mon_HTML

37 Le concept de la structure arborescente Les enfants d’un noeud Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY BODY a pour enfants : H1PP En notation Objet : Mon_BODY.childNodes[0] Mon_BODY.childNodes[1] Mon_BODY.childNodes[2]

38 Le concept de la structure arborescente Le premier enfant d’un noeud Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY BODY a pour premier enfant H1 En notation Objet : Mon_BODY.firstChild == Mon_H1

39 Le concept de la structure arborescente Le dernier enfant d’un noeud Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY BODY a pour dernier enfant P En notation Objet : Mon_BODY.lastChild == Second_P

40 Le concept de la structure arborescente Le frère « aîné » d’un noeud Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY BODY a pour frère « aîné » HEAD En notation Objet : Mon_BODY.previousSibiling == Mon_HEAD

41 Le concept de la structure arborescente Le frère « cadet » d’un noeud Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY BODY n’a pas de frère «cadet» En notation Objet : Mon_BODY.nextSibiling == undefine

42 Le modèle Objet du DOM : Parcourir la structure arborescente ? Les modélisations des relations parent/enfants dans les Objets du DOM permettent de « parcourir » le document. On peut ainsi « atteindre » n’importe quel objet figurant un élément HTML. Malheureusement tous les navigateurs ne donnent pas la même interprétation d’un document HTML. Ils interprètent différemment les éléments « vides ». On préférera l’usage de : document.getElementById(‘un_id'); Mais comprendre le modèle du DOM est indispensable, si on souhaite pouvoir le manipuler.

43 Le modèle Objet du DOM : Les éléments « vides » Test Un titre Un texte en gras Deux documents HTML Un même affichage

44 Le modèle Objet du DOM : Les éléments « vides » Test Un titre Un texte en gras Beaucoup de nœuds texte sont le résultat d’espaces entre les balises.

45 Le modèle Objet du DOM : Les éléments « vides » Test Un titre Un texte en gras Il est possible d’éviter les éléments vides, mais cela ne facilite pas la lecture du code HTML. XML a été conçut pour parer à de telles ambiguïtés.

46 Le modèle Objet du DOM : Modifier la structure arborescente Le concept parent/enfants est également employé pour permettre de modifier le document. C’est ce qui rend le DOM si intéressant, c’est la possibilité de changer intégralement la structure du document. On réalise cela par le biais d’une interface de programmation simple et adaptée, sans réaliser un programme qui « écrive » du HTML Il est inutile de « recharger » la page pour visualiser les changements, ils sont immédiatement répercutés sur l’affichage.

47 Modifier la structure arborescente Le support d’exemples On utilisera cette page HTML comme support des exemples Elle comporte un bouton pour lancer le code Elle est constituée de divisions imbriquées figurant la structure hiérarchique des éléments, on leur a appliqué un style. Des id ont été placés pour :  Notre cible : id="notre_cible"  2nd enfant : id="un_enfant"

48 Le support d’exemples : La feuille de style Le but est simplement de visualiser aisément la structure du document div { border: 5px solid blue; padding: 5px; margin : 5px; font-size: 30px;}

49 Le support d’exemples : Le code HTML le grand père Le frère aîné Notre cible 1er enfant 2nd enfant 3iem enfant Le frère cadet

50 Le support d’exemples : La représentation du DOM

51 Le support d’exemples : Le code JavaScript Le code JavaScript est appelé par le bouton, il comporte les étapes suivantes :  Placer dans des variables des références à des Objets figurant des éléments de la page en se basant sur leurs id : "notre_cible" "un_enfant".  Construire de nouveaux éléments et garder dans une variable une référence à leurs Objets.  Assembler ces Objets entre eux.  Insérer dans le DOM les Objets ainsi construis. Il ne restera qu’à visualiser le résultat.

52 Le code JavaScript L’appel du code On déclare une fonction dans les entêtes : On appelle cette fonction lorsque l’on clique sur le bouton :

53 Le code JavaScript Obtenir des références sur des éléments On retrouve les éléments par leurs id et l’on place une référence à l’Objet dans une variable. var Notre_Cible = document.getElementById( 'notre_cible'); var Un_Enfant = document.getElementById( 'un_enfant');

54 Le code JavaScript Construire de nouveaux éléments Il existe deux méthodes de l’Objet document suivant le type d’éléments que l’on veut créer Pour un élément correspondant à une Balise var Mon_Visiteur = document.createElement('div'); La représentation correspondant au DOM Le code HTML qui correspondrait L’affichage qu’il donnerait

55 Le code JavaScript Construire de nouveaux éléments Il existe deux méthodes de l’Objet document suivant le type d’éléments que l’on veut créer Pour un élément recevant du texte var Texte_Mon_Visiteur = document.createTextNode('mon visiteur'); La représentation correspondant au DOM Le code HTML qui correspondrait Mon visiteur L’affichage qu’il donnerait

56 Le code JavaScript Assembler les Objets entre eux Assembler les Objets c’est définir leurs relations parent/enfants Pour définir que Texte_Mon_Visiteur est un enfant de Mon_Visiteur : Mon_Visiteur.appendChild(Texte_Mon_Visiteur); La représentation correspondant au DOM Le code HTML qui correspondrait Mon visiteur L’affichage qu’il donnerait Le code HTML qui correspondrait Mon visiteur

57 Le code JavaScript Insérer dans le DOM de la page Les éléments que l’on vient de construire n’apparaissent pas dans la page. Il faut les insérer de la même façon qu’on les a assemblés On va placer Mon_Visiteur comme un enfant de Notre_Cible. On utilisera exactement la même méthode.

58 La variable Notre_Cible référence l’élément qui sera le parent. On va lui ajouter comme enfant. l’élément référencé par Mon_Visiteur Notre_Cible.appendChild( Mon_Visiteur); Le code JavaScript Insérer un élément dans le DOM de la page

59 Le code JavaScript : Le résultat Il suffit d’un appui sur le bouton pour lancer le code et visualiser le résultat L’affichage est immédiat Chercher l’intrus Je ne vous montre pas le code HTML correspondant a cette affichage car il n’a jamais été écrit, ni par vous ni par le navigateur. On a directement manipulé la structure de la page.

60 Le code JavaScript : tout le code Test div { border: 5px solid blue; padding: 5px; margin : 5px; font-size: 30px;} le grand père Le frère aîné Notre cible 1er enfant 2nd enfant 3iem enfant Le frère cadet

61 Le support d’exemples : Variation sur un thème Le modèle DOM offre d’autres possibilités pour modifier le document exemples\ support_exemples\ tous_exemples.html exemples\ support_exemples\ tous_exemples.html

62 Le support d’exemples : Variation sur un thème Placer Mon_Visiteur avant Un_Enfant Notre_Cible.insertBefore( Mon_Visiteur,Un_Enfant);

63 Le support d’exemples : Variation sur un thème Remplace Un_Enfant par Mon_Visiteur Notre_Cible.replaceChild( Mon_Visiteur,Un_Enfant);

64 Le support d’exemples : Variation sur un thème Place Notre_Cible avant le 1er fils de Notre_Cible Notre_Cible.insertBefore( Mon_Visiteur, Notre_Cible.firstChild); Pour ceux qui n’ont pas suivi le 1er fils est en fait l’élément #text

65 Le support d’exemples : Variation sur un thème Place Mon_Visiteur avant le 2nd fils de Notre_Cible Notre_Cible.insertBefore( Mon_Visiteur, Notre_Cible.childNodes[1]); Rappel : childNodes est un tableau, les indices commencent à O, donc 1 désigne le 2nd

66 Le support d’exemples : Variation sur un thème Efface Un_Enfant Notre_Cible.removeChild( Un_Enfant);

67 Le support d’exemples : Variation sur un thème Efface le dernier enfant de Notre_Cible Notre_Cible.removeChild( Notre_Cible.lastChild); Il est possible qu’il faille appuyer 2 fois, car le dernier élément peut être un élément vide !

68 La propriété innerHTML La propriété innerHTML désigne le code HTML présent dans l’élément. Ce n’est pas une fonction standard, mais elle est très pratique Ici on modifie le contenu de Un_Enfant Un_Enfant.innerHTML= 'plusieurs éléments deux lignes';

69 La propriété innerHTML Tout le contenu de Un_Enfant a été remplacé par le code HTML 'plusieurs éléments deux lignes'; On peut remarquer que cela a donné un ensemble d’éléments qui est le résultat de l’analyse de la chaîne de caractères.

70 Le support d’exemples : Variation sur un thème Je vous laisse deviner ce que cela fait. C’est facile à voir, plus dur à comprendre. Un_Enfant.innerHTML= ' ';

71 Conclusion On a vu des manipulations sur un exemple très simple, mais imaginez ce que l’on peut faire en manipulant des tableaux,des images ou simplement du texte sur une page entière. Attention bien vérifier le fonctionnement sur différent navigateur, notamment pour les formulaires et les listes numérotées. Et ce n’est pas fini, reste les manipulations sur les propriétés des éléments, c’est plus simple mais pas moins riche en possibilités.


Télécharger ppt "D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante."

Présentations similaires


Annonces Google