Android Robot

DnnForge - NewsArticles

01


Continuing with the So You Think You’re A Web Developer series, as a web developer you should realize that trips back  to the server are an expensive resource, and you should try avoid these trips. In the past few years AJAX techniques have been gaining in popularity, but I still find web developers who avoid Java Script like the plague.

JavaScript has been around for years (roughly 13 years), and originally was named Live Script. Because of the addition of Java to Netscape back in the mid 90’s, someone thought it would be a good idea to rename Live Script to Java Script, even though the syntax only contained similarities(similarities as in any c based language). In my option, JavaScript is a great language, it combines OO principals and a few functional programming principals to make a language that is very robust. I think JavaScript is pretty simple to learn, its the intracies of the DOM (document object model) and the BOM (browser object model) that cause developers the most head aches.

Tip #1 What JavaScript is good for
  • Restricting data entered into a text box

Often times you will want to restrict what type of data is entered into an input box. The Java Script function below is called on the KeyPress event of a button, and will only return the character if its a valid number.

function OnlyAllowNumbers(field, e)
{
    // Special keyboard keys - Netscape 6 passes these to onkeypress
    // {{Home, End, Delete, Arrow Keys}, {Backspace}, {Enter}}
    var reKeyboardChars = /[x00x08x0D0]/;

    // Numeric characters
    var reValidChars = /d/;

    // Grab event key code and character (method depends on browser)
    var keycode = window.Event ? e.which : e.keyCode;
    var strChar = String.fromCharCode (keycode);

    // Block non-numeric characters and non-special keys
    if (!reValidChars.test (strChar) && !reKeyboardChars.test (strChar))
    {
        // Invalid character, reject key press
        return false;
    }  

    // Valid character or special key, allow key press
    return true;
}
  • Adding days to a date

Recently a client asked for a feature to extend a date in a text box by 4 weeks. Something this simple does not make sense to make a trip back up to server, so I wired a button to call a function that contained code that looked similar to below.

	var startDate = new Date('12/30/2008');     var daysToAdd = 28;                            // 4 weeks
	var newDate =  new Date(startDate.getTime() + daysToAdd*24*60*60*1000);        // get the milliseconds for days to add, then add

	// add 1 to the month because js months start at 0
	var formattedDate = newDate.getMonth() + 1 + "/" + newDate.getDate() +"/" +   newDate.getFullYear();

There are far to many business cases to list, but as a rule of thumb, think before you wire a control that goes back to the server, can this functionality be done on the client?

Tip #2 Tools for debugging

While throwing an alert box in every few lines, may get the job done but its not the most efficient way to debug issues.

  • Firebug

Firebug is a plug in for Firefox that contains a great Java Script debugger.

FireBug

Firebug adds a global variable named “console” to all web pages loaded in Firefox. This object contains many methods that allow you to write to the Firebug console to expose information that is flowing through your scripts.

var daysToAdd = 28;                            // 4 weeks
console.log("daysToAdd=%d ",daysToAdd);

Console

  • Visual Studio

Visual Studio 2008 ships with a JavaScript debugger also. I have had issues in the past setting break points, and actually having them break correctly. When this happens, I just use the debugger Java Script statement. When testing with Internet Explorer, Visual Studio will present the Debugger box, if using Firefox with Firebug installed this will throw you right into the Firebug debugger.

Visual Studio

  • Firefox

Many times I just need to test if a small script works. Instead of creating an html file to test my logic, I will just copy my script into the Firefox address bar

javascript: var foo=’my javascript test’; alert(foo);

FireFox

Tip #3 Testing Frameworks

Most developers don’t create automated test’s for server side code, let alone tests for Java Script. Below are a few testing frameworks to be aware of. Keep an eye out for a SYTYAWD post about qUnit.

Tip #4 Java Script Frameworks

There is common logic that we as Web Developers do often, show/hide content in a div tag, perform a calculation on an object and dump the result into a text box. There are a bunch of tools out there that wrap this common logic into an easy to use API. Often times these tools cause religious wars between developers, on which one is the best to use.

I suggest you try out a few tools and get comfortable with one. I personally use jQuery as my tool of choice. Also Microsoft has recently made the announcement that they will ship jQuery in Visual Studio 2010.