Sie sind auf Seite 1von 5

TP3 : JavaScript

Exercice 1 : Fibonacci (fonctions, boucles, rcursives)


Ecrire un code JavaScript qui rcupre une valeur numrique (x) d'un champs de texte et calcule la
fonction Fibonacci d'ordre x sachant que Fx = Fx-1 + Fx-2 F0=0 et F1=1. Le rsultat sera affich dans
une petite fentre comme dans la figure suivante :

Pour accder un lment HTML, il suffit de lui donner un identifiant (spcifier l'attribut
id="identifiant") et d'utiliser la mthode DOM suivante : document.getElementById("identifiant").
Aprs avoir accder l'lment HTML, on peut rcuprer sa valeur et les valeurs de ses attributs, et
les modifier.
Ex : document.getElementById("identifiant").value="blabla";
Remarques :
N'oublier pas de vrifier que la valeur insre est un entier positif :
Tester si c'est une valeur numrique.
Tester si c'est un entier
Tester si c'est un entier positif
Afficher un message d'erreur si la valeur n'est pas un entier positif et supprimer la valeur insre et
remettre le focus au champs de texte.
Ajouter le script Javascript la page HTML comme un script interne, puis comme un script externe.
La fonction Fibonacci peut tre calcule selon deux mthodes : rcursive ou numrative (boucle).
crire deux fonctions qui permettent de calculer la fonction Fibonacci selon chaque mthode.
Ajouter la page HTML 2 boutons radios qui permettent l'utilisateur de choisir quelle mthode
utiliser pour le calcul de la fonction Fibonacci (cf. figure dans la page suivante).
Ajouter un chronomtre chacune des deux mthodes afin de mesurer et afficher le temps de calcul
pour chaque mthode. Essayer d'appliquer la fonction Fibonacci sur de grands nombres entiers en
utilisant les deux mthodes. Qu'est ce que vous constatez?

Exercice 2 : (switch, setTimeout)


Reprenez le code de votre page personnelle (TP1 : HTML) et dvelopper une page web qui affiche
votre nom et un message d'accueil. Puis la premire section (coordonnes) et deux boutons (suivant
et prcdent) qui permettent d'afficher la section suivante ou prcdente la place de la section
actuelle (cf. figure suivante). Utiliser l'instruction de contrle switch pour changer la section
affiche.

Ajouter un troisime bouton qui permet de lancer l'affichage diaporama pour les diffrentes sections
(coordonnes, formation, activits professionnelles, langues). Chaque cinq secondes la section
actuelle est remplace par la section suivante. Utiliser la commande setTimeout . Une fois le
diaporama est lanc, la valeur du bouton est modifie de play pause et lorsqu'on appuie de
nouveau sur le bouton le diaporama est arrt.

Exercice 3 : Validation d'un formulaire


Dvelopper un formulaire comme la figure suivante :

Utiliser JavaScript pour valider le contenu des champs de texte :


1. Vrifier que le champs Login n'est pas vide, contient une valeur de longueur 5 15 et ne
contient que des lettres ou des chiffres ou un _ .
2. Vrifier que le champs Mot de passe n'est pas vide, contient une valeur de longueur 8 15,
ne contient que des lettres et des chiffres (Ex : mdp=77777777 => faux).
3. Vrifier que le champs Email n'est pas vide, contient une valeur valide (vrifier qu'il y a un
@ suivi d'au moins une lettre puis un . Suivi d'au moins deux lettres) et ne contient pas les
caractres spciaux suivants : (, ), <, >, , , ; , :, \, ", [, ]
4. Crer une fonction qui limine les espaces, parenthses et tirets du champs tlphone. Puis
vrifier qu'il n 'est pas vide, qu'il ne contient que des chiffres et qu'il a une taille de 10
chiffres.
5. Vrifier que l'adresse n'est pas vide
6. Vrifier que le code postal contient une valeur numrique de 5 chiffres
7. Vrifier que le champs ville n'est pas vide et ne contient que des lettres
Si l'une de ces conditions ne sont pas valides, changer la couleur du fond d'cran et afficher une
fentre avec l'erreur comme illustr dans la figure ci-dessus.
Pour crer les patterns ncessaires la validation des champs, se rfrer la page web suivante :
http://www.javascriptkit.com/jsref/regexp.shtml
Modifier le programme prcdent afin de valider chaque champs ds sa modification, comme dans
la figure ci-dessous.
Le bouton submit ne lance plus la validation mais il n'envoie pas les donnes si ils ne sont pas
valides.
Ajouter le message d'erreur convenable cot de l'icne.

Exercice 4 : Bon de commande interactif


Crer un bon de commande comme la figure suivante :

Les valeurs insres dans les champs de texte concernant le client sont valides avec JavaScript
comme dans l'exercice prcdent.
Le prix total pour chaque produit est calcul automatiquement ds le changement de la quantit du
produit en multipliant la quantit slectionne par le prix du produit. En mme temps, le prix total
des produits est mis jour.
Exercice 5 :
Dvelopper une page web qui demande l'utilisateur d'insrer son prnom et nom lors de sa
premire visite (cf. figure ci dessous) et les sauvegarde dans un cookie. Puis, lors de sa deuxime
visite, elle ne lui demande pas d'insrer les donnes, elle les rcupre du cookie et affiche un
message de bienvenue avec le prnom et le nom de l'utilisateur, la date de sa dernire visite et le
nombre d'accs au site (cf. figure ci-dessous). Puis, Elle met jour dans le cookie la date de la
dernire visite et le nombre d'accs.

Figure 1 : 1 re visite

Figure 2 : 3me visite


Exercice 6 :
Dvelopper une page web qui contient une calculatrice qui comprend:
des boutons de 0 9
les oprateurs suivants: +, -, *, /, =, cos, sin, tan, pow, !, sqrt, log, exp, abs, clear,
un champ de caractre o on affiche l'expression calculer et le rsultat du calcul.
La calculatrice permet de faire des calculs simple (avec un seul oprateur et un ou deux oprandes).
Remarques :
Vrifier que l'expression calculer est correcte : !56 =>faux et 56 ! => correcte
Vrifier que les oprandes des oprateurs sont valides : -5 ! => faux.
Clear rinitialise la calculatrice, = calcule l'expression,
Commencer par une expression simple avec un seul oprateur.