Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

Dreamweaver et JavaScript

allez à créer une fenêtre popup avec Dreamweaver

La terminologie

Une fonction JavaScript vous permet de définir une instruction ou des instructions que le navigateur doit exécuter. Vous pouvez spécifier au navigateur d'éxécuter un script à la suite d'un événement comme le click ou le passage de la souris ou à s'exécuter automatiquement.

Une fonction JavaScript doit être du format suivant:

<script language="JavaScript">
<!--
function   function_name([parameter(s)]){
statements;
}
// -->
</script>

Pour le monde réel, utilisez le code JavaScript suivant:

<script language="JavaScript">
<!--
function my_alert(){
alert("Bonjour le Monde.");
}
// -->
</script>

Pour exécuter ou invoquer cette fonction, vous pouvez utiliser "onclick" comme suit:

<a href="javascript:void(0)" onclick="my_alert()">Essayez-le</a>

Ou vous pouvez placer le code suivant dans n'importe quel endroit de votre page où le script va s'exécuter lorsqu ele navigateur le détecte. la fonction doit être définie avant qu'elle soit appellée:

<script language="JavaScript">
<!--
mon_alerte ();
// -->
</script

Les paramètres ou les arguments de la fonction

Une focntion peut avoir plusieurs arguments. Chaque argument est séparé par une virgule:

function ma_function(argument1,argument2,...argumentn){
statements that use the arguments;
}

L'exemple de script suivant a un formulaire de texte comme argument:

