TP 5 - JavaScript (1)

Exécution d'un code JavaScript

Dans cet exercice, nous allons créer une page HTML qui nous permettra de tester nos fonctions écrites en JavaScript.

Pour commencer, créez un fichier "test_fonction.html" en fonction du modèle suivant : test_fontion.png. Utilisez l'élément button pour afficher le boutton. Pour l'instant, ce dernier n'effectuera aucune action.

Pour la suite, nous allons avoir recours à la méthode window.alert() de JavaScript. Lisez attentivement sa documentation.

Il faut savoir que la méthode alert() appartient à l'objet window et que ce dernier est un objet global dans JavaScript. Cela signifie que l'on peut appeler les méthodes de cet objet sans préciser son nom. Par exemple, l'instruction window.alert("Bonjour") est identique à l'instruction alert("Bonjour").

Nous allons maintenant associé un événement onClick au bouton (cf. cours). Modifiez votre fichier "test_fonction.html" afin d'afficher la fenêtre suivante lors d'un clic sur le bouton : test_fonction_alert.png.

Nous allons maintenant écrire notre code JavaScript dans un fichier séparé. Pour cela, créez un fichier "test_fonction.js" et associez-le à votre page à l'aide de l'élément script.

Dans votre fichier JavaScript, créez une fonction message() qui appelle la méthode alert() avec le message suivant : "Cette fonction se trouve dans un fichier externe".

Modifiez l'attribut onClick de l'élément button afin d'exécuter votre fonction message() lors d'un clic sur le bouton.

Manipuler des fonctions

Dans cette partie, vous ajouterez de nouvelles fonctions dans le fichier "test_fonction.js" et vous testerez ces fonctions à l'aide du fichier "test_fonction.html".

Pour commencer, vous allez ajouter la fonction surface() à votre fichier "test_fonction.js". Cette fonction prendra deux arguments : longueur et largeur. Ces arguments correspondent respectivement à la longueur et à la largeur d'un rectangle. La fonction renverra la surface du rectangle.

Créez maintenant une fonction onSurface() qui sera appelée lors d'un clic sur le bouton. À l'aide de la méthode window.prompt(), cette fonction demandera à l'utilisateur d'entrée la longueur d'un rectangle, puis sa largeur. La surface sera calculée à l'aide d'un appel à la fonction surface() et sera affichée selon le modèle suivant : surface.png.

À l'aide de la méthode window.confirm(), réalisez une fonction onValidation() qui demande à l'utilisateur s'il souhaite valider une option. Selon la réponse de l'utilisateur, affichez que l'option a été validée ou qu'elle n'a pas été validée. Cette fois, l'affichage se fera à l'aide de la méthode document.write().

Vous pouvez remarquer que la méthode document.write() remplace complètement le contenu de la page.

Pour terminer cet exercice, nous allons réaliser un code JavaScript qui affichera les tables de multiplication. Les tables seront générées dynamiquement. Elles s'afficheront dans un tableau HTML à l'aide des éléments table, tr et td. Pour l'instant, nous allons générer un code HTML brut sans les éléments html, head et body. Nous ne prêterons également aucune attention à la lisibilité du code HTML généré (seul le résultat affiché comptera). Bien entendu, ceci reste acceptable uniquement dans le cadre d'un exercice.

Dans un premier temps, vous allez créer une fonction table() qui prendra comme paramètre le numéro de la table à générer (par exemple 9, pour la table des 9). Cette fonction devra renvoyer une chaîne de caractères qui contiendra le code HTML d'un tableau qui servira à l'affichage de la table de multiplication. Vous devrez évidemment utiliser une boucle for. Par exemple, si la table de multiplication est 9, le code HTML généré sera le suivant :

Afin de créer cette chaîne de caractères, il est conseillé d'utiliser l'opération de concaténation : +

Par exemple :

        var result;
        result  = '<table border="1">\n';
        result += '    <tr>\n';
        result += '        <th colspan="2">Table des ' + number + '</th>\n';
        result += '    </tr>\n';
        etc...
        return result;

