Javascript Maintainablity Lecture by Chris Heilmann

A very nice video of a presentation on Javascript maintainability. It taught me a couple of things, including the use of a configuration object to define IDs and other text in a single location that makes changing the code easier.


Presentation: Chris Heilmann: Maintainable JavaScript, part 1 from Bachelor-ict.nl on Vimeo.


Presentation: Christian Heilmann: Maintainable JavaScript, part 2 from Bachelor-ict.nl on Vimeo.

 

Javascript isValid()

I dunno about you, but I love the isValid() function in ColdFusion. Its just an amazing collection of usefulness that I use just about all the time. Recently though, I've found myself really wanting something equivalent for client-side validation, so I put together this bit of Javascript code:


function isValid (type, value) {
    var regex;
    
    switch (type.toLowerCase()) {
        case 'email':
            regex = /^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i
            break;
        case 'telephone':
            regex = /^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$/;
            break;
        case 'date':
            regex = /^(?=\d)(?:(?:(?:(?:(?:0?[13578]|1[02])(\/|-|\.)31)\1|(?:(?:0?[1,3-9]|1[0-2])(\/|-|\.)(?:29|30)\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})|(?:0?2(\/|-|\.)29\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))|(?:(?:0?[1-9])|(?:1[0-2]))(\/|-|\.)(?:0?[1-9]|1\d|2[0-8])\4(?:(?:1[6-9]|[2-9]\d)?\d{2}))($|\ (?=\d)))?(((0?[1-9]|1[012])(:[0-5]\d){0,2}(\ [AP]M))|([01]\d|2[0-3])(:[0-5]\d){1,2})?$/;
            break;
        case 'numeric':
        case 'number':
            regex = /^[\d\.]+$/;
            break;
        case 'integer':
            regex = /^\d+$/;
            break;
        case 'zipcode':
            regex = /^\d{5}([\-]\d{4})?$/;
            break;
    }
    
    return value.match(regex);
}

Please note that I take no credit for the regular expressions used in this function. I collected them from various sources, and I would credit the original creator if I could find my list of where I got them.

 

Prototype.js on IE smashed by id="tblStudents"

Ok, so here is the weirdest IE bug I've ever seen.... the weirdest by far. I was trying to get some sortable table code up and running and after I got it going in FireFox, IE 7 was throwing fits. I narrowed it down to a specific instantiation of the table that I had on my page, and then started hacking things out. I pulled out all my custom DisplayTable code. I remove all of my custom code completely. I removed Scriptaculous.

Turns out IE has a weird behavior where it adds a global scope variable with the same name as any id, so that you can just say tblStudents.innerHTML = 'whatever' without needing to fetch the element. My lack of a var keyword before my variable ment it was trying to reference that variable and causing a conflict.

 

Prototype Based State Manager

I've known that you could use anchor tags as a way to manage the state of a Javascript application for a while now, but I've never really messed with how that is actually setup. I got bored on Friday, and this is what I came up with.

 

Jaxer By Aptana

While I'm a CF programmer, I'm really interested in facilitating user experiences, and that has invariably led me to a love of Javascript. Now Aptana has announced a really spiffy server called Jaxer that allows you to run JS on the server side and have it automatically synced to the client side. Its pretty wild stuff. You can read more about it here.

As soon as this is out for IIS, I'll be all over it.

 

Douglas Crockford on JavaScript

This is the first of a three part video on JavaScript design by Douglas Crockford, one of Yahoo!'s JS gurus. Its a very nice explanation of some of the trickier bits of JS object creation.

 

More Entries

Jon Hartmann, July 2011

I'm Jon Hartmann and I'm a Javascript fanatic, UX/UI evangelist and former ColdFusion master. I blog about mysterious error messages, user interface design questions, and all things baffling and irksome about programming for the web.

Learn more about me on LinkedIn.