Scribd
Upload
18 views

CSS Practicals Solutions

Client Side Scripting Language Practical

Uploaded by

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

CSS Practicals Solutions

Client Side Scripting Language Practical

Uploaded by

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

Program 1

Write javascript program to accept two numbers from the user and perform all arithmetic operations.(PR-1)

// Get the two numbers from the user

const num1 = Number(prompt("Enter the first number: "));

const num2 = Number(prompt("Enter the second number: "));

// Perform the arithmetic operations and store the results in variables

const sum = num1 + num2;

const difference = num1 - num2;

const product = num1 * num2;

const quotient = num1 / num2;

// Display the results to the user

document.write("The sum of the two numbers is " + sum);

document.write("The difference of the two numbers is " + difference);

document.write("The product of the two numbers is " + product);

document.write("The quotient of the two numbers is " + quotient);

OUTPUT
Enter the first number: 10
Enter the second number: 5

The sum of the two numbers is 15


The difference of the two numbers is 5
The product of the two numbers is 50
The quotient of the two numbers is 2

Page 1 of 28
Program 2
Write javascript program to print all odd numbers from 1 to 100 (PR-2)

<!DOCTYPE html>

<html>

<body>

<center>

<h1> Printing Odd Number from 1 to 100 </h1>

<p id="print"> </p>

</center>

<script type='text/JavaScript'>

var res="";

for(i=1;i<100;i++)

var n = 2;

if(i%2 !=0)

res = res + i +" ";

document.getElementById("print").innerHTML = res;

</script>

</body>

</html>

Page 2 of 28
Program 3

Write javascript program to find greater number between three numbers entered by the user using if else if
statement (PR-2)

// Get the three numbers from the user

const num1 = Number(prompt("Enter the first number: "));

const num2 = Number(prompt("Enter the second number: "));

const num3 = Number(prompt("Enter the third number: "));

// Find the greatest number

let greatestNumber;

if (num1 > num2 && num1 > num3) {

greatestNumber = num1;

} else if (num2 > num1 && num2 > num3) {

greatestNumber = num2;

} else {

greatestNumber = num3;

// Display the result to the user

alert("The greatest number is " + greatestNumber);

OUTPUT
Enter the first number: 10
Enter the second number: 5
Enter the third number: 20

The greatest number is 20

Page 3 of 28
Program 4

write javascript program to accept array from the user and perform push pop and reverse of array using switch
case (PR-3)

// Get the array from the user

const arr = prompt("Enter the array elements (separated by a comma): ").split(",");

// Convert the array elements to numbers

arr.forEach((element) => {

element = Number(element);

});

// Display the current array

console.log("The current array is: ", arr);

// Create a switch case to perform the operations

switch (prompt("Enter the operation to perform (push, pop, or reverse): ")) {

case "push":

// Push a new element to the array

const elementToPush = Number(prompt("Enter the element to push: "));

arr.push(elementToPush);

// Display the updated array

console.log("The updated array is: ", arr);

break;

case "pop":

// Pop the last element from the array

const poppedElement = arr.pop();

// Display the popped element

console.log("The popped element is: ", poppedElement);

// Display the updated array

console.log("The updated array is: ", arr);

break;

case "reverse":

// Reverse the array

arr.reverse();

// Display the reversed array

console.log("The reversed array is: ", arr);

Page 4 of 28
break;

default:

console.log("Invalid operation!");

OUTPUT
Enter the array elements (separated by a comma): 1, 2, 3, 4

The current array is: [1, 2, 3, 4]

Enter the operation to perform (push, pop, or reverse): push

Enter the element to push: 5

The updated array is: [1, 2, 3, 4, 5]

Enter the operation to perform (push, pop, or reverse): pop

The popped element is: 5

The updated array is: [1, 2, 3, 4]

Enter the operation to perform (push, pop, or reverse): reverse

The reversed array is: [4, 3, 2, 1]

Page 5 of 28
Practical 5

Write Javascript program to calculate area of circle and area of rectangle using function using switch case(Accept
Input from the user). (PR-4)

function calculateArea(shape) {
switch (shape) {
case "circle":
let radius = prompt("Enter the radius of the circle: ");
return Math.PI * radius * radius;
case "rectangle":
let length = prompt("Enter the length of the rectangle: ");
let width = prompt("Enter the width of the rectangle: ");
return length * width;
default:
return "Invalid shape";
}
}
let shape = prompt("Enter the shape (circle or rectangle): ");
let area = calculateArea(shape);
console.log("The area of the " + shape + " is: " + area);

OUTPUT
Enter the shape (circle or rectangle): circle
Enter the radius of the circle: 5
The area of the circle is: 78.54
Enter the shape (circle or rectangle): rectangle
Enter the length of the rectangle: 10
Enter the width of the rectangle: 5
The area of the rectangle is: 50

Page 6 of 28
Practical 6

Write Javascript program to implement all string function such as length, charAt, charCodeAt, indexOf, lastIndexOf,
slice, substring, substr, toLocaleLowerCase, toLocaleUpperCase, concat, trim, split, match, or replace and accept
string from user. (PR-5)

// Function to accept a string from the user


function acceptString() {
let string = prompt("Enter a string: ");
return string;
}
// Function to implement all string functions
function performStringOperation(string, operation) {
switch (operation) {
case "length":
return string.length;
case "charAt":
let index = prompt("Enter the index: ");
return string.charAt(index);
case "charCodeAt":
let index = prompt("Enter the index: ");
return string.charCodeAt(index);
case "indexOf":
let substring = prompt("Enter the substring: ");
return string.indexOf(substring);
case "lastIndexOf":
let substring = prompt("Enter the substring: ");
return string.lastIndexOf(substring);
case "slice":
let start = prompt("Enter the start index: ");
let end = prompt("Enter the end index: ");
return string.slice(start, end);
case "substring":
let start = prompt("Enter the start index: ");
let end = prompt("Enter the end index: ");
return string.substring(start, end);
case "substr":
let start = prompt("Enter the start index: ");
let length = prompt("Enter the length: ");
return string.substr(start, length);
case "toLocaleLowerCase":
return string.toLocaleLowerCase();
case "toLocaleUpperCase":
return string.toLocaleUpperCase();
case "concat":
let otherString = prompt("Enter the other string: ");
return string.concat(otherString);
case "trim":
return string.trim();

Page 7 of 28
case "split":
let delimiter = prompt("Enter the delimiter: ");
return string.split(delimiter);
case "match":
let regex = prompt("Enter the regex: ");
return string.match(regex);
case "replace":
let regex = prompt("Enter the regex: ");
let replacement = prompt("Enter the replacement string: ");
return string.replace(regex, replacement);
default:
console.log("Invalid operation");
}
}

// Driver code
let string = acceptString();

console.log("The original string is: " + string);

// Prompt the user to select an operation


let operation = prompt(
"Select an operation (length, charAt, charCodeAt, indexOf, lastIndexOf, slice, substring, substr, toLocaleLowerCase,
toLocaleUpperCase, concat, trim, split, match, or replace): "
);

// Perform the selected operation on the string


let result = performStringOperation(string, operation);

// Display the result


console.log("The result is: " + result);
OUTPUT

Enter a string: Hello, world!

The original string is: Hello, world!

Select an operation (length, charAt, charCodeAt, indexOf, lastIndexOf, slice, substring, substr, toLocaleLowerCase,
toLocaleUpperCase, concat, trim, split, match, or replace): length

The result is: 13

Select an operation (length, charAt, charCodeAt, indexOf, lastIndexOf, slice, substring, substr, toLocaleLowerCase,
toLocaleUpperCase, concat, trim, split, match, or replace): charAt

Enter the index: 5

The result is: !

Select an operation (length, charAt, charCodeAt, indexOf, lastIndexOf, slice, substring, substr, toLocaleLowerCase,
toLocaleUpperCase, concat, trim, split, match, or replace): toLocaleUpperCase

The result is: HELLO, WORLD!

Page 8 of 28
Practical 7

write javascript code to create student registration form (PR-6)

<html>
<head>
<title>Student Registration Form</title>
</head>
<body>
<h1>Student Registration Form</h1>
<form id="registration-form">
<input type="text" name="name" placeholder="Enter your name">
<input type="email" name="email" placeholder="Enter your email">
<input type="number" name="phone" placeholder="Enter your phone number">
<input type="date" name="date_of_birth" placeholder="Enter your date of birth">
<select name="course">
<option value="">Select course</option>
<option value="B.Tech">B.Tech</option>
<option value="B.Sc">B.Sc</option>
<option value="B.A">B.A</option>
<option value="M.Tech">M.Tech</option>
<option value="M.Sc">M.Sc</option>
<option value="M.A">M.A</option>
</select>
<input type="submit" value="Register">
</form>

<script>
const registrationForm = document.getElementById('registration-form');

registrationForm.addEventListener('submit', (event) => {


event.preventDefault();

const name = registrationForm.querySelector('[name="name"]').value;


const email = registrationForm.querySelector('[name="email"]').value;
const phone = registrationForm.querySelector('[name="phone"]').value;
const dateOfBirth = registrationForm.querySelector('[name="date_of_birth"]').value;
const course = registrationForm.querySelector('[name="course"]').value;

// Validate the form inputs

if (name === '') {


alert('Please enter your name');
return;
}

if (email === '') {


alert('Please enter your email address');
return;
Page 9 of 28
}

if (phone === '') {


alert('Please enter your phone number');
return;
}

if (dateOfBirth === '') {


alert('Please enter your date of birth');
return;
}

if (course === '') {


alert('Please select a course');
return;
}

// Submit the form data to the server

// ...
});
</script>
</body>
</html>
OUTPUT

Page 10 of 28
Practical 8

write javascript code to create Employee registration form (PR-6)

<html>
<head>
<title>Employee Registration Form</title>
</head>
<body>
<h1>Employee Registration Form</h1>
<form id="registration-form">
<input type="text" name="name" placeholder="Enter your name">
<input type="email" name="email" placeholder="Enter your email">
<input type="number" name="phone" placeholder="Enter your phone number">
<input type="date" name="date_of_birth" placeholder="Enter your date of birth">
<input type="text" name="address" placeholder="Enter your address">
<input type="number" name="salary" placeholder="Enter your salary">
<select name="department">
<option value="">Select department</option>
<option value="Engineering">Engineering</option>
<option value="Sales">Sales</option>
<option value="Marketing">Marketing</option>
<option value="Human Resources">Human Resources</option>
<option value="Finance">Finance</option>
</select>
<input type="submit" value="Register">
</form>
<script>
const registrationForm = document.getElementById('registration-form');
registrationForm.addEventListener('submit', (event) => {
event.preventDefault();
const name = registrationForm.querySelector('[name="name"]').value;
const email = registrationForm.querySelector('[name="email"]').value;
const phone = registrationForm.querySelector('[name="phone"]').value;
const dateOfBirth = registrationForm.querySelector('[name="date_of_birth"]').value;
const address = registrationForm.querySelector('[name="address"]').value;
const salary = registrationForm.querySelector('[name="salary"]').value;
const department = registrationForm.querySelector('[name="department"]').value;

Page 11 of 28
// Validate the form inputs
if (name === '') {
alert('Please enter your name');
return;
}
if (email === '') {
alert('Please enter your email address');
return;
}
if (phone === '') {
alert('Please enter your phone number');
return;
}
if (dateOfBirth === '') {
alert('Please enter your date of birth');
return;
}
if (address === '') {
alert('Please enter your address');
return;
}
if (salary === '') {
alert('Please enter your salary');
return;
}
if (department === '') {
alert('Please select a department');
return;
}
// Submit the form data to the server
// ...
});
</script>
</body>
</html>
OUTPUT

Page 12 of 28
Practical 9
Create web page to implement Form Events click,ondblclick,onmouseover & onmouseout event (PR-7)
<!DOCTYPE html>
<html>
<head>
<title>Form Events</title>
<script>
function handleClick(event) {
alert("You clicked on the button!");
}
function handleDoubleClick(event) {
alert("You double-clicked on the button!");
}
function handleMouseOver(event) {
alert("You moused over the button!");
}
function handleMouseOut(event) {
alert("You moused out of the button!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click Me!" onclick="handleClick(event)" ondblclick="handleDoubleClick(event)"
onmouseover="handleMouseOver(event)" onmouseout="handleMouseOut(event)">
</form>
</body>
</html>

Page 13 of 28
Practical 10
Create web page to implement Form Events such as onload, onkeypress, onkeydown,onfocus,onreset and
onsubmit event (PR-8)
<!DOCTYPE html>
<html>
<head>
<title>Form Events</title>
<script>
function handleOnLoad(event) {
alert("The form has loaded!");
}

function handleKeyPress(event) {
alert("You pressed a key!");
}

function handleKeyDown(event) {
alert("You held down a key!");
}

function handleFocus(event) {
alert("You focused on the form element!");
}

function handleReset(event) {
alert("You reset the form!");
}

function handleSubmit(event) {
alert("You submitted the form!");
}
</script>
</head>
<body>
<form onload="handleOnLoad(event)" onkeypress="handleKeyPress(event)" onkeydown="handleKeyDown(event)"
onfocus="handleFocus(event)" onreset="handleReset(event)" onsubmit="handleSubmit(event)">
<input type="text" name="name" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>
</body>
</html>

Page 14 of 28
Practical 11
Develop a webpage using intrinsic java functions such as submit, disable and read only (PR-9)
<!DOCTYPE html>
<html>
<head>
<title>Intrinsic Java Functions</title>
</head>
<body>
<h1>Intrinsic Java Functions</h1>
<form id="myForm">
<input type="text" name="name" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>
<script>
// Disable the submit button
document.getElementById("myForm").submit.disabled = true;

// Make the name input field readonly


document.getElementById("myForm").name.readonly = true;

// Enable the submit button when the user enters something in the name input field
document.getElementById("myForm").name.addEventListener("keyup", function() {
if (this.value !== "") {
document.getElementById("myForm").submit.disabled = false;
} else {
document.getElementById("myForm").submit.disabled = true;
}
});
</script>
</body>
</html>

Page 15 of 28
Program 12
Develop a web page for email validation of form fields using regular expression (PR-12)
<!DOCTYPE html>
<html>
<head>
<title>Form Validation using Regular Expression</title>
<script>
// Regular expression for validating email address
var emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
// Function to validate the email address field
function validateEmail() {
var emailInput = document.getElementById("email");
var emailValue = emailInput.value;
if (!emailRegex.test(emailValue)) {
alert("Invalid email address!");
return false;
}
return true;
}
// Function to validate the form
function validateForm() {
if (!validateEmail()) {
return false;
}
return true;
}
</script>
</head>
<body>
<h1>Form Validation using Regular Expression</h1>
<form onsubmit="return validateForm()">
<input type="email" id="email" placeholder="Enter your email address">
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT

Page 16 of 28
Practical 13
Develop a web page for registration form(Username, email, password) validation of form fields using regular
expression (PR-12)
<!DOCTYPE html>
<html>
<head>
<title>Registration Form Validation</title>
<script>
// Regular expression for validating username
var usernameRegex = /^[a-zA-Z0-9_]{3,16}$/;
// Regular expression for validating email address
var emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
// Regular expression for validating password
var passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})$/;
// Function to validate the username field
function validateUsername() {
var usernameInput = document.getElementById("username");
var usernameValue = usernameInput.value;
if (!usernameRegex.test(usernameValue)) {
alert("Invalid username!");
return false;
}
return true;
}
// Function to validate the email address field
function validateEmail() {
var emailInput = document.getElementById("email");
var emailValue = emailInput.value;
if (!emailRegex.test(emailValue)) {
alert("Invalid email address!");
return false;
}
return true;
}
// Function to validate the password field
function validatePassword() {
var passwordInput = document.getElementById("password");
var passwordValue = passwordInput.value;
if (!passwordRegex.test(passwordValue)) {
alert("Invalid password!");
return false;
}
return true;
}
// Function to validate the form
function validateForm() {
if (!validateUsername()) {
return false;
}
if (!validateEmail()) {

Page 17 of 28
return false;
}
if (!validatePassword()) {
return false;
}
return true;
}
</script>
</head>
<body>
<h1>Registration Form Validation</h1>
<form onsubmit="return validateForm()">
<input type="text" id="username" placeholder="Enter your username">
<input type="email" id="email" placeholder="Enter your email address">
<input type="password" id="password" placeholder="Enter your password">
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT

Page 18 of 28
Practical 14
Create web page with Rollovers effect on image using javascript (PR-13)
<!DOCTYPE html>
<html>
<head>
<title>Rollover Effect</title>
<script>
// Function to change the image when the mouse hovers over it
function changeImage(imageElement, newImagePath) {
imageElement.src = newImagePath;
}

// Function to change the image back to the original image when the mouse moves out of it
function changeImageBack(imageElement, originalImagePath) {
imageElement.src = originalImagePath;
}
</script>
</head>
<body>
<h1>Rollover Effect</h1>

<img id="image1" src="image1.png" onmouseover="changeImage(this, 'image1_hover.png')"


onmouseout="changeImageBack(this, 'image1.png')">

<img id="image2" src="image2.png" onmouseover="changeImage(this, 'image2_hover.png')"


onmouseout="changeImageBack(this, 'image2.png')">
</body>
</html>

Page 19 of 28
Practical 15
Write a javascript program to design HTML page with books information in tabular format, use rollovers to
display the discount information. (PR-13)
<!DOCTYPE html>
<html>
<head>
<title>Book List</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
}
th {
background-color: #000000;
color: white;
}
.discount {
display: none;
background-color: #ffff00;
padding: 10px;
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<h1>Book List</h1>
<table>
<tr>
<th>Book Title</th>
<th>Author</th>
<th>Price</th>
<th>Discount</th>
</tr>
<tr>
<td>The Lord of the Rings</td>
<td>J.R.R. Tolkien</td>
<td>$29.99</td>
<td onmouseover="showDiscount(this)"
onmouseout="hideDiscount(this)">Hover for discount</td>
<div class="discount">20% off!</div>
</tr>
<tr>
<td>Harry Potter and the Sorcerer's Stone</td>
<td>J.K. Rowling</td>
<td>$19.99</td>

Page 20 of 28
<td onmouseover="showDiscount(this)"
onmouseout="hideDiscount(this)">Hover for discount</td>
<div class="discount">15% off!</div>
</tr>
<tr>
<td>The Hitchhiker's Guide to the Galaxy</td>
<td>Douglas Adams</td>
<td>$14.99</td>
<td onmouseover="showDiscount(this)"
onmouseout="hideDiscount(this)">Hover for discount</td>
<div class="discount">10% off!</div>
</tr>
</table>
<script>
function showDiscount(element) {
element.getElementsByClassName('discount')[0].style.display = 'block';
}
function hideDiscount(element) {
element.getElementsByClassName('discount')[0].style.display = 'none';
}
</script>
</body>
</html>

Page 21 of 28
Practical 16
Develop a webpage for implementing dynamically changing Menus (PR-14)
<!DOCTYPE html>
<html>
<head>
<title>Dynamically Changing Menus</title>
<script>
// Function to create a new menu item
function createMenuItem(text, href) {
var menuItem = document.createElement("li");
var menuItemLink = document.createElement("a");
menuItemLink.href = href;
menuItemLink.textContent = text;
menuItem.appendChild(menuItemLink);
return menuItem;
}
// Function to update the menu
function updateMenu(menuItems) {
var menu = document.getElementById("menu");
menu.innerHTML = "";
for (var i = 0; i < menuItems.length; i++) {
menu.appendChild(createMenuItem(menuItems[i].text, menuItems[i].href));
}
}
// Function to change the menu when the user selects a different category
function changeMenu(category) {
var menuItems = [];
switch (category) {
case "Food":
menuItems.push({text: "Pizza", href: "/pizza"});
menuItems.push({text: "Pasta", href: "/pasta"});
menuItems.push({text: "Salad", href: "/salad"});
break;
case "Drinks":
menuItems.push({text: "Soda", href: "/soda"});
menuItems.push({text: "Juice", href: "/juice"});
menuItems.push({text: "Coffee", href: "/coffee"});
break;
case "Desserts":
menuItems.push({text: "Ice cream", href: "/ice_cream"});
menuItems.push({text: "Cake", href: "/cake"});
menuItems.push({text: "Pie", href: "/pie"});
break;
}
updateMenu(menuItems);
}
</script>
</head>
<body>
<h1>Dynamically Changing Menus</h1>

Page 22 of 28
<ul id="menu"></ul>

<select onchange="changeMenu(this.value)">
<option value="Food">Food</option>
<option value="Drinks">Drinks</option>
<option value="Desserts">Desserts</option>
</select>

<script>
// Update the menu initially
updateMenu([]);
</script>
</body>
</html>
OUTPUT

Page 23 of 28
Practical 17
Write a javascript program to create read, update and delete cookies. (PR-10)
// Create a cookie
function createCookie(name, value, days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
const expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + "; " + expires + "; path=/";
}
// Read a cookie
function readCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) === ' ') c = c.substring(1);
if (c.indexOf(nameEQ) === 0) {
return c.substring(nameEQ.length, c.length);
}
}
return null;
}
// Update a cookie
function updateCookie(name, newValue, days) {
const cookieValue = readCookie(name);
if (cookieValue !== null) {
createCookie(name, newValue, days);
}
}
// Delete a cookie
function deleteCookie(name) {
createCookie(name, "", -1);
}
// Example usage
createCookie('username', 'johndoe', 30); // Create a cookie named 'username' with the
value 'johndoe' that expires in 30 days
const usernameCookie = readCookie('username'); // Read the value of the 'username'
cookie
console.log(usernameCookie); // Output: johndoe
updateCookie('username', 'janedoe', 7); // Update the value of the 'username' cookie to
'janedoe' with an expiration of 7 days
const updatedUsernameCookie = readCookie('username'); // Read the updated value
of the 'username' cookie
console.log(updatedUsernameCookie); // Output: janedoe
deleteCookie('username'); // Delete the 'username' cookie

