Scribd
Upload
1 views

CSSSSS

Uploaded by

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

CSSSSS

Uploaded by

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

Unit Wise Question Bank for Unit Test 2 3 4.

2 3 4. Design a simple HTML form for filling the information for registration of a student. 4
Unit Question Marks
3 1. What is an intrinsic function? 2 <html >
<head>
An intrinsic function is a function provided by the compiler to optimize code. <title>Student Registration Form</title>

Unlike regular functions, intrinsic functions are often built into the language to perform low- </head>

level operations faster, as they may be replaced by specific machine instructions. <body>

Example: <h2>Student Registration Form</h2>

let number = 16; <form id="registrationForm" onsubmit="showAlert(event)">

let sqroot = Math.sqrt(number); // Returns 4 <label for="name">Name:</label>

console.log("The square root of", number, "is", sqroot); <input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
3 2. Explain any two keyboard events in JavaScript. 2
<label for="course">Course:</label>
<input type="text" id="course" name="course" required><br><br>
keydown Event
The keydown event is triggered when a key is pressed down. It fires continuously as long as the key <label for="phone">Phone Number:</label>
is held down, making it useful for detecting the start of a key press or repeating actions while the key <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" placeholder="1234567890"
is held.
Example: required><br><br>
document.addEventListener("keydown", function(event) { <input type="submit" value="Register">
console.log("Key pressed: " + event.key); });
keyup Event </form>
The keyup event is triggered when a key is released. Unlike keydown, it only fires once per key <script>
release, making it useful for finalizing actions or detecting the end of a key press.
Example: function showAlert(event) {
document.addEventListener("keyup", function(event) { event.preventDefault(); // Prevents the form from submitting and refreshing the page
console.log("Key released: " + event.key); });
alert("Registration successful!");
3 3. What is the use of read-only element in JavaScript? 2 }
</script>

A read-only element in JavaScript is used to display information in a form that users can view </body>

but cannot modify. </html>

This is particularly useful for fields that need to show data without allowing any input or
alteration, such as calculated values, fixed information, or fields that should not be edited after 3 5. Write a JavaScript to create three categories - Fruit, Flower and Colour. Based on the selection 4

being set (like ID numbers or system-generated data). of category, the item, in the option list must get changed.

<html >
<head> windowName (optional): A string specifying the name of the new window. This can be used
as a target in future calls to window.open().
<title>Dynamic Options </title>
windowFeatures (optional): A comma-separated list of options specifying the features and
</head> dimensions of the new window, such as width, height, left, top, resizable, scrollbars, toolbar,
<body> location, status, menubar, etc.

<select id="category" onchange="updateOptions()">


<option value="fruit">Fruit</option> 4 7. Write a JavaScript to delete a cookie. 2

<option value="flower">Flower</option>
<option value="color">Color</option> <html>

</select> <body>

<select id="items"></select> <script>

<script> document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

const options = { </script>

fruit: ["Apple", "Banana", "Cherry"], </body>

flower: ["Rose", "Lily", "Daisy"], </html>

color: ["Red", "Blue", "Green"]


}; 4 8. What are cookies? Explain how to create cookies in JavaScript. 4

