12_DOM_Partie_1 - CSI 3540 Structures techniques et normes...

Info icon This preview shows pages 1–15. Sign up to view the full content.

View Full Document Right Arrow Icon
CSI 3540 Structures, techniques et normes du Web Friday, February 26, 2010
Image of page 1

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Objectif: Bien comprendre le modèle objet de document (DOM HTML) ; l’API permettant à JavaScript (et aux autres langages) de manipuler la page courante de l’agent utilisateur Lectures: Web Technologies (2007) § 5 pages 249–268 JavaScript, documents XHTML, CSS 2 et DOM Friday, February 26, 2010
Image of page 2
Plan 1. Motivation 2. Événements intrinsèques de XHTML 3. DOM 2 Core 4. DOM 2 HTML Friday, February 26, 2010
Image of page 3

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Friday, February 26, 2010
Image of page 4
IE6 n’est plus Le gouvernement de la Grande- Bretagne ne supportera plus IE6 Google (Youtube, GoogleDocs, GMail, Google Calendar) cesse le support pour IE6 Pour Youtube , le 13 mars marque le début de la fin de IE6 Friday, February 26, 2010
Image of page 5

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Qu’est-ce que c’est? Laissons parler les auteurs de la spécification : “(...) une interface indépendante de la plateforme et du langage qui permet aux programmes et aux scripts l' accès et la mise à jour dynamique du contenu et de la structure des documents .” Friday, February 26, 2010
Image of page 6
Motivation Friday, February 26, 2010
Image of page 7

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
Friday, February 26, 2010
Image of page 8
Friday, February 26, 2010
Image of page 9

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd " > < html xmlns = "http://www.w3.org/1999/xhtml " lang = "fr-CA" > < head > < title >Smiley</ title > < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> < meta http-equiv = "Content-Script-Type" content = "text/javascript" /> < link rel = "stylesheet" type = "text/css" href = "default.css" media = "all" /> < script type = "text/javascript" src = "Script.js" > </ script > </ head > < body > < div style = "text-align:center" > < img id = "smiley" src = "smiley-01.png" alt = "Smiley" width = "580" height = "580" onmouseover = "swap( 'smiley', 'smiley-02.png' );" onmouseout = "swap( 'smiley', 'smiley-01.png' );" /> </ div > </ body > </ html > Friday, February 26, 2010
Image of page 10
function swap( id, URL ) { var elt = window.document.getElementById( id ) elt.setAttribute( "src", URL ); } Friday, February 26, 2010
Image of page 11

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
getElementById( id ) ... document setAttribute( nom, valeur ) ... id src ... Element * 1 < html > ... < img id = "smiley" src = "smiley-01.png" ... /> ... </ html > Friday, February 26, 2010
Image of page 12
Content-Script-Type L’attribut HTTP-EQUIV de la balise META sert à construire un en-tête équivalent aux en-têtes du message HTTP réponse <! DOCTYPE html ... < html ... > < head > ... < meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" /> < meta http-equiv = "Content-Script-Type" content = "text/javascript" /> ... </ head > < body > ... </ body > </ html > Le langage par défaut est JavaScript Friday, February 26, 2010
Image of page 13

Info iconThis preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
> telnet www.site.uottawa.ca 80 Trying 137 .122.89.222... Connected to web0.site.uottawa.ca. Escape character is '^]'. GET / HTTP/1.1 HOST: www.site.uottawa.ca HTTP/1.1 200 OK Date: Mon, 04 Jun 2007 19:20:23 GMT Server: Apache/2.0.59 (FreeBSD) PHP/5.1.6 with Suhosin-Patch mod_ssl/2.0.59 OpenSSL/0.9.7e-p1 Last-Modified: Fri, 28 May 2004 14:11:11 GMT ETag: "114d1b-1a1-adf3ddc0" Accept-Ranges: bytes Content-Length: 417 Content-Type: text/html <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="Author" content="Daniel Amyot"> <meta name="GENERATOR" content="Mozilla/4.5 [en] (Win95; I) [Netscape]"> <META Http-equiv="refresh" Content="0; url=www.site.uottawa.ca/index.shtml "> <title>SITE</title> </head> <body> </body> </html> Friday, February 26, 2010
Image of page 14
Image of page 15
This is the end of the preview. Sign up to access the rest of the document.

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern