regular expression
regular expression
pattern or not.(test())
<html>
</head>
<script>
var p=/arrow/i
function testMatch()
{
var str = T1.value;
if(p.test(str))
{
alert("String contains the given pattern")
}
else
{
alert("String does not contains the given pattern")
}
}
</script>
</head>
<body>
Enter string <input type="text" id="T1">
<button onclick="testMatch()">Try it</button>
</body>
</html>
2] Write a program to check whether the string contains the given pattern or
not.
[Using match( )]
<html>
<body>
<script>
function myFunction()
{
var patt1 = /stud/i;
var str = T1.value;
var result = str.match(patt1);
if(result!=null)
{
alert(" Entered string contains word stud");
}
else
{
alert(" Entered string does not contain word stud");
}
}
</script>
Enter string <input type="text" id="T1">
<button onclick="myFunction()">Try it</button>
</body>
</html>
3] Write a JavaScript that accepts a string and searches for the
pattern "MSBTE" in the given string using regular expressions. If the
pattern is found, JavaScript will display that "Pattern is found" else
display "Pattern is not found".
<html>
<body>
<script>
var str=window.prompt("Enter string");
var patt=/MSBTE/g;
var result=str.match(patt);
if(result=="MSBTE")
{
document.write("Pattern is found");
}
else
{
document.write("Pattern is not found");
}
</script>
</body>
</html>
3] Brackets
[abc]
<html>
<body>
<script>
function myFunction()
{
var patt1 = /[abc]/gi; //[^abc]//[a-z]//[0-9]//[x|y]
var str = T1.value;
var result = str.match(patt1);
if(result!=null)
{
alert(" Entered string contains word stud");
}
else
{
alert(" Entered string does not contain word stud");
}
}
</script>
Enter string <input type="text" id="T1">
<button onclick="myFunction()">Try it</button>
</body>
</html>
4] Quantifiers
<html>
<body>
<script>
function myFunction()
{
var patt1 = /^p/g;//p+//p*//p?//p$//^p//p{2}//p{2,3}//p{2,}
var str = T1.value;
var result = str.match(patt1);
if(result!=null)
{
alert("HIII");
}
else
{
alert(" Byeee");
}
}
</script>
Enter string <input type="text" id="T1">
<button onclick="myFunction()">Try it</button>
</body>
</html>
Step 1- Main.html
<html>
<head>
</head>
<frameset rows="50%,*" border="5">
<frame src="frame1.html">
<frameset cols="33%,33%,*" border="3">
<frame src="frame2.html">
<frame src="frame4.html">
<frame src="frame3.html">
</frameset>
</frameset>
</html>
Step2- frame1.html
<html>
<body>
<h1 align="center">Frame1</h1>
</body>
</html>
1] Main.html
<html>
<head>
</head>
<frameset rows="30%,*" border="5">
<frame src="frame1.html" name="a">
<frameset cols="50%,50%" border="3">
<frame src="frame2.html" name="b">
<frame src="frame3.html" name="c">
</frameset>
</frameset>
</html>
2] frame2.html
<html>
<body>
<h1 align="left">Operating system</h1>
<a href="ch1.html" target="c"><ul>Chapter1</ul>
<br>
<a href="ch2.html" target="c"><ul>Chapter2</ul>
</body>
</html>
<html>
<body>
<a>
<img src ="img1.jpg" name="fruit" width="500px" height="330px" align="right" >
</a>
<a onmouseover="document.fruit.src='img1.jpg'">
<br>
<ul type="desc">
<li><b><u>Mango</u></b></li>
</a>
<br><br><br>
<a onmouseover="document.fruit.src='img2.jpg'">
<li><b><u>banana</u></b></li>
</a>
<br><br><br>
<a onmouseover="document.fruit.src='img3.jpg'">
<li><b><u>pineapple</u></b></li>
</ul>
</a>
<br><br/><br/>
</body>
</html>
Image Rollover
<html>
<head>
<title>Creating Rollover</title>
</head>
<body>
<img src="img3.jpg" boarder="0px" width="650px" height="550px" onmouseover="src=
'img1.jpg'" onmouseout="src= 'img3.jpg'">
</body>
</html>
2] Write JavaScript code to perform following operations on string.
(Use split() method)
Input String : “Sudha Narayana Murthy”
Display output as
First Name : Sudha
Middle Name : Narayana
Last Name : Murthy
<html>
<head>
</head>
<script>
var str="Sakshi Gajanan Markad";
function splitname(name)
{
var names=name.split(" ");
var fname=names[0];
var mname=names[1];
var lname=names[2];
document.write("First Name:"+fname);
document.write("<br>Middle Name:"+mname);
document.write("<br>Last Name:"+lname);
}
splitname(str);
</script>
</html>
2] Describe how to link banner advertisement to URL with example.
<html>
<head>
<body>
<a href="https://arrowcomputeracademy.business.site/">
<img src="img3.jpg" width="300" height="400" name="ChangeBanner">
</a>
</body>
</html>
Q] Write a javascript to create a pull-down menu with three options
[Google, MSBTE, Yahoo] once the user will select one of the options
then user will be redirected to that site.
<html>
<head>
<script>
function getPage()
{
page=document.myform.MenuChoice.value;
if(page != "")
{
window.location=page;
}
}
</script>
</head>
<body>
<form name="myform" >
Select Your Favourite Website:
<select name="MenuChoice" onchange="getPage()">
<option value="https://www.google.com/">Google</option>
<option value="https://msbte.org.in/">MSBTE</option>
<option value="https://www.yahoo.com/">Yahoo</option>
</form>
</body>
</html>
Q] Write HTML script that will display dropdown list containing
options such as Red, Green, Blue and Yellow. Write a JavaScript
program such that when the user selects any options. It will change
the background colour of webpage.
<html>
<body>
<label for="color">Choose a Background Color:</label>
<select name="color" id="color" class="color" onchange="changeColor()">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<script>
function changeColor() {
var color = document.getElementById("color").value;
switch(color)
{
case "green":
document.body.style.backgroundColor = "green";
break;
case "red":
document.body.style.backgroundColor = "red";
break;
case "blue":
document.body.style.backgroundColor = "blue";
break;
case "yellow":
document.body.style.backgroundColor = "yellow";
break;
default:
document.body.style.backgroundColor = "white";
Client Side Scripting (Unit 6) Arrow Computer Academy
break;
}
}
</script>
</body>
</html>
4] Slideshow
<html>
<head>
<script>
var img_array = new Array('mango.jpeg', 'pineapple.jpeg','banana.jpeg')
var count=0
function SlideShow(num)
{
if(document.images)
{
count=count+num;
if (count==img_array.length)
{
count = 0;
}
if (count<0)
{
count = img_array.length-1;
}
document.img1.src = img_array[count]
}
}
</script>
</head>
<img src="mango.jpeg" style="width=200" height="300" name="img1">
<br>
<input type="button" value="Back" onclick="SlideShow(-1)">
<input type="button" value="Next" onclick="SlideShow(1)">
</body>
</html>
<html>
<body>
<a onmouseover="window.status='Welcome to status bar apple">
<b>Apple</b>
</a>
<br><br>
<a onmouseover="window.status='Welcome to status bar Pineapple">
<b>PineApple</b>
</a>
</body>
</html>
8] Floating Menu
<html>
<head>
<script>
function f1()
{
var s1= document.getElementById("s1");
if(s1.value=="")
{
alert("Please Select a subject")
}
else
{
document.getElementById("p1").innerHTML="Selected subject:"+s1.value;
}
}
</script>
</head>
<body>
<br><br><br><br><br><br>
<h1>Floating Menu</h1>
<select name="s" id="s1" onchange="f1()">
<option value="">Select Subject</option>
<option value="OSY">OSY</option>
<option value="AJP">AJP</option>
<option value="STE">STE</option>
<OPtion value="CSS">CSS</OPtion>
</select>
<br><br> <p id="p1"> </p><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br>
<br><br><br><br><br><br>
</body>
</html>