technologies de l’internet
TRANSCRIPT
![Page 1: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/1.jpg)
Technologies de Technologies de ll’’InternetInternet
Partie 5 : DOM, JavaScriptIulian [email protected]
![Page 2: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/2.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac2
DHTML : IntroductionDHTML : Introduction
Objectif : créer des pages dynamiquesobjets qui apparaissent/disparaissent/changent(ex. menus)validation de données de formulairesgestion des "cookies"…
DHTML n'est pas un langage / norme mais une combinaison de technologies:(X)HTML, CSS, DOM, JavaScript,…
![Page 3: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/3.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac3
ModModèèle DOMle DOM
représentation des éléments d'une page HTML sous forme d'objets, avec propriétés, méthodes, …
page HTML ↔ arbre DOMnorme W3C, indépendante du navigateur
modifier les objets dynamiquement permet de modifier l'aspect de la page⇒ besoin d'un langage (≠ DOM) exécuté par le
client (navigateur) pour modifier les objets (ex. JavaScript)
![Page 4: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/4.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac4
Arbre DOMArbre DOMinitialement construit par le navigateur par analyse syntaxique de la page HTML
html
bodyhead
title link div
ph
img
doc
CDATA rel
![Page 5: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/5.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac5
Types d'objets : niveau gTypes d'objets : niveau géénnéérique rique (XML)(XML)
Node – interface générique pour tous les types de nœuds de l'arbre (ex. Document, Element, Attribut, CDATA, …)
NodeList – liste de nœuds (ex. node.childNodes)
NamedNodeMap – dictionnaire de nœuds en accès par le nom (ex. node.attributes, node.)
![Page 6: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/6.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac6
Types d'objets : niveau gTypes d'objets : niveau géénnéérique rique (XML)(XML)
…
Node
Document Element Attr CDATADocumentType
![Page 7: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/7.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac7
Navigation dans l'arbreNavigation dans l'arbre
DocumentElement getElementById(id)Element getDocumentElement()NodeList getElementsByTagName(tagname)…
NodeNode getFirstChild() Node getNextSibling()Document getOwnerDocument()…
ElementAttr getAttributeNode(name)NodeList getElementsByTagName(tagname)…
…
![Page 8: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/8.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac8
ExempleExemple
<html><head><script type="text/javascript">
i = document.getElementById("myHeader");j = document.firstChild.lastChild;// devrait être : j = document.getFirstChild().getFirstChild().getNextSibling();
</script></head><body>
<h1 id="myHeader" >This is a header</h1>
</body></html>
![Page 9: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/9.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac9
DOM HTMLDOM HTML
Un type d'objet pour chaque élément HTMLbodyformtable, tablerow, tablecellparagraphanchorimage…
Propriétés ↔ attributs de l'élément HTMLex. image : align, border, ismap, src, …
![Page 10: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/10.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac10
DOM HTML DOM HTML –– stylesstyles
chaque objet Element a un objet Styleassocié qui contient l'affectation de style individuelle spécifique à l'objet
on peut changer les propriétés de style:document.getElementById("id").style.property="value"
property : propriété CSS ex. CSS background-image → DOM backgroundImage
![Page 11: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/11.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac11
ExempleExemple<html><head><script type="text/javascript">function f() {
i = document.getElementById("myHeader");i.style.backgroundColor = "red";
link = document.createElement("a");linkText = document.createTextNode(" edit");link.setAttribute("href", "url.html");
link.appendChild(linkText);i.appendChild(iLink);
}</script></head><body><h1 id="myHeader" onClick="f()">This is a header</h1></body></html>
![Page 12: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/12.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac12
JavaScriptJavaScript -- introductionintroduction
langage de programmation pour les pages HTMLN.B. JavaScript ≠ Java !
interprété par le navigateurexemples d'utilisation :
changer le texte d'une pageréagir à des événements (chargement de la page, clicks, déplacement de souris, …)valider les données d'un formulairedétecter le type de navigateur du visiteurcréer des cookies, …
![Page 13: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/13.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac13
OOùù mettre les scriptsmettre les scriptsdans les entêtes:
<head> <script type="text/javascript">
... </script>
</head>⇒ interprété au chargement de la page⇒ en principe, définition de fonctions
dans un fichier séparé:<script src="xxx.js" type="text/javascript"></script>
dans le corps:<body>
<script type="text/javascript"> document.write("<a href=\"url.html\">a link</a>");
</script> </body>
⇒ peut générer du contenu
![Page 14: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/14.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac14
VariablesVariables
créées à l'affectation:var str = "exemple" oustr = "exemple"
nom sensitif à la caseportée
locales à une fonctionglobales, visibles dans toutes les fonctions de la page
pas de définition de type (→ objet)
![Page 15: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/15.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac15
Instructions de contrôleInstructions de contrôle
if (time < 10) { document.write("Good morning!")
} else { document.write("Good day!")
}
switch (theDay){case 0:document.write("It's finally Sunday")break
default:document.write("looking forward…")
}
![Page 16: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/16.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac16
Instructions de contrôleInstructions de contrôle
for (var=0;var<=5;var=var+1) {
// codeif (var=3) break;
}
while (var<=endvalue){
// code }
![Page 17: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/17.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac17
Tableaux, plus d'instructionsTableaux, plus d'instructions
type Array :
var semaine=new Array() semaine[0]="Dimanche"semaine[1]="Lundi" semaine[2]="Mardi"
instruction for..in :
for (j in semaine) {document.write(j+"<br/>");
}
![Page 18: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/18.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac18
OpOpéérateursrateurs
les mêmes qu'en C/C++/Java !
+,-,*,/,%...++, --
=, +=, *=, %=,…==,===&&, ||, !
_?_:_…
![Page 19: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/19.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac19
ObjetsObjets
JavaScript est orienté objettypes
prédéfinis nouveaux (utilisateur)
accès aux propriétés :exemple (pour txt="toto"):txt.length
accès aux méthodes :exempledocument.write( txt.toUpperCase());
![Page 20: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/20.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac20
Types d'objets prTypes d'objets prééddééfinisfinis
String+, indexOf(), match(),…bold(), small()…
Datevar myDate=new Date() // initialisé à la date courantegetDay(), getMonth(), setMonth()…
BooleanMath
min(x,y), abs(x), log(x), …
![Page 21: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/21.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac21
FonctionsFonctions
function prod(a,b)
{
alert("calcul du produit")
x=a*b
return x
}
![Page 22: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/22.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac22
Types utilisateurTypes utilisateurDéfinition Utilisation
function getArea(){ return (this.radius*this.radius*3.14); }
function Circle(radius){ this.radius = radius; this.getArea = getArea;
}
var bigCircle = new Circle(100);
alert(bigCircle.getArea());
Définition alternative (sans type)
var person = new Object() person.firstname="John" person.lastname="Doe"
![Page 23: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/23.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac23
Variables prVariables prééddééfinies relatives au navigateurfinies relatives au navigateur
Window – propriétés & méthodes de la fenêtre de navigation
name, status, location, closed, …alert(), close(), print(), scrollBy(), resizeBy(),…objet par défaut pour les appels aux fonctions
function f() {alert("message1");window.alert("message2");
}
f() // appel à f()window.f() // idem
![Page 24: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/24.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac24
Variables prVariables prééddééfinies relatives au navigateurfinies relatives au navigateur
Location – propriétés de l'URL courent
hash, host, port, protocol, search…reload(), replace()
Exemple: saut à une ancre (a1) de la même page
function jumpNear() { location.hash="a1" }
Exemple: chargement d'une autre page
function jumpFar() {location = "http://www.w3schools.com" // ou: location.replace("http://www.w3schools.com")
}
![Page 25: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/25.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac25
Variables prVariables prééddééfinies relatives au navigateurfinies relatives au navigateur
Navigator – propriétés & méthodes du navigateur en général
appName, appVersion, userLanguage, userAgent,…
function detectBrowser(){
var browser=navigator.appNamevar b_version=navigator.appVersionvar version=parseFloat(b_version)if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") &&
(version>=4)){ alert("Your browser is good enough!") }
else{ alert("It's time to upgrade your browser!") }
}
Exemple:
![Page 26: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/26.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac26
Variables prVariables prééddééfinies relatives au navigateurfinies relatives au navigateur
Screen – propriétés de l'écranavailHeight, availWidth, colorDepth, …
History – manipuler l'historiquelength, back(), forward(), go()
function precedente(){
history.back();// ou : history.go(-1)
}
Exemple:
![Page 27: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/27.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac27
JavaScriptJavaScript & DOM& DOM
Version "simplifiée" de DOM :certains méthodes de navigation ne sont pas disponibles (getNextSibling())d'autres sont renommées et/ou transformées en propriétés (firstChild au lieu de getFirstChild())création de "raccourcis"
document.i1 désigne l'élément qui a id="i1"(pour certains types d'éléments seulement !)table.cells[] donne les cellules d'un tableau…
![Page 28: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/28.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac28
Types prTypes prééddééfinis DOM HTMLfinis DOM HTML
Un type d'objet pour chaque élément HTMLbodyformtable, tablerow, tablecellparagraphanchorimage…
Propriétés ↔ attributs de l'élément HTMLex. image : align, border, ismap, src, …
![Page 29: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/29.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac29
ÉÉvvéénementsnements
provoqués par des actions de l'utilisateur sur certains éléments de la page HTML
chargement / fermeture de la page (onload, onunload)click souris, passage de la souris sur un élément(onclick, onmouseover, onmouseout…)appui d'une touche (onkeydown, onkeyup…)sélection de texte (onselect)envoi / r.a.z. d'un formulaire (onsubmit, onreset)…
on peut associer des actions JavaScript àl'événement
modèle : <élément-html onEvenement="actionJS…">…</élément-html>toutes les combinaisons élément-événement ne sont pas possibles!
![Page 30: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/30.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac30
Exemples d'Exemples d'éévvéénementsnements
chargement de la page
<body onload="validerNavigateur()">
changement d'un champ de texte
<input type="text" id="myId" onchange="transform(this.id)"/>
passage de la souris
<div id="myId" onmouseover="emphasize(this.id)" onmouseout=unemphasize(this.id) >
…
</div>
![Page 31: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/31.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac31
Exemples Exemples JavaScriptJavaScript
Créer un lien sans utiliser <a>:
<element-html onclick="location.replace(newUrl)">…
</element-html >
![Page 32: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/32.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac32
Exemples Exemples JavaScriptJavaScriptMise à jour périodique d'un horloge:
<script type="text/javascript">function startTime(){
var today=new Date()var h=today.getHours()var m=add0(today.getMinutes())var s=add0(today.getSeconds())
document.getElementById('txt').innerHTML=h+":"+m+":"+st=setTimeout('startTime()',500)
}</script>…<body onload="startTime()"><div id="txt"></div>
![Page 33: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/33.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac33
Exemples Exemples JavaScriptJavaScript
Attributs des événements: coordonnés de la souris, bouton appuyé,…
<script type="text/javascript">function show_coords(e){
x=e.clientXy=e.clientYalert("X coords: " + x + ", Y coords: " + y)alert("bouton: " + e.button)alert("élément: " + e.target.innerHTML)
}</script>
<body onmousedown="show_coords(event)">
![Page 34: Technologies de l’Internet](https://reader036.vdocuments.net/reader036/viewer/2022062504/62b0486fc483f80845703352/html5/thumbnails/34.jpg)
Technologies de l’Internet© iulian ober, 2007
IUT Blagnac34
Exemples Exemples JavaScriptJavaScript
Image dynamique
<script type="text/javascript">function changeSrc(){document.img0.src="hackanm.gif"
}</script>…
<img id="img0" src="compman.gif" alt="image" />