Javascript - D�tection d'objet

La traduction est en cours, si vous trouvez une erreur sur une page ou si vous souhaitez sugg�rer une am�lioration, n'h�sitez pas � utiliser le forum.

D�tection d'objet

Op�ra 6 indique qu�il supporte createElement bien qu'il ne puisse pas r�ellement ajouter l'�l�ment cr�� au document. Op�ra 7 supporte createElement correctement. Il n'y a cependant aucune mani�re de filtrer un op�ra plus ancien, except� pour un d�tecteur de navigateur. Ainsi je ne fais rien.

Assez rapidement vous noterez que certaines fonctions de JavaScript ne fonctionnent pas dans certains navigateurs. Si vous voulez employer un bout de script assez �volu�, vous devez d'abord v�rifier si un navigateur supporte les objets que vous voulez employer. Cette page explique comment le faire.

Tout d�abord je vous donne quelques informations et r�gles g�n�rales, puis des indications sur les effets usuels qui ne sont pas support�s par tous les navigateurs, et les moyens de pouvoir les d�tecter.

D�tection de navigateur - non

Si vous voulez savoir si votre navigateur supporte certains objets que vous voulez utiliser dans votre code, �vitez � tous prix d�utiliser un d�tecteur de navigateur. Bien s�r vous savez que tel ou tel navigateur fera fonctionner votre code, alors que tel ou tel autre ne le pourra pas, mais qu�en est-il des navigateurs moins courants ?

Alors que la d�tection de navigateur fonctionne assez bien pour 90% de vos visiteurs, quelques navigateurs moins courant ne la traiteront pas correctement et des navigateurs qui apparaissent apr�s que vous ayez �crit la page, peuvent �galement ne pas la consid�rer. Les r�sultats seraient alors un jet de messages d'erreurs ou un script qui n�est pas appel� alors que le navigateur peut facilement l�ex�cuter. Dans les deux cas, vous trichez avec vos utilisateurs et vous codez incorrectement.

�tude de cas : mouseovers

Une vieille �tude de cas clarifiera des choses. De nos jours cet exemple particulier n'est plus vraiment un probl�me, mais les principes sont encore valides.

C'est un fait bien connu qu�Internet Explorer 3 ne supporte pas le tableau document.images qui est essentiel pour le script mouseover. Nous devons donc emp�cher le script d'�tre ex�cut�e dans Internet Explorer 3. Une solution serait de faire un d�tecteur de navigateur pour l'explorer 3 et de ne pas ex�cuter les fonctions si l'utilisateur visionne votre page avec celui-ci.

Cependant, sur la plupart des OS Netscape 2 ne supportera pas non plus document.images Si vous faites juste un d�tecteur de navigateur pour Internet Explorer 3, vous laissez les utilisateurs de Netscape 2 avec des messages d�erreurs.

Donc pourquoi ne pas ajouter Netscape 2 � votre d�tecteur de navigateur ? Parce que cela ne r�sout rien.

Netscape 2 sur OS/2 est presque totalement compatible avec Netscape 3 et il peut manipuler des effets de mouseover. N�anmoins d�une mani�re g�n�rale, les effets ne sont pas visibles parce que les d�veloppeurs web ont utilis� un d�tecteur de navigateur et ils ont d�cid�s que Netscape 2 ne pourrait probablement pas soutenir un mouseover. Ils ont donc brid�s leurs utilisateurs d�un peu d�interaction et sans bonne raison. Un d�tecteur d�objet appropri� aurait �vit� ces probl�mes.

