Scribd
Upload
105 views

CSS Model Answers (Sample Question Paper)

The document discusses a question paper for a semester 5 course on client side scripting language. It contains 3 questions with subparts asking to write JavaScript code, explain concepts, and differentiate methods. The questions test knowledge of JavaScript syntax, objects, arrays, functions and programming concepts.

Uploaded by

Tanishka Patil
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
105 views

CSS Model Answers (Sample Question Paper)

The document discusses a question paper for a semester 5 course on client side scripting language. It contains 3 questions with subparts asking to write JavaScript code, explain concepts, and differentiate methods. The questions test knowledge of JavaScript syntax, objects, arrays, functions and programming concepts.

Uploaded by

Tanishka Patil
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

Scheme – I

Question Paper model answers


Program Name : Diploma in Engineeering Group
Program Code : CO / CM / CW / IF
Semester : Fifth
Course Title : Client Side Scripting Language (Elective)
Marks : 70 Time: 3 Hrs.
Instructions:
(1) All questions are compulsory.
(2) Illustrate your answers with neat sketches wherever necessary.
(3) Figures to the right indicate full marks.
(4) Assume suitable data if necessary.
(5) Preferably, write the answers in sequential order.

Q.1) Attempt any FIVE of the following. 10 Marks


a) State the use of dot syntax in JavaScript with the help of suitable example.
Answer: Dot syntax is the simplest form of accessing an object's property or
method in JavaScript. It is a shorthand for referencing object properties or
methods.
Example:
// Accessing a property of an object
let user = {
name: 'John',
age: 28
};

Aditi Gharat
console.log(user.name); // Output: John
// Calling a method of an object
let user = {
name: 'John',
age: 28,
sayHi() {
console.log(`Hi, my name is ${this.name}`);
}
};
user.sayHi(); // Output: Hi, my name is John

b) List and explain Logical operators in JavaScript.


Answer:
A logical operator is an operator that is used to perform logical operations on two
boolean expressions. The following are the logical operators in JavaScript:

1. && (AND): The && operator is used to evaluate if both expressions are true.
The expression will only return true if both expressions are true.

2. || (OR): The || operator is used to evaluate if either expression is true. The


expression will return true if either expression is true.

3. ! (NOT): The ! operator is used to evaluate if an expression is false. The


expression will return true if the expression is false.

Aditi Gharat
c) Write a JavaScript that identifies a running browser.
Answer:
<html>
<body>
<script >
// Get the user agent string
var userAgentString = navigator.userAgent;

// Detect Chrome
if (userAgentString.indexOf("Chrome") > -1) {
alert("You are using Chrome!");
}

// Detect Firefox
else if (userAgentString.indexOf("Firefox") > -1) {
alert("You are using Firefox!");
}

// Detect Safari
else if (userAgentString.indexOf("Safari") > -1) {
alert("You are using Safari!");
}

// Detect Internet Explorer


else if (userAgentString.indexOf("MSIE") > -1) {
alert("You are using Internet Explorer!");
}

// Detect Edge
else if (userAgentString.indexOf("Edge") > -1) {
alert("You are using Edge!");
}

// Detect Opera

Aditi Gharat
else if (userAgentString.indexOf("Opera") > -1) {
alert("You are using Opera!");
}

// Unknown
else {
alert("We could not detect which browser you are using!");
}

</script>
</body>
</html>

d) Write a JavaScript that initializes an array called “Fruits” with names of five
fruits. The script then displays the array in a message box.
Answer:
<html>
<head>
<script type="text/javascript">
var Fruits = ["Apple", "Banana", "Orange", "Kiwi", "Strawberry"];
alert("Fruits: " + Fruits);
</script>
</head>
</html>

Aditi Gharat
e) Give syntax of and explain the use of “with” statement/clause in JavaScript
using suitable example.
Answer:
Syntax:

with (object) {
// code
}

The 'with' statement is used to provide a shorthand to access methods and


properties of an object. It avoids the use of the object's name in the code, which
can make the code more readable and maintainable.

Example:

var person = {
name: "John Doe",
age: 25
};

with (person) {
console.log(name + " is " + age + " years old.");
}

// Output: "John Doe is 25 years old."

f) Enlist and explain the use of any two Intrinsic JavaScript functions.
Answer:
Intrinsic functions are built-in functions that are part of the JavaScript language,
and are available to all JavaScript programs. They are used to perform common
tasks such as string manipulation, mathematical calculations, and other
operations.

