Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

css unit 5

Uploaded by

Deep gaichor
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views

css unit 5

Uploaded by

Deep gaichor
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 15

Regular Expression

-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------
Regular Expression:
-->
- A regular expressionn is a sequence of characters that define a search pattern.
- It is mainly used for string pattern matching.
- Regular expressions are very powerful and can be used to perform a wide variety
of string manipulations.
- It is usually used to validate data entered in forms.
- It is also called as regex.
Regular Expressions can be created in two ways:
i] Using regex literal
Syntax:
let regex = /pattern/flags
Ex:
let regex = /[a-z]/g;

ii] Using the RegExp constructor


Syntax:
let regex = new RegExp("pattern","flags");
Ex:
let regex = new RegExp("[0-9]","g");

1. Pattern: The sequence of characters that define the search criteria.


2. Modifiers: Options to alter the behavior of the regular expression.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Regular Expression Ex</title>
</head>
<body>
<script>
let r1=/[a-z]/g;
let r2=new RegExp("[0-9]","g");
</script>
</body>
</html>
<script>
let str = "Hello123";
let result1 = str.match(r1);
let result2 = str.match(r2);
document.write("Alphabets: ", result1);
document.write("<br>Numbers: ", result2);
</script>

Quantifiers
-->
Quantifiers provide way to specify how many times a particular character or set of
characters is allowed to repeat itself within a pattern.
Each special character has a specific connotation.

Expression & Description


p+ It matches any string containing one or more p's.
p* It matches any string containing zero or more p's.
p? It matches any string containing at most one p.(zero or one occurrences)
p{N} It matches any string containing a sequence of N p's
p{2,3} It matches any string containing a sequence of two or three p's.
p{2, } It matches any string containing a sequence of at least two p's.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Quantifiers</title>
</head>
<body>
<script>
var a,b,c,d,e,f;
a=/\d{4}/;
b=/\d{4,5}/;
c=/\d{4,}/;
d=/\d*/;
e=/\d+/;
f=/\d?/;
</script>
</body>
</html>

Meta Characters
-->
- Special characters that define the structure of the search pattern.
- A metacharacter is an alphabetical character preceded by a backslash that acts to
give the combination a special meaning.
Character & Description
. (dot) a single character
\s a whitespace character (space, tab, newline)
\S non-whitespace character
\d a digit (0-9)
\D a non-digit
\w a word character (a-z, A-Z, 0-9, _)
\W a non-word character
[\b] a literal backspace (special case).
[aeiou] matches a single character in the given set
[^aeiou] matches a single character outside the given set
(foo|bar|baz) matches any of the alternatives specified.

Modifiers/Flags
-->
Modifiers: Options to alter the behavior of the regular expression.
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

test() method:
-->
It tests for a match in a string.
This method returns true if it finds a match, otherwise it returns false.
Syntax:
regexobj.test(string);
regexobj: Object of regular expression.
string: Pattern to search.
Ex:
<!DOCTYPE html>
<html>
<head>
<title>test() method</title>
</head>
<body>
<script>
function sear(){
var a=/\d{4}/;
if(a.test("1234")){
document.write("Pattern is found.");
}else{
document.write("Pattern is not found.");
}
}
sear();
</script>
</body>
</html>

search() method:
-->
This method is used to search a specified pattern in the string.
It returns the index where match is found.
Syntax:
str.search(pattern);
str: String where pattern will be searched.
pattern: Pattern to search.

Ex:

<!DOCTYPE html>
<html>
<head>
<title>search() method</title>
</head>
<body>
<script>
function sear(){
var a=/\d{4}/;
b="1234".search(a);
if(b!=-1){
document.write("Pattern is found.");
}else{
document.write("Pattern is not found.");
}
}
sear();
</script>
</body>
</html>

match() method.
-->
It searches a string for a specified pattern.
It returns match word as an array.
It returns null if no match is found.
Syntax:
str.match(regex);
str: String where pattern will be searched.
regex: Pattern to search.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>match() method</title>
</head>
<body>
<script>
function sear(){
var a=/\d{4}/;
b="this is 1234".match(a);
document.write("Match found : "+b);
}
sear();
</script>
</body>
</html>

replace() method.
-->
It searches a string for a specified pattern, if found replaces matched substring
with replacement substring.
Syntax:
str.replace(regex,rstr);
str: String where pattern will be searched.
regex: Pattern to search.
rstr: Replacement String.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>replace() method</title>
</head>
<body>
<script>
var a=/\d{4}/;
str='this is 1234';
b=str.replace(a,'5678');
document.write("Original string : "+str+"<br>");
document.write("New string : "+b);
</script>
</body>
</html>

