console.log can be a tool used for debugging and inspecting the behavior of code while it is running. It allows the printing of messages or values to the console, which can help in understanding what is happening in the code, potentially identifying errors or unexpected behavior.
%%html
<html>
<head>
<style>
#output {
background-color: #353b45;
padding: 10px;
border: 3px solid #ccc;
}
</style>
</head>
<body>
<p id="data" hidden>
</p>
<div id="output">
Hello!
</div>
</body>
</html>
Hello!
%%js // required to allow cell to be JavaScript enabled
console.log("JavaScript/Jupyter Output Intro");
// Browser Console output; debugging or tracing
console.log("Hello, World!");
// Set element in HTML above using DOM (Document Object Model)
document.getElementById("output").textContent = "Hello, World!";
// Jupyter built in magic element for testing and convenience of development
element.textContent = "Hello, World!"; // element is an output option as part of %%js magic
//alert("Hello, World!");
<IPython.core.display.Javascript object>
%%js
console.log("Variable Definition");
var msg = "Hello, World Again!";
// Use msg to output code to Console and Jupyter Notebook
console.log(msg); //right click browser select Inspect, then select Console to view
document.getElementById("output").textContent = msg;
element.append(msg);
//alert(msg);
<IPython.core.display.Javascript object>
%%js
console.log("Function Definition");
/* Function: logIt
* Parameter: output
* Description: The parameter is "output" to console and jupyter page
*/
function logIt(msg) {
console.log(msg);
element.append(msg);
document.getElementById("output").textContent = msg;
//alert(output);
}
// sequence of code build logIt parameter using concatenation
var msg = "I am a student," // replaces content of variable
var classOf = "I am in the AP CSP class of 2023-2024!"
logIt(msg + " " + classOf); // concatenation of strings
<IPython.core.display.Javascript object>
%%js
console.log("Examine Data Types");
// Function to add typeof to output
function getType(output) {
return typeof output + ": " + output;
}
// Function defintion
function logIt(msg) {
console.log(getType(msg)); // logs string
console.info(msg); // logs object
document.getElementById("output").textContent = msg;
element.append(getType(msg) + " "); // adds to Jupyter output
//alert(getType(msg));
}
// Common Types
element.append("Common Types ");
logIt("Mr M"); // String
logIt(1997); // Number
logIt(true); // Boolean
// Object Type, this definition is often called a array or list
element.append("Object Type, array ");
var scores = [
90,
80,
100
];
logIt(scores);
// Complex Object, this definition is often called hash, map, hashmap, or dictionary
element.append("Object Type, hash or dictionary ");
var person = { // key:value pairs seperated by comma
"name": "Tucker",
"role": "Student"
};
logIt(person);
logIt(JSON.stringify(person)); //method used to convert this object into readable format
<IPython.core.display.Javascript object>
%%js
console.log("Person objects");
/* class: Person
* Description: A collection of Person data
*/
class Person {
/* method: constructor
* parameters: name, ghID - GitHub ID, classOf - Graduation Class
* description: returns object when "new Person()" is called with matching parameters
* assignment: this.name, this.ghID, ... are properties retained in the returned object
* default: role uses a default property, it is set to "Student"
*/
constructor(name, ghID, classOf, role="Student") {
this.name = name;
this.ghID = ghID;
this.classOf = classOf;
this.role = role;
}
/* method: setter
* parameters: role - role in classroom
* description: this.role is updated from default value to value contained in role parameter
*/
setRole(role) {
this.role = role;
}
/* method: getter
* description: turns properties of object into JSON object
* return value: JSON object
*/
getJSON() {
const obj = {type: typeof this, name: this.name, ghID: this.ghID, classOf: this.classOf, role: this.role};
const json = JSON.stringify(obj);
return json;
}
/* method: logIT
* description: this Person object is logged to console
*/
logIt() {
//Person Object
console.info(this);
// HTML output
document.getElementById("output").textContent = this.getJSON();
//Log to Jupter
element.append(this.role + " object in JSON: ");
element.append(this.getJSON());
element.append(" ");
//alert(this.getJSON());
}
}
// make a new Person Object
const teacher = new Person("Tucker", "tuckergol", 1977); // object type is easy to work with in JavaScript
// update role to Teacher
var role = "Student";
teacher.setRole(role); // set the role
teacher.logIt(); // log to console
// make a new Person Object
const student = new Person("Jane Doe", "jane", 2007); // object type is easy to work with in JavaScript
student.logIt(); // log to console
<IPython.core.display.Javascript object>
%%js
console.log("Classroom object");
/* class: Person
* Description: A collection of Person data
*/
class Person {
/* method: constructor
* parameters: name, ghID - GitHub ID, classOf - Graduation Class
* description: returns object when "new Person()" is called with matching parameters
* assignment: this.name, this.ghID, ... are properties retained in the returned object
* default: this.role is a default property retained in object, it is set to "Student"
*/
constructor(name, ghID, classOf, role="Student") {
this.name = name;
this.ghID = ghID;
this.classOf = classOf;
this.role = role;
}
/* method: setter
* parameters: role - role in classroom
* description: this.role is updated from default value to value contained in role parameter
*/
setRole(role) {
this.role = role;
}
/* method: getter
* description: turns properties of object into JSON object
* return value: JSON object
*/
getJSON() {
const obj = {type: typeof this, name: this.name, ghID: this.ghID, classOf: this.classOf, role: this.role};
const json = JSON.stringify(obj);
return json;
}
/* method: logIT
* description: this Person object is logged to console
*/
logIt() {
//Person Object
console.info(this);
// HTML output tag
document.getElementById("output").textContent = this.getJSON();
//Log to Jupter
element.append("Person json <br>");
element.append(this.getJSON() + "<br>");
//alert(this.getJSON());
}
}
/* class: Classroom
* Description: A collection of Person objects
*/
class Classroom {
/* method: constructor
* parameters: teacher - a Person object, students - an array of Person objects
* description: returns object when "new Classroom()" is called containing properties and methods of a Classroom
* assignment: this.classroom, this.teacher, ... are properties retained in the returned object
*/
constructor(teacher, students) {
/* spread: this.classroom contains Teacher object and all Student objects
* map: this.json contains of map of all persons to JSON
*/
this.teacher = teacher;
this.students = students;
this.classroom = [teacher, ...students]; // ... spread option
this.json = '{"classroom":[' + this.classroom.map(person => person.getJSON()) + ']}';
}
/* method: logIT
* description: this Classroom object is logged to console
*/
logIt() {
//Classroom object
console.log(this);
// HTML output
document.getElementById("data").textContent = this.json;
document.getElementById("output").textContent = this.json;
//Classroom json
element.append("Classroom object in JSON: ");
element.append(this.json);
//alert(this.json);
}
}
/* function: constructCompSciClassroom
* Description: Create data for Classroom and Person objects
* Returns: A Classroom Object
*/
function constructCompSciClassroom() {
// define a Teacher object
const teacher = new Person("Mr M", "jm1021", 1977, "Teacher"); // optional 4th parameter
// define a student Array of Person objects
const students = [
new Person("Anthony", "tonyhieu", 2022),
new Person("Bria", "B-G101", 2023),
new Person("Allie", "xiaoa0", 2023),
new Person("Tigran", "Tigran7", 2023),
new Person("Rebecca", "Rebecca-123", 2023),
new Person("Vidhi", "VidhiKulkarni", 2024)
];
// make a CompSci classroom from formerly defined teacher and student objects
return new Classroom(teacher, students); // returns object
}
// assigns compsci to the object returned by "constructCompSciClassroom()" function
const compsci = constructCompSciClassroom();
// output of Objects and JSON in CompSci classroom
compsci.logIt();
<IPython.core.display.Javascript object>
%%js
console.log("Classroom Web Page");
// extract JSON text from output element in HTML page
const jsonText = document.getElementById("data").innerHTML;
// convert JSON text to a JavaScript Object to process
const classroom = JSON.parse(jsonText).classroom;
console.log(classroom);
// make an HTML Out format for pretty display
/* Template literals (`), can make HTML generation more concise;
* the map functions generates row strings and the join method combines them;
* this replaces longer and ugly for loop and string concatenation.
*/
const htmlOut = `
<table>
<thead>
<tr>
<th>Name</th>
<th>GitHub ID</th>
<th>Class Of</th>
<th>Role</th>
</tr>
</thead>
<tbody>
${classroom.map(row => `
<tr>
<td>${row.name}</td>
<td>${row.ghID}</td>
<td>${row.classOf}</td>
<td>${row.role}</td>
</tr>
`).join('')}
</tbody>
</table>
`;
// assign/set htmlOut to output element in HTML page
document.getElementById("output").innerHTML = htmlOut;
// show raw HTML
console.log(htmlOut);
element.append(htmlOut);
<IPython.core.display.Javascript object>