Scribd
Upload
61 views

CSS Solved QB 22-23-1

This document contains solved questions from a question bank for a Client Side Scripting subject test at Sandip Polytechnic in Nashik, India for the 2022-23 academic year. It includes 2 mark and 4 mark questions covering 3 chapters on JavaScript features, arrays, functions, forms and events. Sample code is provided to demonstrate various JavaScript concepts like displaying array elements, calling functions, scope of variables, using array methods like push() and concat(), and form events.

Uploaded by

Faizan Khatik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
61 views

CSS Solved QB 22-23-1

This document contains solved questions from a question bank for a Client Side Scripting subject test at Sandip Polytechnic in Nashik, India for the 2022-23 academic year. It includes 2 mark and 4 mark questions covering 3 chapters on JavaScript features, arrays, functions, forms and events. Sample code is provided to demonstrate various JavaScript concepts like displaying array elements, calling functions, scope of variables, using array methods like push() and concat(), and form events.

Uploaded by

Faizan Khatik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

SANDIP FOUNDATIONS

SANDIP POLYTECHNIC, NASHIK


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

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

2 Marks Questions
Chapter – I
1. Enlist Features of JavaScript.
a. JavaScript is a object-based scripting language.
b. Giving the user more control over the browser.
c. It Handling dates and time.
d. It Detecting the user's browser and OS
e. It is light weighted.
f. Client – Side Technology
g. JavaScript is a scripting language and it is not java.
h. JavaScript is interpreter based scripting language.
i. JavaScript is case sensitive.
j. JavaScript is object based language as it provides predefined objects.
k. Every statement in javascript must be terminated with semicolon (;).
l. Most of the javascript control statements syntax is same as syntax of control statements
in C language.
m. An important part of JavaScript is the ability to create new functions within scripts.
Declare a function in JavaScript using function keyword

2. How to write a JavaScript?


• JavaScript can be implemented using JavaScript statements that are placed within
the <script>... </script> HTML tags in a web page.
• You can place the <script> tags, containing your JavaScript, anywhere within your web
page, but it is normally recommended that you should keep it within the <head> tags.
• The <script> tag alerts the browser program to start interpreting all the text between these
tags as a script.

• A simple syntax of your JavaScript will appear as follows.


<script ...>
JavaScript code
</script>

• The script tag takes two important attributes −


• Language − This attribute specifies what scripting language you are using.
• Type − This attribute is what is now recommended to indicate the scripting language
in use and its value should be set to "text/javascript".
• So your JavaScript segment will look like −
<script language = "javascript" type = "text/javascript">
JavaScript code
</script>
Example :
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>

3. Explain the terms


i) Method ii) Property iii) Event iv) Object Name
 Object Name:
• Object is entity. In JavaScript document, window, forms, fields, buttons are some properly
used objects.
• Each object is identified by ID or name.
• Array of objects or Array of collections can also be created.

 Property:
• It is the value associated with each object.
• Each object has its own set of properties.
• For example, a form object has a title, a width, and a height—to mention a few properties

 Method:
• A method is a process performed by an object when it receives a message.
• For example, a Submit button on a form is an object. Its Submit label and the dimensions of
the button are properties of the button object.
• If you click the Submit button, the form is submitted to the server-side application. In other
words, clicking the Submit button causes the button to process a method.

 Main Event:
• Event causes JavaScript to execute the code.
• In JavaScript when user submits form, clicks button, writes something to text box the
corresponding event gets triggered and execution of appropriate code is done through
Event Handling.

4. List the comparison operators in JavaScript.


Chapter – II
5. Write a javascript that initialize an array called flowers with the names of 3 flowers.
The script then display array elements.
<html>
<head>
<title>Display Array Elements</title>
</head>
<body>
<script>
var flowers = new Array(); flowers[0] = 'Rose '; flowers[1] =
'Mogra';
flowers[2] = 'Hibiscus';
for (var i = 0; i < flowers.length; i++)
{
document.write(flowers[i] + '<br>');
}
</script>
</body>
</html>

6. Write a javascript to call the function from html


<html>
<head>
<title>Calling function from HTML</title>
<script>
function welcome()
{
alert("Welcome students");
}
function goodbye()
{
alert("Bye");
}
</script>
</head>
<body onload="welcome()" onunload="goodbye()">
</body>
</html>

7. Explain scope of variable declared in function with example.


Scope is the block or area of program in which particular variable or argument is possible
The scope of variable is defined using two types of variables – Local scope and Global
scope
Local scope :
a. if a variable is defined inside a function then that variable is a local variable and its
scope is a local scope
b. That also means, that the local variable is accessible only within a function in which it
is defined. It is not accessible outside that function.
Global variable :
a. A variable is called global variable, if it is defined outside t he function.
b. The variable having global scope is accessible by any function.
8. Write a JavaScript code to implement push() method of array.
<html>
<body>
<h2>Changing Array Demo</h2>
<script>
a = new Array();
a[0]=10;
a[1]=20;
a[2]=30;
a[3]=40;
a[4]=50;
document.write("<h4>The elements in array are</h4>")
for(i=0;i<a.length;i++)
document.write(a[i]+" ");
document.write("<h4>Calling the push() method</h4>")
a.push(60);
document.write("<h4>The elements in array are</h4>")
for(i=0;i<a.length;i++)
document.write(a[i]+" ");
</script>
</body>
</html>

