Class 5 – In-class Assignment #1

Posted: October 17th, 2009 | Author: amos | Filed under: assignments, javascript | Tags: class 5 | No Comments »

Your assignment in class today is to develop a sort of text-capturing script.  The page is going to be divided into two identical  panels.  In the left panel, you will have one text input, one password input, and one textarea input.  When a user begins to enter text into any of the fields in the left panel, the corresponding field in the right panel will start to be automatically filled-in with the same text that they entered in the left.

To do this assignment, you will have to look into Javascript “keyup” events.

Here is the information architecture wireframe for this in-class assignment:

The best way to approach this assignment is to first lay out the page in XHTML and CSS before doing any Javascript coding.  Then start thinking about the how the logic of this type of interaction might be structured.  Break it down into discrete individual steps.

Here are the basic steps that need to be handled in order for something like this works

1. set event handlers to detect the “keyup” event whenever a user types anything into any of the form elements on the left side of the page
2. if a keyup event is triggered, call a function
3. in that function, first get the values of all form elements on the left side of the page and store them each in their own variable
4. Take the values stored in those variables and insert them into the corresponding form elements on the right side of the page

I expect you’ll have questions for me about exactly to do this, so please try to figure it out based on the examples so far, and ask for help when you get stuck.

Hint

Dealing with keypress, keyup, or any other type of supported Javascript event is not so different from the examples we went over for mouseover, mouseout, and click events.  You create an XHTML attribute called “onkeypress” or “onkeyup” in each element you want to detect these events for, and set its value to be a call to a Javascript function…

<input type="text" name="first_name" id="first_name" onkeyup="doSomething();">

To get an XHTML element into memory in Javascript, you access it based on its “id” attribute.  So, for example, to get an element with the id=”first_name” into memory, we would do the following in Javascript:

var firstNameElement = document.getElementById("first_name");

To get the value of a text input, password input, or textarea element, you can use the .value property of the element in Javascript.  So, for example, to get the value of the element retrieved above, we could do something like:

var firstNameValue = firstNameElement.value;

To set the value of a text input, password input, or textarea element, you can do the reverse.  For example:

firstNameElement.value = "some new value here";

where “some new value here” can be left as a string literal, as in what we just saw, or replaced by a variable that holds a string in memory, such as:

var newName = "Amos";
firstNameElement.value = newName;

No related posts.

---