On reprend des codes rendus en projet JS pour les optimiser avec des fonctions et/ou des boucles.
On introduit aussi les tableaux (Array) : commencer peut-être par cette introduction.
Exemples de codes réalisés ci-après en cliquant sur « lire la suite ».
Ce qu’on veut obtenir (cf légende pour le site dynamique) :
Le code html :
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="UTF-8" />
<title>La page 3</title>
<link rel="stylesheet" href="../styles/style2.css" />
</head>
<body>
<header>
<h1>Page 3 : Made by Simon</h1>
</header>
<nav>
<ul>
<li><a href="page1.html" style='color:#ccccff'>page 1</a></li>
<li><a href="../index.html" style='color:#ccccff'>Retour au menu</a></li>
<li><a href="page3.html" style='color:#ccccff'>page 3</a></li>
</ul>
</nav>
<div id="centre">
<section>
<article id='statique'>
<h2>Jeu de la vie</h2>
<p>Le jeu de la vie est un automate cellulaire imaginé par John Horton Conway en 1970 et qui est probablement le plus connu de tous les automates cellulaires.
Malgré des règles très simples, le jeu de la vie est Turing-complet.
Le jeu de la vie est un jeu de simulation au sens mathématique plutôt que ludique. Bien que n'étant pas décrit par la théorie des jeux, certains le décrivent comme un « jeu à zéro joueur ».</p>
</article>
<!--
On remplira ici aussi avec JavaScript
-->
</section>
<aside>
<form></form>
<!--
On remplira ici aussi avec JavaScript
-->
</aside>
</div>
<footer>Source : <a href="https://fr.wikipedia.org/wiki/Jeu_de_la_vie">Wikipedia</a></footer>
<script type="text/javascript" src="../js/page3.js"></script>
</body>
</html>
Le code JavaScript :
//Création du tableau des motifs
let motifs = ['Moulin', 'Glisseur', 'Puffeur'];
//On stocke la longueur du tableau
let n = motifs.length;
let nom = ['moulin', 'glisseur', 'puffers'];
let prefixe = '../gif/';
let suffixe = '.gif';
//console.log(n);
//Un tableau de booléens
let affiche = [];
//On peuple le tableau avec une boucle comme 'for i in range(n):'
for(let i = 0; i < n; i++ ){
//affiche.append(False)
affiche.push(false);
//console.log(affiche);
};
//On peuple notre formulaire avec des checkbox et des label
//On récupère les formulaires de la page html
let formulaires = document.getElementsByTagName('form');
//console.log(formulaires);
//Notre formulaire
let formulaire = formulaires[0];
//On parcourt le tableau motifs
for(let i = 0; i<n; i++){
//On crée une balise input
let inputElt = document.createElement('input');
inputElt.setAttribute('type', 'checkbox');
inputElt.setAttribute('id', motifs[i]);
inputElt.setAttribute('name', motifs[i]);
//On crée une balise label
let labelElt = document.createElement('label');
labelElt.setAttribute('for', motifs[i]);
labelElt.innerText = ' ' + motifs[i];
//On rajoute un écouteur qui réagit au changement et
//lance une fonction anonyme (un bloc)
inputElt.addEventListener("change", function (){
//On change de booléen
affiche[i] = !affiche[i]; // '!' not logique
console.log(motifs[i] + ' passe à ' + affiche[i]);
//console.log(affiche);
affichage();
});
formulaire.appendChild(document.createElement('br'));
formulaire.appendChild(inputElt);
formulaire.appendChild(labelElt);
}
function affichage(){
let tableauSectionsElt = document.getElementsByTagName('section');
let sectionElt = tableauSectionsElt[0];
let articleStatiqueElt = document.getElementById('statique');
sectionElt.innerHTML = '';
sectionElt.appendChild(articleStatiqueElt);
for(let i = 0; i <= n; i++){
if (affiche[i]){
let articleElt = document.createElement('article');
let imgElt = document.createElement('img');
let chemin = prefixe + nom[i] + suffixe;
imgElt.setAttribute('src', chemin);
articleElt.appendChild(imgElt);
sectionElt.appendChild(articleElt);
}
}
};
