In a previous article, I looked at the planning stages of a small JavaScript program to assist in training a dog to do sound alerts. In that article, I listed the following initial requirements:

• Start button
• Random timer
• 30 – 120 second time range
• On alarm, pops up an alert, sounds until button is pressed
• no need to hear the alarm

Particularly with scripting languages like JavaScript, I like to use an iterative development process where I get a small part of the code working, then add more and more of the features until I have the whole program working. For my first pass at this application, I wrote the HTML for the page itself with a form and a button. I used input boxes for the times in the range because adjusting the time range is on the list of requested advanced features. The form itself has no action ("#"), because JavaScript will do all the work for us.

<form action="#">Alarm range:<br/>
<input name="min" id="min" type="textbox" value="30" size="4" /> to
<input name="max" id="max" type="textbox" value="120" size="4" /> seconds
<br/><input type="button" value="Set Alarm" />
</form>

Gives a form that looks like this:


Finally it was time to actually write some JavaScript. I assigned the form submit button an onClick action of running a function called sound_alarm()

<input type="button" value="Set Alarm" onClick="sound_alarm()"/>

Then I defined this function in a script section in the header. Since this is my first iteration, I only need to implement a small piece of the program function. I decided to start with the pop-up window.

function sound_alarm(){
alert("Sound started (not really)\nClick OK to stop the alarm");
}

When the button is pressed, the following pop-up appears:



You can see this program so far here. Now that this is working, I can go on and add further features until the program is working.

Lend Me an Ear: The Temperament, Selection and Training of the Hearing Ear Dog by Martha Hoffman