Pour finir, de plus en plus de navigateurs donnent � l'utilisateur la possibilit� pour de modifier � sa guise son code d'identification de navigateur (voyez la page d�tecteur de navigateur. Par cons�quent il est tout � fait possible qu'un d�tecteur de navigateur n'identifie pas le navigateur et exclut donc des fonctionnalit�s qu'il aurait put pu supporter sans soucis. Ici, � nouveau, vous bridez vos utilisateurs d'un peu d'interaction suppl�mentaire. Pire encore, c'est un mauvais codage.

Versions de Javascript - non

En concevant le Javascript, Netscape se rendait enti�rement compte que les futurs navigateurs soutiendraient plus d'objets que les anciens, et que les d�veloppeurs web devraient pouvoir faire la distinction entre anciens et nouveaux navigateurs.

Le plan original �tait qu'ils v�rifieraient le num�ro de version de JavaScript. Tel-ou-tel objet �tait seulement fait pour �tre utilisable avec JavaScript 1.XX. Employez le num�ro de version de JavaScript dans votre balise <script> et les navigateurs qui ne supportent pas l'objet ne pourront pas ex�cuter le script.

Cependant, quand Microsoft est rentr� sur le march�, cette id�e a �t� abandonn�e. Bien que les premi�res versions de Netscape 4 et d'explorer 4 aient toutes les deux support�es le Javascript 1.2, m�me avec beaucoup d�imagination on ne peu pas penser qu�ils supportent le m�me JavaScript 1.2 . Avec ceci les num�ros de version sont devenus d�suets et non pertinents � la d�tection d'objet.

D�tection d'objet - oui

Au lieu de cela, nous allons simplement regarder si le navigateur supporte l'objet (m�thode, tableau ou propri�t�) que nous voulons employer. Regardons avec l�exemple du mouseover. Ce script se fonde sur le tableau document.images car nous avons grand besoin de savoir si le navigateur le supporte. Ceci est fait par

Maintenant vous avez une m�thode s�re de voir si les navigateurs peuvent manipuler le mouseovers. Le if (declaration) contr�le si le tableau document.images existe. Si (document.images) est true (vrai) alors le script est ex�cut�. Si le tableau images n'existe pas il devient false (faux) et le script n'est pas ex�cut�.

Une autre d�tection usuelle ce fait pour window.focus. C'est une m�thode (une commande par laquelle vous dites � Javascript de faire quelque chose pour vous). Si nous voulons employer la m�thode, nous devrons d�abord v�rifier si le navigateur la supporte.

Notez la mani�re correcte : vous demandez la m�thode, sans parenth�ses. Par ce code

veut dire : "si vous pouvez mettre le focus sur la fen�tre". Ainsi vous supposez que le focus est support�. S'il ne l�est pas, cette ligne de code cr�e des erreurs. Les parenth�ses () ex�cutent la commande focus, ce qui n'est pas qui ce que nous voulons dans ce cas-ci. Ainsi nous la v�rifions sans parenth�ses (pour voir si elle existe) et seulement quand le navigateur passe le contr�le nous ex�cutons r�ellement la commande en ajoutant des parenth�ses :

Bilan

Ainsi le bilan serait qu�en cas d�emploie de tableau document.images, le premier contr�le servira a savoir si il est support�. Si vous voulez utiliser la m�thode de focus de fen�tre, le premier contr�le sera �galement de savoir si elle est support�e.

Si vous employez toujours la d�tection d'objet, vos scripts ne produiront jamais aucun message d'erreur, bien qu'ils pourraient ne pas fonctionner dans certains navigateurs.

Non support�

Finalement quelques informations au sujet des anciens effets qui ont besoin de la d�tection d'objet.

document.images

Netscape 2 et Internet Explorer 3 sur Windows: aucun support

Internet Explorer 3 sur Mac: dit qu'il supporte document.images mais ne fait actuellement pas de permutation d�images. Cependant, il ne donne pas d�erreurs.

Netscape 3.01 (et Hotjava 3) le supporte mais il y a un autre probl�me : dans ces navigateurs, les images ne sont pas vraiment chang�es, mais sont plut�t plac�es l'une sur l'autre. Ce probl�me est r�solu dans Netscape 3.04 et les suivants. Le nouveau Hotjava 3 que j'ai t�l�charg� � la maison semble aussi avoir r�solu ce bug.

Opera 3.60, enfin, a des probl�mes avec le script cross-frame mouseover.

document.images est le tableau Javascript qui donne l'acc�s aux images dans une page. Si vous voulez ajouter un onMouseOver � vos pages vous employez document.images, ce qui signifie que les navigateurs qui ne peuvent pas le supporter ne font pas l'�change d'image et donnent pleins d'erreurs.

Heureusement vous pouvez �viter les erreurs en �crivant toujours les fonctions qui font quelque chose avec document.images comme ceci :

Ainsi le script est seulement ex�cut� quand le navigateur supporte document.images. Les navigateurs ne le supportant pas n'obtiennent pas l'effet demand� mais �galement aucune erreur.

window.focus

Hotjava 3 a un support bugg�. L'exemple de cette page fonctionne, mais d'autres sur ce site ne fonctionne pas. Je n'ai aucune id�e du probl�me.

Netscape 4 sur Linux le supporte, mais quand vous �tendez le focus sur quelque chose qui n'est actuellement pas sur l'�cran, la page ne d�file pas pour montrer l'�l�ment sur lequel vous avez �tendu le focus. Ca pr�te vraiment � confusion.

Opera 3 et 4 d��tendre le focus sur une autre fen�tre quand vous faites appel � un script dans une autre fen�tre (cross-window JavaScripting), bien que dans d'autres circonstances elle supporte le focus. Ceci est r�solu dans op�ra 5, except� sous Linux.

Opera 5 sur Mac indique qu'il supporte le focus() mais en fait il ne fait rien.

Un dispositif utile de Javascript est sa capacit� � placer le focus sur une certaine fen�tre ou un certain �l�ment dans cette fen�tre, par exemple un �l�ment de formulaire.

Si vous chargez des pages dans des pop-ups il est �galement utile de placer le focus sur le pop-up de sorte que l'utilisateur puisse suivre ce qui se passe. Ce n�est absolument pas n�cessaire pour faire fonctionner la page, mais c'est un service suppl�mentaire sympathique.

J�ai d�abord pens�e que Netscape 2 et explorer 3 ne supporte pas du tout le focus. Cependant, il s'av�re que Netscape 2 supporte le focus, mais pas au niveau des fen�tres. Il est, cependant, parfaitement possible de faire un focus sur des champs de formulaire.
Jeff Howden, qui a corrig� l'erreur, propose de ne pas employer du tout la d�tection d'objet pour des champs de formulaire, puisque tous les navigateurs connus supportent la m�thode de focus. Je pense qu�il a raison, ainsi quand vous voulez employer la m�thode de focus sur des champs de formulaire, vous n��tes pas oblig� d�employer une d�tection d'objet.

Par cons�quent je n'emploie pas du tout la d�tection d'objet dans mon script de v�rification de champ de texte, o� je mets le focus sur un �l�ment du formulaire.

DHTML

Le DHTML est support� par Netscape 4+, Explorer 4+, Opera 5, Escape 4, Konqueror, iCab et Omniweb.

Le Dynamic HTML est le changement des d�clarations de style d'un �l�ment HTML au moyen de Javascript.

Pour utiliser le DHTML, le navigateur doit supporter un des DOM interm�diaire. (DOM : Document Object Model). Ici la d�tection d'objet est extr�mement importante, puisqu'il y ni a pas moins de trois DOM avanc�s et vous devez d�couvrir lequel sera support� par le navigateur et le placer sur le bon morceau de code. Pour un contr�le g�n�ral �Ce navigateur peut-il utiliser du DHTML� ; J'emploie :

Dans ce cas-ci nous v�rifions les trois objets possibles, puisqu'il y a actuellement trois ensembles de code qu�un navigateur peut supporter. Seulement un des trois objets a besoin d'�tre support� pour que le DHTML puisse fonctionner, ainsi nous utilisons l'op�rateur bool�en || (OU).

Quand nous parlerons du script sp�cifique, nous devrons donner des instructions sp�ciales � chaque DOM.

Ici, aussi, on pourrait employer un d�tecteur de navigateur, mais puisque toutes sortes de nouveaux navigateurs compatibles DHTML entrent sur le march� et que pour le moment il n�est pas �vident de savoir quel DOM sera support�, il serait dangereux de le faire. Ne v�rifiez donc pas si le navigateur est explorer 4, v�rifi� plut�t si le navigateur peut faire fonctionner document.all. Beaucoup plus s�r � long terme.

W3C DOM

Les parties avanc�es du W3C DOM sont seulement support�es par Mozilla, Explorer 5 et Konqueror.

Malheureusement Opera 6 6 pr�tend support� les parties avanc�es du DOM W3C, mais ne peut actuellement pas manipuler les scripts.

Le sujet du DOM W3C est de cr�er et d'enlever des �l�ments HTML, vous permettant ainsi de modifier les document HTML en fonctionnement. Bien sur, vous avez d�abord besoin de d�couvrir si le navigateur supporte actuellement le DOM W3C. La d�tection g�n�rale pour cela est :

Si le navigateur passe ce test, vous savez qu'il supporte au moins des parties du DOM W3C.

Cependant, pour les scripts vraiment nouveaux ce n'est pas suffisant. Op�ra 5, par exemple, supporte suffisamment du nouveau DOM pour faire du DHTML mais pas assez pour supporter des scripts vraiment avanc�s. Par cons�quent quand vous voulez vraiment utiliser un nouveau script, vous devriez commencer par cette d�tection d�objet :

Celui-ci contr�le dans un premier temps la pr�sence du DOM W3C puis la pr�sence du crucial createElement(). Si elle n'est pas support� le navigateur n'est pas suffisamment avanc� pour faire de vrais script DOM W3C. Internet Explorer 4 supporte aussi document.createElement (bien que cela fonctionne diff�remment de la m�thode de W3C), mais nous ne voulons pas qu'il ex�cute les scripts. Par cons�quent nous devons �galement v�rifier getElementById.