TP JavaScript
Exercice 1
: Fibonacci (fonctions, boucles, récursives)
Ecrire un code JavaScript qui récupère une valeur numérique (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 résultat sera affiché dans une petite fenêtre comme dans la figure suivante :
Pour accéder à un élément HTML, il suffit de lui donner un identifiant (spécifier l'attribut
id="identifiant") et d'utiliser la méthode DOM suivante : document.getElementById("identifiant").
Après avoir accéder à l'élément HTML, on peut récupérer sa valeur et les valeurs de ses attributs, et les modifier.
Ex : document.getElementById("identifiant").value="blabla";
Remarques
:
N'oublier pas de vérifier que la valeur insérée est un entier positif :
• Tester si c'est une valeur numérique.
• 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 insérée 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 calculée selon deux méthodes : récursive ou énumérative (boucle).
Écrire deux fonctions qui permettent de calculer la fonction Fibonacci selon chaque méthode.
Ajouter à la page HTML 2 boutons radios qui permettent à l'utilisateur de choisir quelle méthode à utiliser pour le calcul de la fonction Fibonacci (cf. figure dans la page suivante).
Ajouter un chronomètre à chacune des deux méthodes afin de mesurer et afficher le temps de calcul pour chaque méthode. Essayer d'appliquer la fonction Fibonacci sur de grands nombres entiers en utilisant les deux méthodes. Qu'est ce que vous constatez?
Exercice 2
: (switch, setTimeout)
Développer une page web qui affiche un diaporama comme la figure suivante :
Le bouton « previous » affiche l'image précédente et le bouton « next » affiche l'image suivante.
Le bouton « play » permet de lancer l'affichage diaporama pour les différentes images du répertoire.
Chaque cinq secondes l 'image actuelle est remplacée par l'image suivante. Utiliser la commande
« setTimeout ». Une fois le diaporama est lancé, la valeur du bouton est modifiée de « play » à
« pause » et lorsqu'on appuie de nouveau sur le bouton le diaporama est arrêté.
Exercice 3
: Validation d'un formulaire
Développer un formulaire comme la figure suivante :
Utiliser JavaScript pour valider le contenu des champs de texte :
1. Vérifier 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. Vérifier 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. Vérifier que le champs Email n'est pas vide, contient une valeur valide (vérifier qu'il y a un
@ suivi d'au moins une lettre puis un . Suivi d'au moins deux lettres) et ne contient pas les caractères spéciaux suivants : (, ), <, >, , , ; , :, \, ", [, ]
4. Créer une fonction qui élimine les espaces, parenthèses et tirets du champs téléphone. Puis vérifier qu'il n 'est pas vide, qu'il ne contient que des chiffres et qu'il a une taille de 10 chiffres.
5. Vérifier que l'adresse n'est pas vide
6. Vérifier que le code postal contient une valeur numérique de 5 chiffres 7. Vérifier 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 fenêtre avec l'erreur comme illustré dans la figure ci-dessus.
Pour créer les patterns nécessaires à la validation des champs, se référer à la page web suivante : http://www.javascriptkit.com/jsref/regexp.shtml
Modifier le programme précédent afin de valider chaque champs dès sa modification, comme dans la figure ci-dessous. Le bouton « submit » ne lance plus la validation mais il n'envoie pas les données si elles ne sont pas valides.
Ajouter le message d'erreur convenable à coté de l'icône.
Exercice 4
: Bon de commande interactif
Créer un bon de commande comme la figure suivante :
Les valeurs insérées dans les champs de texte concernant le client sont validées avec JavaScript comme dans l'exercice précédent.
Le prix total pour chaque produit est calculé automatiquement dés le changement de la quantité du produit en multipliant la quantité sélectionnée par le prix du produit. En même temps, le prix total des produits est mis à jour.
Exercice 5
:
Développer une page web qui demande à l'utilisateur d'insérer son prénom et nom lors de sa première visite (cf. figure ci dessous) et les sauvegarde dans un cookie. Puis, lors de sa deuxième visite, elle ne lui demande pas d'insérer les données, elle les récupère du cookie et affiche un message de bienvenue avec le prénom et le nom de l'utilisateur, la date de sa dernière visite et le nombre d'accès au site (cf. figure ci-dessous). Puis, Elle met à jour dans le cookie la date de la dernière visite et le nombre d'accès.
Figure 1 : 1 ère visite
Figure 2 : 3ème visite
