420-PK9-SL Programmation WEB JavaScript DOM

Transcription

1 420-PK9-SL Programmation WEB JavaScript DOM

2 Introduction Le lien entre JavaScript et le HTML/CSS est une hiérarchie d instances d objets appelé DOM (Document Object Model). À chaque balise HTML correspond une classe. Ces classes contiennent des attributs et des événements Notez qu il n y a pas de méthodes puisqu il n y a pas d animation en HTML. Cependant, les objets parent de ces instances de balises peuvent avoir des méthodes.

3 Présentation Le principal objet «racine» de cette hiérarchie est l'objet document. Cette racine correspond au document web importé.

4 Les méthodes suivantes vous permettront d adresser les éléments de la page web..getelementbyid("id") Cette méthode retourne l instance de la balise dont l id est passé en paramètre. <div id="id" > Méthodes principales.getelementsbytagname("balise") Cette méthode retourne une table de toutes les occurrences de la balise spécifiée en paramètre. Notez que cette méthode retourne d'habitude plus d'un élément.

5 Méthodes principales Les méthodes suivantes vous seront utiles pour manipuler le code HTML et CSS de vos pages WEB..getElementsByName("nom") Cette méthode retourne une table de toutes les balises identifiées par le nom spécifiée en paramètre..getelementsbyclassname("classe-css") Cette méthode retourne une table de toutes les balises utilisant la classe dont le nom est spécifiée en paramètre..innerhtml Cet attribut existe en lecture et en écriture. Il correspond au contenu situé entre la balise d'ouverture et la balise de fermeture.

6 Notion de nœuds Les éléments de l'hiérarchie représentant notre fichier HTML s'appellent des nœuds. Donc un nœudpeux être : le document lui-même un élément (une balise) un attribut (paramètre) du texte un commentaire

7 Notion de noeuds Si on veux modifier notre document HTML en y ajoutant des balises, on devra avoir recours aux méthodes suivantes :.createelement() var e = document.createelement("li"); va créer l'élément HTML suivant : <li></li>.createtextnode() e.createtextnode("premier élément") va transformer le nœudde l'exemple précédent comme suit : <li>premier élément</li>.setattribute() e.setattribute("class","moncss"); ajoutera l'attribut à la balise comme suit : <li class="moncss" >Premier élément</li>.appendchild() var ee = getelementbyid("liste-a-puce"); ee.appendchild(e); Ajoute l'élément <li>..</li> précédemment créé à un élément dont l'id est "liste-apuce".

8 Notion de noeuds On aurait aussi pu obtenir le même résultat comme ceci : var ee = getelementbyid("liste-a-puce"); ee.innerhtml = " <li class="moncss" >Premier élément</li>"; La première méthode nous fournis un moyen de manipuler l'insertion HTML au niveau du DOM tandis que la seconde permet "d'écrire" le code HTML directement au document (en apparence)

9 Exercice Supposons le code HTML suivant : <div id="message"> </div> Que fait le code JavaScript suivant : var div = document.getelementbyid("message"); div.innerhtml = "Alerte! ";

10 420-PK9-SL Programmation WEB JavaScript Harmonisation du code WEB

11 Méthodes Les navigateurs n'interprètent malheureusement pas nos documents HTML/CSS de la même façon. Pour palier à ces différences, il y a trois façons d'harmoniser la présentation d'un document WEB pour la plupart des navigateurs. La «balise» <doctype > Les éléments de style Le recours au JavaScript.

12 La balise <!doctype > Quand l'html fut inventé, chaque balises avaient un rôle et un sens bien défini et invariable. Le langage balisé s'avéra offrir bien plus en permettant la création de nouvelles balises ou de changer leurs sens. Il n'y eut qu'un pas pour qu'on étende la flexibilité jusqu'à permettre aux utilisateurs de créer leurs propres balises. Ceci se fit par l'entremise d'un document définissant le rôle et la syntaxe de ces balises. Le DTD(Document Type Definition) fit donc son apparition et la fonctionnalité du HTML s'élargit et devint le XML.

