CSS UT QBB

CSS UT QB
Theory:
1. Define cookie and explain how to create a cookie with example
• Cookies are small text files that websites use to store information on a user's computer
or device.
• Cookies can be used for a variety of purposes, such as remembering a user's
preferences, tracking their behaviour on a website, and enabling personalized
advertising.
Example:
<html>
<head>
<script type="text/javascript">
function A() {
with (document.form1) {
document.cookie = "UserName=" + username.value + ";";
alert("Cookie is created");
}
}
</script>
</head>
<body>
<form name="form1">
Enter Name: <input type="text" name="username">
<input type="button" value="Create Cookie" onclick="A()"/>
</form>
</body>
</html>
2. Explain the term timer in detail
• A timer refers to a mechanism used to schedule or delay actions in web pages,

typically through JavaScript.
• It allows developers to execute code after a specified time interval or repeatedly at
regular intervals.
• setTimeout(): Executes a function once after a specified delay (in milliseconds).
Syntax:
setTimeout(function, delay, param1, param2, ...);
Example:
<html>
<head>
function A() {
alert("Welcome User");
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Click me" onclick="setTimeout(A, 4000);"/>
</form>
</body>
</html>
3. Explain how to create a web page and how to open a web page in new window
5. Explain regular expression with example
6. How to create a rollover explain in detail
• Rollover means a webpage changes when the user moves his or her mouse over an
object on the page.
• It is often used in advertising.
• There are two ways to create rollover, using plain HTML or using a mixture of
JavaScript and HTML. We will demonstrate the creation of rollovers using both
methods. The keyword that is used to create rollover is the event
8. Define banner and status bar
• Banner: A banner is a prominent section, usually at the top of a webpage, used to

display key messages, advertisements, or announcements. It grabs users' attention and
often contains information like promotions, updates, or site navigation links.
• Status Bar: A status bar is a small, usually horizontal bar at the bottom of the screen
or window. It provides real-time information about the application's state, such as
page loading progress, system notifications, or connection status.
9. Explain how to hide code in JavaScript
10. Compare pop up menu and contest menu
Pop-up menu Contest menu
A menu that appears over the page when A menu that appears when the user right-clicks
triggered by an event, like clicking a button or a on an element, offering context-specific options.
link.
Can be triggered by various events, such as Triggered by right-clicking (or long-tapping on

clicking a button or a specific area on the page. mobile) on a specific item or area on the screen.
Used for general actions like navigation, tool Provides options specific to the element or
selection, or app-specific functions. context clicked (e.g., copying text, opening
links).
Visible when triggered by a specific event, such Appears when the user right-clicks an element
as clicking a button or menu item. and is usually related to the content clicked.
A button that opens a menu with different Right-clicking on a text field to see options like
navigation options. "Copy," "Paste," and "Select All."
13. Explain JavaScript security in detail
14. Explain browser location and history
15. Implement of following functions according to regular expression: a) test, b) match
17. Explain frame and detail and write a script to create a frame
19. Explain how to protect webpage and framework of Java and it's application
Codes:
4. Write a JavaScript code to implement-scroll by
<html>
<head>
function scrollPage() {
window.scrollBy(0, 200);
alert("Page has been scrolled down by 200 pixels.");
}
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Click me" onclick="setTimeout(scrollPage, 4000);"/>
</form>
</body>
</html>
Output:
7. Writer JavaScript to replace text using regular expression and matching term
<html>
<head>
function replaceText() {
var text = document.getElementById("textInput").value;
var regex = /apple/gi;
var replacedText = text.replace(regex, "orange");
document.getElementById("result").textContent = replacedText;
}
</script>
</head>
<body>
<h2>Replace "apple" with "orange"</h2>
<textarea id="textInput" rows="4" cols="50">I love apple pie and apple juice.</textarea>
<br><br>
<button onclick="replaceText()">Replace Text</button>
<p><strong>Result:</strong></p>
<p id="result"></p>
</body>
</html>
Output:
Input: I love apple pie and apple juice.

Output: I love orange pie and orange juice.
11. Write a JavaScript to implement pull down menu and folding tree menu
12. Write a JavaScript to create a new window and giving a focus to new window
<html>
<head>
function openAndFocusWindow() {
var newWindow = window.open("https://www.youtube.com",
"_blank", "width=800,height=600");
newWindow.focus();
}
</script>
</head>
<body>
<h2>Open YouTube in a New Window and Focus on It</h2>

<button onclick="openAndFocusWindow()">Open YouTube</button>
</body>
</html>
Output:
16. Write a JavaScript to find out matching word: a) digit, non-digit & b) match
character match non character
a) digit, non-digit:
18. Implement text through rollover
20. Write a scripts to implement:
1) Banner:
<html>
<head>
</script>
</head>
<body>
<h2>Static Banner</h2>
<img id="banner" src="image1.jpg" width="600" height="400" alt="Static Banner
Image">
</body>
</html>
2) Slideshow
<html>
<head>
<title>Banner Ads</title>
<script language="Javascript" type="text/javascript">
pics=new Array('https://m.media-
amazon.com/images/I/51LSVKDoNIL._SY425_.jpg',
'https://example.com/WT.jpg', 'https://example.com/VB_NET.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;
}
document.img1.src = pics[count];
}
}
</script>
</head>
<body>
<img src="https://m.media-amazon.com/images/I/51LSVKDoNIL._SY425_.jpg"
width="200" alt=""
height="300" name="img" />
<br>
<input type="button" value="Next" onclick="SlideShow(1)">
<input type="button" value="Back" onclick="SlideShow(-1)">
</body>
</html>
3) Pulldown menu
<html>
<head>
<title>Menu</title>
<script language="JavaScript" type="text/javascript">
function getPage(Choice) {
var Page = Choice.options[Choice.selectedIndex].value;
if (Page != "") {
window.location = Page;
}
}
</script>
</head>
<body>
<form action="" name="Form1">
Select your favourite website:
<select name="MenuChoice" onchange="getPage(this)">
<option value="https://www.google.co.in/">Google</option>
<option value="https://msbte.ac.in/">MSBTE</option>
<option value="https://in.search.yahoo.com/">Yahoo</option>
</select>
</form>
</body>
</html>
Output:
4) Dynamically changing menu
<html>
<head>
<title>Dynamic Banner</title>
const images = [
'/mnt/data/8teen.jpg',
'image2.jpg',
'image3.jpg'
];
let currentIndex = 0;
function changeImage() {
const banner = document.getElementById('banner');
currentIndex = (currentIndex + 1) % images.length;
banner.src = images[currentIndex];
}
setInterval(changeImage, 3000);
</script>
</head>
<body>
<h2>Dynamic Banner</h2>
<img id="banner" src="/mnt/data/8teen.jpg" width="600" height="400" alt="Dynamic
Banner Image">
</body>
</html>
5) Validating menu selection
<html>
<head>
<title>Menu</title>
<script language="Javascript" type="text/javascript">
function ValidateForm(choice)
{
ch=choice.Fruits.selectedIndex;
if(choice.Fruits.options[ch].value=="")
{
alert('Please select a fruit');
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return ValidateForm(this)" action="" name="Form1">
Select your favourite fruit:
<select name="Fruits">
<option value="">Fruits Name</option>
<option value="0">Apple</option>
<option value="1">Banana</option>
<option value="2">Orange</option>
<option value="3">Mango</option>
<option value="4">Papaya</option>
</select>
<br>
<p>
<input type="submit" value="Submit" />
<input type="reset" value="Reset"/>
</p>
</form>
</body>
</html>
Output:
6) Floating menu
<html>
<head>
<title>Menu</title>
</head>
<body>
<div style="position:fixed;
width:200px;height:50px; top:10px; right:10px;
background:blue; z-index:100">
Floating Menu.
</div>
<br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br>
This is long web page
</body>
</html>
Output:
7) Tab menu
<html>
<style>
.tabs {
display: flex;
margin-bo􀆩om: 10px;
}
.tab {
posi􀆩on: rela􀆩ve;
margin-right: 10px;
}
.tab label {
padding: 5px 10px;
border: 1px solid black;
cursor: pointer;
}
.checkboxtab {
display: none;
}
.checkboxtab:checked + label {
color: purple;
border-bo􀆩om: none;
}
.content-container {
border: 1px solid black;
padding: 10px;
display: none;
}
.checkboxtab:checked + label + .content-container {
display: block;
}
</style>
<body>
<div class="tabs">
<div class="tab">
<input name="checkbox-tabs-group" type="radio" id="checkbox1" class="checkboxtab"
checked>
<label for="checkbox1">Tab 1</label>
</div>
<div class="tab">
<input name="checkbox-tabs-group" type="radio" id="checkbox2" class="checkboxtab">
</div>
<div class="tab">
<input name="checkbox-tabs-group" type="radio" id="checkbox3" class="checkboxtab">
</div>
</div>

<div id="tab-content">
<div class="content-container" id="content1">This is the content of tab 1</div>
</div>
<script>
const tabs = document.querySelectorAll('.checkboxtab');
const contents = document.querySelectorAll('.content-container');
tabs.forEach((tab, index) => {
tab.addEventListener('change', func􀆩on() {
contents.forEach(content => content.style.display = 'none');
contents[index].style.display = 'block';
});
});
</script>
</body>
</html>
Output:
8) Popup menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, ini􀆩al-scale=1.0">
<􀆩tle>Dropdown Menu</􀆩tle>
<style>
.dropbtn {
background-color: Green;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
posi􀆩on: rela􀆩ve;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: gray;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: Blue;
}
</style>
</head>
<body>
<h2>Pop up Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="https://www.apv.ac.in">APV</a>
<a href="https://www.msbte.ac.in">MSBTE</a>
<a href="https://www.google.com">GOOGLE</a>
</div>
</div>
</body>
</html>
Output:

CSS UT QBB

Uploaded by

Copyright:

Available Formats

CSS UT QBB

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS UT QBB

Uploaded by

Copyright:

Available Formats

CSS UT QB

1. Define cookie and explain how to create a cookie with example

• A timer refers to a mechanism used to schedule or delay actions in web pages,

5. Explain regular expression with example

6. How to create a rollover explain in detail

8. Define banner and status bar

• Banner: A banner is a prominent section, usually at the top of a webpage, used to

9. Explain how to hide code in JavaScript

10. Compare pop up menu and contest menu

Pop-up menu Contest menu

Can be triggered by various events, such as Triggered by right-clicking (or long-tapping on

14. Explain browser location and history

15. Implement of following functions according to regular expression: a) test, b) match

4. Write a JavaScript code to implement-scroll by

Input: I love apple pie and apple juice.

18. Implement text through rollover

20. Write a scripts to implement:

5) Validating menu selection

You might also like