Scribd
Upload
314 views

Css Model Ans 22519 W 2022

The document contains questions from a Client-Side Scripting exam paper. It provides instructions to examiners on how to evaluate answers and a sample question paper with 5 questions: 1) Explain methods in JavaScript with an example. 2) List and describe data types in JavaScript. 3) Write a simple calculator program using switch case. 4) Write a program using the sort method of the Array object. 5) Describe property getters and setters in JavaScript. The document provides the expected answers to the questions along with the marking schemes.

Uploaded by

Kunal Mhatre
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
314 views

Css Model Ans 22519 W 2022

The document contains questions from a Client-Side Scripting exam paper. It provides instructions to examiners on how to evaluate answers and a sample question paper with 5 questions: 1) Explain methods in JavaScript with an example. 2) List and describe data types in JavaScript. 3) Write a simple calculator program using switch case. 4) Write a program using the sort method of the Array object. 5) Describe property getters and setters in JavaScript. The document provides the expected answers to the questions along with the marking schemes.

Uploaded by

Kunal Mhatre
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

lOMoARcPSD|34723740

CSS model ans 22519 W-2022

Computer Organization - I (University of Mumbai)

Studocu is not sponsored or endorsed by any college or university


Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)
lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
WINTER – 2022 EXAMINATION
Subject Name: Client-Side Scripting Model Ans Subject Code: 22519
Important Instructions to examiners: XXXXX
1) The answers should be examined by key words and not as word-to-word as given in the model answer
scheme.
2) The model answer and the answer written by candidate may vary but the examiner may try to assess the
understanding level of the candidate.
3) The language errors such as grammatical, spelling errors should not be given more Importance (Not
applicable for subject English and Communication Skills.
4) While assessing figures, examiner may give credit for principal components indicated in the figure. The
figures drawn by candidate and model answer may vary. The examiner may give credit for any equivalent
figure drawn.
5) Credits may be given step wise for numerical problems. In some cases, the assumed constant values may
vary and there may be some difference in the candidate’s answers and model answer.
6) In case of some questions credit may be given by judgement on part of examiner of relevant answer based
on candidate’s understanding.
7) For programming language papers, credit may be given to any other program based on equivalent concept.
8) As per the policy decision of Maharashtra State Government, teaching in English/Marathi and Bilingual
(English + Marathi) medium is introduced at first year of AICTE diploma Programme from academic year
2021-2022. Hence if the students in first year (first and second semesters) write answers in Marathi or
bilingual language (English +Marathi), the Examiner shall consider the same and assess the answer based
on matching of concepts with model answer.

Q. Sub Answer Marking


No. Q. Scheme
N.

1 Attempt any FIVE of the following: 10 M

a) State the use of method in javascript with the help of suitable example. 2M

Ans A method/function is a set of statements that take inputs, do some specific computation, Explanation
and produce output. The idea is to put some commonly or repeatedly done tasks together - 1 M and
and make a function so that instead of writing the same code again and again for different Example-
1 M.
inputs, we can call that function.

Example:
function Addition (number1, number2)
{
return number1 + number2;
}
b) List & Explain datatypes in JavaScript. 2M

Ans JavaScript provides different data types to hold different types of values. There are two Any four,
types of data types in JavaScript, Primitive data type and Non-primitive data type ½ for each
i) There are five types of primitive data types in JavaScript. They are as follows:
String - represents sequence of characters e.g., "hello"
Number - represents numeric values e.g., 100
Page No: 1 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
Boolean - represents boolean value either false or true
Undefined - represents undefined value
Null - represents null i.e., no value at all

ii) The non-primitive data types are as follows:


Object - represents instance through which we can access members
Array - represents group of similar values
RegExp - represents regular expression
c) Write a simple calculator program using switch case in JavaScript. 2M

Ans <html> 2 M for


<body> relevant
<script> program.
const number1 = parseFloat(prompt("Enter first number: "));
const number2 = parseFloat(prompt("Enter second number: "));

const operator = prompt("Enter operator ( either +, -, *, / or %): ");


let result;

switch (operator) {
case "+":
result = number1 + number2;
document.write(result);
break;
case "-":
result = number1 - number2;
document.write(result);
break;

case "*":
result = number1 * number2;
document.write(result);
break;

case "/":
result = number1 / number2;
document.write(result);
break;

case "%":
result = number1 % number2;
document.write(result);
break;

Page No: 2 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________

default:
document.write("Invalid operator");
break;
}
</script>
</body>
</html>
d) Write a program using sort method of array object. 2M

Ans <html> 2 M for


<body> relevant
<script> program.
var array =[5,1,9,7,5];
// sorting the array
sorted = array.sort();
document.write(sorted);
</script>
</body>
</html>
e) Describe property Getters & Setters. 2M

Ans JavaScript object accessors are used to access and update the objects. Getter and setter are 1 m for each
used as object accessors to get or set object properties.

Getter method helps in accessing the object methods as object properties.

Setter method is used to set object properties.

Using getter and setter the javascript provides better data security and data quality.

Example:

<!DOCTYPE html>
<html>
<body>
<script>
var car = {
brand: "Toyota",
color: "Blue",

get getBrand () {
return this.brand;
},
get getColor () {
return this.color;

Page No: 3 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
},

set setBrand (newBrand) {


this.brand = newBrand;
},
set setColor (newColor) {
this.color = newColor;
}
};

document.write("Car Brand: " + car.brand + "<br>Car Color: " + car.color);

car.setBrand = "Tesla";
car.setColor = "Red";
document.write("<br><br>Car Brand: " + car.brand + "<br>Car Color: " +
car.color);
</script>
</body>
</html>
f) Enlist & explain the use of any two Intrinsic JavaScript Functions. 2M

Ans An intrinsic function (or built-in function) is a function (subroutine) available for use in a 1 M for
given programming language whose implementation is handled specially by the compiler. each
You can use intrinsic functions to make reference to a data item whose value is derived function
automatically during execution.

abs() - The ABS function returns the absolute value of the argument.

sin() - The SIN function returns a numeric value that approximates the sine of the angle or
arc specified by the argument in radians.

sqrt() - The SQRT function returns a numeric value that approximates the square root of
the argument specified.

Date(): return current date.

Len(): returns number of characters in the text.

parseInt() - parseInt() function takes string as a parameter and converts it to integer.

parseFloat() - parseFloat() function takes a string as parameter and parses it to a floating


point number.

g) Describe browser location object. 2M

Page No: 4 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
Ans i) The location object contains information about the current URL. Explanation
ii) The location object is a property of the window object. 1M
iii) The location object is accessed with: window.location or just location. Example-
Example: 1M
<!DOCTYPE html>
<html>
<body>
<h1>The Window Location Object</h1>
<p id="demo"></p>
<script>
let origin = window.location.origin;
document.getElementById("demo").innerHTML = origin;
</script>
</body>
</html>

2. Attempt any THREE of the following: 12 M

a) Write a JavaScript program that will display current date in DD/MM/YYYY format. 4M

Ans <!DOCTYPE html> Any


relevant
<html lang="en"> code 4 M.

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<script>

var d=new Date();

var currentDate=d.getDate()+'/'+(d.getMonth()+1)+'/'+d.getFullYear()

document.write(currentDate)

Page No: 5 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
</script>

</body>

</html>

b) Write a JavaScript program that will remove the duplicate element from an array. 4M

Ans <!DOCTYPE html> Any


<html lang="en"> relevant
<body> code 4 M.
<script>
let arr = ["scale", "happy", "strength", "peace", "happy", "happy"];
function removeDuplicates(arr) {
let unique = [];
for (i = 0; i < arr.length; i++) {
if (unique.indexOf(arr[i]) === -1) {
unique.push(arr[i]);
}
}
return unique;
}
document.write(removeDuplicates(arr));
</script>
</body>
</html>
c) Write a JavaScript program that will display list of student in ascending order 4M
according to the marks & calculate the average performance of the class.

Student Name Marks


Amit 70
Sumit 78
Abhishek 71

Ans <html> Any


relevant
<body> code 4 M.

<script>

var students = [["Amit", 70],["Sumit", 78],["Abhishek", 71],];

var Avgmarks = 0;

for (var i = 0; i < students.length; i++) {

Page No: 6 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
Avgmarks += students[i][1];

for (var j = i + 1; j < students.length; j++) {

if (students[i] > students[j]) {

a = students[i];

students[i] = students[j];

students[j] = a

var avg = Avgmarks / students.length;

document.write("Average grade: " + Avgmarks / students.length);

document.write("<br><br>");

for (i = 0; i < students.length; ++i){

document.write(students[i]+"<br>")

</script>

</body>

</html>

d) Write and explain a string functions for converting string to number and number to 4M
string.

Ans To covert string to number we can use parseInt() which converts a string number to a Any
integer number. Similarly we can use parseFloat(), number() for converting string to relevant
number. code with
explanation
Eg- 4 M.
var a=prompt('Enter a number');
var b=parseInt(prompt('Enter a number'));
document.write(typeof a+"<br>");
document.write(typeof b);
To convert form number to string we can use toString()
<html>
Page No: 7 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
<body>
<p>toString() returns a number as a string:</p>
<script>
let num = 12;
let text = num.toString();
document.write(num)
</script>
</body>
</html>

3. Attempt any THREE of the following: 12 M

a) Differentiate between concat( ) & join( ) methods of array object. 4M

Ans Any 4
concat() join() point=4M
The concat() method concatenates (joins) two The join() method returns an array as
or more arrays. a string.
The concat() method returns a new array,
containing the joined arrays.
The concat() method separates each value with Any separator can be specified. The
a comma only. default is comma (,).
Syntax: Syntax:
array1.concat(array2, array3, ..., arrayX) array.join(separator)
Example: Example:
<script> <script>
const arr1 = ["CO", "IF"]; var fruits = ["Banana", "Orange",
const arr2 = ["CM", "AI",4]; "Apple", "Mango"];
const arr = arr1.concat(arr1, arr2); var text = fruits.join();
document.write(arr); document.write(text);
</script> var text1 = fruits.join("$$");
document.write("<br>"+text1);
</script>

b) Write a JavaScript function to check the first character of a string is uppercase or 4M


not.

Ans <html> Correct


<body> function
<script> logic=4M
function upper_case(str)
{
regexp = /^[A-Z]/; (any other
if (regexp.test(str)) relevant
{
document.write("String's first character is uppercase");
Page No: 8 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
} logic can
else consider)
{
document.write("String's first character is not uppercase");
}
}
upper_case('Abcd');
</script>
</body>
</html>

OR
<script>
function firstIsUppercase(str)
{
if (str.length === 0)
{
return false;
}

return str.charAt(0).toUpperCase() === str.charAt(0);


}

if (firstIsUppercase(prompt("Enter text")))
{
document.write('First letter is uppercase');
} else {
document.write('First letter is NOT uppercase');
}
</script>

c) Write a JavaScript function to merge two array & removes all duplicate 4M
values.
Ans <html> Correct
<body> function
<script> logic=4 M
function merge_array(array1, array2)
{
var result_array = []; (any other
relevant
var arr = array1.concat(array2);
logic can
var len = arr.length; consider)
var assoc = {};

Page No: 9 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
while(len--)
{
var item = arr[len];

if(!assoc[item])
{
result_array.unshift(item);
assoc[item] = true;
}
}

return result_array;
}
var array1 = [1, 2, 3,4,7,9];
var array2 = [2, 30, 1,40,9];
document.write(merge_array(array1, array2));
</script>
</body>
</html>

Output:
3,4,7,2,30,1,40,9

OR

<html>
<body>
<script>
function mergearr(arr1, arr2)
{
// merge two arrays
var arr = arr1.concat(arr2);
var uniqueArr = [];
// loop through array
for(var i of arr) {
if(uniqueArr.indexOf(i) === -1)
{
uniqueArr.push(i);
}
}
document.write(uniqueArr);
}
Page No: 10 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
var array1 = [1, 2, 3,6,8];
var array2 = [2, 3, 5,56,78,3]
mergearr(array1, array2);
</script>
</body>
</html>

Output:
1,2,3,6,8,5,56,78

d) Write a JavaScript function that will open new window when the user will 4M
clicks on the button.
Ans <html> Correct
<body> function
<button onclick="openWin()">Open "New Window"</button> logic=4 M
<script>
var myWindow;
function openWin()
{
myWindow = window.open("", "myWindow", "width=400,height=400");
myWindow.document.write("<p>Hello Everyone.Welcome to new window.</p>");
}
</script>
</body>
</html>

4. Attempt any THREE of the following: 12 M

a) Describe text Rollover with the help of example. 4M

Ans Rollover means a webpage changes when the user moves his or her mouse over an object Define
on the page. It is often used in advertising. There are two ways to create rollover, using Rollover-2
plain HTML or using a mixture of JavaScript and HTML. We will demonstrate the creation M
of rollovers using both methods.

The keyword that is used to create rollover is the <onmousover> event.


Example-2
For example, we want to create a rollover text that appears in a text area. The text “What M
is rollover?” appears when the user place his or her mouse over the text area and the
rollover text changes to “Rollover means a webpage changes when the user moves his or (For
example,
her mouse over an object on the page” when the user moves his or her mouse away from
the text area. any other
relevant

Page No: 11 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
The HTML script is shown in the following example: logic can be
considered)
Example:
<html>
<head></head>
<Body>
<textarea rows="2" 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>

b) Write a JavaScript program that will create pull-down menu with three 4M
options. Once the user will select the one of the options then user will redirected
to that website.

Ans <html> Creation of


<head> pull-down
<title>HTML Form</title> menus-1 M
<script language="javascript" type="text/javascript">
function getPage(choice)
{ Correct
page=choice.options[choice.selectedIndex].value; function to
if(page != "") redirect
{ particular
window.location=page; website-3 M
}
}
</script>
OR
</head>
<body>
<form name="myform" action="" method="post">
Select Your Favourite Website: any other
<select name="MenuChoice" onchange="getPage(this)"> relevant
<option value="select any option">Select</option> logic can be
<option value="https://www.codecademy.com/catalog/language/javascript/"> considered
CodeAcademy </option>
<option value="https://www.msbte.org.in">MSBTE</option>
<option value="https://www.javatpoint.com/javascript-tutorial">JavaTpoint</option>
</form>
</body>
</html>

Page No: 12 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________

Output:

c) Describe Quantifiers with the help of example. 4M

Ans The frequency or position of bracketed character sequences and single characters can be Describe
denoted by a special character. Each special character has a specific connotation. Quantifiers-
The +, *, ?, and $ flags all follow a character sequence. 2M
For
Sr.No. Expression & Description
Example-2
p+ M
1
It matches any string containing one or more p's.
p*
2
It matches any string containing zero or more p's.
p?
3
It matches any string containing at most one p.(zero or one occurrences)
p{N}
4
It matches any string containing a sequence of N p's
p{2,3}
5
It matches any string containing a sequence of two or three p's.
p{2, }
6
It matches any string containing a sequence of at least two p's.
p$
7
It matches any string with p at the end of it.
Example:
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction()
{
var str = "100, 1000 or 10000?";
var patt1 = /\d{3,4}/g;

Page No: 13 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
var result = str.match(patt1);
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
d) Describe frameworks of JavaScript & its application. 4M

Ans Frameworks of JavaScript: Any 2


1. ReactJs
React is based on a reusable component. Simply put, these are code blocks that can be (1m for
classified as either classes or functions. Each component represents a specific part of a explanation
page, such as a logo, a button, or an input box. The parameters they use are called props, and 1M for
which stands for properties. application)

Applications:
React is a JavaScript library developed by Facebook which, among other things, was used
to build Instagram.com.

2. Angular
Google operates this framework and is designed to use it to develop a Single Page
Application (SPA). This development framework is known primarily because it gives
developers the best conditions to combine JavaScript with HTML and CSS. Google
operates this framework and is designed to use it to develop a Single Page Application
(SPA). This development framework is known primarily because it gives developers the
best conditions to combine JavaScript with HTML and CSS.

Applications:
Microsoft Office ,Gmail, Forbes, PayPal, Grasshopper, Samsung, Delta

3. Vue.js
Vue is an open-source JavaScript framework for creating a creative UI. The integration
with Vue in projects using other JavaScript libraries is simplified because it is designed to
be adaptable.

Application:
VueJS is primarily used to build web interfaces and one-page applications. It can also
be applied to both desktop and mobile app development.

4. jQuery
It is a cross-platform JavaScript library designed to simplify HTML client-side scripting.
You can use the jQuery API to handle, animate, and manipulate an event in an HTML
document, also known as DOM. Also, jQuery is used with Angular and React App building
tools.
Applications:
1. JQuery can be used to develop Ajax based applications.
2. It can be used to make code simple, concise and reusable.
3. It simplifies the process of traversal of HTML DOM tree.
4. It can also handle events, perform animation and add ajax support in web applications.
Page No: 14 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________

5. Node.js
Node.js is an open-source, server-side platform built on the Google Chrome JavaScript
Engine. Node.js is an asynchronous, single-threaded, non-blocking I/O model that makes
it lightweight and efficient.
Applications:
Paypal, LinkedIn, Yahoo, Mozilla, Netflix, Uber, Groupon, GoDaddy, eBay

e) Describe how to link banner advertisement to URL with example. 4M

Ans The banner advertisement is the hallmark of every commercial web page. It is typically Banner-1 M
positioned near the top of the web page, and its purpose is to get the visitor's attention by Example-3
doing all sorts of clever things. M
To get additional information, the visitor is expected to click the banner so that a new web
page opens. You can link a banner advertisement to a web page by inserting a hyperlink
into your web page that calls a JavaScript function rather than the URL of a web page. The
JavaScript then determines the URL that is associated with the current banner and loads the
web page that is associated with the URL.

Example:
<html>
<head>
<title>Link Banner Ads</title>
<script language="Javascript" type="text/javascript">
Banners = new Array('1.jpg','2.jpg','3.jpg')
BannerLink = new Array(
'google.com/','vpt.edu.in/', 'msbte.org.in/');
CurrentBanner = 0;
NumOfBanners = Banners.length;
function LinkBanner()
{
document.location.href =
"http://www." + BannerLink[CurrentBanner];
}
function DisplayBanners() {
if (document.images) {
CurrentBanner++
if (CurrentBanner == NumOfBanners) {
CurrentBanner = 0
}
document.RotateBanner.src= Banners[CurrentBanner]
setTimeout("DisplayBanners()",1000)
}
}
</script>
</head>
<body onload="DisplayBanners()" >
<center>
<a href="javascript: LinkBanner()"><img src="1.jpg"
Page No: 15 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
width="400" height="75" name="RotateBanner" /></a>
</center>
</body> </html>

5. Attempt any TWO of the following: 12 M

a) Write HTML script that will display following structure 6M

Write the JavaScript code for below operations:


(1) Name, Email & Pin Code should not be blank.
(2) Pin Code must contain 6 digits & it should not be accept any characters.
Ans <html> Creation of
<head> correct form
<style> and calling
table,tr,td event-2 M
{
border: solid black 1px;
border-collapse: collapse;
Name,
}
Email and
Pin code
td
should not
{
be blank-2
padding: 10px;
M
}
</style>
</head>
<body>
<table>
<tbody> Pin code
<tr> must
<td>Name : </td> contain 6
<td> <input type="text" id="name" required></td> digits and it
</tr> should not
<tr> be blank-2
<td>Email : </td> M
<td> <input type="email" id="email" required></td>
</tr>
<tr>

Page No: 16 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
<td>Pin code : </td>
<td> <input type="number" id="pin" required></td>
</tr>
<tr>
<td></td>
<td><button onclick="submit()">Submit</button></td>
</tr>
</tbody>
</table>
</body>
<script>
function submit()
{
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var pin = Number(document.getElementById("pin").value);
if(name.length==0 || email.length==0 || pin.length==0)
{
alert("Please enter value in all fields.")
}
else
{
var pinpattern =/^[4]{1}[0-9]{5}$/;
if( pinpattern.test(pin))
{
alert("Perfect Pin code");
}
else
{
alert("Wrong Pin code.");
}
}
}
</script>
</html>

b) Write a webpage that displays a form that contains an input for user name and 6M
password. User is prompted to enter the input user name and password and password
becomes the value of the cookie. Write the JavaScript function for storing the cookies.
It gets executed when the password changes.
Ans <html> Creation of
<head> form=2 M
<script> Storing and
function storeCookie() display
{ cookie
var pwd = document.getElementById('pwd').value information-
document.cookie = "Password=" + pwd + ";" 4M

Page No: 17 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
alert("Cookie Stored\n"+document.cookie);
}
</script>
</head>
<body>
<form name="myForm">
Enter Username <input type="text" id="uname"/><br/>
Enter Password <input type="password" id="pwd"/><br/>
<input type="button" value="Submit" onclick="storeCookie()"/>
<p id="panel"></p>
</form>
</body>
</html>

