console.log output

The console.log command outputs the parameter to the console, so you can see it in this Jupyter document.

console.log("Hey Guys!");

Hey Guys!

console.log output showing use of variable

This second example is a sequence of code, two or more lines forms a sequence. This example defines a variable, then outputs the msg to terminal.

var msg = "Hey Guys!";
console.log(msg)

Hey Guys!

console.log output showing use of function

This example passes the previously defined variable "msg" to the newly defined "function logIt(output)".

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

Hey Guys!

Showing reuse of a function

Now that a function is defined, it can be called from any of the subsequent cell in the Jupyter notebook. A function/method, is a process of creating a procedural abstraction. This a programming practice to promote reuse versus coding the same thing over and over.

First call sends a different string message
Second call sends a number

console.log("Hey Y'all")
logIt("How are you doing?");
logIt(2022)

Hey Y'all
How are you doing?
2022

Dynamic or Loosely typed language (string, number)

JavaScript is a loosely typed language, don't have to specify what type of information will be stored in a variable in advance. This is similar to Python and most interpretive languages. Java which is a compiled language is strongly typed, thus you will see string, integer, double, and object in the source code. In JavaScript, the "typeof" keyword returns the type.

function logItType(output) {
    console.log(typeof output, ";", output);
}
console.log("Different types of outputs")
logItType("hey guys"); // String
logItType(2022);    // Number
logItType([1, 2, 3]);  // Object is generic for this Array, which similar to Python List

Different types of outputs
string ; hey guys
number ; 2022
object ; [ 1, 2, 3 ]

Build a Person Function/Group object and JSON

JavaScript functions have special properties and syntax is shown in many ways. In fact, a Class in JavaScript is a special function. Jupyter Notebooks seems to be more friendly to "function" definitions versus "Class", thus this lesson uses "function" and "prototype" versus "Class".

Definition of function allows for a collection of data
Definition of a prototype allow for the definition of a method associated with the function
Instance of a function

// define a function to hold data for a Person
function Person(name, favcolor, age) {
    this.name = name;
    this.favcolor = favcolor;
    this.age = age;
    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, favcolor: this.favcolor, age: this.age, role: this.role};
    const json = JSON.stringify(obj);
    return json;
}

// make a new Person and assign to variable upperclassmen
var upperclassmen = new Person("Abby", "pink", 17);  // object type is easy to work with in JavaScript
logItType(upperclassmen);  // before role
logItType(upperclassmen.toJSON());  // ok to do this even though role is not yet defined

// output of Object and JSON/string associated with Teacher
upperclassmen.setRole("upperclassmen");   // set the role
logItType(upperclassmen); 
logItType(upperclassmen.toJSON());

object ; Person { name: 'Abby', favcolor: 'pink', age: 17, role: '' }
string ; {"name":"Abby","favcolor":"pink","age":17,"role":""}
object ; Person { name: 'Abby', favcolor: 'pink', age: 17, role: 'upperclassmen' }
string ; {"name":"Abby","favcolor":"pink","age":17,"role":"upperclassmen"}

Create new people in group

// define a student Array of Person(s)
var underclassmen = [ 
    new Person("Olivia", "purple", 14),
    new Person("Allie", "green", 15),
    new Person("Claire", "pink", 15)
];

// define a group and build Group objects and json
function Group(upperclassmen, underclassmen){
    // start group with upperclassmen
    upperclassmen.setRole("upperclassmen");
    this.upperclassmen = upperclassmen;
    this.group = [upperclassmen];
    // add each person to group
    this.underclassmen = underclassmen;
    this.underclassmen.forEach(underclassmen => { underclassmen.setRole("underclassmen"); this.group.push(underclassmen); });
    // build json/string format of group
    this.json = [];
    this.group.forEach(person => this.json.push(person.toJSON()));
}

// make a del norte group from formerly defined uper and under classmen
delnorte = new Group(upperclassmen, underclassmen);

// output of Objects and JSON in del norte group
logItType(delnorte.group);  // constructed classroom object
logItType(delnorte.group[0].name);  // abstract 1st objects name
logItType(delnorte.json[0]);  // show json conversion of 1st object to string
logItType(JSON.parse(delnorte.json[0]));  // show JSON.parse inverse of JSON.stringify

object ; [ Person { name: 'Abby', favcolor: 'pink', age: 17, role: 'upperclassmen' },
  Person {
    name: 'Olivia',
    favcolor: 'purple',
    age: 14,
    role: 'underclassmen' },
  Person {
    name: 'Allie',
    favcolor: 'green',
    age: 15,
    role: 'underclassmen' },
  Person {
    name: 'Claire',
    favcolor: 'pink',
    age: 15,
    role: 'underclassmen' } ]
string ; Abby
string ; {"name":"Abby","favcolor":"pink","age":17,"role":"upperclassmen"}
object ; { name: 'Abby', favcolor: 'pink', age: 17, role: 'upperclassmen' }

IJavaScript and Table formatting using toHTML method

Create table

// define an HTML conversion "method" associated with Group
Group.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>" + "Favorite Color" + "</mark></th>";
    body += "<th><mark>" + "Age" + "</mark></th>";
    body += "<th><mark>" + "Role" + "</mark></th>";
    body += "</tr>";
    // Data of Array, iterate through each row of delnorte.group 
    for (var row of delnorte.group) {
      // tr for each row, a new line
      body += "<tr>";
      // td for each column of data
      body += "<td>" + row.name + "</td>";
      body += "<td>" + row.favcolor + "</td>";
      body += "<td>" + row.age + "</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(delnorte._toHtml());

Name	Favorite Color	Age	Role
Abby	pink	17	upperclassmen
Olivia	purple	14	underclassmen
Allie	green	15	underclassmen
Claire	pink	15	underclassmen