Scribd
Upload
9 views

Sept Reexam CSS 2022 (1)

The document contains a series of JavaScript programming questions and answers, covering topics such as objects, operators, date and time display, string manipulation, form controls, session cookies, alert methods, getters and setters, and array methods. It includes code examples and explanations for various JavaScript functionalities like concatenation, sorting, and cookie management. Additionally, it discusses regular expressions, status bars, and slideshows in JavaScript.

Uploaded by

nebuladreamerx
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

Sept Reexam CSS 2022 (1)

The document contains a series of JavaScript programming questions and answers, covering topics such as objects, operators, date and time display, string manipulation, form controls, session cookies, alert methods, getters and setters, and array methods. It includes code examples and explanations for various JavaScript functionalities like concatenation, sorting, and cookie management. Additionally, it discusses regular expressions, status bars, and slideshows in JavaScript.

Uploaded by

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

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