console.log("Hello, Ben!")

Hello, Ben!

var msg = "Hello, Ben!";
console.log(msg);

Hello, Ben!

function logIt(output) {
    console.log(output);
}
logIt(msg);

Hello, Ben!

console.log("Wassup guys")
logIt("What day is today?");
logIt(2022)

Wassup guys
What day is today?
2022

function logItType(output) {
    console.log(typeof output, ";", output);
}
console.log("Different types of outputs")
logItType("Wassup"); // String
logItType(2022);    // Number
logItType([1, 2, 3]);  // Object is generic for this Array, which similar to Python List

Different types of outputs
string ; Wassup
number ; 2022
object ; [ 1, 2, 3 ]

// define a function to hold data for a Person
function Person(name, age, classOf) {
    this.name = name;
    this.age = age;
    this.classOf = classOf;
    this.role = "";
}

// define a setter for role in Person data
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, age: this.age, classOf: this.classOf, role: this.role};
    const json = JSON.stringify(obj);
    return json;
}

// make a new Person and assign to variable devOps
var devOps = new Person("Ben", "17", 2023);
devOps.setRole("DevOps");

// output of Object and JSON/string associated with DevOps
logItType(devOps);  // object type is easy to work with in JavaScript
logItType(devOps.toJSON());  // json/string is useful when passing data on internet

object ; Person { name: 'Ben', age: '17', classOf: 2023, role: 'DevOps' }
string ; {"name":"Ben","age":"17","classOf":2023,"role":"DevOps"}

// define a student Array of Person(s)
var members = [ 
    new Person("Nicolas", "17", 2023),
    new Person("Trey", "17", 2023),
    new Person("Kaylee", "17", 2023),
];

// define a classroom and build Classroom objects and json
function Group(devOps, members){ // 1 DevOps, many members
    // start group with DevOps
    devOps.setRole("DevOps");
    this.devOps = devOps;
    this.group = [devOps];
    // add each member to group
    this.members = members;
    this.members.forEach(members => { members.setRole("Members"); this.group.push(members); });
    // build json/string format of group
    this.json = [];
    this.group.forEach(person => this.json.push(person.toJSON()));
}

// make a CompSci group from formerly defined teacher and students
compsci = new Group(devOps, members);

// output of Objects and JSON in CompSci group
logItType(compsci.group);  // constructed classroom object
logItType(compsci.group[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: 'Ben', age: '17', classOf: 2023, role: 'DevOps' },
  Person { name: 'Nicolas', age: '17', classOf: 2023, role: 'Members' },
  Person { name: 'Trey', age: '17', classOf: 2023, role: 'Members' },
  Person { name: 'Kaylee', age: '17', classOf: 2023, role: 'Members' } ]
string ; Ben
string ; {"name":"Ben","age":"17","classOf":2023,"role":"DevOps"}
object ; { name: 'Ben', age: '17', classOf: 2023, role: 'DevOps' }

// define an HTML conversion "method" associated with Group
Group.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>" + "Age" + "</mark></th>";
    body += "<th><mark>" + "classOf" + "</mark></th>";
    body += "<th><mark>" + "Role" + "</mark></th>";
    body += "</tr>";
    // Data of Array, iterate through each row of compsci.group 
    for (var row of compsci.group) {
      // tr for each row, a new line
      body += "<tr>";
      // td for each column of data
      body += "<td>" + row.name + "</td>";
      body += "<td>" + row.age + "</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	Age	classOf	Role
Ben	17	2023	DevOps
Nicolas	17	2023	Members
Trey	17	2023	Members
Kaylee	17	2023	Members