LESSON 22: INPUTS FOR FORMS

1. Study the index cards on Inputs For Forms. I've included a hard copy of these index cards, for your convenience. There is a separate worksheet to give you practice with designing forms.
2. JavaScript can be used to interact with forms:
   • read information from forms
   • do stuff with the information that is read from the forms
   • write information back to the form
   What follows is a series of examples, each progressively more powerful (and more complicated), to illustrate how JavaScript can be used to interact with forms. You have a hardcopy of each form, and its source code. There are a series of questions for you to answer for each form. These questions are only briefly described here; Dr. Fisher will give details in class. You will be asked to do coding like this on quizzes and tests: it will be entirely open book and open notes.
3. Carefully study Using JavaScript to Work With Forms #1 and do the following:
   1. Dr. Fisher will talk through all the source code carefully in class.
   2. Use SimpleText and type in the entire source code for the form, and save it in your personal folder. Do NOT cut and paste. Think about what you're typing. Make sure it works properly before you go on.
   3. Change the NAME of the "first name" input field to "Firstname" (with a capital F). Does it still work? If not, fix the code so that it will work. What have you learned?
   4. Instead of having the message say, "Hello there, Carol Fisher!" instead have it say "How are you today, Carol Fisher?"
   5. Insert another text box where you are asked to input your middle name (or initials). Then, have it say "How are you today, Carol J.V. Fisher?"
4. Carefully study Using JavaScript to Work With Forms #2. Here, a button has been added to clear the form, and after the form is cleared, the "focus" returns to the "first name" box.
   1. Change the code so that after the form is cleared, the "focus" returns to the last name box.
   2. Add a second button that says "Click here for a special surprise!" When this button is clicked, the user should see "Your name, backwards, is Fisher Carol!"
5. (10 pts) Write code, from scratch, that asks the user to input two numbers (like 5 and 23). Then, when you click a button, it adds the numbers together, and reports "5 + 23 = 28".
6. Carefully study Using JavaScript to Work With Forms #3. Here, a simple counter has been added to count the number of times that the form has been used.
7. Here's a JavaScript function that randomly chooses a number between "a" and "b". Dr. Fisher will explain how it works. Type it in yourself, and test it!

   function rand(a,b) {
   // randomly selects an integer between integers  a  and  b
   c = Math.floor((b+1-a)*Math.random() + a); 
   return c;
   }
   

   To test it, type the following:
   document.write(rand(1,10));
8. (20 pts) Now, apply what you're learned to write the code to produce "Telepathy". You have a hard copy of this form, and Dr. Fisher will show you a working copy of this form on her laptop.