CSC103 How Computers Work
Exercise 5: JavaScript Variables and Data

I. Using an existing HTML document

1. Open the link for Hello.htm
2. Open Dreamweaver and start a new HTML page
3. You can view the source code for Hello.htm (and any other page) by right-clicking anywhere in the page, and selecting View Page Source.
4. Copy and paste the text from Hello.htm into your Dreamweaver page, and save this file into your own directory.
5. Open this .htm file in a browser window (Firefox, Netscape, internet explorer...) and make sure that your copy works the same as the version linked above.
6. Change what is written to the output box, just to make sure you know how to do this. For example, rather than having your page respond to and input name of < Smith > with "Hello, Smith!" you could have it respond with "How are you doing Smith?"

II: Modify the "Hello" example: String variables.

1. Add an input text box that asks the user her favorite color. To do this you need to add another "input" element of type "text," and give this element a different name!
2. To go along with your new input text box, you also need to change (or add to) what is written as output to the textarea.
3. You must use the new name for your new input box!!
4. Change the line

   onClick="document.NameIn.Output.value='Hello, '+document.NameIn.NameAns.value+'!'";
     

   so that in response to input of < Smith > and < Gold >, your output says "Hello Smith Gold!" To do this you need to ADD ( + ) the two input strings.
5. This is clearly a different type of adding than the addition of two numbers. When adding numbers, the CPU uses the adder circuit we designed. Can you think of what the CPU does to "add" two strings together?
6. That takes care of the input and the output. Note that the 'action' via the button, is the same for this new version of the page.