11528 sujets

JavaScript, DOM et API Web HTML5

Pages :
(reprise du message précédent)

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
...

bonjour à tous !

je réfléchissait ( ..si si Smiley murf ) hier soir à la méthode de Quirkmode , et le fait d'utiliser les gestionnaires d'évènement comme propriétés d'objets et non comme méthode revient il me semble à utiliser le mechanisme "par défaut"
des liens <a> où le gestionnaire d'évènement "onclick" est partie intégrante de cet objet ...

On oublie sans doute que ces gestionnaires sont aussi ( et avant tout !?) des propriétés que l'on peut ajouter à tout élément d'un document Html ou Xml .
A partir de là on peut imaginer des "p.onmouseover" ou "div.onfocus " ( peut-on rendre tout élément 'focusable' !?) ... mais je manque peut-etre de sommeil et suis encore dans mes rêves ...

Par contre au niveau de "gérer" 40 images d'une page ou tout utilisation 'abusive' de javascript , j'ai quelque réticence ...
Je crois que l' javascript doit rester un "apport" ponctuel et non un moyen coté client , et c'est bien parcequ'il s'exerce coté client .
Je ne crois pas que l'on doit gérer un site coté client mais coté serveur ...

mais bon j'ai tellement à apprendre encore .. Smiley confus
Modérateur
Salut kzone,

kzone a écrit :
peut-on rendre tout élément 'focusable' !?
La réponse est non. Si par exemple, tu mets :
function test()
{
	var oP = document.getElementsByTagName('p')[0];
	oP.onfocus = function() { alert('coucou'); }
}
window.onload = test;
L'alerte n'apparaîtra jamais et ce code, bien que le validateur ne bronchera pas, est invalide (tu peux vérifier en mettant un onfocus direct dans la balise et en passant la page au validateur) alors que :
function test()
{
	var oP = document.getElementsByTagName('p')[0];
	oP.onmouseover = function() { alert('coucou'); }
}
window.onload = test;
... est valide et fonctionne.

On retrouve tout cela dans la DTD XHTML 1.0 Strict par exemple...

