Scribd
Upload
4 views

6th unit CSS

The document provides various JavaScript examples for web application features including status bars, banner ads, menus, and slideshows. It explains how to implement functionalities such as scrolling text, hover messages, rotating banners, dynamic menus, and more. Each example is accompanied by HTML and JavaScript code snippets to illustrate the concepts effectively.

Uploaded by

ifzalsolkar01
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
4 views

6th unit CSS

The document provides various JavaScript examples for web application features including status bars, banner ads, menus, and slideshows. It explains how to implement functionalities such as scrolling text, hover messages, rotating banners, dynamic menus, and more. Each example is accompanied by HTML and JavaScript code snippets to illustrate the concepts effectively.

Uploaded by

ifzalsolkar01
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/ 21

1. What is the use of the status bar in a web application?

The status bar in a web application is used to display information about the state of the web page or
application. It often shows status updates such as loading progress, error messages, or tips, and is
usually located at the bottom of the web browser window.

2. State the method to put a message in the web browser status bar?

You can set a message in the browser's status bar using JavaScript. The window.status property is
used for this purpose. Here's an example:

<!DOCTYPE html>

<html>

<head>

<title>Status Bar Message</title>

<script type="text/javascript">

window.status = "Welcome to the website!";

</script>

</head>

<body>

<h1>Check the status bar at the bottom of the browser!</h1>

</body>

</html>

3. Write a JavaScript program that creates a scrolling text on the status line of a window.

You can create scrolling text in the browser's status bar using window.status and a loop. Here's an
example:

<!DOCTYPE html>

<html>

<head>

<title>Scrolling Status Bar Message</title>

<script type="text/javascript">

var scrollMessage = "This is a scrolling message on the status bar!";

var i = 0;
function scrollStatusBar() {

window.status = scrollMessage.substring(i, scrollMessage.length) + scrollMessage.substring(0, i);

i++;

if (i > scrollMessage.length) {

i = 0;

setTimeout(scrollStatusBar, 200);

window.onload = scrollStatusBar;

</script>

</head>

<body>

<h1>Check the scrolling text in the status bar.</h1>

</body>

</html>

4. Write a program to display a JavaScript status bar message whenever your users hover over your
hyperlinks.

This can be done using the onmouseover event on a hyperlink. Here's an example:

<!DOCTYPE html>

<html>

<head>

<title>Status Bar Message on Hover</title>

<script type="text/javascript">

function showMessage() {

window.status = "You are hovering over a link!";

function resetMessage() {

window.status = "";

}
</script>

</head>

<body>

<a href="https://www.example.com" onmouseover="showMessage()"


onmouseout="resetMessage()">Hover over this link!</a>

</body>

</html>

5. Write a JavaScript to scroll the status bar message horizontally.

This can be achieved by modifying the status message dynamically in JavaScript. Here’s an example:

<!DOCTYPE html>

<html>

<head>

<title>Horizontal Scrolling Status Bar</title>

<script type="text/javascript">

var message = "This is a horizontally scrolling status message!";

var i = 0;

function scrollStatusBar() {

window.status = message.substring(i, message.length) + message.substring(0, i);

i++;

if (i > message.length) {

i = 0;

setTimeout(scrollStatusBar, 200);

window.onload = scrollStatusBar;

</script>

</head>

<body>
<h1>Check out the horizontal scrolling message in the status bar!</h1>

</body>

</html>

6. What is a banner ad?

A banner ad is a form of online advertising where an image or graphic is placed on a webpage with
the intent to attract attention. When clicked, it typically redirects the user to a different page or
website.

7. Develop a JavaScript program to create rotating banner ads with URL links.

You can create a rotating banner ad using JavaScript by dynamically changing images. Here's a
sample program:

<!DOCTYPE html>

<html>

<head>

<title>Rotating Banner Ads</title>

<script type="text/javascript">

var banners = [

{ image: "banner1.jpg", url: "https://www.ad1.com" },

{ image: "banner2.jpg", url: "https://www.ad2.com" },

{ image: "banner3.jpg", url: "https://www.ad3.com" }

];

var currentBanner = 0;

function rotateBanner() {

currentBanner = (currentBanner + 1) % banners.length;

document.getElementById("banner").src = banners[currentBanner].image;

document.getElementById("banner-link").href = banners[currentBanner].url;

setInterval(rotateBanner, 3000);

</script>
</head>

<body>

<a id="banner-link" href="#" target="_blank">

<img id="banner" src="banner1.jpg" alt="Banner Ad" />

</a>

</body>

</html>

8. Write a JavaScript to create and display a banner.

This code snippet displays a static banner ad.

<!DOCTYPE html>

<html>

<head>

<title>Static Banner Ad</title>

</head>

<body>

<a href="https://www.example.com" target="_blank">

<img src="banner.jpg" alt="Banner Ad" width="600" height="200"/>

</a>

</body>

</html>

10. What is a slide show?

A slideshow is a presentation of images that change automatically or manually at timed intervals. It


is commonly used to display a series of pictures or promotional material on a webpage.

11. Write a JavaScript that illustrates linking of banner advertisement to a URL.

Here's an example:

<!DOCTYPE html>

<html>

<head>
<title>Banner Ad with URL</title>

</head>

<body>

<a href="https://www.example.com" target="_blank">

<img src="banner.jpg" alt="Banner Ad" width="600" height="200"/>

</a>

</body>

</html>

12. Explain with a suitable example how to create a pull-down menu.

A pull-down menu is a type of navigation menu where options are revealed when the user clicks or
hovers over a menu item. Here's an example:

<!DOCTYPE html>

<html>

<head>

<title>Pull-Down Menu</title>

<style>

.menu {

list-style-type: none;

.menu > li {

position: relative;

display: inline-block;

padding: 10px;

background-color: #4CAF50;

.menu li:hover > ul {

display: block;

.menu ul {
display: none;

position: absolute;

top: 100%;

left: 0;

list-style-type: none;

background-color: #4CAF50;

.menu ul li {

display: block;

padding: 10px;

</style>

</head>

<body>

<ul class="menu">

<li>Menu 1

<ul>

<li><a href="#">Option 1</a></li>

<li><a href="#">Option 2</a></li>

</ul>

</li>

<li>Menu 2

<ul>

<li><a href="#">Option 3</a></li>

<li><a href="#">Option 4</a></li>

</ul>

</li>

</ul>

</body>

</html>
13. What is a dynamic menu?

A dynamic menu is a menu that can be modified or updated based on user interaction or other
factors, such as user preferences, roles, or real-time data.

14. How to create a dynamically changing menu in JavaScript.

A dynamically changing menu can be built by updating the menu items based on user input or
actions. Here's an example:

<!DOCTYPE html>

<html>

<head>

<title>Dynamic Menu</title>

<script type="text/javascript">

function updateMenu() {

var menu = document.getElementById("menu");

var newItem = document.createElement("li");

newItem.textContent = "New Item";

menu.appendChild(newItem);

</script>

</head>

<body>

<ul id="menu">

<li>Item 1</li>

<li>Item 2</li>

</ul>

<button onclick="updateMenu()">Add New Menu Item</button>

</body>

</html>
15. What is a float menu?

A float menu is a menu that remains fixed in place while the user scrolls the page, usually appearing
on the left or right side of the screen. This type of menu "floats" above other content, ensuring easy
access to navigation links no matter where the user is on the page

<!DOCTYPE html>

<html>

<head>

<title>Float Menu</title>

<style>

.float-menu {

position: fixed;

top: 50%;

left: 0;

background-color: #4CAF50;

padding: 15px;

width: 150px;

.float-menu a {

display: block;

padding: 10px;

color: white;

text-decoration: none;

.float-menu a:hover {

background-color: #333;

</style>

</head>

<body>

<div class="float-menu">

<a href="#">Home</a>
<a href="#">About</a>

<a href="#">Contact</a>

</div>

<div style="margin-left: 170px; padding: 20px;">

<h1>Main Content</h1>

<p>Scroll down to see the floating menu stay in place.</p>

</div>

</body>

</html>

16. Explain chain select menu with necessary illustration.

A chain select menu involves multiple select dropdown menus where the options in one menu
depend on the selection in another menu. For example, if you select a country in the first menu, the
second menu will show the states of that country.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Chain Select Menu</title>

<script type="text/javascript">

function updateStates() {

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

var state = document.getElementById("state");

var states = {

"USA": ["California", "Texas", "Florida"],

"India": ["Delhi", "Mumbai", "Bangalore"],

"Canada": ["Ontario", "Quebec", "Alberta"]

};

state.innerHTML = "";

for (var i = 0; i < states[country].length; i++) {


var option = document.createElement("option");

option.textContent = states[country][i];

state.appendChild(option);

</script>

</head>

<body>

<h1>Select Country and State</h1>

<label for="country">Country:</label>

<select id="country" onchange="updateStates()">

<option value="USA">USA</option>

<option value="India">India</option>

<option value="Canada">Canada</option>

</select>

<label for="state">State:</label>

<select id="state">

<option>Select a state</option>

</select>

</body>

</html>

17. What is tab menu? Explain it with diagrammatic representation.

A tab menu is a navigation component where different content sections are displayed when a user
clicks on a tab. Each tab represents a section of content, and the active tab shows the corresponding
content.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Tab Menu</title>
<style>

.tabs {

display: flex;

.tab {

padding: 10px 20px;

background-color: #ddd;

margin-right: 5px;

cursor: pointer;

.tab:hover {

background-color: #ccc;

.tab-content {

display: none;

padding: 20px;

background-color: #f4f4f4;

.active {

background-color: #4CAF50;

color: white;

.show {

display: block;

</style>

<script type="text/javascript">

function openTab(tabIndex) {

var tabs = document.querySelectorAll(".tab");

var contents = document.querySelectorAll(".tab-content");


tabs.forEach(function(tab, index) {

tab.classList.remove("active");

contents[index].classList.remove("show");

});

tabs[tabIndex].classList.add("active");

contents[tabIndex].classList.add("show");

</script>

</head>

<body>

<div class="tabs">

<div class="tab active" onclick="openTab(0)">Tab 1</div>

<div class="tab" onclick="openTab(1)">Tab 2</div>

<div class="tab" onclick="openTab(2)">Tab 3</div>

</div>

<div class="tab-content show">Content for Tab 1</div>

<div class="tab-content">Content for Tab 2</div>

<div class="tab-content">Content for Tab 3</div>

</body>

</html>

18. Explain folding tree menu.

A folding tree menu (or collapsible tree menu) is a hierarchical menu where sub-menu items can be
expanded or collapsed to show or hide nested options. This is often used to display large menus or
categories with many sub-items.

Example (simplified):

<!DOCTYPE html>

<html>

<head>

<title>Folding Tree Menu</title>


<style>

.tree ul {

list-style-type: none;

padding-left: 20px;

.tree li {

cursor: pointer;

.tree li ul {

display: none;

.tree li.active > ul {

display: block;

</style>

<script type="text/javascript">

function toggleMenu(event) {

var li = event.target.closest("li");

li.classList.toggle("active");

</script>

</head>

<body>

<ul class="tree">

<li onclick="toggleMenu(event)">Item 1

<ul>

<li>Sub-item 1.1</li>

<li>Sub-item 1.2</li>

</ul>

</li>

<li onclick="toggleMenu(event)">Item 2
<ul>

<li>Sub-item 2.1</li>

<li>Sub-item 2.2</li>

</ul>

</li>

</ul>

</body>

</html>

19. What is the use of scrollable menu?

A scrollable menu is a menu that allows the user to scroll through the options when the list of items
exceeds the visible area. It’s useful for menus with many options, preventing them from taking up
too much screen space.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Scrollable Menu</title>

<style>

.scrollable-menu {

width: 200px;

height: 150px;

overflow-y: scroll;

background-color: #f4f4f4;

.scrollable-menu a {

display: block;

padding: 10px;

color: black;

text-decoration: none;

.scrollable-menu a:hover {
background-color: #ddd;

</style>

</head>

<body>

<div class="scrollable-menu">

<a href="#">Option 1</a>

<a href="#">Option 2</a>

<a href="#">Option 3</a>

<a href="#">Option 4</a>

<a href="#">Option 5</a>

<a href="#">Option 6</a>

<a href="#">Option 7</a>

<a href="#">Option 8</a>

</div>

</body>

</html>

20. Create a slideshow with a group of four images, also simulate the next and previous transitions
between slides in your JavaScript.

Here’s how you can create a simple image slideshow with "Next" and "Previous" buttons:

<!DOCTYPE html>

<html>

<head>

<title>Image Slideshow</title>

<style>

.slideshow-container {

position: relative;

width: 100%;

max-width: 600px;
margin: auto;

.slides {

display: none;

width: 100%;

height: auto;

.prev, .next {

position: absolute;

top: 50%;

padding: 10px;

background-color: rgba(0, 0, 0, 0.5);

color: white;

cursor: pointer;

font-size: 18px;

.prev {

left: 0;

.next {

right: 0;

</style>

<script type="text/javascript">

var slideIndex = 0;

function showSlides() {

var slides = document.getElementsByClassName("slides");

for (var i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}
slideIndex++;

if (slideIndex > slides.length) { slideIndex = 1; }

slides[slideIndex - 1].style.display = "block";

setTimeout(showSlides, 3000);

function plusSlides(n) {

slideIndex += n;

var slides = document.getElementsByClassName("slides");

if (slideIndex > slides.length) { slideIndex = 1; }

if (slideIndex < 1) { slideIndex = slides.length; }

for (var i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

slides[slideIndex - 1].style.display = "block";

window.onload = showSlides;

</script>

</head>

<body>

<div class="slideshow-container">

<div class="slides">

<img src="image1.jpg" alt="Image 1" style="width:100%">

</div>

<div class="slides">

<img src="image2.jpg" alt="Image 2" style="width:100%">

</div>

<div class="slides">

<img src="image3.jpg" alt="Image 3" style="width:100%">

</div>
<div class="slides">

<img src="image4.jpg" alt="Image 4" style="width:100%">

</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>

<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

</body>

</html>

21. List ways of protecting your webpage and describe any one of them.

Ways to protect your webpage:

1. Use HTTPS: Encrypts communication between the client and server.

2. Validate User Input: Prevents injection attacks by ensuring that input follows the required
format.

3. Cross-Site Scripting (XSS) Protection: Ensures that user input is sanitized and safe to use on a
webpage.

4. Use Strong Authentication: Require strong passwords and multi-factor authentication to


secure user accounts.

5. Regular Security Patches: Ensure that your website and server are up to date with the latest
security patches.

6. Limit Permissions: Only allow users access to the necessary parts of your website or server.

7. Use CAPTCHA: Protect your forms from bot submissions.

8. Firewalls and Security Software: Install and configure firewalls to protect your website from
unauthorized access.

Example (Using HTTPS):

Ensure your server is configured to support HTTPS (SSL/TLS) for encrypted communication.

22. Write a JavaScript that disables the right-click button and displays the message 'Right-click
button is disabled'.

Here's how you can disable right-click using JavaScript:

<!DOCTYPE html>

<html>

<head>
<title>Disable Right Click</title>

<script type="text/javascript">

document.addEventListener('contextmenu', function(event) {

alert("Right-click button is disabled.");

event.preventDefault();

});

</script>

</head>

<body>

<h1>Right-click is disabled on this page.</h1>

</body>

</html>

23. Write a short note on - Frameworks of JavaScript and its applications.

JavaScript Frameworks are libraries that provide pre-written JavaScript code to simplify the
development of web applications. They offer a structure for organizing code, enhancing productivity,
and streamlining complex tasks like DOM manipulation, event handling, and AJAX requests.

Popular JavaScript Frameworks:

1. React.js:

o A library for building user interfaces.

o Focuses on creating reusable components.

o Allows for the creation of Single Page Applications (SPAs).

2. Angular.js:

o A comprehensive framework for building dynamic web apps.

o Uses two-way data binding, making it easier to synchronize the model and view.

o Provides tools for creating large-scale enterprise applications.

3. Vue.js:

o A progressive framework for building UIs and SPAs.

o Known for its simplicity and ease of integration.

o Offers a balance between flexibility and structure.

4. Node.js:

o A runtime environment for executing JavaScript server-side.


o Helps in building scalable network applications.

o Allows JavaScript to be used for both client-side and server-side development.

5. Express.js:

o A web framework for Node.js.

o Simplifies routing, middleware, and request handling.

o Often used for building RESTful APIs and server-side applications.

Applications:

• React.js is commonly used for building interactive user interfaces like social media sites,
dashboards, and e-commerce platforms.

• Angular.js is widely used for enterprise applications, data-heavy web apps, and content
management systems.

• Vue.js is suitable for building both small applications and large-scale SPAs, and is often
preferred for its ease of integration with existing projects.

• Node.js is ideal for building fast and scalable server-side applications, such as APIs, chat
applications, and real-time applications like online games.

You might also like