Javascript : séparer comportement... le retour !

[pierredureau]

J'ai été très content du script pour les menus déroulants. De plus, je vois qu'il y a des vrais passionés de javascript parmi les hubiens.

Je demande donc une nouvelle fois votre aide (je ne comprend toujours rien).

J'aimerai avoir un script qui fait ceci : http://v4.editeurjavascript.com/scripts/sc...ation_3_182.php

Mais respectant bien la séparation comportement/structure, sans cochonneries comme celle-ci :

<a href="javascript:DivStatus( 'mondiv', '3' )">Ouvrir/Fermer le Bloc 3</a>

Alors ? facile ?

[ElMoustiko]

Très facile

Enfin à premiere vue, mais je ne doute pas que ca soit réalisable

Par contre tu devras peut etre utiliser des class/id pour associer le lien d'ouverture au bloc à ouvrir...

Je laisse la place aux experts, j'y jeterais peut etre un oeil si j'ai le temps cette semaine.

[pierredureau]

Sacré ElMoustiko,

c'est qui les "experts" ? Bobe et jpv ? tu te débrouille pas trop mal toi aussi il me semble.

N'empèche vous avez une sacré science, j'essayerai de l'acquérir moi aussi quand j'aurai du temps (oulàlà c'est pas pour bientôt ça ! )

En dehors du fait que vous pondez des scripts bien pratiques, vous apportez aussi la preuve qu'il ne faut pas balancer le JavaScript à la poubelle sous pretexte qu'il y en a qui font des horreurs en DHTML. Et ça c'est cool.

[Nissone]

Mais respectant bien la séparation comportement/structure, sans cochonneries comme celle-ci  :

<a href="javascript:DivStatus( 'mondiv', '3' )">Ouvrir/Fermer le Bloc 3</a>

<{POST_SNAPBACK}>

Bonjour,

Je ne viens pas pour répondre à ta question mais pour te demander des précisions !

Je m'intéresse au javascript en ce moment -justement pour ce genre de chose- et, bien-sûr, aux CSS.

Je me demandais ce que tu endendais par "cochonneries comme celle-ci". Est-ce que tu peux me préciser ce qui n'est pas propre dans ce script, stp ?

[petit-ourson]

J'ai été très content du script pour les menus déroulants. De plus, je vois qu'il y a des vrais passionés de javascript parmi les hubiens.

Je demande donc une nouvelle fois votre aide (je ne comprend toujours rien).

J'aimerai avoir un script qui fait ceci : http://v4.editeurjavascript.com/scripts/sc...ation_3_182.php

Mais respectant bien la séparation comportement/structure, sans cochonneries comme celle-ci  :

<a href="javascript:DivStatus( 'mondiv', '3' )">Ouvrir/Fermer le Bloc 3</a>

Alors ? facile ? 

<{POST_SNAPBACK}>

Et si tu passes par un onclick, c'est pas moins cochon ?

[pierredureau]

En disant "cochonneries", j'en rajoute un peu bien sûr.

On reproche à ce genre de code d'insérer des éléments de comportement dans du HTML qui devrait ne contenir que de la pure information.

En fait, il s'agit de la même chose que de coder en HTML Strict, en enlevant tout ce qui est relatif à la présentation.

En fait, à la place de ça :

<a href="javascript:DivStatus( 'mondiv', '3' )">Ouvrir/Fermer le Bloc 3</a>

Je voudrais un truc comme ça :

<a href="#" class="ouvreur">Ouvrir/Fermer le Bloc 3</a>

Ou un truc mieux, ça dépendra ce que les hubiens trouvent.

Ceci est expliqué dans cet article de Peter-Paul Koch : http://pompage.net/pompe/separation/ (je crois que le site est out en ce moment)

Il faut maîtriser le DOM qui permet d'agir sur tes éléments HTML à distance en les appelant depuis un script situé sur un fichier externe.

<script type="text/javascript" src="tonscript.ks"></script>

Le but est que ton HTML ne dépende en aucun cas de ce script et qu'il puisse en être séparé si besoin. Un peu comme avec sa feuille de style.

Au fait, on en parle plus vraiment de Javascript mais de Ecmascript (même si on continue à dire "javascript", moi le premier) qui est standardisé. Ce que je trouve très copliqué, en plus de l'apprentissage du DOM, c'est le souci de compatibilité avec le Javascript (Netscape) et le JScript (IE). Par exemple, on multiplie les écouteurs et ça devient vite le bazard.

Respet à nos pros du script.

EDIT : Pour répondre à Petit-Ourson qui a posté pendant que je répondais à Nissone.

Non, onclick ne me convient toujours pas. Justement le précédent post http://www.webmaster-hub.com/index.php?showtopic=5370 concernant la séparation comportement/structure visait à retirer les écouteurs du HTML.

Modifié 11 Octobre 2004 par pierredureau

[petit-ourson]

Sinon tu peux toujours faire des trucs comme ca !

<p id="test">Tototootot</p>

<script>

document.getElementById("test").onclick = Colorer;

function Colorer() {

	alert( "hophop");

}

</script>

Modifié 11 Octobre 2004 par petit-ourson

[ElMoustiko]

Le mieux est l'extraction TOTALE de toute source JS du corps de la page html, en appelant le(s) script(s) JS dans la partie <head>, via <script type="text/javascript" src="script.js"></script>

Il faut ensuite s'assurer que la désactivation du JavaScript n'entraine pas une perte d'acces au document ou à quelque information, le JavaScript doit permettre un poil d'ergonomie en plus mais sans compromettre l'acces à la page et au contenu.

La séparation contenu/script permet une gestion de ce genre de chose plus facile (je trouve), un gain en propreté de code, en poids des pages et en gestion des éléments dynamiques.

Insérer un script dans la page comme tu le dis petit-ourson reviens au même que de l'extraire totalement du corps de la page, mais tu n'a pas le gain en clarté du document, et il te faudrait répéter ce code pour chaque page qui l'utilise, alors qu'un appel de fonction est plus clair et plus facile à mettre en place et rend ton document plus propre.

[petit-ourson]

Reste que personnellement je n'ai jamais trouvé comment faire pour envoyer des parametre a ma fonction Colorer.

document.getElementById("test").onclick = Colorer( 'macouleur');

Ca ne fonctionne pas ... Vous avez de bonnes ressources javascript ?

[ElMoustiko]

Pour pierre et petit-ourson :

http://www.evolt.org/article/Javascript_na...0273/index.html

Ceci devrait pouvoir vous aider dans vos questions/problèmes.

@++

[martin©]

Bonjour à tous,

A l'arrache, (pas testé), je dirai:

document.getElementById("test").onclick = function(){Colorer( 'macouleur');};

[petit-ourson]

oui il faut repasser par une "fonction" intermédiaire. J'aime le direct moi ;o)

[ElMoustiko]

Allez je me lance à l'arrache sans test, je vous donne un truc à vue de nez alors !

xhtml :

<ul id="nav_zone">
   <li><a href="#bloc1">ouvrir/fermer bloc 1</a></li>
   <li><a href="#bloc2">ouvrir/fermer bloc 2</a></li>
   <li><a href="#bloc2">ouvrir/fermer bloc3</a></li>
</ul>
<div id="bloc_zone">
   <div id="bloc1">bloc1</div>
   <div id="bloc2">bloc2</div>
   <div id="bloc3">bloc3</div>
</div>

css :

/** pas grand chose à faire, c'est selon le style que tu veux faire **/
div#bloc1, div#bloc2, div#bloc3
{
   /* NE PAS METTRE LE display: none; ICI*/
}

Et le JS :

function showHide()
{
   hideDivs();
   var links = document.getElementById('nav_zone').getElementsByTagName('a');
   for (var i = 0; i < links.length; i++)
   {
      links[i].onclick = function()
      {
         var bloc = document.getElementById(this.href);
/*** il va manquer un truc ici, il faut gerer la chaine de caractere this.href pour supprimer le 1er caractere (#), je sais plus trop ce que c la syntaxe, mais ca doit pas etre bien compliqué) ***/
         if(bloc.style.display != "none")
         {
            bloc.style.display = "none";
             return false;
          }
          else
          {
             bloc.style.display = "";
             return false;
          }
      }
   }
}
function hideDivs()
{
   var blocs = document.getElementById('bloc_zone').getElementsByTagName('div');
   for( var j = 0; j < blocs.length; j++ )
   {
      blocs[j].style.display = "none";
   }
}
window.onload = showHide;

Donc c'est de l'arrache sans tests là tel quel c'est sûr que ca peut pas marcher, mais tu as en gros l'idée... enfin je pense ! Il y a peut etre plus simple

[edit]

J'oubliais un truc, le principe de fonctionnement

Donc si JS il y a, on ouvre le bloc correspondant au href, c'est à dire #bloc, s'il est deja ouvert, on le ferme, on peut imaginer rapeller hideDivs pour fermer toutes les divs, c'est au choix.

Et si JS n'est pas actif, tout est ouvert (c'est pour ca qu'il ne fallait pas gerer le display: none ; dans les css) et le click sur le lien envoie au div correspondant.

Modifié 11 Octobre 2004 par ElMoustiko

[ElMoustiko]

Pour la fonction qui manquait permettant de retirer le #, un truc de ce style devrait etre faisable :

var bloc = document.getElementById(this.href).substring(1, X);

En prenant X le numéro du caractère de fin, par exemple pour #bloc1, en faisant substring(1, 6) on obtient bloc1

[edit]

J'ai peut etre plus propre pour trouver la valeur "6" de notre exemple...

var bloc = document.getElementById(this.href);
bloc = bloc.substring(1, bloc.length);

Un truc de ce gout là.

Modifié 11 Octobre 2004 par ElMoustiko

[ElMoustiko]

Bon là ce que j'avais fait, c'était vraiment un truc de à l'arrache de chez à l'arrache , y a des trucs que j'ai écris un peu sans réfléchir...

Par contre, ce qui m'embete c'est que this.href renvoi l'url complete de la page... donc pas gérable pour le substring que j'esperai...

La solution est alors de donner un id à chaque lien, un peu laborieux, mais c'est la seule solution que j'ai trouvé... Mais pas n'importe quel ID non plus un id qui contient l'id du bloc à ouvrir, donc j'ai choisi a_bloc1 pour ouvrir le bloc1 par exemple.

Je vous laisse la version finale qui n'empeche pas la navigation si le JS est inacitf. Comme le soulignais Laurent Denis dans un autre post, attention à être certain de l'apport de ce genre de choses, enfin on est pas obligé de tomber dans l'extremisme non plus , perso je trouve ce genre d'effet sympatoche, mais il a tout de même un peu raison, pour certaines personnes c'est un peu galère...

Code html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
  <title>Afficher, cacher des blocs</title>

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" /> 
  <meta http-equiv="Content-Script-Type" content="text/javascript" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta http-equiv="Content-Language" content="fr" />
  
  <script type="text/javascript" src="script.js"></script>
	</head>

	<body>
  <ul id="nav_zone">
 	 <li><a id="a_bloc1" href="#bloc1">ouvrir/fermer bloc 1</a></li>
 	 <li><a id="a_bloc2" href="#bloc2">ouvrir/fermer bloc 2</a></li>
 	 <li><a id="a_bloc3" href="#bloc2">ouvrir/fermer bloc3</a></li>
  </ul>
  <div id="bloc_zone">
 	 <div id="bloc1">bloc1</div>
 	 <div id="bloc2">bloc2</div>
 	 <div id="bloc3">bloc3</div>
  </div>
	</body>
</html>

Code JavaScript :

function showHide()
{
	hideDivs();
	var links = document.getElementById('nav_zone').getElementsByTagName('a');
	for (var i = 0; i < links.length; i++)
	{
  links[i].onclick = function()
  {
 	 var id = this.id.substring(2, this.id.length);
 	 var bloc = document.getElementById(id);
 	 if(bloc.style.display != "none")
 	 {
    bloc.style.display = "none";
    return false;
 	 }
 	 else
 	 {
    bloc.style.display = "";
    return false;
 	 }
  }
	}
}
function hideDivs()
{
	var blocs = document.getElementById('bloc_zone').getElementsByTagName('div');
	for( var j = 0; j < blocs.length; j++ )
	{
  blocs[j].style.display = "none";
	}
}
window.onload = showHide;

Bon j'avais presque bon

La "difficulté" qui rend le script un peu moins automatique et obligeant l'utilisation d'ID c'est que les liens et les blocs ne sont pas liés en fait, on ne peut pas vraiment les lier grâce au DOM.