Rationalisation de script et paramètrage de configuration

**juliensl** · 20/07/2010, 17h33

Bonjour

Avant toute chose, je tiens à vous signaler que je ne connais pas du tout le langage javascript :S

j'ai trouvé sur internet un code permettant d'avoir une petite barre de rechercher, et un menu déroulant permettant d'avoir des contraintes.
Ensuite, utilisant joomla!, j'ai installé htmlmap sur mon site puis j'ai configuré une carte cliquable que j'ai publiée sur un article. J'ai récupéré le code source de la page contenant cette article.
Puis j'ai fait une chose toute simple, j'ai créé un fichier html et j'ai ajouté les 2 scripts l'un après l'autre.
Et enfin, j'ai essayé de deviner ce que voulaient dire les lignes et j'ai fait du ménage au niveau des objets qui m'étaient inutile (ayant pris le code source de la page entière, je me suis retrouvé avec tout mes menus etc dans mon script)

J'ai 2 questions à vous poser:

-Ayant fait ça de manière barbare ^^ je suis sur qu'il me reste un nombre incalculable de lignes inutiles, si vous pouviez m'aider à les supprimer ce serait sympa =)

-Comment configurer cette barre de recherche ? (quel valeurs dois-je changer pour obtenir quoi ?)

Je vous envoie le script:

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr">
 
<head>
 
  <link href="/Wood Music/templates/ja_purity/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <link rel="stylesheet" href="http://127.0.0.1/Wood Music/components/com_htmlmap/assets/css/htmlmap.css" type="text/css" />
  <style type="text/css">
    <!--
.htmlmap_com_1-tip {}
.htmlmap_com_1-title {}
.htmlmap_com_1-text {}
.htmlmap_com_1_link_1-tip {}
.htmlmap_com_1_link_1-title {}
.htmlmap_com_1_link_1-text {}
.htmlmap_mod20_0-tip {}
.htmlmap_mod20_0-title {}
.htmlmap_mod20_0-text {}
    -->
  </style>
  <script type="text/javascript" src="/Wood Music/media/system/js/mootools.js"></script>
  <script type="text/javascript">
		window.addEvent('domready', function(){ var JTooltips = new Tips($$('#htmlmap_com_1_link_1'), { maxTitleChars: 50, className: 'tool', fixed: false}); });
new Asset.image('http://127.0.0.1/Wood Music/images/htmlmaps/carte_france2.jpg');
new Asset.image('http://127.0.0.1/Wood Music/images/htmlmaps/rajout/copie de carte_france2.jpg');
new Asset.image('http://127.0.0.1/Wood Music/images/htmlmaps/rajout/copie de carte_france2.jpg');
new Asset.image('http://127.0.0.1/Wood Music/images/htmlmaps/rajout/copie de carte_france2.jpg');
new Asset.image('http://127.0.0.1/Wood Music/images/htmlmaps/');
  </script>
 
 
		<style type="text/css">#ps_results{margin-left:0px;}</style>
 
 
<link rel="stylesheet" href="http://127.0.0.1/Wood Music/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="http://127.0.0.1/Wood Music/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="http://127.0.0.1/Wood Music/templates/ja_purity/css/template.css" type="text/css" />
 
<script language="javascript" type="text/javascript" src="http://127.0.0.1/Wood Music/templates/ja_purity/js/ja.script.js"></script>
 
<script language="javascript" type="text/javascript">
var rightCollapseDefault='show';
var excludeModules='38';
</script>
<script language="javascript" type="text/javascript" src="http://127.0.0.1/Wood Music/templates/ja_purity/js/ja.rightcol.js"></script>
 
<link rel="stylesheet" href="http://127.0.0.1/Wood Music/templates/ja_purity/css/menu.css" type="text/css" />
 
 
<link rel="stylesheet" href="http://127.0.0.1/Wood Music/templates/ja_purity/styles/background/lighter/style.css" type="text/css" />
<link rel="stylesheet" href="http://127.0.0.1/Wood Music/templates/ja_purity/styles/elements/black/style.css" type="text/css" />
 
<!--[if IE 7.0]>
<style type="text/css">
.clearfix {display: inline-block;}
</style>
<![endif]-->
 
<style type="text/css">
#ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: 97%;margin: 0 auto;}
#ja-wrapper {min-width: 100%;}
</style>
</head>
 
