Projet collectif : progresser en JavaScript

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

Cliquer pour voir le site dynamique : ici si vous êtes dans le réseau du lycée, ici sinon

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

		}
	}
};

N'hésitez-pas à poser une question, ou faire avancer le schmilblick

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur la façon dont les données de vos commentaires sont traitées.