L'objet link (lien) - Cours Javascript

Introduction

Info

Nous allons maintenant étudier les propriétés de l'objet javascript link.
Grâce à ces propriétés javascript, vous pourrez changer à tout moment l'url de vos lien et sa target...

Vous trouverez d'autres informations pour compléter ce cours dans :
- l'objet javascript Link du Document Object Model HTML
- la balise HTML XHTML A
- les feuilles de style CSS

document.links[ N ]

Info

L'objet document.links[ N ] permet d'atteindre un lien (lien normal et ancre).
N étant un nombre entier, pour les exemples ci-dessous nous le nomerons "identifiant".

Dans une page HTML ou XHTML, les liens sont numérotés à partir de 0.
Un lien ne peut être atteint que par document.links[N].
Cependant les nouveaux navigateurs permettent de récupérer un lien précis en ciblant son attribut ID :
Exemple de code :
var monlien = document.getElementById("id")

Attention, si vous voulez accéder à un lien de votre page HTML, il faut que votre navigateur ai lu le code HTML de ce lien.
Deux possiblilités :
- vous mettez votre script Javascrit après la déclaration HTML du lien.
- vous faites appelle à l'attribut onload de la balise body.
Exemple qui ne marche pas :
Exemple de code :
<script>
  alert(document.links["identifiant"].href)
</script>
<a href="http://aliasdmc.fr/links.html#a">Lien</a>

Exemple qui marche :
Exemple de code :
<a href="http://aliasdmc.fr/links.html#a">Lien</a>
<script>
  alert(document.links[0].href)
</script>

Exercice

Exemple du positionnement du script Javascript :

Nous allons créer tout d'abord un lien :
Exemple de code :
<a href="document.html">lien</a>

Premier test :
Mettez ce script avant la balise A
Exemple de code :
alert(document.links.length);

Second test :
Mettez ce script après la balise A
Exemple de code :
alert(document.links.length);
Observez les résultats.

Faites attention pour les exercices, n'oublier pas de mettre le script Javascript juste avant la balise HTML </BODY>.

links.length

info

La propriété javascript links.length de l'objet document.links renvoie un tableau contenant tous les objets links de la page (lien normal et ancre).
Pour parcourir l'ensemble des liens :
Exemple de code :
for(var i = 0; i < document.links.length; i++){
  alert(document.links[i].href)
}


Les nouveaux navigateurs permettent de récupérer l'ensemble des liens :
Exemple de code :
var meslien = document.getElementsByTagName("a");
for(var i = 0; i < meslien.length; i++){
  alert(meslien[i].href)
}

links.href

Info

La propriété javascript href de l'objet document.links permet de connaître la valeur de l'attribut HTML ou XHTML HREF.
Exemple de code :
<a href="http://aliasdmc.fr/links.html#a">Lien</a>

La propriété javascript href de l'objet document.links renvoie comme valeur :
- valeur de type String.
Exemple de code :
alert(document.links["identifiant"].href);
//http://aliasdmc.fr/links.html#a

La propriété javascript href de l'objet document.links accepte comme valeur :
- valeur de type String correspondant à une url relative ou absolue.
Exemple de code :
document.links["identifiant"].href="page.html";

Exemple

Nous allons créer tout d'abord un lien :
Exemple de code :
<a href="document.html">lien</a>

Nous allons ensuite créer un script Javascript qui nous renvoie l'URL du lien.
Exemple de code :
alert( document.links[0].href);
L'alerte nous renvoie donc "document.html"
Maintenant placez avant alert( document.links[0].href);
Exemple de code :
document.links[0].href = "monDocument.html";
Voila, vous avez changé dynamiquement votre lien.

Vous pouvez aussi mettre un lien e mail :
Exemple de code :
document.links[0].href="mailto:mail@hebergeur.com";

links.pathname

Info

La propriété javascript pathname de l'objet document.links permet de connaître la valeur de l'attribut HTML ou XHTML HREF après le premier slashe .
Exemple de code :
<a href="http://aliasdmc.fr/links.html">Lien</a>

La propriété javascript pathname de l'objet document.links renvoie comme valeur :
- valeur de type String.
Exemple de code :
alert(document.links["identifiant"].pathname);
// /links.html

La propriété javascript pathname de l'objet document.links accepte comme valeur :
- valeur de type String correspondant à une url relative ou absolue (ne fonctionne pas sous opéra).
Exemple de code :
document.links["identifiant"].pathname="/page.html";

links.target

Info

La propriété javascript target de l'objet document.links permet de connaître la valeur de l'attribut HTML ou XHTML target.
Exemple de code :
<a href="links.html" target="_self">Lien</a>

La propriété javascript target de l'objet document.links renvoie comme valeur :
- chaîne de caratères, vide si pas d'attribut target.
Exemple de code :
alert(document.links["identifiant"].target);
//_self

La propriété javascript target de l'objet document.links accepte comme valeur :
- chaîne de caratères.
Exemple de code :
document.links["identifiant"].target ="_blank";

Exemple

Nous allons créer tout d'abord un lien :
Exemple de code :
<a href="document.html" target="_blank">lien</a>

Nous allons ensuite créer un script Javascript qui nous renvoie la target du lien.
Exemple de code :
alert( document.links[0].target);
L'alerte nous renvoie donc "_blank"

Maintenant placez avant alert( document.links[0].target);
Exemple de code :
document.links[0].target="_self";

Voila, vous avez changé dynamiquement votre target.

links.protocol

Info

