A Step-by-Step JavaScript demo

Goal: The purpose of these notes is to do a detailed demonstration of the HTML/JavaScript creation process. These notes will follow the steps needed to build the page and gradually add elements. Each sample is a completely self-contained HTML file. By clicking the links on this page, you will be testing the programs.

Theme: Light bulbs & switches

It seemed most reasonable to base all of the demos around a common theme. In this way, the reader can focus attention on the new material rather then trying to comprehend the problem.

Each sample will examine a representation of a light bulb and a light switch. The overall idea is that the light switch will turn the bulb ON and OFF. This should be a concept that is quite understandable.

You should examine the source code for each of the examples to see the whole file containing all of the details. Major portions will be presented here. The versions of the file were constructed as follows:

First, you must make sure that you understand the problem. In this case, we have 2 objects in our world, a light bulb and a light switch. The bulb has 2 possible states, ON or OFF. Furthermore, the switch controls the transitions between these states.

In most cases, a button will be used as the representation of the switch. We will assume, except where noted, that each switch controls exactly 1 bulb. The light bulb will first be represented as a text box, then as a check box, and finally as an image.

  1. The basic structure of the document will not change. The skeleton is here . 
             
            <HTML>

               <HEAD>
                  <TITLE> 
                     Demo 10/9/98 
                  </TITLE>

                  <SCRIPT LANGUAGE="JAVASCRIPT">
                  </SCRIPT>

               </HEAD>

               <BODY>
                  <h2> 
                     A light switch 
                  </h2>

                  <form NAME="lights">
                  </form>

               </body>

            </html>
  2. Try it
    A non-functional example. The Light(text box) has an initial value of OFF and the button has no control. 
             
            <form NAME="lights">
            <b>Light</b><br>
            <input TYPE=text NAME="bulb" VALUE="Off" SIZE=5>
            <p>
            <input TYPE="button" NAME="switch" VALUE="switch">
            </form>
  3. Try it
    The value in the text box now toggles between ON and OFF. To maintain the current state of the light, the JavaScript variable light_state is used. The variable is initialized to 0 because the text box light bulb is initialized of OFF. The script is 
             
            <script language="javascript">
            
            var light_state;
            light_state=0;
         
            </script>
    and the form is now modified so that the button can handle a click event. 
                
            <form NAME="light">
            <b>Light</b><br>
            <input TYPE=text NAME="bulb" VALUE="Off" SIZE=5>
            <p>
            <input TYPE="button" NAME="switch" VALUE="switch"
               onclick='
                 if (light_state == 0)
                 {
                    light_state = 1;
                    light.bulb.value="On";
                 }
                 else
                 {
                    light_state = 0;
                    light.bulb.value="Off";
                 }
               '>
            </form>
  4. Try it
    Text is hard to work with, so now the light bulb will be represented as a checkbox on the form. First, a non-functional example will be presented to demonstrate the form creation process. Then modifications will be made to this base form. 
             
            <form NAME="light">
            <b>Light</b><br>
            <input TYPE="checkbox" NAME="bulb" >
            <p>
            <input TYPE="button" NAME="switch" VALUE="switch" >
            </form>
  5. Try it
    A checkbox, like a light bulb, has 2 states. The bulb-on will be represented by the box being checked and the bulb-off will be represented by the box being unchecked. The function of the button, then, is to toggle between the checked and unchecked states correctly. 
                
            <input TYPE="checkbox" NAME="bulb" >
            <p >
            <input TYPE="button" NAME="switch" VALUE="switch"
               onclick='
                 if (light.bulb.checked)
                    light.bulb.checked = false;
                 else
                    light.bulb.checked = true;
               '>
  6. Try it
    The onClick handler could be written in many different ways. Here is a very nice version which uses Boolean properties. 
                
            <input TYPE="button" NAME="switch" VALUE="switch"
               onclick='
                   light.bulb.checked = !( light.bulb.checked) ; '>
  7. Try it
    A version where 1 switch controls many lights.
  8. Try it
    A version where many switches control the same light.
  9. Try it
    Now the button behavior is moved into a function. The function is placed in the head of the document. The function definition is 
             
            <script language="javascript">
            
            function flip()
            {
               if (document.light.bulb.checked)
                  document.light.bulb.checked = false;
               else
                  document.light.bulb.checked = true;
            }
         
            </script>
    and the event handler, which will call the function looks like 
                
            <input TYPE="button" NAME="switch" VALUE="switch"
               onclick='flip()'>
  10. Try it
    Two bulbs and two switches. Each button will have inlined code to control its light. Except for name changes, this is just copy/paste earlier material. Additionally, it should be clear how a similar version would be constructed using two functions. 
             
            <input TYPE="checkbox" NAME="bulb1" >
            <input TYPE="checkbox" NAME="bulb2" > 
            <input TYPE="button" NAME="switch1" VALUE="switch"
               onclick='
                 if (document.light.bulb1.checked)
                    document.light.bulb1.checked = false;
                 else
                    document.light.bulb1.checked = true;
                '>
            <input TYPE="button" NAME="switch2" VALUE="switch"
               onclick='
                 if (document.light.bulb2.checked)
                    document.light.bulb2.checked = false;
                 else
                    document.light.bulb2.checked = true;
                '>
  11. Try it
    The example above, placed in a table for alignment.
  12. Try it
    This example introduces a few new topics. The major structure is 2 switches(button) and 2 bulbs(checkboxes). Each button will call a function to toggle the light. The interesting part is that both buttons call the same function. The function, however, will only act on the correct bulb. The function calls are passing a parameter in to the function. This allows the call to give information to the function so that the function may operate differently given different input.

    The button definitions with the function calls 

                
            <form NAME="light">
            <input TYPE="checkbox" NAME="bulb1" > 
            <input TYPE="checkbox" NAME="bulb2" > 
            <input TYPE="button" NAME="switch1" VALUE="B  1"
                onclick=' flip(document.light.bulb1); '>
            <input TYPE="button" NAME="switch2" VALUE="B  2"
                onclick=' flip(document.light.bulb2); '>

    Now, for the function definition, note the declaration of the parameter and the usage of the parameter within the body. 

                
            <script language="javascript">
            
            function flip(bulb)
            {
               if (bulb.checked)
                  bulb.checked = false;
               else
                  bulb.checked = true;
            }
            
            </script>
  13. Try it
    As you may have noticed, all of the examples so far allowed you to cheat by clicking directly on the light and bypassing the switch. In this example, that behavior is blocked (usually). Additionally, the initial state of one of the lights is OFF while the other is ON.

    The switch behavior is as in the previous example. The only changes are to the bulbs, not the switches. 

                
            <input TYPE="checkbox" NAME="bulb1" checked 
                      onclick="return false" >
            <input TYPE="checkbox" NAME="bulb2" 
                      onclick="return false" >
    however, that method did not alway work and the alternative below, seemed to work on my particular machine. Try it 
                
            <input TYPE="checkbox" NAME="bulb1" checked 
               onclick="bulb1.checked = !bulb1.checked" >
            <input TYPE="checkbox" NAME="bulb2" 
               onclick="bulb2.checked = !bulb2.checked" >
  14. Try it
    More bulbs and more switches are added, but very little new code is required. This is how good programming helps.
  15. Try it
    A report-bulb-status button is added. This button will call a function to check the status of all 4 bulbs on the form. The information is collected and reported to the user in a dialog box.

    The button definition 

                
            <input TYPE=button VALUE="Report Bulbs"
                onclick=' report_bulbs(0, 4); ' >
    The function definition is a little complicated the first time you see it. 
                
            function report_bulbs( bulb_num, howmany)
            {
               var repstr, curstr, i, bstat;
               repstr = "";
               for ( i = 0; i < howmany ; ++i)
               {
                  bstat = document.light.elements[bulb_num+i].checked;
                  if (bstat)
                     curstr = "Bulb "+i+" is ON" ;
                  else
                     curstr = "Bulb "+i+" is OFF" ;
                  repstr = repstr + curstr + "\n"
               }
               alert(repstr);
            }

    The final version Try it

    Now, use images as the basis for the lightbulb representation.

    Image Changing

  16. Demo 1
  17. Demo 2
  18. Demo 3
  19. Demo 4
  20. Demo 5
  21. Demo 6