Formatting Fields

• Javascript's most important use is client-side processing of data entry fields.
• This usually means string validation and formatting.
• Javascript has methods and properties for strings:
  • charAt() method
  • indexOf() method
  • lastIndexOf() method
  • substring() method
  • length property
  • more...
• Javascript has a String object, but we don't use that here.

• The length property is used.
• The substring() method is applied.
• A local scalar variable is declared as a var.
• The document object is used (see diagram.)
• The form sub-object (named socsecno) is used.
• The field sub-sub-object (named T1) is used.
• The value property is used.
• The content of the data entry field is modified by the Javascript code. Fields can be modified, but text on the web page cannot.

Lab

• Write a form to elicit a ten-digit phone number without punctuation or spaces, e.g. 5555555555.
• Add Javascript code that surrounds the area code with parentheses and inserts a hyphen before the last four digits, e.g. (555)555-5555.

Solution

• Run it.
• Source code.

Extra for Experts

• Microsoft has extended the document object model in useful ways. One such way is the addition of a screen object.
• Here is a web page that uses the width and height properties of the screen object to deduce the user's screen resolution. Then it jumps to one of:
  • 1280x1024.htm
  • 1024x768.htm
  • 800x600.htm
  • 640x480.htm
• In Internet Explorer, you can't see the original page source. Here is a copy of the web page with the key tag commented-out so you can see it.
• What's going on here? (document.write() is covered in Chapter 17).
• Does it work in Netscape Navigator?
• How might you apply this technique?