TD7 - Dessin bitmap en javascript.

HTML/CSS
2004-2005
IMAC 1

---

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

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.

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:

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:

• Créez un certain nombre de boites de couleurs différentes permettant de sélectionner une couleur.
• Changez le script de l'exercice 2 de façon à remplir les cellules du tableau avec la couleur sélectionnée lorsque l'on se déplace au dessus d'une des cases et que l'un des boutons de la souris en enfoncé.
• Ajoutez une image qui remplira le tableau dans la couleur courante lorsque l'on cliquera dessus.