Simplification de code

Version imprimable

Bonjour,

je découvre depuis peu (une semaine) le html5, et je voudrais l'utiliser pour faire un site web ; j'ai fait un essai qui ne fonctionne pas et je voudrais savoir si je suis sur la bonne piste.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <nav> <a href="#" onclick="display_page1()">Page 1</a> <a href="#">Page 2</a> <a href="#">Page 3</a> </nav> <section> <article id="page1"> texte 1 </article> <article id="page2"> ...
Code:

1 2 3 4 5 function display_page1() { getElementById('page1').style.display="block"; getElementById('page2').style.display="none"; getElementById('page3').style.display="none"; }

08/03/2014, 16h18
NoSmoking

Bonjour,

Citation:

je découvre depuis peu (une semaine) le html5

certes mais tu n'as toujours pas pris le temps de te pencher sur le javascript :weird:

Code:

getElementById('page1').style.display="block"; // chercher l'ERREUR

Je l'ai trouvée ;). En effet, j'avais oublié un truc, mais n'y aurait-il pas moyen de simplifier mon code ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function display_none() {
for (i=1;i<4;i++)
	document.getElementById("page"+i).style.display="none";
}
function display_page1() {
	display_none();
	document.getElementById("page1").style.display="block";
}
function display_page2() {
	display_none();
	document.getElementById("page2").style.display="block";
}
function display_page3() {
	display_none();
	document.getElementById("page3").style.display="block";
}

Code:

1
2
3
4
5
<nav>
<a  href="#" onclick="display_page1()">Page 1</a>
<a  href="#" onclick="display_page2()">Page 2</a>
<a  href="#" onclick="display_page3()">Page 3</a>
</nav>

08/03/2014, 18h51
NoSmoking

...

Citation:

mais n'y aurait-il pas moyen de simplifier mon code ?

Je transfert sur le forum adéquat et t'engage à relire les réponses qui t'ont déjà été faites sur des sujets identiques.
08/03/2014, 19h20
SylvainPV

Déjà, à partir du moment où tu en viens à copier-coller des bouts de code et à ajouter des numéros 1, 2 et 3, tout développeur doté de bon sens écrit une fonction.

Ensuite, l'approche est mauvaise. Mettre toutes les pages dans le document et les montrer/cacher au besoin n'est pas utile et peu performant. Mieux vaut charger les pages au besoin en AJAX et les injecter dans le conteneur HTML de ta page (pas forcément body). C'est ce que font la majorité des frameworks de Single Page Applications.
08/03/2014, 19h46
laurentSc

Oui, en lisant ta réponse, j'ai tout de suite pensé à la fonction...Par contre AJAX, je connais pas du tout ; mais je pense faire simple, et pour ne pas tout mettre dans le même fichier, je vais mettre chaque page dans un fichier différent, et faire des include en PHP. Est-ce une bonne formule ?
08/03/2014, 23h15
SylvainPV

Non, ça revient au même : tous tes includes PHP vont copier les pages correspondantes dans un seul document renvoyé au client. Le client va télécharger 5 pages d'un coup alors que si ça tombe, seule la première l'intéresse. Il faut un compromis dans la taille et fréquence des requêtes. Utilise l'inspecteur de ton navigateur pour regarder à quoi ressemble la page générée et quelles requêtes sont faites.

Traditionnellement, on faisait une requête par page. Tu requêtes une page, ton serveur crache le HTML, tu cliques sur un lien pour changer de page. Avec le temps, les pages se sont complexifiées : on ajoute des médias (images, vidéos, objets/applets...), on ajoute une ou plusieurs feuilles de styles externalisées, un ou plusieurs scripts. Depuis 2005 et AJAX, ça va encore plus loin : on peut requêter tout et n'importe quoi en JavaScript sans bouger de la page en cours ; ce qui laisse la porte ouverte à plein d'approches différentes. Celle des Single Page Applications est de ne jamais changer de page, et de modulariser au maximum les pages. Par exemple, si tes pages sont composées d'un header, d'une barre de navigation, d'un conteneur de page et d'un footer, tu peux au changement de page seulement remplacer le contenu de ton conteneur de page :fleche: économie de requêtes, transition plus fluide voire animée, et plein de moyens pour améliorer l'expérience utilisateur.
08/03/2014, 23h40
laurentSc

Tu me parle de choses inconnues par moi, mais ce je comptais includer, en fait, est utile pour toutes les pages : le menu, le pied de page (et ça doit être tout...)