Javascript - Regex, Element Access, Form Processing, Positioning

CS174

Chris Pollett

Apr 11, 2016

Outline

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

Pattern Matching

Frequently in Javascript we will be manipulating strings using pattern matching, so it is useful to know what facilities are available for this.
Javascript pattern matching is modeled on Perl's regular expressions.
A pattern is an expression between / /.
In such a pattern normal characters match themselves.
In addition to normal characters there are special characters: \ | ( ) [] {} ^ $ * + ? .

As an example:

var str = "Rabbits are furry";
var position = str.search(/bits/); /* returns position of first occurrence */

Pattern Special Characters

. -- matches any single character. So /snow./ would match snows and snowy
() -- used to control order of matching /(ab)*/ matches ab, abab, but not aab
[] -- logical or of a group of patterns
[azf] matches an "a", a "z", or an "f".
[a-d] - matches the range a,b,c,d
^ -- acts as negation or as a start of string anchor. So [^abc] is any character other than a, b, c; /^abc/ matches abc at the start of a string.
$ -- acts an anchor to end of a string. /abc$/ matches abc at the end of a string.
\ -- either can be used to escape characters (so \. would match a period), or for one of a list of special escape patterns such as \r \t, \n, \f or

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 object. So implicitly defined globals on a page can be viewed as properties of the Window 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 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');" />

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?

When run in a browser processing a web page, the document object can add text to the page.
Javascript uses the extends keyword to indicate class inheritance.
When Javascript looks up a property of an object, it first checks the prototype property of that object before it looks up the property directly in the instance.

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:

document.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.