Aditi Gharat
1) parseInt() :- The parseInt() function is used to convert a string into an integer
value. It takes a string as an argument and returns an integer if the string is valid,
otherwise it returns NaN (not a number). This function is useful when working
with numbers that are stored as strings in variables.

2) Math.round() :- The Math.round() function is used to round a number to the


nearest integer. It takes a number as an argument and returns the rounded
number. This function is useful for rounding numbers to the nearest whole
number or decimal place.

g) State and explain what is a session cookie ?


Answer:
A session cookie is a type of cookie that is stored in a user's browser for a single
session or visit. It is used to store information about the user's interactions and
activity during the session. Session cookies are deleted when the browser is
closed or the user logs out.
Session cookies are typically used to:
1. Store session-specific information such as a shopping cart, login credentials, or
user preferences.
2. Track user activity on a website, such as pages visited or time spent on a page.
3. Remember user choices, such as language or font size preferences.
4. Provide security features, such as allowing users to remain logged in for a
certain amount of time.
5. Provide a better user experience, such as by auto-filling form fields.

Aditi Gharat
Q.2) Attempt any THREE of the following. 12 Marks
a) Write syntax of and explain prompt method in JavaScript with the help of
suitable example.
Answer:
Syntax:
window.prompt( message, default);
Example:
<html>
<head>
<script type="text/javascript">
function promptUser(){
var userName = window.prompt("Please enter your name", "Harry
Potter");
document.write("Welcome " + userName);
}
</script>
</head>
<body>
<input type="button" onclick="promptUser()" value="Prompt Box" />
</body>
</html>
Explanation:
The prompt() method in JavaScript displays a dialog box that prompts the user for
input. It takes two parameters; the message to be displayed, and a default value.
In the above example, when the user clicks on the “Prompt Box” button, the
window.prompt method is called which displays a dialog box asking the user to

Aditi Gharat
enter their name. The message displayed is "Please enter your name" and the
default value is "Harry Potter". The user can enter any value, which is then stored
in the userName variable.

b) Write a JavaScript program which compute, the average marks of the


following students Then, this average is used to determine the corresponding
grade.
Student Marks
Name
Advait 80
Anay 77
Manyata 88
Saanvi 95
Saachi 68
The grades are computed as follows :
Range Grade
<60 F
<70 D
<80 C
<90 B
<100 A

Answer:
<html>
<body>
<script>
var student = ["Advait", "Anay", "Manyata", "Saanvi", "Saachi"];

var marks = [80, 77, 88, 95, 68];

Aditi Gharat
var total = 0;
for(var i=0; i < marks.length; i++) {
total += marks[i];
}

var avg = total/marks.length;

document.write("Average marks = " + avg + "<br>");

if ( avg < 60) {


document.write("Grade: F");
}
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 {
document.write("Grade: A");
}
</script>
</body>
</html>

Aditi Gharat
c) Write a JavaScript that displays all properties of window object. Explain the
code.
Answer:

<html>
<head>
<script type="text/javascript">
var prop;
for (prop in window) {
document.write(prop + " : " + window[prop] + "<br>");
}
</script>
</head>
<body>
</body>
</html>

Explanation: This JavaScript code will loop through all the properties of the
window object and display them on the page. It starts by declaring the variable
prop. Then, it loops through all the properties of the window object. For each
property, it will write the property name and the value of the property on the
page.

d) Write a JavaScript function that checks whether a passed string is palindrome


or not.
Answer:
<html>

<body>

<script>
function isPalindrome(str) {

Aditi Gharat
var reverseString = str.split('').reverse().join('');
if (reverseString === str) {
return true;
} else {
return false;
}
}
var inputString = prompt("Please enter a string to check if it is palindrome or
not");
if (isPalindrome(inputString)) {
alert("The entered string is a palindrome!");
} else {
alert("The entered string is not a palindrome!");
}
</script>

</body>

</html>

Q.3) Attempt any THREE of the following. 12 Marks


a) Differentiate between concat() and join() methods of array object.
Answer:
concat() join()
1. The concat() method is used to 1.The join() method is used to join
join two or more arrays into one all the elements of an array into a
array. string.
2. It does not change the existing 2. It does not change the existing
array, it returns a new array. array, it returns a new string.
3. Both methods are used to 3. Both methods are used to
combine elements of an array, but combine elements of an array,
the concat() method creates a while the join() method creates a
new array string.

