Raccourcir un script qui fonctionne

Version imprimable

Bonjour tous le monde !

Je début en javascript est je voudrai si possible raccoursir la taille de mon code.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
// Affichage de la page connecxion.php
function affConnecxion() {
	if ( a == true ) {
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="none" ;
		document.getElementById("connecxion").style.display="block" ;
		document.getElementById("boutDeco").style.display="block";
		document.getElementById("boutCo").style.display="none";
		document.getElementById("ouvrage").style.display="none" ;
		a = false ;
		b = true ;
		c = true ;
		} else {
			document.getElementById("connecxion").style.display="none" ;
			document.getElementById("ouvrage").style.display="none" ;
			document.getElementById("sujet").style.display="none" ;
			document.getElementById("titre").style.display="block" ;
			a = true ;
			b = true ;
			c = true ;
		}
}
 
// Affichage de la page sujet.html
function affSujet() {
	if ( b == true ) {
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="block" ;
		document.getElementById("connecxion").style.display="none" ;
		document.getElementById("ouvrage").style.display="none" ;
		document.getElementById("boutCo").style.display="block";
		document.getElementById("boutDeco").style.display="none";
		a = true ;
		b = false ;
		c = true ;
		} else {
			document.getElementById("connecxion").style.display="none" ;
			document.getElementById("ouvrage").style.display="none" ;
			document.getElementById("sujet").style.display="none" ;
			document.getElementById("titre").style.display="block" ;
			a = true ;
			b = true ;
			c = true ;
		}
}
 
// Afficher la liste des ouvrages
function affOuv() {
	if ( c == true ) {
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="none" ;
		document.getElementById("connecxion").style.display="none" ;
		document.getElementById("ouvrage").style.display="block" ;
		document.getElementById("boutCo").style.display="block";
		document.getElementById("boutDeco").style.display="none";
		a = true ;
		b = true ;
		c = false ;
		} else {
			document.getElementById("connecxion").style.display="none" ;
			document.getElementById("ouvrage").style.display="none" ;
			document.getElementById("sujet").style.display="none" ;
			document.getElementById("titre").style.display="block" ;
			a = true ;
			b = true ;
			c = true ;
		}
}
 
// Fonction event
function addEvent(elt,evt,fct) {
	if (document.addEventListener) {
		elt.addEventListener(evt,fct,false);
		} else {
			elt.attachEvent('on'+evt,fct);
			}
}
 
// Affichage de la page sujet.html
function init(){
	document.getElementById("titre").style.display="block" ;
	document.getElementById("sujet").style.display="none" ;
	document.getElementById("connecxion").style.display="none" ;
	document.getElementById("ouvrage").style.display="none" ;
		document.getElementById("boutCo").style.display="block";
		document.getElementById("boutDeco").style.display="none";
	a = true ;
	b = true ;
	c = true ;
}

Voila ma question je voudrai savoir si il me serai pas plus simple de recuperai la valeur de l'id du bouton sur le quel je clic et changer juste la valeur du display en question ?

Merci pour vos réponces
bpascal91

Fais-toi une petite fonction pour factoriser tous ces appels ^^

Code:

1
2
3
4
function display(elems, etat) {
    for (var i = 0, iMax = elems.length; i < iMax; ++i)
        document.getElementById(elems[i]).style.display = etat;
}

qui te permet de remplacer par exemple ceci :

avant

Code:

1
2
3
4
5
6
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="block" ;
		document.getElementById("connecxion").style.display="none" ;
		document.getElementById("ouvrage").style.display="none" ;
		document.getElementById("boutCo").style.display="block";
		document.getElementById("boutDeco").style.display="none";

après

Code:

1
2
display(["sujet", "boutCo"], "block");
display(["titre", "connecxion", "ouvrage", "boutDeco"], "none");

14/04/2011, 15h35
SpaceFrog

mauvais choix de nom de fonction ?
14/04/2011, 15h38
RomainVALERI
Citation:

Envoyé par SpaceFrog

mauvais choix de nom de fonction ?

