JavaScript, aucune contre-indication.

Actualité par
Créé le , mis à jour le (30263 lectures)

Force est de constater qu'il faut faire le point sur ce vilain garnement qu'est le JavaScript, combien de fois a-t-on pu lire le JavaScript c'est inaccessible, le JavaScript c'est mal pour faire des sites web ou même le contraire tu peux rien faire sans JavaScript et j'en passe. Il faut que cela cesse ;).

DHTML ?

Tout d'abord une source d'incompréhension et de confusion, le terme DHTML. Qu'est ce que c'est que ce terme à la noix encore, après les pseudo-frames en PHP et autres pseudo-bidules, nous voilà avec du pseudo-HTML fait en JavaScript…, c'est ça ? Non mais sérieusement, le HTML n'a rien de dynamique et n'aura jamais rien de dynamique, et le DHTML renferme des notions de JavaScript ce qui n'a en fait rien à voir avec le HTML, donc voilà déjà un point d'éclairci, cessons de parler de quelque chose en l'appelant autrement !
Le DHTML n'est pas du HTML, le DHTML c'est du JavaScript et rien d'autre et ça ne devrait pas s'appeler autrement. Voilà c'est dit ;).

A l'origine du Mal

Ce petit point de définition fait, regardons ce que l'on fait du JavaScript. Si l'on observe les sites professionnels on trouve du grand n'importe quoi - Hotmail arrivant peut être en tête. Ne faisons pas un concours, ce n'est pas le but, mais on trouve quand même du grand n'importe quoi totalement non fonctionnel, obsolète et mal foutu.
On va de la détection de navigateur à la génération de contenu via JavaScript en passant par les animations à gogo qui suivent la souris. Voilà le JavaScript à bannir tout simplement. C'est de là que vient toute la diabolisation autour du JavaScript, les dégâts provoqués par ce type de pratiques ont fait qu'aux yeux de beaucoup le JavaScript est devenu un outil malsain, impropre, inutile, inefficace, inaccessible et j'en passe.

Oui mais alors ?

Remettons alors les choses à leur place, le JavaScript en lui même n'a rien de mauvais (non rien !), c'est juste l'usage que l'on en fait ou que l'on en a fait qui pose problème. Utilisé de façon judicieuse et adéquate, le JavaScript permet de grandes choses, des petits plus qui font de grands progrès dans l'ensemble d'une page web.
Pour vérifier que vous utilisez correctement le JavaScript, c'est très simple !

Une fois votre contenu mis en place, la mise en page réalisée, demandez vous ce que vous pouvez faire de plus, de mieux, le petit rien qui fait tout en matière d'ergonomie et d'utilisabilité, que pourriez vous créer pour que votre page soit plus facile à consulter ?
En fonction de ce que vous souhaitez réaliser dans ce cadre, demandez vous quel est le langage le plus adapté, les feuilles de style CSS (les sélecteurs CSS2 permettent déjà beaucoup dans certains domaines), un langage côté serveur (comme le PHP) ou bien le JavaScript. Suivant ce que vous voulez faire il faut choisir le langage adapté.
Vous vous trouvez dans une situation où le JavaScript est indispensable et est la meilleure solution à utiliser. Très bien allons-y, vous pourrez difficilement faire quelque chose de mauvais, souvenez vous, vous avez réfléchi à ce que vous pouviez faire en plus, de mieux pour une page déjà existante, à moins de mal vous y prendre vous arriverez difficilement à altérer ce qui existe déjà.

Vous allez me dire, maintenant que toute votre page est créée, vous allez devoir tout recommencer pour intégrer les différents points de JavaScript nécessaire à ce que vous souhaitez faire et ce pour l'ensemble des pages de votre site, et bien détrompez vous car tout comme vous le faites déjà pour les feuilles de style CSS, à savoir extraire la mise en forme dans un fichier CSS externe, vous pouvez faire de même pour le JavaScript.
Et c'est là toute l'efficacité du JavaScript, si vous avez correctement structuré votre document avec le balisage adapté, les identifiants (id, class etc) placés de façon stratégique, il n'y a plus grand chose qui puisse vous arreter. En effet le JavaScript est un excellent outil pour parcourir le DOM (la structure de votre document), vous pouvez sélectionner, modifier, ajouter, supprimer différents éléments, vous pouvez inter-agir avec en fonction des évenement souris/clavier etc.

Reste alors à réaliser quelque chose de propre et d'efficace, commençons d'abord par éviter les classiques détections de navigateurs totalement obsolètes, en effet le premier firewall venu ou autre proxy pourra fausser cette détection et rendra le script totalement inefficace, ces détections ne sont pas fiables. Comment faire alors pour gérer les navigateurs qui n'implémentent pas telle ou telle propriété ?
Eh bien, c'est assez simple finalement, il suffit de tester la dite propriété avant de l'utiliser et d'agir en fonction du résultat du test.

