COURS JavaScript


Accueil | Les fenêtres modales

Les fenêtres modales



Principe

D'abord, qu'est-ce que c'est qu'une fenêtre modale ? Ça, je peux répondre, c'est pas très compliqué. Et comme un exemple vaut mieux que mille explications, cliquez simplement sur le bouton ci-dessous, et vous saurez tout de suite ce que c'est .

Vous voyez, vous connaissiez déjà, mais peut-être sans savoir que ça portait ce joli nom. En fait, et beaucoup plus sérieusement, une fenêtre modale est ce genre de fenêtre que l'on doit absolument fermer si l'on veut pouvoir continuer à travailler.

La fenêtre modale, bloque l'application qui l'a ouverte, et parfois, tout le système lui même tant qu'elle n'est pas fermée. On s'en sert (vous le voyez dans toutes les applications sous window) pour lancer un message à l'utilisateur. Dans un site Web, on peut lui réserver différents usages : messages à l'utilisateur, avertissement, aide sur un point particulier de la page etc.   En JavaScript, on va voir que ça peut être très utile pour trouver une erreur dans un programme JavaScript. On appelle ça "Debugger" (prononcer "dibeuguer", ça fait très cultivé :-)) un programme.
 
 



Comment ça marche

L'ouverture d'une fenêtre modale en JavaScript, est l'appel d'une fonction JavaScritp intégrée au langage, que vous connaissez sans doute (si vous avez eu la curiosité d'aller voir le code source de certains exemples de ce cours) et qui est la fonction alert().

Il suffit d'écrire l'instruction alert("Ceci est une fenêtre modale") dans un programme JavaScript, pour voir ce que vous voyez en cliquant sur ce lien : Cliquer pour voir.

La fonction alert(), (tout en minuscules) ouvre une fenêtre modale JavaScript, et affiche ce qu'il y a entre les parenthèses de la fonction. Entre ces parenthèses, on peut placer une chaîne de caractères (des lettres et/ou des chiffres entre des guillemets) (1), des chiffres tout seuls (2), un mélange de chaînes de caractères et de chiffres (3), des variables (4). On peut même y placer des propriétés d'objets JavaScript (5). Ou bien même un mélange de tout ça (6).
En fait, et comme nous le savons maintenant, on dit que la fonction alert() accepte plusieurs paramètres : des chaînes de caractères, des numériques, ou des variables. Comme c'est une fonction intégrée, elle s'occupe de tout sans que nous ayons quoi que ce soit à faire d'autre que de lui passer les paramètres en question.
Nous allons voir tout ça tout de suite.

1) Une chaîne de caractères.

Je ne vais pas m'appesantir sur le sujet, car nous venons de le faire dans l'exemple :

alert("Ceci est une fenêtre modale")

2) Des chiffres.

C'est aussi simple, il suffit de mettre les chiffres entre les parenthèses :

alert(123.45)

Cliquer ici pour voir

3) Un mélange de chaîne de caractères et de chiffres.

Là, il suffit de séparer les paramètres par le signe + (plus) pour mettre les uns au bout des autres les paramètres à afficher. On dit que l'on "concatène" (joli non ?) les paramètres. Nous verrons l'usage du signe "+" dans le travail sur les chaînes de caractères plus tard.

Notez bien que dans notre cas précis, et dans la suite de paramètres de notre fonction alert(), le signe plus (+) ne sert pas à additionner, mais à mettre plusieurs choses les unes au bout des autres .

alert("La division de vingt quatre par deux donne " + 12)

Cliquer ici pour voir

4) Des variables.

Nous connaissons là aussi le principe :
a - On déclare une variable dans laquelle on place une valeur (chaîne et/ou chiffres)
b - On la place entre les parenthèses de la fonction alert().

Par exemple :
var Mess = "Ceci est une fenêtre modale";
alert(Mess);

Cliquer ici pour voir

5) Une propriété d'objet.

Nous avons vu dans la leçon sur l'objet document, qu'il possède la propriété .title par exemple. Pour la faire apparaître dans une fenêtre modale, on écrit simplement cette propriété entre les parenthèses de la fonction alert().

alert(document.title)

Cliquer ici pour voir

6) Un mélange de tout ça.

var Mess="Le titre de la page est : " ;
alert(Mess + document.title + " non ?");

Cliquer ici pour voir


 
 



Mise en forme du texte dans une fenêtre modale 

