TP : JavaScript Objectifs : - Créer des scripts simples - Utiliser les boites d
TP : JavaScript Objectifs : - Créer des scripts simples - Utiliser les boites de dialogue - Insérer un contenu HTML dans un document - Utiliser les opérateurs - Utiliser l’objet document - Manipuler les formulaires LES BOITES DE DIALOGUE Exercice 1 Ecrire un script qui affiche le message "Hello World !" dans une boite de dialogue. Exercice 2 Ecrire un script qui affiche un bouton sur la page. Lorsque le bouton est pressé, une boîte de dialogue apparaît avec le message "Hello World !". Exercice 3 Demander le nom de l'utilisateur au chargement de la page. Demander ensuite une confirmation du nom de l'utilisateur. Si le nom est confirmé, afficher ce dernier dans une boîte de dialogue. Exercice 4 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. Exercice 5 Demander au visiteur de deviner un chiffre donné entre 0 et 10. Afficher ensuite une boîte de dialogue disant si l'utilisateur a trouvé le bon chiffre ou non. Exercice 6 Fournir un commentaire selon l'âge de la personne. Vous devez fournir un commentaire sur 4 tranches d'âge différentes qui sont les suivantes : Tranche d'âge Exemple de commentaire 1 à 17 ans "Vous n'êtes pas encore majeur." 18 à 49 ans "Vous êtes majeur mais pas encore senior." 50 à 59 ans "Vous êtes senior mais pas encore retraité." 60 à 120 ans "Vous êtes retraité, profitez de votre temps libre !" Le déroulement du code sera le suivant : L'utilisateur charge la page web. Il est ensuite invité à taper son âge dans une fenêtre d'interaction. Une fois l'âge fourni l'utilisateur obtient un petit commentaire. Exercice 7 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. Exercice 8 Quand l'utilisateur passe la souris sur un hyperlien (peu importe sa nature, texte ou image, et son effet) il fait afficher dans une ligne de texte un message qui l'invite à cliquer sur le lien. Ce texte disparait quand la souris quitte le lien. L’AFFICHAGE EN JAVASCRIPT Exercice 9 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 Exercice 10 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 11 Ecrire une page pour afficher la table de multiplication d’un entier N. Déclarer une variable entière N et lui affecter la valeur 7 par exemple Utiliser une instruction itérative FOR Améliorer la présentation en o Encadrant les lignes affichées dans un tableau HTML o ou en générant l'affichage sous forme de liste non ordonnée Exercice 12 Déclarer une fonction table_mult(N), qui doit calculer et afficher la table de multiplication par N (si possible encadrée dans un tableau HTML). La valeur du paramètre N sera demandée à l'utilisateur au moyen d'une boite de dialogue PROMPT, puis sera passée en paramètre dans l'appel de table_mult(N). Prolongement Supprimer la demande de valeur N, et faire afficher l'ensemble des tables de multiplication par N = 1, 2, ... 10, par des appels itératifs table_mult(i) Exercice 13 Ecrire un script qui affiche un champ de texte d'un formulaire et qui rempli ce champ avec le message 'Vous avez réussi votre exercice'. Exercice 14 Ecrire un script qui affiche un champ texte et un bouton. Lorsque l'utilisateur clique sur le bouton, il reçoit un message d'alerte si le champ est vide. Sinon, le contenu du champ texte est sélectionné. Exercice 15 Soit la page suivante : <html> <head> <script language="JavaScript"> function bonjour(Monform) { var txt= "et bonne journée !" ; if ((Monform.prenom.value) !="") document.write("<P>Bonjour, ", Monform.prenom.value, "<BR>", txt ,"<BR>" ); else alert("Ecrivez votre prénom !"); } </script> </head> <body> <form name="formulaire"> <input type="text" name="prenom" value="" > <input type="button" name="Bouton1" value="Salut" onClick="bonjour(formulaire)"> </form> </body> </html> Ecrire très exactement ce qu'affichera cette page avant, puis après avoir cliqué sur le bouton; expliquez le code de la fonction. Exercice 16 Réaliser le formulaire suivant qui permet de calculer le double d’un nombre : Entrez un nombre : voici son double : Réaliser ensuite une fonction qui calcule le double d’un nombre. Exercice 17 Une petite calculette toute bête pour transformer des dhs en euro et inversement avec un taux de change de 10.18 : Exercice 18 Ecrivez une fonction Javascript permettant la copie d’un champ texte d’un formulaire vers un autre champ texte d’un même formulaire. Ecrivez un script javascript comprenant une liste déroulante et un champ 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 champ de texte. uploads/Litterature/ tp-js.pdf
Documents similaires










-
24
-
0
-
0
Licence et utilisation
Gratuit pour un usage personnel Attribution requise- Détails
- Publié le Jul 26, 2021
- Catégorie Literature / Litté...
- Langue French
- Taille du fichier 0.1391MB