Scribd
Upload
9 views

solution Sept_Reexam_CSS_2022

Uploaded by

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

solution Sept_Reexam_CSS_2022

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

Summer 2022 Re-Exam CSS

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


(a) Explain i>Object name ii> Property
Object Name:
A JavaScript object is a collection of named values.
These named values are usually referred to as properties of the object.

Property:
A Property is a value or set of values that is the member of an object.

Example:
var person = new Object();
person.firstName = “Hhh";
person.age = 10;

In above example,
Person is an object and firstname and age are properites.

(b) What is operator? Which type of operators are used in Java script.

JavaScript operators are symbols that are used to perform operations on operands.
1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators
7. Dot operator
8. Delete operator
9. typeof operator
10. new opearor
11. Conditional Operator(?:)
12. in operator

(c) Write Java script to display current date and time.


<html>
<body>
<script>
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+' '+time;
document.write(dateTime);
</script>
</body>
</html>

Output:
2023-1-12 14:54:26

d) Write a Java script to changing case of string.


<script>
var text = "Hello World!";
var result = text.toLowerCase();
var res = text.toUpperCase();
document.write(result);
document.write("<br>"+res);
</script>
Output:
hello world!
HELLO WORLD

e) Explain Javascript method to find Unicode of a character.


charCodeAt() • It provides the Unicode value of a character present at the
specified index.
• The index of the first character is 0, the second is 1, ....
• Syntax:
string.charCodeAt(index)
• example:
<script>
var text = "HELLO WORLD";
var c = text.charCodeAt(1);
document.write(c);
document.write("<br>"+text.charCodeAt(7));
document.write("<br>"+text.charCodeAt(8));
</script>
f) Explain following form control/elements with example. Button and checkox
Button:

Defines a clickable button (mostly used with a JavaScript to activate a script) and is created by
using following code:

<form method = “GET” action = “”>


<input type = “button” name = “MyButton” value = “Click” onclick = “msg()”>
<form>

A Button object also represents an HTML <button> element which is specified as follows:

<button name = “btn” value = “MyButton” onclick = “msg()”>

Checkbox:

<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
g) State and explain what is a session cookie.

The session cookie is a server-specific cookie that cannot be passed to any machine other
than the one that generated the cookie. The session cookie allows the browser to re-
identify itself to the single, unique server to which the client had previously authenticated.

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

(a) Explain alert method in Java script with suitable example.

The alert() method displays an alert box with a message and an OK button.

The alert() method is used when you want information to come through to the user.

Syntax:
alert(message)
example:
<html>
<body>
<h1>The Window Object</h1>
<h2>The alert() Method</h2>
<p>Click the button to see line-breaks in an alert box.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
alert("Hello\nHow are you?");
}
</script>
</body>
</html>

(b) Explain getter and setter properties in Java script with suitable example.
Also known as Javascript assessors.
Getters and setters allow you to control how important variables are accessed and
updated in your code.
JavaScript can secure better data quality when using getters and setters.
example: Getters and setters allow you to get and set properties via methods.
<script>
var person = {
firstName: 'Chirag',
lastName: 'Shetty',
get fullName()
{
return this.firstName + ' ' + this.lastName;
},
set fullName (name)
{
var words = name.split(' ');
this.firstName = words[0];
this.firstName = words[0].toUpperCase();
this.lastName = words[1];
}
}
document.write(person.fullName); //Getters and setters allow you to get and set
properties via methods.
document.write("<br>"+"before using set fullname()"+"<br>");
person.fullName = 'Yash Desai'; //Set a property using set
document.writeln(person.firstName); // Yash
document.write(person.lastName); // Desai
</script>
Output:
Chirag Shetty before using set fullname() YASH Desai

(c) Write a Javascript that displays the following properties of Math object.
<script type="text/javascript">
document.write("square root of 16 is =" + Math.sqrt(16) + "<br>");
document.write("floor of 16.877 is=" + Math.floor(16.877) + "<br>");
document.write("ceil of 16.877 is=" + Math.ceil(16.877) + "<br>");
document.write("ceil of 16.241 is=" + Math.ceil(16.241) + "<br>");
document.write("sin of 90 is=" + Math.sin(90));
</script>

Output:
square root of 16 is =4
floor of 16.877 is=16
ceil of 16.877 is=17
ceil of 16.241 is=17
sin of 90 is=0.8939966636005579

