How to Create a Javascript Program

From AstroEdWiki
Revision as of 06:52, 8 February 2017 by WikiSysop (talk | contribs)
Jump to navigation Jump to search

The browser on your desktop is a computing engine with a well-designed user interface. Behind the interactive environment, it can read local HTML files and execute programs written in javascript. This page is a step-by-step guide to working in that enviroment, with examples and links to get you started with using it as a research tool.

The prescription here will take you step by step to the creation and use of Javascript for data visualization with a Python foundation. A good book to follow up with is

Data Visualization with Python and JavaScript

published by O'Reilly and written by Kyran Dale. In the preface, he writes

"Python's simplicity and power was a breath of fresh air ... Python was the perfect glue, playing nicely with C++ libraries ... and doing, with consummate ease, all the stuff that is such a pain in low-level languages. ... I started to write all my graphical user interfaces (GUIs) and visualizations in Python. "

He notes that javascript and web browsers are "the perfect universal distribution system for the software I'd so lovingly crafted." He adds that javascript and HTML5 is faster than Python, and that visualizations in Python

"are now possible on your local web browser, and the payoff is that, with very little effort, they can be made accessible to every desktop, laptop, smartphone, and tablet in the world."

Begin with Python

In order to get started you will need a local web server. Since most likely you will not have one running that is easily accessible, a simple solution is to use python to provide one for you. Python has a built-in module that will run a server and that can be started with one line of python code.

First, identify the directory or folder on your computer under which all of the javascript you want to access is stored. Then, at the top level of that directory, run this program

 python -m CGIHTTPServer 8000 1>/dev/null 2>/dev/null &

By using port 8000 the server is distinct from the one on port 80 used for web applications. The site would appear by putting


in a Google Chrome or Mozilla Firefox browser window running on the same user account on the same machine. Note the redirects for stdio and stderr to /dev/null keeps output from appearing in the console. The server may be killed by identifying its process ID in Linux with the command

 ps -e | grep python

followed by

 kill -s 9  pid

where "pid" is the ID number found in the first line. Alternatively, if it is the only python process running you may kill it with

 killall python

Any file in the directory tree below the starting directory is now accessible in the browser, and html files will be parsed to run the included javascript. If here is a cgi-bin directory at the top level, the server will see it and use it. One use of this low level server is to create a virtual instrument that is accessible from the web, but not exposed to it directly. A remote web server on the same network that can access port 8000 on the instrument machine can run code and get response from the instrument by calling cgi-bin operations.

For programmers, however, this utility allows development and debugging of web software without the need for a large server.

Add a Directory for a Program

Put each program (think webpage) into its own directory under this top level directory. That way, when you open the browser to localhost:8000 you will see list of directories each containing a separate application. Click on one of those and your application, or its files, will open.

Under that program directory create at a minimum two other subdirectories:

 js will contain the javascript code
 css will contain styling code if you want to implement it 

Your javascript programs will have the extension ".js" and should be located in the js subdirectory. This structure is optional, but keeping to the pattern will make writing and rewriting programs easier later.

The browser will automatically see a file "index.html" in a directory if that file exists. For development it is best not to use "index.html" as the base file for your application, but instead to use another descriptive name such as "calculator.html" or "orbits.html". Later, if you want it to open without the extra click you can rename it, or in Linux and other Unix-like operating systems create a soft link that points to it with the command line

 ln -s calculator.html index.html

The browser will see the index soft link and then open the file it points to. By not having "index.html" in your program directory you will be able to browse other files there, try variants on your program, or inspect code in the browser.

Select a Browser

There are two browsers that are recommended for this type of development, and the choice at least at this beginning stage is a matter of style and convenience. The user interface to development help is different, and actually the "engine" they run is also different. As the web develops, the programmers who create and maintain browsers also change what they can do, and sometimes what they allow the browsers to do. There are two recommend choices, which run different engines.

Mozilla Firefox currently with 62% of desktop use, it is full-featured with significant memory usage and CPU requirements.

Google Chrome currently with 15% of desktop use it was widely more popular before the rise of Chrome,. Firefox is the least restrictive and most open of the two. Its requirements for memory and CPU are lower than Chrome. Firefox perhaps should be the development platform choice unless you need the Google features.

Both have developer consoles. These are windows on the engine, revealing what happens as code executes, and containing messages you may request by embedding commands within javascript.

In Google Chrome, click the three dots at the upper right of the browser window, select "More tools" and "Developer tools". By default it will open to the Console on the right side of the browser.

In Firefox click the three bars at the upper right, then the "Developer" icon, and "Web console". It will open at the bottom of the browser.


For the simplest of pages, create a file and give it an extension ".html" in a Linux or Mac, or perhaps "htm" in Windows. This is the code the browser will execute first. If you name it "index.html" when the browser is pointed to the directory containing the it will open it automatically. For development, this is not desirable behavior because you will also want to open other files in the browser to inspect them, or to run alternative versions in the same directory tree. Therefore, refrain from using "index.html", and try instead some other descriptive name. In this example we will call it "startjs.html".