Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    Indexing in a javascript array

    Hey all,

    I read this tutorial about creating javascript tabs:
    http://www.elated.com/articles/javascript-tabs/

    Now basically there is a tabLinks array (var tabLinks = new Array(). There is a variable called id, which is assigned the value of the href attribute of a link ( we are looping through an array of links and tabLink represents the current link). In the code, there is a line:
    Code:
     "tabLinks[id] = tabLink;
    So id refers to the href attribute value of the link (without a hash) and tabLink is the link itself. tabLinks is the array. My question is are both the attribute and the link itself getting indexed at position 0 of the array, for example? Or is just the link getting indexed? If so, then why have this: [id]? I can't imagine that they are both getting indexed at position 0: [about a]. But if it's just the id getting indexed [about], then why are we assigning the link to this specific index? As you can tell, I'm really confused about how this indexing is working.

    Thanks for any response.

  • #2
    Regular Coder
    Join Date
    Apr 2010
    Posts
    163
    Thanks
    3
    Thanked 25 Times in 25 Posts
    id doesn't refer to an attribute, it is a integer that tells the program where in the array to store tabLink.
    Code:
    id=0;
    tabLink[id]="test"//these two lines have the same effect as tabLink[0]="test"
    id=1
    tabLink[id]="foo"//these two lines are the same as tabLink[1]="foo"
    after running these four lines tablink now is ["test", "foo"]
    the id value tells it were to store "tabLink" in the array

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    I'm not sure how this assigns an integer to id:
    Code:
    var id = getHash(tabLink.getAttribute('href'));
    All getHash does is remove the # from the href attribute.

  • #4
    Regular Coder
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    476
    Thanks
    2
    Thanked 70 Times in 69 Posts
    Ok, the reason you're confused is because that guy isn't actually using an Array there (at least not a numerically indexed one). The reason his code works is because of the fact that an Array is-an Object in JavaScript, and he's assigning properties to the object, not numerical indexes to an Array.

    Now, properties of objects can be set using two operators: the dot operator, or the subscript operator (square brackets). The following are equivalent:
    Code:
    var myObj = new Object();
    myObj.property = "value";
    
    // ...
    
    var myObj = new Object();
    myObj[ 'property' ] = "value";
    
    // ...
    
    var myObj = new Object();
    var propName = 'property';
    myObj[ propName ] = "value";
    So like I said, an Array in JavaScript is-an Object, because it extends Object (just like everything else in JavaScript).
    Code:
    var myArr = new Array();  
    alert( myArr instanceof Object );  // alerts "true"
    And since all objects in JavaScript can have properties, that is why that guy's code works when he assigns the string ID's to the "array". You'll actually notice that if you take his code, and set tabLinks to be just a Object instead of an Array, the code works just the same.
    Code:
    var tabLinks = new Object();

  • #5
    Regular Coder
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    476
    Thanks
    2
    Thanked 70 Times in 69 Posts
    So what ends up happening with this guy's code is that tabLinks becomes an Object with 3 properties: "about", "advantages", and "usage". They can be referred to using both dot and subscript operators:
    Code:
    alert( tabLinks.about );
    
    // or
    
    alert( tabLinks[ 'about' ] );
    
    // or
    
    var id = 'about';
    alert( tabLinks[ id ] );
    Try throwing that code into a function and run that function after the page loads. You can also use a tool like Firebug to show you what variables actually store. After the page loads, type this into the Firebug console:
    Code:
    console.dir( tabLinks );

  • Users who have thanked Gjslick for this post:

    johnmerlino (05-16-2010)

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Thanks do you think this is the most effective way to create tabs like this in pure javascript (not including jQuery)?

  • #7
    Regular Coder
    Join Date
    Feb 2009
    Location
    NJ, USA
    Posts
    476
    Thanks
    2
    Thanked 70 Times in 69 Posts
    It's not a bad implementation. There really is no "most effective" way to do tabs; just use whatever it takes to get the job done. If you don't feel like including a library like jQuery into your page, then that should work fine. Just test it and make sure that it works on all of the browsers.

    However, using a library with a pre-built tabs implementation that has been tried and tested on many different browsers and platforms will probably fair better in the real world.

    -Greg


  •  

    Tags for this Thread

    Posting Permissions

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