function updateOptions() {
const category = document.getElementById("category").value; Cookies are small text files stored on a user's browser by websites to keep track of specific

const items = document.getElementById("items"); information.

items.innerHTML = options[category].map(item => `<option>${item}</option>`).join(''); They enable web applications to remember information about users, such as login details,
} preferences, or tracking data.
</script> document.cookie
</body>
</html> document.cookie = "name=value; expires=expirationDate; path=path; domain=domain; secure;
samesite=sameSite";
Key Components
4 6. Explain the syntax for opening a window. 2 name=value: The name and value of the cookie.
expires: The expiration date (in UTC format). After this date, the cookie will be deleted.
path: Specifies the URL path within which the cookie is accessible. The default path is the
A new browser window or tab can be opened using the window.open() method. current page.
This function provides a way to load a specific URL in a new window and offers options to domain: Defines the domain for which the cookie is valid.
control the appearance and behavior of the window. secure: Ensures the cookie is only sent over HTTPS.
Syntax: samesite: Controls whether the cookie is sent with cross-site requests (values can be Strict,
window.open(URL, windowName, windowFeatures); Lax, or None).
Parameters
URL (optional): A string representing the URL to be loaded in the new window. If omitted or
set to "", a blank page will open. Example:
<html>
// Set a cookie with name "username" that expires in 7 days
<body>
setCookieWithMaxAge("username", "Alice", 7);
<script>
function setCookie(name, value, days) {
let date = new Date(); 4 10. What is the use of setInterval() and setTimeout() function? Write a JavaScript to illustrate both. 4
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // days to milliseconds
let expires = "expires=" + date.toUTCString(); The setInterval() and setTimeout() functions in JavaScript are used to execute code after a delay.
However, they operate differently in terms of timing and repetition.
document.cookie = name + "=" + value + ";" + expires + ";path=/";
} setTimeout()
setCookie("username", "ABC", 7); The setTimeout() function is used to execute a specified function or code snippet after a specified
delay, measured in milliseconds. It only runs the code once, after the delay has passed.
</script> Syntax: setTimeout(function, delay, arg1, arg2, ...);
</body> function: The function or code snippet to execute after the delay.
delay: The delay in milliseconds before the function runs (1 second = 1000 milliseconds).
</html> arg1, arg2,.. : Optional arguments to pass to the function being called.