Q Finding non-matching character ex


Check if "MSBTE" is present in string.
-->
<!DOCTYPE html>
<html>
<head> </head>
<body>
<script>
var a = /[^MSBTE]/i;
str = "this is msbt";
d = a.test(str);
if (d) {
document.write("Msbte is not present.<br>");
} else {
document.write("Msbte is present.");
}
</script>
</body>
</html>

Q Entering a range of characters ex


-->
<!DOCTYPE html>
<html>
<head> </head>
<body>
<script>
a = /[abc]/i;
b = /[a-d]/;
str = "this is msbt";
d = a.test(str);
e = b.test(str);
document.write("For a: "+d);
document.write("<br>For b: "+e);
</script>
</body>
</html>

Q Matching digits and non digits ex


-->
<!DOCTYPE html>
<html>
<head> </head>
<body>
<script>
a = /\d\d/;
b = /^\d/;
str = "this 43 is msbt";
d = a.test(str);
e = b.test(str);
document.write("Digits Matched a: "+d);
document.write("<br>Digits Matched b: "+e);
</script>
</body>
</html>

Q Matching punctuation and Symbols ex.


-->
<!DOCTYPE html>
<html>
<head> </head>
<body>
<script>
a = /[\"\?]/;
b = /[^\.]/;
str = "this is? msbte.";
d = a.test(str);
e = b.test(str);
document.write("Symbol Matched a: "+d);
document.write("<br>Symbol not Matched b: "+e);
</script>
</body>
</html>

Q Matching words ex.


-->
<!DOCTYPE html>
<html>
<head> </head>
<body>
<script>
a = /[\bis\b]/;
str = "this is? msbte.";
d = a.test(str);
document.write("WordMatched a: "+d);
</script>
</body>
</html>

Q Return Matched characters ex.


-->
<!DOCTYPE html>
<html>
<head> </head>
<body>
<script>
a=/abc/;
b="this abc is abs.";
c=a.exec(b);
document.write(c);
</script>
</body>
</html>

Regular Expression Object


-->
property Property & Description
constructor : Specifies the function that creates an object's prototype.
global : Specifies if the "g" modifier is set.
ignoreCase : Specifies if the "i" modifier is set.
lastIndex : The index at which to start the next match.
multiline : Specifies if the "m" modifier is set.
source : The text of the pattern.

<html>
<head>
<title>JavaScript RegExp ignoreCase Property</title>
</head>
<body>
<script type = "text/javascript">
var re = new RegExp( "string" );
if ( re.ignoreCase ){
document.write("Test1-ignoreCase property is set");
} else {
document.write("Test1-ignoreCase property is not set");
}
re = new RegExp( "string", "i" );
if ( re.ignoreCase ){
document.write("<br/>Test2-ignoreCase property is set");
} else {
document.write("<br/>Test2-ignoreCase property is not set");
}
</script>
</body>
</html>

Frame
-----------------------------------------------------------------------------------
-------------------------------------------------------------------------------

Frame
-->
A frame is an HTML element that allows the display of another HTML document within
the current web page. Frames are implemented using the <frameset>, <frame> and
<iframe> element in HTML.
Frames are used to divide browser window into multiple sections where each section
is treated as window that can have independent contents. A frame can load separate
HTML document in each frame in a window.

<frameset> tag: A frameset is defined as a set of frames inserted in an HTML web


page. These frames can be in the form of rows and columns in different size.
Frameset tells the browser how to divide the screen into multiple areas.
Attributes:
cols = “pixels/percentage” Specify number and size of columns in a frameset.
Default value is 100%,
rows = “pixels/percentage” Specify number and size of rows in a frameset. Default
value is 100%.
border = number Specify thickness of border for frame. 0 indicates no
border
framespacing This attribute specifies the amount of space between frames
in a frameset. This can take any integer value.

<frame> tag: Frame tag is used to insert web page content in a frame. It is an
empty tag.
Attributes:
src = “URL” Specify address of a web page to be displayed in a frame.
name = “ string” Specify name of the frame which can be used as target to open a
link.
noresize Specify that the frame is not resizable.
frameborder Specifies whether borders of frame are shown.It takes values 1 or
0.

Ex:
page1.html
<!DOCTYPE html>
<html>
<body>
<h1> Frame 1 </h1>
</body>
</html>

page2.html
<!DOCTYPE html>
<html>
<body>
<h1> Frame 2 </h1>
</body>
</html>
final.html
<html>
<frameset cols = “30%,70%” border="5" bordercolor="black">
<frame src = “page1.html” name=”f1”>
<frame src = “page2.html” name=”f2”>
</frameset>
</html>

Invisible borders of frame:


-->
frameborder is an attribute which specifies if border of frame are shown or not.
Borders of frame can be made invisible by setting values of border and frameborder
to 0.
ex:
<!DOCTYPE html>
<html>
<head>
<title>Invisible Frame Ex</title>
</head>
<frameset rows="10%,*" border="5" bordercolor="black">
<frame src="f1.html">
<frameset cols="33.33%,33.33%,33.33%" border="0" frameborder="0">
<frame src="f2.html">
<frame src="f3.html">
<frame src="f4.html">
</frameset>
</frameset>
</html>

Calling a child window.


-->
The main window defining frames in it is called parent window and each frames
contain child windows.
We can call one child window from another child window.
parent keyword is used to call any frame inside parent window.

child1.html
<!DOCTYPE html>
<html>
<head>
<title>Child 1</title>
</head>
<body>
<center>
<h1>Child 1</h1>
<input type="button" value="Click Here" onclick="parent.n2.show()">
</center>
</html>

child2.html
<!DOCTYPE html>
<html>
<head>
<title>Child 2</title>
</head>
<body>
<script>
function show(){
document.write("How aer you my friend?");
}
</script>
<center>
<h1>Child 2</h1>
</center>
</body>
</html>

parentframe.html
<!DOCTYPE html>
<html>
<head>
<title>Parent Frame</title>
</head>
<frameset cols="25%,*">
<frame src="child1.html" name="n1">
<frame src="child2.html" name="n2">
</frameset>
</html>

Changing the content of a child window.


-->
- We can change the content of a child window by assigning the new source code to
child window's href attribute.

child1.html
<!DOCTYPE html>
<html>
<head>
<title>Child 1</title>
</head>
<body>
<center>
<h1>Child 1</h1>
<input type="button" value="Click Here"
onclick="parent.n2.location.href='child3.html'">
</center>
</html>

child2.html
<!DOCTYPE html>
<html>
<head>
<title>Child 2</title>
</head>
<body>
<center>
<h1>Child 2</h1>
</center>
</body>
</html>

child3.html
<!DOCTYPE html>
<html>
<head>
<title>Child3</title>
</head>
<body>
<center>
<h1>Child 3</h1>
<h3>Hello Chalo, HEllo GO</h3>
</center>
</html>

parentex.html
<!DOCTYPE html>
<html>
<head>
<title>Parent Frame</title>
</head>
<frameset cols="25%,*">
<frame src="child1.html" name="n1">
<frame src="child2.html" name="n2">
</frameset>
</html>

Changing the focus of child window.


-->
By Default, the last child window created in frameset has focus(i.e active).
Any window can be set as active by using focus.
Syntax:
windowname.focus();

Ex:
child1.html
<!DOCTYPE html>
<html>
<head>
<title>Child 1</title>
</head>
<body>
<center>
<h1>Child 1</h1>
</center>
</html>

child2.html
<!DOCTYPE html>
<html>
<head>
<title>Child 2</title>
</head>
<body>
<center>
<h1>Child 2</h1>
<input type="button" value="Click Here" onclick="parent.n1.focus()">
</center>
</body>
</html>

parentframe.html
<!DOCTYPE html>
<html>
<head>
<title>Parent Frame</title>
</head>
<frameset cols="25%,*">
<frame src="child1.html" name="n1">
<frame src="child2.html" name="n2">
</frameset>
</html>

Writing to a child window.


-->
The content of a child window is a webpage that exists on the web server.
User can dynamically create content for a webpage when frameset is defined.
The content in child window can be created dynamically by calling a function with
onload event.
onload event is used with frameset tag while creating dynamic content for child
window.

Ex:
<html>
<head>
<script>
function ChangeContent()
{
window.t1.document.open();
window.t1.document.write('<html >');
window.t1.document.write('<body>');
window.t1.document.write('<h1>Parent Frame</h1>');
window.t1.document.write('</body>');
window.t1.document.write('</html>');
window.t1.document.close();
}
</script>
</head>
<frameset rows="50%,50%" onload="ChangeContent()">
<frame src=" " name="t1" />
<frame src="webpage2.html" name="t2" />
</frameset>
</html>

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 the 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.
Ex:
parent1.html
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example</title>
</head>
<frameset rows="50%,50%">
<frame src="p1.html" name="n1">
<frame src="p2.html" name="n2">
</frameset>
</html>

p1.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 1</title>
</head>
<body>
<form name="f1">
<input type="text" name="r1">
<input type="button" name="b1" value="button1" onclick="change1()">
</form>
<script>
function change1() {
parent.n2.document.f2.b2.value = "ab";
}
</script>
</body>
</html>

p2.html
<!DOCTYPE html>
<html>
<head>
<title>Frame 2</title>
</head>
<body>
<form name="f2">
<input type="text" name="r2">
<input type="button" name="b2" onclick="change1()" value="button2">
</form>
<script>
function change1() {
parent.n1.document.f1.b1.value = "ac";
}
</script>
</body>
</html>

Rollover
-----------------------------------------------------------------------------------
-------------------------------------------------------------
Rollover/ Creating Rollover
-->
Rollover means change in the appereance of object when user his mouse over an
object on the page.
The rollover effect is mainly used in webpage designing for advertising purpose.
There are two ways to create rollover, using plain html or mixture of html and
javascript.
Javascript rollovers are handled by adding an onmouseover or onmouseout event.
- onmouseover is triggered when mouse moves over an element.
- onmouseout is triggered when mouse moves away from the element.
Ex:
<!DOCTYPE html>
<html>
<head>
<title>Rollover Ex</title>
</head>
<body>
<img src="m.png" width="300px" height="400px" onmouseover="src='m1.png'"
onmouseout="src='m2.png'">
</body>
</html>

TextRollover
-->
Text rollover is a technique whenever, user rollovers text, javascript allows to
change the page element usually some graphics image.
Ex:
<html>
<head></head>
<body>
<textarea
cols="50"
name="rollovertext"
onmouseover="this.value='What is rollover?'"
onmouseout="this.value='Rollover means a webpage changes when the user moves
his or her mouse over an object on the page'"
></textarea>
</body>
</html>

Multiple actions for rollover.


-->
When user want to change the image and display additional information about the
element on which mouse is rolling over.
This process is referred as multiple actions for rollover.
We use window.open() method to change or create information when rollover over a
certain element.

Ex:
<html>
<head>
<title>text rollovers</title>
<script>
function open_new_window(clrname) {
if (clrname == 1) {
document.clr.src = "red.png";
mwin = window.open(
"",
"myadwin",
"height=100,width=150,left=500,top=200"
);
mwin.document.write("looks like red color");
}
if (clrname == 2) {
document.clr.src = "green.png";
mwin = window.open(
"",
"myadwin",
"height=100,width=150,left=500,top=200"
);
mwin.document.write("looks like green color");
}
if (clrname == 3) {
document.clr.src = "blue.png";
mwin = window.open(
"",
"myadwin",
"height=100,width=150,left=500,top=200"
);
mwin.document.write("looks like blue color");
}
}
</script>
</head>
<body>
<table border="1" width="100%">
<tbody>
<tr valign="top">
<td width="50%">
<a><img height="500" src="red.png" width="900" name="clr" /></a>
</td>
<td>
<h2>
<a onmouseover="open_new_window(1)" onmouseout="mwin.close()">
<b><u>RED</u></b></a
>
<br /><br />
<a onmouseover="open_new_window(2)" onmouseout="mwin.close()">
<b><u>GREEN</u></b></a
>
<br /><br />
<a onmouseover="open_new_window(3)" onmouseout="mwin.close()">
<b><u>BLUE</u></b></a
>
</h2>
</td>
</tr>
</tbody>
</table>
</body>
</html>

More Efficient rollover


-->
The images can be stored in an array and required images are displayed when the
webpage is loaded.
This makes rollover action efficient because the images are already collected and
loaded in the array.
The required image is displayed, when user rollover particular text.
Ex:
<html>
<head>
<title>text rollovers</title>
<script>
r=new Image();
g=new Image();
b=new Image();
if(document.images){
r.src="red.png";
g.src="green.png";
b.src="blue.png";
}else{
r.src="";
g.src="";
b.src="";
document.clr.src="";
}
</script>
</head>
<body>
<table border="1" width="100%">
<tbody>
<tr valign="top">
<td width="50%">
<a><img height="500" src="red.png" width="900" name="clr" /></a>
</td>
<td>
<h2>
<a onmouseover="document.clr.src='red.png'">
<b><u>RED</u></b></a>
<br /><br />
<a onmouseover="document.clr.src='green.png'">
<b><u>GREEN</u></b></a>
<br /><br />
<a onmouseover="document.clr.src='blue.png'">
<b><u>BLUE</u></b></a>
</h2>
</td>
</tr>
</tbody>
</table>
</body>
</html>

You might also like