Implementing Custom Classes for Microsoft AJAX Library (Part 1)

This article explainis the basic steps for impplementing your own javascript class and use it in a page.
First, you need to write a script that describes the class. This example simply provides a class that verifies the length of a word to see if it has enough length to be used as a password. The file name is PasswordStrengthComponent.js

/* When working with JavaScript files in the code editor, you can add a reference to the Microsoft AJAX Library. This will ensure that your coding includes IntelliSense for the library. This is similar to the using statement in C# and the Imports statement in Visual Basic. You embed this reference in a comment at the top of your .js file. The following shows an example.
*/
/// <reference name="MicrosoftAjax.js"></reference>
// register your namespace
Type.registerNamespace("Panahy.Ajax");
//create constructor
Panahy.Ajax.PasswordStrengthComponent = function () {
    Panahy.Ajax.PasswordStrengthComponent.initializeBase(this);
}
//define class
Panahy.Ajax.PasswordStrengthComponent.prototype = {
    initialize: function () {
        //add custom initialization here
        Panahy.Ajax.PasswordStrengthComponent.callBaseMethod(this, 'initialize');
    },
    passwordStrengthClass: function (password) {
        var strPass = new String(password.toString());
        if (strPass.length &lt; 5) {
            return "Weak";
        }
        else if (strPass.length &lt; 8) {
                return "Medium";
        } else {
            return "Strong";
        }
    },
    dispose: function () {
        //add custom dispose actions here
        Panahy.Ajax.PasswordStrengthComponent.callBaseMethod(this, 'dispose');
    }
}
//register class as a Sys.Component
Panahy.Ajax.PasswordStrengthComponent.registerClass(
    'Panahy.Ajax.PasswordStrengthComponent', Sys.Component);
//notify script loaded
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
Next, you reference this script file in your page within the ScriptManager:

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="Scripts/PasswordStrengthComponent.js" />
    </Scripts>
</asp:ScriptManager>

From this point the script is available and can be used in thepage as in the following example:
<script language="javascript" type="text/javascript">
    function _OnKeypress() {
        var checker = new Panahy.Ajax.PasswordStrengthComponent();
        var pass = document.getElementById("MainContent_TextBoxPassword").value;
        var strength = checker.passwordStrengthClass(pass);
         
        document.getElementById(
            "MainContent_TextBoxPassword").setAttribute("class", strength);
    }
</script>
<asp:TextBox ID="TextBoxPassword" runat="server"
        TextMode="Password" Width="200" onkeyup="_OnKeypress()" CssClass="Empty"></asp:TextBox>


Next part will take this subject one step forward.