The JavaScript Complete

From The Travis van der Font Wiki
Jump to: navigation, search
// loads after DOM but before page content
document.addEventListener('DOMContentLoaded',function ()
{
    // onchange events    
    document.querySelector('#input-one').onchange = Input.changeEventHandler;
    document.querySelector('#input-two').onchange = Input.changeEventHandler;
},
false);

class Input
{
    static changeEventHandler(event)
    {
        // defines local class variable as array
        if (Input.dates === undefined)
        {
            Input.dates = [];
        }

        // saves local class array from inside a static
        Input.dates[event.target.id] = event.target.value;
    }
}


/* ########################### */

// constructor function
function MyClass ()
{ 
  var privateVariable = "foo";  // private variable 
  this.publicVariable = "bar";  // public variable 

  // public method
  this.privilegedMethod = function ()
  {
    console.log(privateVariable); // logs bar
  };
}

// instance method will be available to all instances but only load once in memory 
MyClass.prototype.publicMethod = function ()
{    
   console.log(this.publicVariable); // logs for
};

// static variable shared by all instances
MyClass.staticProperty = "baz";

var myInstance = new MyClass();


/* ########################### */

let increment = (function () {
    var i = 1;

    return function () {
        return i++;
    }
})();

increment(); // returns 1
increment(); // returns 2


/* ########################### */

(function smoothscroll()
{
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;

    if (currentScroll > 0)
    {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

/* ### option/select onchange with selected value #### */
document.getElementById('optionFieldID').onchange = function (event)
{
    console.log(this.options[this.selectedIndex].value);
}


/* ### create default (opinion) arguments ### */

function createShape(arguments)
{
    arguments = Object.assign(
    {
        type:   'cube',
        width:  250,
        height: 250
    },
    arguments);

    //...
}

createShape(
{
  type: 'cube',
  width: 200
  // exclude the 'height' key
});

/* ### using promises ### */

let allocatePostData = new Promise(function(resolve, reject)
{
    let _postData = []; // default postData is empty

    // define postData by iterating postData from option
    // and capturing the live value from either class or ID of element
    if (postData.length > 0) {

        console.log('---- postdata ----');
        console.log(postData);

        postData.forEach(function (element, i) {
            let value = element.value;

           // _postData[element.key] = value;
            //_postData[element.key] = element.value;

            if (value[0] === '#' || value[0] === '.') {
                _postData[element.key] = document.querySelector(value).value;
                // document.querySelector('#fromdatefilter').value
            }
            else
            {
                _postData[element.key] = element.value;
            }

        });
    }

    resolve(_postData);
});

allocatePostData.then((_postData) => {

    let _data = Object.assign({}, _postData);

    console.log('---- check ----');
    console.log(_data);
    console.log(Object.keys(_data).length);

    let ajax = {
        method: 'POST',
        url: url,
        success: function (data) {
            if (that.$element) {
                clearTimeout(that.loadingTimeoutId);
                that.$element.find('.overlay').stop().hide();
                that.$element.html('');
                that.$element.html(data);
            }
        },
        error: function() {
            that.$element.find('.overlay').stop().hide();
            clearTimeout(that.loadingTimeoutId);
        }
    };

    if (Object.keys(_data).length > 0) {
        ajax.data = _data;
    }

    $.ajax(ajax);
});

Reference(s)