11548 sujets

JavaScript, DOM et API Web HTML5

L'objet canvas

Viens d'acquérir et parcourir avec grand plaisir le livre HTML 5 de R Rimelé. Découverte de nouveaux horizons dans la programmation web ! Regret toutefois que ce livre ne comporte pas d'index où retrouver rapidement les instructions recherchées !

Habitué à la programmation d'applets java, j'ai immédiatement voulu tester la balise <canvas>, et suivi les instructions du livre.

Mais rencontre un problème imprévu sur mon premier essai :

Voici mon code html, index.htm, qui place un canvas et un text.

<html>
<head>
<title>Toledia</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="principal.css" type="text/css">
<script language= "JavaScript" src= "canevas.js" >
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div align="center">
<p>Toledia</p>
<p>&nbsp;</p>
<canvas id = "diapo" width = "500" height = "54" ></canvas>
<p>&nbsp;</p>
<form name="form1" method="post" action="">
<input type="text" name="edit" id = "edit">
</form>
</div>
</body>
<script>init()</script>
</html>

Code javascript associé (canevas.js)

//canevas.js

var ctContact;
var canevas;

function init ()
{
canevas = document.getElementById ("diapo");
ctContact = canevas.getContext ("2d");
var x = canevas.width;
var y = canevas.height;
ctContact.fillStyle = "#48d1cc";
ctContact.fillRect (0,0,x,y);
var edit = document.getElementById ("edit");

canevas.addEventListener ("click",choix,false);
canevas.addEventListener ("mousemove",coordonnees,false);
}

function coordonnees (e)
{
document.getElementById ("edit").value = e.offsetX;
}

function choix (e)
{
document.getElementById ("edit").value = "choix " + e.offsetX;
}

Cet essai est visible à l'adresse :
http://www.icem-freinet.net/toledia
fonctionne avec Chrome et Safari.

Enigme :
Pourquoi la fonction coordonnees marche-t-elle, mais pas la fonction choix ?

Ne peut-on pas déclarer deux addEventListener associés au même objet ?

Merci de m'éclairer !
Tout fonctionne avec Firefox à condition de remplacer offsetX par clientX.
Fonctionne aussi parfaitement avec IE9 dans l'état actuel mais pas avec clientX.
Aucune différence de fonctionnement sur Chrome selon offsetX ou clientX.

Si tu retires ton deuxième eventListener (mousemove) le premier fonctionne (click).
On pourrait donc croire que le deuxième eventListener écrase le premier mais j'ai ensuite essayé d'inverser leur ordre de déclaration et j'ai le même résultat : s'il y a un eventListener de déclaré pour les mouvements de la souris, celui pour le clic ne fonctionne pas.

Si tu crées deux canvas tu peux attribuer un eventListener sur un canvas, et l'autre pour l'autre canvas les deux fonctionneront.

Enfin bref tout ça pour dire que je n'ai pas la réponse à ton problème, j'ai d'ailleurs arrêté de m'intéresser à canvas depuis un moment déjà, à cause de ce genre d'impasses.
Administrateur
Bonjour, je suis l'auteur du livre, et je suis un peu ému par le compliment, mais aussi troublé par le code HTML que je vois dans le premier post : celui-ci n'est pas tout à fait propre, il date même de l'ère pré-HTML4 ! Donc si je peux me permettre quelques remarques sur des pratiques qui sont désuètes depuis une dizaine d'années :

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

C'est loin de ce qu'on recommande en HTML5 :
<meta charset="UTF-8">


<script language= "JavaScript" src= "canevas.js" ></script>

Aïe ça pique, l'attribut language est à oublier. À la limite on peut tolérer un type="text/javascript" sur cette balise.

<body bgcolor="#FFFFFF" text="#000000">

<div align="center">

Tous ces attributs n'existent plus : bgcolor, text et align sont totalement remplacés par les feuilles de style, c'est-à-dire par les propriétés background-color, color, et text-align. Deux générations de langage sont passées par là, il faut absolument oublier les premières.

J'espère donc que tu n'as pas encore lu les premiers chapitres et que cela viendra dans un deuxième temps Smiley cligne Mais il faut y penser sérieusement, la base de départ est importante, un bon code valide est la première étape vers le succès.

En ce qui concerne la réponse concrète à la question : les deux fonctions sont bien exécutées, je les ai testées de mon côté. Pour s'en rendre compte il suffit d'utiliser une console JavaScript (l'outil essentiel quand on se lance dans ce genre de développement). Il y en a une dans Firebug, et une dans les outils de développement de Chrome (Ctrl+Shift+J).

En ajoutant un petit console.log("coordonnees"); dans la première fonction et un console.log("choix") dans la deuxième, on voit bien qu'elles sont exécutées l'une à la suite de l'autre, dans le cadre du clic sur le canvas.

Ce qui signifie que l'événement "click" est bien déclenché, mais suivi immédiatement par le remplacement des coordonnées, ce qui fait que l'on a pas le temps de voir le résultat attendu dans l'input. Il suffirait d'afficher le résultat dans la console ou dans un autre champ pour conserver le résultat.
Ok pour les remarques concernant le code html ! Je travaille avec Dreamweaver acheté en 2000. Il date un peu, d'accord ! Mais, en général, j'écris surtout du php !
J'ai lu le début du livre, le début du début, et en effet, le décalage avec mon ancien et vénérable dreamweaver me fait bien marrer !
Mais je voulais surtout tester le javascript. En fait, ça marche, j'aurais dû placer deux zones text au lieu d'une.

Merci pour les réponses !

Un autre petit problème qui m'énigme. Les balises <frame> et <frameset> sont données obsolètes et à remplacer par <iframe>.
Je vois bien le remplacement de <frame>, mais <frameset> ? Ou sont les attributs rows, cols,etc.. ?
Administrateur
Tout simplement : il faut oublier les frames/framesets. Cela pose de nombreux problèmes de navigation et d'accessibilité.
D'autant plus avec PHP, qui permet largement de les remplacer à bien meilleur escient.
Sujet clos
Aller à