Javascript Notes

Javascript Data Types

Here is a function that will print out the data type of an input.

function dataType(data) {
    console.log(data + ": " + typeof data)
}

dataType("Hello");
dataType(3);
dataType(true);
dataType(null);
dataType();

Hello: string
3: number
true: boolean
null: object
undefined: undefined

// define a function to hold data for a Person
function Person(name, ghID, classOf) {
    this.name = name;
    this.ghID = ghID;
    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, 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("John Mortenson", "jm1021", 1977);  // object type is easy to work with in JavaScript
dataType(teacher);  // before role
dataType(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
dataType(teacher); 
dataType(teacher.toJSON());

[object Object]: object
{"name":"John Mortenson","ghID":"jm1021","classOf":1977,"role":""}: string
[object Object]: object
{"name":"John Mortenson","ghID":"jm1021","classOf":1977,"role":"Teacher"}: string

// define a student Array of Person(s)
var students = [ 
    new Person("Evan Sanchez", "deimie", 2023),
    new Person("Calissa Tyrrell", "CalissaT", 2023),
    new Person("Samuel Wang", "Samuelwaang", 2023),
    new Person("Kian Pasokhi", "kiannp44", 2023),
];

// 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
dataType(compsci.classroom);  // constructed classroom object
dataType(compsci.classroom[0].name);  // abstract 1st objects name
dataType(compsci.json[0]);  // show json conversion of 1st object to string
dataType(JSON.parse(compsci.json[0]));  // show JSON.parse inverse of JSON.stringify

[object Object],[object Object],[object Object],[object Object],[object Object]: object
John Mortenson: string
{"name":"John Mortenson","ghID":"jm1021","classOf":1977,"role":"Teacher"}: string
[object Object]: object

// define an HTML conversion "method" associated with Classroom
Classroom.prototype._toHtml = function() {
    // HTML Style is build using inline structure
    var style = (
      `<style> 
        .dataTable th{ 
          color: gray; 
        } 
      </style>`
    );
  
    // HTML Body of Table is build as a series of concatenations (+=)
    var body = "";
    // Heading for Array Columns
    body += "<tr>";
    body += "<th>" + "Name" + "</th>";
    body += "<th>" + "GitHub ID" + "</th>";
    body += "<th>" + "Class Of" + "</th>";
    body += "<th>" + "Role" + "</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].ghID + "</td>";
      body += "<td>" + compsci.classroom[row].classOf + "</td>";
      body += "<td>" + compsci.classroom[row].role + "</td>";
      // tr to end line
      body += "<tr>";
    }
  
     // Build and HTML fragment of div, table, table body
    return (
      style +
      "<div>" +
        "<table class='dataTable'>" +
          body +
        "</table>" +
      "</div>"
    );
  
  };
  
  // IJavaScript HTML processor receive parameter of defined HTML fragment
  $$.html(compsci._toHtml())

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

Name	GitHub ID	Class Of	Role
John Mortenson	jm1021	1977	Teacher
Evan Sanchez	deimie	2023	Student
Calissa Tyrrell	CalissaT	2023	Student
Samuel Wang	Samuelwaang	2023	Student
Kian Pasokhi	kiannp44	2023	Student