JavaScript

• DOM (Level 1)
• Input validation
• Bookmarklets

Document Object Model (DOM)

• Object interface on browser and HTML documents
• DOM Level 1
  • Access to browser windows and their contents
• DOM Level 2
  • Unified event model
  • Access to and ability to update the content, structure and style of documents

Document Object Model

• Netscape's Document Object Model

  

Browser Objects

• Document Object Model hierarchy is a containment hierarchy (construct a "path" to the object)

  window.document.forms

• Principal object to access content is the document object

  window.document
  document		// default: current window

Document

• Ancestor for other objects on the page

  document.forms
  document.images
  document.links

• Objects in a document get their name from the "name" attribute of the corresponding tag
  • Access the text field "user" in form "loginForm"

  document.loginForm.user

Document

• Generate HTML code on page

  document.write()
  document.writeln()

• Generate a shopping cart from a list of items

  <script language="JavaScript">
  var items = new Array();
  
  item[0] = new LineItem("Perl and CGI", 29.95, 2);
  item[1] = new LineItem("Internet Groupware", 44.95, 1);
  item[2] = new LineItem("CGI Programming", 51.95, 1);
  
  document.writeln("<table border='1'>");
  for (var i=0; i<items.length; i++) {
      document.writeln("<tr>");
      document.writeln("<td>", item[i].name);
      document.writeln("<td>", item[i].price);
      document.writeln("<td>", item[i].quantity);
  }
  document.writeln("</table>");
  
  function Item(name, price, quantity) {
      this.name = name;
      this.price = price;
      this.quantity = quantity;
  }
  </script>

• example1.html

Form

• Each form in a document is represented by a Form object
• All forms are stored in the forms array
• Forms can be referred to by index or by name

  document.forms[0]
  document.loginForm

• Form elements store in the elements array

  document.forms[0].elements[0]
  document.loginForm.user

Elements

• Properties of input elements based on HTML attributes

  document.loginForm.user.value
  document.loginForm.elements[0].name

• Each element has a form property that returns the element's form

  <input type="text" name="fahrenheit" value="32"> F to
  <input type="text" name="celsius"> C
  <input type="button" value="Convert"
      onClick="convert(this.form)">

• This allows an event handler to refer to other elements in the same form

  function convert(form) {
      alert("convert");
      form.celsius.value = 
          Math.round((form.fahrenheit.value - 32)/1.8);
  }

• example2.html

Menus

• Consider a menu like the following

  <select name="rank" onChange="selected(this)">
      <option value="1">1
      <option value="2">2
      <option value="3">3
  </select>

• Access selected menu item

  function selected(element) {
      var i = element.selectedIndex;
      var selection = element.options[i].value;
      alert("Selected: " + selection);
  }

• example3.html

Window

• Represents a browser window or frame
• Provides several useful methods
  • alert displays an alert dialog
  • confirm asks the user for confirmation
  • prompt asks the user for a value

  alert("Password incorrect");		// default: current window
  var delete = confirm("Delete file?");	// true/false
  var goto = prompt("Go to page?");

Window

• Open a window

  open(url, name, features);

• Window features includes
  • height, width
  • resizable
  • menubar, location, toolbar
  • scrollbars

  <script language="JavaScript">
  function viewShoppingCart() {
      open('example1.html', 'cart', 
          'height=200,width=300,resizable');
  }
  </script>
  <a href="javascript:viewShoppingCart();">View Shopping Cart</a>

• example4.html

Input Validation

• Restrictions on a form
  • Some fields may only accept numbers
  • Others may only accept dates
  • Some fields may only accept a range of entries
  • Some fields may be required
  • Some combination of fields may not be permitted
• Handle restrictions by two types of checks
  • Validate each element as data is entered
  • Perform validation when the form is submitted

Validating Form Elements

• Checking element when data is entered most effective for validating format or range
• Perform such checks using the onChange event handler
  • Text
  • TextArea
  • Password
  • File
  • Select
• Assign code to onChange handler that executes when element changes

  <input type="text" name="age" onChange="checkAge(this);"

• Passes a reference to element to checkAge

  function checkAge(element) {
      if (element.value != parseInt(element.value)) ||
          element.value < 1 || element.value > 150) {
          alert("Please enter an age between 1 and 150");
          element.focus();	// moves cursor back
          return false;
      }
      return true;
  }

Validating Form Submissions

• Perform data validation just before form is submitted
• Perform such checks using the onSubmit event handler

  <form method="post" action="/cgi/register.cgi"
      onSubmit="return checkForm(this);">

• onSubmit handler must return true or false
  • If it returns false, the form will not be submitted

  function checkForm(form) {
      if (form.age.value == "") {
          alert("Please enter your age");
          return false;
      }
      return true;
  }

• Note that the following are equivalent

  form.age.value
  form["age"].value

Some Useful Validation Idioms

• Checking for integers
• Checking for ranges
• Checking for phone numbers
• Checking for postal codes
• Checking for required fields

Checking for Integers

• Checks if a value is an integer

  function isInteger(value) {
      return value == parseInt(value);
  }

• If the value contains other characters than numbers, parseInt() will be different from value

Checking for Ranges

• Checks if a value is within a range

  function inRange(value, low, high) {
      return low <= value && value <= high;
  }

• Obvious!

Checking for Phone Numbers

• Since there are many ways phone numbers can be formatted, this is just an example

  function checkPhone(element) {
      if (!element.value.match(/\d{3}-\d{4}/)) {
          alert("Incorrect phone number");
          return false;
      }
      return true;
  }

• This examples uses a regular expression to describe a phone number

Checking for Postal Codes

• Checks if a postal code is correctly formatted

  function checkPostalCode(element) {
      if (!element.value.match(/([A-Z][0-9]){3}/)) {
          alert("Incorrect postal code");
          return false;
      }
      return true;
  }

• Similar to checking a phone number

Checking for Required Elements

• Verifies that each required element has a value

  function requireValue(form, requiredValues) {
      for (var i=0; i<requiredValues.length; i++) {
          var name = requiredValues[i];
          if (form[name].value == "") {
              alert("Please enter a value for " + name);
              return false;
          }
      }
      return true;
  }

Bookmarklets

• JavaScript URLs that have been saved as bookmarks
  • http://www.bookmarklets.com
• How you turn a JavaScript URL into a bookmark is browser-specific, for example
  • Right-click and choose to save link as bookmark
  • Left-drag to personal toolbar
• Your first bookmarklet
  • Hello world!
• Most interesting if used with your own custom scripts

Example - Integrating a Search Engine

• Google provides the following bookmarklet that will perform a search on any highlighted text

  javascript:q = document.getSelection();
      for(i=0; i<frames.length; i++) {
          q = frames[i].document.getSelection();
          if (q) break;	// we found a selection
      }
      if (!q) 		// no selection, thus prompt
          void(		// no return value
              q = prompt('Enter text to search using Google. 
              	You can also highlight a word on this web page
              	before clicking Google Search.', ''));
      if (q) location.href =
          'http://www.google.com/search?client=googlet&q=' + 
          escape(q)

• All of this actually must be in one line!

• example5.html

Example - Integrating an Online Dictionary

• Create your own bookmarklet that looks up the selected word on the Merriam-Webster web site

  javascript:q=document.getSelection();location.href='http://www.m-w.com/cgi-bin/dictionary?book=Dictionary&va='+escape(q)

• How do we know this? Look at the form on the web site

  <FORM name="dict" method="post" action="/cgi-bin/dictionary">
    <TD valign="middle" width="165">
    <INPUT type="hidden" name="book" value="Dictionary">
    <FONT color="#ffffff" size="2" face="Arial, Helvetica"><B>Collegiate<SUP>�</SUP> Dictionary</B></FONT>
    </TD><TD valign="middle" width="140">
    <INPUT name="va" size="15">
    </TD><TD valign="middle" width="95">
    <INPUT type="submit" value="Look it up">
    </TD>
  </FORM>

• example6.html

Readings

• Rest of Chapter 7, section on Data Exchange
• Chapter 14, section on Communicating with Other Servers