August 2023 to June 2024
View the Project on GitHub sfremy/csablog
by
Hack: Adapt this tutorial to your own work and interests, how many steps do you understand?
Let's take a look at the tutorial code provided:
This opens up an HTML window which makes a header with %%html.
Using the style tag, the header's background colour is set as a blue-black (hex code #353b45), 10 pixels of padding are added between the header and the edges of the window, and a 3-pixel grey border (hex code #ccc).
The header contains the text specified in the div data container "output", specifically "Hello!".
%%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>
console.log() prints out the string passed to it within the browser console. Here, we are passing the strings "JavaScript/Jupyter Output Intro" and "Hellow World!". alert() prints a string to a pop-up alert within the Jupyter browser window.
getElementById is setting "output" to "Hello World!" but I'm unsure of the functionality of the element.textContext definitinon.
%%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!");
The variable msg is set using var to the string "Hello, World Again!". This string is appended to "output" and the contents of msg are printed to the console and Jupyter with console.log() and alert().
%%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);
This defines a function called logIt which takes a parameter msg. It appends this parameter to element and appends to "output".
Two variables, msg and classOf are defined as the strings "Hello, Students!" and "Welcome CS class of 2023-2024.". A concatentation of these strings (which would be "Hello, Students! Welcome CS class of 2023-2024.") is passed to the funciton logIt.
%%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 = "Hello, Students!" // replaces content of variable
var classOf = "Welcome CS class of 2023-2024."
logIt(msg + " " + classOf); // concatenation of strings
A number of functions are defined.
%%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": "Mr M",
"role": "Teacher"
};
logIt(person);
logIt(JSON.stringify(person)); //method used to convert this object into readable format
A class Person is defined, which allows all the associated data to be stored as a variable.
Two Person instances are made: one callled teacher and another called student. teacher's role is also set to "teacher".
%%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("Mr M", "jm1021", 1977); // object type is easy to work with in JavaScript
// update role to Teacher
var role = "Teacher";
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
Class Person is unchanged. Another class, Classroom, is created and takes two parameters, teacher and students. An array classroom is created and recorded in the function logIt. A function constructCompsciClassroom() makes an instance of Classroom with preset teacher and student Person instances.
%%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();
The variable jsonText is assigned to the contents of "data". The variable classroom is assigned to the .classroom property of jsonText.
A HTML table is generated under the variable htmlOut, with columns corresponding to the categories in Person and the contents of classroom. This is the same format as the HTML table shown in the JQuery hack.
%%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);
console.log() can bring errors to attention by identifying incorrect outputs at various steps within the code process. In this JavaScript file we report elements of Person and Classroom during processing. If a datatype is incorrect, it will be shown.
tags: