TP3 - JS

Objectifs

1. Comprendre la structure des pages web ;
2. Écrire des scripts modifiant des pages.

TP

Les exercices du TP sont dans l'archive à télécharger ici.

Memento de balises

Un mémento sur les balises à utiliser ainsi que leurs attributs est disponible sur ce lien.

Memento CSS

Un mémento des propriétés CSS est disponible sur ce lien.

Memento JS

Un mémento de l'utilisation du JS est disponible sur ce lien

Saisie de nom

Cet exercice va se focaliser sur la saisie d’informations avec les boites de dialogue, ainsi que la manipulation d'événements.
Il faudra compléter le script ex1.js pour permettre, lors du clic sur le bouton de la page, d'afficher une boite de dialogue permettant dans un premier temps de saisir un nom, puis ensuite de vérifier la saisie, et enfin d’afficher un message en fonction du résultat.

1. Récupérer le bouton dans une variable btn, à l'aide de son identifiant.
2. Ajouter sur la variable btn une écoute d'événement de type click (voir la partie cours en cas d'oubli).

La fonction prompt(message) (même usage qu'input en python) permet d'écrire dans une boite de dialogue. Le paramètre message correspond, comme pour input, a un message à destination de l'utilisateur.

3. Écrire l'instruction permettant de saisir une valeur dans une boite de dialogue. La stocker dans une variable.

La fonction confirm(message) permet de retourner True si on appuie sur ok, ou False si on appuie sur annuler. On peut également spécifier un message.

4. Écrire l'instruction permettant de demander à l'utilisateur si son prénom est bien le bon. Stocker le retour dans une variable.

La fonction alert(message) permet d'afficher un message dans une boite de dialogue.

5. Écrire l'instruction permettant d'afficher "Bienvenue" suivi du prénom écrit dans le cas où on a confirmé, "Je me suis trompé" dans le cas contraire.
6. Ajouter une écoute d'événement sur le bouton de type "mouseleave", permettant d'afficher une boîte de dialogue indiquant "Il faut cliquer sur le bouton !".

Calcul de Ahmès

Le calcul de Ahmès est une méthode de multiplication spécifique. L'objectif est de faire une page qui :

• Permet de saisir 2 nombres a et b à l'aide d'un prompt ;
• Affiche ces 2 nombres dans une zone de saisie (en readonly) ;
• Calcul le résultat lors de l'appui sur un bouton et l'affiche dans la zone correspondante ;
• Fait un nouveau calcul lors de l'appui sur un autre bouton.

Dans le fichier JavaScript, la méthode de calcul est déjà donnée, il faudra juste compléter le programme.

1. Écrire les instructions permettant de saisir les nombres a et b.
2. Récupérer, à l'aide du fichier HTML, les balises correspondant aux zones respectives des chiffres, et modifier leur value pour mettre les nombres a et b respectivement.
3. Récupérer le bouton qui calcule, et lui ajouter une écoute d'événement de type click. Dans l'écoute, exécuter la fonction Ahmes().
4. Dans la fonction Ahmes(), récupérer dans la variable résultat la balise correspondant à la zone du résultat.
5. Compléter les 2 fonctions parseInt(), permettant, comme pour int() en python, de transformer une chaine de caractères en entier.
6. À la fin de la fonction, mettre la valeur du calcul (variable s) dans la balise résultat.
7. Tester la page et le bouton.
8. Récupérer le bouton qui permet d'écrire de nouveaux chiffres, et lui ajouter une écoute d'événement de type click. Dans l'écoute, exécuter la fonction nouveau().
9. Dans la fonction nouveau(), remettre toutes les zones de texte vide, puis faire 2 nouveaux prompt, permettant de saisir à nouveau, et d'afficher les nouveaux nombres.

Génération de triangle

Le concept de cete page est de pouvoir dessiner des triangles à l'aide d'étoiles, en appuyant sur des boutons. Si on appuie sur le bouton 5, cela dessine un triangle de hauteur 5 étoiles, etc. On mettra par la suite une zone de texte permettant de saisir une hauteur voulue.

1. À la toute fin du fichier js, récupérer et rajouter une écoute d'événement de type click pour chaque bouton. Chacun des boutons avec une valeur devra exécuter la fonction triangle, en spécifiant, pour la taille, la valeur adéquate.
2. Pour le bouton effacer, récupérer la div contenu, et mettre une chaine de caractères vide dans son innerHTML.
3. Dans la fonction triangle, compléter le code manquant.
4. Dans la page HTML, rajouter une zone de texte, ainsi qu'un bouton dessiner. Ce bouton permettra, lorsque l'on clique dessus, de récupérer la valeur dans la zone de texte, et d'exécuter la fonction triangle suivant la valeur.
5. Récupérer et ajouter l'écoute d'événement sur ce nouveau bouton. Il exécutera la fonction ecrireTriangle().
6. Dans la fonction ecrireTriangle(), récupérer la valeur de la zone de texte.
7. Rajouter l'instruction permettant d'appeler la fonction triangle, en lui donnant la bonne valeur.