Skip to main content

Site JavaScript Template for projects using jQuery.

// Its good practice to wrap your JavaScript in an immediately-invoked function expression (IIFE)
// (See to stop your functions being added to
// the global scope (See

// framework - The namespace under which all your code should live if you want it to be globally available. As an
//             example a calculator object has been created under the framework namespace below. Note that due to the
//             '||' we are using when passing in the namespace at the bottom of this file, you can repeat the pattern
//             in as many files as you want. The calculator would be better off in a calculator.js file for example.
//             (See
//         $ - The jQuery object. We can't assume that '$' sign is the main jQuery object or being used for something
//             else. It is good practice to pass in the full 'jQuery' object and assign it to the dollar sign here.
//    window - The window object could have been changed during the application lifetime, to guard against this it is
//             good practice to hold onto a copy.
//  document - Same as above.
// undefined - We have an undefined parameter but we do not pass in a value for it. This ensures that the undefined
//             keyword does actually mean undefined and has not been reassigned (Yes, that is possible in JavaScript).
(function(framework, $, window, document, undefined) {
    // Enable strict mode for JavaScript (See
    "use strict";

    // Add your code here.

    // The DOM ready handler (See
    $(function() {
        // Add your code here if you want to access the DOM.

    // This is an example of creating a Calculator object under the framework namespace. The Calculator is using the
    // Revealing Prototype Pattern. You can use the Calculator using the 'new' keyword e.g. var c = new Calculator();
    // (See
    framework.Calculator = function(throwOnDivideByZero) {
        // Calculator constructor. You can pass parameters to the Calculator and/or create private variables like here.
        this.throwOnDivideByZero = throwOnDivideByZero === undefined ? true : throwOnDivideByZero;

    framework.Calculator.prototype = (function() {
        // The 'self' variable ensures that the 'this' keyword references the Calculator and not the calling function.
        // (See
        var self = this;

        function add(a, b) {
            return a + b;

        function subtract(a, b) {
            return a - b;

        function multiply(a, b) {
            return a * b;

        function divide(a, b) {
            return a / b;

        // This private function is not exposed to those who want to use the Calculator.
        function checkDivideByZero(x) {
            if ((x === 0) && self.throwOnDivideByZero) {
                throw new Error("Divide by Zero.");

        return {
            add: add,
            subtract: subtract,
            multiply: multiply,
            divide: divide

})(window.framework = window.framework || {}, window.jQuery, window, document);