Scribd
Upload
14 views

CSS QB Q2 4marks

question bank

Uploaded by

riteshdebadwar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

CSS QB Q2 4marks

question bank

Uploaded by

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

CSS QB Q2 4MARKS

Q1 : Develop a JavaScript Program to Create Rotating Banner Ads with URL Links.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Rotating Banner Ads</title>

</head>
<body>

<div class="banner-container">
<a id="bannerLink" href="#">
<img id="bannerImage" src="" alt="Banner Ad">
</a>
</div>

<script>
var banners = [
{ image: 'https://via.placeholder.com/300x200/FF5733/FFFFFF?text=Ad1', url: 'https://example.com/ad1' },
{ image: 'https://via.placeholder.com/300x200/33FF57/FFFFFF?text=Ad2', url: 'https://example.com/ad2' },
{ image: 'https://via.placeholder.com/300x200/3357FF/FFFFFF?text=Ad3', url: 'https://example.com/ad3' }
];

var currentBanner = 0;

document.getElementById('bannerImage').src = banners[0].image;
document.getElementById('bannerLink').href = banners[0].url;

setInterval(function() {
currentBanner++;
if (currentBanner >= banners.length) {
currentBanner = 0;
}
document.getElementById('bannerImage').src = banners[currentBanner].image;
document.getElementById('bannerLink').href = banners[currentBanner].url;
}, 3000);
</script>

</body>
</html>

Q2 : Create a web page with Frame tag dividing a web page into 2 sections 50% and 50% also show 2 different web pages on the
frames
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frameset Example</title>
</head>
<body>

<frameset cols="50%, 50%">


<frame src="https://www.example.com" />
<frame src="https://www.wikipedia.org" />
</frameset>

</body>
</html>

Q3 : Write a JavaScript program to display information of Browser like: Name of Browser, Version of Browser, Operating system of
running browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Browser Information</title>
</head>
<body>

<script>
var userAgent = navigator.userAgent;
var browserName = navigator.appName;
var browserVersion = navigator.appVersion;
var platform = navigator.platform;

document.write("Browser Name: " + browserName + "<br>");


document.write("Browser Version: " + browserVersion + "<br>");
document.write("Operating System: " + platform + "<br>");
</script>

</body>
</html>

Q4 : Describe text Rollover with the help of example.

A text rollover is a simple effect that changes the appearance of a piece of text when a user hovers their mouse over it. This is
commonly achieved using HTML and JS.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Text Rollover Example</title>
</head>
<body>

<h1 id="rolloverText">Hover over this text to see the rollover effect!</h1>

<script>
var text = document.getElementById('rolloverText');

// Change the color when mouse enters (hover)


text.onmouseover = function() {
text.style.color = 'red';
};

// Revert the color when mouse leaves


text.onmouseout = function() {
text.style.color = 'black';
};
</script>

</body>
</html>

Q5 : Describe regular expression. Explain search () method used in regular expression with suitable example.

Regular Expression (RegEx) :


A regular expression (RegEx) is a sequence of characters that forms a search pattern. It is used for pattern matching within strings
and is commonly employed for searching, validating, or manipulating text.
Regular expressions are used in many programming languages (like JavaScript, Python, etc.) to search for patterns in strings. For
example, you can use a RegEx to check if a string contains only numbers, or if it follows the format of an email address.
Example of Regular Expression:
• /[a-z]/: Matches any lowercase letter from "a" to "z".
• /\d/: Matches any digit (0-9).

search() Method in Regular Expressions


In JavaScript, the search() method is used to search for a match between a string and a regular expression. It returns the index of the
first match, or -1 if no match is found.
Syntax :
string.search(regexp)

Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Regular Expression Search Example</title>
</head>
<body>

<script>
var text = "Hello, welcome to the world of regular expressions!";
var pattern = /world/;
var result = text.search(pattern);

document.write("The word 'world' is found at position: " + result);


</script>

</body>
</html>

Q6 : Describe Quantifiers with the help of example.

Quantifiers in Regular Expressions


Quantifiers are special characters in regular expressions that specify how many times a certain character, group, or pattern must
occur in the string being matched. They are used to control the number of occurrences of the preceding element in the pattern.

