HTML Fragments and JavaScript Data Table

JavaScript Usage

Table Using JavaScript and HTML Fragments

Unit 3

Notes	Hacks	Grade
3.1-3.2 Notes	3.1-3.2 Hacks	0.95/1
3.3-3.4 Notes	3.3-3.4 Hacks	0.9/1
3.5-3.7 Notes	3.5-3.7 Hacks	0.95/1
3.8 & 3.10 Notes	3.8 & 3.10 Hacks	0.9/1
3.9 & 3.11 Notes	3.9 & 3.11 Hacks	0.8/1
3.12 & 3.13 Notes	3.12 & 3.13 Hacks	0.95/1
3.14 & 3.15 Notes	3.14 & 3.15 Hacks	0.9/1
3.16 Notes	3.16 Hacks	TBD

Console.log output

console.log() is similar to the function of print() in python. Running the command outputs the parameter to the console, so it you can see it in a Jupyter document. However, running the command in a web application does not make it visible from the browser.

console.log("Hello World")

Hello World

Variables

Variables in JavaScript are defined using the var keyword

var msg = "Hello everyone"
console.log(msg)

Hello everyone

Functions

Functions are defined in JavaScript with the function keyword, a function name, and the arguments of the function. The code in the function needs to be contained in curly braces {}.

Since the variable msg was defined in the previous cell, it can be used as a parameter when calling the logIt function.

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

logIt(msg)

Hello everyone

Reuse of a Function

Functions that have been previous defined in a previous cell can be called in any subsequent cell in the Jupyter notebook. A function/method is a process of creating a procedural abstraction

console.log("Reuse of logIT")
logIt("Hello, Students!")
logIt("Foo Bar!")
logIt(2022)
logIt(msg)

Reuse of logIT
Hello, Students!
Foo Bar!
2022
Hello everyone

Dynamic or Loosely Typed Language (string, number)

Javascript is a loosely typed language, so you don't have to specify what type of information will be stored in a variable in advance.

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

Looking at dynamic nature of types in JavaScript
string ; hello
number ; 2020
object ; [ 1, 2, 3 ]

Creating a different table

Here is my usage of a Jupyter JavaScript kernel to create a table:

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 ScrumMaster = new Person("Shaurya Goel", "STG-7", 2025);
  ScrumMaster.setRole("Scrum Master");
  
  var DevOp = new Person("Evan Aparri", "chewyboba10", 2024);
  
  var FrontendDevs = [ 
    new Person("Haseeb Beg", "h4seeb-cmd", 2024),
    new Person("Tirth Thakkar", "Tirth-Thakkar", 2024),
  
  ];
  
  var BackendDev = new Person("Alex Lu", "YLu-1258", 2024);
  
  function Group(DevOp, BackendDevs, ScrumMaster, FrontendDevs){
    ScrumMaster.setRole("Scrum Master");
    this.ScrumMaster = ScrumMaster;
    this.group = [ScrumMaster];
  
    this.DevOp = DevOp;
    DevOp.setRole("Dev Op");
    this.group.push(DevOp);
  
    this.FrontendDevs = FrontendDevs;
    this.FrontendDevs.forEach(FrontendDev => { FrontendDev.setRole("Frontend Dev"); this.group.push(FrontendDev); });
    
    this.BackendDev = BackendDev;
    BackendDev.setRole("Backend Dev"); 
    this.group.push(BackendDev);
  
    this.json = [];
    this.group.forEach(person => this.json.push(person.toJSON()));
  }
  
  compsci = new Group(DevOp, BackendDev, ScrumMaster, FrontendDevs);
  
  Group.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>" + "GitHub ID" + "</mark></th>";
      body += "<th><mark>" + "Class Of" + "</mark></th>";
      body += "<th><mark>" + "Role" + "</mark></th>";
      body += "</tr>";
  
      for (var row of compsci.group) {
        body += "<tr>";
        body += "<td>" + row.name + "</td>";
        body += "<td>" + row.ghID + "</td>";
        body += "<td>" + row.classOf + "</td>";
        body += "<td>" + row.role + "</td>";
        body += "<tr>";
      }
    
      return (
        "<div style='" + style + "'>" +
          "<table>" +
            body +
          "</table>" +
        "</div>"
      );
    
    };
    
    $$.html(compsci._toHtml());

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

Name	GitHub ID	Class Of	Role
Shaurya Goel	STG-7	2025	Scrum Master
Evan Aparri	chewyboba10	2024	Dev Op
Haseeb Beg	h4seeb-cmd	2024	Frontend Dev
Tirth Thakkar	Tirth-Thakkar	2024	Frontend Dev
Alex Lu	YLu-1258	2024	Backend Dev