Javascript Programming Example: Version String Comparison
This article shows how to implement a utility function that compares two version strings using Javascript.
Introduction
The problem is straightforward: Given two version strings, such as "1.1" and "1.2," return -1, 0, or 1 if the former's version is lower than, equal to or greater than the latter. This is similar to the strcmp function in the standard C library. This is an exercise to get you familiarized with Javascript syntax and functions.
First iteration - Get the function working
To implement this function, we split the two version strings into individual parts based on the separator "." and then compare the corresponding two parts one by one based on their numerical values. In case any two parts are not identical, we know immediately which version string is higher. Otherwise, we continue the comparison until one string runs out of its parts. Then we can return the result by comparing the numbers of the constituent parts of these two strings. For now, we ignore invalid input that doesn't conform to the expected format. We also don't regard "1.0" and "1" as equal. Whether this should be handled or not depends on the actual application.
Once this function is implemented, we can create a simple HTML with a few sample version strings to verify that it works. You can view the source of the first iteration of the HTML file that includes the version comparison function.
Second iteration - Accept user submission
Since it is inflexible to have the version strings hard-coded in the HTML page, we can create a simple form that takes user's input of two version strings.
You can use any Javascript library to handle form submission. Here we use jQuery as an example. You don't need to get a copy of the jQuery source file. You can reference directly any public content delivery network (CDN) that hosts the file. One is from Google: http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js.
You first create the form with two text fields for version strings and a submission button. Then you can create an empty div element as a place holder to show the result. Afterwards you can attach a submission event handler upon DOM ready event.
You can view the source of the second iteration of the HTML file that handles form submission with jQuery.
Third iteration - Accept user input without the need to submit
Since the version comparison can be done without any server-side scripting, you can make user experience better by showing the comparison results without user submission. This can be achieved by attaching an event handler to the two text fields when user tabs out of either of them.
You can view the source of the third iteration of the HTML file that handles form submission with jQuery.
Conclusion
As you can see, the version comparison function is simplified a lot when we ignore error handling in case the version strings don't conform to the expected format. Actually, there is still a bug in that function. Can you find it out?
If you are stuck, you can view the source of the four iteration of the HTML file that handles form submission with jQuery that has the bug fixed.
You are welcome to inspect the code and report any additional bug that you find.