Unit-5

Regular Expression, Rollover and Frames

Marks : 14

5.1 Regular Expression:

• A regular expression is very similar to a mathematical
expression.
• Regular expression tells the browser how to manipulate text
rather than numbers by using special symbols as operators.

➢ 5.1.1 Language of Regular Expression

• The words of the regular expression language are
called special characters and act similarly to an
operator in a mathematical expression.
• An operator, tells the browser to perform an
operation on operands, which are values.
• Special characters tell the browser to perform an
operation on text.
• The text contains either the character b or the
character t or both by using the following regular
expression:
• /[bt]/
• You can place any number of characters, numbers,
or punctuation or symbols within the brackets, and
the browser will determine whether they exist in the
text.
• However, one symbol may pose a problem: suppose
you want to determine whether the text contains
the bracket ([) symbol?
• This can be troublesome since the [ is a special
character in a regular expression and will confuse
the browser.
• The browser assumes the [ is enclosing an operation
to perform, so it won't search the text for the [
character.
• If you want to search for a symbol that is also a
special character, you must precede the symbol with
a backslash (\), which is known as an escape
character.
• The backslash tells the browser to ignore the
special meaning of the symbol. Here's what you'd
need to write to search for the [ symbol in text:
• /[\[]/

• Here's how the browser reads this regular

expression:
• 1. The / character tells the browser that this is the
beginning of a regular expression.
• 2. The [ character tells the browser to search the
text for the following character(s).
• 3. The \ tells the browser to ignore the special
meaning of the next character.
• 4. The [ character is the character that the browser
will search for in the text.
• 5. The ] character tells the browser that there are no
more characters to search for.
• 6. The / character tells the browser that this is the
end of the regular expression.
➢ 5.1.2 Finding Nonmatching Characters
• Sometimes a JavaScript application prohibits
certain characters from appearing within text
entered into a form, such as a hyphen (-);
otherwise, the character might inhibit processing
of the form by the CGI program running on the
web server.
• You can direct the browser to search for illegal
character(s) by specifying the illegal character(s)
within brackets and by placing the caret (^) as the
first character in the bracket.
• Let's see how this works in the following
example:
• /[^\-]/
 • In this case, the browser is asked to determine
whether the text does not contain the hyphen.
• The caret asks the browser to determine whether
the following character(s) do not appear in the
text.
• The hyphen inside a character set is used to
define a range of characters (also discussed in the
next section).
• To find the hyphen in text, you need to escape
the hyphen with the backslash, like so \-.
• Suppose you wrote the following regular
expression and the browser didn't find the
hyphen in the text.
• The browser responds with a false—this is
because you are telling the browser to determine
whether the hyphen appears in the text.
• If the hyphen appears, the browser would
respond with a true.
• /[\-]/
• However, by placing a caret in the regular
expression, as shown next, the browser responds
with a true if the hyphen is not found in the text.
• This is because you are telling the browser to
determine whether the hyphen does not appear
in the text.
• /[^\-]/

➢ 5.1.3 Entering range of characters

• You don't need to enter every character that
you want the browser to match or not match
 in the text if those characters are in a series of
characters, such as f through l.
• Instead of including each and every character
within brackets, you can use the first and last
character in the series, separated by a hyphen.
• Let's say that you need to tell the browser to
match any or all of the characters f, g, h, i, j, k,
or l in the text. You could write the following
regular expression:
• /[fghijkl]/
• Alternatively, you could write the following
regular expression, which tells the browser to
match any letter(s) that appears in the series f
through and including l:
• /[f-l]/
• Likewise, you can tell the browser not to
match any characters in a range of characters
using the same kind of regular expression,
except you place the caret in front of the first
character, as shown here:
• /[^f-l]/
• In this case, the browser would return true if
none of the characters f through l were found.

➢ 5.1.4 Matching digits and non-digits

• Limiting an entry either to digits or non-digits
is a common task for many JavaScript
applications.
• For example, a telephone number entered by a
user should be a series of digits, and a first
 name should be non-digits. Non-digits
appearing in a phone number indicate the user
entered an invalid phone number. Likewise, a
first name that contains digits is likely an
invalid first name.
• You can have the browser check to see
whether the text has digits or non-digits by
writing a regular expression. The regular
expression must contain either \d or \D,
depending on whether you want the browser
to search the text for digits (\d) or non-digits
(\D).
• The \d symbol, as shown in the following
example, tells the browser to determine
whether the text contains digits.
• The browser returns a true if at least one digit
appears in the text. You'd use this regular
expression to determine whether a first name
has any digits, for example. If it does, the
browser returns a true and your JavaScript
notifies the user that an invalid first name was
entered into the form.
• /\d/The \D symbol is used to tell the browser
to search for any non-digit in the text.
• If the browser finds a non-digit, the telephone
number is invalid and you can notify the user
who entered the information into the form.
/\D/.

➢ 5.1.5 Matching Punctuation and Symbols

 • You can have the browser determine
whether text contains or doesn't contain
letters, punctuation, or symbols, such as the
@ sign in an e-mail address, by using the \w
and \W special symbols in a regular
expression
• The \w special symbol tells the browser to
determine whether the text contains a
letter, number, or an underscore, and the
\W special symbol reverses this request by
telling the browser to determine whether
the text contains a character other than a
letter, number, or underscore.
• Let's say that you were expecting a person
to enter the name of a product that has a
combination of letters and numbers.
• You can use the following regular
expression to determine whether the
product name that was entered into the
form on your web page contains a symbol:
• /\W/
• Using \W is equivalent to using [a-zA-Z0-9_].

➢ 5.1.6 Matching Words

• You might want the browser to search for
a particular word within the text. A word
is defined by a word boundary—that is,
the space between two words. You define
a word boundary within a regular
 expression by using the \b special
symbol.
• Think of the \b special symbol as a space
between two words. You need to use
two \b special symbols in a regular
expression if you want the browser to
search for a word: the first \b represents
the space at the beginning of the word
and the second represents the space at
the end of the word.
• Let's say you want to determine whether
the name Bob appears in the text. Since
you don't want the browser to match just
text that contains the series of letters B-
o-b, such as Bobby, you'll need to use the
word boundary to define Bob as a word
and not simply a series of letters. Here's
how you'd write this regular expression:
• /\bBob\b/

➢ 5.1.7 Replace text using a regular expression

• The replace() method requires two
parameters: a regular expression and
the replacement text. Here's how the
replace() method works.
• First, you create a regular expression
that identifies the portion of the text that
you want replaced.
• Then you determine the replacement
text. Pass both of these to the replace()
method, and the browser follows the
 direction given in the regular expression
to locate the text.
• If the text is found, the browser replaces
it with the new text that you provided.
• The next example tells the browser to
replace Bob with Mary in the text. The
regular expression specifies the word
Bob. The replace() method of the string
object is then called to use the regular
expression to search for Bob within the
text and then replace Bob with Mary.
• However, the original string isn't
modified. The modified string is returned
by the replace() method. You could
assign the modified string to the variable
containing the original string if you don't
need the original string anymore.
• A common problem is to replace all
occurrences of one or more characters of
a string. You do this by creating a regular
expression and calling the
replace()method; however, you'll need to
place the g special character at the end
of the regular expression, which tells the
browser to replace all occurrences of the
regular expression in the string. This is
shown here:
• /\bBob\b/g
• re = /\bBob\b/
• text = 'Hello, Bob and welcome to our
web site.'
• text = text.replace(re, 'Mary')
➢ 5.1.8 Return the matched characters
• Sometimes your JavaScript application
requires you to retrieve characters that
match a regular expression rather than
simply testing whether or not those
characters exist in the text.
• You can have the browser return
characters that match the pattern in your
regular expression by calling the exec()
method of the regular expression object.
• Here's how to use the exec() method.
First, create a regular expression that
specifies the pattern that you want to
match within the text.
• Characters that match this pattern will be
returned to your JavaScript. Next, pass
the exec() method the text for which you
want to search. The exec() method
returns an array.
• The first array element contains the text
that matches your regular expression.
For example, suppose you want to return
a person's first name.
• You know the name is Bob or some
variation of it, such as Bobby, but you are
unsure of how the name appears in the
text.
 • As you've seen previously in this chapter,
the following regular expression matches
Bob and any word that begins with B-o-b.
• /\bBob.*\b/
• We'll need to do the following:

• 1. Create the regular expression object

and assign it the regular expression:
• re = /\bBob.*\b /
• 2. Call the exec() method, passing it the
text and assigning the return value to an
array variable. Remember that you can
pass a reference to the text instead of
the entire text, as shown here:
• re = /\bBob.*\b /
• MyArray = re.exec('Hello, my name
is Bobby.')
• 3. We then display the value of the first
array element:
• re = /\bBob.*\b /
• MyArray = re.exec('Hello, my name
is Bobby.’)
• alert('Welcome, ' + MyArray[0])

➢ 5.1.9 Regular expression object properties

• In addition to methods, the regular
expression object has properties that you
can access from within your JavaScript by
referencing the name of the regular
 expression object followed by the
property name.
• This is the same technique that you used
to access properties in previous chapters.
Table 10-2 lists these properties.
• For example, let's say that you want to
access the last characters that were
matched by the regular expression. As
you'll notice in Table 10-2, the lastMatch
property contains the last characters that
were matched by the regular expression
object.
• You reference this by using the following
expression:
• re.lastMatch
 5.2 Frames

HTML frames are used to divide your browser window into multiple
sections where each section can load a separate HTML document. A
collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are
organized: into rows and columns.
Disadvantages of Frames
There are few drawbacks with using frames, so it's never
recommended to use frames in your webpages −
• Some smaller devices cannot cope with frames often because
their screen is not big enough to be divided up.
• Sometimes your page will be displayed differently on different
computers due to different screen resolution.
• The browser's back button might not work as the user hopes.
• There are still few browsers that do not support frame
technology.

➢ 5.2.1 Creating Frame

• To use frames on a page we use
<frameset> tag instead of <body> tag.
• The <frameset> tag defines, how to
divide the window into frames.
• The rows attribute of <frameset> tag
defines horizontal frames and cols
attribute defines vertical frames.
• Each frame is indicated by <frame> tag
and it defines which HTML document
shall open into the frame.
➢ PROGRAM:-
//fdemo1.html
<html>
<frameset rows = "10%,80%,10%">
<frame name = “f1" src = "/html/f1.htm" />
<frame name = “f2" src = "/html/f2.htm" />
<frame name = “f3" src = "/html/f3.htm" />
</frameset>
</html>

//f1.html
<html>
<head>
<title>Frame-1</title>
</head>
<body>
<p>Welcome</p>
</body>
</html>

//f2.html
<html>
<head>
<title>Frame-2</title>
</head>
 <body>
<p>to</p>
</body>
</html>

//f3.html

<html>
<head>
<title>Frame-3</title>
</head>
<body>
<p>GGSP</p>
</body>
</html>

//fdemo2.html
<html>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = “f1.htm" />
<frame name = "center" src = “f2.htm" />
<frame name = "right" src = “f3.htm" />
</frameset>
</html>
The <frameset> Tag Attributes
 IFrames
• You can define an inline frame with HTML tag <iframe>.
• The <iframe> tag is not somehow related to <frameset> tag,
instead, it can appear anywhere in your document.
• The <iframe> tag defines a rectangular region within the
document in which the browser can display a separate
document, including scrollbars and borders.
• An inline frame is used to embed another document within
the current HTML document.
• The src attribute is used to specify the URL of the document
that occupies the inline frame.

<html>
<body>
<p>Document content goes here...</p>

<iframe src = “f1.html" width = "555" height = "200">

Sorry your browser does not support inline frames.
</iframe>

<p>Document content also go here...</p>

</body>
</html>

//f1.html
<html>
 <head>
<title>Frame-1</title>
</head>
<body>
<p>Welcome</p>
</body>
</html>

The <Iframe> Tag Attributes

 ➢ 5.2.2 Invisible borders of frame

▪ PROGRAM
//Fdemo3.html
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "f1" src = "f1.html" frameborder="0"
border="0"/>
<frame name = "f2" src = "f2.html" frameborder="0"
border="0"/>
<frame name = "f3" src = "f3.html" frameborder="0"
border="0"/>
</frameset>
</html>

//f1.html

<html>
<head>
<title>Frame-1</title>
</head>
<body>
 <p>Welcome</p>
</body>
</html>

//f2.html
<html>
<head>
<title>Frame-2</title>
</head>
<body>
<p>to</p>
</body>
</html>

//f3.html

<html>
<head>
<title>Frame-3</title>
</head>
<body>
<p>GGSP</p>
</body>
</html>
➢ 5.2.3 Calling a child window
Main Window :-
PROGRAM:
//fdemo4.html

<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "50%,50%">
<frame name = "frame1" src = "f4.html" frameborder="0"
border="0"/>
<frame name = "frame2" src = "f5.html" frameborder="0"
border="0"/>
</frameset>
</html>

//f4.html
<html>
<head>
<script>
function show()
 {
alert("Inside Frame1");
}
</script>
</head>
<body>
<input type="button" onclick="show()" value="Click
Here"/>
</body>
</html>

//f5.html
<html>
<head>
<script>
function show()
{
alert("Inside Frame2");
}
</script>
</head>
<body>
<input type="button" onclick="show()" value="Click
Here"/>
 </body>
</html>
5.2.4 Changing content and focus of window
• You can give any child window the focus by changing the focus
after all the web pages have loaded in their corresponding child
windows.
• You do this by calling the focus() method of the child window,
as shown next, where the focus is being given to the web page
that appears in the bottomPage child window.
• You can call the focus() method from a JavaScript function or
directly in response to an event such as the onclick event.

▪ PROGRAM:-

//Wpage1.html

<html>
<head>
<title>Web Page 1</title>
<script language="Javascript" type="text/javascript">
function ChangeContent()
{
parent.topPage.location.href='WPage3.html'
}
</script>
 </head>
<body>

<P>
<INPUT name="WebPage1" value="Web Page 1"
type="button" onclick="ChangeContent()"/>
</P>
</FORM>
</body>
</html>

//Wpage2.html
<html>
<head>
<title>Web Page 2</title>
</head>
<body>
<FORM action="http://www.jimkeogh.com" method="post">
<P>
<INPUT name="WebPage2" value="Web Page 2"type="button" />
</P>
</FORM>
</body>
</html>
//WPage3.html
<html>
<head>
<title>Web Page 3</title>
</head>
<body>
<FORM action="http://www.jimkeogh.com" method="post">
<P>
<INPUT name="WebPage3" value="Web Page 3"
type="button" />
</P>
</FORM>
</body>
</html>

5.2.5 Writing to a child window

▪ PRGRAM
//fdemo5.html

<html>
<head>
 <title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "f1" src = "f1.html" frameborder="0"
border="0"/>
<frame name = "f2" src = "f2.html" frameborder="0"
border="0"/>
<frame name = "f3" src = "f3.html" frameborder="0"
border="0"/>
</frameset>
</html>

5.2.6 Accessing elements of another child window

• You can access and change the value of elements of another
child window by directly referencing the element from within
your JavaScript.
• You must explicitly specify the full path to the element in the
JavaScript statement that references the element, and it must
be from the same domain as the web page; otherwise, a
security violation occurs.
• Suppose that a button named WebPage1 is on Form1, located
on the web page that is displayed in the bottomPage frame of
the frameset.
 • The objective is to change the label of the Web Page 1 button.
You'll need to specify the full path and then assign text to the
value attribute of WebPage1, as shown here:
parent.topPage.Form1.WebPage1.value='New Label'.

5.3 Rollover
Rollovers are used to make a dreary web page come alive, by altering
its appearance as the visitor scans the contents of the web page with
the mouse. Any object on a web page can be changed with a
rollover. Some web developers change an image that is related to
the object beneath the mouse cursor. Other web developers pop up
a new window that further describes the object. The only limitation
is your imagination.

➢ 5.3.1 Creating Rollover

➢ A rollover is caused by an event called onmouseover and occurs
when a visitor to your web site moves the mouse over an
object that appears on the page.
➢ An object can be an image, text, or any element of a form.
➢ You react to the onmouseover event by using the onmouseover
attribute of an HTML tag that defines the object on the web
page and then assign to the onmouseover attribute the action
you want performed when the event occurs.
 ➢ The action can assign a new value to an attribute of an object,
call a method of an object, or call a JavaScript function. Let's
say that we want to change the image on the product page
whenever the visitor moves the mouse cursor over the image.
➢ The <IMG> tag defines the image object. The value assigned to
the src attribute of the <IMG> tag identifies the image itself.
➢ Whenever the onmouseover event occurs, we need to change
the value of the src attribute to identify the new image.

▪ PROGRAM:-
//RDemo1.html

<html>
<head>
<title>Frame-1</title>
</head>
<body>
<IMG height="92" src="rose1.jpg" width="70" border="0"
onmouseover="src='rose2.jpg'">
</body>
</html>
 ➢ 5.3.2 Text Rollover
• You can create as many rollovers as you want on your web
page; however, each one should be meaningful to the visitor.
There is nothing more distracting to a visitor than to encounter
rollovers on practically every object on a web page. Carefully
placed rollovers can enhance a visitor's experience when
browsing the web page. A clever rollover technique used by
some developers is to enable a visitor to see additional
information about an item described in text by placing the
mouse cursor on the text. This eliminates the time-consuming
task of using a hyperlink to display another web page that
contains this additional information and reduces the
information clutter found on some web pages.
➢ You create a rollover for text by using the onmouseover
attribute of the <A> tag, which is the anchor tag. You
assign the action to the onmouseover attribute the same
way as you do with an <IMG> tag. One thing must be
done; the onmouseover attribute must change the src
attribute of the <IMG> tag. Therefore, the value assigned
to the onmouseover attribute needs to identify explicitly
the <IMG> tag that is being changed. To do this, we must
give the <IMG> tag a unique name by assigning the name
to the name attribute of the <IMG> tag. We can then
reference the name in the value assigned to the
onmouseover attribute of the text's <A> tag. The
following segment shows how this is done.

▪ PROGRAM:-
//RDemo2.html
<html>
<head>
<title>Rollover Text</title>
</head>
<body>
<TABLE width="100%" border="0">
<TBODY>
<TR vAlign="top">
<TD width="50">
<a>
<IMG height="92" src="rose1.jpg" width="70" border="0"
name="cover">
</a>
</TD>
<TD>
<IMG height="1" src="" width="10">
</TD>
<TD>
<A onmouseover="document.cover.src='rose2.jpg'">
<B><U>Picture1</U></B>
</A>
<BR>
<A onmouseover="document.cover.src='rose3.jpg'">
<B><U>Picture2</U></B>
 </A>
<BR>
<A onmouseover="document.cover.src='rose4.jpg'">
<B><U>Picture3</U></B>
</A>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>

➢ 5.3.3 Multiple actions for Rollover

//RDemo3.html
<html>
<head>
<title>Open Window</title>
<script language="Javascript" type="text/javascript">
var MyWindow
function OpenNewWindow(sel)
{
if(sel==1)
 {
document.cover.src='rose1.jpg'
MyWindow1 = window.open('','myAdWin1','height="50"
width="150"')
MyWindow1.document.write('Mouse is on Link1 ')
}
if(sel==2)
{
document.cover.src='rose2.jpg'
MyWindow2 = window.open('','myAdWin2','height="50"
width="150"')
MyWindow2.document.write('Mouse is on Link2 ')
}
if(sel==3)
{
document.cover.src='rose3.jpg'
MyWindow3 = window.open('','myAdWin3','height="50"
width="150"')
MyWindow3.document.write('Mouse is on Link3 ')
}
}
</script>
</head>
<body>
<TABLE width="100%" border="0">
<TBODY>
<TR vAlign="top">
<TD width="50">
<a>
<IMG height="92" src="rose4.jpg" width="70" border="0"
name="cover">
</a>
</TD>
<TD>
<IMG height="1" src="" width="10">
</TD>
<TD>
<A onmouseover="OpenNewWindow(1)">
<B><U>Java Demystified </U></B>
</A>
<BR>
<A onmouseover="OpenNewWindow(2)">
<B><U>OOP Demystified</U></B>
</A>
<BR>
<A onmouseover="OpenNewWindow(3)">
<B><U>Data Structures Demystified</U></B>
</A>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>

➢ 5.3.4 More Efficient Rollover

An efficient way of handling rollovers is to load images
into an array when your web page loads. The browser
loads each image once the first time the image is
referenced in the web page. Typically, the default setting
for the browser is to check the browser cache for
subsequent references for the image rather than
download the image again from the web server. However,
a visitor to your web page might have changed the default
setting, causing the browser to reload the image each
time the image is referenced. This might cause a
noticeable delay. Any delay in transmission is likely to be
noticed by the visitor. While most visitors accept short
delays when they're selecting a different web page, they
tend to be unforgiving if the rollover takes longer than a
second or two to display the new image.
You can reduce this delay by creating a JavaScript that
loads all the images into memory once at the beginning of
the JavaScript, where they can be quickly called upon as
the onmouseover event occurs.
Downloading images when the web page is first loaded is
a simple three-step process:
1. Declare an image object.
2. Assign the image fi le to the image object.
 3. Assign the image object to the src attribute of the
HTML tag that is going to react to the rollover event.

▪ PROGRAM:-

//RDemo4.html

<html>
<head>
<title>More Efficient Rollover</title>
<script language="Javascript" type="text/javascript">

JavaDemystified = new Image

OOPDemystified = new Image
DataStructuresDemystified = new Image
if(document.images) {
JavaDemystified.src = 'rose2.jpg'
OOPDemystified.src = 'rose3.jpg'
DataStructuresDemystified.src = 'rose4.jpg'}
else {
JavaDemystified.src = ''
OOPDemystified.src = ''
DataStructuresDemystified.src = ''
document.cover = ''
}
</script>
</head>
<body>
<TABLE width="100%" border=0>
<TBODY>
<TR vAlign="top">
<TD width="50">
<a>
<IMG height="92" src="rose1.jpg"
width="70" border="0" name="cover">
</a>
</TD>
<TD>
<IMG height="1" src="" width="10">
</TD>
<TD>
<A onmouseover="document.cover.src=JavaDemystified.src">
<B><U>Java Demystified </U></B>
</A>
<BR>
<A onmouseover="document.cover.src=OOPDemystified.src">
<B><U>OOP Demystified</U></B>
</A>
<BR>
<A
onmouseover="document.cover.src=DataStructuresDemystified.src"
>
<B><U>Data Structures Demystified</U></B>
</A>
</TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>