11402 sujets

JavaScript, DOM et API Web HTML5

Pages :
Modérateur
Bonjour,

Ayant parcouru quelques articles concernant la séparation de la structure et du comportement, je tombe bien souvent sur le report des événements "onmouseover" dans le code javascript et ce pour des raisons liées à la sémantique et à l'accessibilité. MAIS, comment se fait-il que sur la quasi-totalité des scripts que je rencontre, on laisse encore l'événement onclick dans le code HTML? Je n'en vois pas la raison... Smiley ohwell
Modifié par koala64 (19 Feb 2006 - 21:16)
Ba par flemmardise je pense Smiley lol

Par contre une autre chose que j'ai remarqué et qui est bien dommage c'est que quand on trouve :

document.getElementById('id').onmouseover=function()


il manque le plus souvent :

document.getElementById('id').onmouseover=document.getElementById('id').onfocus=function()


C'est pourtant pas compliqué.
QuentinC a écrit :
Je ne suis pas persuadé qu'onfocus fonctionne sur tous les éléments.


à mon avis sur les éléments susceptible d'avoir le focus si.
Modérateur
Et bien?! C'est tout de même bizarre que tous les sites que je croise fassent preuve de la même flemmardise... Lorsqu'on parle séparation comportement / structure, c'est systématiquement l'exemple du onmouseover qui revient...

Concernant l'ajout du onfocus, j'aurais tendance effectivement à ne le mettre que sur les éléments qui le supportent mais je n'ai pas procédé ainsi jusqu'alors vu que j'avais lu qu'il fallait le lancer uniquement lorsque toute la page avait été générée. Je le lancais donc au sein même de la fonction à la suite de la mise en place des noeuds...
Modifié par koala64 (19 Feb 2006 - 19:29)
De toute façon faire les traitements après avoir généré la totalité de la page, c'est valable pour n'importe quelle évènement, pas seulement onfocus.

Assigner onfocus à un élément qui ne le supporte pas n'est pas gravissime : on peut parfaitement attribuer une fonction à n'importe quelle variable js, ce n'est pas une spécificité des onXXX.

Pour preuve, tu peux tester : var mavar = function () {} fonctionne sans pb.
Modérateur
QuentinC a écrit :
Assigner onfocus à un élément qui ne le supporte pas n'est pas gravissime

Oui mais j'ai tendance à chasser l'inutile... Question de clarté. Smiley cligne
koala64 a écrit :
C'est tout de même bizarre que tous les sites que je croise fassent preuve de la même flemmardise...


Bizarre non par contre c'est significatif.

A comparer je pense à une mise page table par rapport aus css pour un résultat strictement identique (ou à tout le moins équivalent).

Ce que je pense c'est que quelqu'un qui a pris l'habitude d'utiliser


<script type="text/javascript">
...
element.onclick=function()
...
</script>


n'utilise plus du tout le code JS insérer dans le html

celui qui n'a pas pris cette habitude par contre ...
Modifié par clb56 (19 Feb 2006 - 22:26)
Mais avec cette méthode, si l'on a plusieurs balises (50 par exemples) auxquelles on veut affecter un OnMouseOver effectuant quasiment la même fonction, il faut donc faire 50 lignes du type "document.getElementById('ID').onmouseover = function ();", en changeant juste l'ID qu'on leur aura affecté ? (car on ne sais pas quels arguments étaient à passer pour chaque balise, donc plusieurs fonctions à créer non ?) ?

Par exemple:

<td>
<span onmouseover="blah('Test')">Text</span>
<span onmouseover="blah('Test2')">Text</span>
</td>

