Programmation Web :
DOM / JavaScript
08:16:59 1
DOM = Document Object Model
• API (Application Programming Interface) pour la manipulation de
HTML / XML
• Définit la structure logique des documents
• Définit la façon d’y accéder, de la manipuler
Créer des documents
Parcourir leur structure
Ajouter, effacer, modifier des éléments
Ajouter, effacer, modifier leur contenu
08:16:59 Programmation Web 2012-2013 2
Qu’est-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>
08:16:59 Programmation Web 2012-2013 3
Qu’est-ce que le DOM ?
• Représentation arborescente du document
• Modèle objet (structure + méthodes)
• Permet la manipulation du document
• Une implémentation : JavaScript…
• … Des implémentations :
• JavaScript IE
• JavaScript Mozilla / Firefox
• JavaScript Opera
• …
08:16:59 Programmation Web 2012-2013 4
JavaScript : Principe
• Langage de script objet
• Syntaxe style C / C++ / Java
• Sensible à la casse
• N’est PAS du Java
• Exécuté par le client Web
• Peut être désactivé sur le client
• Nombreux objets pour la manipulation HTML
• Gestion des événements HTML
• Rendre les pages dynamiques (HTML+CSS+JS)
• Haut niveau d’incompatibilité…
08:16:59 Programmation Web 2012-2013 5
JavaScript : Balise script
<script type="text/javascript"
language="JavaScript">
<!--
Masquer le script aux navigateurs non
script
compatibles avec JavaScript
// -->
</script>
<script type="text/javascript"
language="JavaScript" src="URI">
</script>
08:16:59 Programmation Web 2012-2013 6
JavaScript : Exemple
<html>
<head>
<title>Ma première page Web</title>
</head>
<body>
<script type="text/javascript"
language="JavaScript">
<!--
[Link]("Salut !") ;
// -->
</script>
</body>
</html>
08:16:59 Programmation Web 2012-2013 7
Variables
• Déclaration de variables facultative
• Variables non typées à la déclaration
var nom_variable ;
• Typage dynamique à l’affectation
• Types gérés:
• Nombres (10, 3.14)
• Booléens (true, false)
• Chaînes ("Salut !", 'Salut !' )
• null
• undefined
08:16:59 Programmation Web 2012-2013 8
Structures conditionnelles
if (condition)
{
instructions ;
}
[ else
{
instructions ;
} ]
08:16:59 Programmation Web 2012-2013 9
Structures conditionnelles
switch (expression)
{
case étiquette :
instructions ;
break ;
case étiquette :
instructions ;
break ;
default :
instructions ;
}
08:16:59 Programmation Web 2012-2013 10
Structures itératives
while (condition)
{
instructions ;
}
do
{
instructions ;
}
while (condition) ;
08:16:59 Programmation Web 2012-2013 11
Structures itératives
for (instr ; condition ; instr)
{
instructions ;
}
for (variable in objet)
{
instructions ;
}
08:16:59 Programmation Web 2012-2013 12
Commentaires
// Commentaire ligne
/* Commentaire multi-lignes */
08:16:59 Programmation Web 2012-2013 13
Fonctions
• Valeur de retour non typée
• Arguments non typés
// Déclaration
function ma_fonction(arguments)
{
instructions ;
return quelque_chose; // ou pas…
}
ma_fonction(12) ; // Appel
08:16:59 Programmation Web 2012-2013 14
Objets prédéfinis
• window
• alert(message)
// Message d’avertissement
• confirm(message)
// Message de confirmation : retourne true ou false
• prompt(message, valeur_par_défaut)
// Boîte de saisie : retourne la chaîne saisie
08:16:59 Programmation Web 2012-2013 15
Objets prédéfinis
• document
• write(message)
// Ecrire dans le document
• writeln(message)
// Ecrire dans le document (retour à la ligne)
08:16:59 Programmation Web 2012-2013 16
Chaînes : Propriétés & Méthodes
• Propriétés
• length
• …
• Méthodes
• charAt(index)
• charCodeAt(index)
• concat(chaine2, chaine3, …)
• fromCharCode(code1, code2, …)
• indexOf(aiguille[, index])
• lastIndexOf(aiguille[, index])
• match(expr_reg)
08:16:59 Programmation Web 2012-2013 17
Chaînes : 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](49, 50)) ;
12
[Link]([Link]("Benjamin")) ;
17
[Link]([Link]("a")) ;
21
[Link]([Link](/Benjamin$/)) ;
Benjamin (null si non trouvé)
08:16:59 Programmation Web 2012-2013 18
Chaînes : Méthodes
• Méthodes
• replace(expr_reg, nouvelle_chaine)
• search(expr_reg)
• slice(debut[, fin])
• split(separateur[, limite])
• substr(debut[, taille])
• substring(debut, fin)
• toLowerCase()
• toUpperCase()
• Opérateurs
• +
08:16:59 Programmation Web 2012-2013 19
Chaînes : 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
08:16:59 Programmation Web 2012-2013 20
Objet Math
• Propriétés
• E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2, SQRT2
• Méthodes
• 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
08:16:59 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
08:16:59 Programmation Web 2012-2013 22
Propriétés & Fonctions supérieures
• Propriétés
• Infinity, NaN, undefined
• Fonctions
• eval(chaine)
• isFinite(nombre)
• isNaN(objet)
• parseFloat(chaine)
• parseInt(chaine)
• escape(chaine)
• unescape(chaine)
08:16:59 Programmation Web 2012-2013 23
Propriétés & Fonctions supérieures
[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
08:16:59 Programmation Web 2012-2013 24
Tableaux
• Objet Array
• Déclaration
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 ;
08:16:59 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
08:16:59 Programmation Web 2012-2013 26
Tableaux : Propriétés & Méthodes
• Propriétés
• length
• …
• Méthodes
• concat(tab2, tab3, …)
• join(sépar)
• pop()
• push(val1, val2, …)
• shift()
• unshift(val1, val2, …)
• slice(début[, fin])
08:16:59 Programmation Web 2012-2013 27
Contrôle de formulaires
• Vérifier la cohérence de la saisie
• Contrôles sur le client
• Évite les transmissions client / serveur
• Contrôles possibles:
• Présence de valeur
• Numérique / Chaîne
• Expressions régulières
• Événement onSubmit
08:16:59 Programmation Web 2012-2013 28
Contrôle de formulaires
<html><head><title>Contrôle</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>
08:16:59 Programmation Web 2012-2013 29
Formulaires : Propriétés & Méthodes
• Propriétés
• action
• elements
• encoding
• length
• method
• name
• target
• Méthodes
• reset()
• submit()
08:16:59 Programmation Web 2012-2013 30
Objets commandes de formulaires
• Text
• Textarea
• Hidden
• Password
• CheckBox
• Radio (/!\ tableau de /!\)
• Submit / Reset
• Select
• Option
• FileUpload
08:16:59 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>
08:16:59 Programmation Web 2012-2013 32
Formulaires : accès 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'
Nom du formulaireonSubmit='return
objet formulaire verif();'>
Objet formulaire
<input type='text' name='texte'> ...
Index du formulaire dans la page
<script type="text/javascript">
Nom du champ dans le formulaire
function verif(f) { du formulaire dans la page
Nom
... [Link] Index du;champ dans le formulaire
... [Link][0].elements[0].value ; le formulaire
Nom du champ dans
... [Link]["formu"].elements["texte"].value
; }
</script> Tableau des champs du formulaire
Tableau des formulaires de la page
08:16:59 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>
08:16:59 Programmation Web 2012-2013 34
Expressions rationnelles
• Expressions rationnelles / régulières
• /modele/drapeaux (drapeaux: g, i, gi)
• new RegExp("modele"[, "drapeaux"])
• Modèles
• ^ : début de
• $ : fin de
• * : 0 à n fois
• + : 1 à n fois
• ? : 0 à 1 fois
• . : un caractère sauf retour chariot
• | : ou
08:16:59 Programmation Web 2012-2013 35
Expressions rationnelles
• Modèles
• (x) : x et mémorise
• {n} : n fois
• {n,} : au moins n fois
• {n,m} : de n à m fois
• [xyz] : 1 élément de la liste
• [a-z] : 1 élément de la série
• [^xyz] : 1 élément n'étant pas dans la liste
• [^a-z] : 1 élément n'étant pas dans la série
• \b : frontière de mot
• \B : non frontière de mot
08:16:59 Programmation Web 2012-2013 36
Expressions rationnelles
• Modèles
• \d = [0-9]: chiffre
• \D = [^0-9]: non chiffre
• \n : retour à la ligne
• \s : séparateur de mot
• \S : non séparateur de mot
• \t : tabulation
• \w = [A-Za-z0-9_] : 1 caractère alphanumérique
• Méthodes
• test(chaine)
08:16:59 Programmation Web 2012-2013 37
Expressions rationnelles : Exemples
true
<script type="text/javascript">
false [Link](/l/.test('Hello')) ;
false [Link](/^l/.test('Hello')) ;
true [Link](/^h/.test('Hello')) ;
true [Link](/^h/[Link]('Hello')) ;
[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')) ;
[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')) ;
</script>
true
08:16:59 Programmation Web 2012-2013 38
Dates : Propriétés & Méthodes
• Méthodes
• 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()
08:16:59 Programmation Web 2012-2013 39
Dates : Exemples
Tue Nov 02 2010 00:11:36 GMT+0100
var today = new Date()
[Link](today) ;
var birthday = new Date("December 17, 1995 03:24:00")
Sun Dec 17 1995 03:24:00 GMT+0100
[Link](birthday) ;
birthday = new Date(95,11,17)
Sun Dec 17 1995 00:00:00 GMT+0100
[Link](birthday) ;
birthday = new Date(95,11,17,3,24,0)
Sun Dec 17 1995 03:24:00 GMT+0100
[Link](birthday) ;
0
[Link]([Link]()) ;
17
[Link]([Link]()) ;
[Link](25) ;
Mon Dec 25 1995 03:24:00 GMT+0100
[Link](birthday) ;
08:16:59 Programmation Web 2012-2013 40
Dates : Exemples
11
[Link]([Link]()) ;
Sat Nov 25 1995 03:24:00 GMT+0100
[Link](10) ;
95
[Link](birthday) ;
[Link]([Link]()) ;
Mon Nov 25 1996 03:24:00 GMT+0100
[Link](96) ;
1996
[Link](birthday) ;
[Link]([Link]()) ;
Thu Nov 25 2010 03:24:00 GMT+0100
[Link](2010) ;
807919200000
[Link](birthday) ;
[Link]([Link]("Aug 9, 1995")) ;
08:16:59 Programmation Web 2012-2013 41
Images : Propriétés & Méthodes
• Propriétés
• complete
• width
• height
• name
• src
• …
• Méthodes
• constructeur
• Image()
• Image(largeur, hauteur)
08:16:59 Programmation Web 2012-2013 42
Images: Exemples
<script type="text/javascript">
// Une image
rouge = new Image(100, 100) ;
[Link] = '[Link]' ; // Préchargement
// Une autre image
vert = new Image(100, 100) ;
[Link] = '[Link]' ; // Préchargement
// 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>
08:16:59 Programmation Web 2012-2013 43
Relations entre code HTML et DOM
• Deux visions, normalement concordantes :
• Le code HTML produit par le concepteur
• L’interprétation qui en faite par le navigateur
• Discordances possibles :
• Erreurs dans le code (code non valide)
• Balises non supportées (HTML 5, par exemple)
• Modifications de la page par JavaScript
• Comment explorer l’état réel de l’interprétation du code HTML /
JavaScript par la navigateur ?
08:16:59 Programmation Web 2012-2013 44
Firefox : Firebug
• Module complémentaire de Firefox
• [Link]
• Principales fonctionnalités :
• Édition
• Débogage
• Modification
• HTML
• CSS
• JavaScript
• HTTP
• C’est l’outil indispensable du développeur Web
08:17:00 Programmation Web 2012-2013 45
Firefox : Firebug
08:17:00 Programmation Web 2012-2013 46
IE : outils de développement
08:17:00 Programmation Web 2012-2013 47
Et les autres navigateurs ?
• Opera
• Widgets permettent d’obtenir des outils de développement
• Safari
• Version allégée de Firebug
• Google Chrome
• Outils de développement intégrés
08:17:00 Programmation Web 2012-2013 48
Relations entre code HTML et DOM
08:17:00 Programmation Web 2012-2013 49
Relations entre code HTML et DOM
08:17:00 Programmation Web 2012-2013 50
Solutions pour modifier le DOM
• innerHTML
• Construire une chaîne de caractères contenant du code HTML
• Affecter cette chaîne de caractères à l’attribut innerHTML d’un élément de
la page
• Le navigateur interprète le contenu de la chaîne de caractères affectée pour
modifier la structure du document
• DOM « pur »
• Construire de nouveaux éléments logiques du document avec des méthodes
JS
• Construire les liens de parenté entre ces éléments
08:17:00 Programmation Web 2012-2013 51
innerHTML : exemple
• Identifier un élément HTML
<div id="un_id"></div>
• Accéder à un élément
e = [Link]("un_id");
• Construire une chaîne contenant du HTML
s = "Voici <b>un texte</b>";
• Modifier le contenu de l’élément
[Link] = s;
• Interprétation « automatique » par le navigateur du nouveau
contenu pour modifier le document
08:17:00 Programmation Web 2012-2013 52
div
id="un_id"
DOM « pur » : exemple
Voici b
• Identifier un élément HTML
<div id="un_id"></div> un texte
• Accéder à un élément
e = [Link]("un_id");
• Créer un nœud de type « texte »
t1 = [Link]('Voici ');
t2 = [Link]('un texte');
• Créer un nouveau nœud de type « balise »
b = [Link]('b');
• Construire des liens de parenté
[Link](t1);
[Link](t2); [Link](b);
08:17:00 Programmation Web 2012-2013 53
Gestion des événements
• Interactions HTML / JavaScript
• Possibilité d'associer du code JavaScript à certains événements dans
la page Web
• Evénements
• OnMouseOver
• OnMouseOut
• OnClick
• OnKeyDown
• OnFocus
• OnBlur
• …
08:17:00 Programmation Web 2012-2013 54
Mise en place des événements
<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>
08:17:00 Programmation Web 2012-2013 55
Événement 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] =
// -->
Exemple
[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>
08:17:00 Programmation Web 2012-2013 56
Événement 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>
Exemple
Tableau des images du document.
Accès par leur nom ou leur indice
<body>
<a href='#'
onMouseOver="change('image1', '[Link]')"
onMouseOut="change('image1', '[Link]')">
<img name='image1' width='100' height='100'
src='[Link]' alt='disque'></a>
</body>
</html>
08:17:00 Programmation Web 2012-2013 57
Événement 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]')"
Exemple
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>
08:17:00 Programmation Web 2012-2013 58
Boîte à outils (1/3)
// Détection 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 ;
// Récupérer 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 ;
}
08:17:00 Programmation Web 2012-2013 59
Boîte à outils (2/3)
// Récupérer 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 ;
}
08:17:00 Programmation Web 2012-2013 60
Boîte à 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 ;
}
}
08:17:00 Programmation Web 2012-2013 61
Événement onMouseOver / Out
function getobj(id)
function getstyle(id)
function writecontent(obj, content)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head> <title>Image cliquable</title>
<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'>
Exemple
<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,96
,203,80,184,103,180' onMouseOver="writecontent('info', 'Etoile')"
onMouseOut="writecontent('info', '')">
</map> <span id='info'></span>
</body> </html>
08:17:00 Programmation Web 2012-2013 62
Modification dynamique de style
function getobj(id)
function getstyle(id)
function
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 writecontent(obj,
Transitional//EN">content)
<html> <head> <style type'text/css'> <!--
.visible { } .invisible { display : none ; }
.cache_cache { text-align : right ; }
</style>
<script type='text/javascript' language='JavaScript'
src='[Link]'> </script>
Exemple
<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>
08:17:00 Programmation Web 2012-2013 63
Modification dynamique de contenu
function getobj(id)
function getstyle(id)
function
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 writecontent(obj,
Transitional//EN">content)
<html> <head> <style type'text/css'> <!--
.visible { } .invisible { display : none ; }
.cache_cache { text-align : right ; }
</style>
<script type='text/javascript' language='JavaScript'
src='[Link]'> </script>
Exemple
<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>
08:17:00 Programmation Web 2012-2013 64