Raccourcir un script qui fonctionne

**bpascal91** · 14/04/2011, 13h33

Bonjour tous le monde !

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 14/04/2011, 15h34

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 14/04/2011, 15h35

mauvais choix de nom de fonction ?

**RomainVALERI** · 14/04/2011, 15h38

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

après

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

a = b = c = true;

^^

Et aussi :
avant

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

if (a == true) ...

après

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

if (a) ...

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

**bpascal91** · 14/04/2011, 15h55

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

Je dois louper quelque chose ou pas bien le faire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 14/04/2011, 16h47

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 14/04/2011, 16h54

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

**RomainVALERI** · 14/04/2011, 17h15

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

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 14/04/2011, 18h14

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** · 14/04/2011, 19h12

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** · 15/04/2011, 09h30

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** · 15/04/2011, 10h00

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** · 15/04/2011, 10h19

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

**SpaceFrog** · 15/04/2011, 10h53

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** · 15/04/2011, 11h12

+1 Spaffy

Autre cas d'école, imaginons le code suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 15/04/2011, 11h22

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** · 15/04/2011, 13h31

Envoyé par Bovino

+1 Spaffy

Autre cas d'école, imaginons le code suivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
window.display();
window.alert();

**Bovino** · 15/04/2011, 13h48

Ah non

with ne modifie pas le contexte, il l'enrichit

:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 15/04/2011, 14h07

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.

Raccourcir un script qui fonctionne

JavaScript

Discussions similaires

Partager

Partager