Example:
4 9. Explain how to set the expiration date of a cookie. 4 setTimeout(() => {
console.log("This message is displayed after 3 seconds.");
}, 3000); //This example will log a message to the console after 3 seconds.
The expiration date of a cookie can be set using either the expires attribute or the max-age attribute.
Both specify when a cookie should be deleted, but they work slightly differently. setInterval()
The setInterval() function is used to repeatedly execute a specified function or code snippet at a fixed
Setting Expiration with expires interval, measured in milliseconds. It continues to run the code at the interval until it's stopped (with
The expires attribute accepts a date string in UTC format and sets the exact date and time when the clearInterval()).
cookie should expire. Once that date is reached, the browser will automatically delete the cookie. Syntax: setInterval(function, interval, arg1, arg2, ...);
Format: expires=Thu, 01 Jan 1970 00:00:00 UTC function: The function or code snippet to execute.
Example: interval: The interval (in milliseconds) between each execution.
function setCookieWithExpires(name, value, days) { arg1, arg2, ...: Optional arguments to pass to the function being called.
let date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); // days to milliseconds Example:
let expires = "expires=" + date.toUTCString(); setInterval(() => {
document.cookie = name + "=" + value + ";" + expires + ";path=/"; console.log("This message is displayed every 2 seconds.");
} }, 2000); //
setCookieWithExpires("username", "ABC", 7);
JavaScript Code Example to Illustrate Both
Setting Expiration with max-age <html>
The max-age attribute specifies the lifespan of a cookie in seconds, starting from the time it is set. <head>
When the max-age time elapses, the cookie will automatically expire and be deleted by the browser. <title>setTimeout and setInterval Example</title>
Format: max-age=seconds </head>
<body>
Example: <button onclick="startInterval()">Start Interval</button>
function setCookieWithMaxAge(name, value, days) { <button onclick="stopInterval()">Stop Interval</button>
let maxAge = days * 24 * 60 * 60; // days to seconds <div id="timeoutMessage"></div>
document.cookie = name + "=" + value + "; max-age=" + maxAge + "; path=/"; <div id="intervalMessage"></div>
}
<script> ^ : Ensures the pattern starts from the beginning of the string.
// Using setTimeout to display a one-time message after 5 seconds \(?\d{3}\)? :
setTimeout(() => { \(?: Matches an optional opening parenthesis (.
document.getElementById("timeoutMessage").innerText = "This message appears after 5 \d{3}: Matches exactly three digits.
seconds!"; \)?: Matches an optional closing parenthesis ).
}, 5000); // Delay of 5 seconds [-.]?: Matches an optional dash - or period . after the first set of digits.
// Using setInterval to display a message every 3 seconds
\d{4}: Matches exactly four digits (the next segment of the phone number).
let intervalId;
[-.]: Matches either a dash - or period . as a separator between the segments.
function startInterval() {
intervalId = setInterval(() => { \d{4}: Matches the last four digits.
let now = new Date().toLocaleTimeString(); $ : Ensures the pattern ends at the end of the string.
document.getElementById("intervalMessage").innerText = "This message updates every 3
seconds. Current time: " + now; 5 13. Explain frameset tag along with the attributes used in it. 4
}, 3000); // Interval of 3 seconds
}
// Function to stop the setInterval The <frameset> tag in HTML is used to define a collection of frames within a browser window.
function stopInterval() { It is often used in place of the <body> tag when designing a web page layout that requires
clearInterval(intervalId); splitting the browser window into multiple, scrollable sections, each displaying a separate
document.getElementById("intervalMessage").innerText = "Interval stopped."; HTML document.
} The <frameset> element holds multiple <frame> elements, each specifying a source URL for
</script> the content displayed in that section of the frameset.
</body> The browser window is divided horizontally or vertically using the rows or cols attributes of
</html> the <frameset> tag.
<!DOCTYPE html>
5 11. Define the term Regular expression. 2 <html>
<head>
<title>Frameset Example</title>
A Regular Expression (often abbreviated as regex or regexp) is a sequence of characters that defines </head>
a search pattern. Regular expressions are used for pattern matching within strings and are commonly <frameset rows="50%,50%">
employed in programming for text processing tasks, such as searching, matching, and replacing text. <frame src="header.html" name="header">
<frameset cols="50%,50%">
Syntax: let regex = /pattern/flags; <frame src="content.html" name="content">
<frame src="sidebar.html" name="sidebar">
Key Uses of Regular Expressions: </frameset>
Validation: Ensuring inputs meet specific formats (e.g., emails, phone numbers). </frameset>
Search: Finding specific patterns within text (e.g., locating all instances of a word). </html>
Replace: Modifying matched patterns within text (e.g., replacing old dates with new ones).
Parsing: Extracting data based on complex patterns. Attributes of <frameset>
rows and cols:
rows: Defines the number and size of rows in the frameset. Each row height is specified in the attribute
value as a comma-separated list (e.g., "50%,50%" divides the space into two rows of equal height).
5 12. Construct regular expression for validating the phone number in following format only: (nnn)- 2 cols: Defines the number and size of columns in the frameset. Each column width is specified in the
nnnn-nnnn OR nnn.nnnn.nnnn attribute value as a comma-separated list (e.g., "25%,50%,25%" creates three columns with specified
widths).
Units:
/^\(?\d{3}\)?[-.]?\d{4}[-.]\d{4}$/ Percentages (%): Relative to the total available width or height.
Pixels (px): Fixed pixel width/height.
Explanation of the Regular Expression: Asterisk (*): Indicates a flexible size that adjusts to fill remaining space.
frameborder: <body>
Controls whether borders appear between frames. Set to "1" to display borders or "0" to hide them.

border: <!-- Define three images with unique IDs and set the initial image sources -->
Sets the thickness of the frame borders. Specified in pixels. <img src="image1.jpg" id="img1" width="200" height="150" onmouseover="rollover('img1',
framespacing: 'image1-hover.jpg')" onmouseout="rollout('img1', 'image1.jpg')">
Defines the amount of space, in pixels, between frames. <img src="image2.jpg" id="img2" width="200" height="150" onmouseover="rollover('img2',

noresize: 'image2-hover.jpg')" onmouseout="rollout('img2', 'image2.jpg')">


Prevents the frame from being resized by the user. This attribute is added to the <frame> element. <img src="image3.jpg" id="img3" width="200" height="150" onmouseover="rollover('img3',

Nested <frameset>: 'image3-hover.jpg')" onmouseout="rollout('img3', 'image3.jpg')">


<frameset> elements can be nested to create complex grid layouts of rows and columns. <script>

