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">
<!-[Link]("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" ;
[Link]([Link](2)) ;
n
[Link]([Link](2)) ;
110
[Link]([Link](" du groupe C12")) ;
Bon anniversaire Benjamin du groupe C12
[Link]([Link](65, 66, 67)) ;
ABC
[Link]([Link]("Benjamin")) ;
17
[Link]([Link]("a")) ;
21
[Link]([Link](/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" ;
[Link]([Link](/i/g, 'I')) ;
Bon annIversaIre BenjamIn
[Link]([Link](/n{2}/i)) ;
5
[Link]([Link](17)) ;
Benjamin
[Link]([Link](" ")) ;
Bon,anniversaire,Benjamin
[Link]([Link](4, 12)) ;
anniversaire
[Link]([Link](4, 16)) ;
anniversaire
[Link]([Link]()+[Link]()) ;
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
[Link](115.04+15) ;
130.04000000000002
(Euh ?...)
[Link]([Link]) ;
3.141592653589793
[Link]([Link](-12.34)) ;
12.34
[Link]([Link](12.54)) ;
12
[Link]([Link](12.54)) ;
13
[Link]([Link](12.54)) ;
13
[Link]([Link]()) ;
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
[Link](eval("[Link](3+2, 2)")) ;
25
[Link](isFinite([Link](0))) ;
false
[Link](isNaN("abcd")) ;
true
[Link]("12.34"+2) ;
12.342
[Link](parseFloat("12.34")+2) ;
14.34
[Link](escape("Bon anniversaire")) ;
Bon%20anniversaire
[Link](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
[Link](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)
[Link]("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 ([Link] != '')
return [Link]('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) {
... [Link] ; }
</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
... [Link] ;
Nom du champ dans le formulaire
... [Link][0].elements[0].value ;
... [Link]["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)
{
[Link]([Link]) ;
[Link]([Link]) ;
[Link]([Link][[Link]].text) ;
[Link]([Link][[Link]].value) ;
[Link]([Link][0].checked) ;
[Link]([Link]) ;
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">
[Link](/l/.test('Hello')) ;
true
[Link](/^l/.test('Hello')) ;
false
[Link](/^h/.test('Hello')) ;
false
[Link](/^h/[Link]('Hello')) ;
true
[Link](/^Hel.o/.test('Hello')) ;
true
[Link](/^Hel+o/.test('Hello')) ;
true
[Link](/^He+llo/.test('Hello')) ;
true
[Link](/^Hea*llo$/.test('Hello')) ;
true
[Link](/^He(l|o)*$/.test('Hello')) ;
true
[Link](/^H[leos]+/.test('Hello')) ;
true
[Link](/^H[^leo]+/.test('Hello')) ;
false
[Link](/^H[^kyz]+/.test('Hello')) ;
true
[Link](/^H[a-z]*/.test('Hello')) ;
true
[Link](/^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()
[Link](today) ; Tue Nov 02 2010 00:11:36 GMT+0100
var birthday = new Date("December 17, 1995
03:24:00")
[Link](birthday)Sun
; Dec 17 1995 03:24:00 GMT+0100
birthday = new Date(95,11,17)
[Link](birthday)Sun
; Dec 17 1995 00:00:00 GMT+0100
birthday = new Date(95,11,17,3,24,0)
[Link](birthday)Sun
; Dec 17 1995 03:24:00 GMT+0100
0
[Link]([Link]())
;
17
[Link]([Link]())
;
[Link](25) ;
[Link](birthday)Mon
; Dec 25 1995 03:24:00 GMT+0100
10:34:01
Programmation Web 2012-2013
40
Dates : Exemples
[Link]([Link]())
;
11
[Link](10) ;
[Link](birthday)Sat;Nov 25 1995 03:24:00 GMT+0100
95
[Link]([Link]())
;
[Link](96) ;
[Link](birthday)Mon
; Nov 25 1996 03:24:00 GMT+0100
1996
[Link]([Link]())
;
[Link](2010) ;
[Link](birthday)Thu
; Nov 25 2010 03:24:00 GMT+0100
807919200000
[Link]([Link](
"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) ;
[Link] = '[Link]' ; // Prchargement
// Une autre image
vert = new Image(100, 100) ;
[Link] = '[Link]' ; // Prchargement
// Modification de la 13e image de la page Web
[Link][12].src = [Link] ;
// Modification de la 15e image de la page Web
[Link][14].src = [Link] ;
</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
[Link]
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 = [Link]("un_id");
Construire une chane contenant du HTML
s = "Voici <b>un texte</b>";
Modifier le contenu de llment
[Link] = 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 = [Link]("un_id");
Crer un nud de type texte
t1 = [Link]('Voici ');
t2 = [Link]('un texte');
Crer un nouveau nud de type balise
b = [Link]('b');
Construire des liens de parent
[Link](t1);
[Link](t2); [Link](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() {
[Link] =
[Link]()+'.'
+[Link]() ; }
// -->
</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) {
[Link][image].src = src ; }
// -->
Tableau des images du
</script>
</head>
document. Accs par leur
<body>
nom ou leur indice
<a href='#'
onMouseOver="change('image1', '[Link]')"
onMouseOut="change('image1', '[Link]')">
<img name='image1' width='100' height='100'
src='[Link]' 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) {
[Link][image].src = src ; }
</script> </head> <body> <ul>
<li><a href='#' onMouseOver="change('image1', '[Link]')"
onMouseOut="change('image1', '[Link]')">Disque 1</a>
<li><a href='#' onMouseOver="change('image2', '[Link]')"
onMouseOut="change('image2', '[Link]')">Disque 2</a>
<li><a href='#' onMouseOver="change('image3', '[Link]')"
onMouseOut="change('image3', '[Link]')">Disque 3</a> </ul>
<img name='image1' width='100' height='100' src='[Link]'
alt='disque'>
<img name='image2' width='100' height='100' src='[Link]'
alt='disque'>
<img name='image3' width='100' height='100' src='[Link]'
alt='disque'>
</body> </html>
Exemple
10:35:20
Programmation Web 2012-2013
58
Bote outils (1/3)
// Dtection du navigateur
// Netscape 4
var nava = [Link] ? true : false ;
// IE, Firefox, Netscape 6, Opera
var dom = [Link] ? true : false ;
// IE, Opera
var iex = [Link] ? true : false ;
// Rcuprer un objet identifi
function getobj(id)
{
var obj ;
if (nava)
{ obj=[Link] }
else if (dom) { obj=[Link](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=[Link] }
else if (dom)
{ obj=[Link](id).style }
else if (iex)
{ obj=[Link] }
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) ;
[Link](content) ;
[Link]() ;
}
else if (dom) {
[Link](obj).innerHTML=content ;
}
else if (iex) {
[Link](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='[Link]'> </script> </head> <body>
<h1>Survolez mon image pour trouver les zones cliquables ;-) </h1>
<img src='[Link]' 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='[Link]'> </script>
<script type='text/javascript' language='JavaScript'>
<!-- function cache_cache(id) {
var obj=getobj(id) ;
if ([Link] == 'visible') [Link] = 'invisible' ;
else [Link] = '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='[Link]'> </script>
<script type='text/javascript' language='JavaScript'> <!-function cache_cache(lien, id) { var obj=getobj(id) ;
if ([Link] == 'visible')
{ [Link] = 'monter' ; [Link]='invisible' ; }
else
{ [Link] = 'cacher' ; [Link]='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