js-omfgjgj

7/25/2019 js-omfgjgj

1/62

Javascript et DOM js-dom

Technologies Internet et Education TECFA 3/4/08

Javascript et DOM

Code: js-dom

Originauxurl: http://tecfa.unige.ch/guides/tie/html/js-intro/js-dom.html

url: http://tecfa.unige.ch/guides/tie/pdf/files/js-dom.pdf

Auteurs et version

Daniel K. Schneider

Version: 0.8 (modifi le 3/4/08)

Prrequis

Module technique prcdent: js -intro(Javascript lancienne)

Voir aussi:

Module technique suppl.: php-dom(XML DOM avec PHP 5)

Abstract

Introduction JavaScript et DOM
http://tecfa.unige.ch/guides/tie/html/js-dom/js-dom.htmlhttp://tecfa.unige.ch/guides/tie/html/js-dom/js-dom.htmlhttp://tecfa.unige.ch/guides/tie/pdf/files/js-dom.pdfhttp://tecfa.unige.ch/guides/tie/pdf/files/js-dom.pdfhttp://tecfa.unige.ch/tecfa-people/schneider.htmlhttp://tecfa.unige.ch/guides/tie/html/js-intro/js-intro.htmlhttp://tecfa.unige.ch/guides/tie/html/php-dom/php-dom.htmlhttp://tecfa.unige.ch/guides/tie/html/php-dom/php-dom.htmlhttp://tecfa.unige.ch/tecfa-people/schneider.htmlhttp://tecfa.unige.ch/guides/tie/pdf/files/js-dom.pdfhttp://tecfa.unige.ch/guides/tie/html/js-dom/js-dom.htmlhttp://tecfa.unige.ch/guides/tie/html/js-intro/js-intro.html


2/62

Javascript et DOM - . js-dom-2


Objectifs

Survol des diffrents DOM

HTML DOM de base (simples lectures et manipulations)

A faire: XML-DOM, Ajax

Source & Remerciements

Une grande partie de ces slides est inspire par la Rfrence du DOM Gecko

Je vous conseille galement de travailler avec ce manuel en ligne ...url: http://developer.mozilla.org/en/docs/Gecko_DOM_Reference

url: Traduction franaise: Rfrence du DOM Gecko

Une autre source tait les spcifications W3C et ses traductionsurl: http://www.w3.org/TR/DOM-Level-2-Core/

url: http://www.yoyodesign.org/doc/w3c/dom2-core/Overview.html(traduction)

url: http://www.w3.org/TR/DOM-Level-2-HTML/

url: http://www.yoyodesign.org/doc/w3c/dom2-html/Overview.html.html (traduction)

url: http://www.w3.org/TR/DOM-Level-2-Events/

url: http://www.yoyodesign.org/doc/w3c/dom2-events/Overview.html.html(traduction)url: http://www.w3.org/TR/DOM-Level-2-Style/

url: http://www.yoyodesign.org/doc/w3c/dom2-style/Overview.html(traduction)

Flanagan, David, JavaScript, 5th edition (!), OReilly (la version 4 va plus ou moins)
http://developer.mozilla.org/en/docs/Gecko_DOM_Referencehttp://developer.mozilla.org/en/docs/Gecko_DOM_Referencehttp://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Geckohttp://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Geckohttp://www.w3.org/TR/DOM-Level-2-Core/http://www.yoyodesign.org/doc/w3c/dom2-core/Overview.htmlhttp://www.w3.org/TR/DOM-Level-2-HTML/http://www.yoyodesign.org/doc/w3c/dom2-html/Overview.html.htmlhttp://www.w3.org/TR/DOM-Level-2-Events/http://www.yoyodesign.org/doc/w3c/dom2-events/Overview.html.htmlhttp://www.w3.org/TR/DOM-Level-2-Style/http://www.yoyodesign.org/doc/w3c/dom2-style/Overview.htmlhttp://www.yoyodesign.org/doc/w3c/dom2-style/Overview.htmlhttp://www.w3.org/TR/DOM-Level-2-Style/http://www.yoyodesign.org/doc/w3c/dom2-events/Overview.html.htmlhttp://www.w3.org/TR/DOM-Level-2-Events/http://www.yoyodesign.org/doc/w3c/dom2-html/Overview.html.htmlhttp://www.w3.org/TR/DOM-Level-2-HTML/http://www.yoyodesign.org/doc/w3c/dom2-core/Overview.htmlhttp://www.w3.org/TR/DOM-Level-2-Core/http://developer.mozilla.org/en/docs/Gecko_DOM_Referencehttp://developer.mozilla.org/fr/docs/R%C3%A9f%C3%A9rence_du_DOM_Gecko


3/62

Javascript et DOM - 1. Table des matires dtaille js-dom-3


1. Table des matires dtaille

1. Table des matires dtaille................................................................................32. Introduction.......................................................................................................... 6

2.1 Les DOMs du W3C 7

2.2 Niveaux et familles DOM 8

2.3 Implmentations 92.4 Survol des objets DOM 10

2.5 Le rapport entre DOM et Javascript 11

3. Elments du DOM Core et DOM HTML et ECMAScript bindings ..................... 123.1 Apperu du DOM HTML 13

3.2 Types de donnes 15

4. HTML Window...................................................................................................174.1 Contenu de la fentre 17

Exemple 4-1: Quelques informations sur la fentre 184.2 Popups 19

4.3 Fentres 20

5. Navigator ........................................................................................................... 21Exemple 5-1: Dtection du navigateur et redirection 21Exemple 5-2: Afficher quelques proprits du navigateur 21

6. Noeuds et lments........................................................................................... 226.1 DOM Node et DOM Element 22

6.2 Tests 23

6.3 Informations sur llment 23Exemple 6-1: Test si le premier noeud dun document est un commentaire 24

6.4 Contenu dun lment 25

6.5 Voisinage dun lment 27

6.6 Style 27

6.7 Attributs 28

7. HTML Document ...............................................................................................29


4/62



7.1 Ouvrir, crire (dans) et fermer un document: 29

7.2 Extraction dlments et dattributs 30Exemple 7-1: Extraction dlments avec leur id 30Exemple 7-2: Tree walking: Collectionner les noms dlments 32

7.3 Cration et modification dlments 33Exemple 7-3: Cration dun lment et insertion dans le DOM 33Exemple 7-4: Cration dun lment et insertion dans le DOM 2 34

8. HTML Attribut ....................................................................................................349. HTML Table.......................................................................................................3410. HTML Form et HTML Elements.........................................................................35

Exemple 10-1: Interroger les valeurs dun formulaire 36Exemple 10-2: Transformer le contenu dun formulaire 38

11. HTML Style........................................................................................................ 3911.1Modifier le style CSS " inline" 39

Exemple 11-1: Changer dynamiquement le style dun lment 41

Exemple 11-2: Changer dynamiquement le style (2) 41Exemple 11-3: Bouger un objet 42Exemple 11-4: Animation en continu 43Exemple 11-5: Tree walking: changer de style 44Exemple 11-6: Tree walking: changer de style 45

11.2Utilisation de setAttribute 46

12. HTML Event....................................................................................................... 4712.1Rappel des vnements prdfinis dans Gecko 47

12.2Construire des Event Listeners 49A.Comme nos parents: inline 49B.Informel (marche avec IE et Firefox/Mozilla) 50Exemple 12-1: Event Listener faon rapide 50C.Selon la spcification DOM addEventListener 51Exemple 12-2: Linterface addEventListener 51

12.3Gestion de lvnement 52

