Object Oriented JavaScript Tutorial

Over the past month I spent a lot of time helping teach a good friend of mine how to write advanced JavaScript. Although he had worked with JavaScript many times before, he did not know a lot of the simple things that make JavaScript the crazy dynamic rich development experience that it is. Together we built up this series of examples to help teach everything from language basics to object orientation.

Why do we need yet another JavaScript tutorial?

JavaScript is an interesting language. It is loosely typed, the object orientation has been hacked in over time, and there are at least 10 ways to do anything. The most important thing you can do when writing JavaScript is to choose a set of conventions and stick with them. Unfortunately with so many different ways to do things out there, it's hard to find tutorials that are consistent in their conventions.

Just like developing in any other programming language, understanding the fundamentals is key to building up an advanced application. This tutorial starts out extremely simple, and incrementally gets more advanced. It shows alternative implementations for different tasks, and tries to explain why I prefer the ones that I do. Meanwhile it always follows a consistent set of conventions.

Let's get to the tutorial!

This tutorial comes in 16 lessons. They are designed to be debugged with Firebug for Firefox. If you don't want to actually run the scripts then you can always just read them by downloading the small htm files below and opening them in notepad (or whichever text editor you prefer).

1. JavaScript Types
2. Object Properties
3. Object Declarations
4. Objects vs Arrays
5. Object Pointers and Cloning
6. Equals Operators
7. Closures
8. Advanced Closures
9. Defining Classes with Closures
10. Defining Classes with Prototype
11. Function Scope
12. Creating Delegates
13. Class Inheritance
14. Advanced Class Inheritance
15. More Advanced Class Inheritance
16. Extending jQuery

Additional Resources

If all that wasn't enough or it just got you thirsty for more, here are some additional resources to help start you down the path of becoming a ninja with JavaScript. My recommendation is that whenever you are writing JavaScript you should have w3schools open in a second browser window at all times.

• Downloads
  • Download this tutorial in a ZIP
• Learning Resources
  • w3schools - JavaScript and HTML DOM Reference
  • krook - JavaScript DOM
• Alternative Tutorials
  • Object Oriented Programming in JavaScript (Using Prototype) - Mike Koss
  • JavaScipt Closures for Dummies - Morris Johns
  • JavaScript - Crockford
• JavaScript Frameworks
  • jQuery
  • Sencha - Ext JS

Enjoy,
Tom

9/21 Update - Thanks to Zach Mayer (of System-Exception.com) for providing a great critique of my tutorial. He pointed out several typos and small bugs in lessons 4, 6, 7, 9, 10, 12, 14, 15.

How to Learn ExtJS

Ever since CodeSmith Insight was featured on the Sencha Product Spotlight I have been getting a lot of questions about ExtJS. Specifically how to start learning it, and what tools we recommend using. Well rather than respond to these inquiries one email at a time, I thought it might be a good idea to throw up a blog post about how to learn ExtJS.

I hope this helps you get started, but always feel free to contact me with any additional questions you have.

Start with the Samples

I think the best way to start learning ExtJS is to reverse engineer some of the official ExtJS samples. I like learning by example, so I found that to be a great starting point. After I had a grasp of the fundamentals (their object orientation, their standard configuration properties, etc), I was able to start authoring my own components. I suggest starting with the window examples, taking a look at the form examples, and then really getting a feel for the full application layouts by exploring the feed viewer.

Also, the most important and best thing that you can do: keep the ExtJS API open in another window at all times!

Try using the ExtJS Designer

The Ext Designer is a visual designer for creating ExtJS components. I did not have access to this back when I started working with ExtJS, but in retrospect, I wish that I had. Recently I had the opportunity to help another company get started with ExtJS where they used the designer, and I can endorse that it's a great tool. It allows you to visually drag drop and resize components, such as elements on windows and panels, and helps you get an image of what you are creating without having to render your classes in the browser every step of the way.

The designer is great for two reasons: 1) you can see what you are doing, which makes it much easier to learn what ExtJS configuration properties do, and 2) you don't have to worry about one bad value or syntax error crashing your whole page every time you are trying to learn a new ExtJS component.

Debugging Tools

Firebug for Firefox is still (in my opinion) the best debugging tool around. It is all around responsive, it includes the JSON viewer, it's JavaScript console has auto complete, and you can edit DOM elements inline with ease.

The Google Chrome Development Tools (not Firebug Lite, but the actual built in tools themselves) have really grown into a usable set of tools since they were released two years ago. It finally competes with Firebug for responsiveness and available features. While it does not have the JSON viewer, it does offer a very useful and unique local storage viewer.

MVC 2 Client Side Model Validation with ExtJS

One of the most exciting new features in MVC 2 is "Enhanced Model Validation support across both server and client". The new enhanced support allows for client side validation to be dynamically generated into a view quickly and easily using DataAnnotations attributes on models. This means that by simply dressing up your model properties with attributes, your web pages can instantly have dynamic client side validation; all generated and maintained for you by the MVC framework!

MVC 2 enhanced model validation really is a terrific new feature...so, what's the problem? Microsoft uses JQuery, we use ExtJS.

We here at CodeSmith absolutely love MVC, but many of features are designed to use JQuery, and we (for several different reasons) prefer to use the ExtJS Framework. This means that (as it stands) to use both we must reference both, and no one wants to download two complete AJAX frameworks just to view one webpage.

Good news, we fixed that!

Introducing: Ext.ux.MvcFormValidator

The MVC client side form validator dynamically generates a small blob of configuration for each form, and stores them in window.mvcClientValidationMetadata. Once the page loads up, the client side validator framework loads all these configs, and then starts monitoring the specified forms for validation.

What we have done is created an alternative form validation context (modeled after Sys.Mvc.FormContext) that loads the validation configuration, and requires no changes in the MVC generated code, but uses ExtJS as it's back end. This means that the only thing you have to do is reference Ext.ux.MvcFormValidator.js, and it will enable you to use the ExtJS Core for form validation instead of having to import MicrosoftMvcValidation and the other Microsoft AJAX libraries.

Features

• Requires only the ExtJS Core.
• Implements all four default validators: Required, Range, StringLength, RegularExpression
• Supports integration of custom validators with almost no code change.
  
  • Just update Sys.Mvc.ValidatorRegistry.validators to call Ext.Mvc.ValidatorRegistry.validators
• Displays field messages as well as summary.
• Extends Ext.util.Observable and uses events.
• Lightweight; less than 300 lines of code.

Downloads

Ext.ux.MvcFormValidator.js: http://codesmith.googlecode.com/files/Ext.ux.MvcFormValidator.js
Demo Solution: http://codesmith.googlecode.com/files/ExtUxMvcFormValidationDemo.zip

Example

Model

public class ValidationDemoModel
{
    [Required]
    [StringLength(10)]
    public string Name { get; set; }

    [Range(10000, 99999)]
    public string ZipCode { get; set; }

    [RegularExpression (@"\d{3}[-]?\d{3}[-]?\d{4}", ErrorMessage="The field Phone must be valid phone number.")]
    public string Phone { get; set; }

    [AcceptBox]
    public bool Accept { get; set; }
} 

Site.Master

<script src="/Scripts/ext-core.js" type="text/javascript"></script>
<script src="/Scripts/Ext.ux.MvcFormValidator.js" type="text/javascript"></script>
<script src="/Scripts/CustomValidators.js" type="text/javascript"></script>

View

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Validation Demo</h2>
        <% Html.EnableClientValidation(); %>
        <% using (Html.BeginForm()) { %>
        <%= Html.LabelFor(m => m.Name) %>:
        <%= Html.TextBoxFor(m => m.Name)%>
        <%= Html.ValidationMessageFor(m => m.Name)%>
        <br />
        <%= Html.LabelFor(m => m.Phone) %>:
        <%= Html.TextBoxFor(m => m.Phone)%>
        <%= Html.ValidationMessageFor(m => m.Phone)%>
        <br />
        <%= Html.LabelFor(m => m.ZipCode) %>:
        <%= Html.TextBoxFor(m => m.ZipCode)%>
        <%= Html.ValidationMessageFor(m => m.ZipCode)%>
        <br />
        <%= Html.LabelFor(m => m.Accept) %>:
        <%= Html.CheckBoxFor(m => m.Accept)%>
        <%= Html.ValidationMessageFor(m => m.Accept)%>
        <br />
        <input type="submit" value="Submit" />
        <%  } %>
</asp:Content>

Controller Action

[HttpGet]
public ActionResult ValidationDemo()
{
    var model = new ValidationDemoModel();
    return View(model);
}

Custom Validator

Ext.Mvc.ValidatorRegistry.validators["acceptbox"] = function (rule) {
    return function (value, context) {
        return context.fieldContext.elements[0].checked === true;
    };
};