Remarque

L'exemple de code généré ci-dessus est bien indenté. Techniquement,vous n'avez pas besoin de gérer l'indentation ni les retours à la ligne. Tout le code du tableau peut se trouver sur une seule ligne. Cela n'affectera en rien l'affichage. Comme cela a été dit précédemment, la lisibilité du code HTML généré n'est pas prise en compte pour l'instant. Si toutefois vous souhaitez générer un code propre, utilisez des espaces pour l'indentation et le caractère d'échappement '\n' pour les retours à la ligne.

Vous allez maintenant créer une fonction onTable() qui sera exécutée lors de l'appui sur le bouton. Cette fonction demandera à l'utilisateur quelle table de multiplication doit être affichée (méthode prompt()). Ensuite, elle appellera la fonction table() qui générera le tableau HTML à afficher. Enfin, ce tableau sera envoyé au document à l'aide de la méthode document.write(). Par exemple, pour la table des 9, vous devrez obtenir l'affichage suivant : table_09_affichage.png.

N'hésitez pas à afficher le code source de la page à l'aide de votre navigateur afin de visualiser le code source que vous avez généré.

Tester un formulaire

Pour cet exercice, nous allons utiliser un formulaire quasiment identique à celui d'un TP précédent. Téléchargez les deux fichiers suivants et affichez la page dans un navigateur.

Si l'on regarde le code HTML de ce formulaire, on peut remarquer trois choses :

Ce fichier HTML est associé à un script "formulaire.js" qui n'existe pas encore.
Le nom du formulaire est : monFormulaire.
Un bouton Tester a été ajouté en bas du formulaire. Ce bouton lance la fonction tester_formulaire(). Cette fonction se trouvera dans le fichier "formulaire.js".

Téléchargez maintenant le fichier formulaire.js. Ce fichier contient la fonction tester_formulaire(). Lisez attentivement cette fonction afin de comprendre son fonctionnement. Elle possède quelques commentaires qui pourront vous aider. Pour l'instant, cette fonction ne tient compte que du champ Nom et de la case à cocher C.

Exécutez cette fonction en appuyant sur le bouton Tester et en essayant plusieurs possibilités pour le champ Nom et la case à cocher C.

Une fois que vous avez compris le fonctionnement de cette fonction, complétez là afin d'afficher le message suivant formulaire_affichage.png pour un formulaire rempli de la façon suivante formulaire_rempli.png.

Pour afficher les compétences, vous afficherez une chaîne contenant les différentes compétences séparées par des virgules. Le problème est que la dernière compétence affichée contiendra aussi une virgule. Vous devrez supprimer cette virgule de la chaîne à l'aide de la méthode substr(). Si aucune compétence n'est cochée, vous afficherez aucune.

En ce qui concerne les autres compétences, elles ne devront s'afficher que si le champ est rempli.

Créez maintenant un deuxième champ pour saisir l'adresse e-mail dans le formulaire. Modifiez ensuite votre fonction tester_formulaire() de la façon suivante :

Si les deux champs e-mail sont égaux, alors la fonction affiche la même chose que précédemment.
Si les deux champs e-mail sont différents, alors la fonction affiche un message d'erreur (sans afficher la valeur des autres champs).

Zoom

Dans cet exercice, nous allons changer la taille d'une police de façon dynamique.

Pour commencer, téléchargez les fichiers suivants :

Affichez la page HTML et inspectez le code source en détail (HTML + CSS).

Il est possible de modifier la taille d'une police à l'aide de la propriété element.style.fontSize. Par exemple, l'instruction suivante toZoom.style.fontSize = "20px" va définir la taille de la police de l'élément ayant l'identifiant toZoom à 20 pixels.

Créez un fichier "zoom.js" qui contiendra (entre autres) les deux fonctions zoom_plus() et zoom_moins() afin d'effectuer un zoom sur le texte lors d'un clic sur les images. La taille du texte sera stockée dans une variable accessible aux deux fonctions. Vous limiterez la taille à 1 pixel au minimum.