d) Write a javascript function that concatenate the two strings.


<script>
function strcon(p1, p2)
{
return p1.concat(p2);
}
document.write(strcon("information","technology"));
</script>

Output:
informationtechnology

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


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

concat() join()
The concat() method concatenates (joins) two or The join() method returns an array as a
more arrays. string.
The concat() method returns a new array,
containing the joined arrays.
The concat() method separates each value with a Any separator can be specified. The
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", "Apple",
const arr2 = ["CM", "AI",4]; "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 program to changing case of string.


<script>
var text = "Hello World!";
var result = text.toLowerCase();
var res = text.toUpperCase();
document.write(result);
document.write("<br>"+res);
</script>
Output:
hello world!
HELLO WORLD

(c) How to add and sort elements in array? Explain with example.
The array.sort() is an inbuilt method in JavaScript which is used to sort the array.
Syntax:
array.sort();
Here array is the set of values which is going to be sorted.
Example:
<script>
var arr1 =["Red", "red", 200,"Blue",100];
document.write("Before sorting arra1=" + arr1);
document.write("<br>After sorting arra1="+ arr1.sort());
</script>
Output:
Before sorting arra1=Red,red,200,Blue,100
After sorting arra1=100,200,Blue,Red,red

Adding elements into an array:


Method1:
The easiest way to add a new element to an array is using the push() method.
The push() method adds new items to the end of an array, and returns the new length.
Syntax:
array.push(item1, item2, ..., itemX);
Example:
var fruits = [ "Banana", "Orange", "Apple", "Mango” ];
fruits.push( "Lemon” ); // adds a new element (Lemon) to fruits

Method 2:
The unshift() method adds one or more elements to the beginning of an array and returns
the new length of the array.
Syntax:
array.unshift(item1, item2, ..., itemX);
Example:
var fruits = [ "Banana", "Orange", "Apple", "Mango” ];
fruits.unshift( "Lemon","Pineapple” );

Method 3:

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

Output:
Banana,Orange,Apple,Mango
Banana,Orange,Apple,Mango,Kiwi
Banana,Orange,Apple,Mango,Kiwi,Chikoo
Method 4:
The splice() method can be used to add new items to an array, and
removes elements from an array.
Syntax:
arr.splice(start_index,removed_elements, list_of_elemnts_to_be_added);
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).
The splice() method can be used to add new items to an array, and
removes elements from an array.
Syntax:
arr.splice(start_index,removed_elements, list_of_elemnts_to_be_added);
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).

Example:
<script>
var fruits = ["Banana", "Watermelon", "Chikoo", "Mango", "Orange", "Apple"];
document.write(fruits+"<br>");
fruits.splice(2,2, "Lemon", "Kiwi");
document.write(fruits+"<br>");
fruits.splice(0,2); //removes first 2 elements from array
document.write(fruits+"<br>");
</script>

Output:
Banana,Watermelon,Chikoo,Mango,Orange,Apple
Banana,Watermelon,Lemon,Kiwi,Orange,Apple
Lemon,Kiwi,Orange,Apple

(d) How to read and write cookie in javascript? Explain with example.
Read a Cookie with JavaScript

With JavaScript, cookies can be read like this:


var x = document.cookie;

Write a Cookie with JavaScript

You can access the cookie like this which will return all the cookies saved for the current
domain.

document.cookie=x;

Example:

<html>
<head>
<script>
function writeCookie()
{
with(document.myform)
{
document.cookie="Name=" + person.value + ";"
alert("Cookie written");
}
}

function readCookie()
{
var x;
if(document.cookie=="")
x="";
else
x=document.cookie;
document.write(x);
}
</script>
</head>
<body>
<form name="myform" action="">
Enter your name:
<input type="text" name="person"><br>
<input type="Reset" value="Set Cookie" type="button" onclick="writeCookie()">
<input type="Reset" value="Get Cookie" type="button" onclick="readCookie()">
</form>
</body>
</html>

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


(a) How to finding non matching characters in regular expression? Explain with suitable
example.
The [^abc] expression is used to find any character NOT between the brackets.
The characters inside the brackets can be any characters or span of characters:

✓ [abcde..] - Any character between the brackets


✓ [A-Z] - Any character from uppercase A to uppercase Z
✓ [a-z] - Any character from lowercase a to lowercase z
✓ [A-z ]- Any character from uppercase A to lowercase z
• Sometimes a JavaScript application prohibits certain characters from appearing within
text entered into a form, such as a hyphen (-); otherwise, the character might inhibit
processing of the form by the CGI program running on the web server.
• You can direct the browser to search for illegal character(s) by specifying the illegal
character(s) within brackets and by placing the caret (^) as the first character in the
bracket.
• Let's see how this works in the following example:
/[^\-]/
• In this case, the browser is asked to determine whether the text does not contain the
hyphen.
• The caret asks the browser to determine whether the following character(s) do not
appear in the text.

Syntax
new RegExp("[^xyz]")
or simply:
/[^xyz]/
Syntax with modifiers
new RegExp("[^xyz]", "g")
or simply:
/\[^xyz]/g

Example:
<html> <script>
function check()
{
var exp=/[^\*]/;
var res=exp.test(document.getElementById("txt1").value);
document.getElementById("demo1").innerHTML=res;
}
</script>
<body>
Enter text:<textarea id="txt1"></textarea>
<input type="button" onclick="check()" value="Check">
<p id="demo1"></p>
</body>
</html>

(b) What is status bar? How to create status bar in Javascript.


The status property of the Window interface was originally intended to set the text in the
status bar at the bottom of the browser window. However, the HTML standard now requires
setting window.status to have no effect on the text displayed in the status bar.
Syntax:

window.status = string;
var value = window.status;

<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
<a href="http://www.vpt.edu.in"
onMouseOver="window.status='Vidyalankar';return true"
onMouseOut="window.status='';return true">
Vidyalankar
</a>
</body>
</html>
Output:
(c) What is slideshow? Explain with example.
A slideshow is similar in concept to a banner advertisement in that a slideshow rotates multiple
images on the web page. However, unlike a banner advertisement, a slideshow gives the visitor
the ability to change the image that's displayed: the visitor can click the Forward button to see
the next image and the Back button.
Example:

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

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

(d) Describe how to replace text using Regular Expression with example.
• you can also use a regular expression to replace portions of the text by using the
replace() method.
• The replace() method requires two parameters: a regular expression and the
• replacement text.

The replace() method searches a string for a specified value, or a regular exp

Syntax
string.replace(searchvalue, newvalue)
Example:
<html>
<script>
function check()
{
var exp=/:/g;
var str=document.getElementById("txt").value;
var res=str.replace(exp,"-");
document.getElementById("demo1").innerHTML=res;
}
</script>
<body>
Enter text:<textarea id="txt"></textarea>
<input type="button" onclick="check()" value="check">
<p id="demo1"></p>
</body>
</html>
Output:

In the above example “:” symbol replace by “-“

(e) What is context menu? How to create it? Explain with example.
When we click the right mouse button on our desktop, a menu-like box appears and this box
is called the context menu. In JavaScript, a context menu event runs when a user tries to open
a context menu. This can be done by clicking the right mouse button.

Example:
<html>
<head>
<style>
div {
background: yellow;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>

<div contextmenu="mymenu">
<p>Right-click inside this box to see the context menu!
<menu type="context" id="mymenu">
<menuitem label="Refresh" onclick="window.location.reload();"
icon="ico_reload.png"></menuitem>
<menu label="Share on...">
<menuitem label="Twitter" icon="ico_twitter.png"
onclick="window.open('//twitter.com/intent/tweet?text=' +
window.location.href);"></menuitem>
<menuitem label="Facebook" icon="ico_facebook.png"
onclick="window.open('//facebook.com/sharer/sharer.php?u=' +
window.location.href);"></menuitem>
</menu>
<menuitem label="Email This Page"
onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>

</div>

<p>This example currently only works in Firefox!</p>

</body>
</html>

Output:

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


(a) Write a HTML script that displays textboxes for accepting emp id, name and
designation. Write proper JavaScript such that when the user clocks the submit button
i) all textboxes change the color to Blue
ii) constructs mail id as <id><name>@yahoo.com and display mail id.

