Google Maps and AJAX: Web 2.0 on Your Web Site

In the last 6 months or so there has been a lot of talk about “Web 2.0”. Some of this is certainly hype, and the desire by some people to put a label on things. In any event, what we do have happening is the emergence of some pretty cool technologies and one of those technologies is called AJAX or Asynchronous JavaScript + XML. If you want the full story on AJAX from one of the chief drivers behind the idea, you can read this article over at Adaptive Path.

You’ll notice he mentions Google Maps, and we’ll get to that in a moment. We do want to first summarize what AJAX is in a nutshell and how JavaScript fits in.

More controlling form fields

Once you begin to use JavaScript you’ll find that a lot of what you end up scripting involves dealing with forms. Form submissions, validations, dynamically displaying fields and even disabling and enabling fields. The disabling and enabling part can be confusing so we’re going to cover how to deal with this subject with each type of form field: the textbox, radio button, checkbox, button and dropdown list.

I’ve covered this once before, but I wanted to take a different approach with this article and also show you how to deal with radio buttons and trigger field control with a dropdown menu.

The new and improved Date Picker!

The new and improved Date Picker!

In January of 2004 I wrote an article called The JavaScript Date Picker. This was before DMXzone included the code and essential files with your article. The date picker was pretty good, but some people had problems with copying the code and implementing the widget.

Nowadays  you get the whole kit and caboodle when you buy an article. Secondly, while the date picker itself was pretty decent, there were a couple of issues I didn’t like about it. I guess you could say I gave you a foundation but not a whole working widget you could drop into your pages. This article aims to fix that by providing you with an updated, better working calendar which you can drop right into whatever project you are using. Included will not only be the code, but the graphics files, HTML and CSS as well. And you can be sure this is something you can use in production. I just finished implementing this very code into a rather large project in my 9-5 job, and it has been thoroughly tested. (Our QA department is very picky!)

With this new script, I’ll be talking more about what the script does and how it works and a little bit less about the Date object. So if you are rusty or inexperienced with the Date object, you could review the other article as well.

Introduction to Regular Expressions

Well, I have procrastinated enough – it's time to get into regular expressions! In the past I have inserted a regular expression (also known as a regexp or regex) in past articles, but I have always stated the discussion of them was out of scope. Truly regex deserves its own article – and then some!

The reason I have delayed is that quite frankly, regular expressions can be very difficult to build, use and understand. Many people find them very difficult and avoid them altogether at all costs. I'll be the first to admit I'm not regular expression expert – however I do use them when I can. Like anything else regular expressions are a tool (in this case, a very powerful one) that can be used to your advantage. It would be silly to discard it altogether because it might be a little harder to use than something with which you are more comfortable.

Highlighting rows using "Unobtrusive" JavaScript

As I spoke about briefly in my last article, the modern way to include JavaScript in our pages is to keep it out of the local code (page level code). This method of using JavaScript has been dubbed “Unobtrusive” by the web community for the obvious reason – it does not intrude upon your page code. This keeps things nice and neat and is a big help when it comes time to maintain your scripts.

In order to dive into this concept, let’s take an old tried and true script and update. Some time ago, I wrote a couple of articles on colouring rows and highlighting rows in a data table. We’ll revisit one of those tables, and this time we’ll do it a better way – the unobtrusive way.

Just to note, there isn’t necessarily anything “wrong” with doing it the other way. The method we’ll talk about today is slightly more advanced, so each method has its place.

An Abstract Add Row Class for Dynamic Table Rows

Quite often we want to add dynamic functionality to our pages, but we end up writing a lot of page specific code. Then we duplicate that process for another page, and another page, until quite soon what we have is a big sopping mess! We’ve been talking about writing unobtrusive JavaScript, and what this also means is abstracting the function or class away from the data by which it is supported.

A good example is the attach document page for Yahoo! Mail. On that page I have the choice of adding up to five attachments – but what if I want to add more? I would have to save the first five, go back to the main compose interface, then click attach, and then start the process over again. This is a waste of time for a user. The smart thing to do would be to give the user the option of adding more fields if they so desire. It was smart not to clutter up the page with too many fields – and even smarter to let the user add some if they need it.

Working with the Event Listener

When the DOM came into prominence and DHTML became a viable web technology we seemed to gain a lot of new tools. The great thing about a lot of the new tools is that they are very useful. The downside is that some of them force you to delve a little deeper into JavaScript and maybe learn something new. In other words, you have to step outside your comfort zone. Trust me, this is a good thing!

The event listener was added when the W3C event model was introduced. But first let’s make sure we know what an event is – what indeed is an event? Someone once said “without events there are no scripts” and that is pretty much correct. Take a look at your scripts and HTML pages and you’ll notice that in order to run your functions, you are triggering them via events.

Modifying Page Elements On-the-fly

In the “old days” web developers did everything – and I mean everything – in the local page, right in the code. That meant presentational tags all the way down to JavaScript functions spread throughout the page. We soon found out that was the wrong way to do things. Maintenance is a nightmare and consistency throughout becomes non-existent. Even worse, errors easily worked their way into such a development strategy.

In recent times, we’ve seen the introduction of XHTML and CSS to control the presentation of web pages. It now seems that almost everyone recognizes the benefits of separating presentation code from the content itself. Now developers are realizing that the same benefits can be had with the “behaviour” layer – the JavaScript layer.

In other words, we can do more than just link our JavaScript files instead of putting them locally in the page. What we can do is begin to remove all the function calls and bits and pieces of JavaScript from our pages and instead move the control to the functions themselves. This separates our code layers even further and makes our JavaScript easier to maintain and more powerful.

Tables and the DOM

We all know that with CSS-based layouts we aren't using tables for page design. Instead we use them for their proper purpose, data. Data tables are useful for displaying all sorts of information, but there are a number of ways we can add functionality to the tables to improve their usability.

In this tutorial we're going to look at ways manipulate tables of data using JavaScript and the W3C Document Object Model. We'll use two examples, providing highlighting for active rows and columns as we mouse-over them, and re-ordering the table based on the column we select. Examples work with IE 5.5+, Navigator 6, Firefox and Opera 7.

Cool Tricks with W3C DOM Javascript

Way back in the day, if you wanted to manipulate the content of your HTML document via Javascript, you had to do all sorts of checking to make sure which browser version your user had, and what kind of support it had. Was it a version 4 browser? Did it support layers or divs? Was it Opera, Netscape, Internet Explorer or something else? The resulting scripts were understandably quite complex as just the browser detection took thousands of lines of code.

The idea of the W3C Document Object Model was to give a standard way that all browsers would understand of providing an interactive layer to our web pages. In this tutorial we'll look at the basics of how the W3C Document Object Model works to manipulate how HTML is displayed and built.

Separating Form and Function: JavaScript and HTML

Wherever CSS and Standards are discussed, you'll often hear about separating content from presentation. Meaning (X)HTML for content and CSS for presentation. At the same time as we separate the content and layout, we can also separate out our JavaScript functionality from the main document, for much the same reasons.

In this tutorial we'll look at moving the JavaScript code out of the HTML document, to keep our page sizes down and our code reusable. We'll look at a different way to handle user initiated events via the script, and develop a sample piece of code for clearing a search box into a more reusable piece of code.

JavaScript Articles on DMXzone

Looking for a client-side code snippet, searching for a little bit of dynamism, can't quite put your finger on that piece of JavaScript?

Well try this brief summary of JavaScript articles in the DMXzone premium content area. There might be something that fits your bill.