Réduire un script

coastlyne -
epitale Messages postés 3943 Date d'inscription Statut Membre Dernière intervention - 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.

Afficher la suite

A voir également:

Réduire un script
Comment réduire la taille d'un fichier - Guide
Script vidéo youtube - Guide
Reduire taille image - Guide
Reduire clavier iphone - Guide
Raccourci réduire fenetre - Guide

4 réponses

Réponse 1 / 4

Babar-lhermite

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.

Réponse 2 / 4

coastlyne

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>

Réponse 3 / 4

coastlyne

Quelqu'un saurait svp ?

epitale Messages postés 3943 Date d'inscription Statut Membre Dernière intervention 915

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

coastlyne

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

Réponse 4 / 4

epitale Messages postés 3943 Date d'inscription Statut Membre Dernière intervention 915

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

Discussions similaires

recherche script "les visiteurs"

Ecran iphone qui est trop grand

Espace entre les mots

Votre réponse

Discussions similaires