Mme ElousfiSonia Chapitre III 

: Javascript
________________________________________________________________________________________________

1) Utilisation de l'événement onClick :

 Exercice 1:
Lire un nombre et écrire son double.

3) Utilisation de l'événement onFocus :

 Exercice 2:
Ajouter un script à exemple2.html de sorte que si on active la zone de texte1 , un message
apparaît: "vous avez cliqué sur ce champ texte!"
4) Utilisation de l'événement onBlur :
 Exercice 3:
Ecrire un script dans exemple2 .html qui permet à l'utilisateur de cliquer sur le
champ texte 2 et faire disparaître [Mon texte d'origine].
5) Utilisation de l'événement onChange :
 Exercice 4:
Lancer exemple1 .html et modifier le code afin de changer le texte [Changez ce texte] par
[texte changé].
1) Utilisation de l'événement onSubmit :
 Exercice 5:
Ouvrir le fichier exemple1.html et essayer de découvrir comment gérer l'évènement
onSubmit.
- Que faut-il ajouter au niveau de la balise form ?
…………………………………………………………..................................................................
- Que faut-il ajouter au niveau du code JavaScript ?
Exercice :
En s'inspirant des activités, essayer de construire le formulaire suivant:

- Lorsque l'utilisateur change de produit votre script doit afficher le prix unitaire de
l'article. Les articles disponibles sont:
Pantalon : 50 dinars
Veste : 80 dinars
Cravate : 35 dinars
Chemise : 45 dinars

1
Mme ElousfiSonia Chapitre III : Javascript
________________________________________________________________________________________________
- Lorsque l'utilisateur clique sur le champ [quantité] cette mention doit disparaître
pour permettre à l'utilisateur de taper la quantité achetée.
- L'appui sur le bouton Calculer permet de calculer le Montant Total de la
commande.
- Enregistrer le travail sous C:\votrenom.html
Exercice 7 :
Soit la page formulaire "Inscription.html" suivante:

La page "Inscription.html" doit assurer certaines fonctionnalité dont :

1) Le clic sur le bouton "Inscription" fait appel à une fonction "verif( )" écrite en
javascript et qui permet de vérifier le remplissage du formulaire d'inscription en
respectant les conditions suivantes:
- Le champ (Nom et prénom) doit être non vide,
- Le champ (CIN) doit comporter 8 chiffres.
- Une des situations Sociales doit être sélectionné.
- L'adresse (E-mail) doit obligatoirement comporter les caractères ("@ " et "."),
- L'internaute doit choisir une fonction.
2) Si les conditions citées sont satisfaites, un message affiche "formulaire envoyé".
Exercice 8
Utiliser le langage HTML pour créer le formulaire suivant :
JavaScript Easy Quiz
HTML signifie :
HyperText Markup Language
High Taxes Medium Level
JavaScript est un langage :
Coté client
Coté serveur

Evaluation
Evaluation

Le clic sur le bouton Evaluation permet d'évaluer les réponses de l'utilisateur.

Exercice 9
Utiliser la langage HTML pour créer le formulaire suivant :
2
Mme ElousfiSonia Chapitre III : Javascript
________________________________________________________________________________________________
Nom & Prénom :
Age :
Date de Naissance : Janvier

Envoyer
Envoyer Effacer
Effacer

1. Le champ nom_prenom ne doit pas être vide.

2. Le champ age doit être un entier de 5 à 80.
3. Le champ jour doit être un jour valide en fonction du mois sélectionné.
4. Le champ annee doit être calculé automatiquement en fonction de l'âge.
Exercice 10
Créer la page ci-dessous et l’enregistrer la page web avec votre_nom2.html sous le bureau.

1. Créez trois boutons : bouton Rouge, bouton Vert et bouton Bleu avec une image vide ;
Si on clique sur Rouge: l'image d’un carré rouge apparaît
Si on clique sur Vert: l'image d’un carré Vert apparaît
Si on clique sur Bleu: l'image d’un carré bleu apparaît ,
2. Les images rouge.gif , vert.gif , bleu.gif et vide.gif sont à créer avec Paint et les enregistrer sur
le bureau.
Exercice 11
Pour chercher le taux de compatibilité entre deux noms :
 On saisit deux noms composés uniquement de lettres.
 On met ces noms en majuscules.
 On supprime les voyelles.
 On cherche le nombre de lettre communes (lc) et le nombre de lettres non communes
(lnc).
 On calcule le taux : taux = lc/(lnc+lc).
Utiliser les langages HTML et JavaScript pour trouver la compatibilité de deux noms saisis par
l'utilisateur.
Exercice 12
Ecrire un Script qui permet de vérifier que :
 Une adresse email est valide.
 Un code postal est correct.
 Un numéro de téléphone est correct.
 Une valeur entrée est un entier positif.

3
Mme ElousfiSonia Chapitre III : Javascript
________________________________________________________________________________________________
 Une valeur entrée est une valeur alpha-numérique (composée uniquement de lettres et
de chiffres).
Utiliser HTML pour vérifier que les scripts fonctionnent bien.
Exercice 13
Utiliser le langage HTML et le langage JavaScript pour créer le formulaire suivant:
Type du marchandise : Chemise
Taille : Small
Prix :
Trouver Prix

Utiliser une méthode pour stocker le prix de trois articles (Chemise, Pull, Pantalon) en trois Tailles
(Small, Medium, Large).

4
Mme ElousfiSonia Chapitre III : Javascript
________________________________________________________________________________________________

Hiérarchie des objets :

Catégories
Les objets JavaScript sont classés en deux catégories :
 Objets d'interface : window, document,…
 Objets Prédéfinis : String, Math, Date,…

Hiérarchie des objets visuels

La figure suivante présente la hiérarchie des objets de l'interface.

La fenêtre est représentée par l'objet : window.

Le contenu de la page Web est accessible via l'objet : document.
Le document peut contenir plusieurs autres éléments dont le formulaire
nommé ici : formulaire.
Les éléments du formulaires sont accessibles via leurs
noms : nom, prenom, age…
Il est possible d'accéder aux objets en JavaScript à travers
leurs propriétés et leurs méthodes.
Toute variable membre d'un objet est appelée propriété : état d'un objet.
Toute fonction membre d'un objet est appelée méthode : action relative à
un objet.
Exemple :
Comment vous allez procédez pour accéder a l’objet nom
………………………………………………………………………………………
Comment vous allez procédez pour accéder a l’objet bouton s’inscrire
……………………………………………………………………………………..