13 Donc, plutôt que de modifier les navigateurs à chaque fois qu'on voulait améliorer le HTML, on fit usage du DTDpour déplacer la définition du langage des navigateurs vers un serveur quelconque. Une balise fut donc créée pour permettre aux navigateurs de savoir avec quel DTD(et où le trouver) interpréter le HTML. Le <!doctype > La balise <!doctype > Par défaut, les navigateurs font appel à un DTD par défaut mais le concepteur d'un document web peux imposer un DTD spécifique pour l'interprétation du HTML utilisé. Pour le HTML, plusieurs DTD sont disponibles. <!doctype > est une balise adressant une directive au navigateur (d'où le! au début).

14 La syntaxe de la balise <!doctype > est la suivante : Version pour le HTML5. <!doctype html> HTML4 refusant les éléments périmés et les frames. <!doctypehtml public La balise <doctype > "-//W3C//DTD HTML 4.01//EN" " > HTML4 admettant les éléments périmés mais pas les frames. <!doctypehtml public "-//W3C//DTD HTML 4.01 Transitional//EN" " >

15 La balise <doctype > La syntaxe de la balise <!doctype > est la suivante : HTML4 admettant les éléments périmés et les frames. <!doctypehtml public "-//W3C//DTD HTML 4.01 Frameset//EN" " HTML4 admettant les éléments périmés mais pas les frames. Impose une syntaxe stricte sur les balises. <!doctypehtml public "-//W3C//DTD XHTML 1.0 Strict//EN" "

16 La balise <doctype > La syntaxe de la balise <!doctype > est la suivante : HTML4 admettant les éléments périmés et les frames. Impose une syntaxe stricte sur les balises. <!doctypehtml public "-//W3C//DTD XHTML 1.0 Frameset//EN" " Comme le XHTML Strict mais permettant l'ajout de modules externes. <!doctypehtml public "-//W3C//DTD XHTML 1.1//EN" " >

17 Variances à propos des styles De plus en plus, les navigateurs font «bande à part» en ce qui concerne le CSS. Au début, seul Microsoft faisait faut-bond à la communauté mais il y a une tendance croissante pour les concepteurs de navigateurs de rédiger leurs propre syntaxe pour les styles. Dans tels cas, nous devons effectuer une recherche Googleen utilisant le nom du navigateur fautif suivi du non de style qui ne fonctionne pas dans ce navigateur. Nous trouverons ainsi des documents nous présentant la différence de syntaxe. Une fois la variante de syntaxe trouvée, nous feront appel au comportement du navigateur qui ne fait qu'oblitérer les erreurs et nous ajouterons les différents styles dans notre classe. Ex.: Prenons le style permettant la transparence d'un objet filter:alpha(opacity=40) Microsoft I/E 8 et avant opacity:0.4 IE9, Firefox, Chrome, Opera, and Safari Notre classe s'écrira donc comme suit :.pale40pourcent { opacity:0.4; filter:alpha(opacity=40); }

18 Appel à JavaScript. Habituellement, nous définiront nos fonctions JavaScript dans l'entête HTML. Cependant, si nous faisons face : à un code HTML qui diffère en présentation à une variance dans le positionnement à un style n'ayant pas de contrepartie mais ne se comportant pas de la même façon d'un navigateur à l'autre Il nous faudra réécrire une partie de notre HTML dépendamment du navigateur. Ici que JavaScript entre en jeu.

19 Les méthodes.write() et.writeln()permettent d'injecter du texte ou du code directement dans la page WEB à un endroit bien précis. Cependant, pour accomplir ceci, le code JavaScriptne pourra pas se situer dans le <head> mais plutôt directement imbriqué dans le <body> de notre document WEB. Ex.: Appel à JavaScript. <h1>démo. de variance</h1> <script> if (navigator.appname=="netscape") { document.writeln("<blink>ceci clignotte</blink><br/>") } else </script>

20 Détails à propos des différents DTD offerts pour le HTML Balises disponibles pour chaque version de DTD L'objet navigator La balise <doctype > Référence du DOM chez W3School : Référence pour l'objet noeud