Pour connecxion ? :mrgreen: Ca m'a frappé aussi au début mais la faute est partout ^^

Autre chose au fait si tu veux raccourcir ton code :
avant
Code:

1 2 3 a = true; b = true; c = true;
après

Code:

a = b = c = true;

^^

Et aussi :
avant

Code:

if (a == true) ...

après

Code:

if (a) ...

(s'il s'agit de booléens comme ici, car dans certains autres cas de figure ça peut être plus complexe)

ok merci je vais mettre tout ca en pratique de suite ...

Je dois louper quelque chose ou pas bien le faire

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
Code JS :
var a = b = c = true ;
// Fonction des menu
function affMenu(elems, etat) {
	for (var i = 0, iMax = elems.length; i < iMax; i++)
		document.getElementById(elems[i]).style.display = etat;
		display(["sujet", "boutonCo"], "block");
		display(["titre", "connecxion", "ouvrage", "boutonDeco"], "none");
}
 
// Affichage de la page connecxion.php
function affConnecxion() {
	if ( a == true ) {
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="none" ;
		document.getElementById("connecxion").style.display="block" ;
		document.getElementById("boutDeco").style.display="block";
		document.getElementById("boutCo").style.display="none";
		document.getElementById("ouvrage").style.display="none" ;
		a = false ;
		b = c = true ;
		} else {
			document.getElementById("connecxion").style.display="none" ;
			document.getElementById("ouvrage").style.display="none" ;
			document.getElementById("sujet").style.display="none" ;
			document.getElementById("titre").style.display="block" ;
			a = b = c = true ;
		}
}
 
// Affichage de la page sujet.html
function affSujet() {
	if ( b == true ) {
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="block" ;
		document.getElementById("connecxion").style.display="none" ;
		document.getElementById("ouvrage").style.display="none" ;
		document.getElementById("boutCo").style.display="block";
		document.getElementById("boutDeco").style.display="none";
		a = c = true ;
		b = false ;
		} else {
			document.getElementById("connecxion").style.display="none" ;
			document.getElementById("ouvrage").style.display="none" ;
			document.getElementById("sujet").style.display="none" ;
			document.getElementById("titre").style.display="block" ;
			a = b = c = true ;
		}
}
 
// Afficher la liste des ouvrages
function affOuv() {
	if ( c == true ) {
		document.getElementById("titre").style.display="none" ;
		document.getElementById("sujet").style.display="none" ;
		document.getElementById("connecxion").style.display="none" ;
		document.getElementById("ouvrage").style.display="block" ;
		document.getElementById("boutCo").style.display="block";
		document.getElementById("boutDeco").style.display="none";
		a = b = true ;
		c = false ;
		} else {
			document.getElementById("connecxion").style.display="none" ;
			document.getElementById("ouvrage").style.display="none" ;
			document.getElementById("sujet").style.display="none" ;
			document.getElementById("titre").style.display="block" ;
			a = b = c = true ;
		}
}
 
// Fonction event
function addEvent(elt,evt,fct) {
	if (document.addEventListener) {
		elt.addEventListener(evt,fct,false);
		} else {
			elt.attachEvent('on'+evt,fct);
			}
}
 
// Affichage de la page sujet.html
function init(){
	document.getElementById("titre").style.display="block" ;
	document.getElementById("sujet").style.display="none" ;
	document.getElementById("connecxion").style.display="none" ;
	document.getElementById("ouvrage").style.display="none" ;
	document.getElementById("boutCo").style.display="block";
	document.getElementById("boutDeco").style.display="none";
	a = b = c = true ;
}
 
// appel de fonction init 
addEvent(window, 'load', init);

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
code html :
<div id="MV" class="MenuVert">
<p>
	<?php
		require_once('fonctionPHP.php') ;
		Bonjour('') ; 
	?>
    <br />
    <ul>
        <li><a id="btaccueil" href="#" onClick="init()">Accueil</a></li>
        <li><a id="btsujet" href="#" onClick="affMenu("sujet", "block")">Sujet</a></li>
    </ul>
    <br />
    <ul>
        <li><a id="btouvrage" href="#" onClick="affOuv()">Liste des ouvrages</a></li>
    	<li><a id="btrecherche" href="#" onClick="affOuv()">Recherche</a></li>
    </ul>
    <br />
 