5 14. What is frame? Write a JavaScript to display frames without border. 4 // Function to change the image on mouseover
function rollover(imageId, hoverSrc) {
A frame in HTML refers to a section of the browser window that can load and display a document.getElementById(imageId).src = hoverSrc;
separate HTML document.
}
Frames are often used in conjunction with the <frameset> tag to split the browser window into
multiple, independently scrollable regions, each capable of displaying different content or // Function to revert back to the original image on mouseout
webpages.
function rollout(imageId, originalSrc) {
Displaying Frames without Borders document.getElementById(imageId).src = originalSrc;
To display frames without borders, you can set the frameborder attribute of the <frame> elements to
}
"0" (zero) or use the border attribute on the <frameset> tag.
</script>
<html>
</body>
<head>
<title>Frames Without Borders</title> </html>
</head>
<body> 6 16. What is slide show? 2
<frameset rows="50%,50%" frameborder="0" border="0" framespacing="0">
<frame src="topFrame.html" name="topFrame" frameborder="0" noresize>
<frame src="bottomFrame.html" name="bottomFrame" frameborder="0" noresize> In JavaScript, a slideshow is a technique used to display a sequence of images or other content
</frameset> in a cycle, either automatically at regular intervals or manually when the user interacts with
</body> the slideshow controls (e.g., "Next" or "Previous" buttons).
</html> Slideshows are commonly used for image galleries, presentations, and advertisements on
websites.
They can enhance user engagement by presenting content in a visually appealing and
5 15. Write a JavaScript program to create rollover effect for three images. 4 interactive way.
Basic Components of a JavaScript Slideshow
o Image Array or Collection: A list of images or content items to display in the slideshow,
<html> which can be hardcoded or dynamically generated.
<head> o Current Slide Index: Tracks the currently displayed slide in the array, allowing
navigation through the slides.
<title>Image Rollover Effect</title> o Navigation Controls:
</head> Next and Previous buttons allow users to manually navigate the slideshow.
Play/Pause button for automatic playback.
o Timing Control (Optional): overflow: hidden;
Using JavaScript functions like setInterval() to automate the slideshow by
}
changing slides at regular intervals.
#banner-image {
6 17. What is banner ad? 2 width: 100%;
height: 100%;
transition: opacity 0.5s ease;
A banner ad is a form of online advertising that involves displaying a graphical advertisement on a
}
webpage. These ads are typically rectangular and are placed in high-visibility areas, such as at the
top, bottom, or sides of a webpage. The primary purpose of banner ads is to attract traffic to a #banner-text {
website by linking to the advertiser's site when clicked. In the context of JavaScript, banner ads can
position: absolute;
be dynamically managed and manipulated, providing more interactive and engaging experiences for
users. bottom: 10px;
left: 10px;
Key Components of Banner Ads
color: #fff;
1. Visual Elements: Banner ads can include images, text, animations, and interactive elements background-color: rgba(0, 0, 0, 0.7);
(like buttons or forms) to capture user attention. padding: 10px;
2. Click-Through Action: When a user clicks on the banner ad, they are redirected to the
advertiser's website, landing page, or specific content. }
3. Tracking and Analytics: Advertisers often implement tracking to measure the performance #clickable {
of banner ads, including impressions (how many times the ad is shown), clicks, and
conversions. position: absolute;
4. Responsive Design: Many banner ads are designed to be responsive, meaning they adapt to width: 100%;
different screen sizes and devices, enhancing user experience across platforms.
height: 100%;
cursor: pointer;
6 18. Write a JavaScript to create and display a banner. 4 }
</style>
<html> </head>
<head> <body>
<title>Simple Banner Ad</title>
<style> <div id="banner-ad">
#banner-ad { <img src="banner1.jpg" id="banner-image" alt="Banner Ad">
width: 600px; <div id="banner-text">Click here for special offers!</div>
height: 250px; <a href="https://www.example.com" target="_blank" id="clickable"></a>
background-color: #f4f4f4; </div>
border: 2px solid #ccc;
position: relative; <script>
margin: auto; const bannerImages = [
'banner1.jpg', 3. Tab Menu: A menu that displays content in tabs, allowing users to switch between different
sections without reloading the page.
'banner2.jpg',
4. Sidebar Menu: A vertical menu that usually appears on the side of a webpage, providing
'banner3.jpg' navigation links.
5. Sliding Menu: A menu that slides in and out from the side of the screen, often used in
];
mobile designs.
let currentImageIndex = 0; 6. Accordion Menu: A vertically stacked list of items where each item can be expanded or
collapsed to show more options.
7. Mega Menu: A large dropdown menu that can display multiple categories and
function changeBannerImage() { subcategories, often used in e-commerce websites.
currentImageIndex = (currentImageIndex + 1) % bannerImages.length;
Explanation of Two Types of Menus with Examples
const bannerImage = document.getElementById('banner-image');
1. Dropdown Menu
bannerImage.style.opacity = 0; // Fade out
setTimeout(() => { A dropdown menu allows users to hover over or click an item to reveal a list of related links or
options. Dropdown menus are commonly used in navigation bars.
bannerImage.src = bannerImages[currentImageIndex];
bannerImage.style.opacity = 1; // Fade in <html>

}, 500); // Delay for fade out transition <head>

} <title>Dropdown Menu</title>
<style>

