Programmation Web DOM Java Script Jrme CUTRONA jerome

Programmation Web : DOM / Java. Script Jérôme CUTRONA jerome. cutrona@univ-reims. fr 10: 33: 46 Programmation Web 2012 -2013 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 10: 33: 47 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> 10: 33: 48 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 : Java. Script… … Des implémentations : n n 10: 33: 50 Java. Script IE Java. Script Mozilla / Firefox Java. Script Opera … Programmation Web 2012 -2013 4

Java. Script : 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é… 10: 33: 51 Programmation Web 2012 -2013 5

Java. Script : Balise script <script type="text/javascript" language="Java. Script"> <!-Masquer le script aux script navigateurs non compatibles avec Java. Script // --> </script> <script type="text/javascript" language="Java. Script" src="URI"> </script> 10: 33: 52 Programmation Web 2012 -2013 6

Java. Script : Exemple <html> <head> <title>Ma première page Web</title> </head> <body> <script type="text/javascript" language="Java. Script"> <!- document. writeln("Salut !") ; // --> </script> </body> </html> 10: 33: 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: n n n 10: 34: 04 Nombres (10, 3. 14) Booléens (true, false) Chaînes ("Salut !", 'Salut !' ) null undefined Programmation Web 2012 -2013 8

Structures conditionnelles if (condition) { instructions ; } [ else { instructions ; } ] 10: 34: 05 Programmation Web 2012 -2013 9

Structures conditionnelles switch (expression) { case étiquette : instructions ; break ; default : instructions ; } 10: 34: 07 Programmation Web 2012 -2013 10

Structures itératives while (condition) { instructions ; } do { instructions ; } while (condition) ; 10: 34: 08 Programmation Web 2012 -2013 11

Structures itératives for (instr ; condition ; instr) { instructions ; } for (variable in objet) { instructions ; } 10: 34: 10 Programmation Web 2012 -2013 12

Commentaires // Commentaire ligne /* Commentaire multi-lignes */ 10: 34: 12 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 10: 34: 14 Programmation Web 2012 -2013 14

Objets prédéfinis § window alert(message) // Message d’avertissement n confirm(message) // Message de confirmation : retourne true ou false n prompt(message, valeur_par_défaut) // Boîte de saisie : retourne la chaîne saisie n 10: 34: 14 Programmation Web 2012 -2013 15

Objets prédéfinis § document write(message) // Ecrire dans le document n writeln(message) // Ecrire dans le document (retour à la ligne) n 10: 34: 17 Programmation Web 2012 -2013 16

Chaînes : Propriétés & Méthodes § Propriétés n n length … § Méthodes n n n n 10: 34: 19 char. At(index) char. Code. At(index) concat(chaine 2, chaine 3, …) from. Char. Code(code 1, code 2, …) index. Of(aiguille[, index]) last. Index. Of(aiguille[, index]) match(expr_reg) Programmation Web 2012 -2013 17

Chaînes : Exemples var s = "Bon anniversaire Benjamin" ; document. write(s. char. At(2)) ; n document. write(s. char. Code. At(2)) ; 110 document. write(s. concat(" du groupe C 12")) ; Bon anniversaire Benjamin du groupe C 12 document. write(String. from. Char. Code(49, 50)) ; 12 document. write(s. index. Of("Benjamin")) ; 17 document. write(s. last. Index. Of("a")) ; 21 document. write(s. match(/Benjamin$/)) ; Benjamin (null si non trouvé) 10: 34: 20 Programmation Web 2012 -2013 18

Chaînes : Méthodes § Méthodes n n n n replace(expr_reg, nouvelle_chaine) search(expr_reg) slice(debut[, fin]) split(separateur[, limite]) substr(debut[, taille]) substring(debut, fin) to. Lower. Case() to. Upper. Case() § Opérateurs n 10: 34: 21 + Programmation Web 2012 -2013 19

Chaînes : Exemples var s = "Bon anniversaire Benjamin" ; document. write(s. replace(/i/g, 'I')) ; Bon ann. Iversa. Ire Benjam. In 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. to. Upper. Case()+s. to. Lower. Case()) ; BON ANNIVERSAIRE BENJAMINbon anniversaire benjamin 10: 34: 21 Programmation Web 2012 -2013 20

