Getting started with Javascript

The interaction in our Web Labs is programmed with Javascript (JS). JS is not as easy to code as is LiveCode, the language of our desktop app. But JS has other advantages: free to use, web browsers have JS interpreters built-in which execute JS very fast, and you can leverage the JS you learn to do many things with web pages.

Quick: How to write Javascript and display in web browser

1) use a text editor like Apple’s TextEdit to create a .html file, e.g., mytest.html

2) in that file, write starting and ending html “script” tags, then enter your Javascript code between those tags. The script tags separate your Javascript code from the html in the file. Save the file.

3) Open that file using your web browser and see the output of the document.write statements.

4) After each change in your .html file, save the file and reload (refresh) the browser page to see the changes.

5) To view the output of the console.log statements, open the browser’s Javascript console. In Safari, select Develop > Show Javascript Console ( command-option-C ). New output appears at the bottom of the console window in Safari.

6) Example of a minimal .html text file to run Javascript in your web browser. All you need in the .html file is a script tag with your Javascript:

<script>
  // two slashes start a comment to help you remember what you are doing, does not execute
  document.write('hello'); // display output on web page
  // values between ' ' or " " are "strings" of text characters
  let aa = 3; // save value 3 in memory location you declare and label aa (aa is a "variable")
  console.log('minimal JS example, aa = ' + aa); // display in browser's Javascript console
  // now that a value is stored in new variable aa, we can use the value by using aa
  let bb = 2*aa; // multiply 2 times the value in aa and store value in new variable bb
  document.write('<br> bb = ' + bb); // note html tag <br> to start new line
</script>

7) console.log and document.write are standard, built-in “functions.” A function is a block of code to which you can supply input information within the parentheses (e.g., ‘hello’) and returns some output. You can write your own functions so that you don’t have to repeat the same code in different places.

8) You can view the html code of any web page in your browser. In Safari, select Develop > Show Page Source ( command-option-U ).

Here is a link to my examples of interactive controls https://richardherz.github.io/example-controls/index.html

The easiest way to view the code for one of these examples is to go to that example’s code at https://github.com/RichardHerz/example-controls

There are many sites that teach JS. Javascript.info looks good. W3schools is a great JS reference and place to learn other web technologies such as HTML, CSS, and graphics.

Evolution of Reactor Lab – Update

We posted a Windows standalone version of Reactor Lab at the Download page.

This version has all lab modules included. The online capabilities are not operational, which is not a limitation because we are no longer updating files on the server.

Mac and Linux users can use Reactor Lab by following the directions at the bottom of the Download page.

Evolution of Reactor Lab

Reactor Lab celebrated its 27th anniversary in March 2020. Starting in 2003, the desktop version was integrated with the Internet, with advanced features for that time.

These advanced features included automatic download and installation of updated files for off-line work, a conference (chat) room for discussions within Reactor Lab, and the ability to run process simulations involving local units and units at other locations in the same system. At that time, one could not assume constant connection to the Internet, as we do now. Once, from San Diego, I had a three-way discussion with a person in Michigan and a person in Turkey in the conference room.

I retired from the University of California at San Diego – UCSD – in 2014. Since then, my interest has shifted from the desktop version, which was constructed with LiveCode, to the HTML5-based Web Labs at this site.

This shift has been for a number of reasons, including omnipresent Internet connection in much of the world, almost everyone has access to the web and a web browser without having to download an application file, and the fast speed of Javascript built into web browsers.

That said, desktop apps have advantages over web pages such as saving data files to disk. In Web Labs, one has to go through an extra step to copy text from a popup window and save to a disk file. There are so many features that were built into the desktop Reactor Lab that duplicating them all in HTML5 might not happen.

I used to post standalone application files for Windows and Macintosh. With the evolution of operating systems and the evolution of LiveCode, I no longer wish to make the revisions necessary to build standalones.

However, one can continue to use the desktop Reactor Lab on Windows, Mac, and Linux. This can be done by downloading the free, open-source version of LiveCode from LiveCode.org and by downloading the free, open-source version of Reactor Lab from my github site at github.com/RichardHerz.

Instructions for how to do this are posted at the Download tab.

Web Labs now have the capability of desktop Reactor Lab

With the addition today of Web Lab 13, batch reactor with n-th order reaction, Web Labs now have examples of all the types of labs and plots in the desktop Reactor Lab.

In Dynamic lab types, the simulation runs continuously in time, with the student being able to change inputs during the simulation. In non-dynamic labs, individual experiments are run, which produce one or more plots for that experiment. In quizzes, such as the current Lab 7 Quiz, students can run and analyze experiments to determine unknown input values.

Plot types include profile, single, strip, and color canvas. A profile plot shows how an output has changed with time or space. Single type plots show results of non-dynamic experiments as x,y points as inputs are changed between experiments, with the student being able to select which inputs and outputs are shown on both the x and y axes.

A strip plot is like a lab strip chart (do they have those anymore?) which continuously scrolls in time as outputs are plotted. A color canvas plot shows how a color-coded output varies in two dimensions, e.g., time and space.

Graphics can also be dynamically drawn with SVG graphics, such as in Web Lab 00, a simulation of a pendulum. Several labs change the size and color of HTML div elements to show fluid levels and concentrations changing.

Do you have any suggestions for new labs? Please let us know by sending email to

NASA names headquarters after ‘Hidden Figure,’ engineer Mary Jackson

NASA names headquarters after ‘Hidden Figure,’ engineer Mary Jackson

https://www.10news.com/news/national/nasa-names-headquarters-after-hidden-figure-mary-w-jackson 