// Change the banner image every 5 seconds .navbar { background-color: #333; overflow: hidden; }

setInterval(changeBannerImage, 5000); .navbar a, .dropbtn { color: white; padding: 14px 16px; text-decoration: none; }

</script> .dropdown { float: left; position: relative; }


.dropdown-content {

</body> display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; z-index: 1;

</html> }

6 19. What is a menu? List all types of menus and explain any 1 with example. 4 .dropdown:hover .dropdown-content { display: block; }
</style>
</head>
In JavaScript, a menu refers to a navigational component on a webpage that allows users to select <body>
options, access different parts of the site, or perform specific actions. Menus can come in various
forms and styles, often enhancing user experience by providing a structured way to access content or
functionalities. Menus can be static or dynamic, and they can include dropdowns, pop-ups, sidebars, <div class="navbar">
and more.
<a href="#home">Home</a>
Types of Menus in JavaScript <div class="dropdown">
<button class="dropbtn">Services</button>
1. Dropdown Menu: A menu that expands to show sub-options when hovered over or clicked.
2. Context Menu: A menu that appears when a user right-clicks on an element, offering <div class="dropdown-content">
contextual actions. <a href="#service1">Service 1</a>
<a href="#service2">Service 2</a> Microsoft Office ,Gmail, Forbes, PayPal, Grasshopper, Samsung, Delta
</div>
</div> 3) Vue.js
Vue is an open-source JavaScript framework for creating a creative UI. The integration with Vue in
<a href="#about">About</a>
projects using other JavaScript libraries is simplified because it is designed to be adaptable.
</div> Application:
VueJS is primarily used to build web interfaces and one-page applications. It can also be applied to
both desktop and mobile app development.
</body>
</html> 4) jQuery
6 20. Write short note on - Frameworks of JavaScript and applications. 4 It is a cross-platform JavaScript library designed to simplify HTML client-side scripting. You can use
the jQuery API to handle, animate, and manipulate an event in an HTML document, also known as
DOM. Also, jQuery is used with Angular and React App building tools.
Frameworks of JavaScript and its Application Applications:

A JavaScript framework is a collection of JavaScript code libraries that provide a web JQuery can be used to develop Ajax based applications.
developer with pre-written code for routine programming tasks. It can be used to make code simple, concise and reusable.
Frameworks are structures with a particular context and help you create web applications It simplifies the process of traversal of HTML DOM tree.
within that context. It can also handle events, perform animation and add ajax support in web applications.
It is completely possible to build strong web applications without JavaScript frameworks, but
frameworks provide a template that handles common programming patterns.
5) Node.js
feature from scratch. Instead, you can build upon an existing feature set. Node.js is an open-source, server-side platform built on the Google Chrome JavaScript Engine.
All JavaScript frameworks, like most other frameworks, provide some rules and guidelines. Node.js is an asynchronous, single-threaded, non-blocking I/O model that makes it lightweight and
Using these rules and guidelines, any developer can make complex applications faster and efficient.
more efficiently than if they decided to build from scratch. Applications:
Following are the javascript frameworks with their applications: Paypal, LinkedIn, Yahoo, Mozilla, Netflix, Uber, Groupon, GoDaddy, eBay

1) ReactJs
React is based on a reusable component. Simply put, these are code blocks that can be classified as
either classes or functions. Each component represents a specific part of a page, such as a logo, a
button, or an input box. The parameters they use are called props, which stands for properties.
Applications:
React is a JavaScript library developed by Facebook which, among other things, was used to build
Instagram.com.

2) Angular
Google operates this framework and is designed to use it to develop a Single Page Application (SPA).
This development framework is known primarily because it gives developers the best conditions to
combine JavaScript with HTML and CSS. Google operates this framework and is designed to use it
to develop a Single Page Application (SPA). This development framework is known primarily because
it gives developers the best conditions to combine JavaScript with HTML and CSS.
Applications:

You might also like