Javascript Learning

console.log("Hello! :)")

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

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

A JavaScript variable is simply a name of storage location, and it must start with a letter, underscore, or dollar sign. You can declare JavaScript variables with var, let, or const.

function Person(name, grade, roles) {
    this.name = name;
    this.grade = grade;
    this.roles = roles;
    this.role = "";
}

Person.prototype.setRole = function(role) { //this sets a function of the role
    this.role = role;
}

Person.prototype.toJSON = function() {
    const obj = {name: this.name, grade: this.grade, roles: this.roles, role: this.role};
    const json = JSON.stringify(obj);
    return json;
}

// make mr mort as the csa teacher and an object
var teacher = new Person("Mr Mortensen", "csa teacher","csa teacher");  
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());

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>" + "Grade" + "</mark></th>";
    body += "<th><mark>" + "Role" + "</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].grade + "</td>";
      body += "<td>" + compsci.classroom[row].roles + "</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());