Vous êtes sur la page 1sur 64

Programmation Web :

DOM / JavaScript

10:31:21

Programmation Web

DOM = Document Object Model


API (Application Programming Interface) pour la
manipulation de HTML / XML
Dfinit la structure logique des documents
Dfinit la faon dy accder, de la manipuler
Crer des documents
Parcourir leur structure
Ajouter, effacer, modifier des lments
Ajouter, effacer, modifier leur contenu
10:31:27

Programmation Web

Quest-ce que le DOM ?


<table>
<tbody>
<tr><td>Shady Grove</td>
<td>Aeolian</td>
</tr>
<tr><td>Over the River, Charlie</td>
<td>Dorian</td>
</tr>
</tbody>
</table>
10:31:31

Programmation web

Quest-ce que le DOM ?

Reprsentation arborescente du document


Modle objet (structure + mthodes)
Permet la manipulation du document
Une implmentation : JavaScript
Des implmentations :

10:31:36

JavaScript IE
JavaScript Mozilla / Firefox
JavaScript Opera

Programmation web

JavaScript : Principe

Langage de script objet


Syntaxe style C / C++ / Java
Sensible la casse
Nest PAS du Java
Excut par le client Web
Peut tre dsactiv sur le client
Nombreux objets pour la manipulation HTML
Gestion des vnements HTML
Rendre les pages dynamiques (HTML+CSS+JS)
Haut niveau dincompatibilit

10:31:40

Programmation Web

JavaScript : Balise script


<script type="text/javascript"
language="JavaScript">
<!-Masquer le script aux
script
navigateurs non compatibles
avec JavaScript
// -->
</script>
<script type="text/javascript"
language="JavaScript" src="URI">
</script>
10:31:44

Programmation Web 2012-2013

JavaScript : Exemple
<html>
<head>
<title>Ma premire page Web</title>
</head>
<body>
<script type="text/javascript"
language="JavaScript">
<!-document.writeln("Salut !") ;
// -->
</script>
</body>
</html>
10:31:47

Programmation Web 2012-2013

Variables
Dclaration de variables facultative
Variables non types la dclaration
var nom_variable ;
Typage dynamique laffectation
Types grs:

10:31:51

Nombres (10, 3.14)


Boolens (true, false)
Chanes ("Salut !", 'Salut !' )
null
undefined
Programmation Web 2012-2013

Structures conditionnelles
if (condition)
{
instructions ;
}
[ else
{
instructions ;
} ]

10:31:55

Programmation Web 2012-2013

Structures conditionnelles
switch (expression)
{
case tiquette :
instructions ;
break ;
case tiquette :
instructions ;
break ;
default :
instructions ;
}
10:31:59

Programmation Web 2012-2013

10

Structures itratives
while (condition)
{
instructions ;
}
do
{
instructions ;
}
while (condition) ;
10:32:03

Programmation Web 2012-2013

11

Structures itratives
for (instr ; condition ; instr)
{
instructions ;
}
for (variable in objet)
{
instructions ;
}
10:32:07

Programmation Web 2012-2013

12

Commentaires
// Commentaire ligne
/* Commentaire multi-lignes */

10:32:11

Programmation Web 2012-2013

13

Fonctions
Valeur de retour non type
Arguments non typs
// Dclaration
function ma_fonction(arguments)
{
instructions ;
return quelque_chose; // ou pas
}
ma_fonction(12) ; // Appel
10:32:15

Programmation Web 2012-2013

14

Objets prdfinis
window
alert(message)
// Message davertissement

confirm(message)
// Message de confirmation : retourne
true ou false

prompt(message, valeur_par_dfaut)
// Bote de saisie : retourne la chane
saisie

10:32:19

Programmation Web 2012-2013

15

Objets prdfinis
document
write(message)
// Ecrire dans le document

writeln(message)
// Ecrire dans le document (retour la
ligne)

10:32:23

Programmation Web 2012-2013

16

Chanes : Proprits & Mthodes


Proprits

length

Mthodes

10:32:27

charAt(index)
charCodeAt(index)
concat(chaine2, chaine3, )
fromCharCode(code1, code2, )
indexOf(aiguille[, index])
lastIndexOf(aiguille[, index])
match(expr_reg)
Programmation Web 2012-2013

17