(sachant qu'il y a des SPAN qui pourront avoir la même valeur à transmettre à la fonction)
Modifié par EureKa (29 Nov 2006 - 03:46)
Salut

EureKa a écrit :
Mais avec cette méthode, si l'on a plusieurs balises (50 par exemples) auxquelles on veut affecter un OnMouseOver effectuant quasiment la même fonction, il faut donc faire 50 lignes du type "document.getElementById('ID').onmouseover = function ();", en changeant juste l'ID qu'on leur aura affecté ? (car on ne sais pas quels arguments étaient à passer pour chaque balise, donc plusieurs fonctions à créer non ?) ?

Par exemple:

<td>
<span onmouseover="blah('Test')">Text</span>
<span onmouseover="blah('Test2')">Text</span>
</td>

(sachant qu'il y a des SPAN qui pourront avoir la même valeur à transmettre à la fonction)


Ce serait bien de ne pas confirmer ma comparaison avec les réticences du passage de <table> à css en allant chercher toutes les situations abracadabrantesques où le principe de la désintrusion complète des scripts pourrait être pris en défaut. En l'occurence d'ailleurs ton exemple n'est pas pertinent.

Il ne manquerait plus qu'après des mois de défis css en tous genres on se retrouve avec des défis externalisation JS
Modifié par clb56 (29 Nov 2006 - 08:24)
Modérateur
Bonjour,

Tu peux passer chaque id en tant qu'argument d'une fonction, ce qui permet de ne pas tout réécrire...

exemple :

function Init()
{
   Affecte('tag1', 'coucou');
   Affecte('tag2', 'salut');
   Affecte('tag3', 'bonjour');
}
function Affecte(id, msg)
{
   var oElem = document.getElementById(id);
   oElem.onmouseover = function() { alert(msg); };
   oElem.onfocus = function() { alert(msg); }; // pour la navigation clavier
}
window.onload = Init;
ON peut même aller plus loin avec la technique de Koala64 en utilisant des tableaux.

Ex :

var tab = [
["tag1", "hello"]
,["tag2", "salut"]
,["tag3", "toto"]
];

function init () {
for (var i=0; i < tab.length; i++) {
affecte(tab[i][0], tab[i][1]);
}}


Ce qui réduit encore le code si tu as vraiment beaucoup d'éléments.[/i][/i]
J'ai remarqué aussi qu'il y a une difference de réaction entre les deux méthodes, par exemple pour un menu horizontal dépliant qui est en haut de la page, dans un cas il vat réagir qu'a la fin du chargement de la page et dans l'autre cas (onmouseover="MaFonction()") avec un petit javascript inséré directement dans le header ça réagi directement ce qui fait une grande différence surtout si la page est lourde...
Je crois que c'est toujours pareil, c'est en fonction de ce que tu veux faire, il ne faut pas être fanatique d'une méthode ou de l'autre, si par exemple tu as un appel, autant mettre un onmouseover dans la page, si tu as 50 liens, c'est plus simple de séparer, des fois séparés ça te fait un script de 20 lignes et dans l'autre cas 3 lignes, bref moi je me prend pas la tête, j'utilise les deux celon les cas et mes connaissances.
C'est aussi celon ta méthode de dévelopement, avec des inclures, ça simplifie la vie de mettre le js dans le module inclu (d'ailleur par exemple regarde le code source du journal lemonde tu vas voir tout est mélangé, je pense que c'est pour ça)
Modifié par matmat (29 Nov 2006 - 18:13)
Modérateur
Salut,

matmat a écrit :
J'ai remarqué aussi qu'il y a une difference de réaction entre les deux méthodes, par exemple pour un menu horizontal dépliant qui est en haut de la page, dans un cas il vat réagir qu'a la fin du chargement de la page et dans l'autre cas (onmouseover="MaFonction()") avec un petit javascript inséré directement dans le header ça réagi directement ce qui fait une grande différence surtout si la page est lourde...
Il faut préciser que la réaction est identique au mouseover mais que c'est au chargement de la page que ça diffère (en utilisant window.onload)... Maintenant, il existe des méthodes de chargement rapide pour répondre à ce problème donc ce n'est plus un argument recevable...

http://www.thefutureoftheweb.com/blog/2006/6/adddomloadevent

a écrit :
Je crois que c'est toujours pareil, c'est en fonction de ce que tu veux faire, il ne faut pas être fanatique d'une méthode ou de l'autre
Te considères-tu comme fanatique lorsque tu sépares la présentation de la structure ? Smiley cligne
Je pense que tu sais qu'il ne faut pas mélanger les deux et quels sont les avantages que ça comporte... Pour le comportement, c'est pareil et ce n'est pas le rôle du xhtml...

a écrit :
si par exemple tu as un appel, autant mettre un onmouseover dans la page
Non, ce n'est pas sémantique et ça monopolise l'événement mouseover sur l'élément lié... à éviter, même pour un unique gestionnaire d'événement.

a écrit :
si tu as 50 liens, c'est plus simple de séparer, des fois séparés ça te fait un script de 20 lignes et dans l'autre cas 3 lignes, bref moi je me prend pas la tête, j'utilise les deux celon les cas et mes connaissances.
Lorsque je vois le travail qui reste à faire, ne serait-ce que pour faire accepter la séparation présentation/structure, je me dis que pour JS, ce n'est pas gagné et que la route est encore longue pour faire changer les mentalités... Smiley ohwell

a écrit :
C'est aussi celon ta méthode de dévelopement, avec des inclures, ça simplifie la vie de mettre le js dans le module inclu (d'ailleur par exemple regarde le code source du journal lemonde tu vas voir tout est mélangé, je pense que c'est pour ça)
Ca ne fait qu'alourdir ton code xhtml, le rendre moins sémantique, moins accessible et ça peut nuire à la portabilité.
Un code JS placé dans un fichier externe est réutilisable sur toutes les pages.

Par ailleurs, une idée reçue consiste à croire qu'un code plus long est forcémment moins performant... Tout dépend de l'optimisation de ton code, principalement sur les boucles et les closures...

Par exemple, si je prend un code comme celui-ci :

var aVal = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
var iI = 0;
var iJ = 0;
for(iI; iI < aVal.length; iI++)
{
   iJ += aVal[iI];
}
Je déclare un tableau aVal, puis une variable iI, une autre iJ et lors de ma boucle, aVal.length se répète 20 fois...
Si je change le code comme ceci :

var aVal = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20], iI = 0, iJ = 0, count = aVal.length;
for( iI; iI < count; iI++)
{
   iJ += aVal[iI];
}
Je diminue le temps d'éxécution car je déclare en une fois mon tableau, ma variable iI, ma variable iJ ainsi qu'une variable count définissant la longueur du tableau. La détermination de la longueur du tableau ne se fait alors plus qu'une seule fois au lieu de 20. Ce n'est pas négligeable...

En écrivant :

var aVal = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20], iI = 0, iJ = 0, count = aVal.length;
for( iI; iI < count; iI++)
{
   iJ += aVal[iI++];
   iJ += aVal[iI++];
   iJ += aVal[iI++];
   iJ += aVal[iI++];
   iJ += aVal[iI++];
}
La variable iJ s'incrémente 5 fois suivi juste après par l'incrémentation de iI, le tout au sein de la boucle et celle-ci ne s'éxécute que 4 fois au lieu de 20. Le temps d'éxécution s'en retrouve de nouveau diminué.

