[go: up one dir, main page]
Scribd
Upload
846 views62 pages

Unit-5 Regular Expression, Rollover and Frames

The document discusses regular expressions (RegExp) in JavaScript. It describes how RegExp can be used to validate form fields, perform text searches and replacements, and count characters. It provides examples of creating RegExp using the constructor and literal syntax. It also explains RegExp methods like exec(), test(), search(), replace(), match(), and split(); and how they are used to search and manipulate strings. Special characters used in regular expressions like brackets, quantifiers, and metacharacters are also discussed.

Uploaded by

103-abhijit arote
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
846 views62 pages

Unit-5 Regular Expression, Rollover and Frames

The document discusses regular expressions (RegExp) in JavaScript. It describes how RegExp can be used to validate form fields, perform text searches and replacements, and count characters. It provides examples of creating RegExp using the constructor and literal syntax. It also explains RegExp methods like exec(), test(), search(), replace(), match(), and split(); and how they are used to search and manipulate strings. Special characters used in regular expressions like brackets, quantifiers, and metacharacters are also discussed.

Uploaded by

103-abhijit arote
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/ 62

UNIT 05 14 M

Regular Expression,
Rollover and Frames
REGULAR EXPRESSION:
 Regular Expression (RegExp) is an object that
describes a sequence of characters used for defining
a search pattern.
 A regular expression is very similar to a

Prepared By Mrs.S.J.Patil
mathematical expression, except a regular
expression tells the browser how to manipulate text
rather than numbers by using special symbols as
operators.
 For example, regular expressions can be used to
validate form fields like email addresses and phone
numbers, to perform all types of text search and text
replace operations, for counting specific characters
in a string.
CRATING REGULAR EXPRESSION
 A regular expression could be defined by using two ways:
1) Using RegExp constructor:

 Syntax - var pattern1 = new RegExp(pattern,modifiers);


 Example - var re1 = new RegExp("xyz", "i");

Prepared By Mrs.S.J.Patil
2) Using literal:
 Syntax - var pattern1 = /pattern/flags;
 Example - var re2 = /xyz/;

 Here,
pattern : The pattern to search for
/pattern/: A regular expression
/pattern/i : A case-insensitive regular expression
 Example:
let pattern = /student/i;
Example Explained:
student The pattern to search for
/ student / A regular expression
/ student /i A case-insensitive regular
expression

Prepared By Mrs.S.J.Patil
 Modifiers : Modifiers are used to perform case-
insensitive and global searches:
WAP TO CHECK WHETHER THE STRING CONTAINS
GIVEN PATTERN OR NOT
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a case-insensitive search for “mywebsite" in a

Prepared By Mrs.S.J.Patil
string:</p>
<p id="demo"></p>
<script>
let text = "Visit mywebsite";
let pattern = /mywebsite/i;
let result = text.match(pattern);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
LANGUAGE OF REGULAR EXPRESSION
 Set of words that can be derived by using the regular
expression is known as language of regular
expression.
 There are many special characters are available
which is used to define regular expression.

Prepared By Mrs.S.J.Patil
1.Brackets:
 Brackets ([ ]) have a special meaning when used in
the context of regular expressions. They are used to
find a range of characters.
2.Quantifiers: the quantifiers are used to specify
how many times a character in a regular
expression should match.

Prepared By Mrs.S.J.Patil
3.Metacharacter: A metacharacter is simply an
alphabetical character preceded by a backslash that
acts to give the combination a special meaning.

Prepared By Mrs.S.J.Patil
REGEXP METHODS
 exec():Search for a match in a string. It returns an
array of information or null on mismatch.
 test():Test whether a string matches a pattern. It
returns true or false.

Prepared By Mrs.S.J.Patil
 search():Search for a match within a string. It returns
the index of the first match, or -1 if not found.
 replace():Search for a match in a string, and replaces
the matched substring with a replacement string.
 match():Search for a match in a string. It returns an
array of information or null on mismatch.
 split():Splits up a string into an array of substrings
using a regular expression.
METHOD DESCRIPTION
 The exec method searches string for text that