Par exemple, vous souhaitez charger un fichier XML :

Les méthodes à utiliser ont été testées avant d'êtres utilisées, ceci nous evite donc la gestion d'une erreur dans le script si ce qui est utilisé n'est pas implémenté par le navigateur, et à aucun moment nous n'avons eu à nous soucier de quel navigateur il s'agissait, mais uniquement de savoir s'il implémentait tel ou tel méthode ou objet. Cette façon de procéder nous permet d'avoir un code plus facile à maintenir, en effet pas besoin de tester les futurs navigateurs, de mettre à jour les détections de navigateurs, le même principe s'appliquera dans le futur.
C'est une méthode bien plus pérenne et surtout plus efficace et sûre.

Conclusion

Vous aurez bien compris que prendre en compte ce genre de points est d'une extrème importance, vous êtes totalement indépendant de la plateforme logicielle et matérielle de l'utilisateur, ainsi que du support du JavaScript chez le client, en effet vous avez créés des scripts qui offrent une surcouche à votre contenu, aucun élément parasite ne se trouve dans le code et tout le contenu est utilisable normalement sans JavaScript.
Si vous n'avez qu'une chose à retenir à propos du JavaScript, c'est qu'il est tout à fait correct s'il est bien utilisé (et aussi bien codé dans la mesure du possible).

Quelques ressources supplémentaires pour en savoir un peu plus (pas mal d'anglais, les français sont en retard sur le domaine, developpons le !)

Les articles en anglais sont assez abordable tout de même, je n'ai pas un très bon niveau d'anglais et j'en m'en suis très bien sorti.

Vous êtes invités à rédiger différents tutoriels sur le sujet si vous en êtes capable, Alsacréations se fera un plaisir de les publier ;).

Edit : A noter que Maurice Svay en a parlé un peu chez lui

Commentaires

neolao a dit le

pareil pour flash
on le diabolise à cause de son utilisation kikooLolStyle

Olivier a dit le

En effet, le même problème se pose pour le flash qui permet pas mal de prouesses ergonomiques. Mais la question n'est pas là pour ce billet :) et je n'y connais rien au flash pour en parler :D

kurt a dit le

Un mot : Merci :)
J'ai encore appris quelques détails :p
Personnellement, la seule raison pour laquelle je n'utilise quasiment pas de javascript est que je ne me suis pas encore décidé à l'apprendre et que je n'aime pas mettre des trucs barbares (que je ne comprend pas) dans mon code. Je n'avais d'ailleurs jamais remarqué qu'il existait des tutos javascript alsa !
Encore un bon lien à donner sur les forums ;)

Remi a dit le

Ce qui est dommage, c'est qu'encore beaucoup d'utilisateurs n'utilisent pas le javascript avec leur navigateur. Il est donc important de leur offrir d'autres options afin de ne pas les désavantager, et de rester accessibles à tous!

Olivier a dit le

@ Rémi > oui mais c'est là qu'intervient l'attitude du développeur, si son javascript fourni du plus sans pénaliser ce qui existe, il n'y a pas de soucis ;)

Il n'y a donc pas de désavantage, juste du plus pour les utilisateurs de JS. A noter que la proportion d'activation du JS tourne autour de 5 à 10% (plus proche des 5 je crois) et que ces utilisateurs l'ont généralement désactivé en connaissance de cause et savent à quoi s'attendre.

Les pauvres, combien de sites leurs sont refusés à causes de scripts mal fichu dépendant du support JS :)

Kaze a dit le

"Les pauvres, combien de sites leurs sont refusés à causes de scripts mal fichu dépendant du support JS"
Tu penses à Skyblog je suppose ? :D

Ju a dit le

A noter que Google est très très fan de JavaScript. A tel point qu'il tend à propager une nouvelle façon de faire des sites : avez-vous déjà étudié Gmail ?

de_ThoR a dit le

C'est crai que G-Mail est à fond dans le JS, mais celui ci est bien codé donc ça passe.

Olivier a dit le

Ju tu parles de GMail, c'est donc l'occasion de parler DU truc à la mode en ce moment, XML HTTP Request, donc le principe est plutôt pas mal, assez efficace, plutôt bien mis en place dans la plupart des cas, mais attention à ne pas en abuser et à ne pas l'utiliser à toute les sauces, comme tous les effets de mode, la dérive n'est jamais loin derrière, mais c'est quelque chose de très prometteur ;)

Quelque chose à ce sujet :
www.sutekidane.net/blog/b...

Aussi voir du côté de chez Fred Cavazza (je vous le conseille dans son ensemble (le blog :p)) car c'est très interessant et très ouvert d'esprit ;) :
fredcavazza.net/index.php...

Vero a dit le