Chanes : Exemples
var s = "Bon anniversaire Benjamin" ;
document.write(s.charAt(2)) ;
n
document.write(s.charCodeAt(2)) ;
110
document.write(s.concat(" du groupe C12")) ;
Bon anniversaire Benjamin du groupe C12
document.write(String.fromCharCode(65, 66, 67)) ;
ABC
document.write(s.indexOf("Benjamin")) ;
17
document.write(s.lastIndexOf("a")) ;
21
document.write(s.match(/Benjamin$/)) ;
Benjamin (null si non trouv)
10:32:31

Programmation Web 2012-2013

18

Chanes : Mthodes
Mthodes

replace(expr_reg, nouvelle_chaine)
search(expr_reg)
slice(debut[, fin])
split(separateur[, limite])
substr(debut[, taille])
substring(debut, fin)
toLowerCase()
toUpperCase()

Oprateurs

10:32:36

+
Programmation Web 2012-2013

19

Chanes : Exemples
var s = "Bon anniversaire Benjamin" ;
document.write(s.replace(/i/g, 'I')) ;
Bon annIversaIre BenjamIn
document.write(s.search(/n{2}/i)) ;
5
document.write(s.slice(17)) ;
Benjamin
document.write(s.split(" ")) ;
Bon,anniversaire,Benjamin
document.write(s.substr(4, 12)) ;
anniversaire
document.write(s.substring(4, 16)) ;
anniversaire
document.write(s.toUpperCase()+s.toLowerCase()) ;
BON ANNIVERSAIRE BENJAMINbon anniversaire benjamin
10:32:41

Programmation Web 2012-2013

20

Objet Math
Proprits

E, LN10, LN2, LOG10E, LOG2E, PI,


SQRT1_2, SQRT2

Mthodes

10:32:45

abs(val)
acos(val), cos(val),
exp(val), log(val)
floor(val), round(val), ceil(val)
max(val1, val2), min(val1, val2)
pow(val, puiss), sqrt(val)
random() // 0 1
Programmation Web 2012-2013

21

Objet Math : Exemples


document.write(115.04+15) ;
130.04000000000002
(Euh ?...)
document.write(Math.PI) ;
3.141592653589793
document.write(Math.abs(-12.34)) ;
12.34
document.write(Math.floor(12.54)) ;
12
document.write(Math.round(12.54)) ;
13
document.write(Math.ceil(12.54)) ;
13
document.write(Math.random()) ;
0.394555831655689
10:32:50

Programmation Web 2012-2013

22

Proprits & Fonctions suprieures


Proprits

Infinity, NaN, undefined

Fonctions

10:32:54

eval(chaine)
isFinite(nombre)
isNaN(objet)
parseFloat(chaine)
parseInt(chaine)
escape(chaine)
unescape(chaine)
Programmation Web 2012-2013

23

Proprits & Fonctions suprieures


document.write(eval("Math.pow(3+2, 2)")) ;
25
document.write(isFinite(Math.log(0))) ;
false
document.write(isNaN("abcd")) ;
true
document.write("12.34"+2) ;
12.342
document.write(parseFloat("12.34")+2) ;
14.34
document.write(escape("Bon anniversaire")) ;
Bon%20anniversaire
document.write(unescape("Bon%20anniversaire")) ;
Bon anniversaire
10:32:58

Programmation Web 2012-2013

24

Tableaux
Objet Array
Dclaration
var tab1 = new Array(taille) ;
var tab2 = new Array(1, "a", 9, ) ;
index 0
1
2
Utilisation
window.alert(tab2[0]) ; // 1
tab2[2] = 6 // 6 remplace 9
Accroissement automatique de la taille
var tab1 = new Array(2) ;
tab1[200] = 5 ;

10:33:02

Programmation Web 2012-2013

25

Tableaux
Parcours
var tab2 = new Array(1, "a", 9) ;
tab2[200] = 12 ;
for (i in tab2)
window.alert("tab2[" + i + "] = "
+ tab2[i]) ;
// tab2[0] = 1
// tab2[1] = a
// tab2[2] = 9
// tab2[200] = 12
10:33:06

Programmation Web 2012-2013

26

Tableaux : Proprits & Mthodes

Proprits

length

Mthodes

10:33:10

concat(tab2, tab3, )
join(spar) Transforme un tableau en chane de
caractres.
pop() Retire le dernier lment d'un tableau
push(val1, val2, ) Ajoute un ou plusieurs
lments la fin d'un tableau.
shift():Retire le premier lment d'un tableau
unshift(val1, val2, )
slice(dbut[, fin])
Programmation Web 2012-2013

27

Contrle de formulaires

Vrifier la cohrence de la saisie


Contrles sur le client
vite les transmissions client / serveur
Contrles possibles:

