à jour le
16 mars 2007
16 mars 2007
Eric Pichon
Les scripts sont des petits programmes qui permettent au navigateur "client" de déclencher une action (automatiquement ou sur demande de l'internaute).
On trouve sur internet de nombreux scripts déjà écrits que l'on peut copier dans ses pages web (en général dans l'en-tête).
cf par ex sur www.editeurjavascript.com
Exemple : fenêtre jaillissante ("pop-up") en javascript
Permet d'ouvrir un lien dans une nouvelle fenêtre : on peut régler le comportement de la fenêtre qui s'ouvre à l'aide d'un script JavaScript.
NB : on peut aussi ouvrir une nouvelle fenêtre sans
script 
On va écrire le script dans un fichier externe, ce qui permettra d'y faire appel dans plusieurs pages.
Pour permettre à chacune des pages qui appelle ce script d'afficher une fenêtre avec un contenu et des dimensions différentes, on va placer dans ce script des variables dont les valeurs seront précisées dans chacun des documents appelés.
On va créer ce script à l'aide d'un éditeur de texte (bloc-notes) dans un fichier popup.js
popup.js dans notre exemple
|
function ouvre(Url, Nom, L, H, posG, posH) |
déclaration du nom de la fonction ("ouvre")
et des variables (l'adresse de la page qui s'affichera,
le nom de la fenêtre, ses dimensions et sa position) |
| { |
les propriétés de la fonction "ouvre": |
window.open |
elle ouvrira une nouvelle fenêtre |
| ( |
qui aura comme caractéristiques : |
| Url
, |
l'adresse de la page à ouvrir (variable) |
| Nom
, |
nom de la fenêtre qui s'ouvrira (variable) |
|
"resizable=yes, dependent=yes, |
attributs de la fenêtre |
|
"width="+L |
dimensions et distance du bord (en px) on met entre guillemets les éléments constants
de la syntaxe |
| ) |
|
| } |
On va placer ce script popup.js 
dans le dossier du
site.
Les pages HTML qui auront besoin de cette fonction y feront appel grâce à ces lignes dans leur en-tête :
<head>...........
<script src="[chemin
du fichier]popup.js"></script>
...
</head>
Il faut mettre après dans le corps du document un lien où l'on remplace les variables par les valeurs voulues, dans l'ORDRE où on les a déclarées :
par exemple :
|
le lien fait |
<a href=" |
|
appel au script de la fonction 'ouvre' |
javascript:ouvre( |
|
suivi des valeurs destinées à remplacer les
variables, |
|
|
Url (chemin du documentl) |
'../docs/doc.htm', |
|
Nom (nom de la fenêtre) |
'plan', |
|
L (la largeur |
'452', |
|
H (la hauteur |
'368', |
|
posG (la distance du bord gauche |
'200', |
|
posH (la distance du bord haut |
'100' |
|
|
)
|
|
|
"> texte du lien </a> |
Dans la page cible, qui sera ouverte dans la nouvelle
fenêtre, placez un
bouton de fermeture >>> 
Creative Commons.. BY:NC:SA: -Paternité : ce site peut être reproduit et distribué à condition que l'auteur initial, eric pichon, soit cité.- Non commercial : aucune adaptation, reproduction ou utilisation de ce site ne peut être faite à des fins commerciales, sans accord de l'offrant ('licensor') - Partage à l'identique : des adaptations de ce site ne peuvent être diffusées que sous une autorisation identique. A chaque réutilisation ou distribution, vous devez faire apparaître clairement aux autres les conditions contractuelles de mise à disposition de cette création.