Page 24 of 28
Practical 18
Create a slideshow with the group of three images, also simulate next and previous transition between slides in
your Java Script. (PR-16)
<!DOCTYPE html>
<html>
<head>
<script>
pics = new Array('1.jpg' , '2.jpg' , '3.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;
}
documet.imag1.src = pics[count];
}
}
</script>
</head>
<body>
<img src="1.jpg" width="200" name="img1">
<br>
<input type="button" value="Next" onclick="slideshow(1)">
<input type="button" value="Back" onclick="slideshow(-1)">
</body>
</html>

Page 25 of 28
Practical 19
Write a JavaScript to having two frames. One frame containing button as “click here!” and after clicking this
button an message should display in the second frame by calling methods that defined in second frame.
MainFrame.html
<html>
<frameset cols="25%,25%">
<frame src="frame1.html" name="frame1"/>
<frame src="frame2.html" name="frame2"/>
</frameset>
</html>
Frame1.html
<html>
<body>
<h4>Frame 1<h4>
<input type="button"name="button1"value="Click Me" onclick="parent.frame2.display()"/>
</body>
</html>
Frame2.html
<html>
<head>
<script>
function display()
{
document.write("this is called from frame 1");
}
</script>
</head>
<body>
<h4>Frame 2</h4>
</body>
</html>

