rattacher une classe Javascript à un élément HTML

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : rattacher une classe Javascript à un élément HTML

Mr Grieves

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 :

<html>
<head>
<title>Titre</title>
<style>
.menuitem {
border: 2px solid;
height: 35px;
width: 150px;
text-align: center;
background-color: #00FF44;
}
</style>
<script language="Javascript">
function MenuItem (text, link) {
this.text = text;
this.link = link;
this.id = link;
this.toString = function () {
return '<div id="' + this.id + '" ' +
'class="menuitem" ' +
'onclick="menuitemHide(this);">' + this.text +
'</div>';
}
this.hide = function () {
this.style.visibility = "hidden";
}
}
function menuitemHide (element) {
element.style.visibility = "hidden";
}
</script>
</head>
<body>
<script language="Javascript">
var item = new MenuItem("texte", "/index.htm" );
document.write(item);
</script>
</body>
</html>

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

Code :

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 :

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...

Publicité

gatsu35

Blablaté par Harko

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

Mr Grieves

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

gatsu35

Blablaté par Harko

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

Mr Grieves

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

gatsu35

Blablaté par Harko

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

Mr Grieves

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à.

masklinn

í dag viðrar vel til loftárása

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

Mr Grieves

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...

masklinn

í dag viðrar vel til loftárása

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

Message cité 1 fois

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

Publicité

gatsu35

Blablaté par Harko

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

j'confirme

Mr Grieves

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

masklinn

í dag viðrar vel til loftárása

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

masklinn

í dag viðrar vel til loftárása

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

Mr Grieves

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 ?

FORUM HardWare.fr

Programmation

HTML/CSS

rattacher une classe Javascript à un élément HTML

Sujets relatifs
Inclure un fichier html en retirant head/body	Caracteres '<' et '>' dans un javascript contenu dans un XSL
protected dans classe template	Javascript : incohérénces entre IE et Firefox
[javascript] Impossible de réduire la taille d'un popup	Probleme classe heritant vector : redéfinition erase()
html ? comprends rien ?!	Membre sur un site en HTML
Redaction de documentation HTML via Intranet	[Résolu][Html/Javascript] Liens dans menu déroulant dynamique
Plus de sujets relatifs à : rattacher une classe Javascript à un élément HTML

Page générée en 0.051 secondes