Vous êtes sur la page 1sur 8

TD JAVASCRISPT 2017-2018

EXERCICES JAVASCRIPT ET FORMULAIRE


Question 1 :

Ecrivez le texte Mon premier exercice javascript dans la page

Question 2 :

Affichez le texte Mon premier exercice javascript dans une bote alerte ?

Question 3 : calcul de la surface dune cercle

Effectuez le calcul de la surface dun cercle (3.1416 * r2) o le rayon est gal 3

Question 4 : Bote dinvite + boucle

Ralisez le calcul de la surface dun cercle (3.1416 * r2) dun rayon fournit par lutilisateur dans une
bote dinvite (prompt).. On souhaite par contre afficher 10 valeurs.
valeur

Question 4 bis : Du HTML en Javascript

Afficher dans la page : Cours de Javascript BTS SNIR comme titre <h1> et

Appliquons du style avec JS en normal, gras et italique

Question 5 : Concatnation

Ecrivez par une seule instruction document.write, la variable chaine1 = vive le suivi de la variable
chaine2 = Javascript

Question 5 bis : fonction

Affichez un boite dalerte par un bouton.


bouton. Le clic sur ce dernier appellera une fonction qui dclenchera
la bote dalerte.
Indice : Utiliser onClick

1
TD JAVASCRISPT 2017-2018
Question 6 : Fonction Prix en ligne

Soit deux zones de texte destines lencodage des quantits du prix unitaire. Calculez le prix hors
TVA et le prix TVA incluse (19.6%). Les rsultats sont renvoys dans des zones de texte au clic sur le
bouton calculer.

Indice : Pour larrondi 2 chiffres aprs la virgule, utiliser y = Math.round(y*100)/100.

Question 7 : Convertisseur euro

Elaborez un convertisseur Dollars Euro comme illustr par la capture dcran.

Indice : Supposons que le montant en euro sobtient en divisant le dollars par 1.2 et le montant en euro
multipliant par 1.2. Pour larrondi 2 chiffres aprs la virgule, utiliser y = Math.round(y*100)/100.

Question 8 : conditions if()..else

Soit une zone de texte complter par lutilisateur. Vrifiez que la rponse est correcte (ici le mot
algorithme). Un texte validant ou pas la rponse sera affiche dans une bote dalerte

Question 9 : Table de multiplication

Affichez la table de multiplication du nombre saisi par lutilisateur dans une bote dinvite.
Indice : la bote dinvite est ralise par la mthode prompt ( ).

2
TD JAVASCRISPT 2017-2018

Gestionnaire Dvnement

Question 10 : Evnement onSelect

Affichez une bote dalerte la slection dun mot dans une zone de texte

Question 11 : Evnement onFocus

Affichez le texte Votre email ici ! , lorsquune zone de texte reoit le focus (llment de lobjet
devient actif )

Question 12 : Evnement onUnload

Affichez une vos remerciements dans une bote dalerte lorsque le visiteur quitte la page.

3
TD JAVASCRISPT 2017-2018
Question 13 : Evnement onReset

Affichez le texte Ceci effacera les donnes dans une bote dalerte lorsque le visiteur clique
cliqu sur le
bouton dannulation (reset).

Question 14: Evnement onKeyUp

Affichez dans une bote dalerte, aprs chaque lettre (venement onKeyUp), le texte encod dans une
zone de texte

Question 15 : Evnement onMouseOver


Affichez une autre image au survol du curseur dune image initiale. Indice : on utilise les proprits
onmouseover et onmouseout.

Solution :
<!DOCTYPE html>
<html>
<head>
<title>exemple 13</title>
<meta charset="utf-8">
</head>
<body>
<a href="#" onMouseover ="document.image1.src='bleu_down.gif'" onmouseout
="document.image1.src='bleu_up.gif'">
<img name ="image1" src="bleu_up.gif" alt="" border="0"></a>
</body>
</html>

Formulaires
Exercices 1 : Attribuer ou annuler une valeur
Au clic, affichez ou annulez une valeur saisie dans une ligne de texte

4
TD JAVASCRISPT 2017-2018
Exercice 2 : Annuler une valeur par defaut

Annuler une valeur par dfaut, au focus dune zone de texte

Exercice 3 : Tester un formulaire vide

Affichez une bote dalerte lors de lenvoi dun formulaire comportant une ligne de texte reste vide

Exercice 4 : Retrouver la valeur dun bouton radio

Retournez dans une ligne de texte, le choix effectu par des boutons de choix unique (bouton radio).

Exercice 5 : Retrouver la valeur dun bouton checkbox

Retournez dans une ligne de texte, le choix effectu par des boutons de choix multiple (boutons
checkbox)

5
TD JAVASCRISPT 2017-2018
Exercice 6 : Retrouvez la valeur dun select

Retrouvez dans une ligne de texte, le choix effectu par un menu droulant (bouton select)

Exercice 7 : QCM sous forme de boutons radio

Concevez un questionnaire avec des boutons de choix unique (radio). Au clic sur le bouton Vrfier,
affichez dans une bote dalerte si la rponse est bonne ou fausse.

Indice : Utiliser lattribut chekcked des boutons radio pour trier les rponses.

Exercice 8 : QCM sous forme de cases cocher

Concevez un questionnaire avec des boutons de choix unique (checkbox). Au clic sur le bouton
Vrfier, affichez dans une bote dalerte si la rponse est bonne ou fausse.

Exercice 9 : QCM qui affiche le rsultat

Concevez un questionnaire avec des boutons de choix unique (radio). Au clic sur le bouton Vrfier,
affichez dans une zone de texte, le nombre de rponses correctes. Au clic sur le bouton Recommencer,
rinitialisez blanc le questionnaire.

6
TD JAVASCRISPT 2017-2018

Exercice 10 : QCM Chronomtr

Concevez un questionnaire avec des boutons de choix unique(radio). Le temps de rponse est limit
10 secondes. Au clic sur un bouton radio, affichez dans une bote dalerte le rsultat et ventuellement,
si le temps allou est coul.

Indice : la minuterie est implante par une instruction setTimout qui sactualise toutes les secondes.

Suite des questions :


Question 16 : Utilisation de getElementById

Soit un formulaire illustr par la capture dcran suivante. Les zones de texte sont dfinies par un
identifiant Id. Au clic sur le bouton Reproduire, renvoyez la valeur des boutons de choix
unique(radio) dans la zone de sortie en utilisant la mthode getElementById

7
TD JAVASCRISPT 2017-2018
Question 17 : Utilisation de getElementsByName
Reprenons le mme formulaire que la question 16. Les lments du formulaire sont dfinis par un
identifiant name. Au clic sur le bouton Reproduire, renvoyez la valeur des boutons de choix unique
(radio) dans la zone de sortie en utilisant la mthode getElementByName.

Question 18 : Utilisation de getElementsByTagName


Reprenons le mme formulaire de la question 17. Au clic sur le bouton Reproduire, renvoyez la
valeur des boutons de choix unique (radio) dans la zone de sortie en utilisant la mthode
getElementsByTagName.

Question 19 : Nombre dlments dun formulaire


Avec le mme formulaire de la question 18, au clic sur le lien affich, indiquez dans une bote dalerte
le nombre dlments du formulaire
Indice : Utiliser la propit getElementsByTagName

Vous aimerez peut-être aussi