Sujet Précédent Sujet Suivant

Réduire un script

Fermé
coastlyne - 13 mars 2013 à 11:00
epitale Messages postés 3943 Date d'inscription jeudi 5 février 2009 Statut Membre Dernière intervention 27 octobre 2017 - 14 mars 2013 à 14:58
Bonjour,

Voici mon code :

<!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">
<head>
<script type="text/javascript">
function afficher_div(image)
{
switch(image){
case 'Reference':
document.getElementById

("page1").style.display="block";
document.getElementById

("page2").style.display="none";
document.getElementById

("page3").style.display="none";
break;
case 'Theme':
document.getElementById

("page2").style.display="block";
document.getElementById

("page1").style.display="none";
document.getElementById

("page3").style.display="none";
break;
case 'Principe':
document.getElementById

("page3").style.display="block";
document.getElementById

("page1").style.display="none";
document.getElementById

("page2").style.display="none";
break;
case 'Texte1':
document.getElementById

("page1.1").style.display="block";
document.getElementById

("page1.2").style.display="none";
document.getElementById

("page1.3").style.display="none";
break;
case 'Texte2':
document.getElementById

("page1.2").style.display="block";
document.getElementById

("page1.1").style.display="none";
document.getElementById

("page1.3").style.display="none";
break;
case 'Texte3':
document.getElementById

("page1.3").style.display="block";
document.getElementById

("page1.1").style.display="none";
document.getElementById

("page1.2").style.display="none";
break;
}
}

</script>

</head>
<body>
<input type="button" onclick="javascript:afficher_div('Reference'); return false;"

value="Référence" />
<input type="button" onclick="javascript:afficher_div('Theme'); return false;" value="Thème"

/>
<input type="button" onclick="javascript:afficher_div('Principe'); return false;"

value="Principe" />

<div id="page1" style="display:none;">
<div align="center">
<b><a href="" onclick="javascript:afficher_div('Texte1'); return

false;">Texte1</a></b><br/>
<div id="page1.1" style="display:none;">
<ul><li><a href="" onclick="javascript:afficher_div('Test1.1'); return

false;">Test1.1</a></li><br/>
<div id="page1.1.1" style="display:none;">
<a href="" target=_blank>Testlien1</a><br/>
<a href="" target=_blank>Testlien2</a><br/></div>
<li><a href="" onclick="javascript:afficher_div('Test1.2'); return

false;">Test1.2</a></li><br/>
<div id="page1.1.2" style="display:none;" />
<li><a href="" onclick="javascript:afficher_div('Test1.3'); return

false;">Test1.3</a></li><br/>
<div id="page1.1.3" style="display:none;" />
<li><a href="" onclick="javascript:afficher_div('Test1.4'); return

false;">Test1.4</a></li><br/>
<li><a href="" onclick="javascript:afficher_div('Test1.5'); return

false;">Test1.5</a></li><br/>
<li><a href="" onclick="javascript:afficher_div('Test1.6'); return

false;">Test1.6</a><br/></li></ul>
</div>

<b><a href="" onclick="javascript:afficher_div('Texte2'); return

false;">Texte2</a></b><br/>
<div id="page1.2" style="display:none;">
<ul><li><a href="" onclick="javascript:afficher_div('Test2.1'); return

false;">Test2.1</a></li><br/>
<div id="page1.2.1" style="display:none;" />
<li><a href="" onclick="javascript:afficher_div('Test2.2'); return

false;">Test2.2</a></li><br/>
<li><a href="" onclick="javascript:afficher_div('Test2.3'); return

false;">Test2.3</a></li></ul></div>

<b><a href="" onclick="javascript:afficher_div('Texte3'); return

false;">Texte3</a></b><br/>
<div id="page1.3" style="display:none;">
<ul><li><a href="" onclick="javascript:afficher_div('Test3.1'); return

false;">Test3.1</a></li><br/>
<li><a href="" onclick="javascript:afficher_div('Test3.2'); return

false;">Test3.2</a></li><br/>
<li><a href="" onclick="javascript:afficher_div('Test3.3'); return

false;">Test3.3</a></li></ul></div>

</div>
</div>


