Lundi 15 Juin 2009 Les principales techniques JavaScript.
Transcript of Lundi 15 Juin 2009 Les principales techniques JavaScript.
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>