I don’t often write about programming, but times are changing, so perhaps I should change too. And, rather than wearing out the buzzword, I wanted to walk through some tricks I picked up while re-learning how to program in ‘Web 2.0.‘ I’m very hands on, so rather then picking up another server language, ie: diamonds on wheels, I wanted to cut right to the chase and learn or re-learn JavaScript.

Let me start by saying I am not a JavaScript programmer. My strengths lie in PHP/MySQL, so anytime I wanted a variable, I had to goto the server to get it, or pass it via GET, again going to the server. The whole concept of never refreshing the page was a huge one to overcome, so hopefully I can help a few people out there. Most of the concepts described use Prototype in some shape or form.

Let’s just jump right into the deep end. I’m going to make some assumptions. Maybe you are coming from a similar background and your JavaScript ability has been primarily used to sprinkle some snazz to your form or add an interactive button to something minor. With Web2.0 you really can’t stop short. It’s an all or nothing commitment, and anything less will just look like someone broke the salt shaker over sprinkling.

Let’s say you wanted to build an option list of countries. This has been done hundreds of times and hundreds of different ways. You might have done it like this before:

Â?

The problem with this is you fetch the data once and render it to the screen making it really hard to reuse again without going back to the server.

We could fix the problem by creating a JavaScript array and looping through it, butÂ? we’ll even go one step further.Â? We’ll create a Javascript Object that will hold the list. In fact, we could create an instance to hold any list of information -Â? states, countries, whatever.

So now can keep our data organized. Each field will have three properties: name, value and set (ie. selected or checked). We have 3 methods: newDD() creates a new entry into the dataSet, get() gets a record by value, and set() sets a record by value. Now lets see how to populate the data set.

Everything should make sence here except for that JSON.parse(…);. We use JSONÂ? (JavaScript Object Notation) to send and receive the data from the server. Think of it like using XML or Soap or RSS, but with less mess.

We still are a little way away from actually displaying our drop down list. Lets look at the server side of the this:

Now things are coming together, but we still need a few more JavaScript functions. We want a way to display our list, and we need a way to fire the whole thing.

Oh, before you look at this next function, I forgot to tell you. We are using another resource, Builder.js. I use it to dynamically create node trees I need to insert into the DOM. Builder.js is available here.

Lastly, the HTML…

This file is basically setup like any other. It will call inÂ? four other JavaScript files:

1. Our Prototype framework (http://prototype.conio.net/)Â?
2. JSON, used to transport data to and from the server (http://JSON.org)Â?
3. Builder.js to create nodes easily throught Javascript(http://svn.oscommerce.com/trac/browser/branches/hpdl/oscommerce/ext/scriptaculous/builder.js?rev=587)
4. Our own javascript file.

There are lots of areas for improvement, but this should give you the general idea. Feel free to see the demo in action here.

Digg this entry! This entry was posted on Monday, July 31st, 2006 at 12:17 pm and is filed under Main. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.