Scribd
Importer
0 vues64 pages

Cours Javascript

Transféré par

jawezine
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
0 vues64 pages

Cours Javascript

Transféré par

jawezine
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

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

Vous aimerez peut-être aussi