Scribd
Upload
22 views

UNIT V Regular Expression, Rollover and Frames

Uploaded by

Prashant Bhamare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views

UNIT V Regular Expression, Rollover and Frames

Uploaded by

Prashant Bhamare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

Program: Computer Engg

Class : TY
Course : Client Side Scripting
Language(Elective)
Unit V : Regular Expression,Rollover
and Frames
Lecture 01: Regular Expression,Rollover
and Frames

1
02
Client Side Scripting Language

Prof. Vishal B. Ohol


Experience : 10 Years
ME(Software Engg)

2
Departmentwww.sandipuniversity.edu.in
of Computer Engineering www.sandipfoundation.org
Regular Expression, Rollover and Frames 03

Unit Outcomes(UOs)
5a. Compose relevant regular expression for the given character pattern search.
5b. Develop JavaScript to implement validations using the given regular expression.
5c. Create frames based on given problem.
5d. Create window object as per the given problem.
5e. Develop JavaScript for creating rollover effect for the given situation.

Contents
4.1 Regular Expression – language of regular of expression, finding non matching characters,
entering a range of characters, matching digits, matching punctuations and symbols, matching
words, replacing the text using regular expressions, returning the matched characters, regular
expression object properties.
4.2 Frames – Create a frame, invisible borders of frame, calling a child windows, changing a
content and focus of a child window, writig to a child window, accessing elements of another
child window.
4.3 Rollover – creating rollover, text rollover, multiple actions for rollover, more efficient rollover.

3
Department of Computer Engineering www.sandipfoundation.org
Regular Expression 04

RegExp Object
• A regular expression is an object that describes a pattern of characters.
• Regular expressions are used to perform pattern-matching and "search-and-replace" functions on text.
Syntax
/pattern/modifiers; https://vscode.dev/
Example
var patt = /w3schools/I
Example explained:
• /w3schools/i is a regular expression.
• w3schools is a pattern (to be used in a search).
• i is a modifier (modifies the search to be case-insensitive).
Modifiers
• Modifiers are used to perform case-insensitive and global searches:
Modifier Description
g Perform a global match (find all matches rather than stopping after the first match)
i Perform case-insensitive matching
m Perform multiline matching
4
Department of Computer Engineering www.sandipfoundation.org
Regular Expression 04

<html>
<head>
<script type="text/javascript">
var p=/student/i
function testMatch()
{
var str = textfield.value;
if(p.test(str))
{
alert("The String "+str+" contains the given pattern");
}
else
{
alert("The String "+str+" does not contains the given pattern");
}}
</script>
</head>
<body>
<h3><p>Checking the availability of string</p></h3>
Enter the String<input type="text" id="textfield"/>
<input type="button" value="check" onclick="testMatch();"/>
</body>
</html>
5
Department of Computer Engineering www.sandipfoundation.org
Language of Regular Expression 04

• A set of words that can be derived by using the regular expression is known as language of that regular expression. Each
and every word of that language can be defined by a set of alphabets of that present in the pattern of the regular
expression.

Brackets
• Brackets ([]) have a special meaning when used in the context of regular expressions. They are used to find a range of
characters.
Sr.No. Expression & Description
1 [...] Any one character between the brackets.
2 [^...] Any one character not between the brackets.
3 [0-9] It matches any decimal digit from 0 through 9.
4 [a-z] It matches any character from lowercase a through lowercase z.
5 [A-Z] It matches any character from uppercase A through uppercase Z.
6 [a-Z] It matches any character from lowercase a through uppercase Z.

• The ranges shown above are general; you could also use the range [0-3] to match any decimal digit ranging from 0
through 3, or the range [b-v] to match any lowercase character ranging from b through v.

6
Department of Computer Engineering www.sandipfoundation.org
Language of Regular Expression- Quantifiers 04

• Quantifiers are used to find the sequence characters contain in text. The frequency or position of bracketed character
sequences and single characters can be denoted by a special character. Each special character has a specific
connotation. The +, *, ?, and $ flags all follow a character sequence.

Sr.No. Expression & Description


1 P+ It matches any string containing one or more p's.

2 P* It matches any string containing zero or more p's.

3 P? It matches any string containing at most one p.

4 p{N} It matches any string containing a sequence of N p's

5 p{2,3} It matches any string containing a sequence of two or three p's.

6 p{2, } It matches any string containing a sequence of at least two p's.

7 P$ It matches any string with p at the end of it.

8 ^p It matches any string with p at the beginning of it.


7
Department of Computer Engineering www.sandipfoundation.org
Language of Regular Expression - Metacharacters 04