Concernant le DHTML : il s'agit de l'association des 3 technologies, HTML, CSS et javascript.

Ce n'est donc ni l'un, ni l'autre mais un pseudo langage (non normalisé) mélange des 3 dont l'objectif est de gérer des événements après le chargement de la page.

Le terme Dynamic (HTML) est d'ailleurs souvent très mal interprété...

Je trouve aussi dommage que le javascript est si mauvaise presse : conséquence du manque de maitrise de ceux qui l'ont dévalorisé en pondant du mauvais DHTML à la mode ...

S'est ajouté au désastre le fait que le CSS était à ses débuts ...

Talou a dit le

Pour résumer, il y a un souci avec AJAX, c'est que la tentation de s'en servir pour générer du contenu en Javascript (avec XMLHttpRequest et InnerHTML) est grand, mais incompatible avec toute idée d'accessibilité. Mon contre-exemple d'accessibilité tal.timot.net/livewiki/ montre un outil rigolo dans la techno, mais qui ne respecte ni les moteurs de recherche, ni les boutons de navigation, ni la navigation traditionnelle. Il est super facile de faire des conneries avec Javascript. GMail est un autre exemple, qui en revanche, propose une alternative tout HTML pour les clients qui ne'utilisent pas le Javascript. Cela contraint le développeur à faire plusieurs versions, ce qui est dommage.
Un exemple AJAX qui n'empiète pas sur le contenu et l'accessibilité, peut être livesearch blog.bitflux.ch/wiki/Live... qui apporte un plus dans la recherche.

Jean-Marc a dit le

Bonjour,

Je m'intéresse à JavaScript depuis peu. Je l'utilise en terme d'aide à la navigation sur mon site. (Disons que je débute, c'est surtout cela qui me limite...)

Le petit plus que j'apprécie avec cette nouvelle orientation de JavaScript est de pouvoir le réserver uniquement avec les navigateurs qui supportent JavaScript.

C'est une contrainte mais un bonne contrainte comme le peut l'être xhtml + css parce que cela oblige à penser son travail en fonction des préférences de l'utilisateur.

Au final une page HTML pure, une touche de CSS ici, une autre de JavaScript là.

Tous les cas de navigations possibles sont vus. De la navigation brute HTML à une plus sophistiquée sans que l'un ne vienne gêner l'autre en cas de désactivation ou de navigateur non compatible.

Cependant je pencherai, pour la critique, vers celle d'Arno d'uzine dans son dernier grand article.

Ces contraintes sont parfaites en terme d'utilisation, de navigation et d'accessibilité mais, du même coup, elles empêchent de s'écarter un peu de la norme w3c pour s'amuser un peu.

Olivier a dit le

@ Jean-Marc > j'ai jamais vraiment compris Arno dans ces (très très très -trop-) longs articles, je ne vois pas en quoi ajouter des fonctionnalités et possibilités empeche d'avoir une page valide :/
Le JavaScript n'a rien "d'invalide" et faire des choses avancées n'empeche pas non plus la validation, et enfin, si la non validation est contrôlée, volontaire, qu'on est conscient de ce qu'elle entraine, je ne vois pas le mal :/ si ce n'est pas 14 <body> imbriqués les uns dans les autres, ou un truc du genre, pas grand risque et encore même comme ça, pas grand risque :
blog.alsacreations.com/20...

Je n'ai jamais compris Arno sur ces différents points... c'est dommage parceque dans le fond il dit des trucs quand même vachement bien, mais ces trolls et autres approximations ainsi que la longueur démeusuré foutent tout par terre...

Enfin bref, la question n'est pas là pour aujourd'hui :D

Pour revenir à ce que tu disais au départ (tout à fait juste ;)), il faut tout de même faire gaffe aux "pièges", désactivation CSS mais pas JavaScript (bon, faut déjà en vouloir pour tomber sur une telle config :p), ça risque là par contre d'être fort spécial.
Mais en tout cas, c'est tout l'avantage de bien séparer les choses, c'est pas juste de la philosophie de gourou la séparation contenu/mise en forme/comportement, c'est bien une nécessité et de l'efficacité puissance 10.
Je m'en convainc de jour en jour à chaque fois que j'ai à modifier une charte graphique, désactiver un script, le modifier de fond en comble, altérer une structure de document pour la rendre plus logique etc

Metuh a dit le

Eh bien...
Tu m'as ouvert un oeil, merci, l'autre suivra.

pablo a dit le

DHTML, AJAX, ...
c'est la fête!

Olivier a dit le

Un petit ajout à été fait, Maurice Svay avait bloggué sur le sujet récement.

Thomas Linard a dit le

Bonjour Olivier,

"Separating behavior and presentation" a été traduit en français :

pompage.net/pompe/separat...

Olivier a dit le

Merci Thomas, je m'en rappelais plus ;) pourtant je la connaissais :D