<body id="bd" class="fs3 FF" >
<a name="Top" id="Top"></a>
<ul class="accessibility">
	<li><a href="#ja-content" title="Aller au contenu">Aller au contenu</a></li>
 
	<li><a href="#ja-mainnav" title="Aller au menu principal">Aller au menu principal</a></li>
	<li><a href="#ja-col1" title="Aller à la première colonne">Aller à la première colonne</a></li>
	<li><a href="#ja-col2" title="Aller à la seconde colonne">Aller à la seconde colonne</a></li>
</ul>
 
<div id="ja-wrapper">
 
<!-- BEGIN: HEADER -->
 
<!-- END: HEADER -->
 
<!-- BEGIN: MAIN NAVIGATION -->
<!-- END: MAIN NAVIGATION -->
 
<div id="ja-containerwrap">
<div id="ja-containerwrap2">
 
	<div id="ja-container">
	<div id="ja-container2" class="clearfix">
 
		<div id="ja-mainbody" class="clearfix">
 
		<!-- BEGIN: CONTENT -->
		<div id="ja-contentwrap">
		<div id="ja-content">
 
 
 
						<div id="ja-pathway">
 
 
			</div>
 
			<div class="componentheading">test 1</div>
 
<div class="">
	<img
		id="htmlmap_com_1_img"
		src="http://127.0.0.1/Wood Music/images/htmlmaps/carte_france2.jpg"
		title="1"
		alt="1"
				usemap="#htmlmap_com_1" />
	<map
		id="htmlmap_com_1"
		name="htmlmap_com_1">
			<area
							onmouseover="javascript:$('htmlmap_com_1_img').src='http://127.0.0.1/Wood Music/images/htmlmaps/rajout/copie de carte_france2.jpg';"
				onmouseout="javascript:$('htmlmap_com_1_img').src='http://127.0.0.1/Wood Music/images/htmlmaps/carte_france2.jpg';"
										onmousedown="javascript:$('htmlmap_com_1_img').src='http://127.0.0.1/Wood Music/images/htmlmaps/rajout/copie de carte_france2.jpg';"
										onmouseup="javascript:$('htmlmap_com_1_img').src='http://127.0.0.1/Wood Music/images/htmlmaps/rajout/copie de carte_france2.jpg';"
						shape="poly"
			coords="242,309,246,312,244,315,248,318,247,325,248,328,249,332,253,333,254,336,252,337,256,342,247,349,245,347,243,354,238,354,238,358,229,357,228,361,229,363,224,368,222,366,220,368,215,366,213,367,204,368,201,365,200,369,197,369,197,379,204,382,204,393,199,393,199,398,206,399,208,402,202,404,201,407,195,407,194,410,203,418,209,418,209,412,214,414,220,419,228,419,228,416,236,414,240,417,243,413,239,397,242,388,242,384,252,374,256,377,274,361,280,361,280,367,287,366,291,358,293,358,295,350,302,346,297,330,292,327,288,329,288,325,284,327,284,331,275,321,273,320,272,306,265,300,259,303,256,296,252,296,250,298,248,298,244,309"
			alt="copie de carte_france2" 
							id="htmlmap_com_1_link_1"
 
					title="copie de carte_france2::"
										href="/Wood%20Music/index.php?option=com_content&amp;view=category&amp;id=10&amp;Itemid=15"
			/>
		</map>
 
</body>
 
</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>Agenda Concerts/Festivals</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <script type="text/javascript">
/* 
Created by: Francis Cocharrua :: 
http://scripts.franciscocharrua.com/ 
*/
 
function Select_Value_Set(SelectName, Value) {
  eval('SelectObject = document.' + 
    SelectName + ';');
  for(index = 0; 
    index < SelectObject.length; 
    index++) {
   if(SelectObject[index].value == Value)
     SelectObject.selectedIndex = index;
   }
}
</script>
</head>
<body>
  <form name="select_set_value">
<table width="20%">
<tr>
<td width="33%"><input type="text" name="letter" size="1"></td>
<td width="33%"><input type="button" value="find" onclick="Select_Value_Set('select_set_value.letters', document.select_set_value.letter.value);"></td>
<td align="top">
<select name="letters">
<option></option>
  <option value="a">alpha</option>
  <option value="b">beta</option>
  <option value="d">delta</option>
  <option value="e">epsilon</option>
  <option value="f">phi</option>
  <option value="g">gamma</option>
  <option value="h">eta</option>
  <option value="i">iota</option>
  <option value="k">kappa</option>
  <option value="l">lambda</option>
  <option value="m">mu</option>
  <option value="n">nu</option>
  <option value="o">omicron</option>
  <option value="p">pi</option>
  <option value="r">rho</option>
  <option value="s">sigma</option>
  <option value="t">tau</option>
  <option value="u">upsilon</option>
  <option value="x">xi</option>
  <option value="z">zeta</option>
