Utiliser des cadres

Nous allons créer un document affichant la table de multiplication demandée par l'utilisateur par l'intermédiaire d'un formulaire. Nous utiliserons un cadre invisible pour conserver dans une variable le nom de la table demandée.

Les fichiers HTML

L'utilisation de cadres nous oblige à créer trois fichiers HTML.

• un fichier principal, tables.html, qui annonce l'existence des cadres.
• un fichier affiché, result.html, qui affiche la table demandée et le formulaire permettant de la choisir.
• un fichier invisible, statut.html, qui contient simplement des variables JavaScript.

Le fichier principal

Ce fichier annonce les deux cadres, en faisant en sorte que l'un soit invisible et l'autre occupe tout l'espace disponible.

Cela nous donne :

Le fichier invisible

Ce fichier sert à déclarer deux variables JavaScript.

• une variable booléenne nommée debut initialisée à true; elle nous permettra de savoir s'il s'agit du premier affichage ou si une table a été demandée.
• une variable nommée numTable qui contiendra le nombre dont il faut afficher la table

Comme ce fichier ne sera pas affiché, il contiendra :

Le fichier affiché

Ce fichier contiendra un formulaire permettant de choisir la table à afficher. Nous lui ajouterons par la suite une fonction de traitement du formulaire et la possibilité d'afficher la table demandée.

Ce fichier contient pour l'instant :

Traitement JavaScript

Les 3 fichiers HTML étant prêt, il nous reste à écrire le traitement JavaScript qui va leur donner vie, c'est à dire, d'une part la fonction envoi() appelée par le formulaire, et d'autre part les instructions d'affichage de la table demandée.

Affichage de la table

Les instructions d'affichage de la table seront placées au début du fichier result.html, juste après la balise BODY. Elles ne devront pas être exécutées lors du premier affichage puisqu'aucune table n'a encore été choisie. C'est en testant la variable debut du cadre invisible que nous saurons s'il s'agit du premier affichage ou non.

Nous devons accéder à une variable qui n'est pas définie dans le cadre courant. Il faudra la préfixer en indiquant son emplacement, c'est à dire le cadre nommé statut dans le fichier HTML principal. La référence à la fenêtre principale s'obtient avec la propriété parent du cadre courant. Il suffit d'ajouter ensuite le nom du cadre contenant la variable.

Finalement, l'accès à la variable debut du cadre statut se fait en écrivant :

parent.statut.debut

De même, pour avoir accès au nom de la table à afficher, nous écrirons :

parent.statut.numTable

Finalement, l'affichage de la table sera obtenu par :

La fonction envoi

La fonction envoi(), exécutée lors de l'appui sur le bouton "Afficher" du formulaire, devra effectuer trois opérations.

1. mettre la variable debut à false car le premier affichage est terminé.
2. récupérer le contenu de la ligne de saisie pour le transférer à la variable numTable
3. provoquer un réaffichage du cadre qui contiendra cette fois la table demandée car la variable debut a été mise à false.

Cela s'obtient avec le code suivant :

Le réaffichage du cadre est obtenu en réécrivant la propriété location.href du cadre, en effet cette propriété permet de définir l'adresse du fichier HTML associé au document.