Vous 黎es ici : Accueil des cours Misfu> Informatique> Apprendre la programmation> Cours Javascript> D騁ection d'objet
Traduction de la page Object detection r馘ig馥 par Peter-Paul Koch et traduite par Christophe Bruggeman
La traduction est en cours, si vous trouvez une erreur sur une page ou si vous souhaitez sugg駻er une am駘ioration, n'h駸itez pas ? utiliser le forum .
Op駻a 6 indique qu段l supporte createElement bien qu'il ne puisse pas r馥llement ajouter l'駘駑ent cr鳬 au document. Op駻a 7 supporte createElement correctement. Il n'y a cependant aucune mani鑽e de filtrer un op駻a plus ancien, except? pour un d騁ecteur 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 騅olu?, vous devez d'abord v駻ifier si un navigateur supporte les objets que vous voulez employer. Cette page explique comment le faire.
Tout d誕bord je vous donne quelques informations et r鑒les g駭駻ales, puis des indications sur les effets usuels qui ne sont pas support駸 par tous les navigateurs, et les moyens de pouvoir les d騁ecter.
Si vous voulez savoir si votre navigateur supporte certains objets que vous voulez utiliser dans votre code, 騅itez ? tous prix d置tiliser un d騁ecteur 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弾n est-il des navigateurs moins courants ?
Alors que la d騁ection 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鑚 que vous ayez 馗rit la page, peuvent 馮alement ne pas la consid駻er. Les r駸ultats seraient alors un jet de messages d'erreurs ou un script qui n弾st pas appel? alors que le navigateur peut facilement l弾x馗uter. Dans les deux cas, vous trichez avec vos utilisateurs et vous codez incorrectement.
Une vieille 騁ude de cas clarifiera des choses. De nos jours cet exemple particulier n'est plus vraiment un probl鑪e, mais les principes sont encore valides.
C'est un fait bien connu qu棚nternet Explorer 3 ne supporte pas le tableau document.images qui est essentiel pour le script mouseover. Nous devons donc emp鹹her le script d'黎re ex馗ut馥 dans Internet Explorer 3. Une solution serait de faire un d騁ecteur de navigateur pour l'explorer 3 et de ne pas ex馗uter 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騁ecteur de navigateur pour Internet Explorer 3, vous laissez les utilisateurs de Netscape 2 avec des messages d弾rreurs.
Donc pourquoi ne pas ajouter Netscape 2 ? votre d騁ecteur de navigateur ? Parce que cela ne r駸out rien.
Netscape 2 sur OS/2 est presque totalement compatible avec Netscape 3 et il peut manipuler des effets de mouseover. N饌nmoins d置ne mani鑽e g駭駻ale, les effets ne sont pas visibles parce que les d騅eloppeurs web ont utilis? un d騁ecteur de navigateur et ils ont d馗id駸 que Netscape 2 ne pourrait probablement pas soutenir un mouseover. Ils ont donc brid駸 leurs utilisateurs d置n peu d段nteraction et sans bonne raison. Un d騁ecteur d弛bjet appropri? aurait 騅it? ces probl鑪es.
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騁ecteur de navigateur . Par cons駲uent il est tout ? fait possible qu'un d騁ecteur de navigateur n'identifie pas le navigateur et exclut donc des fonctionnalit駸 qu'il aurait put pu supporter sans soucis. Ici, ? nouveau, vous bridez vos utilisateurs d'un peu d'interaction suppl駑entaire. Pire encore, c'est un mauvais codage.
Les num駻os de version de JavaScript sont-ils plus fiables ?
En concevant le Javascript, Netscape se rendait enti鑽ement compte que les futurs navigateurs soutiendraient plus d'objets que les anciens, et que les d騅eloppeurs web devraient pouvoir faire la distinction entre anciens et nouveaux navigateurs.
Le plan original 騁ait qu'ils v駻ifieraient le num駻o de version de JavaScript.
Tel-ou-tel objet 騁ait seulement fait pour 黎re utilisable avec JavaScript 1.XX. Employez le num駻o de version de JavaScript dans votre balise <script> et les navigateurs qui ne supportent pas l'objet ne pourront pas ex馗uter le script.
Cependant, quand Microsoft est rentr? sur le march?, cette id馥 a 騁? abandonn馥. Bien que les premi鑽es versions de Netscape 4 et d'explorer 4 aient toutes les deux support馥s le Javascript 1.2, m麥e avec beaucoup d段magination on ne peu pas penser qu段ls supportent le m麥e JavaScript 1.2 . Avec ceci les num駻os de version sont devenus d駸uets et non pertinents ? la d騁ection d'objet.
Donc n置tilisez pas les num駻os de version JavaScript. Ils sont inutiles.
Au lieu de cela, nous allons simplement regarder si le navigateur supporte l'objet (m騁hode, tableau ou propri騁?) que nous voulons employer. Regardons avec l弾xemple 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
if (document.images)
{
faire quelque chose avec le tableau images
}
Maintenant vous avez une m騁hode 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馗ut?. Si le tableau images n'existe pas il devient false (faux)
et le script n'est pas ex馗ut?.
Une autre d騁ection usuelle ce fait pour window.focus. C'est une m騁hode (une commande par laquelle vous dites ? Javascript de faire quelque chose pour vous). Si nous voulons employer la m騁hode, nous devrons d誕bord v駻ifier si le navigateur la supporte.
Notez la mani鑽e correcte : vous demandez la m騁hode, sans parenth鑚es. Par ce code
if (window.focus)
veut dire : "si la m騁hode de focus est support?", tandis que ce code
if (window.focus())
veut dire : "si vous pouvez mettre le focus sur la fen黎re". Ainsi vous supposez que le focus est support?. S'il ne l弾st pas, cette ligne de code cr馥 des erreurs. Les parenth鑚es ()
ex馗utent la commande focus, ce qui n'est pas qui ce que nous voulons dans ce cas-ci. Ainsi nous la v駻ifions sans parenth鑚es (pour voir si elle existe) et seulement quand le navigateur passe le contr?le nous ex馗utons r馥llement la commande en ajoutant des parenth鑚es :
if (window.focus) window.focus()
Ainsi le bilan serait qu弾n cas d弾mploie de tableau document.images, le premier contr?le servira a savoir si il est support?. Si vous voulez utiliser la m騁hode de focus de fen黎re, le premier contr?le sera 馮alement de savoir si elle est support馥.
Si vous employez toujours la d騁ection d'objet, vos scripts ne produiront jamais aucun message d'erreur, bien qu'ils pourraient ne pas fonctionner dans certains navigateurs.
Finalement quelques informations au sujet des anciens effets qui ont besoin de la d騁ection d'objet.
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段mages. Cependant, il ne donne pas d弾rreurs.
Netscape 3.01 (et Hotjava 3) le supporte mais il y a un autre probl鑪e : dans ces navigateurs, les images ne sont pas vraiment chang馥s, mais sont plut?t plac馥s l'une sur l'autre. Ce probl鑪e est r駸olu dans Netscape 3.04 et les suivants. Le nouveau Hotjava 3 que j'ai t駘馗harg? ? la maison semble aussi avoir r駸olu ce bug.
Opera 3.60, enfin, a des probl鑪es avec le script cross-frame mouseover.
Votre navigateur supporte document.images.
document.images est le tableau Javascript qui donne l'acc鑚 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'馗hange d'image et donnent pleins d'erreurs.
Heureusement vous pouvez 騅iter les erreurs en 馗rivant toujours les fonctions qui font quelque chose avec document.images comme ceci :
if (document.images)
{
script ici
}
Ainsi le script est seulement ex馗ut? quand le navigateur supporte document.images.
Les navigateurs ne le supportant pas n'obtiennent pas l'effet demand? mais 馮alement aucune erreur.
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馥 du probl鑪e.
Netscape 4 sur Linux le supporte, mais quand vous 騁endez le focus sur quelque chose qui n'est actuellement pas sur l'馗ran, la page ne d馭ile pas pour montrer l'駘駑ent sur lequel vous avez 騁endu le focus. Ca pr黎e vraiment ? confusion.
Opera 3 et 4 d帝tendre le focus sur une autre fen黎re quand vous faites appel ? un script dans une autre fen黎re (cross-window JavaScripting), bien que dans d'autres circonstances elle supporte le focus. Ceci est r駸olu dans op駻a 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黎re ou un certain 駘駑ent dans cette fen黎re, par exemple un 駘駑ent de formulaire.
Si vous chargez des pages dans des pop-ups il est 馮alement utile de placer le focus sur le pop-up de sorte que l'utilisateur puisse suivre ce qui se passe. Ce n弾st absolument pas n馗essaire pour faire fonctionner la page, mais c'est un service suppl駑entaire sympathique.
Pour emp鹹her des erreurs, appelez toujours le focus ainsi :
if (window.focus) window.focus()
J誕i d誕bord pens馥 que Netscape 2 et explorer 3 ne supporte pas du tout le focus. Cependant, il s'av鑽e que Netscape 2 supporte le focus, mais pas au niveau des fen黎res. 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騁ection d'objet pour des champs de formulaire, puisque tous les navigateurs connus supportent la m騁hode de focus. Je pense qu段l a raison, ainsi quand vous voulez employer la m騁hode de focus
sur des champs de formulaire, vous n底tes pas oblig? d弾mployer une d騁ection d'objet.
Par cons駲uent je n'emploie pas du tout la d騁ection d'objet dans mon script de v駻ification de champ de texte, o? je mets le focus sur un 駘駑ent du formulaire.
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馗larations de style d'un 駘駑ent HTML au moyen de Javascript.
Pour utiliser le DHTML, le navigateur doit supporter un des DOM interm馘iaire. (DOM : Document Object Model). Ici la d騁ection d'objet est extr麥ement importante, puisqu'il y ni a pas moins de trois DOM avanc駸 et vous devez d馗ouvrir lequel sera support? par le navigateur et le placer sur le bon morceau de code. Pour un contr?le g駭駻al 鼎e navigateur peut-il utiliser du DHTML? ; J'emploie :
if (document.getElementById || document.all || document.layers)
{
le navigateur peut manipuler le DHTML
}
Dans ce cas-ci nous v駻ifions les trois objets possibles, puisqu'il y a actuellement trois ensembles de code qu置n navigateur peut supporter. Seulement un des trois objets a besoin d'黎re support? pour que le DHTML puisse fonctionner, ainsi nous utilisons l'op駻ateur bool馥n || (OU).
Quand nous parlerons du script sp馗ifique, nous devrons donner des instructions sp馗iales ? chaque DOM.
Ici, aussi, on pourrait employer un d騁ecteur de navigateur, mais puisque toutes sortes de nouveaux navigateurs compatibles DHTML entrent sur le march? et que pour le moment il n弾st pas 騅ident de savoir quel DOM sera support?, il serait dangereux de le faire. Ne v駻ifiez donc pas si le navigateur est explorer 4, v駻ifi? plut?t si le navigateur peut faire fonctionner document.all.
Beaucoup plus s?r ? long terme.
Les parties avanc馥s du W3C DOM sont seulement support馥s par Mozilla, Explorer 5 et Konqueror.
Malheureusement Opera 6 6 pr騁end support? les parties avanc馥s du DOM W3C, mais ne peut actuellement pas manipuler les scripts.
Le sujet du DOM W3C est de cr馥r et d'enlever des 駘駑ents HTML, vous permettant ainsi de modifier les document HTML en fonctionnement. Bien sur, vous avez d誕bord besoin de d馗ouvrir si le navigateur supporte actuellement le DOM W3C. La d騁ection g駭駻ale pour cela est :
if (document.getElementById)
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駻a 5, par exemple, supporte suffisamment du nouveau DOM pour faire du DHTML mais pas assez pour supporter des scripts vraiment avanc駸. Par cons駲uent quand vous voulez vraiment utiliser un nouveau script, vous devriez commencer par cette d騁ection d弛bjet :
if (document.getElementById && document.createElement)
Celui-ci contr?le dans un premier temps la pr駸ence du DOM W3C puis la pr駸ence 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駻emment de la m騁hode de W3C), mais nous ne voulons pas qu'il ex馗ute les scripts. Par cons駲uent nous devons 馮alement v駻ifier getElementById.