Programmation WEB Licence

Iut de Sénart Fontainebleau

Programmation web licence professionnelle bdise

TP javascript : bases du langages.

  1. Vois disposez ici de deux images : une ampoule éteinte et allumée.
    • Ecrire une page qui permet d'allumer ou d'éteindre l'ampoule en cliquant dessus.
    • Ecrire une page qui fait clignoter l'ampoule à intervalles réguliers.
  2. Le script doit permettrent de saisir sa date de naissance sous la forme jj/mm/aaaa. il affiche alors l'age de la personne. [ utiliser la classe Date ]

    Quelques conseils
    • Il faut d'abord vérifier que la saisie de l'utilisateur est valide. On utilisera les expressions régulières pour tester si c'est le cas.

      Important la méthode exec de la classe RegExp renvoie un tableau avec :

      indicecontenu
      0l'expression globale reconnue
      1,2,3, ...le contenu de chaque couple de parenthèses capturantes dans l'expression régulière
    • Si la saisie n'est pas correcte, effacer le contenu du formulaire avec sa méthode reset.
    • Pour le calcul de l'age, utiliser la classe Date pour récupérer la date du jour.
  3. Un petit memory

    On va partir du source suivant, qui affiche dans un tableau 9 ampoules. Vous ne pouvez que compléter la fonction init

    <!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Memory</title>
		<script type="text/javascript">
			function init(){
			}
		</script>
	</head>
	<body onload="init()">
		<h1>Memory</h1>
		<table cellspacing="0">
			<tr>
				<td>
					<img width="50%" src="off.png" alt="" />
				</td>
				<td>
					<img width="50%" src="off.png" alt="" />
				</td>
				<td>
					<img width="50%" src="off.png" alt="" />
				</td>
			</tr>
			<tr>
				<td>
					<img width="50%" src="off.png" alt="" />
				</td>
				<td>
					<img width="50%" src="off.png" alt="" />
				</td>
				<td>
					<img width="50%" src="off.png" alt="" />
				</td>
			</tr>
			<tr>
				<td>
					<img width="50%" src="off.png" alt="" />
				</td>
				<td>
					<img width="50%" src="off.png" alt="" />
				</td>
				<td>
					<img width="50%" src="off.png" alt="" />
				</td>
			</tr>
		</table>
	</body>
</html>
 

    Le jeu tirera aléatoirement des ampoules allumées, les dévoilera pendant une seconde au joueur, puis les cachera à nouveau. Le joueur doit alors cliquer sur chaque ampoule initialement allumée. S'il se trompe, une alerte lui signifie qu'il a perdu. Lorsque toutes les ampoules ont été retrouvées, le joueur gagne.

    Quelques conseils
    • On utilisera un tableau de 9 cases pour stocker la valeur de chaque image.
    • Pour le tirage aléatoire, on peut utiliser Math.random
    • Pour le dévoilement initial des images pendant une seconde, utiliser la méthode setTimeout
    • Ajouter à chaque image une fonction réflexe en réponse au click. Important, il faut que cette fonction sache quelle image a été cliquée !
    • Ajouter un bouton pour pouvoir recommencer une partie.

retour à la page d'accueil

retour au sommet