JSFiddle - React, Tailwind, and code Playground

by deepak sisodiya

JavaScript

// Object-Oriented JavaScript

var alert  = function (str) {
   var st = document.createTextNode(str);
   var p = document.createElement('p');
   p.appendChild(st);
   document.querySelector('body').appendChild(p);
}

// The Class
// JavaScript uses functions as classes
function Person() { }

// The Object (Class Instance)
function Person() { }
var person1 = new Person();  // person1 is object
var person2 = new Person();  // person2 is object

// The Constructor
function otherPerson() {
  alert('Person instantiated');
}
var person1 = new otherPerson();
var person2 = new otherPerson();

// The Property (object attribute)
function anotherPerson(gender) {
  this.gender = gender;  // object attribute
  alert('Person instantiated');
}
var person1 = new anotherPerson('Male');
var person2 = new anotherPerson('Female');
alert('person1 is a ' + person1.gender);

// The methods
function yetAnotherPerson(gender) {
  this.gender = gender;
}
yetAnotherPerson.prototype.sayHello = function () {
  alert ('hello');
}
var person1 = new yetAnotherPerson('Male');
var person2 = new yetAnotherPerson('Female');
person1.sayHello();