Scribd
Upload
39 views

CSS Model Answer Practise Test 3 by Rit 2 Mark Questions

css answers

Uploaded by

riteshdebadwar
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
39 views

CSS Model Answer Practise Test 3 by Rit 2 Mark Questions

css answers

Uploaded by

riteshdebadwar
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/ 12

CSS Model Answer Practise Test 3

Q.1) What is the use of Frames explain with an example.


Ans:
Frames are primarily associated with the use of <iframe> elements, which are
used to embed another HTML document within the current web page.
Ex
<!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>
<frameset cols="30%,70%">
<!-- Left Frame: Links (navigation) -->
<frame src="menu.html" name="menuFrame">

<!-- Right Frame: Main content -->


<frame src="content.html" name="contentFrame">
</frameset>
</html>

Q.2) What is the meaning of rollover explain with an example.


Ans:
A rollover refers to a technique in web design and user interfaces where an
action occurs when the user hovers their mouse over a specific element on the
web page, typically a button, image, or link. This interaction changes the visual
state of the element to provide feedback to the user, making it clear that the
element is interactive.

Ex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Rollover Example</title>
<script>
// Function to change image when hovered
function changeImage() {
document.getElementById('image').src = 'hover-image.jpg';
}

// Function to revert to the original image when not hovered


function restoreImage() {
document.getElementById('image').src = 'default-image.jpg';
}
</script>
</head>
<body>
<!-- Image with JavaScript rollover -->
<img id="image" src="default-image.jpg" alt="Default Image"
onmouseover="changeImage()"
onmouseout="restoreImage()"
width="300" height="200">
</body>
</html>

Q.3) Explain frame works of JavaScript and its application. (Explain any one)
Ans:
JavaScript frameworks are pre-built collections of JavaScript code that provide
a structure for developing web applications. They are designed to make the
development process faster and more efficient by offering ready-made
components, libraries, and tools for common programming tasks such as
manipulating the DOM, handling events, making HTTP requests, and routing.

Popular JavaScript Frameworks:


1. React.js
2. Angular.js
3. Vue.js
4. Ember.js
5. Svelte

React.js Framework:

React.js is a popular JavaScript library (often referred to as a framework due to its wide
usage in application development) created and maintained by Facebook. It is primarily
used for building user interfaces, particularly single-page applications (SPAs). React uses
a component-based architecture where the UI is broken down into reusable, self-
contained components.

Application

single-Page Applications (SPAs)

Dynamic page application

Mobile Application
Q.4) Give the regular expression for matching digits and non-digits.

Ans:

To match digits (0-9), you can use:

 \d: This matches any single digit character.

To match non-digit characters, you can use:

 \D: This matches any character that is not a digit.

Q.5) How to create menus in JavaScript explain.

Ans:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple Menu Example</title>

</head>

<body>

<ul id="menu">

<li>Home</li>

<li>About

<ul class="submenu">

<li>Team</li>
<li>History</li>

</ul>

</li>

<li>Services

<ul class="submenu">

<li>Web Development</li>

<li>App Development</li>

<li>SEO</li>

</ul>

</li>

<li>Contact</li>

</ul>

<script>

const menu = document.getElementById('menu');

console.log(menu.innerHTML); // Just to show the menu structure in the


console

</script>

</body>

</html>
Q.6) What is status bar? Explain with example.

Ans:

A status bar is a graphical control element that provides feedback to the user
about the current status of an application or system. It is typically located at
the bottom of a window or screen and can display information such as:

 Current operation status (e.g., loading, processing)


 Notifications or alerts
 Progress indicators
 Connection status (e.g., online or offline)
 Contextual information related to the application

Ex

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Status Bar Example</title>

</head>

<body>

<h1>Status Bar Example</h1>

<button onclick="performAction()">Perform Action</button>

<div id="statusBar" style="background-color: #f0f0f0; border-top: 1px solid


#ccc; padding: 10px; position: fixed; bottom: 0; width: 100%; text-align:
center;">
Status: Ready

</div>

<script>

function performAction() {

const statusBar = document.all['statusBar'];

statusBar.innerHTML = 'Status: Performing action...';

setTimeout(() => {

statusBar.innerHTML = 'Status: Action completed successfully!';

}, 2000); // 2 seconds delay

</script>

</body>

</html>
Q.7) Compare pop-up menu and context menu.

Ans:

Feature Pop-up Menu Context Menu


Definition Menu that appears on click Menu that appears on right-click
Trigger Left-click on UI elements Right-click on items or areas
Usage General options for navigation Context-specific actions
Positioning Near the triggering element At the cursor's position
Example Options from a “File” button Options for a file in file explorer

Q.8) Write a JavaScript program to display frames without border.

Ans:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Frames Example</title>

</head>

<frameset cols="30%,70%" frameborder="0" border="0" framespacing="0">

<frame src="menu.html" name="menuFrame" noresize>

<frame src="content.html" name="contentFrame" noresize>

</frameset>

</html>
Q.9) Write the program to validate phone number using regular expression.

Ans:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>10-Digit Phone Number Validation</title>

</head>

<body>

<h1>Phone Number Validation</h1>

<input type="text" id="phoneInput" placeholder="Enter 10-digit phone


number">

<button onclick="validatePhoneNumber()">Validate</button>

<p id="result"></p>

<script>

function validatePhoneNumber() {

var phoneNumber = document.all['phoneInput'].value;

var regex = /^\d{10}$/;

if (regex.test(phoneNumber)) {

document.all['result'].innerHTML = "Valid phone number!";

} else {
document.all['result'].innerHTML = "Invalid phone number. Please
enter a 10-digit number.";

</script>

</body>

</html>

Q.10) Explain the use of RegExp function in regular expression.

Ans:

The RegExp function in JavaScript is a constructor that creates a new regular


expression object. It is used to define patterns for searching and
manipulating strings. Here’s a detailed explanation of the RegExp function
and its use in regular expressions:

Syntax

let regex = new RegExp(pattern, flags);

Q.11) Define dynamic menu.

Ans:

A dynamic menu refers to a menu system that can change or adapt based on
various factors such as user interactions, data from a server, or application
state. Unlike static menus, which remain constant and are hard-coded into
the application, dynamic menus are generated or modified in real-time,
providing a more interactive and responsive user experience.
Q.12) Write a JavaScript code to check whether the string contains the given
pattern or not.

Ans:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Pattern Check</title>

</head>

<body>

<h1>Pattern Checker</h1>

<input type="text" id="inputString" placeholder="Enter a string">

<input type="text" id="inputPattern" placeholder="Enter a pattern">

<button onclick="checkPattern()">Check Pattern</button>

<p id="result"></p>

<script>

function checkPattern() {

var str = document.all['inputString'].value;

var pattern = document.all['inputPattern'].value;


var regex = new RegExp(pattern);

if (regex.test(str)) {

document.all['result'].innerHTML = "The string contains the


pattern.";

} else {

document.all['result'].innerHTML = "The string does not contain the


pattern.";

</script>

</body>

</html>

You might also like