Introduction au Web, HTML / CSS, JS –

Partie 6
Dans la Partie 5, on a créé la grille pour le dessin et la palette de couleur. Mais ça reste bien
statique : on ne peut rien en faire !

Pour ajouter de l'interactivité, on va utiliser du JavaScript, un langage de programmation qui

va nous permettre de définir des comportements dans notre page web.

1) On va définir 2 comportements :

a) changer la couleur de notre "pinceau" (la souris) quand on clique sur une couleur de la
palette

b) changer la couleur d'une case de notre grille de dessin (un "pixel") pour qu'elle prenne la
couleur de notre "pinceau" quand on clique dessus

Si on appelle couleurPinceau la couleur de notre pinceau, on définit 2 fonctions pour nos 2

comportements :

a) la fonction defCouleurPinceau va définir la couleur du pinceau à la couleur choisie :

Dans la partie JS de codepen.io ou dans le fichier script.js de Repl.it, on écrit :

function defCouleurPinceau(couleurChoisie)
{
couleurPinceau = couleurChoisie;
}

Il nous faut aussi déclarer notre "variable" couleurPinceau, au début ; on peut décider
que la couleur par défaut est blanc :
var couleurPinceau ='white';

b) la fonction defCouleurPixel va changer la couleur de fond d'un "pixel" (une case de

notre grille), en la définissant à la couleur du pinceau :

function defCouleurPixel(pixel)
{
pixel.style.backgroundColor = couleurPinceau;
}
2) Maintenant qu'on a défini nos 2 comportements, il faut dire ce qui les déclenche :
a) on appelle la fonction defCouleurPinceau quand on clique sur une couleur de la
palette
b) on appelle la fonction defCouleurPixel quand on clique sur une case de la grille

Pour cela on va rajouter onclick="nomDeLaFonction(attribut)" sur les éléments

concernés, où l'attribut est la valeur à utiliser.
a) par exemple, pour la 1e couleur (rouge) de la palette :

<div class="pix_colour" style="background-color: red"

onclick="defCouleurPinceau('red')"></div>
fait que le pinceau prend la couleur rouge quand on clique la couleur rouge de la
palette

b) pour n'importe quelle case de la grille :

<div class="pixel" onclick="defCouleurPixel(this)"></div>

fait que la couleur de fond de la case cliquée ("this" veut dire "celle-là") prend la
couleur du pinceau

3) Il ne reste plus qu'à ajouter / recopier les appels onclick à toutes les couleurs de la
palette (avec la bonne couleur) et à toutes les cases de la grille !

Quel dessin allez-vous faire avec votre éditeur, maintenant ?