1. Mise en place
- créer un dossier TP1_JS,
- ouvrir un éditeur de code comme Notepad,
- créer un premier fichier, l’enregistrer avec le nom index.html dans votre dossier,
- créer un second fichier, l’enregister avec le nom programme.js,
- copier le code ci-dessous dans le fichier index.html et enregistre le à nouveau
<!-- on déclare le document comme un document de type html5 -->
<!DOCTYPE html>
<!-- on précise la langue utilisée -->
<html lang="fr" >
<!-- le head précise différents éléments importants de la page -->
<head>
<!-- précise qu'on utilise l'alphabet occidental codé sur 8 octects -->
<meta charset="UTF-8">
<title>Dessiner et programmer avec canvas_TP1</title>
<!-- On charge le script js en suivant le chemin indiqué par la source src -->
<script src="programme.js"></script>
</head>
<!-- le body contient les éléments de notre page html -->
<!-- la fonction js draw() est appelée au chargement de la page -->
<body onload="draw()">
<header>
<h1>Mon premier TP d'interaction d'une page HTML avec du javascript</h1>
</header>
<section>
<article>
<canvas id="espace_de_dessin" width="400" height="400"></canvas>
</article>
<article>
Cliquer au dessus.
</article>
</section>
<footer>TP 1 avec l'élément canvas et des interactions avec le client grâce au JS.</footer>
</body>
</html>- copier et coller dans le fichier programme.js le code suivant et enregistrer le :
// permet de mettre des commentaires non exécutés par le js
// déclaration d'une fonction en JS
// attention aux {} qui délimitent celle-ci
// chaque commande JS se termine par ;
function draw(){
alert("Ma fonction est effectuée au chargement de la page.");
}- ouvrir le fichier index.html avec le navigateur de votre choix,
- réduire les fenêtres de votre navigateur et de votre éditeur de code de façon à les avoir l’une à côté de l’autre pour travailler plus facilement.
2. Variables : déclaration, variable locale et variable globale.
En javascript, les variables se déclarent par l’instruction var.
Comme en python, elles ne sont pas typées lors de leur déclaration.
Modifier votre script js comme suit, enregistrer le et actualiser votre navigateur pour observer le changement.
function draw(){
var a=5; // variable locale
alert(a);
}puis
var a=4; // variable globale
function draw(){
alert(a);
}et enfin :
var a="premiere valeur"; // variable globale
function draw(){
a="autre valeur"
alert(a);
autre_appel()
}
function autre_appel(){
alert(a)
}
alert(a);et enfin enfin :
var a="premiere valeur"; // variable globale
function draw(){
a="autre valeur"
alert(a);
autre_appel()
}
function autre_appel(){
alert(a)
}
alert(a);
autre_appel();3. Gestion d’événements
En javascript on peut attacher aux éléments des écouteurs d’événement qui pourront déclencher des fonctions selon les besoins.
On peut préciser le type d’événements que l’on désire attacher, et même en attacher différents à un même élément.
A. modification du html
Modifier le html comme suit :
<!-- le head précise différents éléments importants de la page -->
<head>
<!-- précise qu'on utilise l'alphabet occidental codé sur 8 octects -->
<meta charset="UTF-8">
<title>Dessiner et programmer avec canvas_TP1</title>
<!-- On charge le script js en suivant le chemin indiqué par la source src -->
<script src="programme.js"></script>
</head>
<!-- le body contient les éléments de notre page html -->
<body>
<header>
<h1>Mon premier TP d'interaction d'une page HTML avec du javascript</h1>
</header>
<section>
<article>
<canvas id="espace_de_dessin" width="400" height="400"></canvas>
</article>
<article id="bouton">
Cliquer au dessus.
</article>
</section>
<footer>TP 1 avec l'élément canvas et des interactions avec le client grâce au JS.</footer>
</body>
</html>et le js :
var mon_elt=document.getElementById("bouton");
mon_elt.addEventListener("mousedown",dessin,false);
// attention au paramètre evt nécessaire pour le passage de l'événemnt
function dessin(evt){
alert("vous avez cliqué");
}enregistrer le html et le js et actualiser votre navigateur, utiliser les outils de développement web du navigateur pour déterminer la nature de l’erreur empêchant le fonctionnement de votre programme.
Le programme pose un problème de fonctionnement :
- il est chargé avant le chargement total de votre page html,
- donc la variable mon_elt désigne un élément qui n’existe pas encore …
Pour résoudre ce problème :
1ere solution : faire appel au script après le chargement de la page.
Pour cela on peut appeler le script à la fin de la page html en passant la ligne 11 :
<script src="programme.js"></script>à la fin du document html :
</body>
</html>
<script src="programme.js"></script>2eme solution :
On la verra plus tard, elle consiste à utiliser la propriété onload de l’élément body et à déclarer une fonction qui sera appelée lorsque la page html est totalement chargée.
Exercice 1
- Donner l’id « mon_espace_de_dessin » à l’élément canvas,
- modifier le js pour que la fonction dessin se déclenche lorsque la souris passe au dessus de l’élément canvas ( on utilisera l’événement mousemove.
4. Un peu de dessin
Copier coller les codes html et js suivants :
<!DOCTYPE html>
<html lang="fr" >
<head>
<meta charset="UTF-8">
<title>Dessiner et programmer avec canvas_TP1</title>
</head>
<body>
<header>
<h1>Mon premier TP d'interaction d'une page HTML avec du javascript</h1>
</header>
<section>
<article>
<canvas id="espace_de_dessin" width="400" height="400"></canvas>
</article>
<article id="bouton">
Cliquer au dessus.
</article>
</section>
<footer>TP 1 avec l'élément canvas et des interactions avec le client grâce au JS.</footer>
</body>
</html>
<script src="programme.js"></script>var mon_elt=document.getElementById("espace_de_dessin");
mon_elt.addEventListener("mousemove",dessin,false);
// attention au paramètre evt nécessaire pour le passage de l'événement
// on déclare un espace de dessin 2d
var ctx = mon_elt.getContext("2d");
function dessin(evt){
// on récupère les coordonnées de la souris dans le canvas
var mousePos = getMousePos(mon_elt, evt);
x=mousePos.x;
y=mousePos.y;
// on dessine un disque
ctx.beginPath();
ctx.fillStyle="rgb(100,19,50)";
ctx.arc(mousePos.x, mousePos.y, 15, 0, 2*Math.PI);
ctx.fill();
}
// fonction qui détermine la position de la souris par rapport à la page et
// par rapport à la position du canvas dans la page
// x et y sont alors les coordonnées de la souris par rapport à l'espace du canvas
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}Tester ce nouveau programme avec votre navigateur.
Exercice 2
Modifier le html pour agrandir votre espace de dessin.
Modifier la couleur et la taille du cercle de dessin.
4. Améliorer l’interaction en ajoutant des boutons pour l’utilisateur.
Copier coller les codes html et js suivants :
<!DOCTYPE html>
<html lang="fr" >
<head>
<meta charset="UTF-8">
<title>Dessiner et programmer avec canvas_TP1</title>
</head>
<body>
<section>
<article>
<canvas id="espace_de_dessin" width="400" height="400"></canvas>
</article>
<article>
<input id="bouton_rouge" type="button" value="rouge">
<input type="button" value="vert">
<input type="button" value="bleu">
</article>
</section>
</body>
</html>
<script src="programme.js"></script>var mon_elt=document.getElementById("espace_de_dessin");
mon_elt.addEventListener("mousemove",dessin,false);
// attention au paramètre evt nécessaire pour le passage de l'événemnt
bouton_r=document.getElementById("bouton_rouge");
bouton_r.onclick=changer_rouge;
// on déclare un espace de dessin 2s
var ctx = mon_elt.getContext("2d");
// on declare une couleur
var rouge=5;
var vert=19;
var bleu=50;
function dessin(evt){
// on récupère les coordonnées de la souris dans le canvas
var mousePos = getMousePos(mon_elt, evt);
x=mousePos.x;
y=mousePos.y;
// on dessine un disque
ctx.beginPath();
ctx.strokeStyle=couleur_rvb(rouge,vert,bleu);
ctx.arc(mousePos.x, mousePos.y, 15, 0, 2*Math.PI);
ctx.stroke();
}
function changer_rouge(){
rouge+=10;
alert(rouge);
}
// fonction qui retourne une chaine de caractere "rgb(r,v,b)
// on convertit un entier n en str avec la methode n.toString()
function couleur_rvb(r,v,b){
var couleur="rgb("+r.toString()+","+v.toString()+","+b.toString()+")";
return couleur;
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}Exercice 3
Analyser le code html et le code js.
On a ajouté une fonction sur le bouton rouge permettant d’accentuer ce canal.
Après avoir testé ce bouton rouge :
– supprimer le message alert lié à la fonction,
– ajouter les mêmes fonctions aux boutons vert et bleu.