IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Objet : modifier des attributs lors d'un évènement


Sujet :

JavaScript

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    79
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2005
    Messages : 79
    Par défaut Objet : modifier des attributs lors d'un évènement
    Bonjour,

    J'essaye de mettre à jour une variable lorsque je capture un click sur la page.

    J'ai créé la classe suivante :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
     
    function test()
    {
        this.j = 0;
     
        function init()
        {
            window.onclick = this.inc;
        }
     
        function inc()
        {
            this.j += 1;
        }
     
        this.inc = inc;
        this.init = init;
    }
    Puis je teste avec le code suivant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    t = new test();
    t.init();
    t.inc();
    t.inc();
    Lorsque, avec firebug, je regarde mon objet t, je vois bien que j a été incrémenté deux fois lors des appels à la main à inc, mais quand je clique sur la page, rien ne se passe (pourtant, si je met un alert dans ma fonction inc, je vois qu'elle est bien appelée lors d'un clic sur la fenêtre).


    Sauriez vous pourquoi, et surtout, sauriez vous comment faire pour que ça ait le comportement que je veux ?


    Merci d'avance,

    iLUV

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Salut,
    Lorsque tu définis la fonction comme tu le fais puis que tu l'appelles, le code de la fonction est exécuté puis la fonction termine son exécution et son contexte disparait.
    Pour pouvoir affecter des comportements spécifiques, tu dois déclarer ta fonction comme une variable, dont le code ne sert qu'à l'initialisation. Les fonctions définies à l'intérieur ne seront disponibles qu'à la création. Pour pouvoir y appliquer des fonctions en dehors du constructeur, il faut les définir comme méthodes du prototype de ta variable. Enfin, quand tu écris :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function init()
    {
        window.onclick = this.inc;
    }
    le this dans la fonction correspond au this du contexte de cette fonction, pas de celui du constructeur, pour pallier à ce problème, on passe habituellement par une variable locale récupérant le contexte du constructeur, souvent appelée that :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    var that = this;
    function init()
    {
        window.onclick = that.inc;
    }
    Ceci est possible car même si la référence à this est perdue, en revanche la fonction appelée hérite du contexte de la fonction appelante (au passage, c'est la raison pour laquelle le contexte de l'objet window est global puisque toutes les fonctions en héritent).
    Donc, pour résumer :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var test = function()
    {
        this.j = 0;
        var that = this;
        function init()
        {
            window.onclick = that.inc;
        }
        init();
    }
    test.prototype.inc = function(){
        this.j++;
    }
    Dans cet exemple, la fonction init() est lancée à chaque création d'une instance test et au click, la méthode inc de l'objet test est appelée.
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    79
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2005
    Messages : 79
    Par défaut
    Bonsoir,

    Merci pour cette rapide réponse, je me doutais un peu qu'il sagissait d'une histoire de contexte.

    Je ne connaissait pas du tout cette méthode pour écrire des classes. A vrai dire, j'ai plus l'habitude d'utiliser des frameworks, ce qui m'évite assez souvent d'avoir à faire ce genre de choses.

    Je comprends le concept de la solution que tu proposes, mais par contre, je ne comprends pas pourquoi ça ne marche pas.

    Firebug ne m'affiche aucune erreur, mais j'ai beau cliquer, le j reste à 0.

    Voici ce que je fais :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
     
    var test = function()
    {
        this.j = 0;
        var that = this;
        function init()
        {
            window.onclick = that.inc;
        }
        init();
    }
    test.prototype.inc = function(){
        this.j++;
    }
     
    t = new test();
    Puis je clique comme un fou sur la page et j'inspecte mon objet t avec firebug, qui me dit que le j est toujours à 0.

    Il me semble que init n'est pas appelé.

    Un idée ?

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Oui, j'ai été un peu vite
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    test.prototype.inc = function(){
        this.j++;
    }
    Ca c'est pas terrible
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    test.prototype.inc = function(){
        this.j += 1;
    }
    devrait mieux le faire
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    79
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2005
    Messages : 79
    Par défaut
    Citation Envoyé par Bovino Voir le message
    Oui, j'ai été un peu vite
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    test.prototype.inc = function(){
        this.j++;
    }
    Ca c'est pas terrible
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    test.prototype.inc = function(){
        this.j += 1;
    }
    devrait mieux le faire
    nope

    Je pensais que la méthode init n'était pas appelée, mais en fait avec le code suivant je vois qu'elle l'est :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
     
    var test = function()
    {
        this.j = 0;
        var that = this;
     
        function init()
        {
            alert('init');
            window.onclick = that.inc;
        }
     
        init();
    }
    test.prototype.inc = function(){
        alert("j: " + this.j);
        this.j += 1;
    }
     
    t = new test();
    Par contre, lorsque je clique sur la page, le message de l'alert m'indique que j est undefined.

    J'ai essayé avec that pour voir, mais là c'est that qui est undefined.

  6. #6
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    C'est normal :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    window.onclick = that.inc;
    l'objet window ne gère pas l'événement onclick, il faut passe par l'objet document
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.onclick = that.inc;
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    79
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2005
    Messages : 79
    Par défaut
    Citation Envoyé par Bovino Voir le message
    C'est normal :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    window.onclick = that.inc;
    l'objet window ne gère pas l'événement onclick, il faut passe par l'objet document
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.onclick = that.inc;
    Toujours pas

    La méthode inc est bien appelée (je le vois avec mon alert), c'est juste que pour une raison qui m'échappe, j n'est pas considéré comme défini (même en remplacent window par document).

    edit:

    Bon, ça marche maintenant, je ne sais pas exactement quel changement à fait que ça soit le cas, mais je suis content.

    Voici mon code final, qui permet de gérer d'accéder aux attributs d'un objet javascript lors de la gestion d'un évènement :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    var c = function()
    {
        var that = this;
        this.t = "kikou";
        this.j = 1;
     
        document.onclick = function() {
            that.dikikou();
        }
     
        this.dikikou = function() {
            this.a.push(this.j);
            this.j += 1;
            alert(this.t + " " + this.j);
        }
    }
    Merci beaucoup pour ton aide Bovino, tu m'a permis de découvrir un aspect de javascript qui m'était assez méconnu.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 10/08/2012, 13h47
  2. Bases objet : récupérer des attributs de plusieurs objets
    Par olivier57b dans le forum Décisions SGBD
    Réponses: 3
    Dernier message: 17/06/2012, 21h30
  3. Réponses: 21
    Dernier message: 16/01/2008, 15h47
  4. modifier des objets placés en session?
    Par gregounet dans le forum Struts 1
    Réponses: 7
    Dernier message: 02/08/2007, 17h43
  5. Réponses: 1
    Dernier message: 19/11/2006, 00h53

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo