Scribd
Upload
32 views

Short QB CSS-II 22-23 Solved

This document contains a question bank for a Unit Test in the subject of Client Side Scripting. It includes 10 multiple choice questions from Chapters 4-6 covering topics like location object properties and methods, intrinsic JavaScript functions, cookies, changing window content, validating phone numbers with regular expressions, JavaScript frameworks, accessing elements of other windows, and creating scrolling text and rotating banner ads.

Uploaded by

Faizan Khatik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

Short QB CSS-II 22-23 Solved

This document contains a question bank for a Unit Test in the subject of Client Side Scripting. It includes 10 multiple choice questions from Chapters 4-6 covering topics like location object properties and methods, intrinsic JavaScript functions, cookies, changing window content, validating phone numbers with regular expressions, JavaScript frameworks, accessing elements of other windows, and creating scrolling text and rotating banner ads.

Uploaded by

Faizan Khatik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

SANDIP FOUNDATIONS

SANDIP POLYTECHNIC, NASHIK


Academic Year(2022-23)
Question bank for Unit Test – II

Name of Subject : Client Side Scripting(22519) Sem : ODD

2 Marks Questions
Chapter – IV
1. State any two properties and methods of location object.
Location Object Properties
Property Description

hash Sets or returns the anchor part (#) of a URL

host Sets or returns the hostname and port number of a URL

hostname Sets or returns the hostname of a URL

href Sets or returns the entire URL

origin Returns the protocol, hostname and port number of a URL

pathname Sets or returns the path name of a URL

port Sets or returns the port number of a URL

protocol Sets or returns the protocol of a URL

search Sets or returns the querystring part of a URL

Location Object Methods


Method Description

assign() Loads a new document

reload() Reloads the current document

replace() Replaces the current document with a new one

2.Enlist and explain the use of any two Intrinsic JavaScript functions.
•They are the in built functions which can be used with JavaScript objects
•Various objects supported by JavaScript include document, window, Date , Math , Array, String etc.
•The javascript provides the intrinsic functions for submit or reset button. One can use these
functionalities while submitting the form or resetting the form fields.
• The submit() method of the form object can be used to send the form to the server in exactly same way
as id the user has pressed the submit button.
1. getDate() :- This method returns the day of the month for the specified date
according to local time.
syntax: object.getDate();
2. max():-This method returns the largest of zero or more numbers.
Syntax:-max(obj1,obj2);
<html>
<body>
<form name="myform">
Roll No:<input type="text" name="roll"/>
<br/><br/>
Name :<input type="text" name="name"/>
<br/><br/>
<im src="submit.gif" onclick="javascript.document.forms.myform.submit()"/>
<br/><br/>
</form>
</body>
</html>
<html>
<body>
<form name="myform">
Roll No:<input type="text" name="roll"/>
<br/><br/>
Name :<input type="text" name="name"/>
<br/><br/>
<im src="submit.gif" onclick="javascript.document.forms.myform.submit()"/>
<br/><br/>
</form>
</body>
</html>

3. Differentiate between session cookies and persistent cookies.


a) Session cookies
• Session cookies are stored in memory and never written to disk.
• When the browser close the cookie is permanently lost from this point on.
• If the cookie contains an expiration date, it is considered a persistent cookie.
• On the date specified in the expiration, the cookie will be removed from the disk.

b) Permanent cookies
• Permanent cookies, also known as 'persistent cookies', remain in operation even after the web browser
has closed.
• For example, they can remember login details and passwords so web users don't need to re-enter them
every time they use a site.
• The law states that permanent cookies must be deleted after 12 months.

4. Write a JavaScript program to changing the contents of a window.


• We can change the content of whole window using document.write() function.
• This function is used to override the content of the webpage.
• In above program "<h3><p>After clicking the button:new content</p></h3>" statement is used to
change whole content of the webpage.
<html>
<head>
<script type="text/javascript">
function changecontent()
{
document.write("<h3><p>After clicking the button:new content</p></h3>")
}
</script>
</head>
<body>
<p>Click to change the content of whole window</p>
<input type="button" value="Change Content" onclick="changecontent()"/>
<h3><p id="para">Before Clicking the Button:Old Content</p></h3>
</body>
</html>
Chapter – V
5. State the method to put message in web browser status bar?
• 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.
<html>
<head>
<script type="text/javascript">
window.status="Welcome to status bar.This is static message";
</script>
</head>
<body>
<h3><p>Building static message in status bar.</p></h3>
</body>
</html>
• In the above program window.status="Welcome to status bar.This is static message"; is a static
message.
• The status property of window object is used to display static message in status bar

6. Construct regular expression for validating the phone number in following format
only : (nnn)-nnnn-nnnn OR nnn.nnnn.nnnn

<html>
<head><title>Validation</title>
<script language="javascript">
function validate()
{
var mobile = document.myform.mobile.value;
var regex = /^\d{4}\.\d{4}\.\d{4}$|^\d{4}\-\d{4}\-\d{4}$/g
if(!regex.test(mobile))
{
alert("invalid mobile number");
}
else
{
alert("Valid mobile number");
}
}
</script>
</head>
<body>
<form name="myform" onSubmit="validate()">
Enter username : <input type="text name="user"><br><br>
Enter Mobileno : <input type="text" name="mobile"><br>
<input type="submit">
</form>
</body>
</html>

7. Explain frameworks of JavaScript and its application.


• JS frameworks are JavaScript programming libraries that have pre-written code to use for standard
programming functions and tasks.
• It’s a framework to create websites or web applications around.
• First and foremost, it will increase your productivity. Think of it as a workaround of sorts: you have to
write fewer code manually because there are already pre-written and ready-to-use functions and
patterns.
• Some components of the website do not need to be custom-made, so you can build and expand on pre-
built ones.
• Frameworks are more adaptable for website design and most website developers prefer it. Let’s take a
look at the best JS Frameworks.
a. ReactJs
b. Angular
c. Vue.js
d. jQuery
e. Backbone.js
f. Node.js
g. Ember.js
h. Meteor
i. Polymer
j. Aurelia

8. Write a JavaScript syntax to accessing elements of another child window.


• We can access the elements of child window from another child window.
• The element of child window from another child window. If we want to change the name of button,
then it is possible to change the name of button from another child window.
• In the above program parent.frame2222.document.getElementById("para") us used to access that<p>
tag from first frame.
• We access one frame from another frame using frame name followed by parent property
i.e.parent.frame2222
<html>
<frameset cols="25%,75%">
<frame src="frame1111.html"/>
<frame src="frame2222.html"/>
</frameset>
</html>

<html>
<head>
<script>
function display()
{
parent.frame2222.document.getElementById("para").innerHTML="Element of frame
2 is accessed from frame1";
}
</script>
</head>
<body>
<h4>Frame 1</h4>
<input type="button" name="button1" value="Click" onclick="display()"/>
</body>
</html>

<html>
<body>
<h4>Frame 2</h4>
<p id="para">Frame 2 content</p>
</body>
</html>
Chapter – VI
9. Write a JavaScript program that create a scrolling text on the status line of a window.
We can show a message scrolling in status bar by assigning the spaces and the message to the status bar
in time interval
<html>
<head>
<title>Scrolling Text</title>
<script language="JavaScript">
var scrollPos = 0
var maxScroll = 100
var blanks = ""

function scrollText(text, milliseconds)


{
window.setInterval("displayText('"+text+"')", milliseconds)
}

function displayText(text) {
window.defaultStatus = blanks + text
++scrollPos
blanks += " "
if(scrollPos > maxScroll) {
scrollPos = 0
blanks = ""
}
}
</script>
</head>
<body onload="scrollText('Watch this text scroll!!!', 300)">
<p>Watch the text scroll at the bottom of this window!</p>
</body>
</html>
• In the above program window.setInterval("displayText('"+text+"')",milliseconds) is used to set the
scrolling message.
• The setinterval() function is used to set the message after milliseconds.
• The text will send to the function displaytext() function, this function is called after milliseconds defined
in setinterval() function.
• After calling the displaytext() function, the statement window.defaultStatus=blank + text is executed.
• In which the status of the window is changed by setting the new text to defaultstatus property of
window object

10. Develop a JavaScript Program to Create Rotating Banner Ads with URL Links. OR
Write a JavaScript program to link banner advertisements to different URLs.
<html>
<head>
<script language="Javascript">
MyBanners=new Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
MyBannerLinks=new
Array('http://www.amazon.in/','http://www.flipkart.in/','http://aliexpress.in
/','http://olx.in/')
banner=0
function ShowLinks()
{
document.location.href=MyBannerLinks[banner]
}
function ShowBanners()
{
if (document.images)
{
banner++
if (banner==MyBanners.length)
{
banner=0
}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<a href="javascript: ShowLinks()">
<imgsrc="banner1.jpg" width="900" height="120" name="ChangeBanner"/></a>
</center>
</body>
</html>

11. List ways of protecting your web page and describe any one of them.
Ways of protecting Web Page:
1.Hiding your source code
2.Disabling the right MouseButton
3.Hiding JavaScript
4.Concealing E-mail address.
There are 2 ways of protecting webpage:
1. Disabling right click: The source code of a web page can be viewed by clicking right mouse button on
the webpage. Anyone can see the source code of a webpage which is not safe. We can hide the code
by disabling right mouse click on webpage. Hiding source code is nothing but protecting the source
code by viewing other users.

JavaScript for Disabling right click


<script>
document.addEventListener('contextmenu',event=>event.preventDefault())
</script>

2. Concealing email address:It means hiding email address from unauthorized user. It is possible with the
use of JavaScript.
JavaScript for concealing email address
function (user_email)
{
varavg, splitted, part1, part2;
splitted = user_email.split("@");
part1 = splitted[0];
avg = part1.length / 2;
part1 = part1.substring(0, (part1.length - avg));
part2 = splitted[1];
alert(part1 + "...@" + part2);
};
4 Marks Questions
Chapter – IV
12. Describe, how to read cookie value and write a cookie value. Explain with example.
OR
Write a JavaScript program to create read, update and delete cookies.

• JavaScript can create, read, and delete cookies with the document.cookie property.
• With JavaScript, a cookie can be created like this:
document.cookie = "username=student";
• You can also add an expiry date (in UTC time). By default, the cookie is deleted when the browser is
closed:
document.cookie="username=student;expires=Thu,18 Dec2013 12:00:00 UTC";
• With a path parameter, you can tell the browser what path the cookie belongs to. By default, the cookie
belongs to the current page.
document.cookie = "username=student; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";

Write a JavaScript for creating a cookie for the user name


<html>
<head>
<script type="text/javascript">
function createcookie()
{
with(document.form1)
{
var cookie_value=username.value;
document.cookie="username="+cookie_value;
alert("Cookie is Created");
}
}
</script>
</head>
<body>
<form name="form1">
Enter Name:<input type="text" name="username"/>
<input type="button" value="Create Cookie" onclick="createcookie()"/>
</form>
</body>
</html>

• With JavaScript, cookies can be read like this:


var x = document.cookie;
• document.cookie will return all cookies in one string much like:
cookie1=value; cookie2=value; cookie3=value;

• Read a Cookie with JavaScript


• With JavaScript, you can change a cookie the same way as you create it:
document.cookie = "username=student; expires=Thu, 18 Dec 2013 12:00:00 UTC; path=/";
• The old cookie is overwritten.
• Reading a cookie is just as simple as writing one, because the value of the document.cookie object is the
cookie.
• So you can use this string whenever you want to access the cookie.
• The document.cookie string will keep a list of name=value pairs separated by semicolons,
where name is the name of a cookie and value is its string value.
• You can use strings' split() function to break a string into key and values as follows −
<html>
<head>
<script type = "text/javascript">
function ReadCookie()
{ //assigning the cookie string to the variable
var cookies = document.cookie;
document.write ("All Cookies : " + cookies );
//spliting the cookie pairs in an array
var cookiearray = cookies.split(';');
//getting name=value pair from array
for(var i=0; i<cookiearray.length; i++)
{ //gettting each name=value pair in a variable
var cookie_pair=cookiearray[i];
//getting name and value in an array from and value pair
var name_value_array = cookie_pair.split('=');
//getting name from array
var name=name_value_array[0];
//getting value from array
var value = name_value_array[1];
document.write ("<br>Name is : " + name + " and Value is : " + value);
} }
</script>
</head>
<body>
<p> click the following button to get the cookies:</p>
<input type = "button" value = "Get Cookie" onclick = "ReadCookie()"/>
</body>
</html>

• Deleting a cookie is very simple.


You don't have to specify a cookie value when you delete a cookie.
Just set the expires parameter to a passed date:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
You should define the cookie path to ensure that you delete the right cookie.
Some browsers will not let you delete a cookie if you don't specify the path.
<html>
<head>
<script type = "text/javascript">
function deleteCookie()
{
var cookie_value=username.value;
document.cookie="username="+cookie_value+";expires=Thu, 01 Jan 1970
00:00:01 GMT";
alert("Cookie is deleted")
}
</script>
</head>
<body>
Enter Username:<input type="text" id="username">
<input type = "button" value = "Delete Cookie" onclick = "deleteCookie()">
</body>
</html>
13. Explain open() method of window object with syntax and example.
• The open() method of window object is used to open a new window and loads the document
specified by a given URL.
MyWindow = window.open()

• The open() method returns a reference to the new window, which is assigned to the MyWindow
variable. You then use this reference any time that you want to do something with the window
while your JavaScript runs.
• A window has many properties, such as its width, height, content, and name—to mention a few.
You set these attributes when you create the window by passing them as parameters to the
open() method:
• The first parameter is the full or relative URL of the web page that will appear in the new
window.
• The second parameter is the name that you assign to the window.
• The third parameter is a string that contains the style of the window.

• We want to open a new window that has a height and a width of 250 pixels and displays an
advertisement that is an image. All other styles are turned off.

Syntax:

MyWindow = window.open(‘webpage1.html’, 'myAdWin', 'status=0, toolbar=0, location=0,


menubar=0, directories=0, resizable=0, height=250, width=250')

Example:

<html >
<head>
<title>Open New Window</title>
<script >
function OpenNewWindow() {
MyWindow = window.open(‘webpage1.html’, 'myAdWin', 'status=0, toolbar=0,
location=0,
menubar=0, directories=0, resizable=0, height=250, width=250')
}
</script>
</head>
<body>
<FORM action=" " method="post">
<INPUT name="OpenWindow" value="Open Window" type="button"
onclick="OpenNewWindow()"/>
</FORM>
</body>
</html>

14. Write HTML Script that displays textboxes for accepting Name, middle name, Surname of the user
and a Submit button. Write proper JavaScript such that when the user clicks on submit button
a. all texboxes must get disabled and change the color to “RED”. and with respective labels.
b. Constructs the mailID as <name>.<surname>@msbte.com and displays mail ID as message. (Ex.
If user enters Rajni as name and Pathak as surname mailID will be constructed as
[email protected])
<html>
<head>
<script>
function a()
{
document.getElementById("fname").disabled=true;
document.getElementById("mname").disabled=true;
document.getElementById("sname").disabled=true;
fname.style.backgroundColor = "red";
mname.style.backgroundColor = "red";
sname.style.backgroundColor = "red";
var firstName = fname.value;
var lastName = sname.value;
var email = firstName +"."+ lastName + "@msbte.com";
alert(email);
}
</script>
</head>
<body>
<form id="myform">
Enter First Name:
<input type="text" id="fname"><br>
Enter Middle Name:
<input type="text" id="mname"><br>
Enter Sur Name:
<input type="text" id="sname"><br>
<input type="button" value="Submit"
onclick="a()"><br>
</form>
</body>
</html>

15. Write a webpage that displays a form that contains an input for Username and password. User is
prompted to enter the input and password and password becomes value of the cookie. Write The
JavaScript function for storing the cookie . It gets executed when the password changes.

<html>
<head><title>Cookie</title>
<script language="javascript">
function store()
{
var user = document.form1.user.value
var pass = document.form1.pass.value
var cookieinfo = "username="+user+",password="+pass;
document.cookie = cookieinfo
alert(document.cookie + " Stored");
}
</script>
</head>
<body>
<form name="form1" onsubmit="store()">
Enter username <input type="text" name="user">
Enter password <input type="password" name="pass" onchange="store()">
<input type="submit" value="Submit">
</form>
</body>
</html>
Chapter – V
16. State what is regular expression. Explain its meaning with the help of a suitable example.
• A regular expression is a sequence of characters that forms a search pattern.
• When you search for data in a text, you can use this search pattern to describe what you are
searching for.
• A regular expression can be a single character, or a more complicated pattern.
• Regular expressions can be used to perform all types of text search and text replace operation
Syntax
/pattern/modifiers;
Example
var patt = /w3schools/I
Example explained:
• /w3schools/i is a regular expression.
• w3schools is a pattern (to be used in a search).
• i is a modifier (modifies the search to be case-insensitive).
Modifiers
Modifiers are used to perform case-insensitive and global searches:
Modifier Description

g Perform a global match (find all matches rather than stopping after the first match)

i Perform case-insensitive matching

m Perform multiline matching


<html>
<head>
<script type="text/javascript">
var p=/student/i
function testMatch()
{
var str = textfield.value;
if(p.test(str))
{
alert("The String "+str+" contains the given pattern");
}
else
{
alert("The String "+str+" does not contains the given pattern");
}}
</script>
</head>
<body>
<h3><p>Checking the availability of string</p></h3>
Enter the String<input type="text" id="textfield"/>
<input type="button" value="check" onclick="testMatch();"/>
</body>
</html>

17. Write a JavaScript program to validate email ID of the user using regular expression.
<html>
<body>
<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){
alert("Please enter a valid e-mail address \n atpostion:"+atposition+"\n
dotposition:"+dotposition);
return false;
}
}
</script>
<body>
<form name="myform" method="post"
action="http://www.javatpoint.com/javascriptpages/valid.jsp" onsubmit="return
validateemail();">
Email: <input type="text" name="email"><br/>

<input type="submit" value="register">


</form>
</body>
</html>

18. Explain text rollover with suitable example.


• We can change the appearance of the webpage by using mouse rollover.
• When mouse is moved to any element of webpage, the appearance of that element will be changed.
• If the mouse cursor is moved to an image, then image appearance related effect can take place.
• It is also applicable to button, label, table etc.
• Rollover is used to improve user experience and quality of webpages.

Creating Rollover
• To create rolloer we use ’onmouseover’ event.
• When the mouse pointer is moved onto an element, onto one of its children, the mouseover element is
occurred.
• The onmouseover event is generally used with the ‘onmouseout’.
• When the mouse pointer is moved out of the element, the onmouseout element is occurred.

<html>
<body>
<p
onmouseover=”this.style.color=’red'”
onmouseout=”this.style.color=’blue'”>
Move the mouse over this text to change its color to red. Move the mouse away
to
change the text color to blue.
</p>
</body>
</html>

19. Write a JavaScript program to create rollover effect for three images.
• You create a rollover for text by using the onmouseover attribute of the <A> tag, which is the anchor
tag.
• You assign the action to the onmouseover attribute the same way as you do with an <IMG> tag.
• Let's start a rollover project that displays a flower titles.
• Additional information about a flower can be displayed when the user rolls the mouse cursor over the
flower name.
• In this example, the image of the flower is displayed. However, you could replace the flower image
with an advertisement or another message that you want to show about the flower.
<html>
<body>
<h1>Image Rollover</h1>
<a><IMG src='apples.gif' height="92" width="70" border="0"
onmouseover="src='apples.gif' "
onmouseout="src='redstar.gif' "></a>
<a><IMG src='ND1.png' height="92" width="70" border="0"
onmouseover="src='ND1.png' "
onmouseout="src='M1.png' "></a>
<a><IMG src='M1.png' height="92" width="70" border="0" onmouseover="src='M1.png'
"
onmouseout="src='B.png' "></a>
</body>
</body>
</html>

Chapter – VI
20. Create a slideshow with the group of three images, also simulate next and previous transition
between slides in your Java Script.
<html>
<head>
<script>
pics = new Array('1.jpg' , '2.jpg' , '3.jpg'); count = 0;
function slideshow(status)
{
if (document.images)
{
count = count + status;
if (count > (pics.length - 1))
{
count = 0;
}
if (count < 0)
{
count = pics.length - 1;
}
documet.imag1.src = pics[count];
}
}
</script>
</head>
<body>
<img src="1.jpg" width="200" name="img1">
<br>
<input type="button" value="Next" onclick="slideshow(1)">
<input type="button" value="Back" onclick="slideshow(-1)">
</body>
</html>
21. Write a HTML script which displays 2 radio buttons to the users for fruits and vegetables and 1
option list. When user select fruits radio button option list should present only fruits names to the
user & when user select vegetable radio button option list should present only vegetable names
to the user.
<html>
<head>
<title>HTML Form</title>
<script language="javascript" type="text/javascript"> function
updateList(ElementValue)
{
with(document.forms.myform)
{
if(ElementValue == 1)
{
optionList[0].text="Mango"; optionList[0].value=1;
optionList[1].text="Banana"; optionList[1].value=2;
optionList[2].text="Apple"; optionList[2].value=3;
}
if(ElementValue == 2)
{
optionList[0].text="Potato"; optionList[0].value=1;
optionList[1].text="Cabbage"; optionList[1].value=2;
optionList[2].text="Onion"; optionList[2].value=3;
}
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
<p>
<select name="optionList" size="2">
<option value=1>Mango
<option value=2>Banana
<option value=3>Apple
</select>
<br>
<input type="radio" name="grp1" value=1 checked="true"
onclick="updateList(this.value)">Fruits
<input type="radio" name="grp1" value=2
onclick="updateList(this.value)">Vegetables
<br>
<input name="Reset" value="Reset" type="reset">
</p>
</form>
</body>
</html>
22. Write a JavaScript to create a pull-down menu with three options [Google, MSBTE, Yahoo]
once the user will select one of the options then user will be redirected to that site.
<html>
<head>
<title>HTML Form</title>
<script language="javascript" type="text/javascript"> function getPage(choice)
{
page=choice.options[choice.selectedIndex].value; if(page != "")
{
window.location=page;
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post"> Select Your Favourite Website:
<select name="MenuChoice" onchange="getPage(this)">
<option value="https://www.google.com">Google</option>
<option value="https://www.msbte.org.in">MSBTE</option>
<option value="https://www.yahoo.com">Yahoo</option>
</form>
</body>
</html>

You might also like