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. Save the file and reload the browser window after each change you make.

      <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 that value in new variable bb
        document.write('<br> bb = ' + bb); // note html tag <br> to start new line
      </script>