Web / HTML - TD n°8

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, and broken CSS support.

Today, we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP and the major browser creators.

The css Zen Garden invites you to relax and meditateimportant lessons of the masters. Begin to see with clarity. Learn to use the (yet to be) time-honored techniques in new and invigorating fashion. Become one with the web.

Les timers en javascript.

Le jeu de la vie est amusant mais cliquer sur un bouton pour itérer l'est un peu moins. Nous allons donc nous intéresser au concept de timer.

Un timer permet de déclarer une action que ne devra être exécutée qu'après un intervalle de temps défini. Le fragment de code ci-dessous défini une action qui devra être exécutée 3 secondes après qu'on ait appuyé sur le texte:

<script>
var timerId;

function alertApres3Secondes(message)
{
	timerId = window.setTimeout("alert(\""+message+"\");", 3000);
}
</script>

<span style="color: red;"
      onclick="alertApres3Secondes('Ca chatouille');">
  Cliquez donc sur ce texte !
</span>

On notera que chaque timer possède un identifiant unique renvoyé par la fonction window.setTimeout.Vous pouvez vérifier que ce script fonctionne ci-dessous:

Cliquez donc sur ce texte !

Comme vous pouvez le constater, c'est l'enfance de l'art. Si vous souhaitez disposer d'un timer qui soit rappelé de façon régulière, il suffit de rappeler la fonction window.setTimeout dans la fonction qui est appelée par le premier timer. On peut également annuler un timer en appelant la fonction clearTimeout avec l'identifiant du timer à annuler. Le petit exemple ci-dessous montre une application de ces deux fonctionnalités:

<script type="text/javascript">
<!--
var index = 0;
var colors = new Array(7);
colors[0] = "red";
colors[1] = "orange";
colors[2] = "yellow";
colors[3] = "green";
colors[4] = "blue";
colors[5] = "indigo";
colors[6] = "purple";
var timer=0;

function change_colors()
{
	index = index+1;
	for(i=0;i<colors.length;i++) {
		var boxId = (i+index)%colors.length;
		var box = document.getElementById("box"+i);
		box.style.backgroundColor = colors[boxId];
	}
}

function timer_func()
{
	change_colors();
	timer_start();
}

function timer_start()
{
	timerId = window.setTimeout("timer_func();", 200);
	document.getElementById("switch0").onclick = timer_stop;
}

function timer_stop()
{
	clearTimeout(timerId);
	document.getElementById("switch0").onclick = timer_start;
}
-->
</script>

<style type="text/css">
.box {
  width:20px;
  height: 20px;
  background-color: white;
  margin: 2px;
}
</style>

<div class="box" id="box0"></div>

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>

<span onclick="timer_start();" id="switch0">
  click here to start or stop the effect 
</span>

Le résultat:

click here to start or stop the effect !

Les formulaires en HTML (partie 1).

La documentation sur les divers éléments de formulaires disponibles en HTML sont disponibles sur le site du W3C à cet endroit: http://www.w3.org/TR/html4/interact/forms.html.

Nous allons voir rapidement certains d'entre eux afin de pouvoir s'en servir de façon simple dans ce TD.

L'élément INPUT.

Cet élément permet de saisir divers types de valeurs suivant la valeur de la propriété type qui lui est associée. C'est un élément sans balise fermante donc vous n'oublierez pas de rajouter un '/' avant le '>'.

L'exemple ci-dessous montre diverses façons de s'en servir:

Saisie d'une ligne de texte: <input type="text" id="textId" value="valeur initiale" />

Affichage d'une ligne de texte (pas de modifications): <input type="text" id="labelId" value="valeur initiale" readonly="1" />

Affichage d'un bouton: <input type="button" id="buttonId" value="click me!" />

La valeur d'un champ de texte peut être obtenue en javascript au travers du champ value de l'élément. Exemple: 

<script type="text/javascript">

<!--
function affiche()
{
	text00 = document.getElementById("text00");
	alert(text00.value);
}
-->
</script>
<input type="text" id="text00" value="valeur initiale" />
<input type="button" id="btn00" value="affiche!" onclick="affiche();" />

Résultat:

L'élément BUTTON.

Il est similaire au bouton obtenu par l'élément input mais son contenu est défini à l'intérieur de la balise (entre le <button> et le </button>) ce qui permet d'obtenir des boutons du style suivant: 

Superbouton:
<button value="plop">
	<img alt="superman" src="superman.jpg" width="20px" />
	superman!
	<img alt="superman" src="superman.jpg" width="20px" />
</button>

Qui offre le rendu suivant:

Superbouton:

Voila, ça devrait suffir pour aujourd'hui. Bon courage.

Jeu de la vie, suite et fin.

Question 1. Modifiez le code de votre jeu de la vie en ajoutant un timer qui sera démarré à l'aide d'un bouton et arrêté a l'aide d'un autre.

Question 2. Ajoutez 2 inputs permettant d'entrer les couleurs à employer pour les cellules mortes et vivantes ainsi qu'un bouton validant ces choix.

Question 3. La solution de la question 2 est intéressante mais pas facilement utilisable pour les gens ne connaissant rien au HTML et à sa gestion des couleurs. Vous allez la remplacer par un sélecteur de couleurs. Celui-ci aura la forme suivante:

  • Ce sera une sorte de pop-up menu vertical dont chaque élément correspondra à une teinte,
  • Ce menu sera lié à une boite dont la couleur sera la couleur courante,
  • Un clic sur un des éléments du menu fera apparaitre un sous-menu proposant diverses variations de la teinte proposée (plus claire ou plus foncée),
  • La sélection de l'un de ces éléments changera la couleur considérée.

Il est conseillé de mettre tout les éléments d'un menu (principal ou sous-menu) dans une boite aux bonnes dimensions qui sera invisible au chargement de la page et ne deviendra visible que sur un clic sur la boite de couleur liée au menu.