Chapitre 37 : Eléments avancés de JavaScript

37.1 - Les URL JavaScript
37.2 - Les MAP et ISMAP en JavaScript
37.3 - Les cookies en JavaScript
37.4 - Teinte des propriétés
37.5 - Les types MIME
37.6 - Les Plug-Ins installés sur le navigateur

37.1 - Les URL JavaScript

Il est possible d'ajouter l'extension javascript: comme un nom de service au sens des URL.

Ainsi <A HREF="javascript:history.go(0)">cliquer pour raffraichir</A>

aura la même action que <A HREF="javascri4.htm">cliquer pour raffraichir</A> sans pour autant forcer à spécifier le nom de la page.   Ceci peut être étendu à une syntaxe du type <A HREF="javascript:history.go(-1)">cliquer pour aller à la page précédente</A>

Il est donc possible d'appeler une fonction JavaScript par un URL de la façon suivante : 

<A HREF="javascript:fonction()">appel fonction</A>

37.2 - Les MAP et ISMAP en JavaScript

La balise MAP décrite au chapitre  HTML 3.2 permet de déterminer les régions sensibles d'une image. Il est possible de positionner l'URL javascript dans cette balise comme le montre l'exemple suivant. 

<MAP NAME="essai">

<AREA SHAPE="RECT" COORDS="0,0,100,100" 

          HREF ="javascript:top.close(); window.location=page.html">

<AREA SHAPE="RECT" COORDS="101,101,200,200" 

          HREF="essai.html" target="javascript:alert(`chargement') ;

        top.location=essai.html">

</MAP>

De même l'attribut ISMAP peut être accompagné d'un script avec appel de la méthode search : 

<A HREF=javascript:history.go(0)><IMG SRC=france.gif BORDER=0 ISMAP></A>

<SCRIPT>

str = location.search

if (str == "") 

          document.write("<P>Pas de coordonnées mais si vous cliquez sur la carte ....")

else {

          positionseparateur = str.indexOf(",") 

          document.write("<P> x est " + str.substring(1, positionseparateur ))

          document.write("et y est " + str.substring(positionseparateur +1, str.length))

}

</SCRIPT>

37.3 - Les cookies en JavaScript

Les cookies sont explicités dans le chapitre sur les serveurs HTTP, les notions doivent être assimilées pour conprendre la suite de ce chapitre.   JavaScript permet de positionner une variable cookie, avec une date d'expiration, ou d'obtenir la valeur de cette variable. Ainsi pour positionner une variable il suffit d'utiliser la fontion setCookie comme le montre l'exemple suivant.

 function setCookie(nom, valeur, expiration) {

          document.cookie = nom + "=" + escape(valeur)

          + ((expiration == null) ? "" : ("; expires=" + expiration.toGMTString()))

}

de même la fonction suivante permet d'obtenir la variable en cookie

function getCookie(nom) {

          var recherche = nom+ "="

          if (document.cookie.length > 0) { 

                    offset = document.cookie.indexOf(recherche) 

                    if (offset != -1) { // si le cookie existe

                              offset += recherche.length 

                              // position du début

                              fin = document.cookie.indexOf(";",offset) 

                              // position de la fin 

                              if (fin == -1) 

                                        fin=document.cookie.length

                              return 

unescape(document.cookie.substring(offset, fin))

                    } 

          }

}

Escape et unescape sont indispensable pour coder et décoder les valeurs.

37.4 - Teinte des propriétés

Les teintes de données, ou données teintées permettent d'assurer une fonction de sécurité importante en JavaScript, cette fonctionnalité n'étant valable qu'avec Netscape 3.0. Lorsque une données est dite teintée, un script JavScript  ne peut pas l'envoyer sur une autre fenêtre, quel que soit d'ailleurs le serveur qui a envoyé la fenêtre en question.  Si une variable est teintée le script ne peut pas envoyer d'informations à l'extérieur de la fenêtre active.

Pour permettre de teinter des informations, une variable d'environnement est appelée NS_ENABLE_TAINT. Cette variable est globale est doit être positionnée sur le client par une variable d'environnement (sur UNIX setenv ou set; sur Windows set dans l'autoexec.bat, sur NT variable système, sur Macintosh, ressource Envi). La variable doit être mise à 1 ou ne pas exister.

On le voit le mécanisme est basé sur un acte volontaire de la part de l'utilisateur du navigateur. Et si le navigateur ne permet pas la gestion des données teintées, une fenêtre viendra avertir l'utilisateur de l'impossibilité du traitement. Ainsi le code suivant permet de tester l'état du navigateur : 

if (navigator.taintEnabled()) {

   fonction1()

}

else fonction2()

 Regardons les valeurs par défaut des différents objets manipulés par JavaScript.   

Il est ainsi possible d'interdire la communication des éléments teintés ou des éléments dérivés à travers le réseau. On appelle élément dérivés les retours de fonctions quand les paramètres des fonctions sont teintés, ou des sous-chaînes de chaîne de caractères teintées.

Pour teinter un élément dans un script il suffit d'utiliser la fonction taint et pour enlever la propriété d'utiliser untaint. 

Exemple : 

untaintedStatus=untaint(window.defaultStatus)

37.5 - Les types MIME

Un tableau contient tous les types MIME supportés par le client, aussi bien côté applications helpers que plug-ins. La syntaxe est la suivante : 

navigator.mimeTypes[extension].type|description|suffixes|enabledPlugin  

Le tableau suivant montre les cas possible pour le traitement de fichier GIF

Ainsi pour savoir si le navigateur peut exécuter  une séquence vidéo quicktime  in effectura le test suivant : 

var typemime = navigator.mimeTypes["video/quicktime"]

if (typemime)

   document.writeln("Cliquer <A HREF='fichier.qt'>ici</A> pour voir ")

else

   document.writeln("quicktime n'est pas supporté")

37.6 - Les Plug-Ins installés sur le navigateur

Comme nous le voyons dans le chapitre sur la technologie Netscape One, il est possible de contrôler les plug-ins installés sur le navigateur. Nous allons étudier ici comment tout cela peut être fait en JavaScript.   Le tableau plugins cointient tous les plug-ins installés sur le navigateur. La syntaxe est la suivante : 

navigator.plugins['mom du plug-in'].name|description|filename|length  

 Ainsi pour Live Audio le tableau suivant montre les syntaxes possibles 

La longueur explicite que le plug-in live audio a un tableau mime contenant 7 éléments

Ainsi pour tester l'existance d'un plug-in Shocwave la programmation suivante sera utilisée: 

var Plugin = navigator.plugins["Shockwave"]

if (Plugin)

   document.writeln("<EMBED SRC='sequence.dir' HEIGHT=250 WIDTH=120>")

else

   document.writeln("Shocwave n'est pas installé!")