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 < 5) {
return “Weak”;
}
else if (strPass.length < 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.