matches regexp. If it finds a match, it returns an
array of results; otherwise, it returns null.
 Syntax:

Prepared By Mrs.S.J.Patil
RegExpObject.exec( string );
 Parameter Details

 string − The string to be searched

 Return Value

 Returns the matched text if a match is found, and


null if not.
 The test method searches string for text that
matches regexp.
 If it finds a match, it returns true; otherwise, it
returns false.
 Syntax:

Prepared By Mrs.S.J.Patil
RegExpObject.test( string );
 Parameter Details:

 string − The string to be searched

 Return Value

 Returns the matched text if a match is found, and


null if not.
 Search():
search() method takes a regular expression/pattern as
argument and search for the specified regular
expression in the string.
This method returns the index where the match

Prepared By Mrs.S.J.Patil
found.
Syntax:

string.search(RegExpObject);
EXAMPLE OF SEARCH METHOD:
<html>
<body>
<script>
function myFunction()
{
// input string

Prepared By Mrs.S.J.Patil
var str = "Good Morning!";
// searching string with modifier i
var n = str.search(/Morning/i);
document.write(n + '<br>');
// searching string without modifier i
var n = str.search(/Morning/);
document.write(n);
}
myFunction();
</script>
</body>
</html>
 o/p: 5
5
 replace() :The replace() method replaces a specified value
with another value in a string.
 Syntax: str.replace(/pattern/modifier,newstr);
 Example:// Replacing a text using Regular Expression
<html>
<head>

Prepared By Mrs.S.J.Patil
<script>
var string = "You are a Bad Student";
var re="Good";
var result = string.replace(/Bad/,re);
document.write("the modified string is:"+ '<br>');
document.write(result);
</script>
</head>
<body>
</body>
</html>
 match() is an inbuilt function in JavaScript used to search a string for a
match against any regular expression. If the match is found, then this will
return the match as an array or return null on mismatch.
 Example:// Wap for matching Word//
<html>
<head>
<title>JavaScript RegExp exec Method</title>
<script type = "text/javascript">
function checking()

Prepared By Mrs.S.J.Patil
{
var str=document.getElementById("txt1").value;
var res=str.match(/client/);
document.write("result="+res);
}
</script>
</head>
<body>
<h2> program to check the use of match method</h2>
Enter the string:<input type="text" id="txt1" >
<input type="button" onclick="checking()" value="check">
</body>
</html>
WAP TO FIND MATCH WORD IN GIVEN REGULAR
EXPRESSION
 Using word boundary\b ,it is use to match word between start
\b and end \b boundaries.

<html>
<body>

Prepared By Mrs.S.J.Patil
<h2>JavaScript Regular Expressions</h2>
<script>
var mystr = "Good Morning Akash.Good Morning Ram";
let pattern = /\bakash\b/i;
let result = mystr.match(pattern);
document.write(result);
</script>
</body>
</html>

 o/p: JavaScript Regular Expressions


Akash
PROGRAM TO FIND MATCHING CHARACTER USING REGULAR
EXPRESSION

<html>
<body>
<script>
var s = " Learn Javascript scripting language now ";

