Getting_Started.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Some information/instruction.\n",
    "----\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<h1>Welcome</h1>\n",
    "\n",
    "Welcome to the first Jupyter notebook provided throughout this course on Quantum Cryptography.\n",
    "\n",
    "First off, <b>what is a Jupyter notebook?</b> \n",
    "\n",
    "A Jupyter notebook is viewed in the browser and takes, as the name suggests, the role of a notebook. \n",
    "\n",
    "A Jupyter notebooks allows us to combine text, equations and images with functional computer code.\n",
    "\n",
    "In other words, Jupyter notebooks allow us to work on the computer similarly as one would using an ordinary notebook and a graphical calculator.\n",
    "\n",
    "Here, computer code is implemented that makes calculations and plots graphs for us. \n",
    "\n",
    "The most common computer languages used in Jupyter notebooks are Julia, Python and R. This explains the choice of name Ju(lia)pyt(thon)(e)r.\n",
    "\n",
    "The notebooks provided throughout this course make use of code written in the Julia language.\n",
    "\n",
    "<h4>Accessible notebooks</h4>\n",
    "\n",
    "In case you are not familiar with computer code, no worries.\n",
    "\n",
    "The notebooks are meant to be accessible and <b>no previous knowledge on computer code is required</b>.\n",
    "\n",
    "The Julia code that is used throughout these notebooks works from the get go.\n",
    "\n",
    "By making use of the <b>interactive elements</b>, you can <b>explore quantum cryptography</b> in more detail.\n",
    "\n",
    "To illustrate, <b>please click inside the box of code just below and press shift-enter.</b>\n",
    "\n",
    "You will see a slider appear that can be used to interact with the code."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script charset=\"utf-8\">(function ($, undefined) {\n",
       "\n",
       "    function createElem(tag, attr, content) {\n",
       "\t// TODO: remove jQuery dependency\n",
       "\tvar el = $(\"<\" + tag + \"/>\").attr(attr);\n",
       "\tif (content) {\n",
       "\t    el.append(content);\n",
       "\t}\n",
       "\treturn el[0];\n",
       "    }\n",
       "\n",
       "    // A widget must expose an id field which identifies it to the backend,\n",
       "    // an elem attribute which is will be added to the DOM, and\n",
       "    // a getState() method which returns the value to be sent to the backend\n",
       "    // a sendUpdate() method which sends its current value to the backend\n",
       "    var Widget = {\n",
       "\tid: undefined,\n",
       "\telem: undefined,\n",
       "\tlabel: undefined,\n",
       "\tgetState: function () {\n",
       "\t    return this.elem.value;\n",
       "\t},\n",
       "\tsendUpdate: undefined\n",
       "    };\n",
       "\n",
       "    var Slider = function (typ, id, init) {\n",
       "\tvar attr = { type:  \"range\",\n",
       "\t\t     value: init.value,\n",
       "\t\t     min:   init.min,\n",
       "\t\t     max:   init.max,\n",
       "\t\t     step:  init.step },\n",
       "\t    elem = createElem(\"input\", attr),\n",
       "\t    self = this;\n",
       "\n",
       "\telem.onchange = function () {\n",
       "\t    self.sendUpdate();\n",
       "\t}\n",
       "\n",
       "\tthis.id = id;\n",
       "\tthis.elem = elem;\n",
       "\tthis.label = init.label;\n",
       "\n",
       "\tInputWidgets.commInitializer(this); // Initialize communication\n",
       "    }\n",
       "    Slider.prototype = Widget;\n",
       "\n",
       "    var Checkbox = function (typ, id, init) {\n",
       "\tvar attr = { type: \"checkbox\",\n",
       "\t\t     checked: init.value },\n",
       "\t    elem = createElem(\"input\", attr),\n",
       "\t    self = this;\n",
       "\n",
       "\tthis.getState = function () {\n",
       "\t    return elem.checked;\n",
       "\t}\n",
       "\telem.onchange = function () {\n",
       "\t    self.sendUpdate();\n",
       "\t}\n",
       "\n",
       "\tthis.id = id;\n",
       "\tthis.elem = elem;\n",
       "\tthis.label = init.label;\n",
       "\n",
       "\tInputWidgets.commInitializer(this);\n",
       "    }\n",
       "    Checkbox.prototype = Widget;\n",
       "\n",
       "    var Button = function (typ, id, init) {\n",
       "\tvar attr = { type:    \"button\",\n",
       "\t\t     value:   init.label },\n",
       "\t    elem = createElem(\"input\", attr),\n",
       "\t    self = this;\n",
       "\tthis.getState = function () {\n",
       "\t    return null;\n",
       "\t}\n",
       "\telem.onclick = function () {\n",
       "\t    self.sendUpdate();\n",
       "\t}\n",
       "\n",
       "\tthis.id = id;\n",
       "\tthis.elem = elem;\n",
       "\tthis.label = init.label;\n",
       "\n",
       "\tInputWidgets.commInitializer(this);\n",
       "    }\n",
       "    Button.prototype = Widget;\n",
       "\n",
       "    var Text = function (typ, id, init) {\n",
       "\tvar attr = { type:  \"text\",\n",
       "\t\t     placeholder: init.label,\n",
       "\t\t     value: init.value },\n",
       "\t    elem = createElem(\"input\", attr),\n",
       "\t    self = this;\n",
       "\tthis.getState = function () {\n",
       "\t    return elem.value;\n",
       "\t}\n",
       "\telem.onkeyup = function () {\n",
       "\t    self.sendUpdate();\n",
       "\t}\n",
       "\n",
       "\tthis.id = id;\n",
       "\tthis.elem = elem;\n",
       "\tthis.label = init.label;\n",
       "\n",
       "\tInputWidgets.commInitializer(this);\n",
       "    }\n",
       "    Text.prototype = Widget;\n",
       "\n",
       "    var Textarea = function (typ, id, init) {\n",
       "\tvar attr = { placeholder: init.label },\n",
       "\t    elem = createElem(\"textarea\", attr, init.value),\n",
       "\t    self = this;\n",
       "\tthis.getState = function () {\n",
       "\t    return elem.value;\n",
       "\t}\n",
       "\telem.onchange = function () {\n",
       "\t    self.sendUpdate();\n",
       "\t}\n",
       "\n",
       "\tthis.id = id;\n",
       "\tthis.elem = elem;\n",
       "\tthis.label = init.label;\n",
       "\n",
       "\tInputWidgets.commInitializer(this);\n",
       "    }\n",
       "    Textarea.prototype = Widget;\n",
       "\n",
       "    // RadioButtons\n",
       "    // Dropdown\n",
       "    // HTML\n",
       "    // Latex\n",
       "\n",
       "    var InputWidgets = {\n",
       "\tSlider: Slider,\n",
       "\tCheckbox: Checkbox,\n",
       "\tButton: Button,\n",
       "\tText: Text,\n",
       "\tTextarea: Textarea,\n",
       "\tdebug: false,\n",
       "\tlog: function () {\n",
       "\t    if (InputWidgets.debug) {\n",
       "\t\tconsole.log.apply(console, arguments);\n",
       "\t    }\n",
       "\t},\n",
       "\t// a central way to initalize communication\n",
       "\t// for widgets.\n",
       "\tcommInitializer: function (widget) {\n",
       "\t    widget.sendUpdate = function () {};\n",
       "\t}\n",
       "    };\n",
       "\n",
       "    window.InputWidgets = InputWidgets;\n",
       "\n",
       "})(jQuery, undefined);\n",
       "</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div id=\"interact-js-shim\">\n",
       "    <script charset=\"utf-8\">\n",
       "(function (IPython, $, _, MathJax, Widgets) {\n",
       "    $.event.special.destroyed = {\n",
       "\tremove: function(o) {\n",
       "\t    if (o.handler) {\n",
       "\t\to.handler.apply(this, arguments)\n",
       "\t    }\n",
       "\t}\n",
       "    }\n",
       "\n",
       "    var OutputArea = IPython.version >= \"4.0.0\" ? require(\"notebook/js/outputarea\").OutputArea : IPython.OutputArea;\n",
       "\n",
       "    var redrawValue = function (container, type, val) {\n",
       "\tvar selector = $(\"<div/>\");\n",
       "\tvar oa = new OutputArea(_.extend(selector, {\n",
       "\t    selector: selector,\n",
       "\t    prompt_area: true,\n",
       "\t    events: IPython.events,\n",
       "\t    keyboard_manager: IPython.keyboard_manager\n",
       "\t})); // Hack to work with IPython 2.1.0\n",
       "\n",
       "\tswitch (type) {\n",
       "\tcase \"image/png\":\n",
       "            var _src = 'data:' + type + ';base64,' + val;\n",
       "\t    $(container).find(\"img\").attr('src', _src);\n",
       "\t    break;\n",
       "\tdefault:\n",
       "\t    var toinsert = OutputArea.append_map[type].apply(\n",
       "\t\toa, [val, {}, selector]\n",
       "\t    );\n",
       "\t    $(container).empty().append(toinsert.contents());\n",
       "\t    selector.remove();\n",
       "\t}\n",
       "\tif (type === \"text/latex\" && MathJax) {\n",
       "\t    MathJax.Hub.Queue([\"Typeset\", MathJax.Hub, toinsert.get(0)]);\n",
       "\t}\n",
       "    }\n",
       "\n",
       "\n",
       "    $(document).ready(function() {\n",
       "\tWidgets.debug = false; // log messages etc in console.\n",
       "\tfunction initComm(evt, data) {\n",
       "\t    var comm_manager = data.kernel.comm_manager;\n",
       "        //_.extend(comm_manager.targets, require(\"widgets/js/widget\"))\n",
       "\t    comm_manager.register_target(\"Signal\", function (comm) {\n",
       "            comm.on_msg(function (msg) {\n",
       "                //Widgets.log(\"message received\", msg);\n",
       "                var val = msg.content.data.value;\n",
       "                $(\".signal-\" + comm.comm_id).each(function() {\n",
       "                var type = $(this).data(\"type\");\n",
       "                if (val[type]) {\n",
       "                    redrawValue(this, type, val[type], type);\n",
       "                }\n",
       "                });\n",
       "                delete val;\n",
       "                delete msg.content.data.value;\n",
       "            });\n",
       "\t    });\n",
       "\n",
       "\t    // coordingate with Comm and redraw Signals\n",
       "\t    // XXX: Test using Reactive here to improve performance\n",
       "\t    $([IPython.events]).on(\n",
       "\t\t'output_appended.OutputArea', function (event, type, value, md, toinsert) {\n",
       "\t\t    if (md && md.reactive) {\n",
       "                // console.log(md.comm_id);\n",
       "                toinsert.addClass(\"signal-\" + md.comm_id);\n",
       "                toinsert.data(\"type\", type);\n",
       "                // Signal back indicating the mimetype required\n",
       "                var comm_manager = IPython.notebook.kernel.comm_manager;\n",
       "                var comm = comm_manager.comms[md.comm_id];\n",
       "                comm.then(function (c) {\n",
       "                    c.send({action: \"subscribe_mime\",\n",
       "                       mime: type});\n",
       "                    toinsert.bind(\"destroyed\", function() {\n",
       "                        c.send({action: \"unsubscribe_mime\",\n",
       "                               mime: type});\n",
       "                    });\n",
       "                })\n",
       "\t\t    }\n",
       "\t    });\n",
       "\t}\n",
       "\n",
       "\ttry {\n",
       "\t    // try to initialize right away. otherwise, wait on the status_started event.\n",
       "\t    initComm(undefined, IPython.notebook);\n",
       "\t} catch (e) {\n",
       "\t    $([IPython.events]).on('kernel_created.Kernel kernel_created.Session', initComm);\n",
       "\t}\n",
       "    });\n",
       "})(IPython, jQuery, _, MathJax, InputWidgets);\n",
       "</script>\n",
       "    <script>\n",
       "        window.interactLoadedFlag = true\n",
       "       $(\"#interact-js-shim\").bind(\"destroyed\", function () {\n",
       "           if (window.interactLoadedFlag) {\n",
       "               console.warn(\"JavaScript required by Interact will be removed if you remove this cell or run using Interact more than once.\")\n",
       "           }\n",
       "       })\n",
       "       $([IPython.events]).on(\"kernel_starting.Kernel kernel_restarting.Kernel\", function () { window.interactLoadedFlag = false })\n",
       "   </script>\n",
       "</div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "using Interact\n",
    "\n",
    "print(\"n^2 =\"); # print the text \"n^2 = \"\n",
    "@manipulate for n in 0:10; # lets us manipulate the value of the parameter `n` in the range 0 to 10   \n",
    "    n^2;                   # calculate and display the value of n squared\n",
    "end"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Later on in this notebook we will consider quantum mechanics and the role of interactive elements will be clear.\n",
    "\n",
    "<h4>Play around</h4>\n",
    "\n",
    "Besides playing around with the sliders and buttons, we do encourage you to tinker with/alter the originally provided code. \n",
    "\n",
    "We expect the computer code to be accessible and we invite you to modify/tinker with the provided material.\n",
    "\n",
    "To illustrate, a basic example of code would be determining the sum of $x$ and $y$.\n",
    "\n",
    "One can click inside the block of code and modify the values assigned to $x$ and $y$. This is done by changing the number after the equality sign into another.\n",
    "\n",
    "<b>Click inside the block of code and press shift+enter</b> to learn the value of $x+y$. \n",
    "\n",
    "Please try it out."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "10"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "x = 9    # assign a value to x\n",
    "y = 1    # assign a value to y\n",
    "x+y      # calculate and display the value of x+y"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<b>Note:</b> text following a bracket \"#\" counts as a comment and is not used by the computer in making the calculations.\n",
    "\n",
    "If you are new to programming, by reading the comments next to the code you could learn about computer code/programming as you go along. \n",
    "\n",
    "To quickly get a feel for how one works with Julia see for example <a href=\"https://learnxinyminutes.com/docs/julia/\">Learn X in Y Minutes</a> and <a href=\"http://samuelcolvin.github.io/JuliaByExample/\">Julia By Example</a>. \n",
    "\n",
    "For a detailed introduction to programming using Julia, we can recommend <a href=\"http://quant-econ.net/jl/learning_julia.html \">Learning Julia</a>. Furthermore, <a href=\"http://www.nowozin.net/sebastian/blog/the-julia-language-for-scientific-computing.html\"> this article</a> explains why we have opted to use the Julia programming language.\n",
    "\n",
    "<h4>Editting text and equations</h4>\n",
    "\n",
    "By <b>double clicking</b> on the blocks of ordinary text, like this one, the presented <b>text/equations can be editted aswell</b>: One enters the edit mode. \n",
    "\n",
    "Doing so the whole notebook can be editted to your liking! This is the strength of Jupyter. \n",
    "\n",
    "Feel free to write comments to yourself while going through the notebooks.\n",
    "\n",
    "Once you are done editing, the text/equations can be formatted as intended. To do so, again <b>press shift+enter</b>, as one runs blocks of code.  \n",
    "\n",
    "Furthermore, we can write formulas like the following\n",
    "\n",
    "$$ \\sum_{n=0}^{\\infty} a^n = \\frac{1}{1-a} \\quad \\text{given} \\; \\lvert a \\rvert < 1$$\n",
    "\n",
    "by writing an expression in between dollar signs. One can double click this text block to see how this example is generated.\n",
    "\n",
    "\n",
    "This way of writing formulas on the computer is called <b><a href=\"https://www.mathjax.org/\">Mathjax</a></b>. For more information on writing equations to your liking please visit <a href=\"http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference\">this</a> and <a href=\"http://www.suluclac.com/Wiki+MathJax+Syntax\">this mathjax overview</a>.\n",
    "\n",
    "Note, since the notebook is opened inside a web browser we can for example, add weblinks like the weblink given in this text block. \n",
    "\n",
    "----\n",
    "\n",
    "This finishes this introductory notebook. By opening the \"Week_0_Notebook.ipynb\" notebook you can get started with the actual quantum crypto related material."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Julia 0.4.6",
   "language": "julia",
   "name": "julia-0.4"
  },
  "language_info": {
   "file_extension": ".jl",
   "mimetype": "application/julia",
   "name": "julia",
   "version": "0.4.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}