<div id="page2" style="display:none;">
<div align="center">
<page2.1" style="display:none;">
<p class="principe">Test 2.1</p>
<p class="principe">Test 2.2</p>

</div>
</div>


<div id="page3" style="display:none;">
<div align="center">
<page3.1" style="display:none;">
<p class="principe">Test 3.1</p>
<p class="principe">Test 3.2</p>

</div>
</div>

</body>

</html>

Comment puis-je réduire le script ?
Mercii d'avance.

4 réponses

Réponse 1 / 4
Babar-lhermite
Modifié par Babar-lhermite le 13/03/2013 à 12:04
Bonjour,

Pour réduire votre script et (surtout) le rendre plus facile à modifier et corriger:

Évitez les répétitions, en informatique et surtout en programmation si vous avez des choses qui se répète c'est que le programme est mal fait.
Par exemple ici vous répéter toujours la même ligne: 

document.getElementById  
("page1").style.display="block";  
document.getElementById  
("page2").style.display="none";  
document.getElementById  
("page3").style.display="none";


utilisez donc des variables et les fonctions.

Exemple pour la répétition 
function display_page(page,boolean doit_afficher){  
   if(doit_afficher){  
    document.getElementById(page).style.display="block";  
   }else{  
    document.getElementById(page).style.display="none";  
   }  
}

Donc: 
display_page("page1",true);  
display_page("page2",false);  
display_page("page3",false);

J'ai pas testé mais c'est quand même beaucoup plus propre non?

edit : vous avez aussi la programmation orienté objet(en javascript dans une certaine mesure) qui permet de réduire, simplifier, faciliter et rendre aisément modifiable modulable votre code.
0
Réponse 2 / 4
coastlyne
13 mars 2013 à 13:50
Bonjour,

Merci de votre réponse :)

Le display_page vous le rajoutez dans le script comme ceci :

<script type="text/javascript">
function display_page(page,boolean doit_afficher){
if(doit_afficher){
document.getElementById(page).style.display="block";
}else{
document.getElementById(page).style.display="none";
}
display_page("page1",true);
display_page("page2",false);
display_page("page3",false);
}
</script>
0
Réponse 3 / 4
coastlyne
14 mars 2013 à 11:30
Quelqu'un saurait svp ?
0
epitale Messages postés 3943 Date d'inscription jeudi 5 février 2009 Statut Membre Dernière intervention 27 octobre 2017 915
14 mars 2013 à 11:51
bonjour coastlyne,

Babar-lhermite a pourtant bien séparé la fonction de son appel dans son exemple,

function display_page(page, doit_afficher){
if(doit_afficher){
...
}else{
...
}
} // cloture de la fonction


maintenant pour faire appel à cette fonction, où tu en a besoin dans ton code tu écris display_page("id",bollen);
au lieu de faire
document.getElementById("page1").style.display="block";
document.getElementById("page2").style.display="none";
tu fais :
display_page("page1",true);
display_page("page2",false);
0
coastlyne
14 mars 2013 à 14:22
Bonjour,

merci de la réponse.
Effectivement c'est plus propre mais il y a toujours autant de ligne.

Il ne doit pas y avoir de solutions. Merci quand même de m'avoir répondu
0
Réponse 4 / 4
epitale Messages postés 3943 Date d'inscription jeudi 5 février 2009 Statut Membre Dernière intervention 27 octobre 2017 915
14 mars 2013 à 14:58
si, moi j'utilise jquery donc après l'avoir importer :
pour un lien externe tu peux mettre ca dans ton <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>


<style>
.pages{display:none;}
</style>

<input type="button" class="btn" name="page1" value="Référence" />
<input type="button" class="btn" name="page2" value="Theme" />
<input type="button" class="btn" name="page3" value="Principe" />

<div class="pages" id="page1">page1</div>
<div class="pages" id="page2">page2</div>
<div class="pages" id="page3">page3</div>

<script>
$('.btn').click(function() {
$('.pages').css('display', 'none');
var lapage = $(this).attr('name');
$('#'+lapage).css('display', 'block');
});

</script>
--
0

Discussions similaires

recherche script "les visiteurs"
stoukboy -
brucine -

22 réponses
Espace entre les mots
roentgen -
patoche -

8 réponses