JSFiddle - React, Tailwind, and code Playground

by Andy Bulka

JavaScript

/*
Javascript Experiments with Reilly - part 1
 (where, amongst other things, we learned that self refers to the enclosing context, and that 'new' creates such a context for functions.)

<script>
*/

document.write('hello');


function t(o) {
    document.write(o + ': ' + typeof(o) + '<hr>');
}

function h1(s) {
    document.write('<h3>' + s + '</h3>');
}

/*----------------------------*/

h1('Basic Types');


t([1, 2]);
t({
    hi: 'hi'
});
t(1);
t(1.2);
t(true);
t('hi');
t(function() {});
t(new Object());

h1('Hash/Dictionary Properties');

var h = {
    hi: 'bye',
    0: 'zero'
}
t(h.hi);
t(h['hi']);
t(h[0]);

h1('List with Properties');

var l = [1, 2, 3]
t('list stuff');
t(l);
t(l[0]);
l.hi = 'hi45678';
t(l.hi);

h1('Function with Properties');

f = function() {};
t(f);
f.zero = 0;
t(f.zero);

h1('Object with Properties');

o = new Object();
t(o);
o.hi = 'hi';
t(o.hi);
o[0] = 1;
o[1] = 2;
t(o[0]);

h1('List Constructor with Properties');

a = new Array();
a.hi = 'hi';
t(a);
t(a.hi);

h1('Functions and this - global scope');

test = function() {
    this.test.hi = 'hi';
}

t(test);
test();
t(test.hi);

h1('Hash and this');

c = {
    fn: function() {
        this.whatisthis = 1;
    },
    whatisthis: 0
}

t(c.whatisthis);
c.fn()
t(c.whatisthis);

h1('Functions, properties and this - global scope');

function z() {}
z.fn = function() {
    this.whatisthat = 10;
}
z.whatisthat = 5;

t(z.whatisthat);
z.fn();
t(z.whatisthat);


function r(n) {
    this.r.fn = function() {
        this.whatisthat = 10;
    }
    this.r.whatisthat = n;
}

r(5);
t(r.whatisthat);
r.fn();
t(r.whatisthat);

h1('Functions and new');

var r2 = function() {
    this.title = 'hi'
}

r2();
t(title);

r3 = new r2();
t(r3);
t(r3.title);
t(r3['title']);

h1('Functions and new as classes');

var Tune = function() {
    Tune.blah = 'original class var blah';
    this.title = 'Tune title';
    this.fn = function() {
        if (this.blah) {
            return this.blah;
        } else {
        ...