JavaScript
- Build a Person Function/Class object and JSON
- Build a Website Array/List of Persons and JSON
- IJavaScript and Table formatting using toHTML method
- Team Project (travel website) Itinerary Table
// define function logItType
function logItType(output) {
console.log(typeof output, ";", output); //will print out the type of data, semicolon, and the data itself
}
// define a function to hold data for a Person
function Person(name, ghID, age) {
this.name = name;
this.ghID = ghID;
this.age = age;
this.role = "";
}
// define a setter for role in Person data
Person.prototype.setRole = function(role) { //Definition of a prototype allow for the definition of a method associated with the function<
this.role = role;
}
// define a JSON conversion "method" associated with Person
Person.prototype.toJSON = function() {
const obj = {name: this.name, ghID: this.ghID, age: this.age, role: this.role};
const json = JSON.stringify(obj); // json/string is useful when passing data on internet
return json;
}
// make a new Person and assign to variable student
var student = new Person("Linda", "LindaLiu1202", 15); // object type is easy to work with in JavaScript
logItType(student); // before role
logItType(student.toJSON()); // ok to do this even though role is not yet defined
// output of Object and JSON/string associated with Student
student.setRole("Student"); // set the role
logItType(student);
logItType(student.toJSON());
function logItType(output) {
console.log(typeof output, ";", output); //will print out the type of data, semicolon, and the data itself
}
function Person(name, number, age) {
this.name = name;
this.number = number;
this.age = age;
this.role = "";
}
Person.prototype.setRole = function(role) { //Definition of a prototype allow for the definition of a method associated with the function<
this.role = role;
}
Person.prototype.toJSON = function() {
const obj = {name: this.name, number: this.number, age: this.age, role: this.role};
const json = JSON.stringify(obj); // json/string is useful when passing data on internet
return json;
}
var coder = new Person("Linda", 8581234567, 15); // object type is easy to work with in JavaScript
logItType(coder); // before role
logItType(coder.toJSON()); // ok to do this even though role is not yet defined
coder.setRole("Coder"); // set the role
logItType(coder);
logItType(coder.toJSON());
// define a user Array of Person(s)
var users = [
new Person("Emily", "8588888888", 17),
new Person("Alice", "8583947583", 19),
new Person("Chloe", "8583948501", 18),
new Person("Ann", "8583749284", 16),
new Person("Abby", "8583749843", 15)
];
// define a website and build Website objects and json
function Website(coder, users){ // 1 teacher, many student
// start website with Coder
this.coder = coder;
this.website = [coder];
// add each User to Website
this.users = users;
this.users.forEach(user => { user.setRole("User"); this.website.push(user); });
// build json/string format of Website
this.json = [];
this.website.forEach(person => this.json.push(person.toJSON()));
}
// make a travel webiste from formerly defined coder and users
travel = new Website(coder, users);
// output of Objects and JSON in Travel website
logItType(travel.website); // constructed website object
logItType(travel.website[0].name); // abstract 1st objects name
logItType(travel.json[0]); // show json conversion of 1st object to string
logItType(JSON.parse(travel.json[0])); // show JSON.parse inverse of JSON.stringify
// define an HTML conversion "method" associated with Webiste
Website.prototype._toHtml = function() {
// HTML Style is build using inline structure
var style = (
"display:inline-block;" +
"border: 2px solid white;" +
"box-shadow: 0.4em 0.4em 0.4em white;"
);
// 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>" + "Number" + "</mark></th>";
body += "<th><mark>" + "Age" + "</mark></th>";
body += "<th><mark>" + "Role" + "</mark></th>";
body += "</tr>";
// Data of Array, iterate through each row of travel.website
for (var row in travel.website) {
// tr for each row, a new line
body += "<tr>";
// td for each column of data
body += "<td>" + travel.website[row].name + "</td>";
body += "<td>" + travel.website[row].number + "</td>";
body += "<td>" + travel.website[row].age + "</td>";
body += "<td>" + travel.website[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(travel._toHtml());