// The equivalent to the Python print function; printing 'PROOF' as a message.
console.log("PROOF");

PROOF

// creating a variable with the 'var' component, and printing that variable. in this case, it is 'msg'
var msg = "WSG";
console.log(msg);

WSG

// creating a function called logIt, and calling the 'msg' variable that was created in the above cell.
function logIt(output) {
    console.log(output);
}
logIt(msg);

WSG

// showing multiple ways of printing different messages.
console.log("I")
logIt("AM");
logIt(100)

I
AM
100

// notice the added 'Type' at the end of the logIt in comparison to the previous examples. this prints the TYPE of variable, as seen in the output with the "string", "number", and "object" declarations.
function logItType(output) {
    console.log(typeof output, ";", output);
}
console.log("JS IS DIFFERENT")
logItType("cheese"); // String
logItType(100);    // Number
logItType([2, 4, 6, 8]);  // Object is generic for this Array, which similar to Python List

JS IS DIFFERENT
string ; cheese
number ; 100
object ; [ 2, 4, 6, 8 ]

// defining the function with the characteristics for each person
function Person(name, lastName, draftClass) {
    this.name = name;
    this.lastName = lastName;
    this.draftClass = draftClass;
    this.role = "";
}

// prototype definition
Person.prototype.setRole = function(role) {
    this.role = role;
}

// define a JSON conversion "method" associated with Person
Person.prototype.toJSON = function() {
    const obj = {name: this.name, lastName: this.lastName, draftClass: this.draftClass, role: this.role};
    const json = JSON.stringify(obj);
    return json;
}

// new person assigned to student variable
var student = new Person("SAMIT", "POOJARY", 2014);  
logItType(student); 
logItType(student.toJSON());  

// output of Object and JSON/string associated with student variable defined above - again, using the student variable defined above and the logItType showing the TYPE of variable being printed.
student.setRole("Student");  
logItType(student); 
logItType(student.toJSON());

object ; Person { name: 'SAMIT', ghID: 'POOJARY', classOf: 2014, role: '' }
string ; {"name":"SAMIT","ghID":"POOJARY","classOf":2014,"role":""}
object ; Person { name: 'SAMIT', ghID: 'POOJARY', classOf: 2014, role: 'Student' }
string ; {"name":"SAMIT","ghID":"POOJARY","classOf":2014,"role":"Student"}

// array of quarterbacks
var quarterbacks = [ 
    new Person("Mac", "Jones", 2021),
    new Person("Tom", "Brady", 1999),
    new Person("Aaron", "Rodgers", 2006),
    new Person("Justin", "Herbert", 2019),
    new Person("Patrick", "Mahomes", 2017),
    new Person("Kyler", "Murray", 2019)
];

// define a classroom and build Classroom objects and json
function Classroom(student, quarterbacks){ // 1 teacher, many student
    // start Classroom with Teacher
    student.setRole("Student");
    this.student = student;
    this.classroom = [student];
    // add each Student to Classroom
    this.quarterbacks = quarterbacks;
    this.quarterbacks.forEach(quarterback => { quarterback.setRole("Quarterback"); this.classroom.push(quarterback); });
    // build json/string format of Classroom
    this.json = [];
    this.classroom.forEach(person => this.json.push(person.toJSON()));
}

// make a CompSci classroom from formerly defined teacher and students
compsci = new Classroom(student, quarterbacks);

// output of Objects and JSON in CompSci classroom
logItType(compsci.classroom);  // constructed classroom object
logItType(compsci.classroom[0].name);  // abstract 1st objects name
logItType(compsci.json[0]);  // show json conversion of 1st object to string
logItType(JSON.parse(compsci.json[0]));  // show JSON.parse inverse of JSON.stringify

object ; [ Person { name: 'SAMIT', ghID: 'POOJARY', classOf: 2014, role: 'Student' },
  Person { name: 'Mac', ghID: 'Jones', classOf: 2021, role: 'Quarterback' },
  Person { name: 'Tom', ghID: 'Brady', classOf: 1999, role: 'Quarterback' },
  Person {
    name: 'Aaron',
    ghID: 'Rodgers',
    classOf: 2006,
    role: 'Quarterback' },
  Person {
    name: 'Justin',
    ghID: 'Herbert',
    classOf: 2019,
    role: 'Quarterback' },
  Person {
    name: 'Patrick',
    ghID: 'Mahomes',
    classOf: 2017,
    role: 'Quarterback' },
  Person {
    name: 'Kyler',
    ghID: 'Murray',
    classOf: 2019,
    role: 'Quarterback' } ]
string ; SAMIT
string ; {"name":"SAMIT","ghID":"POOJARY","classOf":2014,"role":"Student"}
object ; { name: 'SAMIT', ghID: 'POOJARY', classOf: 2014, role: 'Student' }

// define an HTML conversion "method" associated with Classroom
Classroom.prototype._toHtml = function() {
  // HTML Style is build using inline structure
  var style = (
    "display:inline-block;" +
    "border: 2px solid grey;" +
    "box-shadow: 0.8em 0.4em 0.4em grey;"
  );

  // HTML Body of Table is build as a series of concatenations (+=)
  var body = "";
  // Heading for Array Columns
  body += "<tr>";
  body += "<th><mark>" + "Name" + "</mark></th>";
  body += "<th><mark>" + "GitHub ID" + "</mark></th>";
  body += "<th><mark>" + "Class Of" + "</mark></th>";
  body += "<th><mark>" + "Role" + "</mark></th>";
  body += "</tr>";
  // Data of Array, iterate through each row of compsci.classroom 
  for (var row of compsci.classroom) {
    // tr for each row, a new line
    body += "<tr>";
    // td for each column of data
    body += "<td>" + row.name + "</td>";
    body += "<td>" + row.ghID + "</td>";
    body += "<td>" + row.classOf + "</td>";
    body += "<td>" + row.role + "</td>";
    // tr to end line
    body += "<tr>";
  }

   // Build and HTML fragment of div, table, table body
  return (
    "<div style='" + style + "'>" +
      "<table>" +
        body +
      "</table>" +
    "</div>"
  );

};

// IJavaScript HTML processor receive parameter of defined HTML fragment
$$.html(compsci._toHtml());

Name	GitHub ID	Class Of	Role
SAMIT	POOJARY	2014	Student
Mac	Jones	2021	Quarterback
Tom	Brady	1999	Quarterback
Aaron	Rodgers	2006	Quarterback
Justin	Herbert	2019	Quarterback
Patrick	Mahomes	2017	Quarterback
Kyler	Murray	2019	Quarterback