Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Après un TP, pourquoi ne pas continuer par un autre TP ?
Oh, je sens qu'on est sur la même longueur d'ondes ! Vous allez réaliser un
"logiciel graphique
". Que ce titre ne vous fasse pas trop peur, même si ce TP est plus difficile que le dernier, il ne sera pas infaisable (encore heureux). Avec ce programme, vous n'allez pas faire des merveilles en art graphique, mais vous pourrez dire que c'est de l'abstrait (au cas où vous avez raté votre oeuvre, c'est une super excuse, et en plus ça en jette
).
Dès que vous vous sentez prêts, on y va !
Non, nous n'allons pas créer une chose du type Photoshop, Fireworks ou même Paint. On va faire un truc très basique, mais au moins on peut faire des "dessins" avec. Le principe est simple : il y a un choix de couleurs et beaucoup de cellules (d'un tableau). Une fois que l'on a choisi une couleur, si on clique sur une des cellules, celle-ci change de couleur de fond. Si on assemble plusieurs cellules, on peut dire que cela ressemble à un dessin. Voici un petit exemple de ce que l'on peut faire, ainsi que de "l'interface graphique" du programme.
Vous le voyez bien, ce n'est pas avec ça que vous allez faire un super dessin
. En revanche, c'est un excellent exercice qui reprend beaucoup de choses que l'on a vues ensemble (si ce n'est toutes les choses). Ce TP est assez dur à réaliser, mais si vous avez bien compris, et avez un peu de logique, vous devriez y arriver. Passons aux explications.
Pour la barre d'outils, il faut afficher toutes les couleurs disponibles. Une fois cela fait, moi j'ai créé une variable
couleur, qui contient '
white' (blanc) comme valeur par défaut. Dès que l'on clique sur une couleur, la variable
couleur prend la valeur du nom de cette couleur (si la couleur choisie est le bleu -> la variable
couleur prend la valeur '
blue'). Je vous ai fait un petit dessin pour que vous compreniez bien.
J'espère que ce schéma est assez expressif. Cette variable
couleur sert donc à retenir le choix de la couleur que l'utilisateur a fait. Puis, quand il clique sur une des cellules, sa couleur de fond (
background-color en CSS, et
backgroundColor en javascript) prend pour valeur la variable
couleur.
Et c'est tout ! Je pense que pour vous, c'est suffisant. Si vous voulez apporter des améliorations au programme, je vous montrerai dans la conclusion ce que j'ai fait, et ce que vous pourrez faire
.
"Bonne chance pour la réalisation du script !"
Je reconnais que ce TP était plus difficile que l'autre
. Enfin, vous devriez quand même avoir créé un petit bout du script. Comme au TP précédent, je vous rappelle que si vous avez réussi le TP, votre script peut être différent du mien, car il y a plusieurs manières de coder un programme.
Sans plus attendre, voici la correction.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33 | var couleur = 'white';
/* On crée un tableau avec le nom de toutes les couleurs */
var noms_couleurs = new Array('white','silver','gray','black','red','maroon','lime','green','pink','yellow','olive','blue','navy','fuchsia','purple','aqua','teal','orange');
/* On crée une barre d'outils */
document.write('<fieldset style="display:block;border:2px solid black;background-color:#DDEEDD;">');
document.write('<legend style="font-family:verdana;color:black;font-size:12px;"><b>');
document.write('Barre d´outils</b></legend>');
/* On fait une boucle pour afficher toutes les couleurs */
for(var k = 0;k in noms_couleurs; k++)
{
document.write('<span onclick="couleur=\''+noms_couleurs[k]+'\'" style="border:1px dashed black;cursor:pointer;background-color:'+noms_couleurs[k]+';color:black;"> </span>');
}
document.write('</fieldset>');
/* On affiche toutes les cellules, le tableau et on a fini */
document.write('<table style="border-collapse:collapse;">');
for(var j = 0;j <= 37; j++)
{
document.write('<tr>');
for(var i = 0 ;i <= 100; i++)
{
document.write('<td style="border:1px solid black;cursor:default;height:12px;width:20px;font-size:1px;background-color:white;"');
document.write('onclick="javascript:this.style.backgroundColor=couleur;"></td>')
}
document.write('</tr>');
}
document.write('</table>');
|
J'espère que ce TP vous a plu. J'avais créé ce programme il y a quelques temps, et, le trouvant assez bien (pour les notions abordées), j'avais pour projet de le placer en TP si un jour je décidais de créer un tutoriel sur le Javascript, ce qui est désormais fait !
Enfin, je n'avais pas fait que ça. Des fonctions pour faire quelques autres trucs en plus étaient mises en place dans le programme. Vous pouvez le tester ; cependant je vous préviens, je l'avais codé il y a un temps et je codais un peu n'importe comment. Ne soyez pas étonnés de voir un gros morceau de code, pleins de mots en anglais et des notions que vous n'avez pas forcément vues.
Mais je n'ai pas tout fait dans cette version. Vous pouvez très bien créer une fonction qui tracera des lignes, des carrés, rectangles ou autre, suivant votre imagination et vos idées
.
Bonne chance à ceux qui veulent améliorer le programme, et n'hésitez pas à me poster un MP pour me montrer vos améliorations ! Attention, montrer des améliorations ne veut pas dire demander de l'aide, car il y a une erreur dans le script que vous ne trouvez pas. Pour cela, il y a le
forum.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
406 Zéros connectés |
8 requêtes |
0.0227s (0.0103s)