function mon_alerte(msg){
alert(msg);
<a href = "javascript:mon_alerte(document.form1.entry.value)">Essayez-le</a>

Ecrivez un message puis cliquez Essayez-le.

 

Note: Comment on se réfère au formulaire de texte
document.form_name.textfield_name.value

C'est un exemple où Javascript renvoit à des objets; une très importante notion en JavaScript.

Redirection Popup ou rafraîchissement de la fenêtre parente

Introduction

 

Plusierus développeurs web se demande:

"Comment puis-je avoir un lien dans la cible parente d'une fenêtre popup?" ou
"Comment puis-je créer une fenêtre popup qui redirige vers la fenêtre parente quand le popup est fermé?"



L'objectif en quelques mots

Votre première page, la page parente, a un lien qui ouvre une fenêtre popup.

Votre fenêtre popup est ouverte.

La fenêtre popup contient des liens de navigation pour votre utilisateur.

  1. Après que l'utilisateur ait cliqué sur un lien, la fenêtre parente doit rediriger vers la page demandée dans le lien et la fenêtre popup doit se fermer.
  2. Etes-vous prêts à voir comment ça marche?

Comment ça marche?

C'est tout marche bein comme prévu, la fenêtre popup sera fermée et redirige vers la fenêtre parente.

Laissons svoir comment ça marche! Vous avez besoin de 4 pages pour cet exemple ( ne vous inquiétez pas, ce n'est pas compliqué).

Trois pages:

1- Une page avec un lien pour ouvrir la fenêtre popup: index.htm ou une page de votre site.

Deux pages où votre utilisateur ira quand la fenêtre popup sera fermée. Seulement une de ces deux pages sera affichée selon le choix de l'utilisateur.

  • 2- transferer-fichiers-avec-dreamweaver.html
  • 3- acquerir-fichiers-avec-dreamweaver.html
  • La page que l'utilisateur verra quand la fenêtre popup soit ouverte.
  • 4- navigation.htm


Première étape: Créer la page courante (index.htm)

La page courante, index.htm, doit contenir un lien pour ouvrir la fenêtre popup qui contient à son tour la page navigation.htm

Dans la page index.htm, écrivez le texte qui contient le lien qui vouvrira la page navigation.htm

Dans la page index.htm, écrivez le texte pour indiquer à l'utilisateur de cliquer sur le lien de la fenêtre popup navigation.htm

Sélectionnez le texte et écrivez: javascript:; dans le champ indiqué ci-dessous dans l'inspecteur des propriétés comme lien. Il va créer un lien nul auquel vous allez assigner un comportement pour le texte. le comportement dans ce cas est: ouvrir la fenêtre popup.

Lien JavaScript avec Dreamweaver

Placez votre curseur dans le champ de votre lien créé.

Ouvrez le panneau des comportements: Fenêtre > Comportements.

Cliquez sur l'icône "+".

Sélectionnez: Ouvrir la fenêtre Navigateur
Ouvrir la fenêtre Navigateur

Vous serez invité à localiser la page popup précédemment créée (parcourir) et lui assigner des fonctionnalités.

Propriétés de la fenêtre popup

Dans notre cas la fenêtre popup est navigation.htm

Assignez les autres attributs comme désiré.

Clic: OK

Récapitulation rapide

Vous avez créé une page index.htm avec un lien qui ouvrira la fenêtre popup appellée navigation.htm en utilisant Ouvrir fenêtre Navigateur dans Comportements.

L'aspect le plus important est que vous dirigiez l'utilisateur qui clique sur le lien contenu dans un texte de index.htm vers la page de la fenêtre popup appellée navigation.htm.

Deuxième étape: La fenêtre popup

 

Continuons dans notre exemple, la fenêtre popup navigation.htm permet l'accès à deux pages de votre site: une pour les utilisateurs Dreamweaver: dreamweaver.htm et l'autre aux utilisateurs UltraDev: ultradev.htm

Créer deux liens dans navigation.htm:

Si vous voulez savoir comment transférer des fichiers avec Dreamweaver, cliquez ici* - va éventuellement se lier à la page transferer-fichiers-avec-dreamweaver.html

Si vous voulez acquérir des fichiers avec Dreamweaver, cliquez ici* - va éventuellement se lier à acquerir-fichiers-avec-dreamweaver.html

*Ce sont des liens nuls et ne faites avec cet exemple car votre page va avoir des liens actifs dans ce qui va suivre.

  1. Pour le lien Dreamweaver:
  2. Sélectionnez le texte "Si vous voulez savoir comment transférer des fichiers avec Dreamweaver, cliquez ici" et créez un lien nul comme si vous voulez faire ouvrir une fenêtre popup. le code va être comme ça:


    1. <a href="javascript:;">Si vous voulez savoir comment transférer des fichiers avec Dreamweaver, cliquez ici</a>

      Maintenant, pour diriger la fenêtre courante vers la fenêtre appropriée, modifiez le code comme suivant:

      <a href="javascript:;" onclick="opener.location='transferer-fichiers-avec-dreamweaver.html'">Si vous voulez savoir comment transférer des fichiers avec Dreamweaver, cliquez ici</a>
    2. Le code JavaScript ordonne au navigateur d'ouvrir transferer-fichiers-avec-dreamweaver.html dans la fenêtre parente quand le lien est cliqué.
      Pour faire en sorte que le la fenêtre popup se ferme au moment de cliquer sur le lien pour ouvrir l'autre page transferer-fichiers-avec-dreamweaver.html, modifiez votre code:
      <a href="javascript:;" onclick="opener.location=' transferer-fichiers-avec-dreamweaver.html';self.close()">Si vous voulez savoir comment transférer des fichiers avec Dreamweaver, cliquez ici</a>
      Le code ordonne alors au navigateur de fermer la fenêtre popup quand on clique sur le lien et qu'on ouvre la page voulue.

      Pour le lien acquérir des fichiers avec Dreamweaver, suivez simplement l'étape 2 et n'oubliez pas de changer transferer-fichiers-avec-dreamweaver.html avec acquerir-fichiers-avec-dreamweaver.html

 

Récapitulation rapide

 

Vous créez une page nommée navigation.htm qui affiche la fenêtre popup avec deux liens qui permettent à l'utilisateur d'accéder au choix à l'une de deux pages de votre site ou d'un autre site. Quand l'utilisateur clique sur le lien de son choix contenu dans la page de la fenêtre popup, il sera dirigé vers la page choisie et le popup sera fermé automatiquement.

Ce que vous avez appris

Créer un lien qui ouvre une fenêtre popup.

La fenêtre popup offre à l'utilisateur un choix de navigation; un menu.

Quand l'utilisteur clique sur un lien, la fenêtre courante le redirige vers la page appropriée.

La fenêtre popup se ferme après clic sur le lien.
Tout ça avec un simple bout de code JavaScript:

    1. <a href="javascript:;" onclick="opener.location='votrepageici.htm';self.close()">

C'est tout!

 

Dreamweaver® est une marque déposée d'Adobe® Systems Incorporated. Les logos et les noms de marques cités dans ce site sont les propriétés respectives de leurs développeurs.

 

Création de sites web

hit counter