Javascript
console.log("Test console");
var msg = "Hello, World!";
console.log(msg);
function logIt(output) {
console.log(output);
}
logIt(msg);
function logIt(output) {
console.log(output);
}
logIt(msg);
console.log("Reuse of logIT")
logIt("Hello, Students!");
logIt(2022)
function logItType(output) {
console.log(typeof output, ";", output);
}
console.log("Looking at dynamic nature of types in JavaScript")
logItType("hello"); // String
logItType(2020); // Number
logItType([1, 2, 3]); // Object is generic for this Array, which similar to Python List
function Person(name, class1, class2, class3, class4, class5) {
this.name = name;
this.class1 = class1;
this.class2 = class2;
this.class3 = class3;
this.class4 = class4;
this.class5 = class5;
}
// 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, ghID: this.ghID, classOf: this.classOf, role: this.role};
const json = JSON.stringify(obj); // json/string is useful when passing data on internet
return json;
}
// make a new Person and assign to variable teacher
var teacher = new Person("Mr M", "CSA", "CSA", "CSA", "CSA", "CSA"); // object type is easy to work with in JavaScript
logItType(teacher); // before role
logItType(teacher.toJSON()); // ok to do this even though role is not yet defined
// output of Object and JSON/string associated with Teacher
teacher.setRole("Teacher"); // set the role
logItType(teacher);
logItType(teacher.toJSON());
// define a student Array of Person(s)
var students = [
new Person("William", "Bio", "CSA", "Stats", "APUSH", "APEL"),
new Person("Lily", "APEL", "CSA", "Stats", "APUSH", "CSP"),
new Person("Vidhi", "APEL", "CSA", "Physics", "Hon Princ Eng", ""),
new Person("Riya", "Calc BC", "CSA", "Physics", "APEL", ""),
];
// define a classroom and build Classroom objects and json
function Classroom(teacher, students){ // 1 teacher, many student
// start Classroom with Teacher
teacher.setRole("Teacher");
this.teacher = teacher;
this.classroom = [teacher];
// add each Student to Classroom
this.students = students;
this.students.forEach(student => { student.setRole("Student"); this.classroom.push(student); });
// 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(teacher, students);
// 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
// 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>" + "Class 1" + "</mark></th>";
body += "<th><mark>" + "Class 2" + "</mark></th>";
body += "<th><mark>" + "Class 3" + "</mark></th>";
body += "<th><mark>" + "Class 4" + "</mark></th>";
body += "<th><mark>" + "Class 5" + "</mark></th>";
body += "</tr>";
// Data of Array, iterate through each row of compsci.classroom
for (var row in compsci.classroom) {
// tr for each row, a new line
body += "<tr>";
// td for each column of data
body += "<td>" + compsci.classroom[row].name + "</td>";
body += "<td>" + compsci.classroom[row].class1 + "</td>";
body += "<td>" + compsci.classroom[row].class2 + "</td>";
body += "<td>" + compsci.classroom[row].class3 + "</td>";
body += "<td>" + compsci.classroom[row].class4 + "</td>";
body += "<td>" + compsci.classroom[row].class5 + "</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());