Common Quantifiers
1. * (Asterisk): Matches 0 or more occurrences of the preceding element.
o Example: a* matches "", "a", "aa", "aaa", etc.
2. + (Plus): Matches 1 or more occurrences of the preceding element.
o Example: a+ matches "a", "aa", "aaa", but not "".
3. ? (Question Mark): Matches 0 or 1 occurrence of the preceding element.
o Example: a? matches "" or "a".
4. {n} (Curly Braces): Matches exactly n occurrences of the preceding element.
o Example: a{3} matches "aaa".
5. {n,}: Matches n or more occurrences of the preceding element.
o Example: a{2,} matches "aa", "aaa", "aaaa", etc.
6. {n,m}: Matches between n and m occurrences of the preceding element.
o Example: a{2,4} matches "aa", "aaa", and "aaaa", but not "a" or "aaaaa".
Example :
var regex = /go*/; // Matches 'g' followed by zero or more 'o's console.log("g".match(regex));
var regex = /go+/; // Matches 'g' followed by one or more 'o's console.log("g".match(regex));
var regex = /go?/; // Matches 'g' followed by zero or one 'o' console.log("g".match(regex));
var regex = /a{3}/; // Matches exactly three 'a's console.log("aa".match(regex));

Q7 : Design the frameset tag for following frame layout:


FRAME1 (20%)
FRAME2 (40 %)
FRAME3 (30 %)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frameset Layout</title>
</head>
<body>

<frameset rows="20%, 40%, 30%">


<frame src="frame1.html" name="frame1" />
<frame src="frame2.html" name="frame2" />
<frame src="frame3.html" name="frame3" />
</frameset>

</body>
</html>

Q8 : Explain frameset tag along with the attributes used in it.

The <frameset> tag in HTML is used to create a set of frames within a web page. Frames allow you to divide the browser window into
multiple sections, each displaying a different HTML document. This can be useful for layouts where different content sections need to
be shown simultaneously.
Key Features of the <frameset> Tag
• Frameset Structure: The <frameset> tag replaces the <body> tag in HTML documents where frames are used. It defines the
arrangement and sizes of the frames.
Attributes of the <frameset> Tag
• rows:
o Specifies the height of each frame as a percentage or pixel value. Multiple values are comma-separated.
o Example: <frameset rows="20%, 40%, 30%"> (creates three rows with specified heights).
• cols:
o Specifies the width of each frame as a percentage or pixel value for horizontal frames.
o Example: <frameset cols="25%, 75%"> (creates two columns with specified widths).
• frameborder (obsolete):
o Controls visibility of borders around frames (1 to show, 0 to hide).
o Example: <frameset frameborder="1">.
• border (obsolete):
o Specifies the width of the border around frames in pixels.
o Example: <frameset border="5"> (creates a 5-pixel border).
• frameSpacing (obsolete):
o Specifies the space between frames; no longer widely supported.
o Example: <frameset frameSpacing="10">.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frameset Example</title>
</head>
<body>

<frameset rows="20%, 40%, 30%">


<frame src="frame1.html" name="frame1" />
<frame src="frame2.html" name="frame2" />
<frame src="frame3.html" name="frame3" />
</frameset>

</body>
</html>

Q9 : Write a javascript program in which user rolls over the name of fruit.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruit Rollover Effect</title>

</head>
<body>

<h1>Hover Over the Fruit Names</h1>


<p class="fruit" onmouseover="changeColor(this)" onmouseout="resetColor(this)">Apple</p>
<p class="fruit" onmouseover="changeColor(this)" onmouseout="resetColor(this)">Banana</p>
<p class="fruit" onmouseover="changeColor(this)" onmouseout="resetColor(this)">Cherry</p>
<p class="fruit" onmouseover="changeColor(this)" onmouseout="resetColor(this)">Grape</p>
<p class="fruit" onmouseover="changeColor(this)" onmouseout="resetColor(this)">Orange</p>

<script>
function changeColor(element) {
element.style.color = "red";
}

function resetColor(element) {
element.style.color = "black";
}
</script>

</body>
</html>

Q10 : Write a JavaScript to change the contents of one frame from another frame.

HTML Code with Frames

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Frame Content</title>
</head>
<body>

<frameset cols="50%, 50%">


<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2">
</frameset>

</body>
</html>

