Discussion :

[laurentSc]

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

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

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

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

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

[NoSmoking]

Bonjour,

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

Code javascript :

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

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

[laurentSc]

Je l'ai trouvée . En effet, j'avais oublié un truc, mais n'y aurait-il pas moyen de simplifier 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
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 html :

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

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>

[NoSmoking]

...

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.

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

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

[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 économie de requêtes, transition plus fluide voire animée, et plein de moyens pour améliorer l'expérience utilisateur.

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