</select>
</td>
</tr>
</table>
</form>
 
</body>
</html>

Merci beaucoup ! =D

**emmanuel.remy** · 23/07/2010, 19h58

Salut,

Je crois que si quelqu'un pouvait te passer un coup de main il le ferait de bon coeur (moi le premier). Mais regardons les choses en face: ton code est important, résulte d'un assemblage, n'est pas facile à lire et s'appuie sur une librairie particulière (Mootools). Et pour couronner le tout, comme tu le dis toi-même,

-Ayant fait ça de manière barbare ^^ je suis sur qu'il me reste un nombre incalculable de lignes inutiles, si vous pouviez m'aider à les supprimer ce serait sympa =)

Tu comprendras donc qu'il faut consacrer pas mal de temps pour accomplir les tâches que tu demandes... temps important que nous ne pouvons pas toujours libérer.

ERE

**RomainVALERI** · 23/07/2010, 20h49

Heu ^^
+1 avec ERE mais juste un truc...

Code html :

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

1
2
3
</html>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

De deux choses l'une :
- soit tu as deux pages html dans le même fichier >>>

- soit ce sont deux extraits collés ensemble dans ce thread (ce qui ne rend pas les choses plus limpides, du coup

)

**juliensl** · 24/07/2010, 12h58

j'ai pris 2 codes déjà rédiger et je les ais mis dans une seul page HTML.

C'est peut-être pour ça que c'est un peu bizarre ...

Donc si je comprend bien, il faut que je supprime cette phrase en bas non ?

Merci =)

**Watilin** · 24/07/2010, 14h23

Salut Julien,
ton code HTML est dégueulasse : une dizaine de <div> imbriquées (et pas refermées !), plusieurs éléments <html>, et bien sûr un DOCTYPE non respecté.

A priori il va falloir qu’en plus du JavaScript tu approfondisses ta connaissance du HTML. Je ne dis pas ça pour te vexer !

Alors puisque tu as la louable intention d’alléger ton code, le meilleur conseil que je puisse te donner c’est : abandonne Joomla et code à la main !
Entre productivité et propreté du code, il y a des tas de gens qui choisissent productivité. Et si le gain de productivité est discutable (Notepad++ a des fonctions très puissantes), la saleté du code est indéniable

Et puis sois attentif quand tu fais des copier-coller, mais ça, ça arrive à tout le monde.

**RomainVALERI** · 24/07/2010, 14h35

Envoyé par juliensl

Donc si je comprend bien, il faut que je supprime cette phrase en bas non ?

1) non, ca ne suffit pas

2) le fait que tu poses cette question révèle la pertinence de l'analyse de Watilin : il faut reprendre les bases html + javascript pour réparer un peu tout ça ^^ (mais rassure toi hein

il n'y en a pas pour des mois et des mois : lis attentivement quelques cours et tutoriels sur ce site et réécris ta page proprement, tu ne le regretteras pas

)

**juliensl** · 24/07/2010, 16h26

Je suis en ce moment même en train d'apprendre le javascript.

Parce que enfaite, j'ai fait ce code sans aucune connaissance ni en HTML, ni en CSS, ni en Javascript.

J'ai seulement pris 2 scripts que j'ai trouvé et je les ais copier coller l'un après l'autre sans rien comprendre au script.

