Javascript Jupyter Notebook

function logItType(output) {
    console.log(typeof output, ";", output);
}

// define a function to hold data for a Person
function Analysis(numbers, mean, mode) {
    this.numbers = numbers;
    this.mean = mean;
    this.mode = mode;
    this.role = "";
}

// define a setter for role in Person data
Analysis.prototype.setRole = function(role) {
    this.role = role;
}

// define a JSON conversion "method" associated with Person
Analysis.prototype.toJSON = function() {
    const obj = {name: this.numbers, mean: this.mean, mode: this.mode, role: this.role};
    const json = JSON.stringify(obj);  // json/string is useful when passing data on internet
    return json;
}

var mainset = new Analysis("1,2,3,1", "7/4", "1");  // object type is easy to work with in JavaScript
logItType(mainset);  // before role
logItType(mainset.toJSON());  // ok to do this even though role is not yet defined

// output of Object and JSON/string associated with Teacher
mainset.setRole("Main Set");   // set the role
logItType(mainset); 
logItType(mainset.toJSON());

object ; Analysis { numbers: '1,2,3,1', mean: '7/4', mode: '1', role: '' }
string ; {"name":"1,2,3,1","mean":"7/4","mode":"1","role":""}
object ; Analysis { numbers: '1,2,3,1', mean: '7/4', mode: '1', role: 'Main Set' }
string ; {"name":"1,2,3,1","mean":"7/4","mode":"1","role":"Main Set"}

// define a student Array of Person(s)
var numbers = [ 
    new Analysis("1,4,3,4", "3", "4"),
    new Analysis("4,2,2,2", "10/4", "2"),
    new Analysis("9,8,7,8", "8", "8"),
    new Analysis("0,0,0,9", "9/4", "0"),
    new Analysis("1,9,9,2", "21/4", "9")
];

// define a classroom and build Classroom objects and json
function Set(students){ // 1 teacher, many student
    // add each Student to Classroom
    mainset.setRole("Main Set");
    this.mainset = mainset;
    this.classroom = [mainset];
    this.numbers = numbers;
    this.numbers.forEach(numbers => { numbers.setRole("Numbers"); this.classroom.push(numbers); });
    // build json/string format of Classroom
    this.json = [];
    this.classroom.forEach(numbers => this.json.push(numbers.toJSON()));
}

math = new Set(numbers);

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

object ; [ Analysis { numbers: '1,2,3,1', mean: '7/4', mode: '1', role: 'Main Set' },
  Analysis { numbers: '1,4,3,4', mean: '3', mode: '4', role: 'Numbers' },
  Analysis { numbers: '4,2,2,2', mean: '10/4', mode: '2', role: 'Numbers' },
  Analysis { numbers: '9,8,7,8', mean: '8', mode: '8', role: 'Numbers' },
  Analysis { numbers: '0,0,0,9', mean: '9/4', mode: '0', role: 'Numbers' },
  Analysis { numbers: '1,9,9,2', mean: '21/4', mode: '9', role: 'Numbers' } ]
undefined ; undefined
string ; {"name":"1,2,3,1","mean":"7/4","mode":"1","role":"Main Set"}
object ; { name: '1,2,3,1', mean: '7/4', mode: '1', role: 'Main Set' }

// define an HTML conversion "method" associated with Classroom
Set.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>" + "Numbers" + "</mark></th>";
  body += "<th><mark>" + "Mean" + "</mark></th>";
  body += "<th><mark>" + "Mode" + "</mark></th>";
  body += "</tr>";
  // Data of Array, iterate through each row of compsci.classroom 
  for (var row in math.classroom) {
    // tr for each row, a new line
    body += "<tr>";
    // td for each column of data
    body += "<td>" + math.classroom[row].numbers + "</td>";
    body += "<td>" + math.classroom[row].mean + "</td>";
    body += "<td>" + math.classroom[row].mode + "</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(math._toHtml());

</table></div> </div> </div> </div> </div> </div> </div>

Numbers	Mean	Mode
1,2,3,1	7/4	1
1,4,3,4	3	4
4,2,2,2	10/4	2
9,8,7,8	8	8
0,0,0,9	9/4	0
1,9,9,2	21/4	9