TP 4 : Introduction à Javascript

M. K RAJECKI, DESS IAS
Programmation Web
TP 4 : Introduction à Javascript
EXERCICE 1 : L’AFFICHAGE EN JAVASCRIPT
Ecrivez un script Javascript «en ligne», c’est à dire inclus dans le corps de votre page,
affichant :
– une ligne de texte ;
– un ensemble de paragraphes (on utilisera les balise HTML <P> ... </P> ;
– une ligne de texte en gras (on utilisera les balises HTML ...
– le tableau suivant :
première case seconde case troisième case
et voici
une seconde
ligne
– une ligne de texte en gras sans utiliser des balises de formatage HTML comme précédemment.
EXERCICE 2 : UTILISATION DE VARIABLES
Dans le cadre d’un script Javascript «en ligne», déclarez :
– une variable numérique, et affichez sa valeur dans une ligne de texte ;
– un variable contenant une chaîne de caractère, et affichez la chaîne associée dans une
ligne de texte ;
– une variable contenant une chaîne de caractère, et une variable numérique, et affichez
les dans une ligne de texte ;
Enfin, affichez un tableau dont le contenu des cases sera des variables que vous avez
déclaré au préalable.
EXERCICE 3 : LES FONCTIONS
Reprenez le script que vous avez écrit à la question précédente et incluez le dans une
fonction.
Ecrivez une fonction Javascript, prenant une variable contenant une chaîne de caractère en
paramètre, et l’affichant dans la page.
Ecrivez une fonction Javascript prenant quatre paramètres et les affichant respectivement
dans les quatre cases d’un tableau :
valeur variable 1
valeur variable 3
valeur variable 2
valeur variable 4
EXERCICE 4 : UTILISATION DE LA BOITE ALERTE
Créez un bouton dans une page WEB permettant l’affichage, quand on clique dessus, d’une
boite alert contenant le texte que vous voulez (on utilisera l’événement onClick).
Ecrivez une fonction Javascript utilisant une alert. Cette fonction sera appelée lorsque l’on
passera au dessus d’un lien ou d’une image (on utilisera l’événement onmouseOver).
Reprenez le code écrit à la question précédente en incluant un paramètre à la fonction. La
valeur contenue par ce paramètre sera affichée dans la boite alert.
Introduction à Javascript
1/ 4
M. K RAJECKI, DESS IAS
Programmation Web
EXERCICE 5 : STRUCTURES DU LANGAGE
Structure conditionnelle if
Ecrivez une fonction javascript contenant un variable, qui sera initialisée et une structure if
qui teste la valeur de la variable : si la valeur de la variable est inférieure à 10, le script affichera
inférieur à 10 dans le cas contraite le script affichera supérieur à 10.
Structure itérative for
Ecrivez une fonction javascript permettant, à l’aide d’une boucle for, d’afficher tous les
nombres de 1 à 10.
Ecrivez une fonction Javascript comprenant deux boucles imbriquées for, une gérant les
lignes et une gérant les colonnes, permettant l’affichage dans une page WEB d’un tableau de
10 lignes sur 10 colonnes. Chaque cellule du tableau contiendra le numéro de ligne de la case
ainsi que son numéro de colonne.
EXERCICE 6 : FORMULAIRES
Une copie dans le même formulaire
Ecrivez une fonction Javascript permettant la copie d’un champs texte d’un formulaire vers
un autre champs texte d’un même formulaire.
Ecrivez un script javascript comprenant une liste déroulante et un champs de texte. La liste
déroulante sera composée de nom de pays. Quand on sélectionnera un pays de la liste, la
capitale s’affichera dans le champs de texte.
Une copie vers un autre formulaire
Reprenez l’exercice précédent en effectuant la copie d’un champs texte d’un formulaire vers
un autre champs texte d’un autre formulaire.
Un petit QCM
A l’aide des formulaires et de fonctions Javascript réalisez un QCM dont le résultat (le
nombre de réponses correctes) sera affiché dans un champs texte en bas de la page.
Introduction à Javascript
2/ 4
M. K RAJECKI, DESS IAS
Programmation Web
EXERCICE 7 : COMPLÉMENTS
L’emploi de this
Reprenez les exercices précédents en utilisant l’instruction this pour passer les paramètres
des noms des formulaires.
La minuterie
Reprenez le QCM en ajoutant une minuterie déclenchant une boite alert lorsque l’utilisateur
est trop long à répondre.
De la lecture
Lisez le chapitre sur les erreurs en Javascript de Van Lancker Luc (pages 33 et 34). Vous
pouvez également le consulter en ligne : http://www.ccim.be/ccim328/js/error.htm.
EXERCICE 8 : LES FENÊTRES
Fermer une fenêtre
Écrire un script javascript, sous forme de fonction ou en ligne, qui ferme une fenêtre quand
on passe sur un lien.
La barre d’état (status en anglais)
Écrire une fonction javascript permettant de copier un texte entré dans un champs texte d’un
formulaire vers la barre d’état du navigateur. (On utilisera un bouton pour lancer la copie).
Écrire un script javascript utilisant des fonctions permettant de faire afficher des texte différents dans la barre d’état en fonction du passage sur différents liens du document HTML.
Créer des fenêtres
Ecrire un script javascript générant une console (une fenêtre en plus de la fenêtre courante
contenant un autre document HTML) lorsque l’utilisateur passe sur un lien du document HTML
courant.
EXERCICE 9 : LES OBJETS CHAÎNES DE CARACTÈRES (STRING)
Vérification d’une adresse mail
Ecrire un script testant une adresse électronique, entrée dans champs texte d’un formulaire,
est bien construite : si la chaîne passée contient un @ et un .xy à la fin.
Remarque : il n’est pas demandé de tester si cette adresse existe...
Introduction à Javascript
3/ 4
M. K RAJECKI, DESS IAS
Programmation Web
Vérification d’un numéro de téléphone
Écrire un script testant un numéro de téléphone entré dans un champs texte d’un formulaire
est bien formé. (On utilisera la notation française pour les numéros : ab.cd.ef.gh.ij
Contrôle d’accès (non sécurisé)
Écrire une fonction javascript testant si un login et un password entrés dans le cadre d’un
formulaire sont reconnus. La liste des login, ainsi que des password possible seront entrés dans
des variables de type chaîne de caractères.
Pourquoi ce contrôle d’accès n’est-il pas sécurisé ?
EXERCICE 10 : L’OBJET MATH
Maximum de trois valeurs
Écrire une fonction javascript prenant trois valeurs dans un formulaire et renvoyant la plus
grande dans un autre champs de ce formulaire.
Affichage aléatoire d’une phrase
écrire une fonction javascript tirant aléatoirement une valeur et affichant dans la page une
phrase associée à cette valeur. (Les phrases seront contenues dans des variables de type
chaîne de caractères)
Évaluation d’une fonction mathématique
Écrire un script javascript permettant l’évaluation d’une fonction mathématique dont le paramètre est x. Cette fonction sera entrée par un utilisateur dans le cadre d’un champs texte d’un
formulaire. On calculera le résultat de cette fonction pour les valeurs 0,1,2,3,4,5,6,7,8,9,10. Les
résultats successifs seront affichés dans un champs texte d’un formulaire.
Reprendre le script précédent en ajoutant un champs texte dans lequel l’utilisateur entrera
la liste des variables utilisées pour le calcul.
Introduction à Javascript
4/ 4