Scribd
Upload
12 views19 pages

4 Marks

The document provides a comprehensive overview of cookies in JavaScript, detailing how to create, read, update, and delete them using the document.cookie property. It includes examples of JavaScript functions for managing cookies, as well as HTML forms for user input and interaction. Additionally, it covers the open() method of the window object, persistent cookies, and regular expressions with practical examples and syntax.

Uploaded by

sahildawange37
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
12 views19 pages

4 Marks

The document provides a comprehensive overview of cookies in JavaScript, detailing how to create, read, update, and delete them using the document.cookie property. It includes examples of JavaScript functions for managing cookies, as well as HTML forms for user input and interaction. Additionally, it covers the open() method of the window object, persistent cookies, and regular expressions with practical examples and syntax.

Uploaded by

sahildawange37
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/ 19

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.

Cookies are a plain text data record of 5 variable-length fields −


• Expires − The date the cookie will expire. If this is blank, the cookie will expire when the visitor
quits the browser.
• Domain − The domain name of your site.
• Path − The path to the directory or web page that set the cookie. This may be blank if you want to
retrieve the cookie from any directory or page.
• Secure − If this field contains the word "secure", then the cookie may only be retrieved with a
secure server. If this field is blank, no such restriction exists.
• Name=Value − Cookies are set and retrieved in the form of key-value pairs

• 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=/";

Write a JavaScript for creating a cookie for the user name


<html>
<head>
<script type="text/javascript">
Function createcookie()
{
with(document.form1)
{
Var cookie_value=username.value;
document.cookie="username="+cookie_value;
alert("Cookie is Created");
}
}
</script>
</head>
<body>
<form name="form1">
Enter Name:<input type="text" name="username"/>
<input type="button" value="Create Cookie" onclick="createcookie()"/>
</form>
</body>
</html>

• With JavaScript, cookies can be read like this:


var x = document.cookie;
• document.cookie will return all cookies in one string much like:
cookie1=value; cookie2=value; cookie3=value;

• Change a Cookie with JavaScript


• With JavaScript, you can change a cookie the same way as you create it:
document.cookie = "username=student; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
• The old cookie is overwritten.
• Reading a cookie is just as simple as writing one, because the value of the document.cookie object is the
cookie.
• So you can use this string whenever you want to access the cookie.
• The document.cookie string will keep a list of name=value pairs separated by semicolons,
where name is the name of a cookie and value is its string value.
• You can use strings' split() function to break a string into key and values as follows −
<html>
<head>
<script type = "text/javascript">
Function ReadCookie()
{ //assigning the cookie string to the variable
var cookies = document.cookie;
document.write ("All Cookies : " + cookies );
//spliting the cookie pairs in an array
Var cookiearray = cookies.split(';');
//getting name=value pair from array
for(var i=0; i<cookiearray.length; i++)
{ //gettting each name=value pair in a variable
Var cookie_pair=cookiearray[i];
//getting name and value in an array from and value pair
Var name_value_array = cookie_pair.split('=');
//getting name from array
var name=name_value_array[0];
//getting value from array
var value = name_value_array[1];
document.write("<br>Name is : " + name + " and Value is : " + value);
} }
</script>
</head>
<body>
<p> click the following button to get the cookies:</p>
<inputtype = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</body>
</html>

• Deleting a cookie is very simple.


You don't have to specify a cookie value when you delete a cookie.
Just set the expires parameter to a passed date:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
You should define the cookie path to ensure that you delete the right cookie.
Some browsers will not let you delete a cookie if you don't specify the path.
<html>
<head>
<scripttype = "text/javascript">
Function deleteCookie()
{
var cookie_value=username.value;
document.cookie="username="+cookie_value+";expires=Thu, 01 Jan 1970
00:00:01 GMT";
alert("Cookie is deleted")
}
</script>
</head>
<body>
Enter Username:<input type="text" id="username">
<input type = "button" value = "Delete Cookie" onclick = "deleteCookie()">
</body>
</html>
OR
Write cookie
You can create cookies using document.cookie property like this:
document.cookie = "cookiename=cookievalue"

// Set the cookie by assigning the string to the document.cookie property


document.cookie = userPreferencesCookie;

Read cookie
You can access the cookie like this which will return all the cookies saved
for the current domain.
var x = document.cookie

// Get the string of all cookies


var allCookies = document.cookie;

// Split the string into individual name-value pairs


var cookiePairs = allCookies.split(";");

// Find the pair that corresponds to the "user_preferences" cookie


var userPreferencesCookie = cookiePairs.find(pair =>
pair.startsWith("user_preferences="));

// Extract the value from the pair


var userPreferences = userPreferencesCookie.split("=")[1];
You can create cookies using document.cookie property like this:
document.cookie = "cookiename=cookievalue"

// Set the cookie by assigning the string to the document.cookie property


document.cookie = userPreferencesCookie;

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";

// Set the cookie by assigning the string to the document.cookie property


document.cookie = userPreferencesCookie;
2. Explain open() method of window object with syntax and example.
• The open() method of window object is used to open a new window and loads the document
specified by a given URL.
MyWindow = window.open()

• 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;

var time=h+":"+m+":"+s+" "+session;


document.getElementById("MyClockDisplay").innerText=time;
document.getElementById("MyClockDisplay").textContent=time;

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)

i Perform case-insensitive matching

m Perform multiline matching


<html>
<head>
<script type="text/javascript">
var p=/student/i
function testMatch()
{
Var str = textfield.value;
if(p.test(str))
{
alert("The String "+str+" contains the given pattern");
}
else
{
alert("The String "+str+" does not contains the given pattern");
}}
</script>
</head>
<body>
<h3><p>Checking the availability of string</p></h3>
Enter the String<input type="text" id="textfield"/>
<input type="button" value="check" onclick="testMatch();"/>
</body>
</html>

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.

Syntax: string.search (searchvalue)

<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>

The test() method


• The test() method makes a search for the specified match of the string in the given string.
• The difference in between exec() and test() method is that the exec() method will return the specified
match if present or null if not present in the given string whereas the test() method returns a Boolean
result i.e., true if the specified match is present or else returns false if it is not present.

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>

12. Explain text rollover with suitable example.


• We can change the appearance of the webpage by using mouse rollover.
• When mouse is moved to any element of webpage, the appearance of that element will be changed.
• If the mouse cursor is moved to an image, then image appearance related effect can take place.
• It is also applicable to button, label, table etc.
• Rollover is used to improve user experience and quality of webpages.

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>

16. Write a script for creating following frame structure

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>

You might also like