Frame 1 (frame1.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frame 1</title>
</head>
<body>

<h2>Frame 1</h2>
<button onclick="changeContent()">Change Frame 2 Content</button>

<script>
function changeContent() {
// Access Frame 2 and change its content
window.parent.frames["frame2"].document.body.innerHTML = "<h2>Content Changed!</h2><p>This is the new content in
Frame 2.</p>";
}
</script>

</body>
</html>

Frame 2 (frame2.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Frame 2</title>
</head>
<body>

<h2>Frame 2</h2>
<p>This is the original content of Frame 2.</p>

</body>
</html>
Q11 : List the ways to protecting a web and describe any two of them.

Ways to Protect a Web Application


1. Input Validation
2. Authentication and Authorization
3. Encryption
4. Regular Updates and Patch Management
5. Secure Session Management
6. Web Application Firewalls (WAF)
7. Security Headers
8. Logging and Monitoring

1. Input Validation
Input validation checks user inputs to ensure they meet expected formats. This is important for preventing attacks like SQL injection
and XSS, where attackers submit harmful data.
How It Works:
• Define what a valid input looks like (e.g., length, type, character set).
• Use server-side validation to check data before processing or storing it.
• Implement client-side validation for better user experience, but don't rely on it completely, as it can be bypassed.
Benefits:
• Reduces the risk of security breaches by blocking harmful data.
• Improves data integrity by accepting only valid information.

2. Authentication and Authorization


Authentication checks who users are, while authorization decides what they can access based on their role.
How It Works:
• Authentication: Use strong password policies, store passwords securely with hash and salt, and consider multi-factor
authentication (MFA) for extra security.
• Authorization: Implement role-based access control (RBAC) to specify what actions users can take. Ensure only authorized
users can access sensitive data or functions.
Benefits:
• Protects sensitive data from unauthorized access.
• Ensures users can only access what they are allowed to, reducing the risk of misuse.

Q12 : Write a javascript to create a rollover effect of three images.


<!DOCTYPE html>
<html lang="en">

<body>

<h1>Hover Over the Images</h1>


<img src="image1.jpg" alt="Image 1"
onmouseover="this.src='image1_hover.jpg'"
onmouseout="this.src='image1.jpg'">

<img src="image2.jpg" alt="Image 2"


onmouseover="this.src='image2_hover.jpg'"
onmouseout="this.src='image2.jpg'">

<img src="image3.jpg" alt="Image 3"


onmouseover="this.src='image3_hover.jpg'"
onmouseout="this.src='image3.jpg'">

</body>
</html>.
Q13 : Describe text rollover with suitable example.

Refer Q4 for answer :

Q14 : Write a Java script to modify the status bar using on Mouse Over and on

<!DOCTYPE html>
<html lang="en">
</head>
<body>

<h1>Hover Over the Text Below</h1>


<p class="hover-text" id="statusText">Mouse over this text to change the status bar message.</p>

<script>
const statusText = document.getElementById('statusText');

// Function to change the status bar message


function changeStatusBar(message) {
window.status = message; // Change the status bar message
}

// Set up event listeners


statusText.addEventListener('mouseover', function() {
changeStatusBar('You are hovering over the text!'); // Change status on mouse over
});

statusText.addEventListener('mouseout', function() {
changeStatusBar(''); // Clear status on mouse out
});
</script>

</body>
</html>

Q15 : Write a Java script to modify the status bar using on Mouse Over and on MouseOut with links. When the user moves his
mouse over the links, it will display &quot;MSBTE&quot; in the status bar. When the user moves his mouse away from the link the
status bar will display nothing.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Status Bar Modification with Links</title>
<style>
body {
font-family: Arial, sans-serif;
}
a{
color: blue; /* Link color */
text-decoration: underline; /* Underline links */
cursor: pointer; /* Change cursor to pointer on hover */
}
</style>
</head>
<body>
<h1>Hover Over the Links Below</h1>
<a href="#" id="link1">Link 1</a> |
<a href="#" id="link2">Link 2</a> |
<a href="#" id="link3">Link 3</a>

<script>
// Function to change the status bar message
function changeStatusBar(message) {
window.status = message; // Change the status bar message
}

// Get all links


const links = document.querySelectorAll('a');

// Set up event listeners for each link


links.forEach(link => {
link.addEventListener('mouseover', function() {
changeStatusBar('MSBTE'); // Change status on mouse over
});

link.addEventListener('mouseout', function() {
changeStatusBar(''); // Clear status on mouse out
});
});
</script>

</body>
</html>

You might also like