Outline

• Regex in Javascript
• Element Access in Javascript
• Events and Event Handling
• Validating Forms
• Quiz
• DOM 2
• Element Positioning
• Moving Elements
• Element Visibility

Slash Patterns

Last week, we were talking about pattern matching in Javascript. We said there was a String.search method that could take patterns, we gave some simple example patterns, and talked about the use of '.', '()', '[]', '^', '$', '\'. Today, we start by discussing slash patterns.

• \d -- match a digit,
• \D -- match anything other than a digit
• \w match a word character (alphanumeric)
• \W match a not a word character.
• \s match a single whitespace character
• \S match a single nonwhitespace character

Yet more special characters

• * -- matches 0 or more occurrences of the pattern. For example /x*/ would match empty string, x, xx, xxx ...
• + -- matches 1 or more occurrences of the pattern
• ? -- matches 0 or 1 occurrences of the pattern
• {} -- can be used to match exactly k occurrences:

  /yx{5}z/ matches yxxxxxz	
  

Pattern Modifiers

• i -- makes the pattern case insensitive. For example,

  /Apple/i would match APPLE, aPple and apple.
  

• x -- allows whitespace to occur in the pattern
• g-- means do globally - we'll see this more on the next slide

More Pattern Methods

• replace -- replace the matched pattern with the given replacement string.

  var str="Fred, Freddie, Frederica";
  str.replace(/Fre/g, "Boyd");
  

  notice we use g to replace all occurrences.
• match -- returns an array of the pattern matched results

  var str= "3 and 4";
  var matches = str.match(/\d/g); //returns [3, 4]
  

• split -- splits a string into an array of substrings according to the pattern delimiter

  var str="grapes:apples:oranges"
  var fruit = str.split(":"); // [grapes, apples,oranges]
  

Execution Environment

• When a browser displays an HTML document in a window, it will set up a Javascript Window object to represent information about the window.
• All Javascript variables are properties of some variable object. So implicitly defined globals on a page can be viewed as properties of the window variable object.
• You can have more than one Window object if the browser opens more than one window.
• Every Window object has a property document which is the Document object representing the HTML document it displays.
• Every document objects has a forms array each element of which represents a form (Form object) on the document.
• Each Form object has an elements array as a property which contains an array of form elements for the buttons , menus, etc on it.
• Document objects also have property arrays for anchors, links, images, and applets.

Document Object Model

• The Document Object Model is a model developed in the 90s for how the contents of an HTML, XHTML, or XML document should be modeled by Javascript or other language's objects.
• Typically a document is modeled as a tree with roughly one node for each element type.
• DOM also described methods for getting, updating, and modifying elements.
  • DOM Level 1 was the first standardization which occurred in 1998. (I'll call stuff prior to this Level 0). IE 5 was the first browser to partially support it.
  • DOM Level 2 in 2000 added getElementById and a new event model, which we will describe in a moment.
  • DOM Level 3 in 2004 added XPath, keyboard event handling, and serialization support.
  • DOM Level 4 has 2012 draft. It seeks to incorporate stuff from HTML 5 that makes more sense as part of DOM. Also, new work is being done to simplify the specification of the event model.
• Most browsers support DOM Levels 1 and 2 and parts of Level 3 and 4.

Element Access in Javascript

• The DOM 0 way of associating Javascript objects with form elements was to use the forms array of the Document Object, as well as its sub elements array.
• For example, if there was only one form on a page with the following button on it:

  <input type="button" name="turnItOn" />
  

  then it could be accessed with document.forms[0].elements[0].
• This is awkward if we start to add elements as this address could change. Instead, we could do document.forms[0].turnItOn
• Still, having forms[0] is awkward. Another approach is to given this button an id:

  <input type="button" id="turnItOn" name="turnItOn"/>
  

• We could then look up the button using:

  button = document.getElementById("turnItOn");
  

• We need the attribute name still for the button above because that is what gets sent to the server as the name/value pair when the form is submitted.

More on Element Access

• Checkboxes in a group of checkboxes often share the same name.
• Radio buttons in a group of radio buttons always share the same name.
• In the DOM, these object get reflected as an array rather than an element of that name.
• For example suppose we had a radio button group with name vehicles. on a form with id bob. We could access this by doing

  myForm = document.getElementById("bob");
  numButtons = myForm.vehicles.length;
  // if we want to we could cycle over this array for values.
  for( i =0 ; i < numButtons; i++)
  {
  	 oneVehicle = myForm.vehicles[i].
       // do something
  }
  

Events and Event Handling

• In HTML/XHTML, there are a collection of attributes beginning with "on" that can be used to give a handler for different kinds of events:
  • onblur -- can be used in <a>, <button>, <input>, <textarea>, <select>
  • onchange -- can be used in <input>, <textarea>, <select>
  • onclick -- can be used in <a>, <input>
  • onfocus -- can be used in <a>, <input>, <textarea>, <select>
  • onload/ onunload -- can be used in <body>
  • onmousedown, onmousemove, onmouseout, onmouseover, onmouseup -- can be used in most elements.
  • onselect -- can be used in <input>, <textarea>
• An example, of using one of these is:

  <input type = "button" id="b" name="b" onclick="alert('b tapped');" />
  

More on Event Handling

• Besides the method of the last slide to register a handler for an event, you can also set the handler from Javascript:

  document.getElementByID("b").onclick = myNewHandler;
  

• We can set the values of other form elements within Javascript and we can also generate events within Javascript.

  <input type="text" id="cost" onfocus="this.value=10; this.blur();" />
  

Validating Forms

• As we said before it useful to check that the data entered into a form is valid before sending it to the server.
• We saw last class we can associate a handler with a form using a syntax-like:

  <form ... onsubmit="return checkSubmit()" >
  

• If this function returns true; the form is submitted; otherwise it is not.
• Typically, if the form is not correct you want to display some message.
• You could either use an alert
• Or you could set the style of some element from display: none to display: inline or display:block. This would allow you to put stars by missing data:

  phoneStar = document.getElementById("phoneStar");
  phoneStar.style.display="inline";
  

• One can also dynamically insert content such as an error message into div tags by setting its innerHTML attribute.

Quiz

Which of the following statements is true?

1. You can write to the current document in Javacript using the write method.
2. Only Array's in Javascript have a prototype property.
3. To create an object in Javascript you first need to declare a class.

Quiz

Which of the following statements is true?

1. All Javascript statements must be terminated with a semicolon.
2. Javascript on a web page is only evaluated after the browser has rendered the page.
3. Functions are objects in Javascript.

DOM 2

• The DOM 2 Event model is supported by Firefox and other recent browsers but is not supported by IE6.
• In this model events are split into HTMLEvents like blur and MouseEvents like click and all events beginning with mouse.
• Event registration is done using addEventListener:

  myelement.addEventListener("change", myhandler, false).
  

• You can add multiple handlers to the same node.
• There is also a removeEventListener method.
• Events are targeted on some node in the doc tree. In the event capturing phase, one starts at the root node and goes down the tree toward the target calling all events whose onCapture flag is true. When the target node is reached a DOM 0 like event handling is done for handlers that are specifically attached ot this target. Then a bubbling phase back up the tree happens and all listeners whose onCapture flag is false are called.

The Navigator Object

• The navigator object can be used to determine browser type.
• It has two useful properties, appName and appVersion

Element Positioning

• Positioning of elements can be done using styles.
• It come in a few types absolute, fixed, relative, etc:

  <p style="position: absolute; left:100px; top: 200px">some text
  </p>
  <p style="position: relative; left:10px; top: -20px; width: 50">some other text
  </p>
  

• Both positionings can be used to set text on top of other text.
• Since you can change the style property of an element in Javascript, you can use positioning to move objects around on the screen dynamically.

Moving Elements

• Consider the following Javascript function:

  function moveIt(id, newTop, newLeft)
  {
  myStyle = document.getElementById(id).style;
  myStyle.top = newTop + "px"; /* notice how CSS properties are properties of the style object*/
  myStyle.left = newLeft + "px";
  }
  

• This could be used to move an element to a specific location on the screen.

Element Visibility, Colors and Fonts

• You can control the visibility of an XHTML element using the CSS property.

  <div id="test" style="visibility: hidden">hi there</div>
  <input type="button" onclick='show("test")' />
  <script type="text/javascript"> 
  	function show(id)
      {
  		myStyle = document.getElementById(id).style;
         myStyle.visibility = "visible";
      }
  </script>
  

• In a similar fashion one can change other CSS properties in response to events. For instance, if you like you could change the color or font type or size.