Webmaster Hub > Javascript : séparer comportement... le retour !

Version complète: sur le forum Webmaster Hub : Javascript : séparer comportement... le retour !

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > Scripts et utilitaires

pierredureau

dimanche 10 octobre 2004 à 21:24

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 :

CODE

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

Alors ? facile ?

ElMoustiko

dimanche 10 octobre 2004 à 21:38

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

dimanche 10 octobre 2004 à 21:48

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 ! :o )
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

lundi 11 octobre 2004 à 08:08

CITATION(pierredureau @ 10 Oct 2004, 22:24)

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

CODE

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

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

lundi 11 octobre 2004 à 09:18

CITATION(pierredureau @ 10 Oct 2004, 22:24)

CODE

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

Alors ? facile ?

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

pierredureau

lundi 11 octobre 2004 à 09:34

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 :

CODE

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

Je voudrais un truc comme ça :

CODE

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

CODE

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.

petit-ourson

lundi 11 octobre 2004 à 09:46

Sinon tu peux toujours faire des trucs comme ca !

CODE

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

<script>

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

function Colorer() {

alert( "hophop");

}

</script>

ElMoustiko

lundi 11 octobre 2004 à 10:39

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

lundi 11 octobre 2004 à 10:52

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

CODE

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

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

ElMoustiko

lundi 11 octobre 2004 à 10:56

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©

lundi 11 octobre 2004 à 11:21

Bonjour à tous,

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

CODE

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

petit-ourson

lundi 11 octobre 2004 à 11:25

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

ElMoustiko

lundi 11 octobre 2004 à 12:27

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

CODE

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

CODE

/** 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 :

CODE

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[i], 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.

ElMoustiko

lundi 11 octobre 2004 à 15:42

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

CODE

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

CODE

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

Un truc de ce gout là.

ElMoustiko

lundi 11 octobre 2004 à 20:36

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 :

CODE

<!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 :

CODE

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.

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.