‘Hidden Figure’ is a double pun which refers to the Black women ‘figures’ (notable persons) who contributed to the manned space program at NASA by ‘figuring’ (computing numbers). It also refers to the movie ‘Hidden Figures’ about these women.

See our earlier blog posts about these women in the blog category: women in engineering.

The women who helped put men on the moon

Article in Los Angeles Times by Molly Hennessy-Fiske, July 18, 2019, p. A1

https://enewspaper.latimes.com/infinity/article_share.aspx?guid=db7ff914-40c3-4690-b069-36c36b4f8e9e

This year is the 50th anniversary of Apollo 11 astronauts landing on the Moon. Article includes stories of Frances Northcutt, Christine Darden, and Sylvia Salinas Stottlemyer.

Also see the blog post about Margaret Hamilton, another key figure.

Excerpt:

The Civil Rights Act had just passed and the slide rule was giving way to computers when Frances “Poppy” Northcutt arrived at NASA’s Houston campus in 1965, eager to join the space race. But her job title stunned her: “computress.” https://en.wikipedia.org/wiki/Frances_Northcutt

Northcutt, then 22 and fresh out of the University of Texas at Austin with a mathematics degree, soon learned that at NASA, men were engineers, women “computresses” or “human computers,” with less status and less pay.

But Northcutt persevered, and three years later, during the Apollo 8 mission, she would become the first woman to work in Mission Control. …

Happy 100th Birthday to Katherine Johnson

Happy 100th birthday to Katherine Johnson, NASA mathematician portrayed in the movie “Hidden Figures.” As shown in the movie, she proposed using Euler’s method to compute trajectories and orbits for the first US astronauts, allowing safe journeys and landings. In her honor, we will add an Euler’s method problem to homework in our intro to programming course. See her entry at Wikipedia and news articles, e.g., here and here. See our previous blog post about Katherine.

Web Lab development update

We now have six web labs posted. The newest is the dynamic heat exchanger simulation, and we recently updated the code structure of the reaction-diffusion lab and first temperature control lab to match the newest version.

In addition to the jquery and flot (plotting) libraries, each web lab is driven by six javascript files: (1) _main which runs the simulation loop, (2) _interface which handles the run-pause and reset buttons and gets and verifies inputs from the input fields, (3) _units which has simulation parameters and the process unit code, (4) _plot_info which contains definitions of the plots, (5) _plotter which makes the profile (static x,y) and strip chart (scrolling x,y) plots, and (6) _spacetime which makes the space-time, color-canvas plots.

Four of the six files are the same for all web labs. The two files specific to an individual web lab are the (3) _units and (4) _plot_info files.

We are amazed with the fast computational speed of javascript! Somewhere recently I read that the speed of javascript in browsers has increased by a factor of ten in the last year and a half. Years ago, computation in LiveCode (as MetaCard) was many times faster than javascript. Now, computation in javascript for our labs is much faster than native LiveCode script, although LiveCode 9 makes coupling to other languages for computation possible.

A feature unique to the heat exchanger lab is a check for attainment of steady state. When no significant changes to the system state are detected, the main simulation loop continues to run but unit computations and display updates cease until a change in input parameters is detected. When steady state is reached, the CPU load of the simulation decreases significantly. We don’t plan to implement this for the reaction-diffusion and temperature control labs because these usually operate under unsteady-state conditions.

The code is developing over time as we follow our usual development practice, which is repeat the following: (1) get something working, (2) notice repetition, (3) reduce repetition by writing functions and common library files.

25th anniversary of Reactor Lab this month!

Reactor Lab is a pioneer in developing interactive simulations for active learning. This is a screenshot of an experiment in the Lab in March 1993 – 25 years ago this month. The Lab was a single HyperCard stack. Click on the image to see a larger version.

RL_March_1993

Here is the same experiment in today’s desktop Reactor Lab.

RL_now

A brief history of the development of Reactor Lab through 2006 is available at LiveCode Journal. The article refers to Revolution, which was LiveCode’s previous name.

Where are you?

As long as we were teaching, we knew our notes and software were being used by our students. Now that we have retired, we have to analyze our web logs to see who is using the site and software. We are in the process of writing LiveCode scripts to scan through our logs and do some analysis. Here are some preliminary results for the month of February, 2018.

The first objective was to try to purge the logs of all web bots, spiders and crawlers. We were left with 20% of the original lines in the logs. I suspect that the bots/spiders/crawlers are indexing the PDF files in the RESOURCES section, which allows many users to find them in searches. Good in some aspects, but many users might not explore the rest of the site. All the RESOURCES content may be the reason that a search for “ReactorLab” or “Reactor Lab” puts our site at the top of page 1.

We were left with 3200 unique visitors after the purge, or simply “visitors” henceforth (unique IP addresses). This number roughly agrees with the Visitor Maps results in the NOW section. These visitors were from 107 different countries. The top five countries with the most activity were the US, India, Philippines, Ukraine, and the United Kingdom.

Of those 3200 total unique visitors, 2300 visitors from 96 countries used pages in the RESOURCES section of the site: 370 from 56 countries used the Matlab section, 1100 from 74 countries used the undergrad CRE Notes section, and 530 visitors from 66 countries used the Grad CRE section.

There were 59 visitors who downloaded the desktop software, and 86 visitors who ran the desktop software AND went “online.” There were six users of the Web Labs. Again, these numbers are for the month of February, 2018.

So far, I am pleased with what I am finding. I would be delighted to hear directly from you via email to   . Thanks.