Raccourcir un script qui fonctionne [Résolu]

[bpascal91]

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

[RomainVALERI]

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

Code javascript :

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

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

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

[SpaceFrog]

mauvais choix de nom de fonction ?

[RomainVALERI]

Envoyé par SpaceFrog

mauvais choix de nom de fonction ?

Pour connecxion ? 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 javascript :

1
2
3
a = true;
b = true;
c = true;

après

Code javascript :

a = b = c = true;

^^

Et aussi :
avant

Code javascript :

if (a == true) ...

après

Code javascript :

if (a) ...

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

[bpascal91]

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

[Willpower]

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");
}

[SpaceFrog]

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

[RomainVALERI]

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

Code javascript :

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

[Willpower]

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.

[bpascal91]

Merci beaucoup pour l'aide que vous m'avais apporter !
Personnellement j'étais pas parti sur cette voie là
J'ai encore augmenter mes connaissance

[RomainVALERI]

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 ...et puis ça ne pouvait pas faire de mal de raccourcir le nom de la fonction...

[bpascal91]

Petite question qui a son importance
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

[RomainVALERI]

En rechargeant la page à chaque action de l'utilisateur, oui.

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

[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
Bon, d'accord, c'est capillotracté, mais quand même...

[RomainVALERI]

Envoyé par Bovino

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

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

(with ? sérieusement ? )(j'ai jamais aimé ce "raccourci", mais je suis d'accord que c'est une réaction un peu irrationnelle )

[Willpower]

Envoyé par Bovino

+1 Spaffy

Autre cas d'école, imaginons le code suivant

Code :

C'est pas top
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();

[Bovino]

Ah non

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 à

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

[Willpower]

Envoyé par Bovino

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

effectivement.

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"

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.