</div>

J'ai tester que sur le bouton sujet est ca marche pas mes div son dans d'autre page

:roll:

Code:

1
2
3
4
5
6
7
8
function display(elems, etat) {
    for (var i = 0, iMax = elems.length; i < iMax; ++i)
        document.getElementById(elems[i]).style.display = etat;
}
function affMenu() {
    display(["sujet", "boutonCo"], "block");
    display(["titre", "connecxion", "ouvrage", "boutonDeco"], "none");
}

14/04/2011, 16h54
SpaceFrog

non display est un mot "reservé" de style
y'a risque de conflit...

Equivalent à ton extrait de départ (mais on est encore loin d'avoir tout optimisé hein ^^ c'est juste le plus gros)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// Affichage de la page connecxion.php
function affConnecxion() {
	if (a) {
		disp(["connecxion", "boutDeco"], "block");
		disp(["titre", "sujet", "boutCo", "ouvrage"], "none");
		a = false;
	} else {
		disp(["titre"], "block");
		disp(["connecxion", "ouvrage", "sujet"], "none");
	}
	b = c = true;
}
 
// Affichage de la page sujet.html
function affSujet() {
	if (b) {
		disp(["sujet", "boutCo"], "block");
		disp(["titre", "connecxion", "ouvrage", "boutDeco"], "none");
		b = false;
	} else {
		disp(["titre"], "block");
		disp(["connecxion", "ouvrage", "sujet"], "none");
	}
	a = c = true;
}
 
// Afficher la liste des ouvrages
function affOuv() {
	if (c) {
		disp(["ouvrage", "boutCo"], "block");
		disp(["titre", "sujet", "connecxion", "boutDeco"], "none");
		c = false;
	} else {
		disp(["titre"], "block");
		disp(["connecxion", "ouvrage", "sujet"], "none");
	}
	a = b = true;
}
 
// Fonction event
function addEvent(elt,evt,fct) {
	if (document.addEventListener) {
		elt.addEventListener(evt,fct,false);
		} else {
			elt.attachEvent('on'+evt,fct);
			}
}
 
// Affichage de la page sujet.html
function init(){
	display(["titre", "boutCo"], "block");
	display(["sujet", "connecxion", "ouvrage", "boutDeco"], "none");
	a = b = c = true;
}
 
function disp(elems, etat) {
    for (var i = 0, iMax = elems.length; i < iMax; ++i)
        document.getElementById(elems[i]).style.display = etat;
}

...et j'ai pris en compte la remarque de Spaffy sur le nom display aussi ^^

14/04/2011, 18h14
Willpower

Citation:

Envoyé par SpaceFrog

non display est un mot "reservé" de style
y'a risque de conflit...

t'es sûr de ça ? car en programmation la notion de polymorphisme dit justement que plusieurs méthodes peuvent posséder le même nom et seront appelées distinctement selon leurs contexte, ici l'objet "style" ou "window".

je ne suis pas certain de que j'avance donc corrige-moi si je me trompe.
14/04/2011, 19h12
bpascal91

Merci beaucoup pour l'aide que vous m'avais apporter !
Personnellement j'étais pas parti sur cette voie là :lol:
J'ai encore augmenter mes connaissance :D
15/04/2011, 09h30
RomainVALERI

Citation:

Envoyé par Willpower

t'es sûr de ça ? car en programmation la notion de polymorphisme dit justement que plusieurs méthodes peuvent posséder le même nom et seront appelées distinctement selon leurs contexte, ici l'objet "style" ou "window".

je ne suis pas certain de que j'avance donc corrige-moi si je me trompe.

+1 ^^

