Sans eux, la toile (Internet)
n'existerait pas. En effet, les milliards de référencements
de pages permettant de naviguer, de surfer, de butiner au travers de l'immense
quantité d'informations diverses et variées, accessibles par
chacun pour le meilleur et pour le pire, ne seraient pas possibles. A une
échelle plus modeste, au niveau d'un site, le renvoi à une explication
donnée dans une autre page est une technique couramment utilisée
permettant de mieux structurer un texte tout en offrant au lecteur un moyen
simple de revenir sur des connaissances annexes. C'est dire l'importance de
ces objets. Bien sûr leur utilisation peut être opérée
en HTML pur, mais ce chapitre va nous montrer comment JavaScript complète
et accroît les diverses manières de créer de tels objets.
|
1
- Création et définition des liens
|
En JavaScript, tous les liens
apparaissant dans une page sont introduits par la balise HTML <A>...</A>.
Pour chaque occurrence de ces balises, un objet est créé et
tous les liens apparaissant dans une page sont contenus dans un objet links
qui est un tableau propriété de l'objet document.
On notera le fait que l'on a utilisé le terme introduits
et non pas définis. En effet, si un lien
peut être directement défini en HTML, il peut aussi n'être
qu'introduit puis défini ensuite sous JavaScript.
Un lien, qu'il soit totalement défini ou pas, comporte deux parties
: la partie opérationnelle qui établit le lien physique recherché
et la partie interface (texte, image, zone sensible d'image,...) sur laquelle
l'utilisateur doit agir pour que la partie opérationnelle soit activée.
Résumons ces deux aspects dans l'exemple suivant. Voici deux liens,
le premier matérialisé par un texte, et le second par une image.
En outre, le premier est totalement défini, alors que le second va
dépendre d'un choix que vous allez devoir faire. Celui-ci ne peut donc
pas être figé et JavaScript va nous permettre de répondre
à votre choix.
|
En
cliquant sur l'image ci-dessous, un dialogue vous permettra de choisir
entre les 3 sites suivants : |
- Le journal
"La Provence"
- Le journal
"Libération"
- Le journal
"Le Monde"
|
|
|
Regardez la barre d'état en bas de la fenêtre de votre navigateur.
Lorsque vous passez le pointeur de souris au dessus du lien de gauche, l'URL
à atteindre s'affiche. Le lien est prédéfini ! A présent,
survolez le bouton de choix ; l'URL qui s'affiche est celle de la page courante.
En effet, dans le cas où la référence ne peut être
résolue à l'appel, autrement dit, si le programme chargé
d'affecter la référence renvoie la valeur undefined,
la page active le reste. Essayez par exemple de donner un numéro non
proposé et regardez ce qui se passe. Un message d'erreur vous signale
que la référence n'a pu être résolue, ce qui dénote
un site mal géré.
Afin d'éviter le message d'erreur, il vaut mieux prévoir l'éventualité
et renvoyer la chaîne "#" qui correspond à l'URL courante.
Essayez à nouveau ! C'est mieux, non ?
Voici comment ont été réalisé ces deux types
de liens :
- Le premier, celui de gauche, est obtenu directement via une balise HTML et a la forme suivante
:
<a href="http://www.dil.univ-mrs.fr/"><font
face="sans-serif" size="2">Site du Département d'Informatique de
Marseille-Luminy</font></a>
- Le second, celui de droite, dispose dans sa partie interface d'une image et passe par une
fonction pour sa partie fonctionnelle:
<a href="" OnClick="this.href=choix()"><img
src="../Images/Choisir.jpg" width="72" height="30" border="0></a>
La fonction choix est de la forme :
function choix(){
var Num=prompt(<Message>);
//Choix de l'utilisateur
switch(Num){
//Aiguillage selon ce choix
case 1 : return <URL 1>;
case 2 : return <URL 2>;
...
case <i> : return
<URL i>;
...
default : return "#";
//Renvoi de # si réponse non prévue
}
}
On remarque que l'appel de la fonction ne peut en aucune façon s'opérer
tel quel dans href. En effet, celui-ci réclame
un argument dont la syntaxe est bien défini et à laquelle ne
répond pas l'appel de la fonction. On est donc contraint d'opérer de deux façons possibles :
- soit préciser en argument de href que l'on va exécuter une séquence JavaScript simplement en faisant précéder celle-ci de javascript:. Ici la séquence se réduirait donc à l'appel de la fonction choix() et on aurait alors :
<a href="javascript:choix()"><img
src="../Images/Choisir.jpg" width="72" height="30" border="0></a>
- soit, comme on l'a proposé plus haut, passer
par la prise en compte d'un événement "click" pour
pouvoir affecter une URL au href via cette
fonction. Nous reviendrons plus loin sur les événements associés
aux liens.
|
2
- Les propriétés des liens
|
Nous avons vu que tous les liens hypertexte contenus dans
une page étaient rassemblés dans un tableau links,
propriété de l'objet document.
Chacun des éléments de ce tableau (i.e. chaque lien hypertexte)
est un objet comportant un certain nombre de propriété que nous
allons passer en revue.
Tout d'abord, définissons la syntaxe d'une URL. Celle-ci doit être
de la forme :
<protocole>//<nom
de domaine>[[:<port>]<chemin d'accès>[?<recherche>][#<ancre>]]
- Parmi les protocoles les plus courants : http:,
ftp:, mailto:,
file:/, news:,
gopher:, about:,
javascript:, mocha:,
où les 4 derniers ont une utilisation spécifique.
- On appelle <domaine> le couple <nom
de domaine>:<port> lorsque ce dernier existe. En son absence,
<domaine>=<nom
de domaine>. Nous ne nous appesantirons pas sur le champ :<port>,
d'une utilisation très marginale et qu'il convient de ne pas mettre
entre toutes les mains !...
- Le <nom de domaine> correspond à
l'adresse du serveur. Lorsque l'URL se limite à la donnée du
protocole suivi du nom de domaine, un chemin d'accès implicite vers
un fichier cible est prévu : le fichier index.html.
En l'absence de ce fichier, le navigateur donne accès à toute
la hiérarchie du domaine et en particulier à des fichiers qui
théoriquement ne devraient pas être accessibles au client. Ceci
est d'ailleurs vrai dans toute la hiérarchie si l'URL n'a pas pour
cible un fichier, mais le nom d'un répertoire. C'est la raison pour
laquelle, par mesure de sécurité, il convient de prévoir
dans chaque répertoire un fichier index.html.
Essayez, par exemple de d'accéder à l'adresse http://www.dil.univ-mrs.fr/~guizol/Le_Site_JS/Chapitre_IX/
ou tout autre répertoire de mon site... Si je n'ai rien oublié,
vous allez toujours trouver un fichier qui vous empêche de musarder
chez moi ! Non, mais !....
- Le champ ?<recherche> se rencontre
lorsque vous avez lancé une recherche sur un site. Essayez par exemple
de lancer une requête sur un moteur de recherche.
- Enfin, le champ #<ancre> permet d'accéder
à l'intérieur d'un fichier cible à un emplacement particulier
qui a été prévu par le créateur en positionnant
une étiquette.
Par exemple, l'URL : http://www.dil.univ-mrs.fr/~guizol/Le_Site_JS/Chapitre_VI/Chapitre_6.html#SLICE
comporte le protocole (http:), le nom de domaine (www.dil.univ-mrs.fr),
le chemin d'accès (~guizol/Le_Site_JS/Chapitre_VI/Chapitre_6.html)
et une ancre dans ce fichier (#SLICE) qui positionne automatiquement
le document sur le paragraphe concerné.
|
|
La propriété hash
C'est une propriété accessible en lecture/écriture
spécifiant, si elle existe, le nom de l'ancre
faisant partie de la cible de l'URL. La chaîne contient le caractère
#.
|
|
|
La propriété host
Accessible elle aussi en lecture/écriture, cette
propriété permet de spécifier l'ensemble nom
de domaine + port.
|
|
|
La propriété hostname
Alors que la précédente concernait l'association
nom de domaine/port, celle-ci, accessible en lecture/écriture, ne s'intéresse
qu'au nom de domaine.
|
|
|
La propriété href
La totalité de l'URL est spécifiée
par cette propriété, elle encore accessible en lecture/écriture.
|
|
|
La propriété pathname
Le pathname concerne la cible à
atteindre sur le serveur désigné par le nom de domaine.
On a vu que cette cible pouvait être soit un fichier, soit un répertoire
et dans ce cas le chemin d'accès était complété
par index.html. Si ce fichier existe, c'est lui qui est chargé, sinon,
le navigateur affiche le contenu du répertoire et à partir de
lui, l'arborescence du site. Cette propriété est à nouveau
accessible en lecture/écriture.
|
|
|
La propriété port
De la même façon que la propriété
hostname s'intéresse à la partie nom de domaine de la propriété
host, la propriété port spécifie le port
de communication de l'URL.
|
|
|
La propriété protocol
Cette propriété de lien accessible en lecture/écriture
permet de spécifier le type de protocole
utilisé pour accéder à la cible désignée
par le lien.
|
|
|
La propriété search
Cette portion de l'URL permet de faire transiter une liste
de couples nom/valeur introduite par le signe ?
résultant d'une requête. Cette
liste sera interprétée selon le même mode que les cookies
que nous verrons plus loin.
Par exemple, pour http://www.google.fr/search?q=javascript&hl=fr&btnG=Recherche
on procédera tout d'abord à l'extraction de la zone search,
puis des différents couples en utilisant la méthode split
paramétrée par le séparateur des couples (ici, '&')
et enfin, pour chacun d'eux, le nom et la valeur en appliquant
à nouveau la méthode split paramétrée par le séparateur
'=';
Cette propriété est encore accessible en lecture/écriture.
|
|
|
La propriété target
Cette propriété permet de spécifier
la fenêtre dans laquelle sera chargée la page désignée
par le lien. La valeur qui lui est affectée peut être une valeur
prédéfinie : "_blank"
qui opère le chargement dans une nouvelle page, "_self",
valeur par défaut qui conduit à charger la nouvelle page dans
la fenêtre contenant le lien, "_parent"
qui charge la page référencée dans le cadre (frame)
immédiatement supérieur à celui contenant le lien supprimant
ainsi tous les cadres de même niveau que celui de départ, et
enfin "_top" qui place la page chargé
au plus au niveau, occupant ainsi toute la fenêtre du navigateur et
supprimant du même coup tous les cadres qu'elle contenait.
Par ailleurs, target peut être affecté avec
un nom correspondant à celui qui a été donné à
une fenêtre préalablement ouverte par la méthode window.open(<url>,<NOM
DE FENÊTRE>,<caractéristiques>)
ou celui d'un cadre défini dans la page courante. Si aucune fenêtre
(ou cadre) désignée par le nom précisé n'existe,
le navigateur se comporte comme si target avait été affecté
à "_blank".
|
|
|
La propriété text
Cette propriété permet de spécifier
le texte utilisé pour la partie interface du
lien, le texte contenu entre les balises <A> et </A> qui
sera visible sur la page. Cette propriété est seulement accessible
sous Netscape. Toutefois, du fait que les objets liens héritent
des propriétés d'éléments HTML, Internet Explorer
permet non seulement d'obtenir le texte en utilisant la propriété
innerText, mais aussi l'environnement HTML
propre à ce texte grâce à la propriété innerHTML.
|
|
|
Les propriétés x
et y
Enfin, encore une particularité de Netscape d'une
utilité marginale (hormis le fait que l'on puisse effectuer un auto-scroll
vers le lien), ces deux propriétés situe
l'apparition du lien dans la page en spécifiant les coordonnées
horizontale (x) et verticale (y).
|
|
3
- La propriété location de l'objet window
.
|
Nous venons de voir les propriétés d'un objet de type lien,
élément du tableau links, lui-même
propriété de l'objet document.
L'objet window dispose d'une propriété,
location, elle-même comportant la plupart
des propriétés que nous venons de voir : hash,
host, hostname,
href, pathname,
port, protocol,
et search. Pourquoi avoir créé
deux entités aussi ressemblantes ? En fait, elles ne s'intéressent
pas aux mêmes objets ! Alors que la première, nous venons de
le voir, s'applique à TOUS les liens hypertextes apparaissant dans
une page, la seconde, elle, représente l'adresse
de la page courante affichée dans la fenêtre du navigateur
cette propriété peut être modifiée.
Ainsi, si l'on affecte à location ou
location.href une nouvelle adresse, la page
correspondante va être chargée dans la fenêtre courante
et donc se substituer à la page actuellement affichée (c'est
une autre façon d'opérer un lien par programme). On peut aussi
ne modifier qu'une propriété de location.
Par exemple, pour se déplacer dans une page sans la recharger, on va
seulement affecter location.hash. (Essai
location.hash="hash").
ATTENTION : Alors
que Internet Explorer, effectivement ne fait que se déplacer dans la
page, Netscape, pour ses versions 2 et 4.5 (au moins) recharge la page !
Alors qu'en lecture, la propriété hash associe le caractère
"#" à l'étiquette choisie, comme cela apparaît
dans l'exemple précédent, il ne faut pas mentionner ce caractère
en écriture !
De la même façon, en modifiant la propriété
search, vous pouvez forcer le navigateur à recharger l'URL avec une
nouvelle requête, ce qui donnera vraisemblablement une apparence différente
du document.
location dispose en outre
de deux méthodes que nous allons présenter : reload()
et replace().
|
|
La méthode reload([<obligatoire>])
cette méthode, comporte un argument facultatif booléen.
En l'absence d'argument ou si celui-ci a la valeur false,
cette méthode agit exactement comme si l'utilisateur cliquait sur le
bouton "Actualiser" du navigateur. Si la page a été
modifiée sur le serveur depuis le précédent chargement,
elle est de nouveau chargée depuis ce dernier, sinon, elle est rechargée
depuis le cache.
Si l'argument a la valeur true,
la page est systématiquement rechargée depuis le serveur.
|
|
La méthode replace(<URL>)
cette méthode permet de remplacer l'URL affichée
dans la fenêtre du navigateur par l'URL fournie en paramètre.
Si la fonction se limite à cela, quelle différence avec la solution
d'affecter location avec la nouvelle URL ?
En fait, alors que dans la seconde solution, l'URL précédente
demeure dans l'historique de navigation, pouvant ainsi être de nouveau
atteinte en cliquant sur le bouton "Précédente"
du navigateur, avec la méthode replace(),
la substitution est totale ; non seulement dans la fenêtre, mais aussi
dans l'historique ! Ainsi l'URL précédente n'est plus accessible
par le bouton "Précédente".
|
4
- Les événements associés
.
|
Les événement que nous allons passer en revue ne sont pas
spécifiques des liens, mais a contrario, ceux-ci peuvent faire usage
de ceux-là de diverses manières et en particulier pour animer
des textes ou des boutons commandant l'activation de liens ou tout simplement,
comme nous l'avons vu au début de ce chapitre dissimuler derrière
l'interface d'un lien un aiguillage vers une URL finale choisie par l'utilisateur.
Ce ne sont là que quelques exemples qui n'ont pas la prétention
de couvrir l'ensemble des possibilités et nous laisserons libre cours
à l'imagination du lecteur pour trouver des utilisations judicieuses
de ces outils.
De façon générale, tous ces événements
apparaîtront dans la définition du lien (entre les balises <A>
et </A>) sous la forme :<événement>="<action>"
où l'action correspond en fait à des instructions JavaScript.
Ajoutons enfin que les trois premiers que nous allons présenter
sont accessibles en tant que propriétés d'un objet de type lien
|
|
L'événement-propriété
OnClick
Dès l'apparition de l'événement OnClick,
l'action JavaScript qui lui est liée est exécutée, avant
même que la valeur associée à href
soit considérée. Ce n'est qu'après avoir exécuté
l'action liée à l'événement que le navigateur
va charger prendre en compte href. Si celui-ci
spécifie une URL, la page correspondante va être chargé
dans la fenêtre ; si par contre sa valeur est null (Si par exemple on
a <a href=""....>) une erreur
va être signalée selon laquelle l'URL ne peut être trouvée.
Afin d'éviter ce problème, ou plus généralement,
si l'exécution de l'action fait que l'on veut renoncer à considérer
la valeur de href (même si celle-ci est
définie), il suffit que l'action associée à OnClick
retourne la valeur booléenne false.
Voici un exemple utilisant deux liens dont la définition
est totalement identique hormis le fait que seule l'action du second renvoie
la valeur false :
Définition du lien
|
Le lien
|
<a href="http://www.dil.univ-mrs.fr"
OnClick="alert('L\'action associée a OnClick est : '+this.onclick)" target="_blank">
Onclick
sans false</a> |
|
<a href="http://www.dil.univ-mrs.fr"
OnClick="alert('L\'action associée a OnClick est : '+this.onclick);return
false" target="_blank"> Onclick avec false</a> |
|
|
|
L'événement-propriété
OnMouseOver
Cet événement apparaît dès que
le pointeur de souris survole un lien. Vous en avez sûrement déjà
vu les effets à maintes reprises. En effet, l'action par défaut
prévu dans tous les navigateurs consiste à afficher dans la
barre d'état, au bas de la fenêtre, l'URL correspondant au lien
survolé. Par exemple, passez la souris au dessus d'un quelconque des
deux liens ci-dessus. Vous voyez apparaître "http://www.univ-mrs.fr"
correspondant à la valeur de href.
A présent survolez le lien ci-contre : essai1
de OnMouseOver.
Dans tous les cas, vous voyez apparaître un calque.
Cette apparition est le résultat d'une des actions associées
à l'événement en question. De plus, si votre navigateur
est Explorer vous voyez dans la barre d'état non plus l'URL du lien,
ce qui est le fonctionnement normal par défaut du navigateur, mais
un message indiquant, par exemple, la fonction associée à l'événement
(mais vous auriez pu tout aussi bien afficher l'âge du capitaine...). Dans
Netscape, par contre, il n'y a aucun changement dans la barre d'état.
Recommençons l'expérience avec ce second lien
: essai
de OnMouseOver.
Le fonctionnement est identique au précédent
pour ce qui concerne Explorer. Par contre, sous Netscape, nous voyons cette
fois apparaître dans la barre de menu, non pas l'URL, mais le message
choisi. La seule différence qu'il y a entre le premier et le second
exemple est que nous avons retourné de l'action associée à
l'événement OnMouseOver, un booléen
de valeur true. Cela impose au navigateur de
ne pas effectuer l'action par défaut qui consiste à afficher
l'URL.
Pourquoi doit-on renvoyer false
dans OnClick et true
dans OnMouseOver pour forcer le navigateur
à faire seulement ce que nous voulons ? Ne cherchez pas à comprendre
pourquoi.... C'est un héritage du passé !
|
|
L'événement-propriété
OnMouseOut
Les exemples précédents ont montré,
au travers des actions prévues, que l'on pouvait faire apparaître
des objets. On a vu que Netscape efface le contenu de la barre d'état
dès lors que le pointeur de souris ne survole plus le lien, ce qui
n'est pas le cas pour Explorer. Pour cela, Netscape capte, en fait, l'événement
OnMouseOut. Il suffit que nous fassions de même pour rendre invisible
les calques ou effacer la barre d'état sous Explorer.
Faisons l'essai : essai de OnMouseOut.
Effectivement, les textes et objets apparaissant lorsque
le pointeur survole le lien, disparaissent dès que ce n'est plus le
cas.
|
|
L'événement OnMouseDown
Cet événement apparaît à l'instant
précis où le bouton de souris est appuyé et disparaît
dès qu'il est relâché. Cela autorise une intervention supplémentaire
pendant l'action du click. En fait celui-ci est décomposé en
deux phases, bouton appuyé/bouton relâché.
Pour appliquer cette nouvelle fonctionnalité, considérons
un "bouton" ayant trois apparences : un état de repos, un
état pointé et un état appuyé ces trois états
étant respectivement représentés par les images suivantes
:
Ces trois images seront utilisés de la façon
suivante :
- La première sera celle contenue dans le lien en tant qu'interface
par défaut ;
- La seconde se substituera à la première sur événement
OnMouseOver, la précédente reprenant
sa place sur événement OnMouseOut
;
- Enfin, la troisième apparaîtra lorsque le bouton de souris
sera appuyé, sur événement OnMouseDown.
Et voilà le travail.............. .
Ce lien vous conduira vers une utilisation de cette technique dans le chapitre
VII
|
|
L'événement OnMouseUp
Ce dernier événement permet de prendre en
compte le fait que le bouton de souris est relâché. Dans l'exemple
précédent, sur événement OnMouseUp,
nous avons rétabli l'image correspondant à l'état de
repos. Si tel n'avait pas été le cas, l'image correspondant
au bouton appuyé aurait été maintenue. Dans la réalisation
du chapitre VII à laquelle on accède par le lien ci-dessus,
vous pouvez voir que l'événement OnMouseOver
n'a pas été géré (rien ne se passe lorsqu'on survole
le bouton). Par contre, on peut voir que l'événement OnMouseDown
provoque une modification de l'allure du bouton et l'événement
OnMouseUp permet de faire apparaître le
schéma explicatif animé.
|
|
Avant de terminer, signalons la propriété
referrer de l'objet document qui fait référence à
l'URL du document (s'il existe) à partir duquel le document présent
à été atteint. Par exemple, vous êtes parvenu à
cette page à partir de... cette
URL.
Bien entendu, cette propriété n'est accessible
qu'en lecture... «On ne peut refaire l'histoire»
|
|