<html>
<body>
<form action=" ">
EmpId: <input type="text" id="eid" onchange="highlightid(this)">
<br><br>
Name: <input type="text" id="name" onchange="highlightname(this)">
<br><br>
Designation: <input type="text" id="des" onchange="highlightdes(this)">
<br><br>
</form>
<p>Click the button to get the details:</p>
<button onclick="myFunction()">Details</button>
<BR>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<script>
function myFunction()
{
var y = document.getElementById("eid").value;
document.getElementById("demo").innerHTML = y;
var x = document.getElementById("name").value;
document.getElementById("demo1").innerHTML = x;
var z = document.getElementById("des").value;
document.getElementById("demo2").innerHTML = z;
var g=y.concat(x);
var k=g.concat("@yahoo.com");
document.getElementById("demo3").innerHTML = k;
}
function highlightid(y)
{
y.style.color="blue";
y.style.backgroundColor="pink";
}
function highlightname(x)
{
x.style.color="blue";
x.style.backgroundColor="pink";
}
function highlightdes(z)
{
z.style.color="blue";
z.style.backgroundColor="pink";
}
</script>
</body>
</html>

Output:

b) Write a JavaScript for moving car using setTimeOut() and clearTimeOut() method.
<html>
<head>
<title>Animation </title>
<script type="text/javascript">
var obj=null;
var animate;
function init()
{
obj=document.getElementById('car');
obj.style.position='relative';
obj.style.left='0px';
}

