Web / HTML - TD n°6

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.

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">
  <!--
  // <![CDATA[

    document.getElementById("mondiv").style.color="red";
	
  // ]]>
  -->
</script>

Vous noterez au passage la déclaration du code Javascript conforme XHTML 1.0 entièrement valide et compatible avec tous les navigateurs.

Comme on le voit ci-dessus, 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.

Ex 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.

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:

  • 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.