SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Object literal syntax

    I'm learning to use Object literal syntax (from the Simply JavaScript book) and some things I don't like or don't get...

    In the code below for the properties feeds and btnExternalFeeds I have to put the object setExternalFeeds in front of each property everytime.

    The code below works, but I like the code below it better; by trying to give the properties global scope. Too bad it doesn't work.


    Code JavaScript:
    var setExternalFeeds = 
    { 
        init: function()
        {       
            setExternalFeeds.feeds = document.getElementById("externalFeeds").getElementsByTagName("div");
            setExternalFeeds.btnExternalFeeds = document.getElementById("BtnExternalFeeds");
     
            if (typeof setExternalFeeds.btnExternalFeeds.addEventListener != "undefined")
            {
                setExternalFeeds.btnExternalFeeds.addEventListener("click", setExternalFeeds.clickListener, false);
            }     
        },
     
        clickListener: function()
        {
            alert(setExternalFeeds.feeds.length);
            setExternalFeeds.btnExternalFeeds.value = "click me";
        }
    };
    // set the page load handler
    if(typeof window.addEventListener != 'undefined')
    {
        // not IE
        window.addEventListener('load', setExternalFeeds.init, false);
    } else {
        // IE
        window.attachEvent('onload', setExternalFeeds.init);
    }

    Code JavaScript:
    var setExternalFeeds = 
    { 
        feeds: "",
        btnExternalFeeds: "",
     
        init: function()
        {       
            feeds = document.getElementById("externalFeeds").getElementsByTagName("div");
            btnExternalFeeds = document.getElementById("BtnExternalFeeds");
     
            if (typeof btnExternalFeeds.addEventListener != "undefined")
            {
                btnExternalFeeds.addEventListener("click", setExternalFeeds.clickListener, false);
            }     
        },
     
        clickListener: function()
        {
            alert(setExternalFeeds.feeds.length);
            setExternalFeeds.btnExternalFeeds.value = "click me";
        }
    };
    // set the page load handler
    if(typeof window.addEventListener != 'undefined')
    {
        // not IE
        window.addEventListener('load', setExternalFeeds.init, false);
    } else {
        // IE
        window.attachEvent('onload', setExternalFeeds.init);
    }

  2. #2
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This line (From your second code snippet):
    Code:
    feeds = document.getElementById("externalFeeds").getElementsByTagName("div");
    ... is referring to a global variable feed -- Not to the objects member-variable. You should use:
    Code:
    this.feeds = document.getElementById("externalFeeds").getElementsByTagName("div");
    ... which presents a new problem. You have assigned the function init to an event handler. When this gets called, the keyword this points to the global object window. To fix this, don't assign etExternalFeeds.init directly, but create a closure instead:
    Code:
    window.addEventListener('load', function () {setExternalFeeds.init(); }, false);
    (and likewise with attachEvent)

    ... and you should of course use this.propertyName for all references to a member property. (Eg.: feed and btnExternalFeeds)

  3. #3
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply kyberfabrikken, but I'm afraid I don't get it... why aren't feeds and btnExternalFeeds properties of the setExternalFeeds object in the code below?

    Code JavaScript:
    var setExternalFeeds = {  
      feeds: "",  
      btnExternalFeeds: "",

    how would you write the code?

  4. #4
    SitePoint Enthusiast SoMBrA's Avatar
    Join Date
    Oct 2007
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!
    Theres nothing there golgotha, kyber is refering the feeds line from the init method:
    Code:
      init: function()
        {       
            feeds = document.getElementById("externalFeeds").getElementsByTagName("div");
            btnExternalFeeds = document.getElementById("BtnExternalFeeds");
    ...
    There, feeds is refering to a global variable not to the object propertie. You should do what kyber told you, use this.propertieName to refer to the feed propertie from the setExternalFeeds object and so on...

    Hope it helps

  5. #5
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so how do I write that?
    Like this:
    Code JavaScript:
    var setExternalFeeds = 
    { 
        this.feeds: document.getElementById("externalFeeds").getElementsByTagName("div"),
        this.btnExternalFeeds: document.getElementById("BtnExternalFeeds"),
     
        init: function()
        { ...

    or like this:
    Code JavaScript:
    var setExternalFeeds = 
    { 
       var  this.feeds = document.getElementById("externalFeeds").getElementsByTagName("div");
        var this.btnExternalFeeds = document.getElementById("BtnExternalFeeds");
     
        init: function()
        { ...

    neither works?

  6. #6
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's my code, which appears to work. But this just doesn't look write to me... Is this how you would write it?

    I would have thought we would declare the properties outsite of the init method then set them inside the init method?

    Code JavaScript:
    var setExternalFeeds = 
    { 
        init: function()
        {       
            this.feeds = document.getElementById("externalFeeds").getElementsByTagName("div");
            this.btnExternalFeeds = document.getElementById("BtnExternalFeeds");
     
            if (typeof this.btnExternalFeeds.addEventListener != "undefined")
            {
                this.btnExternalFeeds.addEventListener("click", setExternalFeeds.clickListener, false);
            }     
        },
     
        clickListener: function()
        {
            alert(setExternalFeeds.feeds.length);
            setExternalFeeds.btnExternalFeeds.value = "click me";
        }
    };
    // set the page load handler
    if(typeof window.addEventListener != 'undefined')
    {
        // not IE
        //window.addEventListener('load', setExternalFeeds.init, false);
        window.addEventListener('load', function () {setExternalFeeds.init(); }, false);
    } else {
        // IE
        //window.attachEvent('onload', setExternalFeeds.init);
        window.attachEvent('onload', function () {setExternalFeeds.init(); });
    }

  7. #7
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I probably wasn't clear; You are declaring the properties correct. What I meant was, that you should use this, when referring to the properties -- Eg. inside the functions.
    So:
    Code:
    var setExternalFeeds = {
      feeds: null,
      init: function() {
        this.feeds = document.getElementById("externalFeeds").getElementsByTagName("div");
      }
    }

  8. #8
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, that does make sense then. My bad.

    2 more questions:

    document.getElementById("externalFeeds").getElementsByTagName("div");

    doesn't that give me all the divs inside of externalFeeds? externalFeeds is a div too. But it doesn't appear to, it's only showing 2 when I'm expenting 12?

    Could you explain this more:
    window.addEventListener('load', function () {setExternalFeeds.init(); }, false);

    you called it a closure - what's that?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,678
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    A1. It's getting the div elements that are contained inside the element called ExternalFeeds.

    If you have more than one element with an id of ExternalFeeds, that's not allowed. Each id must be unique.

    A2. A closure is a function that protects the variables inside it.

    If you had setExternalFeeds.clickListener all by itself, the this keyword would point to its owner, the event that was fired.

    By enclosing it in a function, the owner changes to be the window itself, which is where you want things to be in this situation.

    There's a good tutorial about The This Keyword at quirksmode.org

  10. #10
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Function do not belong to objects in Javascript. You can assign it to an object, but you can reassign it or have it referred from multiple places. The keyword this, therefore doesn't refer to the owner (as it does in class based languages), but instead to the called context. All very confusing, until you get it. There are a couple of references in the Javascript Links & Resources thread, which might help you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •