JavaScript Formation

2

Expressions communes

Certaines tâches JavaScript récurrentes doivent être réalisées quasiment chaque jour. Elles sont à la base de nombreuses applications JavaScript mais n'entrent dans aucune catégorie particulière. Nous présentons donc au cours de ce chapitre une suite de problèmes fréquents, avec leurs solutions.

CHAPITRE 2   Expressions communes

Détection du type de navigateur

Même si les implémentations de navigateurs par JavaScript sont, de nos jours, assez compatibles les unes avec les autres (en particulier si on se souvient de l'époque de la guerre des navigateurs, à la fin des années 1990), la détection du type de navigateur constitue une partie essentielle de la boîte à outils du développeur JavaScript.

L'objet JavaScript navigator propose des informations sur le navigateur. Sa propriété userAgent, qui contient la chaîne d'identification complète du navigateur, est très utile mais parfois difficile à analyser. Elle est aussi envoyée dans l'en-tête User-Agent HTTP de chaque requête.

Pour déterminer simplement le type d'un navigateur, il suffit d'employer la propriété appName, comme le montre le code précédent. Le Tableau 2.1 contient les valeurs appName des navigateurs les plus importants.

Tableau 2.1 : Valeurs appNamepour divers navigateurs

Navigateur	appName
Internet Explorer	Microsoft Internet Explorer
Navigateurs Mozilla	Netscape
Konqueror (KDE)	Konqueror
Apple Safari	Netscape
Navigateur Opera	Opera

Détection du type de navigateur

Vous le voyez, le navigateur Safari renvoie un nom incorrect. Pour contrebalancer cet effet, vous pouvez rechercher navigator.userAgent pour certains types de navigateurs. Et puisque le navigateur Opera risque d'être mal identifié

(bien qu'il stocke "Opera" dans navigator.userAgent), il convient de le vérifier en premier.

<script language="JavaScript"   type="text/JavaScript"> var uA = navigator.userAgent; var browserType = "unknown"; if (uA.indexOf("Opera") > -1) {   browserType = "Opera";

} else if (uA.indexOf("Safari") > -1) {   browserType = "Safari";

} else if (uA.indexOf("Konqueror") > -1) {   browserType = "Konqueror"; } else if (uA.indexOf("Gecko") > -1) { browserType = "Mozilla";

} else if (uA.indexOf("MSIE") > -1) {   browserType = "Internet Explorer";

} window.alert(browserType);

</script>

Détermination du type de navigateur ()

Avec quelques efforts de plus, ce script peut être prolongé pour distinguer les dérivés de Mozilla (Firefox, Epiphany, Galeon, Camino, SeaMonkey, etc.).

CHAPITRE 2   Expressions communes

Détection du numéro de version du navigateur

Pour déterminer le numéro de version du navigateur, il existe plusieurs manières. La plupart du temps, vous devez rechercher navigator.userAgent, ce qui peut ressembler à ceci :

Mozilla/5.0 (Windows; U; Windows NT 5.1; en;      rv:1.8.0.3) Gecko/20060426 Firefox 1.5.0.3 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;      rv:1.4) Gecko/20030619 Netscape/7.1 (ax) Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1;

     SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322;

     .NET CLR 2.0.50727)

Mozilla/5.0 (compatible; Konqueror/3.4; FreeBSD)

     KHTML/3.4.2 (like Gecko)

Mozilla/5.0 (Macintosh; U; Intel Mac OS X; en)

     AppleWebKit/418 (KHTML, like Gecko)

     Safari/417.9.3

Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en)

     AppleWebKit/312.8 (KHTML, like Gecko)

     Safari/312.6

Opera/9.00 (Windows NT 5.1; U; en)

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1 en)      Opera 9.00

Vous le voyez, selon le type du navigateur, le numéro de version est enfoui ailleurs dans la valeur de navigator.userAgent. Vous aurez alors la tâche fastidieuse de traiter tous les navigateurs et de vous tenir au courant des nouvelles méthodes. Il existe toutefois quelques ressources Web pour implémenter une détection des navigateurs et qui sont assez bien faites. Vous trouverez de la documentation et des codes sur ces sites Web :

•    ;

•    .

Vérification des capacités du navigateur

Vérification des capacités du navigateur

Vous le voyez dans l'exemple précédent, se fier aux numéros de version des navigateurs n'est pas seulement difficile, c'est également gager les possibilités d'évolution. Il vaut mieux vérifier spécifiquement la prise en charge des objets spéciaux.

Par exemple, pour utiliser DOM (voir Chapitre 5, "DOM et DHTML"), vous pourrez tenter d'utiliser le code précédent. Si la méthode getElementById() est implémentée, document.getElementById (sans parenthèses) renvoie une référence à la fonction. Si elle est utilisée dans une condition, elle renvoie true. Le code associé est alors exécuté.

Autre exemple : Internet Explorer accepte les objets ActiveX pour certaines applications, par exemple la prise en charge du XML. Toutefois, seules les versions Windows de IE connaissent ActiveX. La vérification systématique pour Internet Explorer génère donc des problèmes pour les utilisateurs de Mac. Dès lors, si vous vérifiez spécifiquement la prise en charge d'ActiveX, vous éviterez ces problèmes :

if (window.ActiveXObject) {   //

}

CHAPITRE 2   Expressions communes

Empêcher la mise en cache

document.write("<img src=\"?" +   Math.random() + "\" />");

Grâce aux en-têtes côté serveur, il est possible d'éviter la mise en cache d'images de type "contenu dynamique" ainsi que de pages HTML. Mais, la méthode n'est pas infaillible, puisque certains navigateurs ou serveurs proxy peuvent ignorer ces paramètres. Pour y remédier, ajoutez un paramètre de chaîne de requête insignifiant à l'URL, comme dans l'extrait suivant : Math.random() renvoie un nombre aléatoire compris entre 0 et 1, par exemple 0,1296601696732852. L'annexer à une image ne modifie généralement pas les données envoyées du serveur, mais la requête est totalement nouvelle pour le navigateur. L'image (ou les autres données) n'est donc pas mise en cache.

Redirection du navigateur

La propriété permet un accès en lecture et en écriture à l'URL de la page en cours. Conséquence, régler sur une autre valeur redirige le navigateur, qui charge alors la nouvelle page, comme le montre le code précédent.

La page précédente arrive ensuite dans l'historique du navigateur. Si vous souhaitez remplacer l'ancienne page dans l'historique (pour que le bouton Précédent ne fonctionne pas comme l'on s'y attendrait ici), utilisez la méthode location.replace() : location.replace("");

Rechargement de la page

Astuce

Cela peut également être réalisé avec du HTML :

<meta http-equiv="Refresh" content="X; URL=Y" />

L'emplacement X désigne le nombre de secondes à patienter avant que la nouvelle page ne soit chargée ; Y indique la nouvelle URL.

Rechargement de la page

La méthode reload() de l'objet location recharge la page en cours, l'équivalent de = . Si vous apportez le paramètre true, la mise en cache est désactivée et le navigateur procède à un rechargement "dur" à partir du serveur. Toutefois, ce n'est pas non plus infaillible puisqu'il peut exister un serveur proxy, placé entre deux, qui peut disposer d'une copie en cache de la page demandée. Vous pourriez donc utiliser la technique décrite dans ce chapitre et qui consiste à empêcher la mise en cache :

location.search = "?" + Math.random();

L'expression modifie la chaîne de requête (location.search) de la page en cours, en rechargeant efficacement le reload() de l'URL.

CHAPITRE 2   Expressions communes

Création d'un nombre aléatoire

La méthode random() de l'objet Math calcule un nombre pseudo-aléatoire entre 0 et 1 (non compris). On préfère généralement un nombre aléatoire compris entre 1 et 10 par exemple. Avec un petit calcul mathématique, l'opération est possible. Pour l'exemple, multipliez le résultat de Math.random() par 10, ce qui génère bien un nombre entre 0 et 10 (exclus). Si vous arrondissez ensuite cette valeur, vous obtenez un nombre entier compris entre 0 et 9 (inclus). Ajoutez 1 et vous obtenez un nombre compris entre 1 et 10.

Le code qui précède généralise cette option et crée un nombre compris entre min et max.

Informations de date et d'heure

var d = new Date(); var mdy = (d.getMonth()+1) + "/" + d.getDate() +

