console.log output

Output to console using the classic programming introduction using a "Hello, World!" message.

The command or function is console.log()
"Hello, World" is a String literal. This is the referred to as Static text, as it does not change.
"Hello, World" is a parameter to the console.log command.
The console.log command outputs the parameter to the console, so you can see it in this Jupyter document.
Note, in a Web Application, console.log is used for debugging and is not visible from the browser via HTML. It is used behind the scenes, when using Inspect->Console from the browser.

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

Hello, World!

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.

The variable "var msg =" is used to capture the data
The console.log(msg) outputs to console

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

Hello, World!

console.log output showing use of a function

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

There are two steps in the code, the definition of the function and the call to the function.
- "function logIt(output) {}" and everything between curly braces is the definitions of the function.
- "logIt(msg)" is the call to the function, this actually activates the function. If you remove this line you will not receive any output to console.
Since the variable "msg" was defined in previous cell, it is used a parameter when calling the logMessage function.

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

Hello, World!

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("Reuse of logIT")
logIt("Hello, Students!");
logIt(2022)

Reuse of logIT
Hello, Students!
2022

Dynamic or Loosely typed language (string, number)

JavaScript is a loosely typed language, meaning you don't have to specify what type of information will be stored in a variable in advance. The variable type is determined at runtime. 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("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 ]

Build a Person Function/Class 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, the "function Person" allows programmer to retain name, github id, and class of designation.
Definition of a prototype allow for the definition of a method associated with the function , the "Person.prototype.toJSON" allows the collection of data to be expressed in a json/string versus JavaScript object.
Instance of a function, the "var leader = new Person("Eichi Tenshouin", "jm1021", 1977)" line makes a variable "leader" which is an object representation of "function Person".

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

// make a new Person and assign to variable leader
var leader = new Person("Eichi Tenshouin", "19", "Graduated", "fine");
leader.setRole("Leader");

// output of Object and JSON/string associated with Leader
logItType(leader);  // object type is easy to work with in JavaScript
logItType(leader.toJSON());  // json/string is useful when passing data on internet

object ; Person {
  name: 'Eichi Tenshouin',
  age: '19',
  year: 'Graduated',
  unit: 'fine',
  role: 'Leader' }
string ; {"name":"Eichi Tenshouin","age":"19","year":"Graduated","unit":"fine","role":"Leader"}

Build a Classroom Array/List of Persons and JSON

Many key elements are shown again. New elements include...

Building an Array, "var members" is an array of many persons
Building a Classroom, this show forEach iteration through an array and .push adding to an array. These are key concepts in all programming languages.

// define a member Array of Person(s)
var members = [ 
    new Person("Wataru Hibiki", "19", "Graduated", "fine"),
    new Person("Kaoru Hakaze", "19", "Graduated", "UNDEAD"),
    new Person("Midori Takamine", "17", "Third Year", "Ryuseitai"),
    new Person("Niki Shiina", "19", "Dropped Out", "Crazy:B"),
    new Person("Tsukasa Suou", "17", "Second Year", "Knights"),
    new Person("Tsumugi Aoba", "19", "Graduated", "Switch")
];

// define a classroom and build Classroom objects and json
function Classroom(leader, members){ // 1 leader, many member
    // start Classroom with Leader
    leader.setRole("Leader");
    this.leader = leader;
    this.classroom = [leader];
    // add each Member to Classroom
    this.members = members;
    this.members.forEach(member => { member.setRole("Member"); this.classroom.push(member); });
    // build json/string format of Classroom
    this.json = [];
    this.classroom.forEach(person => this.json.push(person.toJSON()));
}

// make a CompSci classroom from formerly defined leader and members
compsci = new Classroom(leader, members);

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

object ; [ Person {
    name: 'Eichi Tenshouin',
    age: '19',
    year: 'Graduated',
    unit: 'fine',
    role: 'Leader' },
  Person {
    name: 'Wataru Hibiki',
    age: '19',
    year: 'Graduated',
    unit: 'fine',
    role: 'Member' },
  Person {
    name: 'Kaoru Hakaze',
    age: '19',
    year: 'Graduated',
    unit: 'UNDEAD',
    role: 'Member' },
  Person {
    name: 'Midori Takamine',
    age: '17',
    year: 'Third Year',
    unit: 'Ryuseitai',
    role: 'Member' },
  Person {
    name: 'Niki Shiina',
    age: '19',
    year: 'Dropped Out',
    unit: 'Crazy:B',
    role: 'Member' },
  Person {
    name: 'Tsukasa Suou',
    age: '17',
    year: 'Second Year',
    unit: 'Knights',
    role: 'Member' },
  Person {
    name: 'Tsumugi Aoba',
    age: '19',
    year: 'Graduated',
    unit: 'Switch',
    role: 'Member' } ]
string ; Eichi Tenshouin
string ; {"name":"Eichi Tenshouin","age":"19","year":"Graduated","unit":"fine","role":"Leader"}
object ; { name: 'Eichi Tenshouin',
  age: '19',
  year: 'Graduated',
  unit: 'fine',
  role: 'Leader' }

IJavaScript and Table formatting using toHTML method

This example builds a Classroom method _toHTML which is passed to the IJavaScript interpreter $$.html which renders output similarly to a real website.

JavaScript in the _toHTML method is broken into three parts...
- Style part is building CSS inline formatting
- Body part is constructing the Table Rows (tr), Table Headings (th), and Table Data (td). The table data is obtained from a Classroom object. The JavaScript for loop allows the construction of a new row of data for each person object in the Array.
- Return part creates the HTML fragment for rendering
The last line in the example $$.html is IJavaScript HTML interpreter and by passing the parameter of the _toHTML method it obtains HTML to render

// define an HTML conversion "method" associated with Classroom
Classroom.prototype._toHtml = function() {
  // HTML Style is build using inline structure
  var style = (
    "display:inline-block;" +
    "background:black;" +
    "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>" + "Age" + "</mark></th>";
  body += "<th><mark>" + "Year" + "</mark></th>";
  body += "<th><mark>" + "Unit" + "</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.age + "</td>";
    body += "<td>" + row.year + "</td>";
    body += "<td>" + row.unit + "</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	Age	Year	Unit	Role
Eichi Tenshouin	19	Graduated	fine	Leader
Wataru Hibiki	19	Graduated	fine	Member
Kaoru Hakaze	19	Graduated	UNDEAD	Member
Midori Takamine	17	Third Year	Ryuseitai	Member
Niki Shiina	19	Dropped Out	Crazy:B	Member
Tsukasa Suou	17	Second Year	Knights	Member
Tsumugi Aoba	19	Graduated	Switch	Member