Vu comme ça, la fonction alert() de JavaScript est pratique, mais est bien peu de chose. C'est vrai. On peut cependant lui imposer une certaine mise en forme du texte qu'elle affiche. Oh, pas grand chose, juste de passer à la ligne quand on veut. Mais c'est déjà ça non ? La seule mise en forme que la fonction alert() accepte est le code \n (anti-slash et n) pour passer à la ligne. Bien sûr, pour passer à la ligne et sauter une ligne, on répète simplement \n\n ! Pas plus compliqué que ça.

On peut aussi insérer des caractères dits interdits (comme les guillemets, puisqu'ils servent à délimiter une chaîne de caractères justement dans la fonction alert() ) en les faisant précéder de \ (anti-slash) ce qui donne \" et fait juste apparaître ".

C'est bien peu de chose, mais c'est quand même très utile pour mettre en forme un texte un peu long et structuré que l'on veut afficher pour donner une explication à l'utilisateur. L'exemple ci-dessous est tiré d'une aide modale que j'ai mise dans un des systèmes experts que j'ai réalisé sur le temps de travail. Vous pouvez aller voir plusieurs de ces exemples à l'adresse : http://www.ergostressie.com. Ce sont quelques unes de mes réalisations. Pour bien vous prouver que ça marche, et que c'est utile ! :-) puisque je m'en sers moi même...

exemple (j'ai mis en rouge les caractères de mise en forme pour plus de clarté...):

var Mess = "1 - 2 - 1 Durée hebdomadaire CONSTATÉE (choisir une semaine MOYENNE sans congé)\n\nCette durée est la durée CONSTATÉE et effective : ce constat est une estimation que vous faites en vous appuyant sur la réalité d'une semaine \"moyenne\" (sans congé ou jour férié).\n\nIl est rappelé que le code du travail impose un décompte individuel du temps lorsque les horaires ne sont pas collectifs, y compris pour les cadres (article L.620-2). \n\nForce est de constater que, dans les faits, ce décompte individuel est rarement tenu de manière explicite sur un document écrit.\n\nDans les questions C1 à C8, il s'agit de la durée CONSTATÉE : voir l'article Contrôle des temps de travail individuel des cadres et l'article DURÉE EFFECTIVE DU TRAVAIL en cliquant sur le bouton \"Textes légaux\". "

alert(Mess);

Cliquer ici pour voir le résultat


   


Petit truc et astuce

Certaines et/ou certains d'entre vous ont peut-être été surpris de voir (dans les exemples ci-dessus) que l'on fait apparaître une fenêtre modale en cliquant sur un lien hypertexte HTML, alors que normalement, on devrait aller vers une autre page HTML ou à un autre endroit de la même page... Et vous auriez eu raison d'être surpris, car ça n'est pas normal... En fait, c'est juste un petit truc de programmation, qui appel une fonction JavaScript à exécution différée (placée entre les Tags <Head>... et ... </Head> du code HTML) et entre les Tags <script language="javascript"> ... et ... </script>.

Le code HTML qui réalise cette petite merveille de la technologie moderne (n'en rajoutez plus !) s'écrit comme suit :
On suppose que la fonction à appeler se nomme AfficheMess().

<A Href="javascript:AfficheMess()">Cliquer ici pour voir un exemple</A>

Le texte javascritp: appelle la fonction qui suit les deux points (:) au lieu d'aller se brancher à une adresse quelconque. C'est comme ça que l'on peut faire appel à n'importe quelle fonction JavaScript directement en cliquant sur un lien hypertexte défini par <A Href =" ...."> ... et ... </A>. Faites-en bon usage ... :-))

 

 


 


   


Ce cours est enseigné par Philippe Médan 
dans le cadre de la formation des professionnels de l'INTERNET.
au CREFAC , 14 rue Scandicci, 93000 Pantin. Tél. : 01 48 46 51 99
au GITA-GRETA , Lycée Technologique Diderot 61, rue David D'Angers 75019 Paris Tél. : 01 40 40 36 27
au CESI à l'Ecole des ingénieurs, 116 Av Aristide Briand, BP 57, 92224 Bagneux CEDEX Tél. : 01 45 36 70 00
au CFA-AFIA Centre de Formation par l'Apprentissage spécialisé en Informatique DUT Licence MIAGE,
PUIO - Bâtiment 640 - Plateau du Moulon - 91405 Orsay Tél. : 01 69 15 35 19.

© Philippe Médan 1999-2007. Tous droits de reproduction réservés pour tous pays.