Aditi Gharat
4. The concat() method does not 4. The join() method takes an
take any argument and returns a optional argument which is the
new array with the elements of the separator between the elements
original array combined. of the array.
5.Eg: 5.Eg:
var str = cars.concat() var str = cars.join(' ')
The value of str is 'BMW, Audi, The value of str in this case is 'BMW
Maruti' Audi Maruti'
b) Write a JavaScript function to count the number of vowels in a given string.
Answer:
<html>
<head>
<title>Vowel Counter</title>
<script>
function vowel_count(str) {
let count = 0;
const vowels = ["a", "e", "i", "o", "u"];

for (let i = 0; i < str.length; i++) {


if (vowels.includes(str[i].toLowerCase())) {
count++;
}
}
return count;
}
</script>
</head>
<body>
<h2>Vowel Counter</h2>
<p>Enter a string to see how many vowels it contains:</p>
<input type="text" name="string" id="string">
<button
onclick="alert(vowel_count(document.getElementById('string').value))">Count
Vowels</button>

Aditi Gharat
</body>
</html>

c) Write a JavaScript that find and displays number of duplicate values in an


array.
Answer:
<html>
<head>
<title>Find Duplicates</title>
</head>
<body>
<script type="text/javascript">
function findDuplicates(arr) {
let duplicates = {};
arr.forEach(function(item) {
if (duplicates.hasOwnProperty(item)) {
duplicates[item]++;
} else {
duplicates[item] = 1;
}
});
return duplicates;
}
let arr = [1, 2, 3, 2, 4, 5, 6, 2, 7, 8, 9, 2];
let result = findDuplicates(arr);
document.write("Number of Duplicates = " + result[2]);
</script>
</body>
</html>

Aditi Gharat
d) Write a function that prompts the user for a color and uses what they select
to set the background color of the new webpage opened .
Answer:
<html>
<head>
<title>Change Background Color</title>
<script type="text/javascript">
function setBackground() {
var color = prompt("Please enter a background color","");
if (color != null) {
document.body.style.background = color;
}
}
</script>
</head>

<body>
<button onclick="setBackground()">Change Background Color</button>
</body>
</html>

Aditi Gharat
Q.4) Attempt any THREE of the following. 12 Marks
a) State what is a regular expression? Explain its meaning with the help of a
suitable example.
Answer:
A regular expression is a sequence of characters that define a search pattern. It is
mainly used for string pattern matching. Regular expressions are very powerful
and can be used to perform a wide variety of string manipulations.

For example, the following HTML code counts the number of words in a given
sentence:

<html>
<head>
<script>
function wordCount() {
// Get sentence from text area
let sentence = document.getElementById("input").value;

// Create a regular expression to match any word


let regex = /\w+/g;

// Get all the words in the sentence


let words = sentence.match(regex);

// Show the word count


alert(words.length);
}
</script>
</head>
<body>
<textarea id="input" rows="4" cols="50"></textarea>
<br>
<button onclick="wordCount()">Word Count</button>

Aditi Gharat
</body>
</html>

In the above example, the regex /\w+/g is used to create a search pattern that
looks for any word in the given sentence. The words are then counted and
displayed as an alert.

b) Write a webpage that accepts Username and adharcard as input texts. When
the user enters adhaarcard number ,the JavaScript validates card number and
diplays whether card number is valid or not. (Assume valid adhaar card format
to be nnnn.nnnn.nnnn or nnnn-nnnn-nnnn).
Answer:
<!DOCTYPE html>
<html>
<head>
<title>Adhaar Card Validation</title>
<script>
function validateForm() {
var adhaarCard = document.forms["myForm"]["adhaarCard"].value;
if (adhaarCard.length != 14) {
alert("Adhaar Card Number Length should be 14");
return false;
}
var regex = /^\d{4}\-\d{4}\-\d{4}$/;
if (regex.test(adhaarCard) == false) {
alert("Adhaar Card Number should be in format nnnn.nnnn.nnnn or
nnnn-nnnn-nnnn");
return false;
}
}
</script>
</head>
<body>

Aditi Gharat
<form name="myForm" action="" onsubmit="return validateForm()"
method="post">
<div>
<label>Username: </label>
<input type="text" name="username">
</div>
<div>
<label>Adhaar Card Number: </label>
<input type="text" name="adhaarCard">
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>

c) Write the syntax of and explain use of following methods of JavaScript Timing
Event.
a. setTimeout()
b. setInterval()
Answer:
a. setTimeout():
The setTimeout() method calls a function or evaluates an expression after a
specified number of milliseconds.
Syntax:
setTimeout(function, milliseconds, param1, param2, ...)
Example:
setTimeout(function(){ alert("Hello") }, 3000);

