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

Arbres DOM (OC informatique, EPFL). Création d'éléments HTML var body = document.body var titre = document.createElement("h2") body.appendChild(titre)

Présentations similaires


Présentation au sujet: "Arbres DOM (OC informatique, EPFL). Création d'éléments HTML var body = document.body var titre = document.createElement("h2") body.appendChild(titre)"— Transcription de la présentation:

1 Arbres DOM (OC informatique, EPFL)

2 Création d'éléments HTML var body = document.body var titre = document.createElement("h2") body.appendChild(titre) titre.appendChild(document.createTextNode("Leçon sur le DOM")) Equivalent à Leçon sur le DOM

3 Adjonction d'éléments HTML var paragraphe = document.createElement("p") body.appendChild(paragraphe) paragraphe.appendChild(document.createTextNode("DOM signifie ")) var span = document.createElement("span") span.style.fontWeight = "bold" span.style.fontStyle = "italic" paragraphe.appendChild(span) object model")) span.appendChild(document.createTextNode("document Produit Leçon sur le DOM DOM signifie document object model

4 html head body table html headbody table tr td texte1texte2 tr td texte3texte4 Deux représentations dun arbre HTML text1 text2 text3 text4

5 Un arbre (terminologie) racine feuillenœud feuille parent enfant

6 Attributs des nœuds html headbody table tr document.body (défini par le navigateur) aNode aNode.tagName node.nodeName: BODY, TABLE, TR, TD, #text node.textContent: texte du sous-arbre

7 Relations des nœuds html headbody table - childNodes tr aNode aNode.childNodes[1] aNode.lastChild node.childNodes.length aNode.childNodes[0] aNode.firstNode aNode.parentNode

8 Accès à un élément dun arbre text1 text2 text3 text4 Attention, les nœuds despaces ne sont pas pris en compte document.body.childNodes[0].childNodes[0].childNodes[1].childNodes[0].value document.body.firstChild.firstChild.childNodes[1].firstChild.value

9 Adjonction dun nœud unNoeud = document.getElementById("unTR") nouvTD = document.createElement("TD") unNoeud.appendChild(nouvTD) text1 text2

10 Adjonction dun texte text1 text2 mon texte txt = document.createTextNode("mon texte") nouvTD.appendChild(txt)

11 Elimination dun nœud unParent.removeChild(unNoeud) unParent.removeChild(unParent.childNodes[1]) unNoeud.parentNode.removeChild(unNoeud)

12 Parcours dun arbre function parcourtEnfants(noeud) { // définition for (var i=0 ; i

13 Un étage de larbre function parcourtPetitsEnfants(arg) { for (var i=0 ; i

14 Parcours récursif de larbre function parcourtPetitsEnfants(arg) { for (var i=0 ; i

15 Tableaux associatifs et syntaxe objets id = [ ] id [ "prenom" ] = "Peter" id [ "nom" ] = "Tagasi" id [ "prenom" ] = "Peter" id = { prenom : "Peter", nom : "Tagasi" } id.prenom == "Peter"

16 Tableaux associatifs, indicés et objets id = { prenom : "Peter", nom : "Tagasi" } id.prenom == "Peter" ids =[ { prenom : "Peter", nom : "Tagasi" }, { prenom : "Hans", nom : "Vogel" } ] ids[1].nom == "Vogel"

17 Tableaux associatif, indicés et objets lst ={ liste : [ {{identité : {prenom : "Peter", nom : "Tagasi" } }, {{identité : {prenom : "Hans", nom : "Vogel" } ] } lst.liste[0].identite.nom

18 Parcours automatique et récursif for (var key in tableau) { if ((typeof tableau[key] == object) && tableau[key].length…) for (var i=0; i< … … } // un bel exercice !

19 Troisième syntaxe darbre: XML {prenom : "Peter", nom : "Tagasi"} Peter Tagasi

20 Liste demprunts Peter Tagasi Tarzan dans les arbres Jane sur une branche

21 Lecture / écriture de fichiers de texte et XML (arbres) sur le serveur qui a envoyé la page

22 Lecture synchrone dun fichier de texte function makeRequest(URL) { // définition http_request = new XMLHttpRequest() http_request.open('GET', URL, false) http_request.send(null) return http_request.responseText } var txt = makeRequest("Tree.xml") // appel var aTbl = txt.getElementsByTagName("personne")

23 Lecture synchrone dun fichier XML function makeRequest(URL) { // définition http_request = new XMLHttpRequest() http_request.open('GET', URL, false) http_request.send(null) return http_request.responseXML } var xml = makeRequest("Tree.xml") // appel var aTbl = xml.getElementsByTagName("personne")

24 Accès à un arbre XML (2 possibilités) xml.getElementsByTagName("emprunts")[0].childNodes[0].childNodes[0].childNodes[0].firstChild.nodeValue xml.getElementsByTagName("personne")[0].getElementsByTagName("titre")[1].firstChild.nodeValue

25 Appel asynchrone (AJAX) function makeRequest(URL, alertFunction) { http_request = new XMLHttpRequest() http_request.onreadystatechange = function() { alertFunction(http_request,URL) } http_request.open('GET', URL, true) http_request.send(null) return } var alertContents = function (http_local_request, URL) { document.getElementById("Display").innerHTML = http_local_request.responseXML } makeRequest("fiches.xml", alertContents) // appel

26 Ecriture dun fichier XML var temp = [ ] temp.push(" ") temp.push(" " + txt + " ") temp.push(" ") File.write( "tmp.xml", temp.join("\n") )

27 Fichiers disponibles sur LemanOS


Télécharger ppt "Arbres DOM (OC informatique, EPFL). Création d'éléments HTML var body = document.body var titre = document.createElement("h2") body.appendChild(titre)"

Présentations similaires


Annonces Google