Mais j'ai pas osé contredire le boss :oops: :mrgreen: ...et puis ça ne pouvait pas faire de mal de raccourcir le nom de la fonction...
15/04/2011, 10h00
bpascal91

Petite question qui a son importance :lol:
si la personne qui vien voir le site n'a pas javascript activer plus rien ne fonctionne donc voila ma question :
et-il possible de faire la meme chose en php ?
Merci pour les reponces
15/04/2011, 10h19
RomainVALERI

En rechargeant la page à chaque action de l'utilisateur, oui. :)
15/04/2011, 10h53
SpaceFrog

pour ce qui est des conflits de nommage entre types différents j'ai eu tellement de surprises, ne serait-ce que par exemple avec des boutons submit nommés submit
submit => fonction
submit => objet

Désormais je ne cherche pas les embrouilles je proscris l'utilisation de noms conflictuels.
15/04/2011, 11h12
Bovino
+1 Spaffy ;)

Autre cas d'école, imaginons le code suivant
Code:

1 2 3 4 5 6 7 8 var objJS = document.body; function display(){ alert('Fonction display'); } with(objJS.style){ var foireux = display; display(); }
C'est pas top :aie:
Bon, d'accord, c'est capillotracté, mais quand même...
15/04/2011, 11h22
RomainVALERI

Citation:

Envoyé par Bovino

Bon, d'accord, c'est capillotracté, mais quand même...

:fou: ben voilà maintenant j'ai mal aux cheveux... :fou:

(with ? sérieusement ? :calim2:)(j'ai jamais aimé ce "raccourci", mais je suis d'accord que c'est une réaction un peu irrationnelle :mrgreen:)
15/04/2011, 13h31
Willpower
Citation:
Envoyé par Bovino

+1 Spaffy ;)

Autre cas d'école, imaginons le code suivant

Code:

1 2 3 4 5 6 7 8 var objJS = document.body; function display(){ alert('Fonction display'); } with(objJS.style){ var foireux = display; display(); }

C'est pas top :aie:
Bon, d'accord, c'est capillotracté, mais quand même...
oui et non !

parce que si tu forces le contexte "document.body.style" au lieu de "window", le programmeur doit savoir à quoi il s'en tient !

d'ailleurs pour bien faire et être sûr d'éviter ce genre d'erreurs, tous les appels devraient se faire sur les objets auxquels ils se rapportent :
Code:

1 2 window.display(); window.alert();
;)
15/04/2011, 13h48
Bovino
Ah non :nono:

with ne modifie pas le contexte, il l'enrichit ;) :
Code:

1 2 3 4 5 6 7 8 9 var objJS = document.body; function display(){ alert('Fonction display'); } with(objJS.style){ var foireux = display; alert('toto'); display(); }
D'autre part, l'objet window est implicite, il n'est donc pas nécessaire de le préciser. :)

Mais pour en revenir à

Citation:

plusieurs méthodes peuvent posséder le même nom et seront appelées distinctement selon leurs contexte

tu as raison, mais ça reste selon moi maladroit, c'est pour cela que je préconise d'éviter des nommages pouvant porter à confusion voire à conflit ;)
15/04/2011, 14h07
Willpower

Citation:

Envoyé par Bovino

with ne modifie pas le contexte, il l'enrichit ;) :

effectivement. ;)

Citation:

Envoyé par Bovino

D'autre part, l'objet window est implicite, il n'est donc pas nécessaire de le préciser. :)

je sais, c'est justement pour ça que je disais :
"pour bien faire et être sûr d'éviter ce genre d'erreurs, tous les appels devraient se faire sur les objets auxquels ils se rapportent"

Citation:

Envoyé par Bovino

tu as raison, mais ça reste selon moi maladroit, c'est pour cela que je préconise d'éviter des nommages pouvant porter à confusion voire à conflit ;)

soit comme tu dis, éviter les nommages pouvant porter à confusion, soit éviter les appels implicites à l'objet window et justement le préciser. (ou alors bien connaitre son contexte).

je pense (donc selon moi) que les 2 façons de faire se valent. ;)