Lundi 15 Juin 2009 Les principales techniques JavaScript.

Présentation au sujet: "Lundi 15 Juin 2009 Les principales techniques JavaScript."— Transcription de la présentation:

1 Lundi 15 Juin 2009 Les principales techniques JavaScript

2 Introduction Aujourd'hui, nous allons voir (ou revoir) les deux principales techniques utilisées en JavaScript : L'accès aux objets avec la fonction getElementById(); L'affichage/le masquage d'objets.

3 Accès aux objets avec GetElementById() function calcule() { n1 = document.getElementById('nombre1').value; n2 = document.getElementById('nombre2').value; document.getElementById('resultat').innerHTML = " Le résultat est " + n1*n2 + " "; } Entrez un nombre Entrez un autre nombre

4 Exercice Ecrivez un document XHTML/JavaScript contenant Une zone de saisie d'id "saisie" Un bouton de commande Une zone d'affichage d'id "affich" Lorsque le bouton est cliqué, le texte saisi dans la zone "saisie" doit être affiché dans la zone "affich".

5 Solution function traitement() { texte = document.getElementById('saisie').value; document.getElementById('affiche').innerHTML = " Le texte tapé est " + texte + " "; } Entrez du texte :

6 Afficher / cacher des objets 1/4 Les liens qui commandent l'affichage/la dissimulation : Les commandes agissant sur les objets DIV et LI : Afficher objet1, objet2 et objet3 Masquer objet1, objet2 et objet3 Afficher liste1 et liste3 Masquer liste1 et liste3

7 Afficher / cacher des objets 2/4 Les objets : Les objets : Ce DIV a pour id objet1 Ce DIV a pour id objet2 Ce DIV a pour id objet3 Cette liste numérotée a pour id liste1 Cette liste numérotée a pour id liste2 Cette liste numérotée a pour id liste3

8 Afficher / cacher des objets 3/4 La fonction Affiche() function Affiche() { var Arg = arguments; var Obj; for( var i=0; i< Arg.length; i++) { Obj = document.getElementById(Arg[i]); if( Obj) { Obj.style.visibility = "visible"; Obj.style.display = ""; }

9 Afficher / cacher des objets 4/4 La fonction Masque() : function Masque() { var Arg = arguments; var Obj; for( var i=0; i< Arg.length; i++) { Obj = document.getElementById(Arg[i]); if( Obj) { Obj.style.visibility = "hidden"; Obj.style.display = "none"; }

10 Exercice Reprenez le code précédent. Ajoutez-y deux boutons : Afficher pour afficher le DIV affiche Masquer pour masquer le DIV affiche

11 Solution 1/2 function traitement() { texte = document.getElementById('saisie').value; document.getElementById('affiche').innerHTML = " Le texte tapé est " + texte + " "; } function Afficher() { var Arg = arguments; var Obj; for( var i=0; i< Arg.length; i++) { Obj = document.getElementById(Arg[i]); if( Obj) { Obj.style.visibility = "visible"; Obj.style.display = ""; }

12 Solution 2/2 function Masquer() { var Arg = arguments; var Obj; for( var i=0; i< Arg.length; i++) { Obj = document.getElementById(Arg[i]); if( Obj) { Obj.style.visibility = "hidden"; Obj.style.display = "none"; } Entrez du texte :