lundi 15 juin 2009 les principales techniques javascript
TRANSCRIPT
Lundi 15 Juin 2009Les principales techniques JavaScript
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.
Accès aux objets avec GetElementById() <html>
<head>
<script language="javascript">
function calcule()
{
n1 = document.getElementById('nombre1').value;
n2 = document.getElementById('nombre2').value;
document.getElementById('resultat').innerHTML = "<font color='red'>Le résultat est " + n1*n2 + "</font>";
}
</script>
</head>
<body>
<table border=0>
<tr><td>Entrez un nombre</td><td><input id="nombre1"></td></tr>
<tr><td>Entrez un autre nombre</td><td><input id="nombre2"></td></tr>
<tr><td><input type="button" value="Multiplier" onclick="calcule()"></td><td><div id="resultat"></div></td></tr>
</table>
</body>
</html>
Exercice Ecrivez un document XHTML/JavaScript
contenantUne zone de saisie <input> d'id "saisie"Un bouton de commande <input type="button">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".
Solution<html>
<head>
<script language="javascript">
function traitement()
{
texte = document.getElementById('saisie').value;
document.getElementById('affiche').innerHTML = "<font color='red'>Le texte tapé est " + texte + "</font>";
}
</script>
</head>
<body>
Entrez du texte : <input id="saisie">
<br><input type="button" value="cliquez ici" onclick="traitement()">
<br><div id="affiche"></div>
</body>
</html>
Afficher / cacher des objets 1/4Les liens qui commandent l'affichage/la
dissimulation : <body> <br><font color=red>Les commandes agissant sur les objets DIV et LI :</font>
<ul>
<li><a href="#" OnClick="Affiche('objet1', 'objet2', 'objet3');">Afficher objet1, objet2 et objet3</a></li>
<li><a href="#" OnClick="Masque('objet1', 'objet2', 'objet3');">Masquer objet1, objet2 et objet3</a></li>
<li><a href="#" OnClick="Affiche('liste1', 'liste3');">Afficher liste1 et liste3</a></li>
<li><A href="#" OnClick="Masque('liste1', 'liste3');">Masquer liste1 et liste3</a></li>
</ul>
<br><br>
Afficher / cacher des objets 2/4Les objets : <hr> <br><font color=red>Les objets :</font>
<br><br><div id="objet1">Ce DIV a pour id objet1</div>
<br><div id="objet2" style='width: 400; height: 100; background-color: #12ffff; text-align: center;'><br><br>Ce DIV a pour
id objet2</div>
<br><div id="objet3">Ce DIV a pour id objet3</div>
<ol>
<li id="liste1">Cette liste numérotée a pour id liste1</li>
<li id="liste2">Cette liste numérotée a pour id liste2</li>
<li id="liste3">Cette liste numérotée a pour id liste3</li>
</ol>
</body>
</html>
Afficher / cacher des objets 3/4La 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 = "";
}
}
}
Afficher / cacher des objets 4/4La 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";
}
}
}
Exercice
Reprenez le code précédent. Ajoutez-y deux boutons :
Afficher pour afficher le DIV afficheMasquer pour masquer le DIV affiche
Solution 1/2<html>
<head>
<script language="javascript">
function traitement()
{
texte = document.getElementById('saisie').value;
document.getElementById('affiche').innerHTML = "<font color='red'>Le texte tapé est " + texte + "</font>";
}
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 = "";
}
}
}
Solution 2/2function 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";
}
}
}
</script>
</head>
<body>
Entrez du texte : <input id="saisie">
<br><input type="button" value="cliquez ici" onclick="traitement()">
<br><input type="button" value="Afficher" onclick="Afficher('affiche')">
<br><input type="button" value="Masquer" onclick="Masquer('affiche')">
<br><div id="affiche"></div>
</body>
</html>