13. AJAX ................................................................................................................. 54Exemple 13-1: AJAX request 54


5/62



Exemple 13-2: AJAX request et pseudo XML response 54Exemple 13-3: AJAX request et XML response 54


6/62

Javascript et DOM - 2. Introduction js-dom-6


2. Introduction

Les navigateurs rcents (IE6, Moz1x, Firefox) implmentent un modle plus puissant etsurtout plus propre de ce quon avait appel "DHTML" et qui reposaient sur des technologiesnon-standardises et donc incompatibles. Voici les composantes

1. Le langage "JavaScript", un langage de scripting "objets" et qui actuellement est formalissous lappellation "ECMAScript"

2. Les "Document Object Models" (DOMs), qui dfinissent une srie de mthodes etproprits avec lesquelles on peut interroger et modifier nimporte quel lment dundocument HTML, XML ou encore langages XML comme SVG, X3D, etc.

3. Et bien sr: HTML + CSS


7/62



2.1 Les DOMs du W3C

Principe

1. Un DOM est une description structure dun document HTML ou XML.

2. Un DOM fournit une interface cette structure et qui permet de modifier structure, contenuet style dun document XML ou HTML

En termes techniques:

1. Un DOM est un arbre avec des noeuds

2. Chaque noed est un objet pour lequel il existe des mthodes et des proprits (quon peut"lire" ou modifier).

Ces interfaces (classes, mthodes et proprits) sont implments pour plusieurs langagescomme JavaScript, PhP 5, Java, Python, Perl, ActiveX, ... Dans ce contexte, on parle de"Language bindings".

Les noms des interfaces, classes, mthodes et proprits sont en principes les mmes danstoutes ces implmentations (ce qui facilite la vie).

URL des spcifications:

url: http://www.w3.org/DOM/DOMTR(liste des spcifications)

url: http://www.w3.org/2005/11/Translations/Lists/ListLang-fr.html(liste des traductions)
http://www.w3.org/DOM/DOMTRhttp://www.w3.org/2005/11/Translations/Lists/ListLang-fr.htmlhttp://www.w3.org/2005/11/Translations/Lists/ListLang-fr.htmlhttp://www.w3.org/DOM/DOMTR


8/62



2.2 Niveaux et familles DOM

Les spcifications W3C DOM sont organiss en "niveaux" (Angl. levels)

Level 0 Par "level 0" on entend des implmentations varis non standardiss, comme le modle dobjets

DHTML de Microsoft, le DOM de Netscape 4.x, etc. Certaines fonctions sont toujours indispensables comme par exemple la mthode alert()

Level 1 (octobre 1998) DOM Level 1 Core: dfinit la navigation et la manipulation de documents HTML et XML DOM Level 1 HTML: extensions spcifiques HTML

Level 2 (2001)

6 spcifications, ajoute XML namespace support, filtered views and events. DOM Level 2 Core Specification (tend DOM Level 1 Core) DOM Level 2 Views Specification: DOM Level 2 Events Specification: gestion dvnements (mais pas du clavier) DOM Level 2 Style Specification: lecture et modification du CSS DOM Level 2 Traversal and Range Specification DOM Level 2 HTML Specification: extensions pour HTML

Level 3: contient 6 spcifications DOM Level 3 Core DOM Level 3 Load and Save DOM Level 3 XPath DOM Level 3 Views and Formatting DOM Level 3 Requirements


9/62



DOM Level 3 Validation

Autre langages XML du W3C MathML SVG SMIL

Autres langages X3D, ....

2.3 Implmentations

La plupart des navigateurs modernes (2005 +) offrent des implmentations assez bonnes duDOM Level 1 (mais jamais compltes) et des implmentations lacunaires de DOM Level 2(IE 7 par exemple est plutt mauvais !).

La plupart des navigateurs implmente des extensions propritaires aux DOM 1 et 2 et quilfaut viter si possible, par exemple le "fameux" innerHTML.

Par contre, on est oblig utiliser les implmentations propritaires de lobjet "navigator", caril nexiste pas encore de standards (mais les implmentations se ressemblent).

Jai test la plupart des exemples avec Firefox 1.5 ou 2.x, et IE 7. Certains avec Nokia N73

Tableaux de comparaison:

url: Comparison of layout engines (DOM)(wikipedia)

url: http://www.quirksmode.org/dom/w3c_html.html (Quirksmode)

url: http://www.quirksmode.org/dom/w3c_core.html
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28DOM%29http://www.quirksmode.org/dom/w3c_html.htmlhttp://www.quirksmode.org/dom/w3c_core.htmlhttp://www.quirksmode.org/dom/w3c_core.htmlhttp://www.quirksmode.org/dom/w3c_html.htmlhttp://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28DOM%29


10/62



2.4 Survol des objets DOM

Il existe quelques variables systme qui contiennent les objets les plus importants:

document: accder et manipuler les contenus et styles dune page

window: informations sur les fentre et cration de nouvelles fentres

navigator: informations sur le navigateur (browser).

document

window


11/62



2.5 Le rapport entre DOM et Javascript

Voici un exemple de sensibilisation

url: http://developer.mozilla.org/en/docs/The_DOM_and_JavaScript (source de cet exemple)

ECMAScript (ou "core Javascript") est un langage de programmation

Les liaisons (bindings) pour ECMAScript ajoutent linterface au DOM

Ce qui est en rouge est DOM

var liste_balises_a = document . getEl ementsByTagName( "a") ;f or ( var i = 0; i < liste_balises_a. l engt h ; i ++){ al er t ( "Hr ef of " + i + " - t h el ement i s : " + liste_balises_a[ i ] . hr ef + "\ n") ;

}

Quelques explicationsdocument . getEl ementsByTagName( "a") documentest un objet qui contient tout ce qui se trouve dans un document (page) getElementsByTagName est une mthode qui retourne une liste de noeuds (objets) de tous les

lments ..l i s te_bal i ses_a. l engt h

l engt hest une proprit de la classe NodeList et indique la longeur de ce type de listel i st e_bal i ses_a[ i ] . href hr efest une proprit de linterface HTMLAnchorElement et retourne le contenu de lattribut "href" Alternativement on aurait pu utiliser liste_balises_a.item(1).hrefal er t ( ) est une mthode DOM niveau 0 pour crer un petit popup (non standarde, mais implmente partout)
http://developer.mozilla.org/en/docs/The_DOM_and_JavaScripthttp://developer.mozilla.org/en/docs/The_DOM_and_JavaScript


12/62

Javascript et DOM - 3. Elments du DOM Core et DOM HTML et ECMAScript bindings js-dom-12


3. Elments du DOM Core et DOM HTML et ECMAScript bindings

Ce chapitre documente une partie du DOM core level 2 et DOM-HTML ainsi que leursliaisons avec ECMAScript.

url: http://www.w3.org/TR/DOM-Level-2-Core/(W3C Recommendation 13 November, 2000)

url: http://www.w3.org/TR/DOM-Level-2-HTML/(W3C Recommendation 09 January 2003)

Fonction du DOM Core

La spcification DOM niveau 2 Core se compose d'un jeu d'interfaces de base pour crer etmanipuler la structure et le contenu d'un document.

Ce module Core contient galement des interfaces spcialises rserves XML.

Fonction du DOM HTML La spcification DOM niveau 2 HTML dfinit une interface qui permet aux programmesl'accs et la mise jour dynamique du contenu et de la structure des documents HTML 4 etXHTML 1.x

Rapport entre DOM Core et DOM HTML

Le modle objet de document niveau 2 HTML repose sur le modle objet de document

