• Lesson 1: Jupyter Notebooks & JavaScript
    • Introduction
    • Running JavaScript in Jupyter Notebooks
    • Example: Interactive Jokes Application
      • Programmer Jokes
      • Accountant Jokes
    • File Management in GitHub Pages
    • Best Practices

Lesson 1: Jupyter Notebooks & JavaScript

Introduction

This lesson explores the integration of JavaScript within Jupyter Notebooks, a powerful combination for interactive data exploration and web development. We will cover how to execute JavaScript code directly within Jupyter cells and manage related files within a GitHub Pages environment.

FRQ 1: Why might combining JavaScript with Jupyter Notebooks be useful for interactive projects?

Running JavaScript in Jupyter Notebooks

Jupyter Notebooks, while primarily known for Python, can execute various languages through kernels. For JavaScript, this typically involves using an IJavaScript kernel or leveraging the %%javascript magic command in a standard Python kernel environment, which allows for direct execution of JavaScript code within a cell.

To execute JavaScript in a Jupyter Notebook, follow these steps:

  1. Open Developer Tools: In VSCode, navigate to Help > Toggle Developer Tools.
  2. Access the Console: Select the Console tab to view outputs, errors, and warnings.
  3. Clear Console (Optional): Click the Clear Console button to have a clean output.
  4. Execute Code: Click the Play button next to the Jupyter cell containing JavaScript code.
FRQ 2: What might happen if you do not check the console after executing JavaScript in a notebook?

Example: Interactive Jokes Application

JavaScript can display random jokes, demonstrating arrays and basic functions.

Programmer Jokes

%%javascript
var compsci_joke_list = [
    { joke: "Why do programmers prefer dark mode? Because light attracts bugs.", complexity: "1" },
    { joke: "Why do Java developers wear glasses? Because they don't see sharp.", complexity: "2" },
    { joke: "How many programmers does it take to change a light bulb? None, that's a hardware problem.", complexity: "1" },
    { joke: "Why do Python programmers prefer snake_case? Because they can't C.", complexity: "2" },
    { joke: "Why was the JavaScript developer sad? Because he didn't know how to 'null' his feelings.", complexity: "3" },
    { joke: "Why do programmers always mix up Christmas and Halloween? Because Oct 31 == Dec 25.", complexity: "3" },
    { joke: "Why did the programmer quit his job? Because he didn't get arrays.", complexity: "O(n)" },
    { joke: "Why do Linux programmers prefer using the terminal? Because they don't like Windows.", complexity: "1" }
];
var randomIndex = Math.floor(Math.random() * compsci_joke_list.length);
var selectedJoke = compsci_joke_list[randomIndex];
console.log("Joke #" + (randomIndex + 1) + ": " + selectedJoke.joke + " (Complexity: " + selectedJoke.complexity + ")");
FRQ 3: Why might you choose an array of objects for the programmer jokes instead of just strings?

Accountant Jokes

%%javascript
var accounting_joke_list = [
    "Why did the accountant cross the road? To bore the people on the other side.",
    "What do accountants do when they're constipated? They work it out with a pencil.",
    "How does an accountant stay out of debt? He learns to act his wage.",
    "Why did the accountant stare at his glass of orange juice for three hours? Because on the box it said 'concentrate'.",
    "Why did the accountant get promoted? Because he knew how to balance his work and play.",
    "Why did the accountant get a job at the bakery? Because he was good at making dough.",
    "Why did the accountant get a job at the zoo? Because he was good with cheetahs.",
    "Why did the accountant get a job at the library? Because he was good at keeping books.",
    "Why did the accountant get a job at the circus? Because he was good at juggling numbers.",
    "Why did the accountant get a job at the gym? Because he was good at working out the numbers.",
    "Why did the accountant get a job at the farm? Because he was good at counting the chickens before they hatched."
];
var randomIndex = Math.floor(Math.random() * accounting_joke_list.length);
console.log("Joke #" + (randomIndex + 1) + ": " + accounting_joke_list[randomIndex]);
FRQ 4: Compare the structure of programmer jokes vs accountant jokes. What benefits does each structure provide?

File Management in GitHub Pages

Place all .ipynb files in the _notebooks directory. They are converted to Markdown and then HTML for web display.

  1. Clone the Repository: git clone [URL]
  2. Pull Latest Changes: git pull
  3. Open in VSCode: Navigate to the project directory and run code .
  4. Drag and Drop Files: Move .ipynb files into the _notebooks directory
FRQ 5: Why is proper file organization important for GitHub Pages deployment?

Best Practices

  • Organization: Keep notebooks well-organized and create subdirectories if needed.
  • Frontmatter: Include YAML frontmatter for permalinks and layouts.
  • Conversion: Understand notebooks are converted to Markdown and then HTML.
  • Testing: Test locally before pushing to GitHub.
FRQ 6: How can frontmatter help with notebook deployment and web page linking?