JSFiddle - React, Tailwind, and code Playground

by Andy Bulka

HTML

Simple class technique from <a href="http://developer.mozilla.org/en/docs/A_re-introduction_to_JavaScript"> here </a><br>
Remember there is no block scope in JavaScript only global and local.  Furthermore, 'this' is evaluated at RUNTIME. It looks to see where it is running and if it's inside a function then it takes on local scope of that 'object' otherwise it goes to the global scope which is the document - which typically would be a mistake since this. would just be 'document.'
<hr>

JavaScript

/*
10/03/10
Another simple class technique
 (from http://developer.mozilla.org/en/docs/A_re-introduction_to_JavaScript)
*/
function msg(s) { $('body').append('<p>' + s) + '</p>' };

function makePerson(first, last) {
    return {
        first: first,
        last: last,
        fullName: function() {
            return this.first + ' ' + this.last;
        },
        fullNameReversed: function() {
            return this.last + ', ' + this.first;
        }
    }
}
p = makePerson("john", "smith");
msg(p.fullName());
msg(p.fullNameReversed());

// MORE ADVANCED PROTOTYPE TECHNIQUE

function Person(first, last) {  // class and constructor
    this.first = first;
    this.last = last;
}
Person.prototype.fullName = function() {
    return this.first + ' ' + this.last;
}
Person.prototype.fullNameReversed = function() {
    return this.last + ', ' + this.first;
}

p = new Person("Andy", "Smith");
msg("<hr>");
msg(p.fullName());
msg(p.fullNameReversed());

p2 = new Person("John", "Patrick");
msg(p2.fullName());
msg(p2.fullNameReversed());
msg(p2.last);  // access property directly - OK 
msg("<hr>");

// try some jquery manipulation of regular JavaScript objects

arr = [p, p2];

$jarr = $(arr);  // same as $jarr = jQuery(arr);
msg($jarr[0].fullName());  // can still index into jquery
msg($jarr[0].last);   // obj and access unwrapped obj directly - OK 

// BIG MYSTERY HERE - WHY CAN'T I DO ANYTHING NORMAL
// WITH AN OBJECT WRAPPED IN JQUERY.  Solution is to get at the real object inside again with .get(0)

msg("mystery start -------"); 
var $p = $(p);

//msg($p.fullName());  // can still call methods NO
msg($p.get(0).fullName());  // yes
msg($p[0].fullName());   // yes

msg("...");
msg($p.last);   // access property directly - NO 
msg($p.get(0).last); // yes
msg($p[0].last); // yes
msg("...");

msg($(p).prop('last'));   // access property jquery style
msg("mystery end -------"); 

// from jquery doco
// define a plain object
var foo = {foo:'bar', hello:'world'};

// wrap...