Javascript-integration.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# How to deliver JavaScript to the IPython Notebook Viewer\n",
    "\n",
    "At first glance there appear to be at least four mechanisms\n",
    "for adding JavaScript code to an IPython notebook:\n",
    "    \n",
    "* A notebook cell marked `%%javascript`\n",
    "* A Markdown cell with a `<script>` inside\n",
    "* An `HTML()` display with a `<script>` inside\n",
    "* A `JavaScript()` display with code inside\n",
    "\n",
    "Here are examples of all four possibilities:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "%%javascript\n",
    "\n",
    "console.log('Log message from the %%javascript cell')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "*(Markdown cell with a `<script>` inside.)*\n",
    "<script>console.log('Log message from the Markdown cell')</script>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from IPython.display import HTML\n",
    "HTML('<script>console.log(\"Log message from an HTML display\")</script>')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from IPython.display import Javascript\n",
    "Javascript('console.log(\"Log message from a Javascript display\")')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "By checking your JavaScript console\n",
    "while viewing this notebook,\n",
    "you can determine which of these four mechanisms fires\n",
    "when the static notebook is displayed later.\n",
    "In particular,\n",
    "when [this notebook is viewed\n",
    "at the official IPython Notebook Viewer](http://nbviewer.ipython.org/github/brandon-rhodes/astronomy-notebooks/blob/master/Javascript-integration.ipynb),\n",
    "you will find that **only two** of the four mechanisms work:\n",
    "\n",
    "* The Markdown cell with a `<script>` inside **works**\n",
    "* The `HTML()` display with a `<script>` inside **works**\n",
    "\n",
    "Why do these two mechanisms survive the transition to a static notebook?\n",
    "Because the IPython Notebook Viewer passes HTML through unharmed\n",
    "to the static display of the notebook,\n",
    "but it is *not* willing to invoke the JavaScript expressions\n",
    "that are produced by both ``%%javascript`` cells\n",
    "and ``Javascript()`` display objects.\n",
    "\n",
    "So embedding JavaScript inside of HTML is the safe choice\n",
    "if you want notebooks that can both be opened live\n",
    "but that can also be viewed later in a viewer."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}