Aditi Gharat
b. setInterval():
The setInterval() method calls a function or evaluates an expression at specified
intervals (in milliseconds).
Syntax:
setInterval(function, milliseconds, param1, param2, ...)
Example:
setInterval(function(){ alert("Hello") }, 3000);

d) Develop JavaScript to convert the given character to Unicode and vice versa.
Answer:
<html>
<head>
<script type="text/javascript">
function charToUnicode()
{
var text = document.getElementById("text").value;
var result="";
for(var i=0; i<text.length; i++)
{
result += "\\u" + text.charCodeAt(i).toString(16);
}
document.getElementById("result").value=result;
}

function unicodeToChar()
{
var code = document.getElementById("code").value;
var result = "";
for(var i=0; i<code.length; i+=4)
{
result += String.fromCharCode(parseInt(code.substr(i, 4), 16));

Aditi Gharat
}
document.getElementById("result2").value=result;
}
</script>
</head>
<body>
<h1>Character to Unicode Converter</h1>
<input type="text" id="text" />
<input type="button" value="Convert" onclick="charToUnicode()" />
<input type="text" id="result" />
<h1>Unicode to Character Converter</h1>
<input type="text" id="code" />
<input type="button" value="Convert" onclick="unicodeToChar()" />
<input type="text" id="result2" />
</body>
</html>

e) List ways of Protecting your webpage and describe any one of them.
Answer:
Ways to Protect a Webpage:
1. Use Secure Passwords: Utilizing strong and secure passwords is one of the most
effective ways to protect a webpage. Passwords should be complex and contain a
combination of upper and lowercase letters, numbers, and special characters.
2. Implement Two-Factor Authentication: Two-factor authentication (2FA) is a
security protocol that requires users to provide two pieces of authentication
information to access a particular resource. This can include a combination of a
username and password, as well as something unique to the user, such as a one-
time PIN.
3. Utilize SSL Encryption: SSL (Secure Socket Layer) is an encryption protocol that
provides secure communication between two devices or networks. It encrypts

Aditi Gharat
data that is sent over the network, so even if it is intercepted, the data cannot be
read.
4. Use Firewalls: A firewall is a system that prevents unauthorized access to or
from a private network. It monitors incoming and outgoing network traffic and
blocks suspicious activity or malicious traffic.
5. Monitor Access Logs: Access logs are a record of all the times someone has
accessed a webpage. By monitoring access logs, administrators can quickly spot
any suspicious activity and take appropriate action.

Example:
Using Secure Passwords: Secure passwords are an important part of protecting a
webpage. Passwords should be complex and contain a combination of upper and
lowercase letters, numbers, and special characters. It is important to not use the
same password for multiple accounts and to change passwords periodically.
Additionally, it is recommended to use a password manager to store passwords
securely and make them easier to remember.

Aditi Gharat
Q.5) Attempt any TWO of the following. 12 Marks
a) Write HTML Script that displays textboxes for accepting Name, middlename,
Surname of the user and a Submit button. Write proper JavaScript such that
when the user clicks on submit button
i) all texboxes must get disabled and change the color to “RED”. and with
respective labels.
ii) Constructs the mailID as <name>.<surname>@msbte.com and displays mailID
as message. (Ex. If user enters Rajni as name and Pathak as surname mailID will
be constructed as [email protected]) .
Answer:
<html>
<head>
<script>
function Submit(){
document.getElementById("name").disabled = "true";
document.getElementById("middlename").disabled = "true";
document.getElementById("surname").disabled = "true";
document.getElementById("name").style.backgroundColor="red";
document.getElementById("middlename").style.backgroundColor="red";
document.getElementById("surname").style.backgroundColor="red";

var name = document.getElementById("name").value;


var middlename = document.getElementById("middlename").value;
var surname = document.getElementById("surname").value;

var mailID = name+ surname + "@msbte.com";

alert("MailID : " + mailID);


}
</script>
</head>
<body>

Aditi Gharat
<form>
<label>Name</label><input type="text" id="name">
<br>
<label>Middle Name</label><input type="text" id="middlename">
<br>
<label>Surname</label><input type="text" id="surname">
<br>
<input type="button" value="Submit" onclick="Submit()">
</form>
</body>
</html>

b) Write a webpage that diplays 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.
Answer:
<html>
<head>
<title>Form for Username and Password</title>
</head>
<body>
<form>
Username: <input type="text" name="username" id="username" />
<br />
Password: <input type="password" name="password" id="password" />
<br />
<input type="submit" value="Submit" />
</form>

