4 Marks
4 Marks
QuestionsChapter – IV
1. Describe, how to read cookie value and write a cookie value. Explain with example.
OR
Write a JavaScript program to create read, update and delete cookies.
OR
Describe, how to read cookie value and write a cookie value. Explain with example.
• JavaScript can create, read, and delete cookies with the document.cookie property.
• With JavaScript, a cookie can be created like this:
document.cookie = "username=student";
• You can also add an expiry date (in UTC time). By default, the cookie is deleted when the browser is
closed:
document.cookie="username=student;expires=Thu,18 Dec2013 12:00:00 UTC";
• With a path parameter, you can tell the browser what path the cookie belongs to. By default, the cookie
belongs to the current page.
document.cookie = "username=student; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
Read cookie
You can access the cookie like this which will return all the cookies saved
for the current domain.
var x = document.cookie
Delete cookie
To delete a cookie, you just need to set the value of the cookie to empty and set the
value of expires to a passed date.
document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"
For example, let's say you want to delete the "user_preferences" cookie that was
created earlier. You could use the following code to do so:
// Create the string representing the cookie, including an expiration date in the past
var userPreferencesCookie = "user_preferences=; expires=Thu, 01 Jan 1970 00:00:00
UTC";
• The open() method returns a reference to the new window, which is assigned to the
MyWindow variable. You then use this reference any time that you want to do something
with the window while your JavaScript runs.
• A window has many properties, such as its width, height, content, and name—to mention a
few. You set these attributes when you create the window by passing them as parameters
to the open() method:
• The first parameter is the full or relative URL of the web page that will appear in the new
window.
• The second parameter is the name that you assign to the window.
• The third parameter is a string that contains the style of the window.
• We want to open a new window that has a height and a width of 250 pixels and displays an
advertisement that is an image. All other styles are turned off.
Syntax:
MyWindow = window.open(‘webpage1.html’, 'myAdWin', 'status=0, toolbar=0,
location=0, menubar=0, directories=0, resizable=0, height=250,
width=250')
Example:
<!DOCTYPE html>
<html>
<body>
Click the button to open new window <br><br>
<button onclick="window.open ('https://www.google.com', 'Google',
'width=520,
height=650, status')"> Open Window </button>
</body>
</html>
3. Write a JavaScript that creates a persistent cookies of Item names. Write appropriate HTML script
for the same.
OR
Explain how to create and read Persistent Cookies in JavaScript with example.
• Permanent cookies
• Permanent cookies, also known as 'persistent cookies', remain in operation even after the web browser
has closed.
• For example, they can remember login details and passwords so web users don't need to re-enter them
every time they use a site. The law states that permanent cookies must be deleted after 12 months.
<html>
<head><title>Persistent Cookie</title>
<script language="javascript">
Function createcookie()
{
var name=form1.nm.value;
var c1 = form1.s1.options[form1.s1.selectedIndex].value
var c2 = form1.s2.options[form1.s2.selectedIndex].value
var d = new Date();
d.setMonth(d.getMonth()+1);
cookievalue="user="+name+",item1="+c1
+",item2="+c2+";expires="+d.toUTCString();
alert("Cookie Created");
}
</script>
</head>
<body>
<form name="form1" onsubmit="createcookie()">
Enter name:<input type="text"name="nm"><br>
Select item-1 <selectname="s1">
<option> CD </option>
<option> DVD </option>
<option> BluRay</option>
<option> Pen drive </option>
</select>
Select item-2 <select name="s2">
<option> C Prog</option>
<option> C++ Prog</option>
<option> Java</option>
<option>DotNet</option>
</select>
<input type="Submit" value="Submit">
</form>
</body>
</html>
4. Write HTML Script that displays textboxes for accepting Name, middle name, Surname of the user
and a Submit button. Write proper JavaScript such that when the user clicks on submit button
a. alltexboxes must get disabled and change the color to “RED”. and with respective labels.
b. Constructs the mailID as <name>.<surname>@msbte.com and displays mail ID as message. (Ex.
If user enters Rajni as name and Pathak as surname mailID will be constructed as
[email protected])
<html>
<head>
<script>
function a()
{
document.getElementById("fname").disabled=true;
document.getElementById("mname").disabled=true;
document.getElementById("sname").disabled=true;
fname.style.backgroundColor = "red";
mname.style.backgroundColor = "red";
sname.style.backgroundColor = "red";
var firstName = fname.value;
var lastName = sname.value;
var email = firstName +"."+ lastName +"@msbte.com";
alert(email);
}
</script>
</head>
<body>
<form id="myform">
Enter First Name: <input type="text" id="fname"><br>
Enter Middle Name: <input type="text" id="mname"><br>
Enter Sur Name: <input type="text" id="sname"><br>
<input type="button" value="Submit" onclick="a()"><br>
</form>
</body>
</html>
5. Write a webpage that displays a form that contains an input for Username and password. User is
prompted to enter the input and password and password becomes value of the cookie. Write The
JavaScript function for storing the cookie . It gets executed when the password changes.
<html>
<head><title>Cookie</title>
<script language="javascript">
function store()
{
var user = document.form1.user.value
var pass = document.form1.pass.value
var cookieinfo = "username="+user+",password="+pass;
document.cookie = cookieinfo
alert(document.cookie + " Stored");
}
</script>
</head>
<body>
<form name="form1" onsubmit="store()">
Enter username <input type="text" name="user">
Enter password <input type="password" name="pass" onchange="store()">
<input type="submit" value="Submit">
</form>
</body>
</html>
6. Write html code to design a form that displays two buttons START and STOP. Write a JavaScript
code such that when user clicks on START button, real time digital clock will be displayed on
screen. when user clicks on STOP button, clock will stop displaying time
<html>
<body>
<div id="MyClockDisplay" class="clock">
</div>
<style>
body {
background: black;
}
.clock {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #17D4FE;
font-size: 60px;
font-family: Orbitron;
letter-spacing: 7px;
}
</style>
<script>
function showTime()
{
var date=new Date();
var h=date.getHours(); // 0 - 23
var m=date.getMinutes(); // 0 - 59
var s=date.getSeconds(); // 0 - 59
var session="AM";
if(h==0)
{
h=12;
}
if(h>12)
{
h=h-12;
session="PM";
}
h=(h<10)?"0"+h:h;
m=(m<10)?"0"+m:m;
s=(s<10)?"0"+s:s;
setTimeout(showTime,1000);
}
function stopTime()
{
var h="00";
var m="00";
var s="00";
var session="AM";
var time=h+":"+m+":"+s+" "+session;
document.getElementById("MyClockDisplay").innerText=time;
document.getElementById("MyClockDisplay").textContent=time;
}
</script>
<input type="button" value="START" onclick="showTime()"/>
<input type="button" value="STOP" onclick="stopTime()"/>
</body>
</html>
Chapter – V
7. State what is regular expression. Explain its meaning with the help of a suitable example.
• A regular expression is a sequence of characters that forms a search pattern.
• When you search for data in a text, you can use this search pattern to describewhat you are searching
for.
• A regular expression can be a single character, or a more complicated pattern.
• Regular expressions can be used to perform all types of text search and textreplace operation
Syntax
/pattern/modifiers;
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)
8. Describe regular expression. Explain search () method used in regular expression with suitable
example.
Regular expression - A regular expression is a sequence of characters that specifies a
search pattern in text.
search () - The search () method searches a string for a specified value and returns the position of the
match. The search value can be string or a regular expression. This method returns -1 if no match is
found.
<html>
<body>
<h1>JavaScript String Methods</h1>
<p>Search a string for "W3Schools", and display the position of the
match:</p>
<p id="demo"></p>
<script>
let text = "Visit W3Schools!";
let n = text.search("W3Schools");
document.getElementById("demo").innerHTML = n;
</script>
</body>
</html>
9. Explain test() and exec() method of Regular Expression object with example.
The exec() method
The exec() method makes a search for the specified match of the string in the given string. If the match
of the string is present in the given string it returns an array and if the match is not found in the given
string, then it returns a null value.
In other words, The exec() method takes a string as the parameter. This string is which is to be checked
for match in the given string.
Syntax
This is the syntax of the exec() method of regular expressions in JavaScript −
regularExpressionObj.exec(string)
Example
<html>
<body>
<p>click to get exec() method output</p>
<button onclick="findMatch()">Search</button>
<p id="tutorial"></p>
<script>
function findMatch() {
var txt ="Learning regular expressions in JavaScript";
var search1 = new RegExp("JavaScript");
var search2 = new RegExp("Abdul")
var res1 = search1.exec(txt);
var res2 = search2.exec(txt);
document.getElementById("tutorial").innerHTML ="Given string
is:"+txt +"<br>"+ "Specific word to match are:"+search1+"
"+search2+"<br>"+"Result of two search keys: "+res1+" "+res2
}
</script>
</body>
</html>
Syntax
This is the syntax of the test() method in JavaScript −
regularExpressionObj.test(string)
This also takes the given input string as the parameter and returns the Boolean result.
Example
<html>
<body>
<p>click to get exec() method output</p>
<button onclick="findMatch()">Search</button>
<p id="tutorial"></p>
<script>
function findMatch() {
var txt ="Learning regular expressions in JavaScript";
var search1 = new RegExp("JavaScript");
var search2 = new RegExp("Abdul")
var res1 = search1.test(txt);
var res2 = search2.test(txt);
document.getElementById("tutorial").innerHTML ="Given string
is:"+txt+"<br>"+ "Specific word to match are:"+search1+"
"+search2+"<br>"+"Result of two search keys: "+res1+" "+res2
}
</script>
</body>
</html>
10. Write a JavaScript program to validate email ID of the user using regular expression.
<html>
<body onload="document.form1.text1.focus()">
<div class="mail">
<form name="form1" action="#">
Enter your email address: <input type="text" name="text1" />
<input type="submit" class="validate" name="validate" value="Validate"
onclick="ValidateEmail(document.form1.text1)"/>
</form>
</div>
<script>
function ValidateEmail(input) {
var validRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[azA-
Z0-9-]+)*$/;
if (input.value.match(validRegex)) {
alert("Valid email address!");
}
else {
alert("Invalid email address!");
}}
</script>
</body>
</html>
11. Write a JavaScript function to check whether a given value is valid IP value or not
<html>
<head>
<title>IP address validation</title>
<script type='text/javascript'>
function validate( value ) {
const regexExp = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-
5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/gi;
if(regexExp.test(value))
{
alert("It is a valid IP Address");
}
else
{
alert("It is a not valid IP Address");
}}
</script>
</head>
<body>
Address: <input type='text' onchange='validate(this.value)'>
</body>
</html>
Creating Rollover
• To create rollover 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.
<html>
<body>
<p onmouseover="this.style.color='red'"
onmouseout="this.style.color='blue'">
Move the mouse over this text to change its color to red. Move the mouse away
to
change the text color to blue.
</p>
</body>
</html>
13. Write a JavaScript program to create rollover effect for three images.
• You create a rollover for text by using the onmouseover attribute of the <A> tag, which is the anchor
tag.
• You assign the action to the onmouseover attribute the same way as you do with an <IMG> tag.
• Let's start a rollover project that displays a flower titles.
• Additional information about a flower can be displayed when the user rolls the mouse cursor over the
flower name.
• In this example, the image of the flower is displayed. However, you could replace the flower image
with an advertisement or another message that you want to show about the flower.
<html>
<body>
<h1>Image Rollover</h1>
<a><IMG src='apples.gif' height="92" width="70" border="0"
onmouseover=" src='apples.gif'" onmouseout="src='redstar.gif'"></a>
<a><IMG src='ND1.png' height="92" width="70" border="0"
onmouseover="src='ND1.png'" onmouseout="src='M1.png' "></a>
<a><IMG src='M1.png' height="92" width="70" border="0"
onmouseover="src='M1.png' " onmouseout="src='B.png' "></a>
</body>
</body>
</html>
OR
<!DOCTYPE html>
<html>
<body>
<img height="500" src="apple.jpg" width="500" name="clr"> <br>
<a onmouseover="document.clr.src='apple.jpg'"> Apple </a> <br>
<a onmouseover="document.clr.src='mango.jpg'"> Mango </a> <br>
<a onmouseover="document.clr.src='orange.jpg'"> Orange </a>
</body>
</html>
14. Write a JavaScript program to design HTML page with books information in tabular format, use
rollovers to display the discount information.
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th> Book </th>
<th> Price </th>
</tr>
<tr
onmouseover="document.getElementById('discount').innerHTML='Discount: 15%'">
<td> CSS </td>
<td> 230 </td>
</tr>
<tr
onmouseover="document.getElementById('discount').innerHTML='Discount: 10%'">
<td> AJP </td>
<td> 240 </td>
</tr>
<tr
onmouseover="document.getElementById('discount').innerHTML='Discount: 12%'">
<td> OSY </td>
<td> 260 </td>
</tr>
</table>
<p id="discount"></p>
</body>
</html>
15. Write a java script that displays textboxes for accepting name & email ID & a submit button.
Write java script code such that when the user clicks on submit button
a. Name Validation
b. Email ID Validation.
<html>
<body>
<form action="#" name="myForm" onsubmit="validate()">
Name: <input type="text" name="name" /> <br><br>
Email: <input type="text" name="email" /> <br><br>
<input type = "submit" value = "Submit" />
</form>
<script>
function validate() {
if( document.myForm.name.value == "" ) {
alert("Please provide your name!");
return false;
}
var emailID = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zAZ0-
9-]+)*$/;
if( document.myForm.email.value == "" ) {
alert("Please provide your Email!");
}
else if (document.myForm.email.value.match(emailID)) {
alert("Valid Name and Email.");
}
else{
alert("Please enter valid email ID!");
}
}
</script>
</body>
</html>
FRUITS, FLOWERS AND CITIES are links to the webpage fruits.html,flowers.html, cities.html
respectively. When these links are clicked corresponding data appears in FRAME 3.
OR
Write a script for creating following frame structure:
Frame 1 contains three button SPORT, MUSIC and DANCE that will perform following action:
When user clicks SPORT button, sport.html webpage will appear in Frame 2.
When user clicks MUSIC button, sport.html webpage will appear in Frame 3.
When user clicks DANCE button, sport.html webpage will appear in Frame 4.
<html>
<head>
<title>Frame Demo</title>
</head>
<body>
<table border="1">
<tr>
<td align="center" colspan="2"> FRAME 1
</td>
</tr>
<tr>
<td> FRAME 2
<ul>
<li>
<a href="fruits.html" target="mainframe">FRUITS</a>
</li>
<li>
<a href="flowers.html" target="mainframe">FLOWERS</a>
</li>
<li>
<a href="cities.html" target="mainframe">CITIES</a>
</li>
</ul>
</td>
<td>
FRAME 3<BR>
<iframe name="mainframe"></iframe>
</td>
</tr>
</table>
</body>
</html>
Chapter – VI
17. Create a slideshow with the group of three images, also simulate next and previous transition
between slides in your Java Script.
<html>
<head>
<script>
pics = new Array('1.jpg' , '2.jpg' , '3.jpg'); count = 0;
function slideshow(status)
{
if (document.images)
{
count = count + status;
if (count > (pics.length - 1))
{
count = 0;
}
if (count <0)
{
count = pics.length - 1;
}
documet.imag1.src = pics[count];
}
}
</script>
</head>
<body>
<img src="1.jpg" width="200" name="img1">
<br>
<input type="button" value="Next" onclick="slideshow(1)">
<input type="button" value="Back" onclick="slideshow(-1)">
</body>
</html>
18. Create a slideshow with the group of four images, also simulate the next and previous transition
between slides in your JavaScript.
<html>
<head>
<script>
Var i=0;
var images= new
Array();
var time=3000;
images[0]="image1.jpg"
images[1]="image2.jpg"
images[2]="image3.jpg"
function changeImage(imgno){
i = i+imgno
if(i>images.length-1)
{
i=0;
}
if(i<0)
{
i=images.length-1;
}
document.slide.src=images[i]
}
</script>
</head>
<body>
<imgsrc="image1.jpg" name="slide" width="400" height="200"><br><br>
<input type="button" value="prev" onclick="changeImage(-1)">
<inputtype="button" value="next" onclick="changeImage(1)">
</body>
</html>
19. Write a HTML script which displays 2 radio buttons to the users for fruits and vegetables and 1
option list. When user select fruits radio button option list should present only fruits names to the
user & when user select vegetable radio button option list should present only vegetable names
to the user.
<html>
<head>
<title>HTML Form</title>
<script language="javascript" type="text/javascript">
functionupdateList(ElementValue)
{
with(document.forms.myform)
{
if(ElementValue == 1)
{
optionList[0].text="Mango"; optionList[0].value=1;
optionList[1].text="Banana"; optionList[1].value=2;
optionList[2].text="Apple"; optionList[2].value=3;
}
if(ElementValue == 2)
{
optionList[0].text="Potato"; optionList[0].value=1;
optionList[1].text="Cabbage"; optionList[1].value=2;
optionList[2].text="Onion"; optionList[2].value=3;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
<p>
<select name="optionList" size="2">
<option value=1>Mango
<option value=2>Banana
<option value=3>Apple
</select>
<br>
<input type="radio" name="grp1" value=1 checked="true"
onclick="updateList(this.value)"> Fruits
<input type="radio" name="grp1" value=2
onclick="updateList(this.value)"> Vegetables
<br>
<input name="Reset" value="Reset" type="reset">
</p>
</form>
</body>
</html>
20. Write HTML Script that displays dropdownlist containing options NewDelhi, Mumbai, Bangalore.
Write proper JavaScript such that when the user selects any options corresponding description of
about 20 words and image of the city appear in table which appears below on the same page.
<html>
<head>
<title>Drop down list example</title>
</head>
<body>
<pid="p1"></p>
<form name="myform">
<select id="sel1">
<option value="delhi">
NewDelhi
</option>
<option value="Mumbai">
Mumbai
</option>
<option value="bangalore">
Bangalore
</option>
</select>
<br><input type="button" name="bt1" id="b1" onclick="display()"
value="click">
<input type="textarea" name="ta1">
</form>
<script type="text/javascript">
function display()
{
var a=document.getElementById("sel1");
var index = a.selectedIndex;
if(index==0)
{
myform.ta1.value = "New Delhi city and national capital territory, north-
central India. The city of Delhi actually consists of two components: Old
Delhi, in the north, the historic city; and New Delhi, in the south, since
1947 the capitalof India, built in the first part of the 20th century as
the capital of British India. "
}
elseif(index==1)
{
myform.ta1.value="Mumbai also known as Bombay is the capital of the Indian
state of Maharashtra. It is the most populous city in India, and the fourth
most populous city in the world, with a total metropolitan area population
of approximately 20.5 million."
}
else
{
"Bangalore is located in the state of Karnataka about 920 meters above mean
sea level on the Deccan Plateau of South India. It covers an area of741 sq.
km. Bangalore, officially called as Bengaluru, is one of the three (other
two Delhi and Mumbai) finest metropolitans in India."
}
}
</script>
</body>
</html>
21. Write a JavaScript to create option list containing list of images and then display images in new
window as per selection.
<body>
<center>
<h1 style="color: green">
GeeksforGeeks
</h1>
<div class="dropdown">
<button class="dropbtn">
Country Flags
</button>
<div class="dropdown-content">
<a href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132503/iflag.jpg"
width="20" height="15"> India</a>
<a href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132504/uflag.jpg"
width="20" height="15"> USA</a>
<a href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132502/eflag.jpg"
width="20" height="15"> England</a>
<a href="#">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200630132500/bflag.jpg"
width="20" height="15"> Brazil</a>
</div>
</div>
</center>
</body>
</html>
22. Write a JavaScript to create a pull-down menu with four options [AICTE, DTE,MSBTE, GOOGLE].
Once the user will select one of the options then user will be redirected to that site.
OR
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>
<title>HTML Form</title>
<script language="javascript" type="text/javascript">
Function getPage(choice)
{
page=choice.options[choice.selectedIndex].value;
if(page != "")
{
window.location=page;
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
Select Your Favourite Website:
<select name="MenuChoice"onchange="getPage(this)">
<option value="https://www.google.com">Google</option>
<option value="https://www.msbte.org.in">MSBTE</option>
<option value="https://www.yahoo.com">Yahoo</option>
</form>
</body>
</html>