Scribd
Upload
15 views

CSS Chapter 5

Uploaded by

mejariarpit16
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
15 views

CSS Chapter 5

Uploaded by

mejariarpit16
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 25

Regular Expression,

Rollover and
Frames
Unit - V

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


1
MHSSP
Fra
me
• It defines one particular window (frame) within a <frameset>.

• Each <frame> in a <frameset> can have different attributes, such as border,


scrolling, the ability to resize etc.

• In HTML, <frame> tag has no end tag.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


2
MHSSP
Fra
Attribute Value me
Description
frameborder 0 Specifies whether or not to display a border around a frame
1
longdesc URL Specifies a page that contains a long description of the content
of a frame
marginheight pixels Specifies the top and bottom margins of a frame
Marginwidth pixels Specifies the left and right margin of a frame
Name text Specifies the name of a frame
noresize noresize Specifies that a frame is not resizable
scrolling yes Specifies whether or not to display scroll bars in a frame
no
auto
src URL Specifies the URL of the document to show in a frame
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
3
MHSSP
Fra
<html>
me
<frameset cols="25%,25%,50%"
rows=“50%,50%">
<frame src="coffee.html">
<frame src="computer.html">
<frame src="phone.html">
<frame src="Bookmark.html">
<frame src="anchor.html">
<frame src="list.html">
</frameset>

</html>
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
4
MHSSP
Fra
• <frameset>: me
• <frameset> element holds one or more <frame> elements.
• Each <frame> element can hold a separate document.
• The <frameset > element specifies how many columns or rows there will be in the
frameset, and how much percentage/pixels of space will occupy each of them.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


5
MHSSP
Fra
• <frameset>: Attributes me
Attribute Value Description
cols pixels% Specifies the number and size of columns in a frame
rows pixels% Specifies the number and size of rows in a frame

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


6
MHSSP
Focus to a Child
Window
• Focus() method is used to set focus to the new child window.

Syntax: win_obj.focus();

