• Introduction to Jupyter
• Executing JavaScript and Debugging
• Programmer Jokes

Introduction to Jupyter

Jupyter Notebooks are a powerful, open-source web application that allows you to create and share documents containing live code, equations, visualizations, and narrative text. They are widely used in data science, scientific computing, and education for their interactive and reproducible nature. The "Jupyter" name is a combination of the core languages it was originally built for: Julia, Python, and R. Today, Jupyter supports a vast ecosystem of languages through its kernel architecture.

A Jupyter Notebook is composed of a series of cells. There are two primary types of cells:

• Code Cells: These contain code for a specific programming language. When you run a code cell, the output (like a printed value, a plot, or an error message) is displayed directly below it.
• Markdown Cells: These cells are for text documentation. You can use Markdown, a simple markup language, to format your text with headings, bolding, italics, lists, and links. This allows you to add explanations, comments, and structure to your work.

FRQ 1: In your own words, what is the core purpose of a Jupyter Notebook, and how do its two main cell types contribute to this purpose?

Integrating JavaScript into Jupyter

While Jupyter is most commonly associated with Python, its versatility allows it to run other languages. By default, a standard Jupyter environment runs a Python kernel. To execute JavaScript directly, you can use a special command known as a magic command.

The %%javascript magic command tells the notebook to interpret the content of the entire cell as JavaScript code. This is a powerful feature because it allows you to:

• Create Interactive Visualizations: Use JavaScript libraries like D3.js or Plotly.js to build dynamic, interactive charts and graphs that go beyond static images.
• Develop Web Components: Test and prototype small web applications or UI elements directly within your notebook, complete with HTML, CSS, and JavaScript.
• Debug and Explore: Use the browser's developer tools to inspect and debug your code.

Executing JavaScript and Debugging

1. Open Developer Tools: In your web browser (Chrome, Firefox, etc.), you can access the developer console. In VSCode, navigate to Help > Toggle Developer Tools.
2. Access the Console: Select the Console tab to view the output from your console.log() statements and any errors or warnings generated by your JavaScript.
3. Execute Code: After writing your %%javascript cell, click the "Run" button to execute it. The output will appear in the cell's output area and the browser's console.

FRQ 2: How does the %%javascript magic command enable a Python-based Jupyter Notebook to execute JavaScript, and what is the key tool you would use to see the results of your JavaScript code?

Example: Interactive Data Structures

To demonstrate the power of JavaScript in a notebook, let's create a small application that uses an array of objects to store jokes. This structure is more flexible than a simple array of strings because it allows you to store multiple pieces of related information for each item.

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: Explain why using an array of objects for the programmer jokes is a more extensible design than a simple array of strings.

File Management and Best Practices for GitHub Pages

Jupyter Notebooks are excellent for local development, but to share them on the web, you often need to convert them to a static format. GitHub Pages provides a seamless way to do this, especially when using a tool like Jekyll.

1. Organize Your Files: Place all your .ipynb files in a dedicated directory, such as _notebooks. This keeps your project organized and makes it easy for GitHub Pages to find and convert them.
2. Pull and Push: Use standard Git commands (git clone, git pull, git add, git commit, git push) to manage your project repository.
3. Add Frontmatter: To properly render notebooks as webpages, you need to include YAML Frontmatter at the very top of your notebook file. This is a special block of text enclosed by --- that provides metadata for Jekyll, such as the permalink (the URL for the page) and the layout (the HTML template to use).

FRQ 4: Why is it a best practice to use a separate directory for Jupyter Notebook files and to include YAML frontmatter in each notebook when deploying to GitHub Pages?