Javascript Associative Array Primer Tutorial

Javascript Associative Array Primer Tutorial

Javascript Associative Array Primer Tutorial

Today’s HTML and Javascript web application uses Javascript objects as a way to have associative array thoughts permeate your client side web application logic.

The idea of an associative array has a lot of appeal, in the same way we humans, hopefully, prefer to call each other by our name rather than our number. Don’t feel sorry for the trouble you’re causing the computer thinking in terms of arrays with names rather than numbers … they’ll get over it … but there is a small consideration with massive amounts of data that the computer will do that massive amount of calculation faster using a numerical index on a huge array, rather than an associative indexing system.

Today we have the user create up to 5 tree hierarchies, initialised via

var Questions = [new Object(), new Object(), new Object(), new Object(), new Object()];

this approach that ends up a lot like a linked list. We provide you with a guaranteed reference to the root element of Tree x as Questions[x].Text and the value contained in Questions[x].Text fed through a homespun Javascript function enumis() gets you going so that …

var nextis = eval("Questions[x]." + enumis(Questions[x].Text) + "Next")

… would get you to the next place on the tree … and can you guess you could then go …

nextis = eval("Questions[x]." + enumis(nextis) + "Next")

… to keep going up the tree, perhaps all the way to our green bordered “canopy”. As you can see, to be a friend of Javascript eval() is a very wise move for a huge number and variety of client web application issues and solutions.

HTML display wise what we do is to start with an HTML table and tbody and 5 tr row elements, initially with just 1 td cell (per row) containing the HTML input type=text where the user enters their data. At the HTML body onload event we snapshot this scenario exactly like that, and add into the end of the 1 td cell an HTML div element given an ID (for Javascript DOM purposes). As we build any one tree to be “taller” (in our case, we have right to left “climbers”) that aforesaid mentioned HTML div has its innerHTML property populated with the next HTML input type=text (derivable from that snapshotted first HTML input type=text element of the row) and HTML div element “child” set (of new HTML elements). So you end up with the 1 cell per row, and things are helped to stay “connected” by the CSS float:left property applied to the HTML div elements.

Today’s HTML and Javascript programming source code you could call tree_chalkboard.html has this live run link. We’d like to thank this link for its great advice regarding Javascript objects and their associative array “look” possibilities.

If this was interesting you may be interested in this too.

This entry was posted in eLearning, OOP, Tutorials and tagged , , , , , , , , , , . Bookmark the permalink.

9 Responses to Javascript Associative Array Primer Tutorial

  1. Needed to compose you this bit of note to be able to give many thanks once again just for the remarkable pointers you’ve discussed here. It was certainly unbelievably generous with people like you to make without restraint all that most of us could have distributed for an ebook to help with making some cash for themselves, particularly given that you might well have done it in the event you desired. Those inspiring ideas likewise acted as the easy way to comprehend most people have a similar eagerness just as my personal own to grasp good deal more regarding this condition. Certainly there are numerous more pleasant periods ahead for people who scan through your website.

  2. On this quite subject, I try update my blogs almost like I’m speaking to somebody or talking to that reader directly as I consider it helps engage folks a great deal a lot more than writing content formally especially when my own blog is based around the goings ons, every day thoughts and research about this somewhat controversial concern. I discovered that I nonetheless need to use much more of the strategies you’ve got mentioned in this posting.

  3. Following research a couple of with the weblog posts inside your website now, and I truly like your method of blogging. I bookmarked it to my bookmark internet site record and will probably be checking back soon. Pls have a look at my internet site as effectively and let me know what you believe.

  4. You’ll be able to undoubtedly see your enthusiasm inside the paintings you write. The sector hopes for more passionate writers like you who are not afraid to mention how they believe. At all times follow your heart.

  5. HOME ADVISOR says:

    Some actually fascinating info , effectively written and loosely user genial .

  6. Magnificent beat ! I would like to apprentice whilst you amend your internet site, how could i subscribe for a weblog site? The account helped me a appropriate deal. I had been a little bit acquainted of this your broadcast provided brilliant transparent notion

  7. Your style is unique compared to other folks I’ve read stuff from. Thank you for posting when you have the opportunity, Guess I will just bookmark this page.|

  8. Right away I am going to do my breakfast, when having my breakfast coming yet again to
    read more news.

  9. Do you have a spam problem on this blog; I also am a blogger, and I was wondering your situation; many of us have developed
    some nice methods and we are looking to trade methods with other folks, why not shoot me an e-mail if interested.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>