PDF 4 Exer Javascript

JavaScript - Travaux Pratiques 1
Pour JavaScript, il est fortement conseillé d’utiliser emacs sous Linux pour créer vos fichiers.
Chaque fichier doit avoir l’extension .js. Pour associer du code JavaScript placé dans un fichier
externe à une page HTML, il suffit d’utiliser l’attribut type avec l’attribut src dans un élément
script. Pour exécuter le code après le chargement de la page, on utilisera :
<body>

<script type="text/javascript" src="monCode.js"> </script> />
</body>
Pour identifier et corriger les erreurs (bugs), il faut absolument utiliser la console (fenêtre) d’erreurs.
Pour Firefox, vous la trouverez sous
Tools - Error Console
Pour rechargez une page XHTML, y compris le chargement du code JavaScript qui est associé à la
page, vous devez :
Appuyez sur la touche CTRL tout en cliquant sur l’icône de rechargement
On utilisera DOM (level 0) pour accéder aux éléments d’une page HTML et interagir avec eux. Cela
signifie que typiquement, on récupère une variable JavaScript référençant un élément HTML à l’aide
de la fonction getElementById et la valeur de son attribut id. Par exemple :
var but1 = document.getElementById("but1");
A l’aide de cette variable, on peut modifier dynamiquement le style comme par exemple :
but1.style.color="blue";
On peut lui associer des écouteurs comme par exemple :
function but1Listener() { alert("but1 cliqued"); }
but1.onclick=but1Listener;
Par ailleurs, les sites qui peuvent vous être utiles sont :
– Tout JavaScript sur http://www.toutjavascript.com/main/index.php3
– Javascriptfr http://www.javascriptfr.com
– w3school-Javascript sur http://www.w3schools.com/js/default.asp
1
1 Un premier contrôle de formulaire
1. Écrire une page XHTML comportant un mini-formulaire composé d’un champ de saisie et d’un
simple bouton. Cette page doit passer la validation W3C.
2. Créer un fichier exo1.js comportant uniquement l’instruction alert(’coucou’). Associer ce
fichier à la page XHTML et rechargez à nouveau votre page XHTML. Que se passe-t-il ? Vérifier
que votre page passe toujours la validation W3C et qu’il n’y a pas d’erreurs JavaScript dans la
console d’erreurs.
3. On remplace l’instruction précédente par :
function controler() {
var zoneSaisie = document.getElementById("zoneSaisie");
alert("La Zone de saisie contient : " + zoneSaisie.value);
}
Décrivez le code de cette fonction. Il faudrait maintenant associer ce code de contrôle à l’événement
click sur le bouton du formulaire. Écrivez le code correspondant (pensez aux diapositives de
cours pour vous aider).
4. Modifier la fonction de contrôle pour afficher un message d’erreur lorsque le champ est vide, et
afficher le contenu du champ lorsqu’il ne l’est pas.
5. La fonction eval, prenant en paramètre une chaı̂ne de caractères représentant une expression,
permet d’évaluer cette dernière. Par exemple :
eval("3+4"); // retourne la valeur 7
eval("bon"+"jour"); //retourne bonjour
Ajouter (concaténez) le résultat de l’évaluation de l’expression donnée par l’utilisateur dans le
champ de saisie à votre affichage. Cela donne une page HTML contenant un formulaire permet-
tant d’exécuter ”on line” de petites opérations.
Solution : exo1tp1.html
<? xml v e r s i o n=” 1 . 0 ” e n c o d i n g=”UTF−8” ?>
< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN” ” h t t p : / /www. w3 . o r g /TR/
xhtml1 /DTD/ xhtml1− s t r i c t . dtd ”>
<html xmlns=” h t t p : / /www. w3 . o r g /1999/ xhtml ” xml : lang=” f r ” lang=” f r ”>
<head>
<t i t l e>Exo 1 TP 1</ t i t l e>
<meta http−e q u i v=” c o n t e n t −type ” content=” t e x t / html ; c h a r s e t=u t f −8” />
</head>
<body>
<form method=” g e t ” action=” ” id=”myForm”>
<p>
<l a b e l f o r=” z o n e S a i s i e ”> E n t r e z une v a l e u r : </ l a b e l>
<input type=” t e x t ” id=” z o n e S a i s i e ” name=” z o n e S a i s i e ” />
</p>
<p>
<input type=” button ” value=”Ok” id=” ok ” />
</p>
</form>
<s c r i p t type=” t e x t / j a v a s c r i p t ” src=” e xo 1t p1 . j s ”> </ s c r i p t>
</body>
</html>

2
Solution : exo1tp1.js
function controler () {
var z o n e S a i s i e = document . getElementById ( ” z o n e S a i s i e ” ) ;
i f ( z o n e S a i s i e . v a l u e == ” ” )
a l e r t ( ”Vous devez s a i s i r une v a l e u r ” ) ;
else {
a l e r t ( ”La Zone de s a i s i e c o n t i e n t : ” + z o n e S a i s i e . v a l u e + ” e t a pour
evaluation ” + eval ( zoneSaisie . value ) ) ;
}
}
var ok = document . getElementById ( ” ok ” ) ;

ok . o n c l i c k=c o n t r o l e r ;

2 Valeur Absolue
1. Écrivez une page HTML contenant un formulaire permettant d’obtenir la valeur absolue d’un
nombre donné par l’utilisateur. Le formulaire comprendra un premier champ de saisie, puis un
bouton et enfin un deuxième champ de saisie.
2. Chaque fois que l’utilisateur clique sur le bouton, une vérification de la valeur placée dans le
premier champ de saisie est effectuée. Si le champ est vide ou ne contient pas de valeur numérique
(pensez à la fonction isNaN), alors un message d’alerte est affichée. Sinon, la valeur absolue de
cette valeur est placés directement dans le second champ de saisie.
3. Placer aussi le code JavaScript permettant de rendre en lecture seule le second champ de saisie
(attribut readOnly).
Solution : exo2tp1.html
<? xml v e r s i o n=” 1 . 0 ” e n c o d i n g=”UTF−8” ?>
< !DOCTYPE html PUBLIC ”−//W3C//DTD XHTML 1 . 0 S t r i c t //EN” ” h t t p : / /www. w3 . o r g /TR/
xhtml1 /DTD/ xhtml1− s t r i c t . dtd ”>
<html xmlns=” h t t p : / /www. w3 . o r g /1999/ xhtml ” xml : lang=” f r ” lang=” f r ”>
<head>
<t i t l e>Exo 2 TP 1</ t i t l e>
<meta http−e q u i v=” c o n t e n t −type ” content=” t e x t / html ; c h a r s e t=u t f −8” />
</head>
<body>
<form method=” g e t ” action=” ” id=”myForm”>
<p>
<l a b e l f o r=” z o n e S a i s i e ”> E n t r e z une v a l e u r : </ l a b e l>
<input type=” t e x t ” id=” z o n e S a i s i e ” name=” z o n e S a i s i e ” />
</p>
<p>
<input type=” button ” value=”Ok” id=” ok ” />
</p>
<p>
<l a b e l f o r=” z o n e R e s u l t a t ”> R e s u l t a t : </ l a b e l>
<input type=” t e x t ” id=” z o n e R e s u l t a t ” name=” z o n e R e s u l t a t ” />
</p>
</form>
<s c r i p t type=” t e x t / j a v a s c r i p t ” src=” e xo 2t p1 . j s ”> </ s c r i p t>
</body>
</html>

Solution : exo2tp1.js
3
var z o n e R e s u l t a t = document . getElementById ( ” z o n e R e s u l t a t ” ) ;
z o n e R e s u l t a t . readOnly=true ;
function calculerValeurAbsolue () {
var z o n e S a i s i e = document . getElementById ( ” z o n e S a i s i e ” ) ;
i f ( z o n e S a i s i e . v a l u e == ” ” | | isNaN ( z o n e S a i s i e . v a l u e ) )
a l e r t ( ” Votre s a i s i e e s t i n c o r r e c t e ” ) ;
else
z o n e R e s u l t a t . v a l u e=Math . abs ( z o n e S a i s i e . v a l u e ) ;
}
var ok = document . getElementById ( ” ok ” ) ;

ok . o n c l i c k=c a l c u l e r V a l e u r A b s o l u e ;

PDF 4 Exer Javascript

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

PDF 4 Exer Javascript

Transféré par

Droits d'auteur :

Formats disponibles

JavaScript - Travaux Pratiques 1

<html xmlns=” h t t p : / /www. w3 . o r g /1999/ xhtml ” xml : lang=” f r ” lang=” f r ”>

var ok = document . getElementById ( ” ok ” ) ;

<html xmlns=” h t t p : / /www. w3 . o r g /1999/ xhtml ” xml : lang=” f r ” lang=” f r ”>

var ok = document . getElementById ( ” ok ” ) ;

Vous aimerez peut-être aussi