from IPython.core.display import display, HTML
display(HTML('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Say Hello</title>
<script>
function sayHello() {
var name = document.getElementById("nameInput").value;
document.getElementById("greeting").innerHTML = "Hello " + name + "!";
}
</script>
</head>
<body>
<h1 style="background-color: #000000">Enter your name</h1>
<input type="text" id="nameInput" placeholder="Your name">
<button onclick="sayHello()">Submit</button>
<h2 id="greeting"></h2>
</body>
</html>
'''))
/var/folders/0t/v_37b_gs2rl59djqsqmph6v80000gn/T/ipykernel_8467/2093410181.py:1: DeprecationWarning: Importing display from IPython.core.display is deprecated since IPython 7.14, please import from IPython display
from IPython.core.display import display, HTML
<!DOCTYPE html>
Enter your name
%%javascript
console.log("Object: assigning key-value objects");
var obj = {
name: "Avika",
age: 15,
classes: ["AP Chem", "AP Calculus AB", "AP English Seminar", "AP CSP"]
};
// Printing the object to the console
console.log(obj);
// -> { name: 'Avika', age: 15, classes: ['AP Chem', 'AP Calculus AB', 'AP English Seminar', 'AP CSP'] }
// Accessing object fields
console.log(obj.name);
// -> Avika
console.log(obj.age);
// -> 15
console.log(obj.classes);
// -> ['AP Chem', 'AP Calculus AB', 'AP English Seminar', 'AP CSP']
<IPython.core.display.Javascript object>
Javascript doesn’t run properly in a jupyter notebook as seen above. See how we use DOMS to fix this issue below!
from IPython.core.display import display, HTML
display(HTML('''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Object</title>
</head>
<body>
<h1>Using DOMS to Display Objects</h1>
<!-- These are the paragraphs where the output will be shown -->
<p id="name"></p>
<p id="age"></p>
<p id="classes"></p>
<script>
// Create the object
var obj = {
name: "Avika",
age: 15,
classes: ["AP Chem", "AP Calculus AB", "AP English Seminar", "AP CSP"]
};
// Set the inner HTML of the paragraphs
document.getElementById("name").innerHTML = "Name: " + obj.name;
document.getElementById("age").innerHTML = "Age: " + obj.age;
document.getElementById("classes").innerHTML = "Classes: " + obj.classes.join(", ");
</script>
</body>
</html>
'''))
/var/folders/0t/v_37b_gs2rl59djqsqmph6v80000gn/T/ipykernel_8467/942155872.py:1: DeprecationWarning: Importing display from IPython.core.display is deprecated since IPython 7.14, please import from IPython display
from IPython.core.display import display, HTML
<!DOCTYPE html>
Displaying Object Data
Conditional Operators
%%html
<script>
console.log("If statements + Operators")
var age1 = 17
var age2 = 37
if (age1 > age2) {
// runs if age1 is more than age2
console.log("age1 is more than age2")
} else if (age1 == age2) {
// runs if age1 and age2 are the same
console.log("age1 is the same as age2")
// (age1 < age2)
} else {
// runs if age2 is more than age1
console.log("age1 is less than age2")
}
</script>
Input: Grade Calculator
%%html
<!-- Help Message -->
<h3>Input scores, press tab to add each new number.</h3>
<!-- Totals -->
<ul>
<li>
Total : <span id="total">0.0</span>
Count : <span id="count">0.0</span>
Average : <span id="average">0.0</span>
</li>
</ul>
<!-- Rows added using scores ID -->
<div id="scores">
<!-- javascript generated inputs -->
</div>
<script>
// Executes on input event and calculates totals
function calculator(event) {
var key = event.key;
// Check if the pressed key is the "Tab" key (key code 9) or "Enter" key (key code 13)
if (key === "Tab" || key === "Enter") {
event.preventDefault(); // Prevent default behavior (tabbing to the next element)
var array = document.getElementsByName('score'); // setup array of scores
var total = 0; // running total
var count = 0; // count of input elements with valid values
for (var i = 0; i < array.length; i++) { // iterate through array
var value = array[i].value;
if (parseFloat(value)) {
var parsedValue = parseFloat(value);
total += parsedValue; // add to running total
count++;
}
}
// update totals
document.getElementById('total').innerHTML = total.toFixed(2); // show two decimals
document.getElementById('count').innerHTML = count;
if (count > 0) {
document.getElementById('average').innerHTML = (total / count).toFixed(2);
} else {
document.getElementById('average').innerHTML = "0.0";
}
// adds newInputLine, only if all array values satisfy parseFloat
if (count === document.getElementsByName('score').length) {
newInputLine(count); // make a new input line
}
}
}
// Creates a new input box
function newInputLine(index) {
// Add a label for each score element
var title = document.createElement('label');
title.htmlFor = index;
title.innerHTML = index + ". ";
document.getElementById("scores").appendChild(title); // add to HTML
// Setup score element and attributes
var score = document.createElement("input"); // input element
score.id = index; // id of input element
score.onkeydown = calculator // Each key triggers event (using function as a value)
score.type = "number"; // Use text type to allow typing multiple characters
score.name = "score"; // name is used to group all "score" elements (array)
score.style.textAlign = "right";
score.style.width = "5em";
document.getElementById("scores").appendChild(score); // add to HTML
// Create and add blank line after input box
var br = document.createElement("br"); // line break element
document.getElementById("scores").appendChild(br); // add to HTML
// Set focus on the new input line
document.getElementById(index).focus();
}
// Creates 1st input box on Window load
newInputLine(0);
</script>
Input scores, press tab to add each new number.
- Total : 0.0 Count : 0.0 Average : 0.0