• E.g. var myWindow = window.open("", "", "width=200,


height=100"); myWindow.document.write("<p>A new
window!</p>"); myWindow.focus();

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


7
MHSSP
Accessing elements of another
<html>
<head> child window
<title>
Accessing child window elements.
</title>
</head><body>
<input type="text" id="txt1" value=""/><br>
<input type="button" id="btn1" value="open" onclick="openchild()">
<input type="button" id="btn2" value="send" onclick="sendval()">
Parent.htm
<script> l
var popchild;
function openchild()
{popchild=window.open("child.html","child window");}
function sendval()
{ if(popchild != null && !popchild.closed)
{var p=popchild.document.getElementById("p1");
p.innerHTML=document.getElementById("txt1").value;
popchild.focus();}
Else{
alert("Child
window has been
}</script></body></html> Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
8
closed.");} MHSSP
Accessing elements of another
<html>
<head> child window
<title>
Child window
</title>
</head>
<body>
<p id="p1"></p>
</body>
</html>

Child.html

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


9
MHSSP
Rollov
er
• Rollover is a JavaScript technique used by Web developers to produce an
effect in which the appearance of a graphical image changes when the user
rolls the mouse pointer over it.

• Rollover also refers to a button on a Web page that allows interactivity


between the user and the Web page.

• It causes the button to react by either replacing the source image at the
button with another image or redirecting it to a different Web page.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


10
MHSSP
Rollov
er
• Rollover is triggered when the mouse moves over the primary image, causing
the secondary image to appear. The primary image reappears when the
mouse is moved away.

• Occasionally, rollover is referred to as synonym for mouseover.

• Rollover can be accomplished using text, buttons or images, which can be


made to appear when the mouse is rolled over an image. The user needs two
images/buttons to perform rollover action.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


11
MHSSP
Rollov
er
• Syntax:
<element onmouseover=“myScript” onmouseout=“myScript”>

• The onmousemove event occurs every time the mouse pointer is moved over
the div element.
• The onmouseenter event only occurs when the mouse pointer enters the div
element.
• The onmouseover event occurs when the mouse pointer enters the div
element, and its child elements.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


12
MHSSP
Rollov
<html>
<head><title> er
Mouse Rollover events
</title></head>
<body>
<h1 id="head1" onmouseover="mouseover()"
onmouseout="mouseout()">
Hello There !!!</h1>
<script>
function mouseover()
{document.getElementById("head1").style.color="red";
}
function mouseout()
{document.getElementById("head1").style.color="blue";
}</script></body></html>
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
13
MHSSP
Rollov
<html>
<head><title>
er
Image rollover using text
</title></head>
<body>
<img src="book1.jpg" name="displaybook"/>
<p id="p1" onmouseover="showbook(0)">Book1</p><br>
<p id="p2" onmouseover="showbook(1)">Book2</p><br>
<p id="p3" onmouseover="showbook(2)">Book3</p><br>
<script>
var mybooks=["book1.jpg","book2.jpg","book3.jpg"];
function showbook(book)
{document.displaybook.src=mybooks[book];
}</script>
</body></html>
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
14
MHSSP
Rollov
<html> er
<head><title>
Rollover Text
</title></head>
<body>
<textarea rows="2" cols="70" name="rollovertext"
onmouseover="this.value='What is Pointer?'" onmouseout="this.value='A Pointer
is a special variable to store the address of another variable.'">
</textarea>
</body>
</html> Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
15
MHSSP
Regular
• A regular expression is an object that describes a pattern of characters.
Expression
• Regular expressions are used to perform pattern-matching and "search-and-
replace" functions on text.
Syntax:
/pattern/modifiers;

• E.g.: var patt =


/w3schools/i
w3schools/i is a regular expression
Where: w3schools is a pattern to be used in search
i is a modifier (modifies search to be case-insensitive)

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


16
MHSSP
Regular
• Modifiers:
Expression
• g : performs a global match, case-sensitive(find all matches rather than
stopping after the first match)

•i : performs case-insensitive matching and returns the first


occurrence.

• m: By default, all matching or search operation is done as case sensitive and


on single line. To perform search or matching on text containing new line
character (\n) use modifier (m). Performs multiline matching.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


17
MHSSP
Regular
• Brackets: they are usedExpression
to find a range of characters.

• [abc] : find any character between the bracket. i.e. between a, b and c.

• [^abc] : find any character NOT between the brackets.

• [0-9]: Find any character between the brackets (any digit).

• (x|y): Find any of the alternatives specified.

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


18
MHSSP
Regular
• Metacharacters: Characters with special meaning.

•.
Expression
: Find any single character, except newline or line
terminator.

• \w : Find a word character.

• \W: Find a Non word character.

• \d : Find a digit.

• \D : Find a Non digit character.

• \s : Find a white space character.

• \S : Find a Non white space character.


• \b : Find a match at the beginning of a word: \bDICE
or at the end of the word: DICE\b
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
19
MHSSP
Regular
• Quantifiers:
Expression
• n+ : Matches any string that contains at least one n. (1 or more)

• n* : Matches any string that contains zero or more occurrences of n.

• n?: Matches any string that contains zero or one occurrences of n.

• n{X} : Matches any string that contains a sequence of X n’s.

• n{X,Y} : Matches any string that contains a sequence of X to Y n’s.

• n{X} : Matches any string that contains a sequence of at least X n’s.

• n$ : Matches any string with n at the end of it.

• ^n : Matches any string with n at the beginning of it.


Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
20
MHSSP
Regular
• Methods:
Expression
• exec() : Tests for a match in a string. Returns the first match. (pattern.exec())

• test() : Tests for a match in a string. Returns True or False. (pattern.test())

• match() : The match() method searches a string for a match against a regular
expression, and returns the matches, as an Array object. (text.match(regexp))

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


21
MHSSP
Regular
<html>
<body> Expression
<p>The test() method returns true if it finds a match, otherwise it returns false.</p>
<button onclick="myFunction()">Click Me!!</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "There is a price for everything, nothing is free in this world";
var patt = new RegExp("nothing");
var res = patt.test(str);
document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
22
MHSSP
Regular
<body>
Expression
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for a "1", followed by zero or one "0" characters:</p>
<p id="demo"></p>
<script>
let text = "1, 100 or 1000?";
let result = text.match(/10?/g);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
23
MHSSP
Regular
<html>
<body> Expression
<h2>JavaScript Regular Expressions</h2>

<p>Do a global search for an "l", followed by zero or more "o" characters:</p>
<p id="demo"></p>
<script>
let text = "Hellooo World! Hello W3Schools!";
let result = text.match(/lo*/g);
document.getElementById("demo").innerHT
ML = result;
</script>
</body>
</html>
Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,
24
MHSSP
Regular
<html>
<body> Expression
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "The rain in SPAIN stays mainly in the plain";
var res = str.match(/ain/gi);
document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>

Prepared By: Khan Mohammed Zaid, Lecturer, Comp. Engg.,


25
MHSSP

You might also like