Liene 3informatique
Sébastien Verel
vereli3s.unie.fr
www.i3s.unie.fr/
∼
verelÉquipeSoBi-UniversitédeNieSophia-Antipolis
16 otobre 2009
Objetifs de la séane 6
1
Connaitrele prinipe duDOM
2
Savoirnaviguer dansleDOM
3
SavoirmodierleDOM
4
Savoirmodierunstyled'un élémentduDOM
5
Savoirélaborerun menuavejavasript
6
Savoirdéplaer des élémentsavejavasript
7
Savoirutiliser lesformulairesavejavasript
8
Savoirvérierunformulaire
Question prinipaledujour :
Quels sontlespossibilitésde javasript en manipulation de
douemnt?
Plan
1
Rappels etompléments
2
DOM
3
Javasript etCSS
4
Formulaires
Possibilité de javasript
Validerdeshampsde formulaires
Enregistrement etleture de ookies
Modiationdynamique del'aspetde ertains élémentde la
page
Ahage et masquagedeséléments
Déplaements desélémentsde lapage
Capture de ertains événementset modiation de lapage en
onséquene
Délement de ontenu
Roled'intefae aveune appliationté serveursansquitter
lapage
Le afé
Bases du langage
types :
lassique:
entier,réel,et.
pasdedélarationexpliite
utiliserlesommentairespourplussureté
Les tableaux
Unesuited'élémentsséparés pardesvirgulesest untableau
déni en extension:
"trois" , "deux" , "un" , "boom"
tableauxassoiatifs:
"fr" : "trois, deux, un, boom" ,
"en" : "three, two, one, boom" ,
"de" : "drei, zwei, eins, boom"
Bases du langage
fontions :
motléfuntion
engénéral dansl'élémenthead
paramètres,arguments:
nontypé
valeurnale:
return
paramètres:
pasdeobligationdepréseneàl'appel
Nombre de paramètres variables
Utilisation d'un tableau:
funtion affihe(str) {
for(var i = 0; i < str.length; i++)
alert(str[i℄);
}
affihe("trois", "deux", "un", "boom");
Bases du langage
objets :
pasdemotlédistintif:
sedénitsousformedefontion
instantiationàl'aidede new
existened'unobjet:
testsurl'objet
listedespropriétés:
utilisationdein
délarationdesméthodesetpropriétésdelasse: this
Exemple de lasse
funtion LaClasse {
this.opyright = "() S. Verel 2008" ;
this.Count = ount ;
var deompte = {
"fr" : "trois, deux, un, boom" ,
"en" : "three, two, one, boom" ,
"de" : "drei, zwei, eins, boom"
}
funtion ount(lang) {
if (deompte[lang℄)
windows.alert(deompte[lang℄);
}
}
Bases du langage
struture de ontle:
testbinaire:
if (window.XMLhttpRequest)
alert("youpi");
else
alert("tant pis");
bouleànombred'itérationdéni:
for(var i = 0; i < n; i++)
paroursdespropriétés:
for prop in window { ... }
bouleànombred'itérationindéni:
Inlusion de javasript
3 méthodes:
dansl'élément sript:
<sript type="text/javasript">
...
</sript>
ode externe:
<sript type="text/javasript" sr="devine.js">
</sript>
lorsd'un événement:
<body onload="affihe()">
...
</body>
Objets javasript : String
liste despropriétés et méthodes:
length
harAt(i)
ontat(" ")
replae(str1, str2)
substring
toLowerCase
split(sep)
searh(str),indexOf(str), lastIndexOf(str)
Objets javasript : Math
liste despropriétés et méthodes:
desonstantes
random()
abs(x)
fontions tigonométriques
log(x),exp(x)
sqrt(x)
pos(x,y)
min(x,y) ,max(x,y)
round, oor,eil
Objets javasript : Date
réation datedu jour:
new Date()
réation datedénie:
new Date("Ot 16,2008 10 :56:00")
new Date(2008, 10,16,10,56,00)
obtenir unepropriété :
get...
dénir unepropriété :
set...
Objets javasript : Image
instaniationlassique
img = new Image();
propriété de lasoure
img.sr = "ootier.jpg"
tester lehargement
if (img.omplete)
alert("'est hargé");
Objets javasript : history
bak()
forward()
go(n)
Objets javasript : loation
host:l'hte, le domaine,et leportutilisésdansl'url
href :urlomplète
hostname: nomde l'hote
pathname :hemin quisuitle nom dedomaine
reload()
Objets javasript : window
window.loation
window.history
redimensionnement :
resizeTo(x, y)
resizeBy(dx, dy)
repositionnement:
moveTo(x,y)
moveBy(dx, dy)
open("url", "nom","options")
Objets javasript : navigator
appName :nom dunavigateur
appCodeName:nom de ode dunavigateur
appVersion :version
plateform:systèmed'exploitation
Retour TP 05
javasript unlangage permissif
ilfaut êtreenore plusvigilant
ne pas oublier lesbonnes méthodesde programmation
Doument Objet Model
D.O.M. :Doument ObjetModel
modèleobjetde doument
modèleobjetpourmanipuler undoumentHTML
une API:appliationprogramming intefae
approhe desmodèles objetsduW3C :propriétés,méthodes,
desription
Doument Objet Model
Desription:
modèlebjetalquer surlahierarhie arboresente deséléments
de lapage
balise de lapage :noeud
noeuds parents, enfantsselonlaontenane
moreaude texte:noeud propre
Méthodes:
navigation dansl'arbre
Objetifs
interfae de programmation standartquelque soitOS
uniformiserlamanipulation desdouments web parsripts
ECMAsript :standardisation javasript
informationssur http://w3.org/DOM
Aés élément spéique
doument.getElementById("nom")
aessible seulement lorsquetout le doument aété hargé
funtion elementID(name) {
window.alert(doument.getElementById(name));
}
<boby>
<p id="para"> ... </p>
<sript type="text/javasript">
elementID("para");
Aés aux balises
doument.getElementByTagName("nomBalise")
retourne le tableauontenant toutesles balisesdésignées
aessible seulement lorsquetout le doument aété hargé
funtion elementParagraphe(name) {
window.alert(
doument.getElementByTagName("p") +
" ( " +
doument.getElementByTagName("p").length +
" éléments ) "
);
}
Navigation dans l'arboresene
Propriétés :
rstChild :premier noeud enfant
lastChild:dernier noeud enfant
hildNodes:tableau de touslesnoeuds enfants
parentNode :noeudparent
nextSibling :noeudsuivantde même niveau
previousSibling :noeudpréédentde même niveau
Information de noeud
Propriétés :
nodeName:nom de labalise dunoeud(
♯
text sitexte)nodeValue :seulement pourles noeudstexte
renvoiele texte
nodeType:type dunoeud
1: balise
2: attribut
3: texte
8: ommentaireXHTML
9: doument
10:DTD
11:fragment
Suppression d'élément
removeChild()
à partir dunoeudparent
suppressiondu lsdésignéen paramètre
funtion removeItem() {
var list = doument.getElementById("list");
if (list.hildNodes.length > 0)
list.removeChild(list.lastChild);
}
Ajout d'éléments
appendChild
à partir dunoeudparents
ajout l'enfant désignéà lasuitedesautresenfants
funtion addItem() {
var list = doument.getElementById("list");
var newNode = doument.reateElement("li");
list.appendChild(newNode);
}
reateElement(name) :réerunélementde typename
Ajout d'éléments
insertBefore
à partir dunoeudparents
ajout un noeud enfant
avant le noeuden seond paramètres
funtion addItem() {
var list = doument.getElementById("list");
var newNode = doument.reateElement("li");
list.insertBefore(newNode, list.firstChild);
}
Création élément de texte
reateTextNode
rée unnoeud lsde texte
var nr = 1;
funtion addItem() {
var list = doument.getElementById("list");
var newNode = doument.reateElement("li");
nr++;
var newTextNode = doument.reateTextNode("Item " + nr);
newNode.appendChild(newTextNode);
list.appendChild(newNode);
}
Manipulation d'attributs
setAttribute
2 arguments:le nom de l'attributetsa valeur
var nr = 1;
funtion addItem() {
var list = doument.getElementById("list");
var newNode = doument.reateElement("li");
nr++;
var newTextNode = doument.reateTextNode("Item " + nr);
var newLink = doument.reateElement("a");
newLink.setAttribute("href", "http://www.i3s.unie.fr/~verel");
Clonage d'élément
loneElement
true :opieen profondeur aveenfant
false :opiedunoeud seulement
funtion addItem(mode) {
var list = doument.getElementById("list");
var newItem = list.firstChild.loneNode(mode);
list.appendChild(newItem);
}
Remplaement d'élément
replaeChild
depuis le noeudparent
2 arguments:substitue le noeud en seond argument par lenoeud
en premier argument
var nr = 1;
funtion addItem() {
var list = doument.getElementById("list");
var newNode = doument.reateElement("li");
nr++;
var newTextNode = doument.reateTextNode("Item " + nr);
Modiation de fragment
innerHtml
Modie leode interne HTMLde n'importequelélément.
Non standardisé,nonspéié dansDOM, maismarhe quand
même.
var nr = 1;
funtion addItem() {
var list = doument.getElementById("list");
nr++;
var newTextNode = "<li>Item " + nr + " </li>";
newNode.appendChild(newTextNode);
list.innerHTML += newNode;
Positionnement des éléments
Avetout saufIE :
.style.left ="0px"
.style.top ="0px"
AveIE:
.style.posLeft =0
.style.posTop =0
funtion position(nom) {
var el = doument.getElementById(nom);
el.style.left = "0px";
el.style.posLeft = 0;
el.style.top = "0px";
Navigation toujours apparente
Avetout saufIE :
window.pageXoset etwindow.pageYoset
AveIE:
window.body.srollLeft etwindow.body.srollTop
funtion positionNavigation() {
var nav = doument.getElementById("navigation");
var x, y;
var navwidth = 155;
if (windiw.innerWidth) {
x = window.innerWidth + window.pageXoffset - navwidth;
y = window.pageYoffset + 10;
} else {
with (doument.body) {
x = lientWidth + srollLeft - navwidth;
y = srollTop + 10;
}
}
nav.style.left = x + "px";
nav.style.posLeft = x;
nav.style.top = y + "px";
SébastienVerel ProgrammationWeb
Navigation toujours apparente
funtion positionNavigation() {
var nav = doument.getElementById("navigation");
var x, y;
var navwidth = 155;
if (window.innerWidth) {
x = window.innerWidth + window.pageXoffset - navwidth;
y = window.pageYoffset + 10;
} else {
with (doument.body) {
x = lientWidth + srollLeft - navwidth;
y = srollTop + 10;
}
}
nav.style.left = x + "px";
Aés aux styles CSS
aèsparpropriété styleommunà toutobjet
tiret
−
impossible:remplaerpar majusule("à lajava")funtion makeBold() {
doument.getElementById("para").style.fontWeight = "bold" ;
window.setTimeOut("makeLighter();", 1000);
}
funtion makeLighter() {
doument.getElementById("para").style.fontWeight = "lighter" ;
window.setTimeOut("makeBold();", 1000);
}
window.onload = makeBold ;
Aés aux lasses
lassName
funtion makeBold() {
doument.getElementById("para").style.lassName = "strong" ;
window.setTimeOut("makeLighter();", 1000);
}
funtion makeLighter() {
doument.getElementById("para").style.lassName = "weak" ;
window.setTimeOut("makeBold();", 1000);
}
Aés aux feuilles de style individuelles
styleSheets :tableauxquiontienttoutesles feuilles
disable:true ou falsepourativer ou nonlafeuille
possibilitéd'ativerlafeuillevoulue
funtion makeBold() {
doument.styleSheets[0℄.disable = false;
doument.styleSheets[1℄.disable = true;
window.setTimeOut("makeLighter();", 1000);
}
funtion makeLighter() {
doument.styleSheets[0℄.disable = true;
doument.styleSheets[1℄.disable = false;
window.setTimeOut("makeBold();", 1000);
}
Aés aux regles de CSS
aveIE :
propriété rules
autreque IE:
propriété ssRules
funtion hangeColor(i) {
if (doument.styleSheets[i℄.rules) {
doument.styleSheets[i℄.rules[0℄.style.olor = randomColor() ;
doument.styleSheets[i℄.rules[1℄.style.olor = randomColor() ;
} else if (doument.styleSheets[i℄.ssRules) {
doument.styleSheets[i℄.ssRules[0℄.style.olor = randomColor() ;
doument.styleSheets[i℄.ssRules[1℄.style.olor = randomColor() ;
}
Disparition de ontenu
Changements réalisésaveCSS lorsqueparexemple :
Erand'attente quidisparait
Un seulongletahéà lafois
Plusieurs possibilités:
utiliserle DOM:hangement de l'arbre
CCS, propriété visibility
CSS, propriétédisplay
Disparition de ontenu : visibility
funtion showHide(show, hide) {
doument.getElmentById(show).style.visibility = "visible" ;
doument.getElmentById(hide).style.visibility = "hidden" ;
}
Mais positionnementabsolu :diéreneentre navigateur
Disparition de ontenu : display
funtion showHide(show, hide) {
doument.getElmentById(show).style.display = "blok" ;
doument.getElmentById(hide).style.display = "none" ;
}
Modiation du pointeur de souris
ursor
propriétéde urseur
window.onload = funtion() {
doument.getElmentById("helpButton").style.ursor = "help";
}
auto, rosshair,default, e-resize,help, move, n-resize, ne-resize,
nw-resize, pointer,s-resize, se-resize,sw-resize,test, w-resize,wait.
Objetifs
Communiation aveleserveur:
donnéessaisiespuisenvoyé auserveur
Validationdesdonnées
autres opérationspossibles
Formulaire ave javasript
utilisation de doument.forms
tableau de tousles formulaires
parl'indie,ou par le"name" duformulaire
utilisation de doument.forms[℄.elements
tableau de tousles élémentsduformulaire
parl'indie,ou par le"name" de l'élément
<form name="mainForm">
...
</form>
...
doument.forms["mainForm"℄
doument.forms[0℄
douemnt.forms[0℄.elements["element1"℄
Aès aux hamps de texte
.elements[name℄.value
propriétévaluedonne aésau hampstexteen leture ou ériture
funtion showText(f) {
window.alert(f.elements["textField"℄.value);
}
...
<form>
<input type="text" name="textField"/>
<textarea> bla bla </textaera>
<input type="password" />
<input type="button" value="show text"
Aés aux ases à oher
heked
retourne true silaase est ohée
funtion showStatus(f) {
window.alert("the hakbox is " +
(f.elements["hkBox"℄.heked? "heked." : "not heked.")
);
}
...
<form>
<input type="hekbox" name="hkBox"/>
<input type="button" value="show status"
Aés à des boutons radio
value etheked
désignation dugroupe :tableauxdesboutons
aés àlavaleuret àsa validation
funtion showStatus(f) {
var s = "";
for(var i = 0; i < f.elements["radioButton"℄.length; i++) {
var btn = f.elements["radioButton"℄[i℄;
s += btn.value + " : " + btn.heked + "\n";
}
window.alert(s);
}
Aés à des listes de séletion
seletIndex
-1 :si auune séletionindiede l'élément séletionné
options
tableau deséléments de laliste
propriétéseleted :truesi séletionné
funtion showStatus(f) {
var index = f.elements["seletList"℄.seletIndex;
if (index == -1)
window.alert("quedal");
else {
var element = f.elements["seleList"℄.options[index℄;
Aés à une liste à hoix multiple
seletIndex
-1 :si auune séletionindie:premier élémentséletion(inutile)
options
tableau deséléments de laliste
propriétéseleted :truesi séletionné
Aés à une liste à hoix multiple
funtion showStatus(f) {
var index = f.elements["seletListM"℄.seletIndex;
if (index == -1)
window.alert("quedal");
else {
var list = f.elements["seleListM"℄;
for(var i = 0; i < list.options.length; i++) {
var option = list.options[i℄;
window.alert("Element #" + i + " (aption: " +
option.text + ", value: " + option.value + ") " +
(option.seleted ? "seleted." : "not seleted.") + "\n" );
}
}
Compléments
Désativation deséléments de formulaire
envoie d'un formulaire
empêher l'envoi
f.elements["password"℄.disabled = true;
doument.forms[0℄.submit();
<a href="javasript:doument.forms[0℄.submit();"> submit form</a>
<form onsubmit="return false;">
<form onsubmit="return hekform(this);">
Compléments
Donner le fousà unhamp
Séletionde textedans unhamp
f.elements["password"℄.fous();
field.setSeletRange(0, field.value.length);
var range : field.reatTextRange();
range.moveStart("harater", .0);
range.moveEnd("harater", field.value.length - 1);
range.selet();
Objetifs de la séane 6
1
Connaitrele prinipe duDOM
2
Savoirnaviguer dansleDOM
3
SavoirmodierleDOM
4
Savoirmodierunstyled'un élémentduDOM
5
Savoirélaborerun menuavejavasript
6
Savoirdéplaer des élémentsavejavasript
7
Savoirutiliser lesformulairesavejavasript
8
Savoirvérierunformulaire
Question prinipaledujour :
Quels sontlespossibilitésde javasript en manipulation de
douemnt?