Page 26 of 28
Practical 20
Write a Java script to modify the status bar using on MouseOver and on MouseOut with links. When the user
moves his mouse over the links, it will display “MSBTE” in the status bar. When the user moves his mouse
away from the link the status bar will display nothing. (PR-15)
<html>
<head>
<title>JavaScript Status Bar</title></head>
<body>
<a href=" https://msbte.org.in/" onMouseOver="window.status='MSBTE';return true"
onMouseOut="window.status='';return true"> MSBTE
</a>
</body>
</html>

Page 27 of 28
Practical 21
Write a javascript to create a pull-down menu with three options [Google,MSBTE, Yahoo] once the user will
select one of the options then user will be redirected to that site. (PR-14)
<html>
<head>
<title>HTML Form</title>
<script language="javascript" type="text/javascript">
function getPage(choice)
{
page=choice.options[choice.selectedIndex].value;
if(page != "")
{
window.location=page;
}
}
</script>
</head>
<body>
<form name="myform" action="" method="post">
Select Your Favourite Website:
<select name="MenuChoice" onchange="getPage(this)">
<option
value="https://www.google.com">Google</option>
<option
value="https://www.msbte.org.in">MSBTE</option>
<option
value="https://www.yahoo.com">Yahoo</option>
</form>
</body>
</html>

Page 28 of 28

You might also like