Prsence de valeur
Numrique / Chane
Expressions rgulires

vnement onSubmit

10:33:14

Programmation Web 2012-2013

28

Contrle de formulaires
<html><head><title>Contrle</title>
<script type="text/javascript">
function verif() {
if (document.formu.txt.value != '')
return window.confirm('Envoyer ?') ;
return false ; }
</script></head><body>
<form name="formu" action="URI" method="GET"
onSubmit="return verif() ;">
<input type="text" name="txt">
<input type="submit" value="Envoyer">
</form></body></html>
10:33:18

Programmation Web 2012-2013

29

Formulaires : Proprits & Mthodes


Proprits

action
elements
encoding
length
method
name
target

Mthodes

10:33:22

reset()
submit()
Programmation Web 2012-2013

30

Objets commandes de formulaires

Text
Textarea
Hidden
Password
CheckBox
Radio (/!\ tableau de /!\)
Submit / Reset
Select
Option
FileUpload

10:33:26

Programmation Web 2012-2013

31

Formulaires : Exemple
<form name='formu' onSubmit='return verif(this);'>
<input type='text' name='texte'><br>
<select name='sel'>
<option>?
<option value=1>Un
<option value=2>Deux
</select><br>
<input type='radio' name='rad' id='rad1'>
<label for='rad1'>oui</label>
<input type='radio' name='rad' id='rad2'>
<label for='rad2'>non</label><br>
<input type='checkbox' name='chk' id='chk1'>
<label for='chk1'>OK</label><br>
<input type='submit' value='Envoyer'>
</form>
10:33:30

Programmation Web 2012-2013

32

Formulaires : accs aux champs


<form name='formu' onSubmit='return verif(this);'>
<input type='text' name='texte'> ...
<script type="text/javascript">
function verif(f) {
... f.texte.value ; }
</script>

Nom du champ objet champ texte

<form name='formu' onSubmit='return verif();'>


Nom du
formulaire
=objet
formulaire
<input
='text'
name
'texte'
> ...
Objet type
formulaire
Index du formulaire
dans la page
<script type="text/javascript"
> dans
Nom du champ
le formulaire
function verif(f) {Nom du formulaire dans la page
Index du champ dans le formulaire
... document.formu.texte.value ;
Nom du champ dans le formulaire
... document.forms[0].elements[0].value ;
... document.forms["formu"].elements["texte"].value ; }
</script>
Tableau des champs du formulaire
10:33:34

Tableau des formulaires de la page

Programmation Web 2012-2013

33

Formulaires : Exemple
<script type="text/javascript">
function verif(f)
{
window.alert(f.texte.value) ;
window.alert(f.sel.selectedIndex) ;
window.alert(f.sel[f.sel.selectedIndex].text) ;
window.alert(f.sel[f.sel.selectedIndex].value) ;
window.alert(f.rad[0].checked) ;
window.alert(f.chk.checked) ;
return false ;
}
</script>

10:33:38

Programmation Web 2012-2013

34

Expressions rationnelles
Expressions rationnelles / rgulires

/modele/drapeaux
(drapeaux: g, i, gi)
new RegExp("modele"[, "drapeaux"])

Modles

10:33:42

^ : dbut de
$ : fin de
* : 0 n fois
+ : 1 n fois
? : 0 1 fois
. : un caractre sauf retour chariot
| : ou
Programmation Web 2012-2013

35

Expressions rationnelles
Modles

10:33:46

(x) : x et mmorise
{n} : n fois
{n,} : au moins n fois
{n,m} : de n m fois
[xyz] : 1 lment de la liste
[a-z] : 1 lment de la srie
[^xyz] : 1 lment n'tant pas dans la liste
[^a-z] : 1 lment n'tant pas dans la srie
\b : frontire de mot
\B : non frontire de mot
Programmation Web 2012-2013

36

Expressions rationnelles
Modles

\d = [0-9]: chiffre
\D = [^0-9]: non chiffre
\n : retour la ligne
\s : sparateur de mot
\S : non sparateur de mot
\t : tabulation
\w = [A-Za-z0-9_] : 1 caractre alphanumrique

Mthodes

10:33:50

test(chaine)
Programmation Web 2012-2013

37

Expressions rationnelles : Exemples