On a deux entités récapitulant les gestionnaires d'événements :
<!ENTITY % [b][#red]events[/#][/b]
 "onclick     %Script;       #IMPLIED
  ondblclick  %Script;       #IMPLIED
  onmousedown %Script;       #IMPLIED
  onmouseup   %Script;       #IMPLIED
  [b][#green]onmouseover[/#][/b] %Script;       #IMPLIED
  onmousemove %Script;       #IMPLIED
  onmouseout  %Script;       #IMPLIED
  onkeypress  %Script;       #IMPLIED
  onkeydown   %Script;       #IMPLIED
  onkeyup     %Script;       #IMPLIED"
  >

...

<!ENTITY % focus
 "accesskey   %Character;    #IMPLIED
  tabindex    %Number;       #IMPLIED
  [b][#green]onfocus[/#][/b]     %Script;       #IMPLIED
  onblur      %Script;       #IMPLIED"
  >
Comme on peut le voir, onfocus et onblur sont séparés des autres...

Lorsqu'on passe sur l'élément p, on a :
<!ENTITY % [b][#blue]attrs[/#][/b] "%coreattrs; %i18n; %[b][#red]events[/#][/b];">

...

<!ELEMENT p %Inline;>
<!ATTLIST p
  %[b][#blue]attrs[/#][/b];
  >
... qui n'inclus pas onfocus...

Le soucis, c'est que, si on place un onmouseover sur un paragraphe, la navigation clavier est impossible pour faire apparaître l'alerte donc, quand bien même le focus fonctionnerait sur un navigateur, ce qui n'est pas impossible, il faut éviter de modifier le comportement d'un élément qui n'est pas prévu pour cela sous peine de nuire à l'accessibilité.


a écrit :
Par contre au niveau de "gérer" 40 images d'une page ou tout utilisation 'abusive' de javascript , j'ai quelque réticence ...
Je crois que l' javascript doit rester un "apport" ponctuel et non un moyen coté client , et c'est bien parcequ'il s'exerce coté client .
Je ne crois pas que l'on doit gérer un site coté client mais coté serveur ...
Pour ce qui est de la négociation de contenu, on est bien d'accord sur le fait que ça doit être géré du côté serveur. En revanche, si ce contenu est considéré comme optionnel (ex.: diaporama), on peut avoir recours au JS.
On peut se servir de JS autrement qu'en simple apport ponctuel mais il faut impérativement que cette fonctionnalité soit facultative...

Vu qu'on parlait d'échanges client/serveur, Ajax peut même améliorer l'accessibilité lorsqu'on a beaucoup de contenu optionnel... Il permet, par exemple, de temporiser le chargement du contenu plutôt que de tout balancer d'un bloc, en agissant suivant les actions de l'utilisateur.
Par rapport au variables, j'ai regardé sur d'autres scripts de "js externalisés" et une solution consiste aussi a mettre ses variables dans les attributs "title" "rel" ou tout simplement dans le lien, ce qui permet souvent de stocker suffisament de variables.
Même sans parler d'Ajax, des fois justes des effets cacher/montrer avec des onglets ou pour des menus ça rend les pages trés légéres à naviguer et réactives. Bien sur il faut que ça reste modéré parceque le précédente/suivante ne marche pas et que sans js tout est déplié ( le top c'est de mettre des ancres dans ce cas là comme le script DomTab).
matmat a écrit :
Par rapport au variables, j'ai regardé sur d'autres scripts de "js externalisés" et une solution consiste aussi a mettre ses variables dans les attributs "title" "rel" ou tout simplement dans le lien, ce qui permet souvent de stocker suffisament de variables.
Il faut quand même faire attention de ne pas détourner les attributs de leur rôle original.

En général, les classes et les ids sont assez utiles pour marquer les éléments auxquels appliquer un comportement, de la même façon qu'on les utilise pour appliquer une présentation avec les CSS.

Pour le reste, l'idéal est que ton script aille chercher lui-même les informations dans le HTML si tu écrases un comportement par défaut. Par exemple, pour l'ouverture d'une popup, on va chercher le href du lien d'origine pour savoir quelle sera l'adresse de la nouvelle fenêtre. C'est d'ailleurs un bon test pour savoir si les personnes qui ont désactivé Javascript ne sont pas lésées (si tu es obligé de créer du contenu de toutes pièces, c'est bien qu'il n'était pas dans le HTML).

Et enfin, en dernier recours, soit tu inclus le code Javascript spécifique au contenu de ta page dans un élément script, soit tu utilises comme le conseille koala64 un fichier JSON ou XML (ceci dit, j'ai du mal à voir comment utiliser XML). Pour ma part, je préfère que ce soit un fichier contenant seulement les données spécifiques à la page, ce qui permet que le reste soit mis en cache.
...

a écrit :

On retrouve tout cela dans la DTD XHTML 1.0 Strict par exemple...


c'est vrai que c'est une source d'informations que j'oublie souvent de consulter
... et merci pour les explications complémentaires .
En suivant vos conseils je vient de faire un essai "d'externalisation de js" de l'accordeon (cf post précedent, Eldebaran tu connais tu m'avais bien aidé Smiley biggrin )

j'ai donc commencé par faire ça:

window.onload = Accordion;
function Accordion() {
var a = document.getElementsByTagName('a');
for (var z=0;i<a.length;z++) {
if (a[z].className == "show") {
a[z].onclick = function() {

pour récupérer tout les liens ayant la classe "show", ensuite toujours en suivant les conseils d'Eldebaran sur le détournement des balises "title",

j'ai écrit mes liens de la maniére suivante

<a href="#" class="show" id="#open2">item1</a>

et les div a ouvrir:

<div class="magic" id="open2">

le script récupére l'id du lien enleve le "#" et ouvre le div concerné, donc plus besoin de variable dans la fonction. cela marche trés bien et c'est vrai que c'est trés pratique parceque ça permet d'appeler le js uniquement en nommant des classes et des id depuis le html, seulement je ne suis pas sur de ma méthode, est ce que c'est la démarche à suivre pour externaliser le js.
Par exemple:

var a = document.getElementsByTagName('a');
for (var i=0;i<a.length;i++) {

Si il y a 200 liens dans la page est ce que le js ne vat pas un peu galérer? ne vaut t'il mieux pas encadrer le tout par un div "accordeon"
et mettre:

var a = document.getElementById('accordeon').getElementsByTagName('a');
for (var i=0;i<a.length;i++) {

Pour transmettre la variable est ce qu'il ne serait pas plus judicieux de la mettre dans le lien

<a href="#open2" class="show">item1</a>

mais dans ce cas là comment la recupérer depuis, avec l'autre solution je faisait:

var open = this.id.replace(new RegExp("[#]"),"");

mais là etant donné qu'il y a une url c'est plus compliqué.
Cet exemple est un accordeon, mais cela pourrait être n'importe quoi, le truc c'est que j'ai toujours la même structure:
- un élement qui agit en envoyant une id et en ce transformant lui même
- et un élement qui réagit parcequ'il a l'id en question
Modifié par matmat (30 Nov 2006 - 18:22)
Je vient de trouver comment récupérer la variable dans le lien il faut faire ça:

var open = this.href.split("#")
show = document.getElementById(open[1]);
split crée un tableau qui sépare ce qu'il y a aprés # de l'url et avec [1] on le récupére. Ce qui permet d'écrire:

<a href="#open2" class="show">item1</a>
pour agir sur l'élement ayant "open2" comme id.

Si ça interresse quelqu'un je peux mettre le script entier, mais comme ça fait 40 lignes, j'ai pas envie de poluer ce chouette sujet
Modifié par matmat (30 Nov 2006 - 18:43)
Je ne voudrais pas continuer à faire de la resistance débile, mais quand même avec le fichier "adddonloadevent.js" mon petit script passe quand même de 20 ligne a 3k, bon je sait c'est pas grand chose le poid, par contre "adddonloadevent.js" il passe pas sur IE5 ça c'est plus embêtant.
Modérateur
Regarde ce sujet Smiley cligne

Dans le dernier exemple, je m'en sers et je rend la méthode compatible...
Modifié par koala64 (30 Nov 2006 - 20:04)
matmat a écrit :
Je vient de trouver comment récupérer la variable dans le lien il faut faire ça:

var open = this.href.split("#")
show = document.getElementById(open[1]);
split crée un tableau qui sépare ce qu'il y a aprés # de l'url et avec [1] on le récupére. Ce qui permet d'écrire:

<a href="#open2" class="show">item1</a>
pour agir sur l'élement ayant "open2" comme id.
C'est pas mal du tout. Smiley smile
a écrit :
A quoi sert le lien lorsque JS est désactivé ?

ça fait une ancre sur lui même, mais quand il est activé aussi! en fait il y a un probléme avec cette méthode...je vais essayé de faire un truc du genre js activé = ouvrir la div, js desactivé = ancre
Au fait merci pour le lien du "addDOMLoadEvent" modifié, je vais tester.
Modifié par matmat (30 Nov 2006 - 20:45)
Modérateur
De rien. Smiley cligne

a écrit :
ça fait une ancre sur lui même, mais quand il est activé aussi! en fait il y a un probléme avec cette méthode...je vais essayé de faire un truc du genre js activé = ouvrir la div, js desactivé = ancre
Tu peux empêcher la transmission du lien via un return false; mais ce qu'il y a, c'est que ton lien ne sert normalement qu'à ouvrir montrer/cacher la div. Il n'a réellement de sens que si JS est activé... donc il fait parti du contenu optionnel et doit être créer via JS. L'autre cas de figure, c'est effectivement de faire un lien normal qui accède à une seconde page en cas de désactivation et auquel on modifie l'action (en empêchant toujours la transmission) en cas d'activation.
a écrit :
Il n'a réellement de sens que si JS est activé... donc il fait parti du contenu optionnel et doit être créer via JS

En fait il y a deux cas differents, dans le cas d'un menu à onglet c'est pas mal quand le lien devient une ancre, et dans l'autre cas (ouvrir/fermer un menu ou une div) il ne sert effectivement à rien puisque sans js tout est ouvert.

Donc si je comprend bien pour transmettre une variable dans le deuxieme cas tu preferes cette solution:
<a href="#" class="show" id="#open2" >item1</a>

a celle ci:
<a href="#open2" class="show" >item1</a>

ou bien une troisiéme...
Modifié par matmat (30 Nov 2006 - 21:15)
Modérateur
La troisième... Smiley ravi

Dans le lien que je t'ai filé en dernier (celui où je parle des menus), lance le dernier exemple, regarde le code xhtml du menu puis le code source généré (avec JS activé !). Ca te donnera la réponse... Smiley smile

Dans un cas, les titres de menu ne sont pas cliquables (JS inactif), dans l'autre, ils le sont parce qu'ils sont transformés en liens... C'est opérationnel dans les deux cas et rien n'est inutile.

<edit>Je ne comprends pas pourquoi tu dis "pour transmettre une variable" et surtout à quoi ça te sert dans ce cas</edit>
Modifié par koala64 (30 Nov 2006 - 21:23)
Ok... En fait c'est le js qui crée le lien, j'avais pas vu l'astuce...
La variable c'est tout simplement pour indiquer la div a ouvrir dans le cas ou je ne peu pas récupérer celleci par le DOM. J'avais fait comme ça ici:
http://www.alianzafrancesa.org.mx/cuernavaca/spip.php?
si tu regarde le menu a onglet il ouvre sur une gallerie (bon je sait un peu étrangement foutue, c'est pour ça que je me renseigne). Dans ce cas je ne pouvais pas faire des déclarations "globale" parceque les fonctions interférent entre elles (par exemple l'onglet ferme une partie de la gallerie) du coup j'avais fait un truc comme ça pour étudié js:
http://www.smart-com.com.mx/spip.php?page=java&id_article=68
attention c'est un test, loin de moi l'idée de faire tout en site comme ça!
(le contenu est un peu bidon et plein de fautes)
Comme je travail avec spip, j'envoie les #ID_ARTICLE pour ouvrir et fermer les éléments qui ont id="#ID_ARTICLE". ça marche a tout les coups et c'est simple, mais bon il y surement des meilleurs méthodes...
Modifié par matmat (30 Nov 2006 - 21:57)
Modérateur
a écrit :
...dans le cas ou je ne peu pas récupérer celleci par le DOM
C'est à dire ? Quand est-ce que ce n'est pas possible ?

Si le comportement est identique sur plusieurs div, pourquoi ne pas faire une fonction qui donne à chacune un comportement similaire au lieu d'être contraint de fournir la valeur de l'id ?

Tu peux parfaitement passer par getElementsByTagName et leur affecter l'action que si celles-ci ont une classe CSS identique (ce qui permet de les différencier des autres div de ton document).
Modifié par koala64 (30 Nov 2006 - 22:14)
a écrit :
Tu peux parfaitement passer par getElementsByTagName et leur affecter l'action que si celles-ci ont une classe CSS identique (ce qui permet de les différencier des autres div de ton document).

ça je le fait déjà c'est même une super méthode. Par contre c'est dans ce cas là (pas complétement tiré par les cheveux):

<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a></li>
</ul>

<div id="open1">
content
</div>

<div id="open2">
content
</div>

Comment tu fait pour indiquer a l'item1 d'ouvrir open1 (ou changer de style) sans lui envoyer une info pour le localiser?
Modifié par matmat (30 Nov 2006 - 23:23)
matmat a écrit :

En fait c'est le js qui crée le lien, j'avais pas vu l'astuce...


AMHA il ne s'agit pas du tout d'une astuce.

matmat, tu es trop dans la virtuosité du code et pas assez dans la réflexion sur la manière dont peut et doit être utilisé le javascript.

Tu risque vraiment d'avoir du mal à comprendre ce que dit Koala car il intègre systématiquement ce dernier aspect.

Cela dit moi c'est encore pire puisque dès qu'il parle de code ben je comprend plus rien Smiley bawling

Smiley lol
Pages :