Il existe pas mal d'autres choses...

voir les 5 liens cités ici entre autres :

http://del.icio.us/visualcomposer/optimization

En bref, on peut faire propre et réactif... Smiley cligne
Modifié par koala64 (30 Nov 2006 - 00:33)
Merci pour ces infos, c'est super interressant, je vais essayé de m'y mettre. Effectivement c'était surtout le coup de la rapidité qui m'avait calmé aprés avoir lut l'article sur le sujet sur Pompage, je ne savait pas qu'il y avait une solution, je vais lire ça et faire des tests.
Il y un dernier cas (même si cbl vat encore dire que c'est défis externalisation JS bidon) ou ça me complique d'externaliser, c'est quand j'ai des variables à ma fonction qui sont definie par un boucle php. En effet dans ce cas je ne peux pas les déclarer dans mon js. par exemple:

MaFonction('variablephp1','variablephp2')

Modifié par matmat (30 Nov 2006 - 01:51)
Merci à tous pour vos réponses, elles ont éclairci ma vision des choses. J'ai définitivement tout externalisé.

Pour rester dans le sujet du post, le chargement d'une page n'en devient-il pas (beaucoup) plus lent, s'il faut créer une centaine d'évènement onmouseover par exemple, via une boucle (même si elle est optimisée comme il se doit), que de mettre ces évènements dans les balises Html ? Si c'est effectivement le cas, quelle(s) notion(s) de confort peu(ven)t donc jouer la compensation, outre celle de la portabilité, voire de la taille du fichier html allégé (qui n'est peut-être pas un débat d'actualité étant donné les connexions rapides que nous avons) ?



La question de 'matmat' est très intéressante également !

Si je peux me permettre une réponse qui ne sera certainement pas la plus judicieuse (tout externalisé n'est peut-être pas la meilleure solution finalement...), tu pourrais avoir recours à l'élément XMLHttpRequest() dans ton fichier .JS afin d'aller chercher les valeurs de tes variables sur ta page PHP (j'avais prévenu !).


Merci pour vos avis encore une fois, ça aide !
Modifié par EureKa (30 Nov 2006 - 04:43)
Modérateur
Hello,

matmat a écrit :
c'est quand j'ai des variables à ma fonction qui sont definie par un boucle php. En effet dans ce cas je ne peux pas les déclarer dans mon js. par exemple:

MaFonction('variablephp1','variablephp2')
Tu peux générer, via PHP, un fichier ou une chaine texte JSON (ou XML) et tout récupérer via l'objet XHR. L'externalisation n'est pas un soucis...

Eureka a écrit :
le chargement d'une page n'en devient-il pas (beaucoup) plus lent, s'il faut créer une centaine d'évènement onmouseover par exemple, via une boucle (même si elle est optimisée comme il se doit), que de mettre ces évènements dans les balises Html ?
Si tu charges une bibliothèque de 40ko, tu commences à le sentir oui... tout comme quand tu mets une image trop lourde... As-tu déjà tapé un script de cette taille ? Smiley cligne
Par ailleurs, à chaque fois que tu changes de page, ne crois-tu pas plus judicieux que le script soit placé en cache grâce au fichier externe plutôt que de se taper tous les "onmouseover" de la première page, puis tous ceux de la seconde, puis de la troisième et ainsi de suite... C'est le même principe que CSS.

a écrit :
qui n'est peut-être pas un débat d'actualité étant donné les connexions rapides que nous avons
C'est une erreur de penser ça. Nombreux sont ceux qui n'ont pas accès à l'adsl, y compris parmi les personnes qui parcourent ce forum.
koala64 a écrit :
qui n'est peut-être pas un débat d'actualité étant donné les connexions rapides que nous avons
C'est une erreur de penser ça. Nombreux sont ceux qui n'ont pas accès à l'adsl, y compris parmi les personnes qui parcourent ce forum.Et puis même si l'on a l'ADSL, on apprécie d'avoir des temps de chargement les plus courts possibles. Smiley smile
Pages :