<script type="text/javascript">
document.write(/l/.test('Hello')) ;
true
document.write(/^l/.test('Hello')) ;
false
document.write(/^h/.test('Hello')) ;
false
document.write(/^h/i.test('Hello')) ;
true
document.write(/^Hel.o/.test('Hello')) ;
true
document.write(/^Hel+o/.test('Hello')) ;
true
document.write(/^He+llo/.test('Hello')) ;
true
document.write(/^Hea*llo$/.test('Hello')) ;
true
document.write(/^He(l|o)*$/.test('Hello')) ;
true
document.write(/^H[leos]+/.test('Hello')) ;
true
document.write(/^H[^leo]+/.test('Hello')) ;
false
document.write(/^H[^kyz]+/.test('Hello')) ;
true
document.write(/^H[a-z]*/.test('Hello')) ;
true
document.write(/^H[a-z]*$/.test('Hello')) ;
true
</script>
10:33:53

Programmation Web 2012-2013

38

Dates : Proprits & Mthodes


Mthodes

10:33:57

Constructeur
getDay(), attention de 0 (dimanche) 6 (samedi)
getDate() / setDate()
getMonth() / setMonth(), attention de 0 11
getHours()/ setHours()
getMinutes() / setMinutes()
getTime() / setTime()
getYear() / setYear() / getFullYear() / setFullYear()
parse()
Programmation Web 2012-2013

39

