.. _nbcustomjsrst:

==========================================
Use a local javascript file in a notebook.
==========================================


.. only:: html

    **Links:** :download:`notebook <nb_customjs.ipynb>`, :downloadlink:`html <nb_customjs2html.html>`, :download:`PDF <nb_customjs.pdf>`, :download:`python <nb_customjs.py>`, :downloadlink:`slides <nb_customjs.slides.html>`, :githublink:`GitHub|_doc/notebooks/nb_customjs.ipynb|*`


The notebook saves a custom javascript file and reuses it. Freely
inspired from `Jupyter Notebook -
javascript <http://jupyter-notebook.readthedocs.io/en/stable/examples/Notebook/JavaScript%20Notebook%20Extensions.html#Back-to-theory>`__.

.. code:: ipython3

    script = """
    modify_demo = function(document, tagid) {
        var zone = document.getElementById(tagid);
        var student = new Array();
        student[1]=23;
        student[2]=34;
        student[3]=67;
        student[4]=76;
        student[5]=51;
        student[6]=72;
        zone.innerHTML = "<b>Student results</b>";
        zone.innerHTML += "<ul>";
        var numStudents=0;
        var sum=0;
        var ans=0;
        for(var i in student){
            zone.innerHTML += "<li>Student "+i+": "+student[i]+"% (2)";
            numStudents++;
            sum=sum+student[i];
        }
        zone.innerHTML += "</ul>";
        ans=Math.round(sum/numStudents);
        zone.innerHTML += "student average is "+ans+"% -";
    };
    """

.. code:: ipython3

    with open('custom_demo.js', "w") as f:
        f.write(script)

We save the file in the local folder.

.. code:: ipython3

    import os
    [_ for _ in os.listdir(os.getcwd()) if '.js' in _]




.. parsed-literal::
    ['custom_demo.js', 'renderjson.js', 'vis.min.js', 'viz-lite.js', 'viz.js']



.. code:: ipython3

    %%html
    
    <div id="myfirstid">empty</div>





.. raw:: html


    <div id="myfirstid">empty</div>



.. code:: ipython3

    %%html
    
    <script src="custom_demo.js"></script>
    <script>
    modify_demo(document, "myfirstid");
    </script>





.. raw:: html


    <script src="custom_demo.js"></script>
    <script>
    modify_demo(document, "myfirstid");
    </script>



The notebook is picking the javascript file inside the current folder.