L'objet Date de JavaScript permet d'accéder à la date du jour et peut aussi effectuer certains calculs de date (en utilisant la valeur "epoch", c'est-à-dire le nombre de millisecondes depuis le 1^er janvier 1970). Le Tableau 2.2 contient les méthodes les plus importantes de la classe Date. Le code qui précède crée une date au format mois/jour/année.

Informations de date et d'heure

Tableau 2.2 : quelques propriétés de Date

Méthode	Description
getDate()	Jour du mois
getFullYear()	Année à quatre chiffres
getHours()	Heures
getMinutes()	Minutes
getMonth()	Mois moins 1 (!)
getSeconds()	Secondes
getTime()	Valeur "epoch" (date de début de mesure du temps sur un système d'exploitation)
toString()	Représentation en chaîne
toUTCString()	Représentation en chaîne UTC

Recherche avec des expressions régulières

La définition d'une expression régulière dans JavaScript peut s'effectuer de deux manières :

b var zip = new RegEx("\\d{5}"); b var zip = /\d{5}/;

Il n'y a pas de différence fonctionnelle entre les deux ; vous devez simplement prendre en compte l'échappement du caractère. La méthode test() de l'expression vérifie ensuite si une chaîne contient l'expression régulière :

var found = ("Indianapolis, IN 46240"); //vrai

Pour obtenir la correspondance réelle, utilisez la fonction exec(). La méthode renvoie un tableau. Son premier élément est la correspondance entière et les éléments suivants sont toutes les sous-correspondances (si on utilise des parenthèses dans l'expression régulière).

var matches = ("Indianapolis, IN 46240"); // ["46240"]

Astuce

La méthode match()renvoie toutes les correspondances ; exec()ne renvoie que l'expression courante, généralement la première. Toutefois, si vous appelez exec()plusieurs fois, toutes les correspondances sont renvoyées.

Remplacement du texte

Remplacement du texte

var address = /(\w+), ([A-Z]{2}) (\d{5})/; var sams = "Indianapolis, IN 46240"; var result = sams.replace(address, "$3 $1, $2");

La méthode replace(), que prend en charge chaque chaîne JavaScript, peut remplacer du texte. Elle recherche une expression régulière et remplace la chaîne trouvée par une autre chaîne. Dans cette chaîne de remplacement, il est possible de procéder à une référence de retour sur les souscorrespondances. $0 pointe vers la première correspondance, $1 référence la première sous-correspondance (sans parenthèses), $2 la deuxième sous-correspondance, etc. Le code qui précède recherche la ville, l'Etat des Etats-Unis et le code postal, puis les réagence. Le résultat est "46240 Indianapolis, IN".

Navigation dans l'historique d'un navigateur

L'historique du navigateur est représenté par l'objet history (une propriété de l'objet window) et contient une liste de pages Web visitées préalablement (et, si possible après) la page en cours. Et même s'il est techniquement possible de déplacer quelques éléments d'historique, les contraintes de sécurité ne laissent qu'une manière pratique de procéder : reculer d'une page et avancer d'une page. Les deux méthodes suivantes l'implémentent :

b back() passe à la page précédente de l'historique (comme le fait le bouton Précédent).

b forward() passe à la page suivante de l'historique (comme le fait le bouton Suivant).

Affichage de la date de modification de la page

Dès qu'un serveur Web envoie une ressource au client, il envoie également la date à laquelle le document a été modifié pour la dernière fois. Généralement, le serveur Web extrait ces informations du système de fichiers, mais cet en-tête peut aussi être modifié ou tout simplement ne pas être envoyé. De toutes les façons, vous pouvez utiliser ces informations, par exemple comme c'est indiqué dans le code précédent. Vous pouvez donc disposer d'une date de modification plus ou moins réaliste sur votre page.

Récupération des paramètres GET

var ls = location.search.substring(1); var namevalue = ls.split("&");

Habituellement, les informations GET sont évaluées côté serveur mais JavaScript a également accès à ces informations via sa propriété location.search. Toutefois, les données qui s'y trouvent résident dans des paires nom-valeur.

Récupération des paramètres GET

Le code suivant décode ces données en utilisant la méthode split() de JavaScript. Le tableau associatif qui en résulte est ensuite présenté, simplement pour montrer qu'il fonctionne comme on s'y attend ; reportez-vous à la Figure 2.1 pour connaître le résultat.

Analyse de la chaîne de requête ()

Figure 2.1 : Les données de la chaîne de requête sont analysées et affichées.

Demande de confirmation à l'utilisateur

<a href="/"

  onclick="return window.confirm('Do you really want to             do this?');">Click here</a>

JavaScript propose une prise en charge limitée des fenêtres modales. La méthode window.alert() est assez commune mais il existe d'autres options. Avec window.confirm(), l'utilisateur se voit présenter une fenêtre de type Oui/Non. S'il clique sur Oui, window.confirm() renvoie true, et false dans le cas contraire. Le code qui précède (fichier ) l'utilise comme valeur de retour pour un lien. Ainsi, si l'utilisateur clique sur Non, le navigateur ne suit pas le lien.

Attention

Sachez que cette boîte de dialogue est traduite par les navigateurs, vous devez donc éviter d'inscrire un texte du style "Cliquez sur Oui pour " car les personnes disposant d'un système étranger risquent de ne pas voir s'afficher de bouton Oui.

Demande de données utilisateur

var name = window.prompt("Enter your name!", "<Your name>");

La méthode window.prompt() permet aux utilisateurs de saisir du texte dans un champ de texte d'une seule ligne (voir Figure 2.2). Ces informations correspondent à la valeur de retour de l'appel de méthode et peuvent ensuite être utilisées dans le script.

Demande de données utilisateur

Demande de données utilisateur ()

Figure 2.2 : La boîte de saisie générée par window.prompt().

Info

Sachez que si l'utilisateur clique sur le bouton Annuler ou appuie sur la touche d'échappement, window.prompt()renvoie null. Le code qui précède vérifie que, si l'utilisateur clique sur le bouton OK, les données saisies sont affichées.