Scribd
Upload
10 views

solution Summer-2022_CSS

Uploaded by

co2022.ishak.ansari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

solution Summer-2022_CSS

Uploaded by

co2022.ishak.ansari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

Summer-2022 CSS

1. Attempt any FIVE of the following: 2*5=10M


(a) State the features of JavaScript.

1) Lightweight
JavaScript does not have too many language constructs.
JavaScript uses dynamic typing, so everything that you declare or assign,
the interpreter tries to figure out, what should be the type of a certain
variable.
2) Object-oriented
3) Interpreted based
4) Handling date and Time
5) Validating user inputs
6) Event Handling
(b) Differentiate between session cookies and persistent cookies.

Session Cookies persistent cookies


It resides in memory for the length of the A persistent cookie is a cookie that is
browser session. assigned an expiration date.

Also known as an in-memory cookie Also known as transient cookie.

Session cookie is automatically deleted It is written to the computer’s hard disk


when the user exits the browser and remains there until the expiration date
application. has been reached; then it’s deleted.

Example of session cookie:


<script>
function createCookie()
{
var x = document.getElementById('myname').value
document.cookie = "name=" + x + ";"
alert("Cookie Written..")
}
</script>

Example of persistent cookie:


<script>
var date = new Date();
var days=2;
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = date.toGMTString();
document.cookie = "user=Rahul; expires="+ expires + ";"
alert("Cookie Created\n"+document.cookie)
</script>

(c) Write a javascript program to check whether entered number is prime or not.
<html>
<body>
<script>
var i, chk=0;
var num = parseInt(prompt("Enter a positive number: "));
for(i=2; i<num; i++)
{
if(num%2==0)
{
chk++;
break;
}
}
if(chk==0)
document.write(num + " is a Prime Number");
else
document.write(num + " is not a Prime Number");
</script>
</body>
</html>

d) Explain following form events : (i) onmouseup (ii) onblur

The onmouseup event occurs when a mouse button is released over an element.
Example:
<p id="myP" onmousedown="mouseDown()" onmouseup="mouseUp()">
The mouseDown() function sets the color of this text to red.
The mouseUp() function sets the color of this text to blue.
</p>

The onblur event occurs when an HTML element loses focus.


Example:
<input type="text" id="fname" onblur="myFunction()">
<script>
function myFunction() {
let x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}

e) Write a javascript program to changing the contents of a window.


In following example, we are creating only one object of window and each time same
window remain open and content of window changes.

<html>
<body>
<script>
function openWin1(ad)
{
myWindow = window.open(ad, "myWindow", "width=500,height=500");
}
</script>
<button value="Google"
onclick="openWin1('https://www.google.com')">Google</button>
<button value="Vidyalankar"
onclick="openWin1('http://vpt.edu.in')">Vidyalanakr</button>
</body>
<html>
f) Explain frame works of javascript and its application.
JavaScript frameworks are a type of tool that makes working with JavaScript easier and
smoother.

1) Angular

2) React

3) Vue.js

4) Node.js

5) Backbone.js

g) Write a javascript syntax to accessing elements of another child window.

From the top level window that contains the iFrame you start by getting a reference to
the iFrame by using plain old getElementById to select the iFrame by Id. Alternately you
can also access the frame via window.frames[0] (or appropriate numeric index). Once the
iFrame is selected you can use the contentDocument property to access the child frame
content. From there you can access document methods as you normally would – in this
case by using getElementById() and then assigning some HTML to the display <div> tag
in the child frame.

Example: window.frames[0].showMessage("Hello from Main Page in iFrame");

2. Attempt any THREE of the following : 4*3=12M

(a) Write a javascript program to validate user accounts for multiple set of user ID
and password (using swith case statement).

<html>
<body>
Enter your User ID
<input type="text" id="id">
<br><br>
Enter your Password
<input type="password" id="pass">
<br><br>
<input type="submit" onclick="check()">
<br><br>
<p id="display"></p>
<script>
function check() {
var uid = document.getElementById('id').value;
var pass = document.getElementById('pass').value;
switch(uid){
case "darshan.khapekar@vpt.edu.in":
if(pass == "darshan@123"){
document.getElementById('display').innerHTML = "Valid User";
}
break;
case "prashant.yelurkar@vpt.edu.in":
if(pass == "prashant@123"){
document.getElementById('display').innerHTML = "Valid User";
}
break;
case "konisha.thakare@vpt.edu.in":
if(pass == "konisha@123"){
document.getElementById('display').innerHTML = "Valid User";
}
break;
default:
document.getElementById('display').innerHTML = "Invalid User";
}
}
</script>
</body>
</html>

(b) Differentiate between concat() and join() methods of array object.