• A metacharacter is simply an alphabetical character preceded by a backslash that acts to give the combination a special
meaning.
• For instance, you can search for a large sum of money using the '\d' metacharacter: /([\d]+)000/, Here \d will search for
any string of numerical character.
Sr.No. Character & Description
1 . a single character
2 \s a whitespace character (space, tab, newline)
3 \S non-whitespace character
4 \d a digit (0-9)
5 \D a non-digit
6 \w a word character (a-z, A-Z, 0-9, _)
7 \W a non-word character
8 [\b] a literal backspace (special case).
9 [aeiou] matches a single character in the given set
10 [^aeiou] matches a single character outside the given set
11 (foo|bar|baz) matches any of the alternatives specified
8
Department of Computer Engineering www.sandipfoundation.org
Language of Regular Expression Methods 04

Method Description
compile() Compiles a regular expression
exec() Tests for a match in a string. Returns the first match
test() Tests for a match in a string. Returns true or false
toString() Returns the string value of the regular expression

9
Department of Computer Engineering www.sandipfoundation.org
Finding Non-matching Characters 04

• To find the non-matching characters from the given string we use ^ symbol. The symbol ^ is placed at first position of
pattern. For ex. [^abc] , it finds ny non-matching characters i.e. any characters except a,b,c.
<html>
<head>
<script type="text/javascript">
var p=/[^abc]/;
function testMatch()
{
var str = textfield.value;
if(p.test(str))
{
alert("The String "+str+" contains characters other than a,b,c");
}
else
{
alert("The String "+str+" does not contains characters other than a,b,c");
}
}
</script>
</head>
<body>
<h3><p>Checking the availability of string</p></h3>
Enter the String<input type="text" id="textfield"/>
<input type="button" value="check" onclick="testMatch();"/>
</body>
</html>
10
Department of Computer Engineering www.sandipfoundation.org
Entering range of characters 04

• If we need to match any character in between a range of characters then we do not require writing each every character.
We can simply write the range of characters, i.e. the starting character then ‘-’ and ending character in square bracket’[]’.
• For ex. If we want to match a character from a to z. then we need not write each and every character between a to z.
simply we can write ‘[a-z]’
• It is also applicable to the digits. If we want to match any digit from 0 to 9 then we do not require witing all digits. We
simply write [0-9].

