Leçon I:
IDENTIFIER LE CLIENT

La Théorie

Le comportement d'une application web dynamique varie avec le navigateur qui l'utilise.

En effet, selon qu'on utilise Netscape ou Internet Explorer, l'affichage des éléments est différent; et pour ce qui est du code à utiliser, la terminologie des objets et des fonctions applicables est souvent incompatible: En bref, ce qui marche sous MSIE ne marche pas forcément sous Netscape.(et inversement)

D'autres paramètres comme la plate-forme utilisée ou la taille de l'écran peuvent jouer un rôle dans la présentation d'une page. Si, pour une fenêtre occupant tout un écran de 1024x768, une image de 400x400 peut représenter une illustration, pour une fenêtre couvrant partiellement un écran en 800x600, elle peut presque être considérée comme l'image de fond d'écran! De même, un retour à la ligne sous UNIX se fera par "\n", alors que sous windows il se fera par "\r\n".

Donc, cette leçon va vous permettre d'identifier le client; c'est à dire que la page appelée par le client va inspecter la configuration sur laquelle elle se trouve, déterminer le nom et la version du navigateur, et vous donner la taille de la fenêtre qui lui est réservée.

L'objet navigator

NAVIGATOR est un objet interrogeable commun à tous les navigateurs. Il contient les informations d'identification du navigateur utilisé.

  Il possède 4 propriétés qui sont: appCodeName, appName, appVersion et userAgent.

• appCodeName : Contient une chaîne de caractères représentant le nom de code du navigateur. Par exemple, pour un client Netscape Navigator 2.0, ce sera "Mozilla" .Mozilla est la valeur que retournent Netscape et MSIE.
  
• appName : Contient le nom du navigateur sous la forme d'une chaîne de caractères. Par exemple, pour un client Netscape Navigator 2.0, ce sera "Netscape" .
  
• appVersion : Contient un ensemble d'informations. Ces informations sont présentées dans une chaîne de caractères au format suivant: <Numero complet de version>(<Plate-forme utilisée>,<Code du pays>. Par exemple, pour un client windows 95 version internationale avec Netscape Navigator 2.0, ce sera "2.0 (Win95, I)"
  
• userAgent : Contient une chaîne de caractères représentant l'entête UserAgent envoyé du client vers le serveur au travers du protocole http. Par exemple, pour un client windows 95 version internationale avec Netscape Navigator 2.0, ce sera "Mozilla/2.0 (Win16; I)".

Syntaxe d'utilisation:

Pour utiliser l'objet navigator: navigator.<nom de la propriété>

Exemple: navigator.appName

Pour informations:

1. L'objet navigator ne possède aucune méthode.
2. Il n'a pas de capteur d'événements.
3. Ses propriétés sont en "Lecture seule".

La Pratique

Tout d'abord, voici quatre boutons qui vont, quand vous les presserez, vous donner les valeurs des propriétés correspondantes de votre navigateur.

• 
  
• 
  
• 
  
• 
  

Si vous désirez voir le code de ces boutons, cliquez ici

A. Créer le script d'identification

D'abord, nous allons créer une fonction générique qui pourra être appelée par n'importe quelle page html et qui nous permettra de savoir quel est le navigateur utilisé et sur quelle plate-forme il s'exécute.

Appelons cette fonction "LeClient()" par exemple.

function LeClient() {
  var agentEnMinuscules = navigator.userAgent.toLowerCase();
  this.version = parseInt(navigator.appVersion);

  this.netscape = (navigator.appName == 'Netscape');
  this.ns2 = (this.netscape && (this.version == 2));
  this.ns3 = (this.netscape && (this.version == 3));
  this.ns4 = (this.netscape && (this.version >= 4));

  this.msie = (agentEnMinuscules.indexOf("msie") != -1);
  this.ie3 = (this.msie && (this.version == 2));
  this.ie4 = (this.msie && (this.version == 4) && (agentEnMinuscules.indexOf("5.") == -1));
  this.ie5 = (this.msie && (this.version == 4) && (agentEnMinuscules.indexOf("5.") != -1));
  
  this.win = (agentEnMinuscules.indexOf("win")!=-1);
  this.unix = (agentEnMinuscules.indexOf("x11")!=-1);
  this.mac = (agentEnMinuscules.indexOf("mac")!=-1);
  this.amiga = (agentEnMinuscules.indexOf("amiga") != -1);
  this.trucmuch = (agentEnMinuscules.indexOf("trucmuch") != -1);

}

var leClient = new LeClient();

Si vous désirez des explications sur ce code, cliquez ici

La fonction LeClient() est un exemple de ce que vous pouvez faire pour identifier le client de l'application; si vous désirez étendre l'identification à d'autres systèmes d'exploitation ou à d'autres navigateurs il suffit de les rajouter dans son code. (Dans l'exemple, amiga et trucmuch n'ont été déclarés que pour illustrer l'extension à d'autres systèmes.)

L'usage courant

Toutefois, l'usage le plus courant consiste à différencier MSIE de Netscape, à partir de leur version 4.
La version 4 de ces navigateurs peut être considérée comme étant la première qui accepte le DHTML via les CSS.
Pour ces versions, comme Netscape est seul à reconnaître les objets "layers" et MSIE, les objets "all",les deux lignes de code suivantes permettent de faire cette différenciation:

netscape = (document.layers)? true:false;
MSIE = (document.all)?true:false;

Ces deux lignes pourront faire partie de la fonction LeClient(), ou introduite directement dans votre page HTML comme dans l'exemple ci-dessous

<SCRIPT LANGUAGE="JavaScript">

Netscape = (document.layers)? true:false;
MSIE = (document.all)?true:false;

if(Netscape)
{
alert("vous utilisez Netscape 4 ou supérieure!");
}
if(MSIE)
{
alert("vous utilisez MSIE 4 ou supérieure!");
}
</script>