22519-M
22519-M
22519-M
(Autonomous)
(ISO/IEC - 27001 - 2005 Certified)
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.
// 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:
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 ()”>
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;
}
};
Here, the keys of the associative array are “Company Name” & “ID”
whereas in the normal array. The keys or index is 0 & 1.
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.
document.write(fruits+"<br>");
fruits[fruits.length] = "Chikoo";
document.write(fruits);
</script>
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)
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).
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>
OR
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>
</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;
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>
<label for="city">City:</label>
<select id="city" disabled>
<option value="">Select a city</option>
</select>
<script>
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)
<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;
}
}
<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;
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.
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>
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:
<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.
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:
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++)
{
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>
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.
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>
Using this method, the JavaScript isn't visible to the visitor, even
if the visitor views the source code for the web page.
external .js file, but you won't see the source code for the JavaScript.
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>