3.2 - Data Abstraction | Javascript & Assignments

• Javascript Example
• Grading

from IPython.core.display import HTML; set_custom_css = lambda: HTML('<style>:root {--light-pink: #ffccdd; --medium-pink: #ff66b3; --dark-pink: #ff3385; --accent-pink: #ff99cc; --background-pink: #ffe6f0;} body {background-color: var(--background-pink) !important; color: var(--dark-pink) !important;} header {background-color: var(--medium-pink) !important; color: white !important; padding: 10px 20px !important; border-radius: 8px !important; border-bottom: 2px solid var(--dark-pink) !important;} article {background-color: var(--light-pink) !important; color: var(--dark-pink) !important; border: 2px solid var(--medium-pink) !important; padding: 20px !important; border-radius: 8px !important;} a {color: var(--accent-pink) !important;} a:hover {color: var(--dark-pink) !important;} h1, h2, h3, h4 {color: white !important;} blockquote {background-color: #272726 !important; border-left: 4px solid var(--medium-pink) !important; color: var(--dark-pink) !important; padding: 10px 20px !important; margin: 10px 0 !important; border-radius: 4px !important;} code {background-color: var(--accent-pink) !important; color: white !important; padding: 2px 4px !important; border-radius: 4px !important;} .site-nav {background-color: var(--medium-pink) !important;} table td {background-color: var(--dark-pink) !important;}</style>'); set_custom_css()

3.2.1

3.2.2

3.2.3

Javascript Example

Here’s an example of what the code above looks like in Javascript.

%%javascript
var possesions = {
  owner: "Lil Bro",
  dollars: 50,
  food: ["apps", "pizza", "banana"],
};

console.log(possesions);
// -> { owner: "Lil Bro", dollars: 50, food: ["apps","pizza","banana"] }
possesions.food[2] = "half-eaten banana";
console.log(possesions.food);
// -> [ "apps", "pizza", "half-eaten banana" ]
possesions.dollars = possesions.dollars / 2;
console.log(possesions.dollars);
// -> 25

console.log(JSON.stringify(possesions));
// -> {"owner":"Lil Bro","dollars":25,"food":["apps","pizza","half-eaten banana"]}

<IPython.core.display.Javascript object>

Hacks (homework)

• Find a JSON file/data online
• Read and edit the JSON using at least 5 different types of variables. Do this in Python and in Javascript

Grading

Using Mr. Morts rubric (x0.9)

• Assignment: 25%
• Homework/Hacks =: 75% (NOTE: please make sure that the JSON is detailed/complex and not very short)