TD7 - Dessin bitmap en javascript.

HTML/CSS
2004-2005
IMAC 1


Après avoir vu les bases du javascript dans le TD6, nous allons maintenant explorer les possibilités de dynamicité qu'offre le javascript lorsqu'on le couple au HTML.


Modifier un objet dans une page web.

On peut modifier un objet appartenant à une page web en utilisant le javascript comme dans l'exemple ci-après.

<div id="mondiv">texte dans mondiv.</div>

<script type="text/javascript"><!--

	document.getElementById("mondiv").style.color="red";

--></script>

Comme on le voit ci-dessous, grâce à ce petit fragment de code on a pu modifier un des attributs (ici, un attribut de style) de la boite "mondiv":

texte dans mondiv.

La fonction document.getElementById renvoie une référence sur l'objet de la page web dont l'id est passé en paramètre.

On peut alors accéder aux différents attributs de cet objet comme dans l'exemple précédent.

Exercice 1. Tabula Rasa.

Ecrivez un script javascript permettant de générer un tableau de 200 lignes par 300 colonnes, sans bordures, sans padding, dont chaque cellule aura une taille de 1x1 pixels et aura un fond blanc. Chaque cellule aura un id dont la forme sera xXXXyYYY où XXX sera l'abscisse de la cellule et YYY son ordonnée.

Associer un script à un événement.

Il est possible d'associer un script à un certain nombre d'événements pouvant arriver à un objet d'une page web. On appelle généralement ces petits scripts des fonctions de callback. Le code suivant permet de modifier la couleur du texte de "mondiv2" lorsque l'on clique dessus:

<script type="text/javascript"><!--

function mousedown()
{
	document.getElementById("mondiv2").style.color="red";
}

function mouseup()
{
	document.getElementById("mondiv2").style.color="black";
}

--></script>

<div id="mondiv2" 
     onmousedown="mousedown();" 
     onmouseup="mouseup();">
	texte dans mondiv.
</div>

Cliquez donc sur la boite ci-dessous pour vérifier que le script fonctionne.

texte dans mondiv2.

On peut également passer des arguments en paramètre à une fonction comme dans l'exemple ci-dessous:

<script type="text/javascript"><!--

function mousedown2(object_name)
{
	document.getElementById(object_name).style.color="red";
}

function mouseup2(object_name)
{
	document.getElementById(object_name).style.color="black";
}

--></script>

<div id="mondiv3" 
     onmousedown="mousedown2('mondiv3');" 
     onmouseup="mouseup2('mondiv3');">
	texte dans mondiv.
</div>
<div id="mondiv4" 
     onmousedown="mousedown2('mondiv4');" 
     onmouseup="mouseup2('mondiv4');">
	texte dans mondiv.
</div>

Ce script en action:

texte dans mondiv3.
texte dans mondiv4.

Exercice 2. It's a kind of magic.

Ecrivez un script changeant aléatoirement la couleur d'une case du tableau créé dans l'exercice 1 lorsque l'on clique dessus.

Exercice 3. WebPaint.

Nous allons maintenant écrire un tout petit logiciel de dessin bitmap: