Java Script

• Console.log output
• Console.log output showing use of variable
• Console.log output with function use
• Showing reuse of a function
• Dynamic or loosely typed language (string,number)
• Building a person function + JSON
• Array/list of people + JSON
• Building A Table (Java using toHTML)

Console.log output

console.log("Hello, World!");

Hello, World!

Console.log output showing use of variable

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

Hello, World!

Console.log output with function use

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

Hello, World!

Showing reuse of a function

console.log("Reuse")
logIt("Hello, World!");

Reuse
Hello, World!

Dynamic or loosely typed language (string,number)

function logItType(output) {
    console.log(typeof output, ";", output);
}
console.log("Dynamic language")
logItType("Hello, World!");
logItType(2022); 
logItType([1, 2, 3]);

Dynamic language
string ; Hello, World!
number ; 2022
object ; [ 1, 2, 3 ]

Building a person function + JSON

function Person(name, ghID, classOf) {
    this.name = name;
    this.ghID = ghID;
    this.classOf = classOf;
    this.role = "";
}

Person.prototype.setRole = function(role) {
    this.role = role;
}

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

var teacher = new Person("Mr Mortenson", "jm1021", 1977);
logItType(teacher);  
logItType(teacher.toJSON());  

teacher.setRole("Teacher");   
logItType(teacher); 
logItType(teacher.toJSON());

object ; Person { name: 'Mr Mortenson', ghID: 'jm1021', classOf: 1977, role: '' }
string ; {"name":"Mr Mortenson","ghID":"jm1021","classOf":1977,"role":""}
object ; Person {
  name: 'Mr Mortenson',
  ghID: 'jm1021',
  classOf: 1977,
  role: 'Teacher' }
string ; {"name":"Mr Mortenson","ghID":"jm1021","classOf":1977,"role":"Teacher"}

Array/list of people + JSON

var students = [ 
    new Person("Nathan", "nsk1207", 2024),
    new Person("Max", "mmaxwu", 2024),
    new Person("Sri", "SRIHITAKOTT123", 2024),
    new Person("Alyssa", "alyssar60819", 2024),
];

function Classroom(teacher, students){ 
    
    teacher.setRole("Teacher");
    this.teacher = teacher;
    this.classroom = [teacher];
    
    this.students = students;
    this.students.forEach(student => { student.setRole("Student"); this.classroom.push(student); });
   
    this.json = [];
    this.classroom.forEach(person => this.json.push(person.toJSON()));
}

compsci = new Classroom(teacher, students);

logItType(compsci.classroom);  
logItType(compsci.classroom[0].name); 
logItType(compsci.json[0]);  
logItType(JSON.parse(compsci.json[0]));

object ; [ Person {
    name: 'Mr Mortenson',
    ghID: 'jm1021',
    classOf: 1977,
    role: 'Teacher' },
  Person {
    name: 'Nathan',
    ghID: 'nsk1207',
    classOf: 2024,
    role: 'Student' },
  Person { name: 'Max', ghID: 'mmaxwu', classOf: 2024, role: 'Student' },
  Person {
    name: 'Sri',
    ghID: 'SRIHITAKOTT123',
    classOf: 2024,
    role: 'Student' },
  Person {
    name: 'Alyssa',
    ghID: 'alyssar60819',
    classOf: 2024,
    role: 'Student' } ]
string ; Mr Mortenson
string ; {"name":"Mr Mortenson","ghID":"jm1021","classOf":1977,"role":"Teacher"}
object ; { name: 'Mr Mortenson',
  ghID: 'jm1021',
  classOf: 1977,
  role: 'Teacher' }

Building A Table (Java using toHTML)

Classroom.prototype._toHtml = function() {
    
    var style = (
      "display:inline-block;" +
      "border: 2px solid black;" +
      "box-shadow: 0.8em 0.4em 0.4em green;"
    );
    var body = "";
    
    body += "<tr>";
    body += "<th><mark>" + "Name" + "</mark></th>";
    body += "<th><mark>" + "GitHub ID" + "</mark></th>";
    body += "<th><mark>" + "Class Of" + "</mark></th>";
    body += "<th><mark>" + "Role" + "</mark></th>";
    body += "</tr>";
    
    for (var row of compsci.classroom) {
      
      body += "<tr>";
     
      body += "<td>" + row.name + "</td>";
      body += "<td>" + row.ghID + "</td>";
      body += "<td>" + row.classOf + "</td>";
      body += "<td>" + row.role + "</td>";
      body += "<td>" + row.role + "</td>";
     
      body += "<tr>";
    }

    return (
      "<div style='" + style + "'>" +
        "<table>" +
          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
Mr Mortenson	jm1021	1977	Teacher	Teacher
Nathan	nsk1207	2024	Student	Student
Max	mmaxwu	2024	Student	Student
Sri	SRIHITAKOTT123	2024	Student	Student
Alyssa	alyssar60819	2024	Student	Student