rattacher une classe Javascript à un élément HTML

rattacher une classe Javascript à un élément HTML - HTML/CSS - Programmation

Marsh Posté le 03-03-2006 à 22:11:51    

Salut la compagnie,
 
J'ai récemment terminé la programmation en Javascript d'un menu style fichier/édition/... d'une application windows (avec des listes qui se déroulent et se renroulent, et tout et tout :wahoo: ). Tout est possible en Javascript "classique", mais comme je viens d'apprendre que l'on pouvait créer des classes Javascript, mais le petit geek que je suis s'est senti profondément meurtris au plus profond de son âme :( .
 
Je me suis donc lancé le défi de programmer le même menu, mais dans un style orienté objet.
Je commence donc tout logiquement par créer, entre autres, une classe MenuItem (qui représentera chaque case cliquable du menu) ainsi qu'une fonction hide() pour s'échauffer.
 
On a donc le code suivant :

Code :
  1. <html>
  2. <head>
  3.  <title>Titre</title>
  4.  <style>
  5.   .menuitem {
  6.    border: 2px solid;
  7.    height: 35px;
  8.    width: 150px;
  9.    text-align: center;
  10.    background-color: #00FF44;
  11.   }
  12.  </style>
  13.  <script language="Javascript">
  14.   function MenuItem (text, link) {
  15.    this.text = text;
  16.    this.link = link;
  17.    this.id = link;
  19.    this.toString = function () {
  20.     return '<div id="' + this.id + '" ' +
  21.            'class="menuitem" ' +
  22.         'onclick="menuitemHide(this);">' + this.text +
  23.         '</div>';
  24.    }
  26.    this.hide = function () {
  27.     this.style.visibility = "hidden";
  28.    }
  29.   }
  31.   function menuitemHide (element) {
  32.    element.style.visibility = "hidden";
  33.   }
  34.  </script>
  35. </head>
  37. <body>
  38.  <script language="Javascript">
  39.   var item = new MenuItem("texte", "/index.htm" );
  40.   document.write(item);
  41.  </script>
  42. </body>
  43. </html>


 
Pour l'instant je ne teste pas la méthode de la classe, mais seulement une fonction test menuitemHide() :

Code :
  1. onclick="menuitemHide(this);"


 
Comme vous pouvez le voir en testant ce code, tout marche comme prévu, quand on clique sur le rectangle, il disparaît.
 
 
Voilà donc ce que j'aimerais pouvoir faire : appeler la méthode hide() de la façon suivante :

Code :
  1. onclick="this.hide();"


 
Bien entendu ça ne marche absolument pas, et je me prend un très logique "cette méthode n'est pas gérée par cet objet, bla bla bla", bien normal vu que l'élément HTML <div> n'est nulle part rattaché à la classe MenuItem.
Voilà donc ma question : comment faire pour rattacher un élément HTML à une classe Javascript, afin de pouvoir réaliser un appel de méthode sur un évènement type "onclick" ?
 
 
Je ne sais même pas si c'est possible, ça m'a l'air un problème assez hardu, mais pouvoir programmer en objet faciliterait largement la tâche.
Alors si quelqu'un a une idée...

Reply

Marsh Posté le 03-03-2006 à 22:11:51   

Reply

Marsh Posté le 04-03-2006 à 08:18:41    

Je t'arrête tout de suite :  
§§§§§§§§§ON NE MET JAMAIS DE JAVASCRIPT A L'INTERIEUR D'UNE PAGE§§§§§§§§
 
on attaque un menu en HTML avec du javascript, mais on ne fait pas comme tu viens de faire
 
de plus tu utilises la propriété visibilty, alors que display est plus approprié
 
tiens un exemple :  
http://gatsu.ftp.free.fr/html/Exem [...] cence.html

Reply

Marsh Posté le 04-03-2006 à 10:08:04    

On ne met pas de Javascript à l'intérieur d'une page ? Tu veux dire dans <body> ? Je veux bien, mais pourquoi donc ?
 
Enfin, j'ai regardé le code source de la page (le menu que je veux faire n'est pas une arborescence, mais ça pourrait m'aider quand même) et essayé de comprendre le fonctionnement... mais vu la masse de lignes, si tu pouvais commencer par m'expliquer un exemple simple du principe utilisé, ça m'aiderait bien :).
 
Par contre aucune trace de classe Javascript dans le code...


Message édité par Mr Grieves le 04-03-2006 à 10:09:08
Reply

Marsh Posté le 04-03-2006 à 10:21:24    

document.write ca n'existe plus, on attaque les élément par des fonctions du DOM
document.getElementById et autres trucs du genre

Reply

Marsh Posté le 04-03-2006 à 12:59:41    

document.getElementById() est une des fonctions utilisées dans le code de mon menu déjà fonctionnel. Ce que je voulais justement savoir, c'est si c'était possible d'en programmer un dans un style différent, notamment en orienté objet.
 
Autrement, je vais quand même me renseigner sur ce type de fonctions (http://giminik.developpez.com/arti [...] -matieres/) que je ne connais pas très bien.


Message édité par Mr Grieves le 04-03-2006 à 13:00:22
Reply

Marsh Posté le 04-03-2006 à 13:02:42    

Juste un conseil :  
SI quelqu'un va sur ton site et qu'il est 100% en javascript
et que cette personne a désactivé le javascript, comme il fait pour naviguer sur ton site ?
 
Moi mon menu comme je te l'ai présenté est l'idéal
un menu en full HTML, une couche de CSS pour styler le bestiau
et une petite touche de Javascript pour le rendre dynamique

Reply

Marsh Posté le 04-03-2006 à 14:14:51    

Merci du conseil, c'est effectivement une bonne méthode.
Mais de toute façon le menu est un module de navigation additionnel, on peut très bien parcourir toutes les pages sans lui, donc pas de soucis.
 
Non en fait c'est juste que j'aime bien programmer en objet, je trouve ça plus intuitif et plus facile à structurer (normal, c'est fait pour ça tu mdiras), donc faire un menu comme ça c'est plus à titre personnel, vu que j'ai une version qui fonctionne déjà.

Reply

Marsh Posté le 04-03-2006 à 14:25:43    

les éléments HTML sont déjà liés à des objets JS hein, c'est le principe même du DOM [:pingouino]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-03-2006 à 18:03:43    

Euh... bah oui je sais bien.
Ce que je voudrais, ça serait les rattacher à une classe/objet que j'aurai moi-même créé, rien à voir...

Reply

Marsh Posté le 04-03-2006 à 18:21:50    

Oui mais s'tu veux ça n'a aucun intérêt [:pingouino]
 
Et en plus ta manière de faire est extrèmement crade [:pingouino]

Message cité 1 fois

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-03-2006 à 18:21:50   

Reply

Marsh Posté le 04-03-2006 à 18:25:27    

masklinn a écrit :

Oui mais s'tu veux ça n'a aucun intérêt [:pingouino]
 
Et en plus ta manière de faire est extrèmement crade [:pingouino]


j'confirme

Reply

Marsh Posté le 04-03-2006 à 19:10:26    

Oui c'est vrai, programmer en objet n'a aucun interêt.
D'ailleurs pourquoi avoir créé le C++ et les notions objets, le C était largement suffisant n'est-ce pas ?
 
Et pour le crade, j'aimerais bien avoir une justification un peu plus poussée, parce qu'à part avoir créé une classe, déclaré une référence et fait un horriblissime document.write() (brr, j'en tremble encore) dans tout ce qu'il y a de plus basique, j'ai pas l'impression d'avoir fait grand chose.
Et qui plus est, c'est un code expérimental pour me faire la main sur le Javascript objet.
 
Certes j'ai des trucs à apprendre, sinon je serais pas là ici.
Alors certes, je dois un peu trop programmer en Javascript dans le même style que j'emploierai en Java (comme je le dis c'est expérimental) mais en quoi serait-ce une erreur ? Un language objet est un language objet, non ?
 
Alors balancer un "ça n'a aucun interêt, tu codes comme un porc" sans même m'expliquer pourquoi... du coup c'est plutôt ton post qui me paraît inutile, vois-tu... [:pingouino]
 
 
Je rappelle donc ma question : comment faire pour rattacher un élément HTML à une classe Javascript, afin de pouvoir réaliser un appel de méthode sur un évènement type "onclick" ?
Si c'est pas la bonne façon d'utiliser les classes, je veux bien une autre suggestion.
 
Si ce n'est pas possible d'utiliser les classes sans même pouvoir accéder aux éléments HTML autrement que part les ID, name et compagnie, je me poserais bien des questions sur l'utilité de la couche objet du Javascript...

Message cité 1 fois
Reply

Marsh Posté le 04-03-2006 à 19:30:32    

Mr Grieves a écrit :

Et pour le crade, j'aimerais bien avoir une justification un peu plus poussée, parce qu'à part avoir créé une classe, déclaré une référence et fait un horriblissime document.write() (brr, j'en tremble encore) dans tout ce qu'il y a de plus basique, j'ai pas l'impression d'avoir fait grand chose.


Mélange entre le contenu (HTML) et le comportement (Javascript), création d'un machin inutilisable sans JS, document.write

Mr Grieves a écrit :

Un language objet est un language objet, non ?


Hum... non?

Mr Grieves a écrit :

Je rappelle donc ma question : comment faire pour rattacher un élément HTML à une classe Javascript, afin de pouvoir réaliser un appel de méthode sur un évènement type "onclick" ?


Mais bon sang, quel intérêt une usine à gaz pareille peut bien avoir?
 
Une node est déjà un objet, pourquoi rajouter une couche par dessus?

Mr Grieves a écrit :

Si ce n'est pas possible d'utiliser les classes sans même pouvoir accéder aux éléments HTML autrement que part les ID, name et compagnie, je me poserais bien des questions sur l'utilité de la couche objet du Javascript...


[:pingouino]
 
Renseigne toi sur le dom, merci


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-03-2006 à 19:32:49    

Et puis arrête de parler de classes, il n'y a pas de classes en javascript, il y a des prototypes.


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-03-2006 à 19:48:01    

Bah voilà, un peu d'argumentation, c'était pas si dur que ça ?
 
Je m'en vais de ce pas me renseigner sur le DOM, et potasser la page sus-citée sur les fonctions qui s'y rattachent.
 
J'appelle ça une classe de la même façon que beaucoup d'autres documents appellent ça des classes. Mais si certains racontent des conneries, c'est quand même pas de ma faute, parsembleu. Et je peux pas deviner.
 
Mais franchement, un peu d'aimabilité ça te couperait la bite ou quoi ?
J'ai fait un document.write, ok, mais bon, c'est pas comme si j'avais violé ta soeur, non plus, hein ?

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed