22519-M

Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 31

MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519
Important Instructions to examiners:
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.N. Scheme

1. Attempt any FIVE of the following: 10


a) Write features of JavaScript 2M
Ans. 1. It is an object-based scripting language. Any 2 features
1M each
2. It gives the user more control over the browser.
3. It is light weighted.
4. Client – Side Technology
5. JavaScript is interpreter based scripting language.
6. JavaScript is case sensitive.

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

7. JavaScript is object based language as it provides predefined


objects.
b) List and describe any four methods of Math object 2M

Ans. Math. round(value)- It returns value rounded to its nearest integer. Any 4 methods
Math.ceil(value)- It returns value rounded up to its nearest integer. 1/2M each
Math.floor(value)- It returns value rounded down to its nearest
integer.
Math.trunc(Value)- It returns value as integer part of value.
Math.pow (number, power)- It returns value as power of specified
number.
Math.sqrt(value)- It returns square root of value.
Math.abs(value)- It returns absolute –positive value for given value.
Math.min ()- It returns lowest value in a list of values.
Math.max ()- It returns highest value in a list of values.

c) Write a JavaScript program that will print even numbers from 1 2M


to 20 Correct
Ans. Note: Any other relevant logic shall be considered program 2M
<html>
<body>
<script type="text/javascript">
vari;
for(i=1; i<=20;i++)
{
if(i%2==0)
{
document.write(i+"<br>");
}
}
</script>
</body>
</html>
d) Write a JavaScript program to display the elements of array in 2M

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

ascending and descending order. Correct


Ans. Note: Any other relevant logic shall be considered program 2M
<script>
// JavaScript to illustrate sort() function
function func() {

// Original string
let arr = [45,12,32,78]

document.write("Original Array="+arr);
// Sorting the array
document.write("<br>Sorted Array="+arr.sort());
//reverse order
document.write("<br>Reverse Array="+arr.reverse())

}
func();

</script>

Output:
Original Array=45,12,32,78
Sorted Array=12,32,45,78
Reverse Array=78,45,32,12
e) Give syntax of and explain function in JavaScript with suitable 2M
example
Ans. Function is a collection of one or more statements written to execute Explanation
1M
a specific task.
syntax 1M
Syntax to define a function:
function function_name([Arguments])
{
Statement block;
[return statement;]
}
Example:

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

function display ( )
{
alert (“WELCOME TO JAVASCRIPT”);
}
f) Enlist and explain any two mouse events. 2M
Ans. onclickevent:This event occurs when a mouse button is clicked on Any two
mouse events
or over a form element. with
Example:<input type=”text” onclick=” function ()”> explanation
1M each
ondblclickevent: This event occurs when a mouse button is double
clicked on or over a form element.
Example:<input type=”text” ondblclick=” function ()”>

onmousedownevent: This event executes when a mouse button is


clicked while cursor is over an element.
Example:<input type=”text” onmousedown=” function ()”>

onmouseupevent: This event executes when a mouse button is


released while the cursor is over an element.
Example:<input type=”text” onmouseup=” function ()”>

onmouseoverevent: This event executes when mouse cursor moves


onto an element.
Example:<input type=”text” onmouseover=” function ()”>

onmousemoveevent: This event executes when mouse cursor is


moved while over an element.
Example:<input type=”text” onmousemove=” function ()”>

onmouseoutevent: This event executes when mouse cursor is


moved away from an element.
Example:<input type=”text” onmouseout=” function ()”>

g) Explain the term JavaScript URL 2M


Ans. A URL (Uniform Resource Locator) is the address of a unique Correct

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

resource on the internet. It is one of the key mechanisms used explanation


2M
by browsers to retrieve published resources, such as HTML pages,
CSS documents, images, and so on.

Here are some examples of URLs:


https://developer.mozilla.org/en-US/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL

2. Attempt any THREE of the following: 12


a) State the use of Object, Method and Property in JavaScript 4M
Ans. Object: In JavaScript, almost everything is an object. In JavaScript,
an object is used to represent standalone entity, with properties and Correct use of
type. Each object has its unique identity based on fields, buttons, all terms 4M
interface elements, etc.
For example, two forms placed on web page can have different
elements and interface with respect to their use. So, each form can
have unique name or id that can be referenced by JavaScript.