function start()
{
obj.style.left=parseInt(obj.style.left)+ 10 + 'px';
animate=setTimeout(start,10);
}

function stop()
{
clearTimeout(animate);
obj.style.left='0 px';
}
window.onload=init;
</script>
</head>
<body>
<img id="car" src="car.jpg">

<br><br>
<input value="Start" type="button" onclick="start()"/>

<input value="Stop" type="button" onclick="stop()"/>


</body>
</html>

c) What is frame? How to create? Explain with example.

HTML frames are used to divide your browser window into multiple sections where each
section can load a separate HTML document. A collection of frames in the browser window is
known as a frameset. The window is divided into frames in a similar way the tables are
organized: into rows and columns.

How to create frame?


To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines, how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by
<frame> tag and it defines which HTML document shall open into the frame.
Following is the example to create three horizontal frames −

<html>
<head>
<title>Create a Frame</title>
</head>
<frameset rows="50%,30%,*">
<frame src="webpage1.html" name="topPage" />
<frame src="webpage2.html" name="bottomPage" />
<frame src="webpage3.html" name="bottomPage" />
</frameset>
</html>
Output:

6. Attempt any TWO of the following : 12


(a) Describe how to change option list dynamically with the help of example.

When user will select the fruits radio button, the option list should present only the fruits
names to user and when user will select the vegetable radio button, the option list should
present only the vegetable names to user so that user can select an appropriate element of
interest.

<html>
<body>
<html>
<script type="text/javascript">
function modifyList(x)
{
with(document.forms.myform)
{
if(x ==1)
{
optionList[0].text="Kiwi";
optionList[0].value=1;
optionList[1].text="Pine-Apple ";
optionList[1].value=2;
optionList[2].text="Apple";
optionList[2].value=3;
}

if(x ==2)
{
optionList[0].text="Tomato";
optionList[0].value=1;
optionList[1].text="Onion ";
optionList[1].value=2;
optionList[2].text="Cabbage ";
optionList[2].value=3;
}
}
}

</script>
</head>
<body>
<form name="myform" action=" " method="post">
<select name="optionList" size="3">
<option value=1>Kiwi
<option value=1>Pine-Apple
<option value=1>Apple
</select>
<br>
<input type="radio" name="grp1" value=1 checked="true"
onclick="modifyList(this.value)"> Fruits

<input type="radio" name="grp1" value=2 onclick="modifyList(this.value)"> Vegitables


</form>
</body>
</html>
Output:

(b) Write a javascript to create rotating banner ads with URL links..

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 to create menu using “folding tree menu”.


Code:
<html>
<head>
<style>
ul, #myUL {
list-style-type: none;
}

#myUL {
margin: 0;
padding: 0;
}

.caret {
cursor: pointer;
-webkit-user-select: none; /* Safari 3.1+ */
-moz-user-select: none; /* Firefox 2+ */
-ms-user-select: none; /* IE 10+ */
user-select: none;
}

.caret::before {
content: "\25B6";
color: black;
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>
<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>
Output:

You might also like