Javascript Notes

Week 1 Python Notes

Focus and Habits Notes

Lists and Dictionaries Notes

Javascript Notes

Program Design and Development Notes

Identifying and Correcting Errors Notes

RapidAPI Notes

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

Hello, World!

Javascript can do much of what Python can do, but with compeltely different syntax and requirements. The equivalent of def in Python, for example, is function.

function logIt(output) { // Defining logIt
    console.log(output);
}
msg = "Hello again, world!"
logIt(msg);

Hello again, world!

Like Python, Javascript is a loosely-typed language. What type of information is stored in a variable is determined at runtime.

function logItType(output) {
    if (typeof output === "object") {
        console.log(output + " is an " + typeof output);
    } else {
        console.log(output + " is a " + typeof output);
  }
}
console.log("Looking at dynamic nature of types in JavaScript (from APCSP)")
logItType('"This thing I wrote"');
logItType(2.7);
logItType([1, 2, 3]); // "Object" is generic; it is similar to Python "List"

Looking at dynamic nature of types in JavaScript (from APCSP)
"This thing I wrote" is a string
2.7 is a number
1,2,3 is an object

Below, I've been so plagiarinspired by the Javascript tutorial that I've made a function of the same name that assigns different information to an object Person. I've then put in the role setting function (using prototype to associate a method with the function), toJSON to then print the data later.

However, variables have been redefined to fit a new purpose for the table coming later.

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

// make a new Person and assign to variable teacher
var teacher = new Person("Mr. Mortensen", "N/A", "N/A");
teacher.setRole("Teacher");

// output of Object and JSON/string associated with Teacher
logItType(teacher);  // object type is easy to work with in JavaScript
logItType(teacher.toJSON());

[object Object] is an object
{"name":"Mr. Mortensen","tscore":"N/A","role":"Teacher"} is a string

Now, we're going to look at last week's scores, averaging the peer scores into one value and taking the teacher score as its own variable. We'll put define those scores depending on the person in question being scored, and display them in a pretty table.

The table will have a DIFFERENT design from the one on the Javascript Tutorial page to show some amount of fluency with HTML.

// This is defining the scores of each of the people
var students = [ 
    new Person("Drew", "2.7", "N/A"),
    new Person("Devon", "2.6", "2.6"),
    new Person("Jagger", "2.6", "2.63"),
    new Person("Trent", "2.7", "2.7+"),
];

// This defines
function Scoredata(teacher, students){ // 1 teacher, many student
    // Table begins with teacher
    teacher.setRole("Teacher");
    this.teacher = teacher;
    this.scoredata = [teacher];
    // Students get added to table
    this.students = students;
    this.students.forEach(student => { student.setRole("Student"); this.scoredata.push(student); });
    // build json/string format of the data
    this.json = [];
    this.scoredata.forEach(person => this.json.push(person.toJSON()));
}

// make a source of info from the student data above
thistable = new Scoredata(teacher, students);

// define an HTML conversion "method" associated with the data
Scoredata.prototype._toHtml = function() {
    // HTML Style is build using inline structure
    var style = (
      "display:inline-block;" +
      "background:purple;" +
      "border: 4px solid orange;" +
      "box-shadow: 0.6em 0.6em 0em white;"
    );
  
    // HTML Body of Table is build as a series of concatenations (+=)
    var body = "";
    // Heading for Array Columns
    body += "<tr>";
    body += "<th><u>" + "Name" + "</u></th>";
    body += "<th><u>" + "Teacher Score" + "</u></th>";
    body += "<th><u>" + "Student Score" + "</u></th>";
    body += "<th><u>" + "Role" + "</u></th>";
    body += "</tr>";
    // Data of Array is iterated 
    for (var row of thistable.scoredata) {
      // tr for each row, a new line
      body += "<tr>";
      // td for each column of data
      body += "<td>" + row.name + "</td>";
      body += "<td>" + row.tscore + "</td>";
      body += "<td>" + row.avscore + "</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(thistable._toHtml());

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

Name	Teacher Score	Student Score	Role
Mr. Mortensen	N/A	N/A	Teacher
Drew	2.7	N/A	Student
Devon	2.6	2.6	Student
Jagger	2.6	2.63	Student
Trent	2.7	2.7+	Student