niveau 2 Core. Autrement dit DOM HTML ajoute juste des fonctionalits spcifiques HTML (il sagitsimplement de simplifier la vie pour le programmeur avec des "shortcuts"...)
http://www.w3.org/TR/DOM-Level-2-Core/http://www.w3.org/TR/DOM-Level-2-HTML/http://www.w3.org/TR/DOM-Level-2-Core/http://www.w3.org/TR/DOM-Level-2-HTML/


13/62



3.1 Apperu du modle objet de document Core

Le modle DOM niveau 2 code dfinit un document XML ou HTML comme hierarchie de noeuds(node) de certains types.

Anatomie du contenu dun arbre DOM dfini par le DOM 2 Core Interface:

Voir aussi 3.2 Types de donnes [15]

Type de noeuds Noeuds enfants

Document Element (un, au maximum), ProcessingInstruction, Comment, DocumentType

(un, au maximum)

DocumentFragment Element, ProcessingInstruction, Comment, Text, CDATASection,

EntityReferenceDocumentType aucun enfant

EntityReference Element, ProcessingInstruction, Comment, Text, CDATASection,

EntityReference

Element Element, Text, Comment, ProcessingInstruction, CDATASection,

EntityReferenceAttr Text, EntityReference

ProcessingInstruction aucun enfantComment aucun enfant

Text aucun enfantCDATASection aucun enfant

Entity Element, ProcessingInstruction, Comment, Text, CDATASection,EntityReference

Notation aucun enfant


14/62



Pour chacun de ces types de noeuds il existe des mthodes et proprits pour accder auxdonnes ou pour les modifier.

Elments supplmentaires:

une interface NodeList pour la gestion de listes ordonnes dobjets Node

(typiquement on a cela aprs avoir fait une requte XPath etc.) une interface NamedNodeMap pour la gestion de noeuds rfrenc par leur nom dattribut,

DOM HTML spcialise cet arbre, c.a.d. il existe des types dobjets pour toutes sortesdlments spcifiques HTML, par exemple:

Document devient HTMLDocument


15/62



3.2 Types de donnes

Tableau des types des donnes DOM Core les plus importants:

Classes

(Interfaces duDOM)

variable

ECMAScript fonction

NodeImplmente les noeuds dun arbre DOM (par exemple document,element, attributes, etc. et qui hritent ses mthodes et proprits)

Document documentL'objet document reprsente un document HTML, XHTML et XML(implmente linterface "Document".

Elementelement se rfre un lment (reprsentation dune balise et de soncontenu).

Element hrite de Node (interface pour les nuds).

NodeList

Une nodeList est un tableau d'lments, comme celui qui est renvoy parla mthode document.getElementsByTagName(). Les lments d'unenodeList sont accessibles par un index de deux manires diffrentes(mais identiques quand au rsultat): list.item(1) list[1]

Attr ibute

Une rfrence un objet qui reprsente un attribut.

Un attribut est extension de Node.

NamedNodeMapUne namedNodeMap est comme un tableau, mais o l'on peut accderaux lments la fois par nom ou par index


16/62



Tableau des types de qqs. donnes du monde HTML-DOM:

Le modle objet de document (DOM) niveau 2 HTML de plusieurs autres spcifications,notamment DOM Core

Suite ....

Dans la suite nous allons plutot prsenter DOM & Javascript par types dobjets (donc

diffrents niveaux et lments de spcifications confondus).

Classesvariable

ECMAScriptfonction

Window

AbstractViewwindow

L'objet window reprsente la fentre elle-mme.Window contient le document et le navigator parmi ses enfantsNote: Window ne fait pas partie du standard W3C !

HTMLDocument

Document

documentwindow.document

Un objet HTMLDocument reprsente la racine de la hirarchie HTML etporte la totalit du contenu. Hormis un accs la hirarchie, il offre aussides mthodes commodes pour obtenir certains ensemblesd'informations du document.

HTMLElementElement

Reprsente un lment HTML

HTML...ElementIl existe des interfaces spcialises pour la plupart des lments HTML(environ 50), par exemple HTMLHeadElement, HTMLButtonElement,...

J i t t DOM 4 HTML Wi d j d 17


17/62

Javascript et DOM - 4. HTML Window js-dom-17


4. HTML Window

Cette interface non-standardise permet de manipuler le conteneur (fentre) dun documentHTML, ou encore de crer des fentres, popups, etc.

Window repose sur linterface AbstractView du DOM Level 2 Views Specification

Un standard est en discussion depuis un bon momenturl: http://www.w3.org/TR/Window/

Note: Il existe pleins dautres proprits et mthodes que celles prsents ci-aprs

4.1 Contenu de la fentre

window.document

retourne lobjet document associ une fentredoc= wi ndow. document ;/ / af f i che l e t i t r e du document cour ant dans l a consol e.wi ndow. dump( doc. t i t l e) ;

window.navigator

retourne une rfrence vers lobjet navigateurnav = wi ndow. navi gat or ;

Note: lobjet navigateur vous permet ensuite de tester lenvironnement de lutilisateural er t ( "Langage de vot r e navi gat eur : " + nav. l anguage) ;Voir 5. Navigator [21]

window.history



18/62



hi st oi r e = wi ndow. hi st or y;al er t ( "Vous avez " + hi st oi r e. i t ems + " dans l hi st or i que de vot r e nav") ;

window.status

lit ou modifie la "status bar" (en bas de la fentre)wi ndow. st at us = " l e si t e l e pl us cool " ;

Le code suivant montre comment changer la status bar lorsque lutilisateur glisse la souris sur un lien marche uniquement si votre Navigateur lautorise ...

onmouseover="st atus= Consul t ezEduTechWi ki ; r et ur n t r ue; ">EduTech Wi ki

window.print()

envoie le contenu de la fentre sur limprimantewi ndow. pr i nt ( ) ;

Exemple 4-1: Quelques informations sur la fentre

url: http://tecfa.unige.ch/guides/js/ex/dom-intro/window.html

http://tecfa.unige.ch/guides/js/ex/dom-intro/window.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-intro/window.html


19/62



4.2 Popups

DOM Level 0 (pas standardis)

window.alert(message)wi ndow. al er t ( "Hel l o t out l e monde") ;

result = window.confirm(message);r esul t = wi ndow. conf i r m( "Voul ez- vous cr aser vot r e di sque dur ?" ) ;i f ( resul t ) al er t ( "ok c est f ai t " ) ;

window.prompt(text, value)

text est le message affichvalue est la valeur par dfaut ( option)r esul t = wi ndow. pr ompt ( "Quel l e est vot r e coul eur pr f r e ?" ) ;

wi ndow. al er t ( "Ah vous ai mez l e " + r esul t ) ;

Note:

Ces methodes sont aussi disponibles sous forme courte, c.a.d. des fonctions:

alert() - confirm() - prompt()

Javascript et DOM 4 HTML Window js dom 20


20/62



4.3 Fentres

window.open(strUrl, strWindowName [, strWindowFeatures]);

cre une nouvelle fentre

url: http://developer.mozilla.org/en/docs/DOM:window.open

strUrl indique lURL de la page ouvrir. Pour obtenir une fentre vide utiliser un string vide:wi ndow. open( "" , " f enet r e vi de") ; StrWindowName: vous devez donner une nom la fentre (un string) StrWindowFeatures vous permet dindiquer une liste de proprits de la fentre

Exemple:wi n = wi ndow. open( "ht t p: / / t ecf a. uni ge. ch/ gui des/ t i e/ t i e. ht ml ", "transparents",

"r esi zabl e=yes, scrol l bar s=yes, st at us=yes, t ool bar =f al se") ;

