21 September Notes

We're doing stuff with javascript today. the apcsp repository in vscode glitched out and I can't sync it. I can't reclone it because it says that apcsp already exists. the javascript stuff didnt work although i checked through powershell and it said I had it installed. tests shall comence

var msg = "hello";
console.log(msg);

hello

The kernel is not working. I can not find any errors through powershell. Maybe vscode is just glitching out at the moment. I installed extensions through vscode for javascript

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

hello

function is used to define a function. logit is the name for the function. output can be used as a variable for what's placed inside the parenthesis when executing the function.

function logItType(output) {
    console.log(typeof output, ";", output)
}

logit("hello")
logit(2022)
logit([1, 2, 3])

string ; hello
number ; 2022
object ; [ 1, 2, 3 ]

function Person(name, hp, atk) {
    this.Name = name;
    this.HP = hp;
    this.ATK = atk;
    this.Role = "";
}

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

Person.prototype.toJSON = function() {
    const obj = {name: this.Name, hp: this.HP, atk: this.ATK, role: this.Role};
    const json = JSON.stringify(obj);
    return json;
}

var sword = new Person("joe", 2, 3);
logItType(sword);
logItType(sword.toJSON());

sword.setRole("Swordsman");
logItType(sword)
logItType(sword.toJSON())

object ; Person { Name: 'joe', HP: 2, ATK: 3, Role: '' }
string ; {"name":"joe","hp":2,"atk":3,"role":""}
object ; Person { Name: 'joe', HP: 2, ATK: 3, Role: 'Swordsman' }
string ; {"name":"joe","hp":2,"atk":3,"role":"Swordsman"}

var army = [
    new Person("Nate", 10, 10),
    new Person("Igor", 13, 14),
    new Person("Greg", 4, 3),
    new Person("Gilligan", 25, 27),
    new Person("Elliot", 9, 11),
    new Person("Rob", 12, 10)
];

function Military(sword, army) {
    sword.setRole("Swordsman");
    this.Sword = sword;
    this.Military = [sword];
    this.army = army;
    this.army.forEach(army => { army.setRole("Soldier"); this.Military.push(army); });
    this.json = [];
    this.Military.forEach(person => this.json.push(person.toJSON()));

}

sec9 = new Military(sword, army)
logItType(sec9.Military);
logItType(sec9.Military[0].Name);

object ; [ Person { Name: 'joe', HP: 2, ATK: 3, Role: 'Swordsman' },
  Person { Name: 'Nate', HP: 10, ATK: 10, Role: 'Soldier' },
  Person { Name: 'Igor', HP: 13, ATK: 14, Role: 'Soldier' },
  Person { Name: 'Greg', HP: 4, ATK: 3, Role: 'Soldier' },
  Person { Name: 'Gilligan', HP: 25, ATK: 27, Role: 'Soldier' },
  Person { Name: 'Elliot', HP: 9, ATK: 11, Role: 'Soldier' },
  Person { Name: 'Rob', HP: 12, ATK: 10, Role: 'Soldier' } ]
string ; joe

a conversion to JSON is needed for the js code to be displayed through ._toHtml

Military.prototype._toHtml = function() {
    var style = (
        "display:inline-block;" +
        "border: 2px solid grey;" +
        "box-shadow: 0.8em 0.4em 0.4em grey;"
    );

    var body = "";
    body += "<tr>";
    body += "<th><mark>" + "Name" + "</mark></th>";
    body += "<th><mark>" + "HP" + "</mark></th>";
    body += "<th><mark>" + "ATK" + "</mark></th>";
    body += "<th><mark>" + "Role" + "</mark></th>";
    body += "</tr>";

    for (var row of sec9.Military) {
        body += "<tr>";
        body += "<td>" + row.Name + "</td>";
        body += "<td>" + row.HP + "</td>";
        body += "<td>" + row.ATK + "</td>";
        body += "<td>" + row.Role + "</td>";
        body += "<tr>";
    }

    return (
        "<div style='" + style + "'>" +
        "<table>" +
        body +
        "</table>" +
        "</div>"
    );

};

$$.html(sec9._toHtml());

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

typeof is used to output the type.

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 M", "jm1021", 1977);
logItType(teacher);
logItType(teacher.toJSON());

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

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

var students = [ 
    new Person("Anthony", "tonyhieu", 2022),
    new Person("Bria", "B-G101", 2023),
    new Person("Allie", "xiaoa0", 2023),
    new Person("Tigran", "Tigran7", 2023),
    new Person("Rebecca", "Rebecca-123", 2023),
    new Person("Vidhi", "unknown", 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 M', ghID: 'jm1021', classOf: 1977, role: 'Teacher' },
  Person {
    name: 'Anthony',
    ghID: 'tonyhieu',
    classOf: 2022,
    role: 'Student' },
  Person { name: 'Bria', ghID: 'B-G101', classOf: 2023, role: 'Student' },
  Person { name: 'Allie', ghID: 'xiaoa0', classOf: 2023, role: 'Student' },
  Person {
    name: 'Tigran',
    ghID: 'Tigran7',
    classOf: 2023,
    role: 'Student' },
  Person {
    name: 'Rebecca',
    ghID: 'Rebecca-123',
    classOf: 2023,
    role: 'Student' },
  Person { name: 'Vidhi', ghID: 'unknown', classOf: 2024, role: 'Student' } ]
string ; Mr M
string ; {"name":"Mr M","ghID":"jm1021","classOf":1977,"role":"Teacher"}
object ; { name: 'Mr M', ghID: 'jm1021', classOf: 1977, role: 'Teacher' }

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>" + "GitHub ID" + "</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.classroom 
  for (var row of compsci.classroom) {
    // tr for each row, a new line
    body += "<tr>";
    // td for each column of data
    body += "<td>" + row.name + "</td>";
    body += "<td>" + row.ghID + "</td>";
    body += "<td>" + row.classOf + "</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());

Name	HP	ATK	Role
joe	2	3	Swordsman
Nate	10	10	Soldier
Igor	13	14	Soldier
Greg	4	3	Soldier
Gilligan	25	27	Soldier
Elliot	9	11	Soldier
Rob	12	10	Soldier

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

Name	GitHub ID	Class Of	Role
Mr M	jm1021	1977	Teacher
Anthony	tonyhieu	2022	Student
Bria	B-G101	2023	Student
Allie	xiaoa0	2023	Student
Tigran	Tigran7	2023	Student
Rebecca	Rebecca-123	2023	Student
Vidhi	unknown	2024	Student