<script type="text/javascript">
function storeCookie(){
var username = document.getElementById("username").value;

Aditi Gharat
var password = document.getElementById("password").value;
var expDate = new Date();
expDate.setTime(expDate.getTime() + (1 * 24 * 60 * 60 * 1000));
var expires = "expires="+ expDate.toUTCString();
document.cookie = "username=" + username + "; " + expires;
document.cookie = "password=" + password + "; " + expires;
}

document.getElementById("password").onchange = storeCookie;
</script>

</body>
</html>

c) Write a script for creating following frame structure :


FRAME1

FRAME2 FRAME3

 FRUITS
 FLOWERS
 CITIES

Fruits, Flowers and Cities are links to the webpage fruits.html, flowers.html,
cities.html respectively. When these links are clicked corresponding data
appears in “FRAME3”.
Answer:
<html>
<head>
<title>Frame Demo</title>
</head>
<body>
<table border="1">

Aditi Gharat
<tr>
<td align="center" colspan="2">
FRAME 1
</td>
</tr>
<tr>
<td>
FRAME 2
<ul>
<li>
<a href="fruits.html" target="mainframe">FRUITS</a>
</li>
<li>
<a href="flowers.html" target="mainframe">FLOWERS</a>
</li>
<li>
<a href="cities.html" target="mainframe">CITIES</a>
</li>
</ul>
</td>
<td>
FRAME 3<BR>
<iframe name="mainframe"></iframe>
</td>
</tr>
</table>
</body>
</html>

Aditi Gharat
Q.6) Attempt any TWO of the following. 12 Marks

a) Write HTML Script that displays dropdownlist containing options NewDelhi,


Mumbai, Bangalore. Write proper JavaScript such that when the user selects
any options corresponding description of about 20 words and image of the city
appear in table which appears below on the same page.
Answer:
<!DOCTYPE html>
<html>
<head>
<script>
function showDescription(cityName) {
if (cityName == "NewDelhi") {
document.getElementById("cityDescription").innerHTML = 'New Delhi is the
capital of India and is the second most populous city in India. It is one of the
oldest cities in the world and is home to a number of landmarks including the
Rashtrapati Bhavan, Parliament House, India Gate and more.';
document.getElementById("cityImage").src = "newDelhi.jpg";
} else if (cityName == "Mumbai") {
document.getElementById("cityDescription").innerHTML = 'Mumbai is the most
populous city in India and is the financial and entertainment capital of the
country. It is home to some of India’s most iconic landmarks such as the Gateway
of India, Marine Drive, Haji Ali Dargah, and more.';
document.getElementById("cityImage").src = "mumbai.jpg";
}
else if (cityName == "Bangalore") {
document.getElementById("cityDescription").innerHTML = 'Bangalore is the
capital of the Indian state of Karnataka. It is known as the "Garden City of India"
due to its many gardens and parks. Bangalore is also home to a number of IT
companies and is referred to as the "Silicon Valley of India".';
document.getElementById("cityImage").src = "bangalore.jpg";
}
}
</script>

Aditi Gharat
</head>
<body>

<h1>Select a City</h1>

<select onchange="showDescription(this.value)">
<option value="NewDelhi">New Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Bangalore">Bangalore</option>
</select>

<br><br>

<table>
<tr>
<td>Description:</td>
<td id="cityDescription"></td>
</tr>
<tr>
<td>Image:</td>
<td><img id="cityImage" width="200" height="200"></td>
</tr>
</table>

</body>
</html>

b) Develop a JavaScript Program to Create Rotating Banner Ads with URL Links.
Answer:
<html>
<head>
<script>

var ad_images = new Array("banner1.jpg", "banner2.jpg", "banner3.jpg");

Aditi Gharat
var thisAd = 0;

function rotate(){
if(thisAd == ad_images.length-1){
thisAd = 0;
}else {
thisAd++;
}
document.getElementById("adBanner").src=ad_images[thisAd];
}

window.setInterval(rotate, 3000);

</script>
</head>
<body>

<h3>Rotating Banner Ads with URL Links</h3>

<a href="http://www.example1.com" target="_blank">


<img id="adBanner" src="banner1.jpg" width="400px" height="200px" />
</a>

</body>
</html>

Aditi Gharat
c) Create a slideshow with the group of four images, also simulate the next and
previous transition between slides in your JavaScript.
Answer:
<html>
<head>
<script>
pics = new Array('1.jpg' , '2.jpg' , '3.jpg', '4.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>

Aditi Gharat

You might also like