II/ Une fenêtre popup comportant un bouton de fermeture

Objets et méthodes Javascript :

q       Window.open

q       Window.close

q       onclick

Objectifs : pour définir un mot, plutôt que d’ouvrir une fenêtre normal à l’aide d’un lien hypertexte, vous allez, avec javascript ouvrir une fenêtre de dimension réduite qui restera présente tant que l’utilisateur ne cliquera pas sur un bouton de fermeture.

 

Le Thème : la page essai.htm comporte des renseignements sur la configuration des micro-ordinateurs du club d’informatique Espace Net 2001. On souhaite, qu’un clic sur certains mots ou expressions provoquent l’ouverture d’une fenêtre donnant la définition du mot

 

Etape 1 Créer une page html ordinaire par définition :

On veut définir les mots suivants :

 

Microprocesseur : C’est le cerveau de l’ordinateur. Il exécute les instructions contenues dans un programme. Sa vitesse est exprimée en mégahertz.

 

R.A.M. (Random Access Memory) : c’est la mémoire vive de l’ordinateur, elle est volatile : son contenu est perdu lorsqu’on éteint l’ordinateur…

 

Activité

1)     Créez le dossier definition dans minisite2

q       Pour chaque définition, créez une page html ordinaire reprenant :
- le mot à définir,
- La définition
- Un bouton dont l’intitulé est « Fermer la fenêtre » (pour insérer un bouton : Menu Insertion – Champs de formulaire – Bouton de commande ou cliquer sur l’icône correspondante dans la barre d’outils)

Enregistrez chaque page dans le dossier definition (noms : micropro.htm, ram.htm)

 

Exemple de résultat :

- Affectez au bouton un script :

      * Affichez le code html (menu affichage – html)

      * Le bouton fait partie d’un formulaire et FrontPage a généré le code suivant :

 

 

 

 

 

 

<form method="POST">

    <p align="center"><input type="button" name="B1"

    value="Fermer la fenêtre" onclick="window.close()"></p>

 

 

 

 

 

 

 

Etape 2  Définir un lien hypertexte et un script ouvrant la fenêtre « popup » de définition

 

q       Chargez le fichier essai.htm dans Frontpage Express

q       Sélectionnez le mot microprocesseur et insérez un lien hypertexte qui pointe vers la même page (c’est à dire essai.htm)

q       Affichez le code html

q       Repérez la balise contenant la définition du lien :

(<a href="essai.htm">Microprocesseur</a>)

 

q       Saisissez le code ci-dessous juste après « essai.htm » et avant le signe >

 

 

onclick="=window.open('definition/micropro.htm','définition_de_termes','toolbar=no,status=no,resizable=no,menubar=no,scrollbars=no,width=300,height=300');">

 

Explication :

- onclick : gestionnaire d’évènement qui s’applique lorsqu’on clique sur la souris

- Window.open : permet d’ouvrir une nouvelle fenêtre. Les arguments de la méthode Open comprennent :

     * L’adresse de la page (‘definition/micropro.htm’)

     * le titre de la fenêtre (‘Définition de termes’)

      * Dans le désordre vient une suite d’arguments qu’on peut afficher (valeur =yes) ou ne pas afficher (valeur=no) :

         # Toolbar=yes ou no : La fenêtre comporte (ne comporte pas) une barre d’outils

         # Status = yes ou no : affichage ou non de la barre d’état

         # resizable =yes ou no : fenêtre redimensionnable ou non

         # menubar=yes ou no la fenêtre comporte ou non une barre de menu

         #Scrollbars=yes ou no : la fenêtre comporte ou non des barres de défilement

     *Width= : Largeur de la fenêtre en pixels (faire des essais)

     * Height : Hauteur de la fenêtre en pixels (   «       «     «   )

 

 

Une fois les deux étapes réalisées, testez le fonctionnement du script contenu dans la page essai.htm avec le navigateur Internet.

 

Recommencez le même exercice avec la définition de la RAM :

- Créez une page contenant la définition (à stocker sous le nom ram.htm dans le dossier définition et insérez le bouton (en incluant ensuite le script de fermeture)

- définissez le lien hypertexte sur le mot R.A.M. dans la page essai et incluez un script ouvrant la fenêtre de définition du mot.