Découverte de ECMAScript
24/03/2005 20:26:12
Depuis peu, je m’intéresse à ECMAScript (qui est en fait une sorte de « noyau normalisé » de Javascript) en conjonction avec DOM.
Quand mes sites sont passés aux normes, mon conformisme me faisait penser, comme pas mal de gens d’ailleurs, que « le javascript c’est pas bien ». J’ai visité la section consacrée d’OpenWeb et je suis tombé sur cette page : elle explique clairement que le Javascript n’a que des avantages dès qu’il est utilisé de manière à séparer la structure des scripts (exactement comme la séparation structure/présentation en CSS) et de manière non obstructive (à savoir qu’il n’empêche pas l’utilisation de certaines fonctions du site lorsqu’il est désactivé).
Pour cela, il ne faut plus écrire en dur les évenements dans le XHTML (onmouseover, onmouseout, etc), mais définir ces évenements lors de l’éxécution du code Javascript.
J’ai donc continué ma découverte et flâné sur divers sites. Malheureusement j’ai été déçu par le fait qu’il est impossible de savoir si ces sites concernent le noyau normalisé ECMA ou si j’utilisais des propriétés non valides sans le savoir. De plus la seule référence réellement exploitable est la spécification ECMAScript mais celle-ci est particulièrement indigeste et peu pratique (en PDF…). Il existe la référence en français de ToutJavascript - particulièrement succinte - mais là encore je suis sûr d’y trouver des propriétés non conformes sans pouvoir faire la différence…
Néanmoins, le language étant étonnament facile à prendre en main, je suis arrivé en à peine 30 minutes à faire un premier programme. Celui-ci était assez simple et appliquait un effet de fondu vers le rouge lorsqu’on plaçait la souris sur un <div>. J’ai creusé la voie en implémentant la possibilité de pouvoir gérer plusieurs fondus à la fois sur plusieurs éléments et la possibilité de choisir la couleur de départ et la couleur de fin ainsi que la vitesse. Ca a donné ce magnifique script. Celui-ci se trouve en action sous vos yeux : déplacez votre souris sur la liste des catégories en haut pour vous en rendre compte.
En conformité avec les principes de séparation et d’accessibilité, le balisage XHTML n’a pas été modifié au niveau du menu pour permettre cet effet, et lorsque le Javascript est désactivé on a l’effet de hover simple habituel.
Notons également que grâce à l’utilisation de l’attribut « defer » lors de la déclaration du script, le navigateur affiche la page avant de l’éxécuter, ce qui évite au script de ralentir l’affichage de la page.
Ah, dernière chose : si vous êtes intéressés par mon script et que vous souhaiteriez le copier-coller, rien ne vous en empêche, mais vous serez gentils de mentionner « Made by e-t172 » quelque part en commentaire dans le code. Merci.
e-t172 a répondu le 25/03/2005 à 17:11 #
Le script a été modifié pour éviter des erreurs qui se produisaient lorsqu’on change de page rapidement (le navigateur suivait l’évenement onmouseout même si la page n’est plus la même et que le javascript n’a pas été rechargé, je viens de m’en apercevoir).
Nyro Xeo a répondu le 25/03/2005 à 22:19 #
Trop cool ! :p
Nyro Xeo a répondu le 25/03/2005 à 22:24 #
Voilà le genre de commentaire dont on aurait pû se passer -_-
Bref, c’est vrai que la documentation concernant le JavaScript est très superflue, et qu’on ne sait pas exactement "ce qui est juste" ou pas…
De toute façon, tant qu’on garde en tête (et ce que je fais (:p)) que quelqu’un qui n’a pas le JavaScript activé peut naviguer sur notre site, c’est "correct"…
Par contre, cette idée de séparer strictement contenu et interaction est intéressante. À mes débuts en JavaScript, je n’aimais pas beaucoup cette méthode de capture des événements, je préférais "savoir qui déclenchait quoi" pour avoir une sorte de contrôle total (ce qui est possible avec cette méthode bien sûr, mais j’avais encore trop de préjugés). Et alors je ne m’y suis jamais vraiment penché. Bah maintenant je vais y réfléchir ^^
GnU-BloG - ApOpH!s a répondu le 29/03/2005 à 20:26 #
Liens -> fondu
Certains auront pu le remarquer : les liens de mon blog réagissent au hover en effectuant un changement de couleur fondu. En bref, passez le curseur de la souris sur un des éléments du menu et observez. Mais comme je suis une merde, je signale…
ApOpH!s a répondu le 29/03/2005 à 20:28 #
Bon boulot e-t, d’ailleurs j’utilise déjà ton script sur mon blog.
Par contre pourquoi tu te la joues anglais stylé avec ton "Made by e-t172", pourquoi pas un bon "Fait par e-t172.net" bien de chez nous ?
e-t172 a répondu le 30/03/2005 à 08:12 #
Parce que j’écris toujours mes programmes en anglais par souci d’internationalisation, alors autant tout mettre en anglais :p
akira2051 a répondu le 30/03/2005 à 22:30 #
Nyro boulet ! :p
akira2051 a répondu le 30/03/2005 à 22:31 #
Raah minable ce que je viens de faire. Nan franchement c’ets pas mal ^^ Même si ça fait beaucoup de code pour très peu. Personnellement je m’en passerais.
___seb a répondu le 30/03/2005 à 23:37 #
Yep,
J’ai mis du temps a comprendre le fonctionnement du script mais j’ai finalement réussit.
Il y a une erreur si je ne m’abuse (sinon faut m’expliquer ||)
la variable "header" n’est utilisée nulle par. En fait a la place de
window.onload = function()
{
var header = document.getElementById(’header’);
var menu = document.getElementsByTagName(’ul’);
Il faudrait :
window.onload = function()
{
var header = document.getElementById(’header’);
var menu = header.getElementsByTagName(’ul’);
Et là la variable header a un sens
Par malchance ce script buggé marche comme il faut chez toi, pour la simple raison que tu souhaites que ce "glowing" s’applique au 1er div et c’est ce que fait le script buggé mais si on souhaite le faire pour un div qui n’est pas le premier de la page ça foire.
sinon, bien joué, c bien codé et efficace.
Par contre, personnellement, je n’utilise pas de nom de fonction et de variable anglophone mais des bien francais, ça permet de distinguer directement ce qui fait partie du langage et ce qui est "home made"
e-t172 a répondu le 31/03/2005 à 08:07 #
Hum, je me demande pourquoi j’ai foutu document à la place de header… simple oubli.
Merci de l’avoir repéré
« ça fait beaucoup de code pour très peu »
Là est l’intérêt de l’attribut defer
SirWam a répondu le 03/04/2005 à 14:49 #
Une petite question : en quoi cette spécification ECMAscript est elle un standard ? Cet organisme est il vraiment sérieux et reconnu, ou est-t-il juste un nième organisme qui publie sa propre spec ?
++
e-t172 a répondu le 03/04/2005 à 16:03 #
Il me semble avoir vu quelque part sur le site du W3C qu’ils considéraient ECMAScript comme un "javascript aux normes"… et puis c’est la seule tentative de mise en commun des différentes implémentations.
nosoucy a répondu le 09/04/2005 à 00:59 #
Yop
ECMA s’occupe de la standardisation
ECMAScript standardisation des langages de script mais cela ne veux pas obligatoirement dire JavaScript
Javascript est tiré du Standard ECMA-262
ActionScript est tiré du Standard ECMA-262
JScript est tiré du Standard ECMA-262 et qui peut être utilisés dans un navigateur mais aussi autre part (WSH) par exemple
On retrouve ECMAscript un peu partout ç vrai dire :
- dans tous les navigateurs web: JavaScript
- dans Flash: ActionScript
- dans FlashCom: ActionScript
- dans les pages ASP : JScript
- dans les pages ASP.NET: JScript.NET
- dans les systems windows avec WSH: JScript
- dans le framework .NET: JScript.NET
- dans les serveurs netscape: JavaScript
- dans les script 3DSmax/Plasma: JScript
- dans Authorware7 : JavaScript
- dans Adobe Premiere v7 : JavaScript
- dans Adode After Effects v6 : JavaScript
- dans Adobe Acrobat v6 : JavaScript
- dans Adobe Photoshop v8 : JavaScript
- dans Adobe Illustrator v11: JavaScript
etc …
Une fois les bases de ECMAScript assimilé langague prototype-based plutôt que class-based(Java) et bien c’est sympa de pouvoir réutiliser ces bouts de code un peu partout.
++