Note: rflchissez bien avant denlever la toolbar ... les gens dtestent cela.

Attention: les features se trouven dans un seul string !!

Javascript et DOM 5 Navigator js dom 21


21/62

Javascript et DOM - 5. Navigator js-dom-21


5. Navigator

lobjet navigateur se trouve rfrenc dans lobjet fentre

Il sagit de DOM level 0 .... donc pas standardis !

nav = window.navigator

Selon les implmentations, il existe des proprits pour identifier prcisment type denavigateur, plugins installs etc.

Exemple 5-1: Dtection du navigateur et redirection

url: http://tecfa.unige.ch/guides/js/ex/dom-intro/navigator.html

Exemple 5-2: Afficher quelques proprits du navigateur

url: http://tecfa.unige.ch/guides/js/ex/dom-intro/navigator-props.html

Javascript et DOM 6 Noeuds et lments js dom 22
http://tecfa.unige.ch/guides/js/ex/dom-intro/navigator.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-intro/navigator-props.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-intro/navigator-props.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-intro/navigator.html


22/62

Javascript et DOM - 6. Noeuds et lments js-dom-22


6. Noeuds et lments

6.1 DOM Node et DOM Element

La plupart des objets DOM HTML hritent du DOM Core.

Pour rappel, un aperu des types dobjets DOM universels les plus importants:

Node

implmente le noeud de base dans un arbre XML ou HTML

implmente toutes les proprits et mthodes pour examiner et pour traverser un arbre

Element et HTMLElement

(hrite de Node) implmente les lments (donc ce qui correspond une balise et son contenu)

implmente surtout les proprits et mthodes ncessaires pour manipuler des attributs

Par rapport Element, HTMLElement implmente des fonctionalits supplmentaires

Text

(hrite de Node et de CharacterData) implmente les CDATA (texte lintrieur dune balise).

Javascript et DOM 6 Noeuds et lments js dom 23


23/62



6.2 Tests

hasAttribute

Returne une valeur boolenne qui indique si lattribut existe ou pas.

hasAttributeNS

pareil, mais pour un namespace

hasAttributes

Returne une valeur boolenne qui indique si llment possde des attributs.

hasChildNodes

Retourne une valeur boolenne qui indique si llment courant a des enfants ou non.

6.3 Informations sur llment

nodeName

Retourne le nom du noeud.

nodeType

Retourne les type dun noeud sous forme dun nombre entier

Ces informations sont trs importants pour savoir ce quun programme doit faire avec un noeud.

Javascript et DOM - 6 Noeuds et lments js-dom-24


24/62



Rsum des types de noeuds et leur nom sous forme de constante ou de valeur

Exemple 6-1: Tester si le premier noeud dun document est un commentaire

var node = document . document El ement . f i r st Chi l d;

i f ( node. nodeType ! = Node. COMMENT_NODE) al er t ( "You shoul d comment your code wel l ! " ) ;

Interface

(type de noeud)Nom de la constante

Valeur retourne

par nodeType

Element Node.ELEMENT_NODE 1Attr ibut Node.ATTRIBUTE_NODE 2

Noeud texte Node.TEXT_NODE 3Node.CDATA_SECTION_NODE 4Node.ENTITY_REFERENCE_NODE 5Node.ENTITY_NODE 6

Instruction de traitement Node.PROCESSING_INSTRUCTION_NODE 7Commentaire Node.COMMENT_NODE 8

Node.DOCUMENT_NODE 9

Node.DOCUMENT_TYPE_NODE 10Fragment XML Node.DOCUMENT_FRAGMENT_NODE 11

Node.NOTATION_NODE 12



25/62

Javascript et DOM 6. Noeuds et lments js dom 25


6.4 Contenu dun lment

childNodes

Renvoie une liste des nuds enfants de l'lment.var col l Noeuds = el ement DeRef erence. chi l dNodes;

className Dfinit ou obtient la classe de l'lment.

firstChild

Renvoie le premier enfant direct du nud.

id

Dfinit ou obtient l'identifiant (id) de l'lment courant.

innerHTML (pas compatible W3C DOM !)

Renvoie ou dfinit l'ensemble du balisage et du texte contenu au sein d'un lment donn. Balisage est une chane contenant le contenu de l'lment (y compris ses sous-lments) au format

HTML brut. Par exemple, "

Du texte
".var bal i sage = el ement . i nnerHTML;el ement . i nnerHTML = bal i sage;
lastChild Retourne le dernier enfant dun noeud.

NodeList.length

Returne le nombre ditems dans une liste (e.g. childNodes).

nodeValue



26/62



Returne la valeur dun noeud.

textContent

Retourne/dfinit le contenu texte dun lment.t ext = el ement . t ext Cont entel ement . t ext Cont ent = " t hi s i s some sampl e t ext "

appendChild(noeud)

Insre le nud spcifi la fin de la liste de nuds de llment courant./ / Cr eat e a new par agr aph el ementvar p = document . cr eat eEl ement ( "p") ;/ / Append i t t o t he end of t he document bodydocument . body. appendChi l d(p) ;

insertBefore (nouvel_lment, lment_cible) La mthode insertBefore permet d'insrer un nud juste avant un lment de rfrence parmi lesenfants du nud courant.parent Di v = document . get El ement ByI d( "di v- parent " ) ;span2 = document . getEl ement ByI d( "span- enf ant " ) ;span1 = document . cr eat eEl ement ( "span") ;par ent Di v. i nser t Bef or e( span1, span2) ;



27/62



6.5 Voisinage dun lment

parentNode

Retourne le noeud parent.

nextSibling

Renvoie le nud suivant immdiatement dans l'arbre (petit frre)/ / dans un t abl eau, l es cel l ul es sont des enf ant scel l 1 = document . get El ement ByI d( " t d1") ;cel l 2 = cel l 1. next Si bl i ng;

previousSibling

Retourne le noeud prcdant (grande soeur).

6.6 Style

style

retourne lobjet qui contient les dfinitions du style. cf. chapitre 11. HTML Style [39]



28/62



6.7 Attributs

attributes

Renvoie une collection des attributs de l'lment./ / r cupr e l e pr emi er l ment

du documentvar par a = document . get El ement sByTagName( "p") [ 0] ;/ / r cupr e ses at t r i but svar at t r = par a. at t r i but es;

getAttribute(nom_attribut)

Returns the value of the named attribute on the current node.var di v1 = document . getEl ement ByI d( "di v1") ;var al i gn = di v1. get At t r i but e( "al i gn") ;al er t ( al i gn) ; / / shows t he val ue of al i gn f or t he el ement wi t h i d="di v1"

getAttributeNode()

Returne lattribut du noeud en tant que noeud, c.f. 8. HTML Attribut [34]

setAttribute(nom, valeur)

Ajoute un attribut avec une valeur ou change la valeur dun attribut qui existe.

setAttributeNode()

Ajoute un noeud attribute llment courant.

setAttributeNodeNS()

Pareil, mais avec un namespace.

Javascript et DOM - 7. HTML Document js-dom-29


29/62

p j


7. HTML Document

Dans le DOM Core, l'objet document reprsente tout le contenu dun document

DOM:HTMLDocument est une interface spcialise pour le traitement des documents HTML(par exemple avec document.cookie ou document.alinkColor).

7.1 Ouvrir, crire (dans) et fermer un document:

document.open()

Ouvre un flux pour l'criture dans le document et qui crase tout

document.write(balisage)

crit du texte dans le document.

document.close()

