Se connecter / S'enregistrer
Votre question

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

Tags :
  • Creation
  • Programmation
Dernière réponse : dans Programmation
17 Février 2009 13:34:26

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 :

  1. var MaClasse = Class.create();
  2. MaClasse.prototype = {
  3. initialize: function (arg) {
  4. this.attribut = arg;
  5. }
  6.  
  7. methode: function (id) {
  8. new Event.observe(id, 'click', function (e) {
  9. this.attribut = id;
  10. });
  11. }
  12. }


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

Autres pages sur : resolu javascript objet evenements

a c 232 L Programmation
20 Février 2009 04:29:51

Salut,

Je vois pas trop ce que tu veux faire avec ta méthode là en fait...
Je vois pas ton but final.
20 Février 2009 11:35:03

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/topic-5-20948-1-resolu-P...

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 :
  1. var CityList = Class.create();
  2.  
  3. CityList.prototype = {
  4.  
  5. //Méthode d'initialisation ; constructeur de la classe
  6. initialize: function (idContainer, idCode, idList) {
  7. //Création des attributs
  8. this.container = $(idContainer);
  9. this.code = $(idCode);
  10. this.idList = idList;
  11. this.value = null;
  12. //Cette ligne permet d'initialiser le conteneur avec une liste vide uniquement si celle-ci n'existe pas déjà !
  13. !$(idList) ? this.reset() : false;
  14.  
  15. //On récupère l'objet dans une variable pour les listeneurs
  16. var o = this;
  17.  
  18. //----------------------------------------------------
  19. // Gestion des évènements sur le champ du code postal
  20. //----------------------------------------------------
  21.  
  22. //Touche de clavier pressée
  23. Event.observe(this.code, 'keydown', function (e) {
  24. var c = this.prototype = CityList.prototype;
  25. c.actionOnKeyboard(Event.element(e), o, true);
  26. });
  27. //Touche de clavier relevée
  28. Event.observe(this.code, 'keyup', function (e) {
  29. var c = this.prototype = CityList.prototype;
  30. c.actionOnKeyboard(Event.element(e), o, false);
  31. });
  32.  
  33. //----------------------------------------------------
  34. },
  35.  
  36. //Action sur le clavier
  37. actionOnKeyboard: function (el, o, onPress) {
  38. //Si l'on est en train de presser la touche...
  39. if (onPress)
  40. // on mémorise la valeur du champ code postal
  41. o.value = el.value;
  42. else
  43. //... sinon (touche relevé), on affiche la liste de villes
  44. o.display(el.value);
  45. },
  46.  
  47. //Affichage de la liste des villes ; requête AJAX au serveur
  48. display: function (v) {
  49. //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...)
  50. //Le reste sert à vérifier si le code postal est bien valide
  51. if (v != this.value) {
  52. if (v.match(/^[0-9]{3,4}0$/) && parseInt(v) >= 1000 && parseInt(v) <= 95880) {
  53. //En attendant la réponse du serveur, un loader remplace la liste déroulante dans le conteneur
  54. this.container.innerHTML = '<img src="image/loader.gif" alt="Loading" />';
  55.  
  56. //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)
  57. new Ajax.Updater(this.container.id, 'getCityList.php', {
  58. method: 'post',
  59. postBody: 'code=' + v + '&id_list=' + this.idList + '&ajax=1'
  60. });
  61. }
  62. else
  63. this.reset();
  64. }
  65. },
  66.  
  67. //Réinitialisation du conteneur (liste déroulante vide et désactivée)
  68. reset: function () {
  69. this.container.innerHTML = '<select id="' + this.idList + '" disabled="disabled"><option></option></select>';
  70. }
  71.  
  72. }

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)
Contenus similaires
a c 232 L Programmation
20 Février 2009 19:55:55

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
  1. var c = this.prototype = CityList.prototype;
  2. c.actionOnKeyboard(Event.element(e), o, true);

par
  1. 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... :) 
21 Février 2009 16:10:17

Citation :

Je suppose que l'on doit pouvoir remplacer
  1. var c = this.prototype = CityList.prototype;
  2. c.actionOnKeyboard(Event.element(e), o, true);


par
  1. 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 ^^")
a c 232 L Programmation
21 Février 2009 17:34:51

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. :) 
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS