Javascript Unit Testing TDD

A simple HTML Page that runs all your unit tests (Only Is.Equal is implemented but more are coming).
The web app should be build as MVC or at least have a distinct Model (set of .js files).

Javascript Class Template

function Person(oInit) {
    this.Clear();
    if (typeof oInit === "object") { this.Init(oInit); }
    this.Init(oInit)
}
Person.sId = "Party";
Person.sColor = "#00f";
Person.sIcon = "../img/user_suit.png";

Person.prototype.Clear = function () {
    this.nkPer = 0;
    this.rvPer = 0;
    this.sPerLNm = "";
    this.sPerEml = "";
};

String.prototype javascript

String.prototype.PadLeft = function (nLen, sPad) {
    if (typeof sPad !== "string") sPad = " ";
    if (typeof nLen !== "number") nLen = 2;
    var sResult = this;
    while (sResult.length < nLen) sResult = sPad + sResult;
    return sResult;
};
String.prototype.PadRight = function(sPad, nLen) {
    if (typeof sPad !== "string") sPad = " ";
    if (typeof nLen !== "number") nLen = 2;
    var sResult = this;
    while (sResult.length < nLen) sResult += sPad;
    return sResult;
};
String.prototype.Trim = function () {
    return this.replace(/^\s+|\s+$/g, "");
};
String.prototype.TrimLeft = function () {
    return this.replace(/^\s+/, "");
};
String.prototype.TrimRight = function () {
    return this.replace(/\s+$/, "");
};

Date.prototype javascript

Date.prototype.Format = function (sFormat) {
    if (typeof sFormat !== "string") 
        return this.getFullYear().toString() + 
               (this.getMonth() + 1).toString().PadLeft("0", 2) +
               this.getDate().toString().PadLeft("0", 2);
    var that = this;
    return sFormat.replace(/dd?d?d?|MM?M?M?|yy?y?y?|hh?|HH?|mm?|ss?/g,
    function (sFormat) {
        switch (sFormat) {
        case "yyyy": return that.getFullYear().toString();
        case "yy": return that.getFullYear().toString().substring(2, 4);
        case "MM": return (that.getMonth() + 1).toString().PadLeft(2, "0");
        case "dd": return that.getDate().toString().PadLeft(2, "0");
        case "hh": return (that.getHours() <= 12 ? that.getHours() : 
                   (that.getHours() - 12)).toString().PadLeft(2, "0");
        case "HH": return that.getHours().toString().PadLeft(2, "0");
        case "mm": return that.getMinutes().toString().PadLeft(2, "0");
        case "ss": return that.getSeconds().toString().PadLeft(2, "0");
        case "M": return (that.getMonth() + 1).toString();
        case "d": return that.getDate().toString();
        case "h": return (that.getHours() <= 12 ? that.getHours() : 
                  (that.getHours() - 12)).toString();
        case "H": return that.getHours().toString();
        case "m": return tht.getMinutes().toString();
        case "s": return that.getSeconds().toString();
        }
    });
};

Javascript Collection Class

Javascript does not need a Template for Connection Classes.
One Class fits all!
Items.js:

CORS Cross Origin Resource Sharing Javascript

For many years we were stuck with JSONP if we needed to make a cross domain query.
JSONP was OK except for one major point: The amount of data to send where limited by max URL length and then again it had to be URI encoded.
Now we have a solution supported by all browsers except IE7 & Opera (for some reason).

SVG Javascript with events

I need a widget displaying the months of the year. I implemented using SVG and not by Canvas because I needed the capability of SVG to assign events to any element of the picture.

• The user should be able to select a month by clicking on it
• The widget should give an event for every month change
• The user should be able to deselect a month by clicking on it or at the center of the wheel.

It really works! Try it.

Javascript event handling (all browsers except ie7)

Now that IE9 supports addEventListener and IE7's market share is diminishing (goodle analytics tell me that ie7 and older is at 14% and loses 2% per month).

If we can support ie8 (@31%) we can forever forget attachEvent.
That mean we support all current browsers but not ie7 and older.

javascript TabView

Simple TabView with CSS3 and Javascript

Javascript i18n (internationalization)