Un document ouvert peut tre ferm l'aide de document.close().document . open( ) ; / / ouvr e un documentdocument . wr i t e( "Hel l o ! ") ;document . cl ose( ) ;



30/62

p j


7.2 Extraction dlments et dattributs

document.getElementById(id_lment)

Renvoie une rfrence l'objet correspondant l'identifiant donn. Il sagit ici dune mthode trs populaire !

document . getEl ement ByI d( "p1" )

document.getElementsByName(nom_lment)

Renvoie une liste des lments ayant le nom donn./ / 200/ / 145/ / 178up_di vs = document . get El ement sByName("up") ; / / r etour ne une l i st e de nodesdump( up_di vs. i t em( 0) . t agName) ; / / r et ur ns " di v"

document.getElementsByTagName(nom_balises)

Renvoie une liste des lments avec le nom de balise donn dans le documentel ement s = document . getEl ement sByTagName(h1) ; / / r etour ne une l i st e des h1

Exemple 7-1: Extract ion d lments avec leur id

/ / pour

t ext e

premi erPar agr aphe = document . get El ement ByI d( "p1" ) ;l i st eAt t r i but s = pr emi er Par agr aphe. at t r i but es;



31/62

p j


Quelques propr its:

il existe plusieurs proprits pour extraire qqs. lments spcifiques, par ex.

document.forms

forms renvoie une liste des lments FORM du document courant

document.body body renvoie le nud BODY du document.

document.links

Renvoie un tableau de tous les liens du document.

document.referrer

Renvoie l'URI de la page qui a amen cette page.

document.images

images renvoie une liste des images du document.var l i st ei mg = document . i mages;f or ( var i = 0; i < l i st ei mg. l engt h; i ++) { i f ( l i stei mg[ i ] == "xxx. gi f " ) { al ert ( "At t ent i on aux noms d i mages"! ) }}



32/62


Exemple 7-2: Tree walking: Collectionner les noms dlments

url: http://tecfa.unige.ch/guides/js/ex/tree-walking/tree-walking.html

var node_l i st = "" ;

f unct i on do_document ( ) {

mark_t ags( document . body) ; al er t ( "Thi s t ext has t he f ol l owi ng el ement s: " + node_l i st ) ; }

f unct i on mar k_t ags( node) {/ / Check i f n i s an El ement Node

i f ( node. nodeType == 1 / *Node. ELEMENT_NODE*/ ) {

/ / Append t he node name to t he l i stnode_l i st += node. nodeName + " " ;/ / Let ' s see i f t her e ar e chi l dr eni f ( node. hasChi l dNodes( ) ) { / / Now get al l chi l dr en of n var chi l dr en = node. chi l dNodes;

/ / Loop t hr ough t he chi l dr en f or ( var i =0; i < chi l dr en. l engt h; i ++) {

mar k_t ags( chi l dr en[ i ] ) ; / / Recur se on each one }} } }

Tr ee wal ki ng

http://tecfa.unige.ch/guides/js/ex/tree-walking/tree-walking.htmlhttp://tecfa.unige.ch/guides/js/ex/tree-walking/tree-walking.html


33/62


7.3 Cration et modification dlments

document.createElement (nom_du_tag)

Cre un nouvel lment.var di v = document . cr eat eEl ement ( "di v") ;

document.createTextNode (texte) Cre un nud de texte.

parent_node.insertBefore(new_node, existing_node)

insre un (nouveau) lment avant un autre lmentpr ef ace. i nser t Bef or e( new_di v_node, t i t r e)

Exemple 7-3: Cration dun lment et insertion dans le DOM

url: http://tecfa.unige.ch/guides/js/ex/dom-intro/document-trans1.htmlf unct i on change_me( ) { var doc = wi ndow. document ; var pr ef ace = doc. getEl ement ByI d( "pr ef ace" ) ; var t i t r e = doc. get El ement ByI d( "pref ace_t i t l e") ;

/ / on cr ee un l ment di v var new_di v_node = doc.createElement("div");

/ / on cr ee un nouveau TextNode var cont enu = doc.createTextNode ( "Aut eur : DKS et col l abor at eur s") ; / / on l e met dans l e di v new_di v_node. appendChi l d( cont enu) ;

/ / et on i nser e ce di v devant l ' l ment qui a l ' I D "pref ace" pr ef ace. insertBefore(new_div_node, titre);

Javascript et DOM - 8. HTML Attribut js-dom-34
http://tecfa.unige.ch/guides/js/ex/dom-intro/document-trans1.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-intro/document-trans1.html


34/62


}. . . . .

Voici le fragment HTML:

La pr f ace

bl abl a ( qui a cri t cel a ?)

Transf ormez- moi !

Exemple 7-4: Cration dun lment et insertion dans le DOM 2

Voici 2 exemples similaires

url: http://tecfa.unige.ch/guides/js/ex/dom-intro/insert3.html

url: http://tecfa.unige.ch/guides/js/ex/dom-intro/insert4.html

8. HTML Attribut

( faire)

9. HTML Table

( faire)

Javascript et DOM - 10. HTML Form et HTML Elements js-dom-35
http://tecfa.unige.ch/guides/js/ex/dom-intro/insert3.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-intro/insert3.html


35/62


10.HTML Form et HTML Elements

url: http://developer.mozilla.org/en/docs/DOM:form

HTMLFormElement hrite de Element (donc de ses mthodes et proprits)

Ci-dessous on utilise "form" et "element"

form.elementsnodeLi st = f orm. el ement s

retourne un tableau (array) de toutes les "contrles" (balises pour formulaire) dun formulaire

form.length

indique le nombre des contrles (utile pour programmer une boucle) nodeList = HTMLFormElement.elements

Accs aux lments

soit par leur indexe, soit par leur id ou leur name.

Accs par idvar i nput s = document . get El ement ByI d( " f orm1" ) . el ement s;

Accs par indexevar i nput ByI ndex = i nput s[ 2] ;

Accs par nomvar i nput ByName = i nput s[ " l ogi n" ] ;

http://developer.mozilla.org/en/docs/DOM:formhttp://developer.mozilla.org/en/docs/DOM:formhttp://developer.mozilla.org/en/docs/DOM:form


36/62


Exemple 10-1: Interroger les valeurs dun formulaire

url: http://tecfa.unige.ch/guides/js/ex/forms/form2.html

Cette fonction traite le formulaire form = document.intoxication// assigne une rfrence du formulaire form la boucle additionne form.elements[i].value partir du 2me lment !