Dates : Exemples
var today = new Date()
document.write(today) ; Tue Nov 02 2010 00:11:36 GMT+0100
var birthday = new Date("December 17, 1995
03:24:00")
document.write(birthday)Sun
; Dec 17 1995 03:24:00 GMT+0100
birthday = new Date(95,11,17)
document.write(birthday)Sun
; Dec 17 1995 00:00:00 GMT+0100
birthday = new Date(95,11,17,3,24,0)
document.write(birthday)Sun
; Dec 17 1995 03:24:00 GMT+0100
0
document.write(birthday.getDay())
;
17
document.write(birthday.getDate())
;
birthday.setDate(25) ;
document.write(birthday)Mon
; Dec 25 1995 03:24:00 GMT+0100
10:34:01

Programmation Web 2012-2013

40

Dates : Exemples
document.write(birthday.getMonth())
;
11
birthday.setMonth(10) ;
document.write(birthday)Sat;Nov 25 1995 03:24:00 GMT+0100
95
document.write(birthday.getYear())
;
birthday.setYear(96) ;
document.write(birthday)Mon
; Nov 25 1996 03:24:00 GMT+0100
1996
document.write(birthday.getFullYear())
;
birthday.setFullYear(2010) ;
document.write(birthday)Thu
; Nov 25 2010 03:24:00 GMT+0100
807919200000
document.write(Date.parse(
"Aug 9, 1995")) ;

10:34:05

Programmation Web 2012-2013

41

Images : Proprits & Mthodes


Proprits

complete
width
height
name
src

Mthodes

constructeur
Image()
Image(largeur, hauteur)

10:34:10

Programmation Web 2012-2013

42

Images: Exemples
<script type="text/javascript">
// Une image
rouge = new Image(100, 100) ;
rouge.src = 'rouge.gif' ; // Prchargement
// Une autre image
vert = new Image(100, 100) ;
vert.src = 'vert.gif' ; // Prchargement
// Modification de la 13e image de la page Web
document.images[12].src = rouge.src ;
// Modification de la 15e image de la page Web
document.images[14].src = rouge.src ;
</script>
10:34:14

Programmation Web 2012-2013

43

Relations entre code HTML et DOM


Deux visions, normalement concordantes :

Le code HTML produit par le concepteur


Linterprtation qui en faite par le navigateur

Discordances possibles :

Erreurs dans le code (code non valide)


Balises non supportes (HTML 5, par exemple)
Modifications de la page par JavaScript

Comment explorer ltat rel de linterprtation


du code HTML / JavaScript par la navigateur ?
10:34:18

Programmation Web 2012-2013

44

Firefox : Firebug
Module complmentaire de Firefox
https://addons.mozilla.org/fr/firefox/addon/firebug/

Principales fonctionnalits :

dition
Dbogage
Modification
HTML
CSS
JavaScript
HTTP

Cest loutil indispensable du dveloppeur Web


10:34:23

Programmation Web 2012-2013

45

Firefox : Firebug

10:34:27

Programmation Web 2012-2013

46

IE : outils de dveloppement

10:34:31

Programmation Web 2012-2013

47

Et les autres navigateurs ?


Opera

Widgets permettent dobtenir des outils de


dveloppement

Safari

Version allge de Firebug

Google Chrome

10:34:36

Outils de dveloppement intgrs

Programmation Web 2012-2013

48

Relations entre code HTML et DOM

10:34:40

Programmation Web 2012-2013

49

Relations entre code HTML et DOM

10:34:44

Programmation Web 2012-2013

50

Solutions pour modifier le DOM


innerHTML

Construire une chane de caractres contenant du


code HTML
Affecter cette chane de caractres lattribut
innerHTML dun lment de la page
Le navigateur interprte le contenu de la chane de
caractres affecte pour modifier la structure du
document

DOM pur

10:34:49

Construire de nouveaux lments logiques du


document avec des mthodes JS
Construire les liens de parent entre ces lments
Programmation Web 2012-2013

51

innerHTML : exemple
Identifier un lment HTML
<div id="un_id"></div>

Accder un lment
e = document.getElementById("un_id");

Construire une chane contenant du HTML


s = "Voici <b>un texte</b>";

Modifier le contenu de llment


e.innerHTML = s;

Interprtation automatique par le navigateur


du nouveau contenu pour modifier le document
10:34:54

Programmation Web 2012-2013

52

DOM pur : exemple


Identifier un lment HTML
<div id="un_id"></div>

div
id="un_id"
b

Voici

Accder un lment

un texte

e = document.getElementById("un_id");

Crer un nud de type texte


t1 = document.createTextNode('Voici ');
t2 = document.createTextNode('un texte');

Crer un nouveau nud de type balise


b = document.createElement('b');

Construire des liens de parent


e.appendChild(t1);
b.appendChild(t2); e.appendChild(b);
10:34:58

Programmation Web 2012-2013

53

Gestion des vnements


Interactions HTML / JavaScript
Possibilit d'associer du code JavaScript
certains vnements dans la page Web
Evnements

10:35:03

OnMouseOver
OnMouseOut
OnClick
OnKeyDown
OnFocus
OnBlur

Programmation Web 2012-2013

54

Mise en place des vnements


<a href='URI_cible'
onMouseOver="code_javascript1"
onMouseOut="code_javascript2">Support</a>
<a href='URI_cible'
onMouseOver="a=1"
onMouseOut="b=2">Support</a>
<a href='URI_cible'
onMouseOver="allumer()"
onMouseOut="eteindre()">Support</a>

10:35:08

Programmation Web 2012-2013

55

vnement onKeyUp
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>onKeyUp</title>
<script type='text/javascript' language='JavaScript'>
<!
function maj() {
document.f.mail.value =
document.f.prenom.value.toLowerCase()+'.'
+document.f.nom.value.toLowerCase() ; }
// -->
</script>
</head> <body>
<form name='f'>
Nom
<input type='text' name='nom'
onKeyUp='maj()'><br>
Prenom <input type='text' name='prenom' onKeyUp='maj()'><br>
Login <input type='text' name='mail' disabled>
</form>
</body> </html>

Exemple

10:35:12

Programmation Web 2012-2013

56

vnement onMouseOver / Out


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>Rollover</title>
<script type='text/javascript' language='JavaScript'>
<!
function change(image, src) {
document.images[image].src = src ; }
// -->
Tableau des images du
</script>
</head>
document. Accs par leur
<body>
nom ou leur indice
<a href='#'
onMouseOver="change('image1', 'vert.gif')"
onMouseOut="change('image1', 'rouge.gif')">
<img name='image1' width='100' height='100'
src='rouge.gif' alt='disque'></a>
</body>
</html>

Exemple

10:35:16

Programmation Web 2012-2013

57

vnement onMouseOver / Out


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>Rollover</title>
<script type='text/javascript' language='JavaScript'>
function change(image, src) {
document.images[image].src = src ; }
</script> </head> <body> <ul>
<li><a href='#' onMouseOver="change('image1', 'vert.gif')"
onMouseOut="change('image1', 'rouge.gif')">Disque 1</a>
<li><a href='#' onMouseOver="change('image2', 'vert.gif')"
onMouseOut="change('image2', 'rouge.gif')">Disque 2</a>
<li><a href='#' onMouseOver="change('image3', 'vert.gif')"
onMouseOut="change('image3', 'rouge.gif')">Disque 3</a> </ul>
<img name='image1' width='100' height='100' src='rouge.gif'
alt='disque'>
<img name='image2' width='100' height='100' src='rouge.gif'
alt='disque'>
<img name='image3' width='100' height='100' src='rouge.gif'
alt='disque'>
</body> </html>

Exemple

10:35:20

Programmation Web 2012-2013

58

Bote outils (1/3)


// Dtection du navigateur
// Netscape 4
var nava = document.layers ? true : false ;
// IE, Firefox, Netscape 6, Opera
var dom = document.getElementById ? true : false ;
// IE, Opera
var iex = document.all ? true : false ;
// Rcuprer un objet identifi
function getobj(id)
{
var obj ;
if (nava)
{ obj=document.id }
else if (dom) { obj=document.getElementById(id) }
else if (iex) { obj=id }
return obj ;
}
10:35:24

Programmation Web 2012-2013

59

Bote outils (2/3)


// Rcuprer le style d'un objet identifi
function getstyle(id)
{
var obj ;
if (nava)
{ obj=document.id }
else if (dom)
{ obj=document.getElementById(id).style }
else if (iex)
{ obj=id.style }
return obj ;
}

10:35:28

Programmation Web 2012-2013

60

Bote outils (3/3)


// crire un contenu HTML dans un objet identifi
function writecontent(obj, content)
{
if (nava) {
var objet=getstyle(obj) ;
objet.document.write(content) ;
objet.document.close() ;
}
else if (dom) {
document.getElementById(obj).innerHTML=content ;
}
else if (iex) {
document.all(obj).innerHTML=content ;
}
}
10:35:31

Programmation Web 2012-2013

61

vnement onMouseOver / Out


function getobj(id)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML
4.01 getstyle(id)
Transitional//EN">
function
<html> <head> <title>Image cliquable
title>
function</writecontent(obj,
content)
<script type='text/javascript' language='JavaScript'
src='outils.js'> </script> </head> <body>
<h1>Survolez mon image pour trouver les zones cliquables ;-) </h1>
<img src='formes.gif' width='256' height='256' alt="L'image sur
laquelle il faut cliquer" usemap='#map'>
<map name='map'>
<area href='#' alt='Cercle' title='Cercle' shape='circle'
coords='94,67,49' onMouseOver="writecontent('info', 'Cercle')"
onMouseOut="writecontent('info', '')">
<area href='#' alt='Rectangle' title='Rectangle' shape='rect'
coords='171,20,233,150' onMouseOver="writecontent('info',
'Rectangle')"
onMouseOut="writecontent('info', '')">
<area href='#' alt='Etoile' title='Etoile' shape='poly'
coords='116,159,128,180,151,185,136,202,138,227,116,217,94,227,9
6,203,80,184,103,180' onMouseOver="writecontent('info',
'Etoile')"
onMouseOut="writecontent('info', '')">
</map> <span id='info'></span>
</body> </html>