The users of a web app should be able to select the interface language of preference. The default language is english and the developer has to give a list of the terms used along with the translations in all languages supported.
Each term can be

Each user selects a UI language that is stored in: ins.oUser.eUsrLang

Enumeration ins.enLng contains all the languages our system supports.

If a specified term is not supported, in the language that the user has chosen, then the english term is used.

Ajax Javascript

How to call an ajax service from a web page using

• Javascript
• XMLHttpRequest
• POST

The server side implementation using C# is in another post.

Javascript Stopwatch

I want to measure how long some processes are taking. So I wrote the Stopwatch class (click "Start", wait some seconds, click "Stop":

Class Stopwatch

"use strict";
ins.Stopwatch = function () {
    var dFr, dTo, that = this;
    this.nMilliseconds;
    this.nSeconds;
    this.nMinutes;
    this.nHours;
    this.nDays;
    var _bRun = false;
    this.bRun = function () { return _bRun; };
    this.Start = function () {
        _bRun = true;
        this.Reset();
        dFr = new Date();
    };
    this.Stop = function () {
        _bRun = false;
        if (!dFr) {
            return Reset();
        } else {
            dTo = new Date();
            return Calc();
        }
    };
    this.Reset = function () {
        dFr = dTo = null;
        this.nMilliseconds =
        this.nSeconds =
        this.nMinutes =
        this.nHours =
        this.nDays = 0;
        return 0;
    };
    this.toString = function (sFormat) {
        if (typeof sFormat !== "string") sFormat = "m:s.f";
        return sFormat.replace(/d/g, this.nDays.toString()).
            replace(/h/g, this.nHours.toString().PadLeft(2, "0")).
            replace(/m/g, this.nMinutes.toString().PadLeft(2, "0")).
            replace(/s/g, this.nSeconds.toString().PadLeft(2, "0")).
            replace(/f/g, this.nMilliseconds.toString().PadLeft(3,"0"));
    };
    var Calc = function () {
        if (dFr && dTo && dFr.getTime() < dTo.getTime()) {
            var nTime = dTo.getTime() - dFr.getTime()
            that.nMilliseconds = Math.round(nTime);

            that.nSeconds = Math.floor(that.nMilliseconds / 1000);
            that.nMilliseconds -= that.nSeconds * 1000;

            that.nMinutes = Math.floor(that.nSeconds / 60);
            that.nSeconds -= that.nMinutes * 60;

            that.nHours = Math.floor(that.nMinutes / 60);
            that.nMinutes -= that.nHours * 60;

            that.nDays = Math.floor(that.nHours / 24);
            that.nHours -= that.nDays * 24;
            return nTime;
        } else {
            return that.Reset();
        }
    };
    this.Reset();
};
if (typeof String.prototype.PadLeft != "function") {
    String.prototype.PadLeft = function (nLen, sPad) {
        if (typeof sPad !== "string") sPad = " ";
        if (typeof nLen !== "number") nLen = 2;
        var sResult = this;
        while (sResult.length < nLen) sResult = sPad + sResult;
        return sResult;
    };
}

Usage:

    var oSW = new i.Stopwatch();
    var oBtn, oDiv;
    window.onload = function () {
        oBtn = document.getElementById("btnFr");
        oDiv = document.getElementById("divResults");
        oBtn.onclick = ToggleSW;
    };
    var ToggleSW = function () {
        oBtn.disabled = true;
        if (oSW.bRun()) {
            oSW.Stop();
        } else {
            oSW.Start();
        }
        oBtn.innerHTML = oSW.bRun() ? "Stop" : "Start";
        oDiv.innerHTML = oSW.bRun() ? "" : oSW.toString("m:s:f");
        oBtn.removeAttribute("disabled");
    };

DOM prototype extensions

DOM should be OO. Fortunately it is to fix with javascript.
The problem is that the code becomes very verbose (and not elegant) when I want to create a part of a web page in code.
When I want to create a table in code, I create a documentFragment and call a MakeTable function:
DOM is not object oriented so for just one row and two cells:

Model View Controller, Javascript

How to write Model View Controller (MVC Code) for the form:

Problem:

Write Model View Controller (MVC) code without any framework:

Solution using just javascript.