We can use some JavaScript functions to affect Jupyter notebooks.
There are two ways to run JavaScript in a notebook that is running a Python kernel, Cell Magics and IPython.display.
Cells where the first line starts with %%
will be interpreted by the notebook kernel as Magics.
%%javascript
alert("Hello World");
%%html
<script type="text/javascript">
alert("Hello World");
</script>
The IPython.display
module can run JavaScript.
from IPython.display import Javascript
Javascript('alert("Hello World");')
from IPython.display import Javascript
Javascript('''
alert("Hello World");
''')
from IPython.display import Javascript
Javascript(filename='JavaScript_demo.js')
from IPython.display import HTML
HTML('''
<script type="text/javascript">
alert("Hello World");
</script>
''')
%%javascript
alert("Hello World");
Scroll to the top of the notebook
Jupyter.notebook.scroll_to_bottom();
Scroll to the bottom of the notebook
Jupyter.notebook.scroll_to_top();
Scroll the top of the page to a given cell (cell_index, time_in_ms)
Jupyter.notebook.scroll_to_cell(4, 1000);
Scroll the middle of the page to a given cell (cell_index, percent_of_the_page, time_in_ms)
Jupyter.notebook.scroll_cell_percent(4, 50, 1000);
Display a dialog that allows the user to edit the Notebook's metadata
Jupyter.notebook.edit_metadata();
Count the cells in this notebook
var n = Jupyter.notebook.ncells();
Get the index of the currently selected cell
var n = Jupyter.notebook.get_selected_index();
Get all cell objects in this notebook
var cells = Jupyter.notebook.get_cells();
alert(JSON.stringify(cells[0]));
Get a cell object from this notebook (cell_index)
var cell = Jupyter.notebook.get_cell(4);
Get the currently selected cell
var cell = Jupyter.notebook.get_selected_cell();
Get all cell elements in the notebook
var elements = Jupyter.notebook.get_cell_elements();
alert(JSON.stringify(elements));
Get a particular cell element (cell_index)
var element = Jupyter.notebook.get_cell_element(4);
alert(JSON.stringify(element));
Select a cell (cell_index)
Jupyter.notebook.select(4);
Select the next cell
Jupyter.notebook.select_next();
Select the previous cell
Jupyter.notebook.select_prev();
Make the notebook enter command mode
Jupyter.notebook.command_mode();
Make the selected cell enter edit mode
Jupyter.notebook.edit_mode();
Turn a cell into a code cell (cell_index)
Jupyter.notebook.to_code(4);
Turn a cell into a markdown cell (cell_index)
Jupyter.notebook.to_markdown(4);
Delete a cell (cell_index)
Jupyter.notebook.delete_cell();
Restore the most recently deleted cell(s)
Jupyter.notebook.undelete_cell();
Insert a cell of given type (markdown
or code
) below given index (cell_type, cell_index)
Jupyter.notebook.insert_cell_below("code", 4);
Insert cell at the end of the notebook (cell_type)
Jupyter.notebook.insert_cell_at_bottom("markdown");
Cut the selected cell
Jupyter.notebook.cut_cell();
Copy the selected cell
Jupyter.notebook.copy_cell();
Replace the selected cell with the cells in the clipboard
Jupyter.notebook.paste_cell_replace();
Paste cells from the clipboard above the selected cell
Jupyter.notebook.paste_cell_above();
Paste cells from the clipboard below the selected cell
Jupyter.notebook.paste_cell_below();
Hide a cell's output (cell_index)
Jupyter.notebook.collapse_output(4);
Show a cell's output (cell_index)
Jupyter.notebook.expand_output(4);
Clear a cell's output (cell_index)
Jupyter.notebook.clear_output(4);
Clear all code cell outputs
Jupyter.notebook.clear_all_output();
Toggle a scrollbar for long cell outputs (cell_index)
Jupyter.notebook.toggle_output_scroll();
Prompt the user to restart and run all
Jupyter.notebook.restart_run_all();
Restart and clear output without asking
Jupyter.notebook.restart_clear_output({"confirm":false});
Execute all cells
Jupyter.notebook.execute_all_cells();
Execute or render selected cell and go into command mode
Jupyter.notebook.execute_selected_cells();
Execute or render cell outputs and select the next cell
Jupyter.notebook.execute_cell_and_select_below();
Execute a contiguous range of cells (cell_index_start, cell_index_end)
Jupyter.notebook.execute_cell_range(4, 6);
Get notebook name (excluding file extension)
var notebook_name = Jupyter.notebook.get_notebook_name();
Rename notebook (file extension not required) ("notebook name")
Jupyter.notebook.rename("NotebookFunctions");
Save notebook and create a checkpoint
Jupyter.notebook.save_checkpoint();
%%javascript
var notebook_name = Jupyter.notebook.get_notebook_name();
element.text("This notebook is called " + notebook_name)
We can pass variables from Python to JavaScript.
x = 42
from IPython.display import Javascript
Javascript('alert(' + str(x) + ');')
It is also possible to pass variables from JavaScript to Python, but the behaviour is not always consistent.
%%javascript
var x = 24;
IPython.notebook.kernel.execute("x = " + x);
# from Python
x = 42
# to JavaScript
from IPython.display import Javascript
js_command = 'alert(' + str(x) + ');'
Javascript(js_command)
%%javascript
// from JavaScript
var x = 24;
// to Python
IPython.notebook.kernel.execute("x = " + x);
print(x)