Prepared By Mrs.S.J.Patil
var result = new RegExp( “script", "g" );
var obj = result.test(s);
document.write("Matching and Return value : " +obj);
</script>
</body>
</html>

o/p:Matching and Return value : true


FINDING NON-MATCHING CHARACTERS
 The character class expression[^a-z](non lowercase)
is used to find out non-matching characters from
lowercase [a] to lowercase[z] by adding caret(^)

Prepared By Mrs.S.J.Patil
symbol at the beginning of a string.
 We can also find out non-matching characters from
uppercase and digits by using [^A-Z](non uppercase)
and [^0-9](non digit )character classes expression .
PROGRAM TO FIND NON MATCHING CHARACTER USING REGULAR
EXPRESSION

<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<p>Do a global search for that characters that are not "h":</p>
<p id="demo"></p>
<script>

Prepared By Mrs.S.J.Patil
let text = "Is this all there is?";
let pattern = /[^h]/g;
let result = text.match(pattern);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

 o/p: JavaScript Regular Expressions


Do a global search for that characters that are not "h":
I,s, ,t,i,s, ,a,l,l, ,t,e,r,e, ,i,s,?
ENTERING A RANGE OF CHARACTER
 If we need to match any character in between range of character then no need write
every character.
 simply enter the range of character in [starting character- ending character]
 for ex:/[a-e]/
<html>
<head>
<title>JavaScript RegExp exec Method</title>

Prepared By Mrs.S.J.Patil
<script type = "text/javascript">
function checking()
{
var re=/[a-z]/;
var str=document.getElementById("txt1").value;
var res=re.test(str);
document.write(res);
}
</script>
</head>
<body>
<h2> program for pattern with range of character </h2>
enter the string<input type="text" id="txt1" >
<input type="button" onclick="checking()" value="check">
</body>
</html>
FINDING M ATCHING DIGITS :
 String may contains digits and non digits i.e character other
than digits. if we want to check weather the string contains the
digits then we use \d , it searches the digits in the given string.
 It is work similar like as[0-9] character class.
<html>
<body>

Prepared By Mrs.S.J.Patil
<h2>JavaScript Regular Expressions</h2>
<p>A global search for digits:</p>
<p id="demo"></p>
<script>
let text = "Give 100%!";
let pattern = /\d/g;
let result = text.match(pattern);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>
FINDING A NON-MATCHING DIGIT
 To check the non-digit then use \D predefined character
class.
 It is work similar like[^0-9] character class.
 Program:
<html>

Prepared By Mrs.S.J.Patil
<head>
<title>JavaScript Regular Expression</title>
</head>
<body>
<script>
var myStr = "100% Responsive!";
var reg = /\D/g;
var match = myStr.match(reg);
document.write(match);
</script>
</body>
</html>
MATCHING PUNCTUATIONS AND SYMBOLS
 Punctuation is mark used in printing and writing to separate
sentences and classes and to help make the meaning of
sentences more clear.
//WAP to find matching punctuation mark in given regular
expression.
<html>

Prepared By Mrs.S.J.Patil
<body>
<h2>JavaScript Regular Expressions</h2>
<script>
var mystr="?.,";
var reg=/[*,+$&%^#|@!?.]/g;
var result=mystr.match(reg);
document.write(result);
</script>
</body>
</html>
 o/p:JavaScript Regular Expressions
?,.,,
//WAP TO FIND MATCH SPECIAL CHARACTER MARK IN GIVEN
REGULAR EXPRESSION.

<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<script>

Prepared By Mrs.S.J.Patil
var mystr="*+$^|.";
var reg=/[*,+$&%^#|@!?]/g;
var result=mystr.match(reg);
document.write(result);
</script>
</body>
</html>
 o/p:JavaScript Regular Expressions
*,+,$,^,|
RETURNING MATCHED CHARACTERS
 There are two functions which return that match
character, match() and exec().
 The match method which is available on string and
takes a regex as an argument, so it is define like

Prepared By Mrs.S.J.Patil
str.match(regex).
 The exec() method which is available on regex and
takes a string as an argument,so it is define like
regex.exec(str).
 Both method searches a string for match against a
regular expression , and return the matches ,as an
array object otherwise it will return null.
<html>
<body>
<h2>JavaScript Regular Expressions</h2>
<script>
var mystr = "Good Morning Raj.";
let pattern = /[A-Z]/g;

Prepared By Mrs.S.J.Patil
let result = mystr.match(pattern);
document.write(result);
</script>
</body>
</html>

 o/p:JavaScript Regular Expressions


G,M,R
 exec() method:
<html>
<body>
<h2>JavaScript RegExp</h2>
<p>The exec() method tests for a match in a string:</p>
<p>Search a string for the character "e":</p>
<p id="demo"></p>

Prepared By Mrs.S.J.Patil
<script>
let text = "The best things in life are free";
let result = /e/.exec(text);
document.getElementById("demo").innerHTML = result;
</script>
</body>
</html>

 o/p:JavaScript RegExp
The exec() method tests for a match in a string:
Search a string for the character "e":
e
REGULAR EXPRESSION OBJECT PROPERTIES
Syntax: RegExpObject.propertname;
 constructor:
Returns the function that created the RegExp object's
prototype.
 global:

Prepared By Mrs.S.J.Patil
Checks whether the "g" modifier is set.if set returns true
,otherwise return false.
 ignoreCase:

Checks whether the "i" modifier is set.if set returns true


,otherwise return false.
 lastIndex:

Specifies the index at which to start the next match.


 multiline:

Checks whether the "m" modifier is set.


 source:

Returns the text of the RegExp pattern.


EXAMPLE :
<html>
<body>
<h2>JavaScript RegExp</h2>
<script>

Prepared By Mrs.S.J.Patil
let pattern=/Hello World/g;
let text=pattern.global;
document.write(text)
</script>
</body>
</html>

O/P:
JavaScript RegExp
true
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

Prepared By Mrs.S.J.Patil
known as a frameset. The window is divided into
frames in a similar way the tables are organized into
rows and columns.
1. FRAME OBJECT
 Frame object represents an HTML frame which
defines one particular window(frame) within a
frameset.
 It defines the set of frame that make up the browser

Prepared By Mrs.S.J.Patil
window.
 It is a property of the window object.

 It has no end tag but they need to be closed properly.

 It is an HTML element.

 It defines a particular area in which another HTML


document can be displayed.
 A frame should be used within a <FRAMESET> tag.
Prepared By Mrs.S.J.Patil
<FRAME> TAG ATTRIBUTES
2. FRAMESET OBJECT
 Frameset object holds two or more frame
elements and each frame element in turn holds a
separate document.
 This object states only how many columns or

Prepared By Mrs.S.J.Patil
rows there will be in the frameset.
 Syntax:
<frameset> . . . </frameset>
Prepared By Mrs.S.J.Patil
CREATE A 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.

Prepared By Mrs.S.J.Patil
 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 frames.
FOLLOWING IS THE EXAMPLE TO CREATE THREE
HORIZONTAL FRAMES −
<html>
<head> <title>HTML Frames</title> </head>
<frameset rows = "40%,50%,10%">
<frame name = "top" src = "top_frame.html" />

Prepared By Mrs.S.J.Patil
<frame name = "main" src = "main_frame.html" />
<frame name = "bottom" src = "bottom_frame.html" />
</frameset>
</html>
WRITE A PROGRAM TO CREATE SIMPLE
FRAME IN JAVASCRIPT

<html>
<head> <title>HTML Frames</title> </head>

Prepared By Mrs.S.J.Patil
<frameset rows = "*,*" cols="*,*>
<frame name = "f1" src = "frame1.html">
<frame name = "f2" src = "frame2.html">
<frame name = "f3" src = "frame3.html">
<frame name = "f4" src = "frame4.html">
</frameset>
</html>
INVISIBLE BORDERS OF FRAME
 Frame gets border by default, if we want to set the
border of a frame invisible ,then we need to set the
attributes ‘frameborder’ and ‘border’=0.
 Example to set invisible border of frame
<html>

Prepared By Mrs.S.J.Patil
<head> <title>HTML Frames invisible border</title>
</head>
<frameset rows = "*,*" cols="*,*>
<frame name = "f1" src = "frame1.html" border="0">
<frame name = "f2" src = "frame2.html" border="0">
<frame name = "f3" src = "frame3.html" border="0">
<frame name = "f4" src = "frame4.html" border="0">
</frameset>
</html>
CALLING A CHILD WINDOW
 A window that opens inside parent window is called
child window.

Prepared By Mrs.S.J.Patil
 Here in the image 4 child windows.
 Using the frame in frameset means creating child
windows inside the parent window. here each frame
represents a child window and frameset represents
parent window
 To refer frame in the child window for each frame
specify the name attribute then we can refer child
window by using its name preceded with parent
property
 For ex: parent.frame2.display()
EXAMPLE: //WRITE A JAVASCRIPT CODE TO CALL
CHILD WINDOW FROM ANOTHER CHILD WINDOW
main_frame.html

<html>
<frameset cols="25%,75%">
<frame name="frame1" src="frame1.html"></frame>

Prepared By Mrs.S.J.Patil
<frame name="frame2" src="frame2.html"></frame>
</frameset>
<html>

frame1.html

<html>
<body>
<h4> Frame 1</h4>
<input type="button" name="button1" value="click"
onclick="parent.frame2.display()"/>
</body>
</html>
frame2.html
<html>
<head>
<script>
function display()
{

Prepared By Mrs.S.J.Patil
document.write("this function is called from frame1");
}
</script>
</head>
<body>
<h4> Frame 2 </h4>
</body>
</html>
F RAME 'S NAME AND TARGET ATTRIBUTES
 One of the most popular uses of frames is to place
navigation bars in one frame and then load main pages
into a separate frame.
□ Let's see following example where a test.htm file has

Prepared By Mrs.S.J.Patil
following code −
<html>
<head> <title>HTML Target Frames</title> </head>
<frameset cols = “*,*">
<frame src = "menu.htm" name = "menu_page" />
<frame src = "main.htm" name = "main_page"/>
</frameset>
</html>
 Following is the content of menu.htm file
<!DOCTYPE html>
<html>
<body bgcolor = "#4a7d49">
<a href = "http://www.google.com" target = "main_page">
Google</a>

Prepared By Mrs.S.J.Patil
<br />
<br />
<a href = "http://www.microsoft.com" target="main_page">
Microsoft</a>
<br />
<br />
<a href = "http://news.bbc.co.uk" target = "main_page">
BBC News</a>
</body>
</html>
 Following is the content of main.htm file −

<!DOCTYPE html>
<html>
<body bgcolor = "#b5dcb3">
<h3>This is main page and content from any link will be

Prepared By Mrs.S.J.Patil
displayed here.
</h3>
<p>So now click any link and see the result.</p>
</body>
</html>
CHANGING THE CONTENT AND FOCUS OF CHILD
WINDOW

 The content and focus of child window can be


changed from another child window. This can be
done by changing the source file for the particular
frame by using JavaScript.

Prepared By Mrs.S.J.Patil
 The href attribute of frame is used to assign the new
source to the child window.
 main_frame.html
<html>
<frameset cols=“25%,75%”>
<frame src=“frame1.html” name=“frame1”>
<frame src=“frame2.html” name=“frame2”>
</frameset>
</html>
 frame1.html
<html>
<head>
<script>
function display()
{

Prepared By Mrs.S.J.Patil
parent.frame2.location.href=“radio.html”;
}
</script>
</head>
<body>
<h4> Frame 1</h4>
<input type=“button” name=“button1” value=“ok”
onclick=“display()”>
</body>
</html>
 frame2.html
<html>
<body>
<h4> Frame 2</h4>
</body>

Prepared By Mrs.S.J.Patil
</html>
WRITING TO A CHILD WINDOW
 We can write the contents on child window from
another child window by using the write() method of
document object.

Prepared By Mrs.S.J.Patil
 main_frame.html

<html><head> <title>Parent window</title></head>


<frameset cols=“*,*”>
<frame src=“frame1.html” name=“frame1”>
<frame src=“frame2.html” name=“frame2”>
</frameset>
</html>
 frame1.html
<html>
<head> <title>child window</title>
<script>
function display()
{
parent.frame2.document.write(“this message is

Prepared By Mrs.S.J.Patil
written by frame 1”);
}
</script>
</head>
<body>
<h4> Frame 1</h4>
<input type=“button” name=“button1” value=“ok”
onclick=“display()”>
</body>
</html>
 frame2.html
<html>
<head>
<title>child window</title>
</head>

Prepared By Mrs.S.J.Patil
<body>
<h4> Frame 2</h4>
<p id=“demo”> contents of frame 2 </p>
</body>
</html>
ACCESSING THE ELEMENTS OF OTHER
CHILD WINDOW.
 We can access the elements of child window from
another child window. The element of child window
can be modified from another child window. If we
want to change the name of button , then it is

Prepared By Mrs.S.J.Patil
possible to change the name of button from other
child window.
 main_frame.html
<html>
<frameset cols=“25%,75%”>
<frame src=“frame1.html” name=“frame1”>
<frame src=“frame2.html” name=“frame2”>
</frameset>
</html>
 frame1.html
<html>
<head>
<script>
function display()
{
parent.frame2.document.getElementById(“para”).innerHTML=

Prepared By Mrs.S.J.Patil
“Element of frame2 is accessed from frame1”;

}
</script>
</head>
<body>
<h4> Frame 1</h4>
<input type=“button” name=“button1” value=“click”
onclick=“display()”>
</body>
</html>
 frame2.html
<html>
<body>
<h4> Frame 2</h4>
<p id=“para”> frame 2 Content </p>

Prepared By Mrs.S.J.Patil
</body>
</html>
Prepared By Mrs.S.J.Patil
ROLLOVER
 Rollover is a JavaScript technique used by Web
developers to produce an effect in which the

Prepared By Mrs.S.J.Patil
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.
CREATING ROLLOVER
 A rollover is created by making use of ‘onmouseover’ event.
when the mouse pointer is moved onto an element or onto one
of its children.
 The <img> tag is used to define the image object. the value
assigned to the src attribute of the <img> tag identifies the

Prepared By Mrs.S.J.Patil
image itself. now using onmouseover event you can change
the image.
<html>
<head>
</head>
<body>
<img src="apple.jpg" onmouseover="src='pineapple.jpg'"
onmouseout="src='apple.jpg'">
</body>
</html>
TEXT ROLL OVER
 Rollover operation is also possible with text. if the
mouse is moved on text then particular effect will be
taken place and moved out of text then the effect will
reverse.

Prepared By Mrs.S.J.Patil
 For ex if mouse is over the apple text then
image will be displayed is apple if mouse is
over the pineapple text then image will be
displayed is pineapple
 In the program we have used<img> tag and gave its
name as”fruits” & <a> tag along with src attribute .the src
attribute is accessed using document.fruits
<html>
<body>
<h2>text rollover</h2>
<a onmouseover="document.fruits.src='apple.jpg'">

Prepared By Mrs.S.J.Patil
<h3>apple</h3></a>
<a onmouseover="document.fruits.src='pineapple.jpg'">
<h3>pineapple</h3></a>
<img src="gl1.png" alt="" name="fruits">
</body>
</html>
MULTIPLE ACTIONS FOR ROLLOVER
 We can perform multiple action using rollover when
mouse is over the text it will display image and its
description with respect to the text.

Prepared By Mrs.S.J.Patil
 In the below example we created JavaScript
function dispaly1()and display2()
 We have taken two text apple and pineapple

 We are calling display1()function on ‘mouseover’


operation of text ‘apple’ and calling display2()function
on ‘mouseover’ operation of text ‘pineapple’
 The function will perform multiple action when its
called .so in this way we are performing multiple action
using rollover operation
<html>
<head>
<script>
function display1()
{
document.fruit.src="apple.jpg“;
document.getElementById("p1").innerHTML="trees of apple are larger than
trees of pineapple"
}

Prepared By Mrs.S.J.Patil
function display2()
{
document.fruit.src="pineapple.jpg"
document.getElementById("p1").innerHTML="trees of pineapple are smaller
than trees of
apple"
}
</script>
</head>
<body>
<h2>rollover</h2>
<a onmouseover="display1()"><h3>apple</h3></a>
<a onmouseover="display2()"><h3>pineapple</h3></a>
<img src="apple.jpg" name="fruit">
<p id="p1">trees of apple are larger than trees of pineapple</p>
</body>
</html>
MORE EFFICIENT ROLLOVER
 we can add event to the html element by using
addEventListener i.e we can register the mouseover
and mouseout event by using event listener.

Prepared By Mrs.S.J.Patil
 Syntax :

addEventListener(“mouseover/mouseout”,function_name);
<html>
<head>
</head>
<body>
<script>
document.addEventListener("mouseover", function()

Prepared By Mrs.S.J.Patil
{ document.getElementById("p1").style.color = "blue"});

document.addEventListener("mouseout", function(){
document.getElementById("p1").style.color = "pink"});

</script>
<h1><p id="p1">change the style by mouseover</p></h1>
</body>
</html>

You might also like