JSFiddle - React, Tailwind, and code Playground

by hiteshubharani

HTML

<div id="parent">
<div id="test"></div>
</div>

CSS

#test
{
    background:black;
    width:20px;
    height:20px;
}

#parent
{
     position:relative;
     width:100%;
     height:100%; 
     background:#eee;
}

JavaScript

$.widget("ui.staticTest", {
    staticVar: 'brownMamba', //this staticVar is an instance variable
    _create: function() {

    },
    //test the static variable
    testStatic: function(a) {
        if (a) {
        /*Here you're actually creating a new static variable called 
          staticVar which is associated with the staticTest object as you assign value to it. */
            //Lemme show you what I mean with an example
            //Here it alerts 'Undefined' as 'staticVar' it does not exists
            alert("Type of $.ui.staticTest.staticVar before assignment: " + typeof $.ui.staticTest.staticVar);
            
            $.ui.staticTest.staticVar = a; 
            //At this point it alerts the type of a, which in our case is a 'string'            
            alert("Type of $.ui.staticTest.staticVar after assignment: " + typeof $.ui.staticTest.staticVar);
            
            //value of instance variable at this point
            alert("typeof this.staticVar: " + typeof this.staticVar);
            alert("Value of this.staticVar: " +  this.staticVar);
            //value of global variable at this point
            //'Undefined' as it does not exist
            alert("Type of staticVar: " + typeof staticVar); //or window.staticVar
            

        } else {
            alert("value of staticVar in testStatic with no argument: " + $.ui.staticTest.staticVar);
        }
    },
    
    //test the instance variable
    testInstance: function(a) {
        if (a) {
        /*Here you're actually working with the instance variable declared above, with the value 'brownMamba' */
            //Lemme show you what I mean with an example
            //Here it alerts 'string' as 'staticVar' exists and is assigned a string
            alert("typeof this.staticVar is " + typeof this.staticVar + " and its value is " + this.staticVar);
            //assigning the static variable with a value does not affect the value of the instance variable
           ...