Property: A property is a value that is associated with an object. The


properties of an object is used to define the characteristics of the
object. You access the properties of an object with a simple dot-
notation.
For example, A form object in a web page can have properties like
width, height, etc.

Method: A method is used to define a function associated with an


object to perform a specific task. Methods are defined the way
normal functions are defined, except that they have to be assigned as
the property of an object.
For example, A submit button placed on a form is an object. Clicking
on submit button causes the button to process a method i.e. when a
click event occurs an action is performed and method executes.

b) Explain setter and getter properties in JavaScript with the help 4M


of suitable example
Ans. Property getters and setters Explanation
1. The accessor properties. They are essentially functions that work of setter with
example 2M
on getting and setting a value.

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

2. Accessor properties are represented by “getter” and “setter” Explanation


methods. In an object literal they are denoted by get and set. of setter with
example 2M
get –It is used to define a getter method to get the property value
set –It is used to define a setter method to set / change the property
value

let obj =
{
get propName() {
// getter, the code executed on getting obj.propName
},
set propName(value) {
// setter, the code executed on setting obj.propName = value
}
};
3. An object property is a name, a value and a set of attributes. The
value may be replaced by one or two methods, known as setter and a
getter.
Example of getter
const student
{
firstname: ‘abc’,
get getname()
{
return this.firstname;
}
};

Example of setter

const student
{
firstname: ‘abc’,
set changename(nm)
{
this.firstname=nm;
}
};

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

c) Write a JavaScript program to check whether a number is 4M


positive, negative or zero using switch case.
Ans. Note: Any other relevant logic shall be considered. Correct logic
2M
<html>
<body>
<script type="text/javascript">
var num=prompt("Enter number");
switch (Math.sign(num)) Correct syntax
2M
{
case 1:
alert("The number is Positive");
break;
case -1:
alert("The number is Negative");
break;
default:
alert("The number is Zero");
}
</script>
</body>
</html>

d) State the use of following methods: 4M


i) charCodeAt( ) Use of each
ii) fromCharCode ( ) method 2M

1. charCodeAt( ): This method is used to return a unicode of


Ans.
specified character.
Syntax: var code=letter.charCodeAt( );
Example: var ch=’a’;
document.write(ch.charCodeAt( ));
Output: 97

2. fromCharCode( ): This method is used to return a character for


specified code.
Syntax: var character=String.fromCharCode(code);
Example: var character=String.fromCharCode(97);
Document.write(ch);
Output: a

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

3. Attempt any THREE of the following: 12


a) Explain Associative arrays in detail. 4M
Ans. Associative arrays are basically objects in JavaScript where indexes
are replaced by user-defined keys.
Syntax: var arr = {key1:'value1', key2:'value2'}
Here, arr, is an associative array with key1, key2 being its keys or Correct
explanation
string indexes and value1 & value 2 are its elements. 4M
Example: var arr = { "Company Name": ‘Flexiple’, "ID": 123};
The content or values of associative arrays is accessed by keys.An
associative array is an array with string keys rather than numeric
keys.
For example:
var arrAssociative = {
"Company Name": 'Flexiple',
"ID": 123
};
var arrNormal = ["Flexiple", 123];

Here, the keys of the associative array are “Company Name” & “ID”
whereas in the normal array. The keys or index is 0 & 1.

b) Write a JavaScript function that checks whether a passed 4M


stringis palindrome or not.
Ans. Correct logic
Note: Any other relevenat logic shall be considered 2M
function isPalindrome(str) {
str = str.replace(/[^A-Za-z0-9]/g, '').toLowerCase(); Correct syntax
2M
return str === str.split('').reverse().join('');
}
console.log(isPalindrome("A man, a plan, a canal, Panama")); //
Output: true
console.log(isPalindrome("racecar")); // Output: true
console.log(isPalindrome("hello")); // Output: false

c) Explain how to add and sort elements in array with suitable 4M

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

example.
Ans. Adding Elements to an Array:
In JavaScript, you can add elements to an array using various
methods, such as push(), unshift(), or direct assignment to a specific
index.

Explanation
Using push(): of adding
The push() method adds one or more elements to the end of an array elements with
and returns the new length of the array. suitable
example
Using unshift():
The unshift() method adds one or more elements to the beginning of any 2 ways:
2M
an array and returns the new length of the array.

Using splice(): Explanation


This method can be used to add new items to an array, and removes of sorting
elements with
elements from an array. suitable
Syntax: example
arr.splice(start_index,removed_elements,list_of_elemnts_to_be_add 2M
ed);
Parameter:
•The first parameter defines the position where new elements should
be added (spliced in).
•The second parameter defines how many elements should be
removed.
•The list_of_elemnts_to_be_added parameter define the new
elements to be added(optional).

Using length property:


The length property provides an easy way to append a new element
to an array.
Ex:
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.write(fruits+"<br>");
fruits[fruits.length] = "Kiwi";

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

document.write(fruits+"<br>");
fruits[fruits.length] = "Chikoo";
document.write(fruits);
</script>

Sorting Elements in an Array:


JavaScript provides the sort() method to sort the elements of an array
in place and returns the sorted array.
Example
let numbers = [5, 2, 8, 1, 4];
numbers.push(7);
console.log("Array before sorting:", numbers);
numbers.sort((a, b) => a - b);
console.log("Array after sorting:", numbers);

d) Explain the term browser location and history in details. 4M


Ans. Window Location Object:
Explanation
In JavaScript, the window.location object represents the current of browser 2M
URL of the browser window. It provides properties and methods to
Explanation
manipulate the URL.
of history 2M
window.location.href:
Returns the complete URL of the current page.
window.location.hostname:
Returns the domain name of the web server.
window.location.pathname:
Returns the path and filename of the current page.
window.location.protocol:
Returns the protocol (HTTP, HTTPS, etc.) of the current page.
window.location.assign(url):
Loads the specified URL.
window.location.reload(forceReload):
Reloads the current page.
// Example: Changing browser location

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

window.location.href = "https://example.com/page2";
Window History
The window.history object can be written without the window
prefix.
To protect the privacy of the users, there are limitations to how
JavaScript can access this object.

Some methods:
history.back() - same as clicking back in the browser
history.forward() - same as clicking forward in the browser
Window History Back
The history.back() method loads the previous URL in the history
list.
This is the same as clicking the Back button in the browser.
Example:
<html>
<head>
<script>
function goBack() {
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>
4. Attempt any THREE of the following: 12
a) State what is frame? Explain how it can be created with suitable 4M
example.
Ans. Note: Explanation of either <frameset> , <frame> or <iframe>
shall be considered. Definition 1M
A frame refers to an HTML element that allows the display of
another HTML document within the current web page. Frames are Explanation
with example
implemented using the <frameset>, <frame> and <iframe> (Inline
Page PAGE 1 / NUMPAGES 1
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

Frame) element in HTML. 3M

Frames are used to divide browser window into multiple sections


where each section is treated as window that can have independent
contents. A frame can load separate HTML document in each frame
in a window.

<frameset> tag : A frameset is defined as a set of frames inserted in


an HTML web page. These frames can be in the form of rows and
columns in different size. Frameset tells the browser how to divide
the screen into multiple areas.
<frameset> ... </frameset>

Attributes:
cols=”pixels/percentage” Specify number and size of
columns in a frameset. Default
value is 100% (1 column).
rows=”pixels/percentage” Specify number and size of rows in
a frameset. Default value is 100%
( 1 row).

<frame> tag : Frame tag is used to insert web page content in a


frame. It is an empty tag.

Attributes:
src=”URL” Specify address of a web page to be
displayed in a frame.
name=” string” Specify name of the frame which can
be used as target to open a link.

Code:
<html>
<frameset cols="25%,75%" >
<frame src="page1.html" name="f1">
<frame src="page2.html" name="f2">
</frameset>
</html>

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

OR

Creating Frames with <iframe> in HTML:


To create a frame using the <iframe> element, you specify the URL
of the document you want to embed as the value of the src attribute.

Cross-Origin Restrictions: When embedding content from external


sources, cross-origin restrictions may apply. This means that the
embedded content must be served with appropriate CORS (Cross-
Origin Resource Sharing) headers to allow it to be displayed within
the frame.

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Frame Example</title>
<style>
/* Style the iframe */
iframe {
width: 100%;
height: 300px; /* Set the height as desired */
border: 1px solid #ccc; /* Add a border for clarity */
}
</style>
</head>
<body>
<!-- Create a frame with an embedded document -->
<iframesrc="https://www.example.com"></iframe>
</body>

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

</html>

b) Explain the steps to create floating menu and chain select menu 4M
Ans. A floating menu is a menu that remains visible as the user scrolls
Correct steps
down a web page. It's often used for navigation or providing quick of each 2M
access to important content. Here's how you can create one:
HTML Structure: Create the HTML structure for the menu. This
typically involves using <nav> or <div> elements for the menu
container, and <ul> and <li> elements for the menu items.
CSS Styling: Use CSS to style the menu and make it float on the
page. You can use position: fixed to fix the menu in place and top,
bottom, left, or right properties to position it relative to the viewport.
JavaScript (Optional): You can enhance the functionality of the
floating menu with JavaScript. For example, you can add smooth
scrolling to anchor links within the menu, or you can add animations
to make the menu appear or disappear dynamically.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Floating Menu Example</title>
<style>
/* CSS styles for the floating menu */

.floating-menu {
position: fixed;
top: 0;
left: 0;
background-color: #333;
padding: 10px;

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

width: 100%;
z-index: 1000; /* Ensure it's above other content */
}

.menu-item {
display: inline-block;
margin-right: 10px;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
<nav class="floating-menu">
<ul>
<li class="menu-item"><a href="#section1">Section 1</a></li>
<li class="menu-item"><a href="#section2">Section 2</a></li>
<!-- Add more menu items as needed -->
</ul>
</nav>
<section id="section1">
<h2>Section 1</h2>
<p>This is the content of section 1.</p>
</section>
<section id="section2">
<h2>Section 2</h2>
<p>This is the content of section 2.</p>
</section>
</body>
</html>

Chained Select Menu:


A chained select menu, also known as a dependent or cascading
select menu, consists of multiple dropdown menus where the options

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

in one dropdown menu depend on the selection made in another


dropdown menu.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Chained Select Menu Example</title>
</head>
<body>
<label for="country">Country:</label>
<select id="country">
<option value="">Select a country</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>

<label for="city">City:</label>
<select id="city" disabled>
<option value="">Select a city</option>
</select>
<script>

// JavaScript code to handle the chained select menu


constcountrySelect = document.getElementById('country');
constcitySelect = document.getElementById('city');

// Data source (for demonstration purposes)


constcitiesByCountry = {
'usa': ['New York', 'Los Angeles', 'Chicago'],
'uk': ['London', 'Manchester', 'Birmingham']
};

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

countrySelect.addEventListener('change', function() {
constselectedCountry = this.value;
if (selectedCountry) {
citySelect.innerHTML = '';
const cities = citiesByCountry[selectedCountry];
if (cities) {
citySelect.disabled = false;
citySelect.innerHTML += '<option value="">Select a city</option>';
cities.forEach(city => {
citySelect.innerHTML += `<option
value="${city}">${city}</option>`;
});
} else {
citySelect.disabled = true;
}
} else {
citySelect.disabled = true;
citySelect.innerHTML = '<option value="">Select a city</option>';
}
});
</script>
</body>
</html>
c) Explain how to use banners for displaying advertisement. 4M
Ans. Following are the steps to insert banner advertisement in webpage.
1) Create banner advertisement using a graphics tool such as Correct
explanation
PhototShop, Paint, etc. 4M
2) Create an <img> element in web page with height and width to
display banner advertisement.
3) Build JavaScript that loads and display banner advertisements.
<html>
<head>
<title>Banner Advertisements</title>
</head>
Page PAGE 1 / NUMPAGES 1
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

<body bgcolor="#EEEEEE">
<a href="https://www.youtube.com/">
<imgsrc="ad.jpg"/>
</a>
</body>
</html>
d) Write a JavaScript function to check whether a given address is 4M
a valid IP address or not.
function isValidIPAddress(address) {
Ans.
const ipv4Regex = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/; Correct logic
2M
const match = address.match(ipv4Regex);
Correct syntax
if (match) { 2M
for (let i = 1; i<= 4; i++) {
const part = parseInt(match[i]);
if (part < 0 || part > 255 || isNaN(part)) {
return false; // Invalid part
}
}
return true;
} else {
return false;
}
}

e) Explain process to create status bar in JavaScript. 4M


Ans. Status Bar:
The status bar is located at the bottom of the browser window and is Correct
explanation
used to display a short message to visitors on a web page. 4M
Developers who are clever to utilize the status bar employ various
techniques to incorporate the status bar in the design of their web
page. Some developers display a message on the status bar when the
web page first opens. Other developers might change the message to
reflect whatever the visitor is doing on the web page. For example, if
a user is filling registration form then status bar will display a text as

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

‘User is on form filling section’.


Building a Static Message:
A static message appears when the web page opens and remains on
the status bar until the web page is closed. The content of the status
bar is the value of the window object's status property.
To display a message on the status bar, assign the message to the
status property of the window object.
Example:-
window.status= 'You are on home page';

<html>
<head>
<script type="text/javascript">
window.status='Welcome to Home Page';
</script>
</head>
<body>
<h1>Hello welcome to JavaScript</h1>
</body>
</html>
5. Attempt any TWO of the following: 12
a) Write HTML script that displays textboxes for accepting 6M
username and password. Write proper JavaScript such that
when the user clicks on submit button
i) All textboxes must get disabled and change the color to ‘RED;
and with respective labels Any correct
ii) Prompt the error message if the password is less than six logic program,
Create
characters textboxes
Ans. <html> 2M
<head>
disable
<script> textboxes with
function disableTxt() red color
{ 2M
document.getElementById("un").disabled = true; Password
document.getElementById('un').style.color = "red"; validation
document.getElementById('aaa').style.color = "red"; 2M
document.getElementById("pass").disabled = true;

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

document.getElementById('pass').style.color = "red";
document.getElementById('bbb').style.color = "red";
}
function validateform(){
var username=document.myform.username.value;
var password=document.myform.password.value;
if (username==null || username==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
</head>
<body>
<form name="myform" method="post" action="" onsubmit="return
validateform()" >
<label id = "aaa">Username:</label>
<input type="text" id="un" name="username"/>
<label id = "bbb">
Password:
</label>
<input type="password" id="pass" name="password"/>
<br>
<br>
<button onclick="disableTxt()">Disable Text field</button>
</form>
</body>
</html>
b) Write a webpage that displays a form that contains an input for 6M
students rollno and names user is prompted to enter the input
student rollno and name and rollno becomes value of the cookie.

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

Ans. <html>
<head><script>
Any correct
function writeCookie() logic program,
{ Create input
var d=new Date(); text boxes for
username and
d.setTime(d.getTime()+(1000*60*60*24)); password 2M
with(document.myform)
{ set cookie
2M
document.cookie="Roll No=" + student.value + ";expires="
+d.toGMTString(); display 2M
}
}
function readCookie()
{
if(document.cookie=="")
document.write("cookies not found");
else
document.write(document.cookie);
}
</script>
</head>
<body>
<form name="myform" action="">
Enter your name:
<input type="text" name="student"><br>
Enter your Roll No:
<input type="roll no" name="student"><br>
<input type="Reset" value="Set C" type="button"
onclick="writeCookie()">
<input type="Reset" value="Get C" type="button"
onclick="readCookie()">
</form>
</body></html>

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

c) Write a JavaScript to create rollover effect that involves text and 6M


images. When the user places his or her mouse pointer over a
book title, the corresponding book images appears
Ans. <html> Any correct
logic program
<head> 6M
<title>
rollovers</title>
</head>
<body>
<table border="1" width="100%">
<tbody>
<tr valign="top">
<td width="50%">
<a><img height="500" src="motivation.png" width="900"
name="clr"></a></td>
<td><a onmouseover="document.clr.src='blue.png' ">
<b><u>Motivational book</u></b></a>
<br>
<a onmouseover="document.clr.src=education.png' ">
<b><u>Educational book</u></b></a>
<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>

6. Attempt any TWO of the following: 12


a) Explain following form control / elements with example Button, 6M
Text, TextArea, Select Checkbox, Form.
Ans. Button is created by using following code: Explanation
<form method = “GET” action = “”><input type = “button” name = of each
control with
“MyButton” value = “Click” onclick = “msg()”><form> example 1M
There are several types of button, which are specified by the type
attribute:

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

1. Button which corresponds to the graphic component.


2. Submit, which is associated to the form and which starts the
loading of the file assigned to the action attribute.
3. Image button in which an image loaded from a file.
A Button object also represents an HTML <button> element which
is specified as follows:
<button name = “btn” value = “MyButton” onclick = “msg()”>
Example:
<html>
<body>
<h2>Show a Push Button</h2>
<p>The button below activates a JavaScript when it is clicked. </p>
<form>
<input type="button" value="Click me" onclick="msg()">
</form>
<script>
function msg()
{
alert("Hello world!");
}
</script>
</body>
</html>

Text:
Input “text” is an object to enter a single line of text whose content
will be part of form data.
In html a text is created by following code:
<input type=”text” name=”textname” id=”textid” value=”
assign_value” />

Example:

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

<script type="text/javascript">
function changeText()
{
var userInput = document.getElementById('userInput').value;
document.getElementById('vp').innerHTML = userInput;
}
</script>
<input type='text' id='userInput' value='Enter Text Here' />
<p>Welcome <b id='vp'>JavaScript</b></p>
<input type='button' onclick='changeText()' value='Change Text'/>
</script>

TextArea:
The Textarea object represents an HTML <textarea> element.

The <textarea> tag indicates a form field where the user can enter a
large amount of text.

You can access a <textarea> element by using getElementById()

Example:
<html>
<body>
<textarea cols="30" rows="5" wrap="hard" readonly="yes"
disabled="yes">
As you can see many times word wrapping is often the desired look
for your textareas. Since it makes everything nice and easy to read
and preserves line breaks.
</textarea>
</body>
</html>

Checkbox:

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

<input> elements of type checkbox are rendered by default as boxes


that are checked (ticked) when activated. A checkbox allows you to
select single values for submission in a form (or not).

Syntax for creating checkbox is:

<input type="checkbox" id="myCheck" onclick="myFunction()">


A checkbox can have only two states:

1. Checked
2. Unchecked
Example:

<html>
<body>
<div>
Program:
<br>
<input type="checkbox" name="program" id="it" value="IT">
<label for="it">Information Tech</label><br>
<input type="checkbox" name="program" id="co" value="CO"
checked>
<label for="co">Computer Engg</label><br>
<input type="checkbox" name="program" id="ej" value="EJ">
<label for="ej">Electronics</label><br>
<button onclick="validate();">Validate</button>
</div>
<div id="status">
</div>
<script>
function validate()
{
var elements = document.getElementsByName("program");
var statusText = " ";
for (var index=0;index <elements.length;index++)

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

{
statusText = statusText +
elements[index].value+"="+elements[index].checked+"<br>";
}
document.getElementById("status").innerHTML = statusText;
}
</script>
</body>
</html>

Select:
Form SELECT elements (<select>) within your form can be
accessed and manipulated in JavaScript via the corresponding Select
object.
To access a SELECT element in JavaScript, use the syntax:
document.myform.selectname //where myform and selectname are
names of your form/element.
document.myform.elements[i] //where i is the position of the select
element within form
document.getElementById("selectid") //where "selectid" is the ID of
the SELECT element on the page.
Example:

<html>
<body>
<select id="programs" size="5">
<option>Computer Engineering</option>
<option>Information Technology</option>
<option>Chemical Engineering</option>
<option>Electronics &TeleComm.</option>
</select>
<p>Click the button to disable the third option (index 2) in the
dropdown list.</p>
<button onclick="myFunction()">Disable Option</button>
<script>

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

function myFunction()
{
var x = document.getElementById("programs").options[2].disabled
= true;
document.getElementById("programs").options[2].style.color =
"red";
}
</script>
</body>
</html>

Form:
A form is a section of an HTML document that contains elements
such as radio buttons, text boxes and option lists. HTML form
elements are also known as controls.

Elements are used as an efficient way for a user to enter information


into a form. Typical form control objects also called “widgets”
includes the following:

 Text box for entering a line of text.

 Push button for selecting an action.

 Radio buttons for making one selection among a group of


options.

 Check boxes for selecting or deselecting a single, independent


option.

The <form> element can contain one or more of the following form
elements:
· <input> · <textarea> · <button> · <select> · <option> · <fieldset> ·
<label>
· <legend>
Syntax:
<form name = “myform” id = “myform” action = “page.html”
onSubmit = “test()”> -----objects---- </form>

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

b) Write a JavaScript for protecting web page by implementing the 6M


following steps:
i) Hiding your source code
ii) Disabling the right MouseButton
iii) Hiding JavaScript
Ans. Note: Any other correct logic / programs shall be considered
i) Hiding your source code: Hiding source
 Every developer has to admit that, on occasion, they've peeked at code 2M
the code of a web page or two by right-clicking and choosing
Disabling
View Source from the context menu.
Mouse button
 In fact, this technique is a very common way for developers to
2M
learn new techniques for writing HTML and Javascript.
However, some developers don't appreciate a colleague snooping
Hiding
around their code and then borrowing their work without JavaScript
permission. This is particularly true about javascript, which are 2M
typically more time-consuming to develop than using HTML to
build a web page.
 In reality, you cannot hide your HTML code and JavaScript from
prying eyes, ,
 because a clever developer can easily write a program that
pretends to be a browser and calls your web page from your web
server, saving the web page to disk, where it can then be opened
using an editor. Furthermore, the source code for your web page
—including your JavaScript—is stored in the cache, the part of
computer memory where the browser stores web pages that were
requested by the visitor.
 A sophisticated visitor can access the cache and thereby gain
access to the web page source code.
 However, you can place obstacles in the way of a potential
peeker. First, you can disable use of the right mouse button on
your site so the visitor can't access the View Source menu option
on the context menu. This hide both your HTML code and your
JavaScript from the visitor. Nevertheless, the visitor can still use
the View menu's Source option to display your source code. In
addition, you can store your JavaScript on your web server
instead of building it into your web page. The browser calls the
JavaScript from the web server when it is needed by your web
page.
Page PAGE 1 / NUMPAGES 1
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

 Using this method, the JavaScript isn't visible to the visitor, even
if the visitor views the source code for the web page.

ii) Disabling the right MouseButton:


The following example shows you how to disable the visitor's right
mouse button while the browser displays your web page. All the
action occurs in the JavaScript that is defined in the <head> tag of
the web page.
Example:
<html>
<head>
<script>
window.onload = function()
{
document.addEventListener("contextmenu", function(e)
{
e.preventDefault();
}, false);}
</script>
<body>
<h3>Right click on screen,Context Menu is disabled</h3>
</body>
</html>

The preventDefault() method cancels the event if it is cancelable,


meaning that the default action that belongs to the event will not
occur.

iii) Hiding JavaScript:


You can hide your JavaScript from a visitor by storing it in an
external file on your web server. The external file should have the .js
file extension. The browser then calls the external fi le whenever the
browser encounters a JavaScript element in the web page. If you
look at the source code for the web page, you'll see reference to the

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

external .js file, but you won't see the source code for the JavaScript.

The next example shows how to create and use an external


JavaScript fi le. First you must tell the browser that the content of
the JavaScript is located in an external fi le on the web server rather
than built into the web page. You do this by assigning the fi le name
that contains the JavaScript to the src attribute of the <script> tag.

Next, you need to define empty functions for each function that you
define in the external JavaScript file.

webpage.html
<html>
<head>
<script src="mycode.js" languages="javascript"
type="text/javascript">
</script>
<body>
<h3> Right Click on screen, Context Menu is disabled</h3>
</body>
</html>
mycode.js
window.onload=function()
{
document.addEventListener("contextmenu", function(e)
{
e.preventDefault();
}, false);
}
c) Develop a JavaScript to create rotating Banner Ads with URL 6M
links.
Ans. Note: Any other correct logic / program shall be considered

<html>
Correct
<head> program 6M
<title>Link Banner Ads</title>

Page PAGE 1 / NUMPAGES 1


MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)

SUMMER – 2024 EXAMINATION


MODEL ANSWER
Subject: Client Side Scripting Language Subject Code: 22519

<script language="Javascript" type="text/javascript">


Banners = new Array('1.jpg','2.jpg')
BannerLink = new Array(
'google.com/', '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()"><imgsrc="1.jpg"
width="400" height="75" name="RotateBanner" /></a>
</center>
</body> </html>

Page PAGE 1 / NUMPAGES 1

You might also like