c) Write a JavaScript for creating following frame structure: 6M

Chapter 1 and Chapter 2 are linked to the webpage Ch1.html and ch2.html
respectively. When user click on these links corresponding data appears in
FRAME3.
Ans Step 1) create file frame1.html Correct
<html> frameset
<body> logic=6 M
<h1 align="center">FRAME1</h1>
</body>
</html> OR
( any other
relevant
Step 2) create frame2.html
logic can be
<html> considered )
<head>
<title>FRAME 2</title>
</head>
<body><H1>Operating System</H1>
<a href="Ch1.html" target="c"><UL>Chapter 1</UL></a>
<br>
<a href=" Ch2.html" target="c"><UL> Chapter 2</UL></a>
</body>
</html>

Page No: 18 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
Step 3) create frame3.html
<html>
<body>
<h1>FRAME3</h1>
</body>
</html>

Step4) create frame_target.html


<html>
<head>
<title>Create a Frame</title>
</head>
<frameset rows="30%,*" border="1">
<frame src="frame1.html" name="a" />
<frameset cols="50%,*" border="1">
<frame src="frame2.html" name="b" />
<frame src="frame3.html" name="c" />
</frameset>
</frameset>
</html>

Output:

6. Attempt any TWO of the following: 12 M

a) Write HTML script that will display dropdown list containing options such as 6M
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.

Page No: 19 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
Ans <html> Creation of
<body> list-2 M
<label for="color">Choose a Background Color:</label>
<select name="color" id="color" class="color" onchange="changeColor()"> Correct
<option value="red">Red</option> logic to
<option value="green">Green</option> Change
<option value="blue">Blue</option> background
<option value="yellow">Yellow</option> color as per
</select> selection-4
<script type="text/javascript"> M
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";
break;
}
}
</script>
</body>
</html>
b) Develop a JavaScript program to create Rotating Banner Ads. 6M

Ans <html > Correct


<head> logic-6 M
<title>Banner Ads</title>
<script>
Banners = new Array('1.jpg','2.jpg','3.jpg'); OR
CurrentBanner = 0; ( any other
function DisplayBanners() relevant
{ logic can be
if (document.images); considered )
{
CurrentBanner++;
if (CurrentBanner == Banners.length)
{
CurrentBanner = 0;

Page No: 20 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
}
document.RotateBanner.src= Banners[CurrentBanner];
setTimeout("DisplayBanners()",1000);
}
}
</script>
</head>
<body onload="DisplayBanners()" >
<center>
<img src="1.jpg" width="400"
height="75" name="RotateBanner" />
</center>
</body>
</html>

c) Write a JavaScript for the folding tree menu. 6M

Ans <html> Correct


<head> logic-6 M
<style>
ul, #myUL {
list-style-type: none;
OR
}
( any other
.caret::before {
relevant
content: "\25B6";
logic can be
color: black;
considered )
display: inline-block;
margin-right: 6px;
}

.caret-down::before {
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari */'
transform: rotate(90deg);
}

.nested {
display: none;
}

.active {
display: block;
}
</style>
</head>
<body>

<h2>Folding Tree Menu</h2>


<p>A tree menu represents a hierarchical view of information, where each item can have a
number of subitems.</p>
Page No: 21 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)


lOMoARcPSD|34723740

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION


(Autonomous)
(ISO/IEC - 27001 - 2013 Certified)
__________________________________________________________________________________________________
<p>Click on the arrow(s) to open or close the tree branches.</p>

<ul id="myUL">
<li><span class="caret">India</span>
<ul class="nested">
<li>Karnataka</li>
<li>Tamilnaadu</li>
<li><span class="caret">Maharashtra</span>
<ul class="nested">
<li>Mumbai</li>
<li>Pune</li>
<li><span class="caret">Navi Mumbai</span>
<ul class="nested">
<li>Nerul</li>
<li>Vashi</li>
<li>Panvel</li>

</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
var toggler = document.getElementsByClassName("caret");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
this.classList.toggle("caret-down");
});
}
</script>
</body>
</html>

Page No: 22 | 22

Downloaded by Kunal Mhatre (mysteriousboy4911@gmail.com)

You might also like