Objet Math § Propriétés n E, LN 10, LN 2, LOG 10 E, LOG 2 E, PI, SQRT 1_2, SQRT 2 § Méthodes n n n n 10: 34: 22 abs(val) acos(val), … exp(val), log(val) floor(val), round(val), ceil(val) max(val 1, val 2), min(val 1, val 2) pow(val, puiss), sqrt(val) random() // 0 1 Programmation Web 2012 -2013 21

Objet Math : Exemples document. write(115. 04+15) ; 130. 040000002 (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: 34: 23 Programmation Web 2012 -2013 22

Propriétés & Fonctions supérieures § Propriétés n Infinity, Na. N, undefined § Fonctions n n n n 10: 34: 27 eval(chaine) is. Finite(nombre) is. Na. N(objet) parse. Float(chaine) parse. Int(chaine) escape(chaine) unescape(chaine) Programmation Web 2012 -2013 23

Propriétés & Fonctions supérieures document. write(eval("Math. pow(3+2, 2)")) ; 25 document. write(is. Finite(Math. log(0))) ; false document. write(is. Na. N("abcd")) ; true document. write("12. 34"+2) ; 12. 342 document. write(parse. Float("12. 34")+2) ; 14. 34 document. write(escape("Bon anniversaire")) ; Bon%20 anniversaire document. write(unescape("Bon%20 anniversaire")) ; Bon anniversaire 10: 34: 28 Programmation Web 2012 -2013 24

Tableaux § Objet Array § Déclaration var tab 1 = new Array(taille) ; var tab 2 = new Array(1, "a", 9, …) ; index 0 1 2 … § Utilisation window. alert(tab 2[0]) ; // 1 tab 2[2] = 6 // 6 remplace 9 § Accroissement automatique de la taille var tab 1 = new Array(2) ; tab 1[200] = 5 ; 10: 34: 31 Programmation Web 2012 -2013 25

Tableaux § Parcours var tab 2 = new Array(1, "a", 9) ; tab 2[200] = 12 ; for (i in tab 2) window. alert("tab 2[" + i + "] = " + tab 2[i]) ; // tab 2[0] = 1 // tab 2[1] = a // tab 2[2] = 9 // tab 2[200] = 12 10: 34: 32 Programmation Web 2012 -2013 26

Tableaux : Propriétés & Méthodes § Propriétés n n length … § Méthodes n n n n 10: 34: 42 concat(tab 2, tab 3, …) join(sépar) pop() push(val 1, val 2, …) shift() unshift(val 1, val 2, …) slice(début[, fin]) 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: n n n Présence de valeur Numérique / Chaîne Expressions régulières § Événement on. Submit 10: 34: 43 Programmation Web 2012 -2013 28

Contrôle de formulaires <html><head><title>Contrôle</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" on. Submit="return verif() ; "> <input type="text" name="txt"> <input type="submit" value="Envoyer"> </form></body></html> 10: 34: 44 Programmation Web 2012 -2013 29

Formulaires : Propriétés & Méthodes § Propriétés n n n n action elements encoding length method name target § Méthodes n n 10: 34: 45 reset() submit() Programmation Web 2012 -2013 30

Objets commandes de formulaires § § § § § Textarea Hidden Password Check. Box Radio (/! tableau de /!) Submit / Reset Select Option File. Upload 10: 34: 47 Programmation Web 2012 -2013 31

Formulaires : Exemple <form name='formu' on. Submit='return verif(this); '> <input type='text' name='texte'> <select name='sel'> <option>? <option value=1>Un <option value=2>Deux </select> <input type='radio' name='rad' id='rad 1'> <label for='rad 1'>oui</label> <input type='radio' name='rad' id='rad 2'> <label for='rad 2'>non</label> <input type='checkbox' name='chk' id='chk 1'> <label for='chk 1'>OK</label> <input type='submit' value='Envoyer'> </form> 10: 34: 48 Programmation Web 2012 -2013 32

Formulaires : accès aux champs <form name='formu' on. Submit='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' on. Submit='return verif(); '> Nom du formulaire objet formulaire Objet formulaire <input type='text' name='texte'>. . . Index du formulaire dans la page Nom du champ dans le formulaire <script type="text/javascript" > Nom du formulaire dans la page Index du champ dans le formulaire function verif(f) { Nom du champ dans le formulaire . . . document. formu. texte. value ; . . . document. forms[0]. elements[0]. value ; . . . document. forms["formu"]. elements["texte"]. value Tableau des champs du formulaire ; } Tableau des formulaires de la page </script > 10: 34: 50 Programmation Web 2012 -2013 33

Formulaires : Exemple <script type="text/javascript"> function verif(f) { window. alert(f. texte. value) ; window. alert(f. selected. Index) ; window. alert(f. sel[f. selected. Index]. text) ; window. alert(f. sel[f. selected. Index]. value) ; window. alert(f. rad[0]. checked) ; window. alert(f. chk. checked) ; return false ; } </script> 10: 34: 52 Programmation Web 2012 -2013 34

Expressions rationnelles § Expressions rationnelles / régulières n n /modele/drapeaux (drapeaux: g, i, gi) new Reg. Exp("modele"[, "drapeaux"]) § Modèles n n n n 10: 34: 55 ^ : début de $ : fin de * : 0 à n fois + : 1 à n fois ? : 0 à 1 fois. : un caractère sauf retour chariot | : ou Programmation Web 2012 -2013 35

Expressions rationnelles § Modèles n n n n n 10: 34: 56 (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 Programmation Web 2012 -2013 36

Expressions rationnelles § Modèles n n n n 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-z 0 -9_] : 1 caractère alphanumérique § Méthodes n 10: 34: 58 test(chaine) Programmation Web 2012 -2013 37

Expressions rationnelles : Exemples <script type="text/javascript"> true document. write(/l/. test('Hello')) ; false document. write(/^h/. test('Hello')) ; true 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')) ; false document. write(/^H[^leo]+/. test('Hello')) ; true document. write(/^H[^kyz]+/. test('Hello')) ; true document. write(/^H[a-z]*$/. test('Hello')) ; </script> 10: 34: 59 Programmation Web 2012 -2013 38

Dates : Propriétés & Méthodes § Méthodes n n n n n 10: 35: 01 Constructeur get. Day(), attention de 0 (dimanche) à 6 (samedi)… get. Date() / set. Date() get. Month() / set. Month(), attention de 0 à 11… get. Hours()/ set. Hours() get. Minutes() / set. Minutes() get. Time() / set. Time() get. Year() / set. Year() / get. Full. Year() / set. Full. Year() 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 GMT+0100 birthday = new Date(95, 11, 17, 3, 24, 0) document. write(birthday) ; Sun Dec 17 1995 03: 24: 00 GMT+0100 document. write(birthday. get. Day()) ; 0 document. write(birthday. get. Date()) ; 17 birthday. set. Date(25) ; document. write(birthday) ; Mon Dec 25 1995 03: 24: 00 GMT+0100 10: 35: 03 Programmation Web 2012 -2013 40

Dates : Exemples document. write(birthday. get. Month()) ; 11 birthday. set. Month(10) ; document. write(birthday) ; Sat Nov 25 1995 03: 24: 00 GMT+0100 document. write(birthday. get. Year()) ; 95 birthday. set. Year(96) ; document. write(birthday) ; Mon Nov 25 1996 03: 24: 00 GMT+0100 document. write(birthday. get. Full. Year()) ; 1996 birthday. set. Full. Year(2010) ; document. write(birthday) ; Thu Nov 25 2010 03: 24: 00 GMT+0100 document. write(Date. parse( "Aug 9, 1995")) ; 807919200000 10: 35: 05 Programmation Web 2012 -2013 41

Images : Propriétés & Méthodes § Propriétés n n n complete width height name src … § Méthodes n constructeur § Image() § Image(largeur, hauteur) 10: 35: 05 Programmation Web 2012 -2013 42

Images: Exemples <script type="text/javascript"> // Une image rouge = new Image(100, 100) ; rouge. src = 'rouge. gif' ; // Préchargement // Une autre image vert = new Image(100, 100) ; vert. src = 'vert. gif' ; // Préchargement // Modification de la 13 e image de la page Web document. images[12]. src = rouge. src ; // Modification de la 15 e image de la page Web document. images[14]. src = rouge. src ; </script> 10: 35: 06 Programmation Web 2012 -2013 43

Relations entre code HTML et DOM § Deux visions, normalement concordantes : n n Le code HTML produit par le concepteur L’interprétation qui en faite par le navigateur § Discordances possibles : n n n Erreurs dans le code (code non valide) Balises non supportées (HTML 5, par exemple) Modifications de la page par Java. Script § Comment explorer l’état réel de l’interprétation du code HTML / Java. Script par la navigateur ? 10: 35: 06 Programmation Web 2012 -2013 44

Firefox : Firebug § Module complémentaire de Firefox § https: //addons. mozilla. org/fr/firefox/addon/firebug/ § Principales fonctionnalités : n n n n Édition Débogage Modification HTML CSS Java. Script HTTP § C’est l’outil indispensable du développeur Web 10: 35: 07 Programmation Web 2012 -2013 45

Firefox : Firebug 10: 35: 08 Programmation Web 2012 -2013 46

IE : outils de développement 10: 35: 08 Programmation Web 2012 -2013 47

Et les autres navigateurs ? § Opera n Widgets permettent d’obtenir des outils de développement § Safari n Version allégée de Firebug § Google Chrome n 10: 35: 10 Outils de développement intégrés Programmation Web 2012 -2013 48

Relations entre code HTML et DOM 10: 35: 10 Programmation Web 2012 -2013 49

Relations entre code HTML et DOM 10: 35: 13 Programmation Web 2012 -2013 50

Solutions pour modifier le DOM § inner. HTML n n n Construire une chaîne de caractères contenant du code HTML Affecter cette chaîne de caractères à l’attribut inner. HTML 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 » n n 10: 35: 15 Construire de nouveaux éléments logiques du document avec des méthodes JS Construire les liens de parenté entre ces éléments Programmation Web 2012 -2013 51

inner. HTML : exemple § Identifier un élément HTML <div id="un_id"></div> § Accéder à un élément e = document. get. Element. By. Id("un_id"); § Construire une chaîne contenant du HTML s = "Voici <b>un texte</b>"; § Modifier le contenu de l’élément e. inner. HTML = s; § Interprétation « automatique » par le navigateur du nouveau contenu pour modifier le document 10: 35: 16 Programmation Web 2012 -2013 52

DOM « pur » : exemple § Identifier un élément HTML <div id="un_id"></div> div id="un_id" Voici § Accéder à un élément b un texte e = document. get. Element. By. Id("un_id"); § Créer un nœud de type « texte » t 1 = document. create. Text. Node('Voici '); t 2 = document. create. Text. Node('un texte'); § Créer un nouveau nœud de type « balise » b = document. create. Element('b'); § Construire des liens de parenté e. append. Child(t 1); b. append. Child(t 2); e. append. Child(b); 10: 35: 17 Programmation Web 2012 -2013 53

Gestion des événements § Interactions HTML / Java. Script § Possibilité d'associer du code Java. Script à certains événements dans la page Web § Evénements n n n n 10: 35: 17 On. Mouse. Over On. Mouse. Out On. Click On. Key. Down On. Focus On. Blur … Programmation Web 2012 -2013 54

Mise en place des événements <a href='URI_cible' on. Mouse. Over="code_javascript 1" on. Mouse. Out="code_javascript 2">Support</a> <a href='URI_cible' on. Mouse. Over="a=1" on. Mouse. Out="b=2">Support</a> <a href='URI_cible' on. Mouse. Over="allumer()" on. Mouse. Out="eteindre()">Support</a> 10: 35: 19 Programmation Web 2012 -2013 55

Événement on. Key. Up <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN"> <html> <head> <title>on. Key. Up</title> <script type='text/javascript' language='Java. Script'> <!— function maj() { document. f. mail. value = document. f. prenom. value. to. Lower. Case()+'. ' +document. f. nom. value. to. Lower. Case() ; } // --> </script> </head> <body> <form name='f'> Nom <input type='text' name='nom' on. Key. Up='maj()'> Prenom <input type='text' name='prenom' on. Key. Up='maj()'> Login <input type='text' name='mail' disabled> </form> </body> </html> Exemple 10: 35: 20 Programmation Web 2012 -2013 56

Événement on. Mouse. Over / Out <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN"> <html> <head> <title>Rollover</title> <script type='text/javascript' language='Java. Script'> <!— function change(image, src) { document. images[image]. src = src ; } // --> Tableau des images du </script> </head> document. Accès par leur nom <body> ou leur indice <a href='#' on. Mouse. Over="change('image 1', 'vert. gif')" on. Mouse. Out="change('image 1', 'rouge. gif')"> <img name='image 1' width='100' height='100' src='rouge. gif' alt='disque'></a> </body> </html> Exemple 10: 35: 22 Programmation Web 2012 -2013 57

Événement on. Mouse. Over / Out <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN"> <html> <head> <title>Rollover</title> <script type='text/javascript' language='Java. Script'> function change(image, src) { document. images[image]. src = src ; } </script> </head> <body> <ul> <li><a href='#' on. Mouse. Over="change('image 1', 'vert. gif')" on. Mouse. Out="change('image 1', 'rouge. gif')">Disque 1</a> <li><a href='#' on. Mouse. Over="change('image 2', 'vert. gif')" on. Mouse. Out="change('image 2', 'rouge. gif')">Disque 2</a> <li><a href='#' on. Mouse. Over="change('image 3', 'vert. gif')" on. Mouse. Out="change('image 3', 'rouge. gif')">Disque 3</a> </ul> <img name='image 1' width='100' height='100' src='rouge. gif' alt='disque'> <img name='image 2' width='100' height='100' src='rouge. gif' alt='disque'> <img name='image 3' width='100' height='100' src='rouge. gif' alt='disque'> </body> </html> Exemple 10: 35: 22 Programmation Web 2012 -2013 58

Boîte à outils (1/3) // Détection du navigateur // Netscape 4 var nava = document. layers ? true : false ; // IE, Firefox, Netscape 6, Opera var dom = document. get. Element. By. Id ? true : false ; // IE, Opera var iex = document. all ? true : false ; // Récupérer un objet identifié function getobj(id) { var obj ; if (nava) { obj=document. id } else if (dom) { obj=document. get. Element. By. Id(id) } else if (iex) { obj=id } return obj ; } 10: 35: 23 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=document. id } else if (dom) { obj=document. get. Element. By. Id(id). style } else if (iex) { obj=id. style } return obj ; } 10: 35: 24 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) ; objet. document. write(content) ; objet. document. close() ; } else if (dom) { document. get. Element. By. Id(obj). inner. HTML=content ; } else if (iex) { document. all(obj). inner. HTML=content ; } } 10: 35: 24 Programmation Web 2012 -2013 61

Événement on. Mouse. Over / Out function getobj(id) <!DOCTYPE html PUBLIC "-//W 3 C//DTD HTML 4. 01 Transitional//EN"> function getstyle(id) <html> <head> <title>Image cliquable title> function</ writecontent(obj, content) <script type='text/javascript' language='Java. Script' src='outils. js'> </script> </head> <body> <h 1>Survolez mon image pour trouver les zones cliquables ; -)</h 1> <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' on. Mouse. Over="writecontent('info', 'Cercle')" on. Mouse. Out="writecontent('info', '')"> <area href='#' alt='Rectangle' title='Rectangle' shape='rect' coords='171, 20, 233, 150' on. Mouse. Over="writecontent('info', 'Rectangle')" on. Mouse. Out="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' on. Mouse. Over="writecontent('info', 'Etoile')" on. Mouse. Out="writecontent('info', '')"> </map> <span id='info'></span> </body> </html> Exemple 10: 35: 25 Programmation Web 2012 -2013 62

Modification dynamique de style function getobj(id) <!DOCTYPE html PUBLIC "-//W 3 C//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='Java. Script' src='outils. js'> </script> <script type='text/javascript' language='Java. Script'>  </script> <title>Cache-cache</title> </head> <body> <div class='cache_cache'> <a href="javascript: cache_cache('div 1')">montrer / cacher</a> </div> <div id='div 1' class='visible'> Texte </div> </body> </html> Exemple 10: 35: 26 Programmation Web 2012 -2013 63

Modification dynamique de contenu function getobj(id) <!DOCTYPE html PUBLIC "-//W 3 C//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='Java. Script' src='outils. js'> </script> <script type='text/javascript' language='Java. Script'>  </script> <title>Cache-cache</title> </head> <body> <div class='cache_cache'> <a href="#" on. Click="cache_cache(this, 'div 1')">cacher</a> </div> <div id='div 1' class='visible'> Texte </div> </body> </html> Exemple 10: 35: 26 Programmation Web 2012 -2013 64