f unct i on t rai t er( ) { var scal e=0; var f or m = document . i nt oxi cat i on f or ( var i =1; i < ( f or m. l engt h- 1) ; i ++) { i f ( f or m. el ement s[ i ] . checked) {

scal e = scal e + par seI nt ( f or m. el ement s[ i ] . val ue) ; }

} // Ici une series de ifs (c.f. le source)

i f ( scal e


37/62


I nt er act i ve t est

Quel est t on nom ?

Vous buvez de l ' al cool :j amai smoi ns d' un l i t r e par semai nepl us d' un l i t r e par semai ne

Quand vous buvez de l ' al cool , vous f i ni ssez vot r e ver r e :j amai spar f oi st ouj our s

[ . . . . . ]



38/62


Exemple 10-2: Transformer le contenu dun formulaire

url: http://tecfa.unige.ch/guides/js/ex/forms/form1.html

Cette fonction ramasse qqs. informations sur le formulaire et les affiche dans le contenu de la textarea.

f unct i on get For mI nf o( ) { var f = document.forms["myform"] ;

var i nf o = " f . el ement s: " + f . el ement s + " \ n" + "f . l engt h: " + f . l engt h + "\ n" + " f . name: " + f . name + " \ n" + "f . acti on: " + f . act i on + "\ n" + " f . method: " + f . method + " \ n" + "f . t ar get : " + f . t ar get ; document . f or ms[ "myf orm"] . el ement s[ ' t ex' ] . val ue = i nf o;

}Cette fonction modifie le formulaire

f unct i on set For mI nf o( f ) { f . met hod = "GET"; f . act i on = "Envoi _ver s_python" ; f . name = "Voi ci _un_nom_qui _j et t e" ; }. . . . .

Javascript et DOM - 11. HTML Style js-dom-39
http://tecfa.unige.ch/guides/js/ex/forms/form1.htmlhttp://tecfa.unige.ch/guides/js/ex/forms/form1.html


39/62


11.HTML Style

Il est possible daccder et de modifier la feuille de style du document le rsultat combin des styles en cascade pour un lment le style "inline" pour un lment dfini

11.1Modifier le style CSS " inl ine"

Dans cette section on montre comment changer le style "inline" dun lment individuel.

En rgle gnrale, on utilise cette technique pour faire des pages interactives et/ou anims.

Le principe est simple, pour accer ou modifier une proprit CSS on passe par:

element.style.propriete_CSS

/ / supposons que para12 soi t un l ment pr ci s de vot r e DOMpar a12. st yl e. col or = "bl ue"par a12. st yl e. f ont Si ze = "18pt "

Liste des proprits DOM CSS

Attention (!!!) Les proprits CSS du DOM ne correspondent pas aux noms "CSS"

Pour une liste, cf:url: http://developer.mozilla.org/en/docs/DOM:CSS

url: http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties

http://developer.mozilla.org/en/docs/DOM:CSShttp://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Propertieshttp://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Propertieshttp://developer.mozilla.org/en/docs/DOM:CSS


40/62


En gros, on peut deviner le nom DOM: il faut enlever le tiret "-" il faut capitaliser les mots (sauf le premier) par exemple: la proprit CSS "background-color" devenient en DOM CSS "backgroundColor".

Voici juste quelques exemples:

DOM CSS Proprit CSSbackground background

backgroundColor background-colorborderColor border-color

fontFamily font-familyfontSize font-size

marginBottom margin-bottom

marginLeft margin-left



41/62


Exemple 11-1: Changer dynamiquement le style dun lment

url: http://tecfa.unige.ch/guides/js/ex/dom-intro/change-style1.html

montre comment changer le style dun lien spcifique f unct i on changeText ( ) {

var p = document . get El ement ByI d( "pi d" ) ;p. st yl e. col or = "bl ue"p. st yl e. f ont Si ze = "18pt "

} . . . . .

News Li nk

Exemple 11-2: Changer dynamiquement le style (2)

url: http://tecfa.unige.ch/guides/js/ex/dom-intro/change_style2.html

montre comment changer entre 2 styles pour un lien spcifique

http://tecfa.unige.ch/guides/js/ex/dom-intro/change-style1.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-intro/change_style2.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-intro/change_style2.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-intro/change-style1.html


42/62


Exemple 11-3: Bouger un objet

url: http://tecfa.unige.ch/guides/js/ex/dom-animate/move-object1.html

f unct i on movei t By( i mg, x, y){ var obj = document . get El ement ByI d( i mg) ; obj.style.left = parseInt(obj.style.left)+x+"px"

obj.style.top = par seI nt ( obj . st yl e. t op) +y+"px" } f unct i on movei t To( i mg, x, y){ var obj = document . get El ement ByI d( i mg) ; obj.style.left = x+"px" obj.style.top = y+"px" } la fonction parseInt () va extraire un nombre dun string partir des premires chiffres (!)parseI nt ( "10px") == 10; parseI nt ( "10bl a20") == 10; pareI nt ( "px10") == NaN;

Voici la partie HTML

Move by 10px ( r i ght ) Move by 10px ( l ef t ) Move t o 10px ( down) Move t o 10px (up) Move t o or i gi nal posi t i on

http://tecfa.unige.ch/guides/js/ex/dom-animate/move-object1.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-animate/move-object1.html


43/62


Exemple 11-4: Animation en cont inu

url: http://tecfa.unige.ch/guides/js/ex/dom-animate/dynamicposition2.html

Une fonction start va toutes les 100 millisecondes lancer la fonction "run".f unct i on star t ( ) { pText = document . get El ement ByI d( "pText " ) ;

t i mer = wi ndow. set I nt er val ( "r un( ) ", 100 ) ; }

La mthode window.clearInterval(timer) permet de tuer ce processus

La fonction run() fait lanimation. . . . . pText . st yl e. f ont Si ze = si ze + "px"; pText . st yl e. l ef t = count + "px" ;

Une expression teste dans quel sens il faut aller (aggrandir ou diminuer)i f ( ( count % 200 ) == 0 ) { speed *= - 1; pText . st yl e. col or = ( speed < 0 ) ? " r ed" : " bl ue" ; f i r st Li ne = ( speed < 0 ) ? "Text shr i nki ng" : "Text gr owi ng" ; }

http://tecfa.unige.ch/guides/js/ex/dom-animate/dynamicposition2.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-animate/dynamicposition2.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-animate/dynamicposition2.html


44/62


Exemple 11-5: Tree walking: changer de style

url: http://tecfa.unige.ch/guides/js/ex/tree-walking/tree-walking2.html

f unct i on do_document ( css_cl ass, col or ) {

mar k_t ags( document . body, css_cl ass, col or) ; }

f unct i on mar k_t ags( node, css_cl ass, col or ) {/ / Check i f n i s an El ement Node

i f ( node. nodeType == 1 / *Node. ELEMENT_NODE*/ ) {/ / Hi ghl i ght i f needed

i f ( node. get At t r i but e( "cl ass") == css_cl ass) node. st yl e. col or = col or ;

/ / Let ' s see i f t her e ar e chi l dr eni f ( node. hasChi l dNodes( ) ) { / / Now get al l chi l dr en of node var chi l dr en = node. chi l dNodes;

/ / Loop t hr ough t he chi l dr en f or ( var i =0; i < chi l dr en. l engt h; i ++) {

/ / Recur se on each chi l d mar k_t ags( chi l dr en[ i ] , css_cl ass, col or ) ;

} }}}

http://tecfa.unige.ch/guides/js/ex/tree-walking/tree-walking2.htmlhttp://tecfa.unige.ch/guides/js/ex/tree-walking/tree-walking2.html


45/62


Tr ee wal ki ng . . . . .

Let ' s hope you enj oy t hi s

I f you want t o r euse t hi s code: . . . . .

Exemple 11-6: Tree walking: changer de style

url: http://tecfa.unige.ch/guides/js/ex/tree-walking/tree-walking3.html Code plus gnral que tree-walkin2.html et qui permet de transformer nimporte quelle

proprite de style

http://tecfa.unige.ch/guides/js/ex/tree-walking/tree-walking3.htmlhttp://tecfa.unige.ch/guides/js/ex/tree-walking/tree-walking3.html


46/62


11.2Utilisation de setAttribute

element.setAttribute("style,"dfinition CSS .....")

on peut aussi directement (re)dfinir la proprit "style" dun lment et l on travaille directement avecCSS.

Mais attention: cette opration crase tous les autres styles inline associs cet lment ( vrifier si

cela comprend les styles hrits, sorry !). A utiliser avec prudence en tout cas.var el = document . getEl ement ByI d( "some- el ement " ) ;el . set At t r i but e( "st yl e", "backgr ound- col or : dar kbl ue; ") ;

Javascript et DOM - 12. HTML Event js-dom-47


47/62


12.HTML Event

HTML fournit une interface trs puissante pour grer les vnements

La diffrence entre "Event listener", "Event handler" et "Event". Un "Event listener" observe si un vnement a lieu Un "Event handler" fait quelque chose avec lvnement

Un "Event" est un vnement (lutilisateur a fait qc. et cela se traduit en un objet de type Event)

12.1Rappel des vnements prdfinis dans Gecko

Dom Event Level 2 en dfinit moins (les keys) !url: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings

Voici un tableau avec quelques vnments importants pour les objets de type HTML

Element et Window.

Event Handler Event element window Utilisateur

onblur blur x xon focalise sur un autre objet(bouger, cliquer, etc ailleurs )

onclick click x x on clique sur un objetondblclick dblclick x

onfocus focus x x on focalise sur lobjetonkeydown keydown x x une touche reste enfonceonkeypress keypress x x une touche est enfonce

onkeyup keyup x xonmousedown mousedown x x clique avec la sourceonmousemove mousemove x x on bouche la souris

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupingshttp://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings


48/62


Principe

Lorsquon a une instruction HMTL/JS suivante:cl i ck me!

Dans le DOM une proprit reprsente cela:cl i ck me! mon_el = document . get El ement ByI d( "mon_di v") ;mon_el . oncl i ck / / r et our ne l e nom de l a f onct i on qui gr e l e oncl i ck

par dfaut, la valeur DOM demon_el.onclick est une fonction "Event Listener" prdfinie:f unct i on oncl i ck( event ) { t r ai t ement ( ) ; }

Les noms des Event listeners sont dfinis dans les proprits de lobjet (onload, onclose, etc.) Lors dune invocation, ces fonctions reoivent comme argument un objet "Event" quon peut exploiter.

onmouseout mouseout x x on dplace la souris ailleursonmouseover mouseover x x on dplace la souris sur lobjet

onmouseup mouseup x x on lache un bout de sourisonresize resize x x on diminue une fenetre

onload load x on charge une fentre dans les navi.

onunload unload contenu part(on charge un autre document)

onclose close x on ferme une fentreondragdrop dragdrop x

onscroll scroll x on scroll le contenu dune fentre

Event Handler Event element window Utilisateur


12 2C t i d E t Li t


49/62


12.2Construire des Event Listeners

Pour assigner des Event Listeners, il existe 3 faons de faire:

A. Comme nos parents: inline

A viter car on mlange HTML et Javascript

A viter car (en tout cas moi je ne sais passer lobjet "vnment"), c.f. page 52url: http://tecfa.unige.ch/guides/js/ex/dom-event/simple-event-listener0.html

f unct i on showPopup( ) { al ert ( "At t ent i on on va vous empest er avec une pub ! ! " ) ; var popup = wi ndow. open( "ht t p: / / t ecf a. uni ge. ch/ mal t t / " , "popup" ,

"hei ght=800, wi dt h=600") ; popup. f ocus( ) ; r et ur n f al se; } CLI CK ME ! !

On dclenche un vent "click" en cliquant sur le texte "CLICK ME" Le Event Listener "onClick" va faire appel la fonction Event Handler "showPopup".


B I f l ( h IE t Fi f /M ill )
http://tecfa.unige.ch/guides/js/ex/dom-event/simple-event-listener0.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-event/simple-event-listener0.html


50/62


B. Informel (marche avec IE et Firefox/Mozilla)

Exemple 12-1: Event Listener faon rapide

url: http://tecfa.unige.ch/guides/js/ex/dom-event/simple-event-listener.html

f unct i on l oad( ) {

varp = document.getElementById( ' mon_div

' ) ; p.onclick = showPopup; // Il sagit de donner le NOM de la fonction }

f unct i on showPopup() { al er t ( "At t ent i on on va vous empest er avec une pub ! ! " ) ; var popup = wi ndow. open( "ht t p: / / t ecf a. uni ge. ch/ mal t t / " , "popup" , "hei ght=800, wi dt h=600") ;

popup. f ocus( ) ; r et ur n f al se; }. . . . .CLI CK ME ! !

Lorsque le document charge, on assigne le nom de la fonction showPopup la proprit

"onclick" de llment en question (le "div" du CLICK ME). Ensuite, la fonction showPopup grer lvnement vous voulez ...


C S l l ifi ti DOM ddE tLi t
http://tecfa.unige.ch/guides/js/ex/dom-event/simple-event-listener.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-event/simple-event-listener.html


51/62


C. Selon la spcification DOM addEventListener

Cette mthode est plus puissante puisquelle permet denregistrer plusieurs Event Listenersdu mme type.

Ne marche pas avec IE 6 (4/2006), MS a son truc propritaire quivalent.

Exemple 12-2: Linterface addEventListenerurl: http://tecfa.unige.ch/guides/js/ex/dom-event/addEventListener2.html

/ / Exempl e 1 d' enr egi st r ement d' vnement f unct i on l_func() { var t 2 = document . getEl ement ByI d( " t 2" ) ; t 2. i nner HTML = " t r oi s c' est mi eux que deux ! " ;

}

/ / Exempl e 2 d' enr egi st r ement d' vnement f unct i on touche ( ) { al er t ( " j e t ' ai vu t oucher ! ! ") ; document . get El ement ByI d( " t abl e2") . st yl e. bor der = "yel l ow" ; }

f unct i on l oad( ) {var el = document . get El ement ByI d( " t abl e" ) ;el.addEventListener("click", l_func, false);

var el 2 = document . getEl ement ByI d( " t abl e2" ) ;el2.addEventListener("mouseover", touche, false);

}


12 3G ti d l t
http://tecfa.unige.ch/guides/js/ex/dom-event/addEventListener2.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-event/addEventListener2.html


52/62


12.3Gestion de lvnement

Lorsquun vent handler fait appel une fonction, le handler lui transmet un objet "Event".Cet objet possde des informations utiles quon peut exploiterurl: http://tecfa.unige.ch/guides/js/ex/dom-event/examine-events2.html

A documenter ...var x_t d; var y_t d;

/ / Exempl e d' enr egi st r ement d' vnement f unct i on t ouche ( event ) {

x = event . pageX; y = event . pageY;

obj = event . t ar get ; / / al er t ( "j e t ' ai vu t oucher \ n aux posi t i ons x=" + x + ", y=" + y + "\ n l \ ' obj et" + obj ) ; x_t d. i nner HTML = x; y_t d. i nner HTML = y; obj _t d. i nnerHTML = obj . i nnerHTML; }

f unct i on l oad( ) {var el 2 = document . getEl ement ByI d( " t abl e2" ) ;i f ( el 2. addEvent Li st ener ) el 2. addEvent Li st ener ( "mouseover ", t ouche, f al se)

/ / f or t hose who can' t use a r eal br owser el se al ert ( "Sorr y you need a br owser t hat unders t ands DOM Level 2 Event s" ) ; x_t d = document . getEl ement ByI d( "x") ;

y_t d = document . getEl ement ByI d( "y") ;


obj t d document getEl ement ByI d( "obj " ) ;
http://tecfa.unige.ch/guides/js/ex/dom-event/examine-events2.htmlhttp://tecfa.unige.ch/guides/js/ex/dom-event/examine-events2.html


53/62


obj _t d = document . getEl ement ByI d( "obj " ) ;}

Gecko DOM addEvent Li st ener exampl e

Ceci est une dmo d' un Event Handl er pour l ' vnement mouseover enr egi st r pour l a tabl e.Bougez l a sour i s sur l e tabl eau SVP:

Ma t et eMa poi t r i neMon vent r eMes j ambes

Tu a commenc me t oucher aux coor donnes:

X = Y = Obj et =

Javascript et DOM - 13. AJAX js-dom-54

13 AJAX


54/62


13.AJAX

Explications faire, pour le moment c.f. autres sites, par exemple:url: http://developer.mozilla.org/en/docs/AJAX

Asynchronous JavaScript and XML (AJAX) is not a technology in itself, but is a term that describes a"new" approach to using a number of existing technologies together, including: HTML or XHTML,

Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, and theXMLHttpRequest object.

Exemple 13-1: AJAX request

url: http://tecfa.unige.ch/guides/js/ex/ajax/ajax0.html

Montre comment demander une page (GET) dont le contenu sera affich dans un alert

Exemple 13-2: AJAX request et pseudo XML responseurl: http://tecfa.unige.ch/guides/js/ex/ajax/ajax1.html

url: http://tecfa.unige.ch/guides/js/ex/ajax/ajax1.phps

Montre comment envoyer une requte au serveur

Cette requte est construite partir dun geste dutilisateur

On affiche la rponse XML "texte" du serveur dans une fentre popup (sans la traiter)

Exemple 13-3: AJAX request et XML response

url: http://tecfa.unige.ch/guides/js/ex/ajax/ajax2.htmlOn analyse les rponses du serveur en tant que XML DOM en utilisant lAPI DOM Core

Ensuite, on insre quelque chose dans la page HTML


Documentation incluse dans le code (en Anglais)
http://tecfa.unige.ch/guides/js/ex/ajax/ajax0.htmlhttp://tecfa.unige.ch/guides/js/ex/ajax/ajax1.htmlhttp://tecfa.unige.ch/guides/js/ex/ajax/ajax1.phpshttp://tecfa.unige.ch/guides/js/ex/ajax/ajax2.htmlhttp://tecfa.unige.ch/guides/js/ex/ajax/ajax2.htmlhttp://tecfa.unige.ch/guides/js/ex/ajax/ajax1.phpshttp://tecfa.unige.ch/guides/js/ex/ajax/ajax1.htmlhttp://tecfa.unige.ch/guides/js/ex/ajax/ajax0.html


55/62


Documentation incluse dans le code (en Anglais)

Code HTML et JavaScript Si mpl e Aj ax exampl evar ur l ;var t abl e;

f unct i on i ni t ( ) { ur l = "aj ax1. php"; / / ur l = "aj ax- debug. php"; t abl e = document . getEl ement ByI d( " t abl e1" ) ;

}

f unct i on makeRequest ( el ement ) { / / Thi s f unct i on i s cal l ed f r om t he HTML code bel ow / / el ement i s t he DOM el ement ( t ag on whi ch t he user cl i cked)

var ht t p_r equest = f al se;

/ / - - - - Moz i l l a, Saf ar i , et c. browsers

i f ( wi ndow. XMLHt t pRequest ) {ht t p_r equest = new XMLHt t pRequest ( ) ;

/ / Thi s wi l l make sure t hat t he server r esponse cl ai ms t o be XML ( i n case we r et r i evesomethi ng el se) i f ( ht t p_r equest . over r i deMi meType) { ht t p_r equest . over r i deMi meType( ' t ext / xml ' ) ; }


/ / I E browsers


56/62


/ / - - - - I E browsers } el se i f ( wi ndow. Act i veXObj ect ) {

try { ht t p_r equest = new Act i veXObj ect ( "Msxml 2. XMLHTTP") ; } cat ch ( e) { t ry { ht t p_r equest = new Act i veXObj ect ( "Mi cr osof t . XMLHTTP") ;

} cat ch ( e) {} } }

/ / - - - - abor t i f t here i s no repl y i f ( ! ht t p_request) { al er t ( ' Gi vi ng up : ( Cannot creat e an XMLHTTP i nst ance' ) ; r et ur n f al se; }

/ / We r egi st er t he f unct i on t hat wi l l deal wi t h a r epl y ht t p_r equest . onr eadystat echange = f unct i on( ) { pr ocessSer ver Repl y(ht t p_r equest ) ; };

/ / Thi s l i nes st ar t s bui l di ng t he request - don' t t hi nk that a GET r equest woul d wor k ( ?) ht t p_r equest . open( ' POST' , ur l , t r ue) ; / / Cont ent s WE send f r omhere wi l l be ur l encoded ht t p_r equest . setRequest Header ( ' Cont ent - Type' , ' appl i cat i on/ x- www- f or m- ur l encoded' ) ;

/ / her e we extr act t he cont ent s of t ag on whi ch t he user cl i cked user_pr ef = el ement . i nnerHTML; / / Thi s i s the cont ent of t he r equest / / al er t ( user_pref ) ; user_ r equest = "user _pr ef _f r ui t =" + user_pr ef ;


/ / We send t he data - data are query st r i ngs


57/62


/ / We send t he data - data are query st r i ngs ht t p_r equest . send( user_ r equest ) ;}

f unct i on pr ocessSer ver Repl y(ht t p_r equest ) {

i f ( ht t p_r equest . r eadySt at e == 4) {

i f ( ht t p_r equest . st at us == 200) { / / We t el l t he ser ver t hat we want t o deal wi t h XML as a DOM Document ! ! r epl yXML = ht t p_r equest . r esponseXML; t r eat Response ( r epl yXML) ; / / di spl ayResponse ( r epl yXML) ; } el se { al er t ( ' Ther e was a pr obl em wi t h t he r equest . ' ) ; } }}

/ / Thi s wi l l change the HTML cont ent s of t he pagef unct i on tr eat Response ( r epl y) { / / r epl y i s a XML DOM dat ast r uct ur e ! ! / / ext r act some XML - we know t hat i t i s i n an "answer " t ag / / DOM HTML wi l l not wor k, i t ' s XML her e

var answer = r epl y. getEl ement sByTagName( ' answer' ) . i t em( 0) . f i r st Chi l d. nodeVal ue;

/ / new t r , t d el ement s var el ement _t r = document . cr eat eEl ement ( " t r " ) ; var el ement _t d = document . cr eat eEl ement ( " t d" ) ; / / cont ent s f or t he t d el ement var t ext = document . cr eat eTextNode( answer ) ; el ement _t d. appendChi l d( t ext ) ;


el ement t r appendChi l d( el ement t d) ;


58/62


el ement _t r . appendChi l d( el ement _t d) ; tabl e. appendChi l d( el ement _t r ) ;}

/ / j ust f or debuggi ng, wi l l open up a popup wi ndow. Usef ul i f you t el l t he php t o senddebuggi ng i nf os. . .f unct i on di spl ayResponse ( r epl y) {

wi n=wi ndow. open( "" , "Resul t s" , "wi dt h=250, hei ght =300, st atus=1, r esi zabl e=1, scr ol l bars=1"); wi n. document . open( ) ; wi n. document . wr i t e( r epl y) ; wi n. document . cl ose( ) ;}

Si mpl e Aj ax exampl e

Pl ease cl i ck on a f r ui t :

I l i ke

appl es

I l i ke



59/62


or anges

I l i ke

bananas

Di al og hi st or y:

Server r epl i es

Expl anat i ons:


Thi s exampl e i s i nspi r ed by


60/62


Thi s exampl e i s i nspi r ed by


61/62


Le fichier PHP (ajax1.php)



62/62

js-omfgjgj

Documents