concat() of array object join() of array object
The concat() method concatenates (joins) The join() method returns an array as a
two or more arrays. string.
The concat() method does not change the The join() method does not change the
existing arrays. original array.
Syntax: array1.concat(array2, array3, Syntax: array.join(separator)
..., arrayX) Any separator can be specified. The
default is comma (,).
Example: Example:
<script> <script>
var arr1 = ["Java", "Python"]; var fruits = ["Banana", "Orange", "Apple",
var arr2 = [1, 2, 3]; "Mango"];
var arr3 = arr1.concat(arr2); var text = fruits.join("#");
document.write(arr3); document.write(text);
</script> </script>

c) Write a javascript program to demonstrate java intrinsic function.


An intrinsic function is often used to replace the Submit button and the Reset button
with your own graphical images, which are displayed on a form in place of these
buttons.

Example:
<html>
<head>
<title>Using Intrinsic JavaScript Functions</title>
</head>
<body>
<FORM name="contact" action="#" method="post">
<P>
First Name: <INPUT type="text" name="Fname"/> <BR>
Last Name: <INPUT type="text" name="Lname"/><BR>
Email: <INPUT type="text" name="Email"/><BR>
<img src="submit.jpg"
onclick="javascript:document.forms.contact.submit()"/>
<img src="reset.jpg"
onclick="javascript:document.forms.contact.reset()"/>
</P>
</FORM>
</body>
</html>

d) Design a webpage that displays a form that contains an input for user name and
password. User is prompted to enter the input user name and password and
password become value of the cookies. Write the javascript function for storing the
cookies.

Code:
<html>
<head>
<script>
function storeCookie()
{
var pwd = document.getElementById('pwd').value
document.cookie = "Password=" + pwd + ";"
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>
3. Attempt any THREE of the following : 4*3=12M
(a) Write a javascript program to create read, update and delete cookies.
Code:
<html>
<head>
<script>
function writeCookie()
{
var d=new Date();
d.setTime(d.getTime()+(1000*60*60*24));
with(document.myform)
{
document.cookie="Name=" + person.value + ";expires=" +d.toGMTString();
}
}
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="person"><br>
<input type="Reset" value="Set" type="button" onclick="writeCookie()">
<input type="Reset" value="Get" type="button" onclick="readCookie()">
</form>
</body>
</html>
(b) Write a javascript program to link banner advertisements to different URLs.
Code:
<html>
<head>
<title>Link Banner Ads</title>
<script language="Javascript" type="text/javascript">

Banners = new Array('y.jpg','yy.jpg','yyy.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"
width="400" height="200" name="RotateBanner" /></a>
</center>
</body>
</html>
(c) Write a javascript program to calculate add, sub, multiplication and division of
two number (input from user). Form should contain two text boxes to input
numbers of four buttons for addition, subtraction, multiplication and division.
Code:
<html>
<head>
<script>
function multiplyBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 * num2;
}

function divideBy()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 / num2;
}
function add()
{
num1 = parseInt(document.getElementById("firstNumber").value);
num2 = parseInt(document.getElementById("secondNumber").value);
document.getElementById("result").innerHTML = num1 + num2;
}
function subtract()
{
num1 = document.getElementById("firstNumber").value;
num2 = document.getElementById("secondNumber").value;
document.getElementById("result").innerHTML = num1 - num2;
}
</script>
</head>
<body>
<form>
1st Number : <input type="text" id="firstNumber"><br>
2nd Number: <input type="text" id="secondNumber"><br><br>
<input type="button" onClick="multiplyBy()" Value="Multiply">
<input type="button" onClick="divideBy()" Value="Divide">
<input type="button" onClick="add()" Value="Addition">
<input type="button" onClick="subtract()" Value="Subtraction">
</form>
<p>The Result is : <br>
<p id = "result"></p>
</p>
</body>
</html>

(d) State what is regular expression. Explain its meaning with the help of a
suitable example.

A regular expression is an object that describes a pattern of characters.

The JavaScript RegExp class represents regular expressions, and both String and RegExp
define methods that use regular expressions to perform powerful pattern-matching and
search-and-replace functions on text.

A Regular Expression is a sequence of characters that constructs a search pattern. When


you search for data in a text, you can use this search pattern to describe what you are
looking for.

Syntax:
A regular expression is defined with the RegExp () constructor as:
var pattern = new RegExp(pattern, attributes);
or simply
var pattern = /[pattern]/attributes;
Here,

• Pattern – A string that specifies the pattern of the regular expression or another
regular expression.
• Attributes – An optional string containing attributes that specify global, case-
insensitive, and multi-line matches.

Example:
<html>
<body>
<script>
//validating mobile number
function validatePhone(num) {
// regex pattern for phone number
var re =/^\d{10}$/;

// check if the phone number is valid


var result = num.match(re);
if (result) {
document.write('The number is valid.');
}
}
// take input
var number = prompt('Enter a 10 digit mob number ');
validatePhone(number);
</script>
</body>
</html>

4. Attempt any THREE of the following : 4*3=12M


(a) Differentiate between For-loop and For-in loop.
For loop For-in loop
for loop provides a concise way of writing For-in loop in JavaScript is used to
the loop structure. iterate over the properties of an
object.
For instance, if you want to iterate Certainly, for objects, the for-in loop
over even numbers, you'd need to use the allows you to get the property name in
normal for loop the iteration variable.
for (expr 1; expr 2; expr3) for (x in object) {
{ code block to be executed
// code block to be executed }
}
// program to display text 5 times <script>
const n = 5; var code= {
CO : "Comp Engg.",
// looping from i = 1 to 5 IF : "Info Tech",
for (let i = 1; i <= n; i++) { EJ : "Electronics"
console.log(`I love JavaScript.`); }
} // using for...in
for ( var i in code) {
var c= code[i];
// display the values
document.write(i+"="+c+"<br>");
}
</script>
(b) Write a javascript function that accepts a string as a parameter and find the
length of the string.
Code:
<html>
<body>
<p id="demo"></p>
<script>
function len(text)
{
return (text.length);
}
document.getElementById("demo").innerHTML = "length of string="+len("Information");
</script>
</body>
</html>

Output:

(c) Write a javascript program to validate email ID of the user using regular
expression.
Code:
<html>
<head>
<title>JavaScript Regular expression to valid an email address</title>
</head>
<body>
<script>
function valid_email(str)
{
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(mailformat.test(str))
{
alert("Valid email address!");
}
else
{
alert("You have entered an invalid email address!");
}
}
valid_email('yogita.khandagale@gmail.com');
</script>
</body>
</html>

(d) Write a javascript program to design HTML page with books information in
tabular format, use rollovers to display the discount information.
<html>
<head>
<title>
table rollovers</title>
<script>
function open_new_window(clrname)
{
if(clrname==1)
{
document.clr.src="c.jpg";
mwin=window.open('','myadwin','height=50,width=50,left=500,top=200');
mwin.document.write("Discount is 50%");
}
if(clrname==2)
{
document.clr.src="java.jpg";
mwin=window.open('','myadwin','height=50,width=50,left=500,top=200');
mwin.document.write("Discount is 40%");
}

if(clrname==3)
{
document.clr.src="p.jpg";
mwin=window.open('','myadwin','height=100,width=150,left=500,top=200');
mwin.document.write("Discount is 20%");
}
}
</script>
</head>
<body>
<table border="1" width="100%">
<tbody>
<tr>
<td width="50%">
<a><img height="500" src="c.jpg" width="400" name="clr"></td>
<td><H2>
<a onmouseover="open_new_window(1)" onmouseout="mwin.close()">
<b><u>Programming in C</u></b></a>
<br><br>
<a onmouseover="open_new_window(2)" onmouseout="mwin.close()">
<b><u>Java</u></b></a>
<br><br>
<a onmouseover="open_new_window(3)" onmouseout="mwin.close()">
<b><u>Python</u></b></a>
</H2>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Output:

(e) List ways of protecting your webpage and describe any one of them.
There is nothing secret about your web page. Anyone with a little computer knowledge
can use a few mouse clicks to display your HTML code, including your JavaScript, on the
screen.

Following are the ways to protect web pages:


1) Hiding Your Code by disabling Right Mouse Click:
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.
<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.

For example, this can be useful when:

• Clicking on a "Submit" button, prevent it from submitting a form


• Clicking on a link, prevent the link from following the URL

2) 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 file 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 external .js file,
but you won't see the source code for the JavaScript.

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);
}

3) Concealing Your E-mail Address


• To conceal an e-mail address, you need to create strings that contain part of the
e-mail address and then build a JavaScript that assembles those strings into the e-
mail address, which is then written to the web page.
• The following example illustrates one of many ways to conceal an e-mail address.
• It also shows you how to write the subject line of the e-mail. We begin by creating
four strings:
• The first string contains the addressee and the domain along with symbols
&, *, and _ (underscore) to confuse the bot.
• The second and third strings contain portions of the mailto: attribute
name. Remember that the bot is likely looking for mailto:
• The fourth string contains the subject line. As you'll recall from your
HTML training, you can generate the TO, CC, BCC, subject, and body
of an e-mail from within a web page.
• You then use these four strings to build the e-mail address. This process starts by
using the replace() method of the string object to replace the & with the @ sign
and the * with a period (.). The underscores are replaced with nothing, which is the
same as simply removing the underscores from the string.

<html>
<head>
<title>Conceal Email Address</title>
<script>

function CreateEmailAddress()
{
var x = 'abcxyz*c_o_m'
var y = 'mai'
var z = 'lto'
var s = '?subject=Customer Inquiry'
x = x.replace('&','@')
x = x.replace('*','.')
x = x.replace('_','')
x = x.replace('_','')
var b = y + z +':'+ x + s
window.location=b;
}

</script>
</head>
<body>
<input type="button" value="send" onclick="CreateEmailAddress()">
</body>
</html>

5. Attempt any TWO of the following : 4*3=12


(a) Write a javascript to checks whether a passed string is palindrome or not.

<script>
// program to check if the string is palindrome or not
function checkPalindrome(string)
{
// convert string to an array
const arrayValues = string.split('');
// reverse the array values
const reverseArrayValues = arrayValues.reverse();
// convert array to string
const reverseString = reverseArrayValues.join('');

if(string == reverseString) {
document.write('It is a palindrome');
}
else {
document.write('It is not a palindrome');
}
}
//take input
const string = prompt('Enter a string: ');
checkPalindrome(string);
</script>

b) Develop javascript to convert the given character to unicode and vice-versa.


<script>
var x="HeLLO";
document.writeln(x.charCodeAt(3));
document.writeln("<br>"+x.charCodeAt(1));
document.writeln("<br>"+x.charCodeAt(4));
document.writeln("<br>");
var res = String.fromCharCode(72, 69, 76, 76, 79);
document.write(res);
</script>

Output:

c) Write a javascript program to create a silde show with the group of six images,
also simulate the next and previous transition between slides in your javascript.

<html>
<title>slideshow</title>
<body>
<h2 class="w3-center">Manual Slideshow</h2>
<div class="w3">
<img class="mySlides" src="1.jpg" style="width:50%">
<img class="mySlides" src="2.jpg" style="width:50%">
<img class="mySlides" src="3.jpg" style="width:50%">
<img class="mySlides" src="4.jpg" style="width:50%">
<img class="mySlides" src="5jpg" style="width:50%">
<img class="mySlides" src="6.jpg" style="width:50%">

<button class="aa" onclick="plusDivs(-1)">&#10094;Back</button>


<button class="bb" onclick="plusDivs(1)">&#10095;Forward</button>
</div>

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n)
{
showDivs(slideIndex += n);
}
function showDivs(n)
{
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length)
{
slideIndex = 1
}

if (n < 1)
{
slideIndex = x.length
}
for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
</body>
</html>

6. Attempt any TWO of the following : 12


(a) Write a javascript to open a new window and the new window is having two
frames. One frame containing buthon as “click here !”, and after clicking this
button an image should open in the second frame of that child window.
Code:
f.html
<html>
<head>
<title>Create a Frame</title>
</head>
<frameset rows="60%,40%">
<frame src="b.html" name="a" />
<frame src="im.html" name="b" />
</frameset>
</frameset>
</html>

b.html
<html>
<head>
<title>Web Page 1</title>
</head>
<body>
<form action="" method="post">
<p><a href="j.png" target="b">
<input name="WebPage1" value="Click here!" type="button">
</a></p>
</body>
</html>

im.html
<html>
<head>
<title>Web Page 1</title>
</head>
<body>
<img src="i.png">
</body>
</html>

Output:

(b) Write a javascript to create option list containing list of images and then
display images in new window as per selection.
Code:
<html>
<body>
<label for="contries">Choose a Country:</label>
<select name="contries" id="contries" class="select" onchange="changecontry()">
<option value="india">India</option>
<option value="japan">Japan</option>
<option value="usa">USA</option>
</select>

<script>
changecontry= () => {
var contries = document.getElementById("contries").value;
switch(contries)
{
case "india":
var myWindow=window.open("i.png","MsgWindow", "width=200,height=100");
break;
case "japan":
var myWindow=window.open("j.png","MsgWindow", "width=200,height=100");
break;
case "usa":
var myWindow=window.open("u.png","MsgWindow",
"width=200,height=100");
break;
default:
/*document.getElementById("city-name").innerHTML = "Nill";
document.getElementById("city-description").innerHTML = "Nill";
document.getElementById("city-image").src = "";*/
break;
}
}</script>
</body>
</html>
Output:
(c) Write a javascript function to generate Fibonacci series till user defined limit.
Code:
<script>
function fibonacci(num)
{
var x = 0;
var y = 1;
var z;
var i = 0;
document.write(x);
document.write("<br>"+y);
for (i = 2; i < num; i++)
{
z = x + y;
x = y;
y = z;
document.write("<br>"+y);
}
}
var num = parseInt(prompt('Enter the number of terms: '));
answer = fibonacci(num);
</script>

Output:

You might also like