<html> alert("The String "+str+" does not contains characters in range


<head> a-z");
<script type="text/javascript"> }
var p=/[a-z]/; }
function testMatch() </script>
{ </head>
var str = textfield.value; <body>
if(p.test(str)) <h3><p>Checking the availability of characters in given
{ range</p></h3>
alert("The String "+str+" contains characters in range a-z"); Enter the String<input type="text" id="textfield"/>
} <input type="button" value="check" onclick="testMatch();"/>
else </body>
{ </html>
11
Department of Computer Engineering www.sandipfoundation.org
Matching Digits and Non-digits 04

• The string may contains the digit and non-digits i.e. characters other than digits. If we want to check whether the string
contains the digits then we use \d. it search for the digits in the given string. If we want to check whether the string
contains the non-digits characters i.e. characters other than the digits, we use \D.

a Javascript code to match digits }


<html> }
<head> </script>
<script type="text/javascript"> </head>
var p=/\d/; <body>
function testMatch() <h3><p>Checking the availability of characters
{ in given range</p></h3>
var str = textfield.value; Enter the String<input type="text"
if(p.test(str)) id="textfield"/>
{ <input type="button" value="check"
alert("The String "+str+" contains digits"); onclick="testMatch();"/>
} </body>
else
{ </html>
alert("The String "+str+" does not contains
digits");
12
Department of Computer Engineering www.sandipfoundation.org
Matching Digits and Non-digits 04

a Javascript code to match non-digits


<html>
<head>
<script type="text/javascript">
var p=/\D/;
function testMatch()
{
var str = textfield.value;
if(p.test(str))
{
alert("The String "+str+" contains digits");
}
else
{
alert("The String "+str+" does not contains digits");
}}
</script>
</head>
<body>
<h3><p>Checking the availability of characters in given range</p></h3>
Enter the String<input type="text" id="textfield"/>
<input type="button" value="check" onclick="testMatch();"/>
</body>
</html>
13
Department of Computer Engineering www.sandipfoundation.org
Matching Punctuations and Symbols 04

• To match punctuation or symbols we can create a pattern containing all symbols. Thus the pattern for finding symbol in
given we look like:
/[-!$%&*()_+|=‘{}[\]:”;<>?,.\/]/
• To hyphen is a special character in character classes, so it needs to be first. The hyphen is special becasuse t can be used
to represent a range of characters. This same character class can be simplifies with ranges of this:
/[$-/:-{-~!”_’\[\]]/
• There are three ranges. ’$’ to ‘/’ to ‘?’ and ‘{‘ to ‘~’ the last string of characters can’t be represented more simply with
range:!”_’[].

14
Department of Computer Engineering www.sandipfoundation.org
Matching Words 04

• The match() function is used to match a word in a given string.


• For example :
var a = “I am a student.”;
Var pat = a.match(/ent/g);
• The g modifier is present with pattern in match() to perform global search. If the regular expression does not contain
the g modifier, the match() function will return only the first match in the given string
a Javascript code to match a word student");
<html> }
<head> }
<script type="text/javascript"> </script>
function testMatch() </head>
{ <body>
var str = textfield.value; <h3><p>Checking the availability of word in given
var pat=str.match(/student/g) string</p></h3>
if(pat!=null) Enter the String<input type="text"
{ id="textfield"/>
alert("The String "+str+" contains student"); <input type="button" value="check"
} onclick="testMatch();"/>
else </body>
{ </html>
alert("The String "+str+" does not contains
15
Department of Computer Engineering www.sandipfoundation.org
Replacing a text using Regular Expression 04

• The replace function is used to replace a pattern in given string. The replace() function searches a string for a
specified value, or a regular expression, and returns a new string where the specified values are replaced.
• If we are replacing a value, only the first occurrence of the value will be replaced. To replace all occurrences of a
specified value, we need to use the global modifier ‘g’.
• For example :
• Var str=“It is an important data”;
• var res=str.replace(“data”,”information”);
• The first string in the replace() is the string replaced. The second string is the string which replaces the old string.
a Javascript code to replace a text using </script>
regular expression </head>
<html> <body>
<head> <p>Original statement:Student has PHP
<script type="text/javascript"> textbook</p>
function testMatch() <p>Click button to get the output</p>
{ <input type="button" value="check"
var str = "Student has PHP textbook"; onclick="testMatch();"/>
var b=str.replace("PHP","JavaScript") </body>
document.write(b); </html>
}
16
Department of Computer Engineering www.sandipfoundation.org
Returning a Matched Character 04
a Javascript code to match string by using exec() function
• There are two functions which return the matched of regular expression
character. One is match() function of string and <html>
other is exec() function of regular expression. <head>
<script type="text/javascript">
function testMatch()
• String.match(pattern);
{
• String has match function, so that we can invoke var str=textfield.value;
match() function on string object. It is used to match var patt=/student/g;
a text with invoking string. var res=patt.exec(str);
if(res!=null)
• Exec() { alert("The string "+str+"contains student"); }
else
• Pattern.exec(string)
{ alert("The string "+str+"does not contains student");
• Regular expression has exec() function so that we } }
can invoke the exec() function on regular expression </script>
i.e. pattern. </head>
• It is used to match pattern with the given string. <body>
• Both function searches a string for a match against a <h3><p>checking the availability of word in given
string</p></h3>
regular expression, and returns the matches, as an
Enter the string<input type="text" id="textfield"/>
Array object otherwise it will return null. <input type="button" value="check"
onclick="testMatch();"/>
</body>
</html>
17
Department of Computer Engineering www.sandipfoundation.org
RegExp Object Properties 04

• A regular expression is an object that describes a pattern <p>a Javascript code to constructor property of
of characters. regular expression object OR</p>
• Regular expressions are used to perform pattern-matching <p>a Javasript code to return the function that
and "search-and-replace" functions on text. create regular expression object prototype</p>
• Syntax <html>
/pattern/modifiers; <script type="text/javascript">
• Example function testMatch()
var patt = /w3schools/I {
var str = "Visit W3Schools!";
Property Description var patt1 = /W3S/g;
constructor Returns the function that created the RegExp var res = patt1.global;
object's prototype document.getElementById("demo").innerHTML =
res;
global Checks whether the "g" modifier is set }
ignoreCase Checks whether the "i" modifier is set </script>
<body>
lastIndex Specifies the index at which to start the next <button onclick="testMatch()"/>Check</button>
match <p id="demo"></p>
multiline Checks whether the "m" modifier is set </body>
</html>
source Returns the text of the RegExp pattern
18
Department of Computer Engineering www.sandipfoundation.org
Frame 04

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

• Creating Frames
• 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.

19
Department of Computer Engineering www.sandipfoundation.org
Frame 04

Frame attributes
Attribute Description
src It is used to give the file name that should be located in the frame. Its value can be any URL.
For example: src= “/html/abc.html”
name It allows you to give a name to a frame. This attribute is used to indicate that a document should be
loaded into a frame.
frameborder It specifies whether or not the borders of that frame are shown. This attribute overrides the value
given in the frameborder attribute on the tag if one is given. This can take values either 1 (Yes) or 0
(No).

Frameset attributes
Attribute Description
cols (Columns) It specifies how many columns are to be contained in the frameset and the size of each column.
rows It works like the 'cols' attribute and takes the same values, but it is used to specify the number of
rows in the frameset.

20
Department of Computer Engineering www.sandipfoundation.org
Frame 04

<html>
<html>
<frameset cols="50%,25%,25%">
<frameset rows="50%,25%,25%”
<frame style="background-color:red;">
<frame style="background-color:blue;"> cols="50%,25%,25%">
<frame style="background-color:red;">
<frame style="background-color:green;">
<frame style="background-color:blue;">
</frameset>
<frame style="background-color:green;">
</html>
<frame style="background-color:red;">
<frame style="background-color:blue;">
<html> <frame style="background-color:green;">
<frameset rows="50%,25%,25%"> </frameset>
<frame style="background-color:red;"> </html>
<frame style="background-color:blue;">
<frame style="background-color:green;">
</frameset>
</html>

21
Department of Computer Engineering www.sandipfoundation.org
Frame 04

<html> <html>
<body> <frameset cols="50%,25%,25%">
<h4>Frame 1</h4> <frame src="frame1.html">
</body> <frame src="frame2.html">
</html> <frame src="frame3.html">
</frameset>
<html> </html>
<body>
<h4>Frame 2</h4> <html>
</body> <frameset cols="50%,25%,25%">
</html> <frame src="frame1.html" frameborder="0"
border="0">
<html> <frame src="frame2.html" frameborder="0"
<body> border="0">
<h4>Frame 3</h4> <frame src="frame3.html" frameborder="0"
</body> border="0">
</html> </frameset>
</html>

22
Department of Computer Engineering www.sandipfoundation.org
Calling a Child Window 04

<html> <html>
<frameset cols="25%,75%"> <head>
<frame src="frame11.html"/> <script>
<frame src="frame22.html"/> function display()
</frameset> {
</html> document.write("This function is called from
frame 1");
}
</script>
</head>
<html> <body>
<body> <h4>Frame 22</h4>
<h4>Frame 11</h4> </body>
<input type="button" name="button1" </html>
value="Click"
onclick="parent.frame22.display()"/>
</body>
</html>

23
Department of Computer Engineering www.sandipfoundation.org
Changing the content and Focus of Child Window 04

<html>
<frameset cols="25%,75%"> <html>
<frame src="frame111.html"/> <body>
<frame src="frame222.html"/> <h4>Frame 222</h4>
</frameset> </body>
</html> </html>

<html>
<head>
<script>
function display()
{
parent.frame222.location.href="frame3.html";
}
</script>
</head>
<h4>Frame 1</h4>
<input type="button" name="button1"
value="Click" onclick="display()"/>
</html>
24
Department of Computer Engineering www.sandipfoundation.org
Accessing the Elements of other Child Window 04

<html> <input type="button" name="button1"


<frameset cols="25%,75%"> value="Click" onclick="display()"/>
<frame src="frame1111.html"/> </body>
<frame src="frame2222.html"/> </html>
</frameset>
</html> <html>
<body>
<html> <h4>Frame 2</h4>
<head> <p id="para">Frame 2 content</p>
<script> </body>
function display() </html>
{
parent.frame2222.document.getElementById("par
a").innerHTML="Element of frame 2 is accessed
from frame1";
}
</script>
</head>
<body>
<h4>Frame 1</h4>
25
Department of Computer Engineering www.sandipfoundation.org
Rollover 04

•We can change the appearance of the webpage by using mouse rollover.
•When mouse is moved to any element of webpage, the appearance of that element will be
changed.
•If the mouse cursor is moved to an image, then image appearance related effect can take place.
•It is also applicable to button, label, table etc.
•Rollover is used to improve user experience and quality of webpages.

Creating Rollover
•To create rolloer we use ’onmouseover’ event.
•When the mouse pointer is moved onto an element, onto one of its children, the mouseover
element is occurred.
•The onmouseover event is generally used with the ‘onmouseout’.
•When the mouse pointer is moved out of the element, the onmouseout element is occurred.

26
Department of Computer Engineering www.sandipfoundation.org
Accessing the Elements of other Child Window 04

27
Department of Computer Engineering www.sandipfoundation.org
Accessing the Elements of other Child Window 04

28
Department of Computer Engineering www.sandipfoundation.org
Accessing the Elements of other Child Window 04

29
Department of Computer Engineering www.sandipfoundation.org
Accessing the Elements of other Child Window 04

30
Department of Computer Engineering www.sandipfoundation.org
36

Presented By
Prof. Vishal B. Ohol
Experience : 10 Years
ME(Software Engg)

For any queries!!!


9975641048

[email protected]

31
Department of Computer Engineering www.sandipfoundation.org

You might also like