La propriété javascript protocol de l'objet document.links permet de connaître ou de modifier le protocol utilisé par le lien (ftp, http,...)
Exemple de code :
<a href="http://aliasdmc.fr/document.html">lien</a>

La propriété javascript protocol de l'objet document.links renvoie comme valeur :
- valeur de type String qui correspond un protocol.
Exemple de code :
alert(document.links["identifiant"].protocol);
//http

La propriété javascript protocol de l'objet document.links accepte comme valeur :
- valeur de type String qui correspond un protocol.
Exemple de code :
document.links["identifiant"].protocol = "https";

links.alt

Info

La propriété javascript alt de l'objet document.links permet de connaître ou de modifier la valeur contenu de l'attribut HTML ou XHTML "alt".
Exemple de code :
<a href="document.html" alt="aliasdmc">lien</a>

La propriété javascript alt de l'objet document.links renvoie comme valeur :
- valeur de type String.
Exemple de code :
alert(document.links["identifiant"].alt);
//aliasdmc

La propriété javascript alt de l'objet document.links accepte comme valeur :
- valeur de type String qui correspond à la nouvelle valeur.
Exemple de code :
document.links["identifiant"].alt = "alias\"dmc";

links.title

Info

La propriété javascript title de l'objet document.links permet de connaître ou de modifier la valeur de l'attribut HTML ou XHTML "title".
Exemple de code :
<a href="document.html" title="aliasdmc">lien</a>

La propriété javascript title de l'objet document.links renvoie comme valeur :
- valeur de type String.
Exemple de code :
alert(document.links["identifiant"].title);
//aliasdmc

La propriété javascript title de l'objet document.links accepte comme valeur :
- valeur de type String qui correspond à la nouvelle valeur.
Exemple de code :
document.links["identifiant"].title = "alias\"dmc";

links.hash

Info

La propriété javascript hash de l'objet document.links permet de connaître ou de modifierl'url du lien interne à la page (#nom) ou ancre.
Exemple de code :
<a href="document.html#aliasdmc>lien</a>

La propriété javascript hash de l'objet document.links renvoie comme valeur :
- valeur de type String.
Exemple de code :
alert(document.links["identifiant"].hash);
//#aliasdmc

La propriété javascript hash de l'objet document.links accepte comme valeur :
- valeur de type String précédé d'un "#".
Exemple de code :
document.links["identifiant"].hash= "aliasdmc";

Enlever le # :
Exemple de code :
var dmc = document.links[0].hash;
var exp_reg = /#/gi;
dmc = dmc.replace(exp_reg, "")

links.search

Info

La propriété javascript search de l'objet document.links permet de connaître ou de modifier les parametres passés dans l'url d'un lien (?parametre=aliasdmc&parametre1=aliasdmc).
Exemple de code :
<a href="document.php?parametre=aliasdmc">lien</a>

La propriété javascript search de l'objet document.links renvoie comme valeur :
- valeur de type String.
Exemple de code :
alert(document.links["identifiant"].search);
//?parametre=aliasdmc

La propriété javascript search de l'objet document.links accepte comme valeur :
- valeur de type String précédé d'un "?".
Exemple de code :
document.links["identifiant"].search= "?parametre=aliasdmc";

escape()

Info

Une url doit être au format ASCII (hexadécimal). transformer une chaîne de caractères en ASCII, vous devez utiliser la fonction javascript escape().

Exemple :
Exemple de code :
document.links[n].href=escape("le lien 5");
ce qui vous donne : le%20lien%205

Cependant, les méthode escape et unescape ne fonctionnent pas correctement pour les caractères non-ASCII et sont donc déconseillées

unescape()

Info

La méthode javascript unescape() vous permettra de faire l'inverse.

Exemple :
Exemple de code :
unescape("le%20lien%205");
Ce qui vous donne : le lien

encodeURI

Info

La méthode encodeURI remplace la méthode escape dans le javascript 1.5 compatible avec Internet Explorer 5.5, Netscape6+, FireFox

Exemple :
Exemple de code :
alert(encodeURI("le lien 5/;?#"));
ce qui vous donne : le%20lien%205/;?#

Attention encodeURI n'encode pas les caratères suivant " : ", " / ", " ; " et " ? ". Utilisez à la méthode encodeURIComponent

decodeURI

Info

La méthode javascript decodeURI() vous permettra de faire l'inverse.

Exemple :
Exemple de code :
decodeURI("le%20lien%205/;?#");
Ce qui vous donne : le lien 5/;?#

encodeURIComponent

Info

La méthode encodeURIComponent remplace toutes les caractères. Elle compatible avec Internet Explorer 5.5, Netscape6+, FireFox.

Exemple :
Exemple de code :
alert(encodeURIComponent("le lien 5;?#"));
ce qui vous donne : le%20lien%205%3B%3F%23

decodeURIComponent

Info

La méthode javascript decodeURIComponent() vous permettra de faire l'inverse.

Exemple :
Exemple de code :
decodeURIComponent("le%20lien%205%3B%3F%23");
Ce qui vous donne : le lien 5;?#

Les événements

Infos

Voici les événements possibles :

onMouseOver la sourie survole le lien.
onMouseOut la sourie quitte le lien.
onClick on clique sur le lien.
onDbleClick on double clique sur le lien.
onMouseUp le bouton gauche est relâché.
onMouseDown le bouton gauche est appuyé.
onFocus le lien prend le focus.
onBlur le lien perd le focus.
Chapitre l'objet image
Chapitre les formulaires