JavaScript references

JavaScript is the most important language you need to learn as a frontend developer. It's a great first language for web developers to learn.

For this project, I personally used W3Schools a little bit

W3Schools - reference

console.log output

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

The command or function is console.log()
I used Console.log in my AppLab
Whenever a button was clicked I would log it in the console

console.log("Hello World!");

Hello World!

console.log("This is Edwin trying out the console.log command")

This is Edwin trying out the console.log command

console.log output showing use of variable

This second example is a sequence of code, two or more lines forms a sequence. During the CollegeBoard Daily Videos for Unit 1.2, I learned what a sequence of code was

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

var msg = "Hello, World!"; // This defines the variable "msg" and then prints it later with console.log
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

I noticed that you need to run previous codes because that is the only way the variable is defined.

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.

console.log("Reuse of logIT")
logIt("Hello, Students!");
logIt(2022)

Reuse of logIT
Hello, Students!
2022

Dynamic or Loosely Typed Language

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.
similar to Python and most interpretive languages.

function logItType(output) {
    console.log(typeof output, ";", output);
}
console.log("Looking at dynamic nature of types in JavaScript")
logItType("hello"); // String
logItType(2024);    // 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 ; 2024
object ; [ 1, 2, 3 ]

Build a Person Function with a Class

Jupyter Notebooks seems to be more friendly to "function" definitions versus "Class", thus this lesson uses "function" and "prototype" versus "Class".

Instance of a function, the "var teacher = new Person("Mr M", "jm1021", 1977)" line makes a variable "teacher" which is an object representation of "function Person". new Person("Edwin Abraham", "EdwinKuttappi", "2024")

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

// make a new Person and assign to variable teacher
var teacher = new Person("Mr M", "jm1021", "Graduate", 1977);  // object type is easy to work with in JavaScript
logItType(teacher);  // before role
logItType(teacher.toJSON());  // ok to do this even though role is not yet defined

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

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

Build a List of People or a Class

Many key elements are shown again.

Building an Array, "var students" is an array of many persons

// define a student Array of Person(s)
var students = [ 
    new Person("Edwin", "EdwinKuttappi", "Junior", 2024),
    new Person("Emaad", "Emaad-Mir", "Sophmore", 2025),
    new Person("Luka", "LukaVDB", "Junior", 2024),
    new Person("Jishnu", "JishnuS420", "Junior", 2024),
];

// define a classroom and build Classroom objects and json
function Classroom(teacher, students){ // 1 teacher, many student
    // start Classroom with Teacher
    teacher.setRole("Teacher");
    this.teacher = teacher;
    this.classroom = [teacher];
    // add each Student to Classroom
    this.students = students;
    this.students.forEach(student => { student.setRole("Student"); this.classroom.push(student); });
    // build json/string format of Classroom
    this.json = [];
    this.classroom.forEach(person => this.json.push(person.toJSON()));
}

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

// 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: 'Mr M',
    ghID: 'jm1021',
    year: 'Graduate',
    classOf: 1977,
    role: 'Teacher' },
  Person {
    name: 'Edwin',
    ghID: 'EdwinKuttappi',
    year: 'Junior',
    classOf: 2024,
    role: 'Student' },
  Person {
    name: 'Emaad',
    ghID: 'Emaad-Mir',
    year: 'Sophmore',
    classOf: 2025,
    role: 'Student' },
  Person {
    name: 'Luka',
    ghID: 'LukaVDB',
    year: 'Junior',
    classOf: 2024,
    role: 'Student' },
  Person {
    name: 'Jishnu',
    ghID: 'JishnuS420',
    year: 'Junior',
    classOf: 2024,
    role: 'Student' } ]
string ; Mr M
string ; {"name":"Mr M","ghID":"jm1021","year":"Graduate","classOf":1977,"role":"Teacher"}
object ; { name: 'Mr M',
  ghID: 'jm1021',
  year: 'Graduate',
  classOf: 1977,
  role: 'Teacher' }

Making a Table

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

Three parts to convert Java to HTML and build a table
- 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.

Important Info:

(td) - Table Data
(tr) - Table Row
(th) - Table Headings

// define an HTML conversion "method" associated with Classroom
Classroom.prototype._toHtml = function() {
  // HTML Style is build using inline structure
  var style = (
    "display:inline-block;" +
    "border: 3px solid blue;" +
    "background-color:#FFFFE0;color:yellow;" +
    "text-color:#FFFFFF;color:blue;" +    
    "box-shadow: 0.8em 0.4em 0.4em lime;"
  );

  // 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>" + "Year" + "</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.year + "</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	GitHub ID	Year	Class Of	Role
Mr M	jm1021	Graduate	1977	Teacher
Edwin	EdwinKuttappi	Junior	2024	Student
Emaad	Emaad-Mir	Sophmore	2025	Student
Luka	LukaVDB	Junior	2024	Student
Jishnu	JishnuS420	Junior	2024	Student