Tom's Guide > Forum > Programmation > [résolu] Javascript objet et évènements

[résolu] Javascript objet et évènements

Forum Programmation : [résolu] Javascript objet et évènements

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !

Créer un nouveau sujet Répondre

Bas de page Chercher dans ce sujet

Bonjour !

Voila un bon moment qu'en tant que développeur web je travaille avec le langage Javascript mais je ne m'étais encore jamais intéressé à la création de la classe.
J'ai donc essayer de chercher quelques tutos sur le net mais j'avoue que je suis un peux pommé...

Pour créer ma classe j'utilise le framework Prototype.js ainsi :

Code :

var MaClasse = Class.create();
MaClasse.prototype = {
initialize: function (arg) {
this.attribut = arg;
}
methode: function (id) {
new Event.observe(id, 'click', function (e) {
this.attribut = id;
});
}
}

J'ai fait un exemple très simple qui ne fonctionne pas juste pour illustrer le problème : ma ligne "this.attribut = id;" dans la méthode "methode" ne fonctionne pas tout simplement car le "this" ne se réfère plus à mon objet de la classe MaClasse mais à l'objet Event...

Est-ce que quelqu'un saurait comment remédier à ce problème ?

Merci pour vos réponse !

PS : J'ai dû éditer le message car, réflexe de développeur, j'ai voulu indenter mon code en appuyant sur tabulation et ça m'a envoyé le focus sur le bouton "Valider" -__-" et ensuite j'ai dû appuyer sur une mauvaise touche...

Message édité par Bioteck le 20-02-2009 à 14:20:22

Répondre

Inscrivez-vous ou connectez-vous pour masquer ceci.

Salut,

Je vois pas trop ce que tu veux faire avec ta méthode là en fait...
Je vois pas ton but final.

------------------------------ Les dessins des seins ou les desseins des saints ?
Répondre à OmaR

En faisant quelques recherches, j'ai fini par trouver un post sur Alsacréation traitant d'exactement le même problème :

http://forum.alsacreations.com/top [...] ments.html

Pour être plus précis, ce que je cherche à faire c'est l'affichage de villes dans une liste déroulante en fonction d'un code postal saisit dans un champ texte, et tout ça en programmation objet (pour tout simplement pouvoir gérer plusieurs objets).

Grâce à l'exemple posté sur Alsacréation j'ai réussis à trouver une solution à mon problème.
Voilà donc ce que donne cette classe :

Code :

var CityList = Class.create();
CityList.prototype = {
//Méthode d'initialisation ; constructeur de la classe
initialize: function (idContainer, idCode, idList) {
//Création des attributs
this.container = $(idContainer);
this.code = $(idCode);
this.idList = idList;
this.value = null;
//Cette ligne permet d'initialiser le conteneur avec une liste vide uniquement si celle-ci n'existe pas déjà !
!$(idList) ? this.reset() : false;
//On récupère l'objet dans une variable pour les listeneurs
var o = this;
//----------------------------------------------------
// Gestion des évènements sur le champ du code postal
//----------------------------------------------------
//Touche de clavier pressée
Event.observe(this.code, 'keydown', function (e) {
var c = this.prototype = CityList.prototype;
c.actionOnKeyboard(Event.element(e), o, true);
});
//Touche de clavier relevée
Event.observe(this.code, 'keyup', function (e) {
var c = this.prototype = CityList.prototype;
c.actionOnKeyboard(Event.element(e), o, false);
});
//----------------------------------------------------
},
//Action sur le clavier
actionOnKeyboard: function (el, o, onPress) {
//Si l'on est en train de presser la touche...
if (onPress)
// on mémorise la valeur du champ code postal
o.value = el.value;
else
//... sinon (touche relevé), on affiche la liste de villes
o.display(el.value);
},
//Affichage de la liste des villes ; requête AJAX au serveur
display: function (v) {
//Le "v != this.value" permet de vérifier si la valeur du code postal au moment du relachement de la touche du clavier est bien différente de celle mémorisée au moment de la pression, c'est à dire si la valeur du champ a bien changé entre les deux actions (par ex. si l'on avait appuyé sur SHIFT, il n'y aurait pas eu de changement et on enverrait une requête au serveur pour rien...)
//Le reste sert à vérifier si le code postal est bien valide
if (v != this.value) {
if (v.match(/^[0-9]{3,4}0$/) && parseInt(v) >= 1000 && parseInt(v) <= 95880) {
//En attendant la réponse du serveur, un loader remplace la liste déroulante dans le conteneur
this.container.innerHTML = '<img src="image/loader.gif" alt="Loading" />';
//Envoi d'une requête AJAX à un fichier PHP permettant de récupérer les villes correspondant au code postal saisit (la liste des villes est stockée dans une base de données)
new Ajax.Updater(this.container.id, 'getCityList.php', {
method: 'post',
postBody: 'code=' + v + '&id_list=' + this.idList + '&ajax=1'
});
}
else
this.reset();
}
},
//Réinitialisation du conteneur (liste déroulante vide et désactivée)
reset: function () {
this.container.innerHTML = '<select id="' + this.idList + '" disabled="disabled"><option></option></select>';
}
}

La partie qui me posait problème est celle où l'élément (champ de texte code postal) devait interagir avec l'objet de la classe CityList correspondant. En bref, toute la partie que j'ai commenté "Gestion des évènements sur le champ code postal".
J'avoue ne pas avoir très bien saisie la ligne "var c = this.prototype = CityList.prototype" mais je sais qu'elle joue un grand rôle dans la solution au problème ^^

En fin de compte je m'aperçois que le titre que j'ai mis au sujet n'est pas très adapté... "Javascript objet et les évènements" aurait été plus proche du problème mais tant pis...

En espérant que ce sujet puisse resservir à d'autres ! (le Javascript orienté objet est assez délicat)

Message édité par Bioteck le 21-02-2009 à 16:05:58

Répondre à Bioteck

Citation :

J'avoue ne pas avoir très bien saisie la ligne "var c = this.prototype = CityList.prototype" mais je sais qu'elle joue un grand rôle dans la solution au problème ^^

Je suppose que l'on doit pouvoir remplacer

Code :

var c = this.prototype = CityList.prototype;
c.actionOnKeyboard(Event.element(e), o, true);

par

Code :

CityList.prototype.actionOnKeyboard(Event.element(e), o, true);

C'est juste pour avoir accès au prototype de ta classe depuis l'évènement, car comme tu l'avais vu this.prototype te retournait les propriétés de ton évènement et pas de ta classe.

Citation :

le Javascript orienté objet est assez délicat

Ah ça...

Message édité par OmaR le 20-02-2009 à 19:56:13

------------------------------ Les dessins des seins ou les desseins des saints ?
Répondre à OmaR

Citation :

Je suppose que l'on doit pouvoir remplacer

Code :

var c = this.prototype = CityList.prototype;
c.actionOnKeyboard(Event.element(e), o, true);

par

Code :

CityList.prototype.actionOnKeyboard(Event.element(e), o, true);

En effet, ça fonctionne tout aussi bien comme ça. Merci Omar pour cette précision

Sinon, j'ai édité le script car il y avait quelques petites erreurs de syntaxe et d'algorithme (j'avais pas le script sur moi au moment où j'ai posté donc j'ai tout retaper de tête ^^" )

Répondre à Bioteck

En tout cas c'est sympa de revenir poster les réponses que tu as pu trouver.
Désolé de pas avoir pu t'aider.

------------------------------ Les dessins des seins ou les desseins des saints ?
Répondre à OmaR

Créer un nouveau sujet Répondre

Tom's Guide > Forum > Programmation > [résolu] Javascript objet et évènements

Aller à :

Aide |
Règles du forum

Il y a 278 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Page générée en 0,851 secondes

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler

Liens