JavaScript
Example of using JavaScript
function logIt(output) {
console.log(output);
}
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
Build a Person Function/Class object and JSON
JavaScript functions have special properties and syntax is shown in many ways. In fact, a Class in JavaScript is a special function. Jupyter Notebooks seems to be more friendly to "function" definitions versus "Class", thus this lesson uses "function" and "prototype" versus "Class".
- Definition of function allows for a collection of data, the "function Person" allows programmer to retain course, github id, and class of designation.
- Definition of a prototype allow for the definition of a method associated with the function , the "Person.prototype.toJSON" allows the collection of data to be expressed in a json/string versus JavaScript object.
- Instance of a function, the "var teacher = new Person("Mr M", "jm1021", 1977)" line makes a variable "teacher" which is an object representation of "function Person".
// define a function to hold data for a Course
function Course(course, teacher, room_num) {
this.course = course;
this.teacher = teacher;
this.room_num = room_num;
}
// define a setter for role in Course data
// Course.prototype.setRole = function(role) {
// this.role = role;
// }
// define a JSON conversion "method" associated with Course
Course.prototype.toJSON = function() {
const obj = {course: this.course, teacher: this.teacher, room_num: this.room_num, role: this.role};
const json = JSON.stringify(obj);
return json;
}
// make a new Course and assign to variable teacher
var teacher = new Course("Mr M", "jm1021", 1977);
// teacher.setRole("Teacher");
// output of Object and JSON/string associated with Teacher
logItType(teacher); // object type is easy to work with in JavaScript
logItType(teacher.toJSON()); // json/string is useful when passing data on internet
// define a student Array of Person(s)
var students = [
new Course("AP Physics", "Mr. Liao", "K105"),
new Course("AP Calculus BC", "Mrs. Lanzi", "G104"),
new Course("AP English Language", "Mrs. Dafoe", "G112"),
new Course("AP Computer Science Principles", "Mr. Mortensen", "A101"),
new Course("AP US History", "Mr. Swanson", "L116")
];
// logIt(students)
// define a schedule and build schedule objects and json
function schedule(teacher, students){ // 1 teacher, many student
// start schedule with Teacher
// teacher.setRole("Teacher");
this.teacher = teacher;
this.schedule = [teacher];
// add each Student to schedule
this.students = students;
// this.students.forEach(student => { students.setRole("2022"); this.schedule.push(student); });
// build json/string format of schedule
this.json = [];
this.schedule.forEach(person => this.json.push(person.toJSON()));
this.students.forEach(person => this.json.push(person.toJSON()));
}
// make a CompSci schedule from formerly defined teacher and students
compsci = new schedule(teacher, students);
// output of Objects and JSON in CompSci schedule
logItType(compsci.students); // constructed schedule object
logItType(compsci.students[0].course); // abstract 1st objects course
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 schedule
schedule.prototype._toHtml = function() {
// HTML Style is build using inline structure
var style = (
"display:inline-block;" +
"background:green;" +
"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>" + "course" + "</mark></th>";
body += "<th><mark>" + "Teacher" + "</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.schedule
for (var row of compsci.students) {
// tr for each row, a new line
body += "<tr>";
// td for each column of data
body += "<td>" + row.course + "</td>";
body += "<td>" + row.teacher + "</td>";
body += "<td>" + row.room_num + "</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());