Découvrir
les "bookmarklets" Javascript
Un zeste de javascript, une pincée de bookmark... Mélangez le tout à l'aide d'un navigateur pour obtenir des bookmarklets. Ces programmes Javascript de quelques lignes seulement améliorent le confort de l'internaute.
Moitié signet, moitié application, les "bookmarklets"
sont en fait des instructions Javascript stockées sous la
forme d'un bookmark.
Ces quelques lignes de code (il est recommandé de ne pas
dépasser 500 caractères) permettent à l'internaute
d'accéder à une multitude de "services"
qui enrichissent son navigateur.
Si certains bookmarklets ne s'utilisent qu'à l'aide d'une
connexion Internet (interrogations de moteur de recherche par exemple),
d'autres sont moins contraignants, tels que celui-ci qui permet
de cacher
/ réafficher
sous IE toutes les images de la page courante.
La syntaxe de base
Les bookmarklets sont un ensemble d'instructions Javascript. Pour
se convaincre du possible enchaînement de celles-ci au sein
d'un lien par exemple, on peut tester :
<A HREF="javascript:alert('Message
1');alert('Message 2')">Deux messages</a>
On obtient
deux messages "alert" qui se suivent.
Il serait faux de croire qu'à partir du moment où
la syntaxe "javascript:" est respectée, le reste
du code n'est plus qu'une formalité. En effet, il faut s'assurer
que le code Javascript ne renvoie rien au navigateur. Ici,
nous avons un problème :
<A HREF="javascript:age=26">L'âge
du capitaine</a>
Ce code Javascript renvoie la valeur 26, le navigateur affiche
ce résultat dans le corps de la page. Celle-ci porte
comme titre l'instruction Javascript...
Afin d'éviter cela, nous allons utiliser l'opérateur
"void()" afin d'obtenir un retour "undefined"
de la part de l'expression en question :
<A HREF="javascript:void(age=26)">L'âge
du capitaine</a>
Ainsi le navigateur ne réagit pas et n'interrompt pas le
bookmarklet. Si vous n'êtes pas sûr qu'une expression
retourne une valeur, appliquez-lui l'opérateur "void()".
Le stockage des bookmarklets
Nous souhaitons maintenant stocker la bookmarklet suivante (rassemble
toutes les images de la page au centre du navigateur) :
Les bookmarklets s'écrivent normalement d'une seule
ligne; afin de rendre son code plus clair, nous l'avons "éclaté"
:
javascript:i='';
for (j=0;j<document.images.length;j++)
{
i+='<img src='+document.images[j].src+'><br>'
};
if(i!='')
{
document.write('<center>'+i+'</center>');void(document.close())
}
else
{
alert('Aucune image !')
}
Quelques mots sur l'algorithme utilisé ici :
"i" est une chaîne de caractères initialisée
à "vide": tant qu'il y a des images sur la page
on ajoute la chaîne "<img src='NOM_IMAGE'><br>"
dans "i". S'il existe au moins une image, on affiche au
centre de la page le contenu de la variable "i", c'est
à dire chaque nom d'image suivi d'un saut de ligne.
Vous pouvez maintenant
tester ce bookmarklet.
Vous souhaitez le conserver ? Deux principales solutions s'offrent
à vous :
- La manière la plus simple de procéder est de faire
glisser le lien du bookmarklet vers votre barre de liens
(IE) / signets (Netscape) de votre navigateur.
- Placez votre curseur sur le lien ci-dessus, cliquez sur le bouton
de droite, puis sélectionnez "Ajouter aux favoris".
Selon le navigateur utilisé, un message peut apparaître
:
"Vous ajoutez un lien qui n'est pas sûr, voulez vous
continuer ?", répondez par l'affirmative, rien à
craindre dans le cadre de notre exemple.
Exemples et limitations
Une des limitations principales des bookmarklets réside
dans leur couplage difficile avec les frames. Le script est
alors exécuté dans la fenêtre "parent",
ce qui peut poser un problème pour un bookmarklet conçu
par exemple pour compter les liens d'une page.
Sur le site mentionné ci-dessous, il est indiqué si
les bookmarklets présentés fonctionnent avec les frames
ou pas.
Enfin, si les bookmarklets sont relativement faciles à écrire
et destinés à être exécutés sur
plusieurs plates-formes, seuls les plus simples d'entre eux ne nécessitent
pas une réécriture selon le navigateur.
Afin de vous montrer l'étendue des possibilités
des bookmarklets, voici quelques exemples à tester sur cette
page. Ces exemples sont tirés de Bookmarklets.com,
le site de l'inventeur des bookmarklets, Steve
Kangas.
Attention, les liens suivants comprennent des modifications spécifiques
pour le site JDNet Développeurs, si un de ces bookmarklets
vous plaît, retrouvez-le sur le site cité ci-dessus
et faites-le simplement glisser dans vos bookmarks.
- Liste des emails
présents sur cette page.
- Nombre
de liens sur la page.
- Modifie la couleur de fond de la page (IE
/ Netscape)
(Syntaxe couleur : black, red...)
- Modifie la couleur
du texte (IE)
Beaucoup d'autres bookmarklets existent sur le site de Steve Kangas,
vous y trouverez notamment des modules de recherche reliés
aux principaux
moteurs de recherche.
[Arnaud
Gadal 30
octobre 2001 , JDNet]
|