Je ne pense pas que je vais me mettre à tout codé à la main, je vais surtout essayer de bien comprendre le javascript (j'ai déjà appris les principes de bases du HTML et du CSS) et je vais inséré des script js à l'intérieur de mes articles créé à partir de joomla.

Est-ce autorisé ? et possible ?

Merci a++

**emmanuel.remy** · 26/07/2010, 09h21

Je ne pense pas que je vais me mettre à tout codé à la main, je vais surtout essayer de bien comprendre le javascript (j'ai déjà appris les principes de bases du HTML et du CSS) (...)

Excellente démarche.

(...) et je vais inséré des script js à l'intérieur de mes articles créé à partir de joomla.

Pourquoi pas.

Est-ce autorisé ? et possible ?

Tout est autorisé... si tu arrives à assembler l'ensemble pour que cela soit fonctionnel.

Et ce que disait Watilin est indéniable, même si c'est parfois délicat: l'idéal reste de mettre les mains dans le cambouis pour discerner au mieux la mécanique de javascript, html et css. Même si l'objectif n'est pas obligatoirement de devenir un spécialiste, tu gagneras en qualité et en maitrise de ton code ce qui aura finalement aussi comme avantage de trouver de l'aide très pertinente sur nos forums.

Bon dev,

ERE

**juliensl** · 26/07/2010, 11h06

C'est encore moi :p

Je suis en train d'étudier le javascript, mais le problème c'est que c'est un langage plutôt long et quand même un peu compliqué.
Et je suis en manque de temps pour faire des test etc... du coup, je suis obligé de tout lire sans avoir le temps de m'exercer.
Je comprend quand même 80% de ce que je lis, mais il faut que j'accélère dans la création de mon site.

Du coup je vous demande une faveur s'il vous plait.

Est-ce que vous pouvez juste me dire comment configuré ce 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
<!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>Agenda Concerts/Festivals</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <script type="text/javascript">
/* 
Created by: Francis Cocharrua :: 
http://scripts.franciscocharrua.com/ 
*/
 
function Select_Value_Set(SelectName, Value) {
  eval('SelectObject = document.' + 
    SelectName + ';');
  for(index = 0; 
    index < SelectObject.length; 
    index++) {
   if(SelectObject[index].value == Value)
     SelectObject.selectedIndex = index;
   }
}
</script>
</head>
<body>
  <form name="select_set_value">
<table width="20%">
<tr>
<td width="33%"><input type="text" name="letter" size="1"></td>
<td width="33%"><input type="button" value="find" onclick="Select_Value_Set('select_set_value.letters', document.select_set_value.letter.value);"></td>
<td align="top">
<select name="letters">
<option></option>
  <option value="a">alpha</option>
  <option value="b">beta</option>
  <option value="d">delta</option>
 
</select>
</td>
</tr>
</table>
</form>
 
</body>
</html>

Qu'est-ce qu'il faut mettre dans les valeurs de option ( value="a" etc... )
et pourquoi quand je clique sur Find, il ne se passe rien ?

Merci pour vos futures réponse

**emmanuel.remy** · 26/07/2010, 11h57

Re,

Tu remplis la zone de texte avec une lettre (a, b ou d) et tu cliques ensuite sur find. Il va te sélectionner l'entrée de la liste qui a la valeur saisie.

ERE

**juliensl** · 27/07/2010, 16h45

Mais quel pigeon que je suis ><

Si je comprend bien, ce js sert à trouver un mot dans une liste (celle de droite) à partir d'une lettre, c'est ça ?

Si c'est bien ça, je me suis totalement gouré xD
Ce que je cherché, c'était une barre de recherche où j'indique un mot clé et des critères de recherche
(exemple:
je recherche vélo34 et comme critères de recherche: Languedoc-Roussillon; Hérault; magasin de vélo. Je clique sur recherche, il me dirige vers la page de catégorie sélectionné (en gros dans un menu ça ferais:
-catégorie 1
...-Languedoc
.....-Hérault
.......-vélo)
et là il m'indique le résultat des recherches de cette page avec comme mot clé "vélo34")

Si quelqu'un connait un js comme ça, je suis preneur =D

Merci a+

**emmanuel.remy** · 28/07/2010, 01h39

Salut,

Tu n'as pas plutôt intérêt à mettre en place un moteur de recherche ? Ce serait plus simple...
Et même sans utiliser un moteur de recherche des bases comme mysql permettent un indexation fulltext de colonnes, puis des fonctions de recherche dédiées.

ERE

**juliensl** · 28/07/2010, 11h20

Avec mysql tu peux faire ça ? O.O
Alors là tu m'en bouche un coin

je vais voir pendant ce temps avec les moteurs de recherches, mais je n'aimes pas du tout la présentation d'un moteur de recherche, je trouve que c'est relativement lait

A force tu vas pensé que je me fous de toi, mais si tu pouvais m'aiguiller comment faire ça avec mysql ce serais sympa.

Merci bonne journée

**juliensl** · 28/07/2010, 12h15

je viens de tester le moteur de recherche google.

Le truc, c'est qu'il n'y a pas de moyen pour sélectionner mes catégories.

C'est impossible ou je ne l'es simplement pas trouvé ?

merci =)

Rationalisation de script et paramètrage de configuration

JavaScript

Discussions similaires

Partager

Partager