Exemple

10:35:35

Programmation Web 2012-2013

62

Modification dynamique de style


getobj(id)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML function
4.01 Transitional//EN">
function getstyle(id)
<html> <head> <style type'text/css'> <!-function
writecontent(obj,
content)
.visible { } .invisible { display
: none
; }
.cache_cache { text-align : right ; }
</style>
<script type='text/javascript' language='JavaScript'
src='outils.js'> </script>
<script type='text/javascript' language='JavaScript'>
<!-- function cache_cache(id) {
var obj=getobj(id) ;
if (obj.className == 'visible') obj.className = 'invisible' ;
else obj.className = 'visible' ; } // --> </script>
<title>Cache-cache</title> </head>
<body>
<div class='cache_cache'>
<a href="javascript:cache_cache('div1')">montrer / cacher</a>
</div>
<div id='div1' class='visible'> Texte Texte Texte Texte </div>
</body> </html>

Exemple

10:35:39

Programmation Web 2012-2013

63

Modification dynamique de contenu


function
getobj(id)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
function getstyle(id)
<html> <head> <style type'text/css'> <!-function
writecontent(obj,
content)
.visible { } .invisible { display
: none
; }
.cache_cache { text-align : right ; }
</style>
<script type='text/javascript' language='JavaScript'
src='outils.js'> </script>
<script type='text/javascript' language='JavaScript'> <!-function cache_cache(lien, id) { var obj=getobj(id) ;
if (obj.className == 'visible')
{ lien.innerHTML = 'monter' ; obj.className='invisible' ; }
else
{ lien.innerHTML = 'cacher' ; obj.className='visible' ; }
} // --> </script>
<title>Cache-cache</title> </head> <body>
<div class='cache_cache'>
<a href="#" onClick="cache_cache(this, 'div1')">cacher</a>
</div>
<div id='div1' class='visible'> Texte Texte Texte Texte </div>
</body> </html>

Exemple

10:35:43

Programmation Web 2012-2013

64

Vous aimerez peut-être aussi