Back to github.com/RichardHerz/example-controls

Examples of basic web controls

We use these controls to develop interactive simulations of physical systems for active learning. We use client-side technology (html, css, javascript) with no, or few, external libraries.

When the user makes a change to a control, a javascript function is called in order to carry out actions.

Examples of individual controls are shown here so they are easier to inspect than those embedded in a complete simulation. See source files of these examples by viewing the page source in your browser, or at github.com/RichardHerz/example-controls.

See source files of complete simulations at github.com/RichardHerz/web-labs. See our main site at ReactorLab.net.

First, an 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, using document.write() to write html to the web page or console.log() to write to the browser's Javascript console:

      <script>
        let a = 2;
        console.log('minimal JS example, a = ' + a); // view in browser's Javascript console
        let b = Math.pow(a,2); // raise a to power of 2
        document.write('hello'); // display output on web page
        document.write('<br> b = ' + b); // note <br> to start new line
      </script>
    

Basic Examples

Plots