9. Write a JavaScript code to implement concat() method of string.


<html>
<body>
<h2>Combining Array Demo</h2>
<script>
a = new Array();
a[0]="Red";
a[1]="Orange";
a[2]="Yellow";
a[3]="Green";
a[4]="Blue";
a[5]="Indigo";
a[4]="Voilet";
document.write("<h3>The concat() method</h3>")
var str2=a.concat();
document.write(str2);
</script>
</body>
</html>

Chapter – III
10. List the various form events.
Event Event
Description
Performed Handler

focus onfocus When the user focuses on an element

submit onsubmit When the user submits the form

blur onblur When the focus is away from a form element


change onchange When the user modifies or changes the value of a form
element

11. Write a javascript code to demonstrate getElementbyId() method.


 The document.getElementById() method returns the element of specified id.
 We can use document.getElementById() method to get value of any field. But we need to
define id for the input field.

<script type="text/javascript">
function getcube()
{
var number=document.getElementById("number").value;
alert(number*number*number);
}
</script>
<form>
Enter No:<input type="text" id="number" name="number"/><br/>
<input type="button" value="cube" onclick="getcube()"/>
</form>

4 Marks Questions
Chapter – I
12. Write a JavaScript code to design a form to accept values for username and
password.
<html>
<body>
<form name="login">
Enter Username<input type="text" name="userid"><br>
Enter Password<input type="password" name="pswrd">
<input type="button" onclick="display()" value="Display">
</form>
<script language="javascript"> function display()
{
document.write("User ID "+ login.userid.value +
"Password : "+login.pswrd.value);
}
</script>
</body>
</html>

13. Explain prompt and confirm method of JavaScript with syntax and example
prompt()
 The prompt () method displays a dialog box that prompts the visitor for input.
 The prompt () method returns the input value if the user clicks "OK". If the user clicks
"cancel" the method returns null.
Syntax:
window.prompt (text, defaultText)
Example:
<html>
<script type="text/javascript">
function msg()
{
var v= prompt("Who are you?");
alert("I am "+v);
}
</script>
<input type="button" value="click" onclick="msg()"/>
</html>

confirm()
 It displays the confirm dialog box. It has message with ok and cancel buttons.
 Returns Boolean indicating which button was pressed

Syntax:
window.confirm("sometext");

Example :
<html>
<script type="text/javascript">
function msg()
{
var v= confirm("Are u sure?"); if(v==true){
alert("ok");
}
else{
alert("cancel");
}
}
</script>
<input type="button" value="delete record" onclick="msg()"/>
</html>

14. Write a JavaScript program which computes average marks of the student and
according to average marks determine the grade
<html>
<head>
<title>Compute the average marks and grade</title>
</head>
<body>
<script>
var students = [['Summit', 80], ['Kalpesh', 77], ['Amit', 88],
['Tejas', 93],['Abhishek', 65]];
var Avgmarks = 0;
for (var i=0; i < students.length; i++)
{
Avgmarks += students[i][1];
}
var avg = (Avgmarks/students.length);
document.write("Average grade: " + (Avgmarks)/students.length);
document.write("<br>");
if (avg < 60)
{
document.write("Grade : E");
}
else if (avg < 70)
{
document.write("Grade : D");
}
else if (avg < 80)
{
document.write("Grade : C");
}
else if (avg < 90)
{
document.write("Grade : B");
}
else if (avg < 100)
{
document.write("Grade : A");
}
</script>
</body>
</html>

15. Explain getter and setter properties in JavaScript

Property getters and setters


 The accessor properties. They are essentially functions that work on
getting and setting a value.
 Accessor properties are represented by “getter” and “setter” methods. In
an object literal they are denoted by get and set.
let obj = {
get propName() {
// getter, the code executed on getting obj.propName
},
set propName(value) {
// setter, the code executed on setting obj.propName = value
}
};
• An object property is a name, a value and a set of attributes. The value may be replaced by
one or two methods, known as setter and a getter.
• When program queries the value of an accessor property, Javascript invoke getter
method(passing no arguments). The retuen value of this method become the value of the
property access expression.
• When program sets the value of an accessor property. Javascript invoke the setter method,
passing the value of right-hand side of assignment. This method is responsible for setting
the property value.
• If property has both getter and a setter method, it is read/write property.
• If property has only a getter method , it is read-only property.
• If property has only a setter method , it is a write-only property.
 getter works when obj.propName is read, the setter – when it is assigned.

<html>
<head>
<title>Functions</title>
<body>
<script language="Javascript">
var myCar =
{
/* Data properties */
defColor: "blue",
defMake: "Toyota",
/* Accessor properties (getters) */
get color()
{
return this.defColor;
},
get make()
{
return this.defMake;
},
/* Accessor properties (setters) */
set color(newColor)
{
this.defColor = newColor;
},
set make(newMake)
{
this.defMake = newMake;
}
};
document.write("Car color:" + myCar.color + " Car Make:
"+myCar.make)
/* Calling the setter accessor properties */
myCar.color = "red";
myCar.make = "Audi";
/* Checking the new values with the getter accessor properties */
document.write("<p>Car color:" + myCar.color); // red
document.write(" Car Make: "+myCar.make); //Audi
</script>
</head>
</body>
</html>

Chapter – II
16. Write the use of charAt() method and indexOf() method with syntax and example.
charAt()
• The charAt() method requires one argument i.e is the index of the character that you
want to copy.

Syntax:
var SingleCharacter = NameOfStringObject.charAt(index);

Example:
var FirstName = 'Bob';
var Character = FirstName.charAt(0); //o/p B

indexOf()
• The indexOf() method returns the index of the character passed to it as an
argument. If the character is not in the string, this method returns –1.
•
Syntax:
var indexValue = string.indexOf('character');
Example:
var FirstName = 'Bob';
var IndexValue = FirstName.indexOf('o'); //o/p index as 1

17. Difference between concat() and join() method of array with example.
concat() join()

Array elements can be combined by using Array elements can be combined by using
concat() method of Array object. join() method of Array object.
The concat() method separates each value The join() method also uses a comma to
with a comma. separate values, but you can specify a
character other than a comma to separate
values.
Eg: Eg:
var str = cars.concat() var str = cars.join(' ')
The value of str is The value of str in this case is
'BMW, Audi, Maruti' 'BMW Audi Maruti'

18. Write a JavaScript that will replace following specified value with another value in the
string String=”I will fail” replace “fail” by “pass”.
<html>
<head>
<body>
<script>
var myStr = ‘I will fail’;
var newStr = myStr.replace(fail, "pass");
document.write(newStr);
</script>
</body>
</head>
</html>

19. Write a JavaScript code to display 5 elements of array in sorted order.


<html>
<body>
<h2>Sorting an Array element</h2>
<script>
a = new Array();
a[0]=10;
a[1]=50;
a[2]=40;
a[3]=20;
a[4]=30;
document.write("The elemnts in the array are<br/>")
for(i=0;i<a.length;i++)
{
document.write(a[i]+" ");
}
document.write("<br/><br/>The array is sorted<br\>");
a.sort();
document.write("<br/>The element in the array are<br\>");
for(i=0;i<a.length;i++)
{
document.write(a[i]+" ");
}
</script>
</body>
</html>
Chapter – III
20. Write a JavaScript to modify the status bar using onmouseover and mouseout with
links.when the user moves his mouse over the link, it will display “MSBTE” in the
status bar. When the user moves his mouse away from the link the status bar will
display nothing.
<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
<a href=" https://msbte.org.in/"
onMouseOver="window.status='MSBTE';return true"
onMouseOut="window.status='';return true">
MSBTE
</a>
</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 list should present
only fruits to the user & when user select vegetables radio button option list should
present only vegetables 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. Describe how to evaluate checkbox selection. Explain with suitable example.
Evaluating Checkbox Selection:
• A checkbox is created by using the input element with the
type=”checkbox” attribute-value pair.
• A checkbox in a form has only two states(checked or un-checked) and is
independent of the state of other checkboxes in the form.
• Check boxes can be grouped together under a common name.
• You can write JavaScript function that evaluates whether or not a check box was
selected and then processes the result according to the needs of your application.
• Following example make use of five checkboxes to provide five options to the user
regarding fruit.

<html>
<head>
<title>HTML Form</title>
<script language="javascript" type="text/javascript">
function selection()
{
var x ="You selected: ";
with(document.forms.myform)
{
if(a.checked == true)
{
x+= a.value+ " ";
}
if(b.checked == true)
{
x+= b.value+ " ";
}
if(o.checked == true)
{
x+= o.value+ " ";
}
if(p.checked == true)
{
x+= p.value+ " ";
}
if(g.checked == true)
{
x+= g.value+ " ";
}
document.write(x);
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
Select Your Favourite Fruits: <br>
<input type="checkbox" name="a" value="Apple">Apple
<input type="checkbox" name="b" value="Banana">Banana
<input type="checkbox" name="o" value="Orange">Orange
<input type="checkbox" name="p" value="Pear">Pear
<input type="checkbox" name="g" value="Grapes">Grapes
<input type="reset" value="Show" onclick="selection()">
</form>
</body>
</html>
</form>
</body>
</html>

You might also like