0% found this document useful (0 votes)
16 views

CSS-pr-qb

Uploaded by

Ishwari khebade
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
0% found this document useful (0 votes)
16 views

CSS-pr-qb

Uploaded by

Ishwari khebade
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/ 28

CSS-PR-QB

1) Write a JavaScript to perform Arithmetic Operations.


=>

<html>
<head>
<title> Arithmetic Operations </title>
</head>
<body>
<script>
var a = parseInt(prompt("Enter 1st number :"));
var b = parseInt(prompt("Enter 2nd number :"));
var add = a+b;
var sub = a-b;
var div = a/b;
var mul = a*b;
alert("Addition is : "+add+
"\nSubtraction is :"+sub+
"\nDivision is :"+div+
"\nMultiplication is :"+mul);
</script>
</body>
</html>

2) Write a JavaScript to display simple messages using JavaScript


=>
<html>
<body>
<script>
var a = prompt("Enter your name :");
alert("Good Morning " +a+ "!!!");
</script>
</body>
</html>
3) Write a JavaScript to find Even and ODD Number
=>

<html>
<body>
<script>
var a = parseInt(prompt("Enter a number : "));
if(a%2==0)
{
document.write("Number is EVEN");
}
else
{
document.write("Number is ODD");
}
</script>
</body>
</html>

4) Write a JavaScript to check the number is positive or negative


=>

<html>
<body>
<script>
var a = parseInt(prompt("Enter a number : "));
if(a>0)
{
document.write("Number is Positive");
}
else if(a<0)
{
document.write("Number is Negative");
}
else
{
document.write("Number is zero");
}
</script>
</body>
</html>
5) Write a JavaScript to perform any 4 Array functions.
=>

<html>
<body>
<script>
var arr = [3, 2, 5, 9, 10];
document.write("Array elements are: " + arr + "<br>");
var ch = prompt("Enter the operation you want to perform:\n" +
"1. Shift\n" +
"2. Unshift\n" +
"3. Reverse\n" +
"4. Pop\n" +
"5. Sort");
switch(ch) {
case '1':
arr.shift();
document.write("Array elements after shift operation: " + arr);
break;
case '2':
var e = parseFloat(prompt("Enter the element to unshift:"));
arr.unshift(e);
document.write("Array elements after unshift operation: " + arr);
break;
case '3':
arr.reverse();
document.write("Array elements after reverse operation: " + arr);
break;
case '4':
arr.pop();
document.write("Array elements after pop operation: " + arr);
break;
case '5':
arr.sort(); // Sort numerically
document.write("Array elements after sort operation: " + arr);
break;
default:
document.write("Invalid Choice !!!");
}
</script>
</body>
</html>
6) Write a JavaScript to perform any 4 String functions.
=>

<html>
<body>
<script>
var str = "Artificial Intelligence and Machine Learning";
document.write("String is : " +str +"<br>");
var ch = prompt("Enter the operation you want to perform:\n" +
"1. Get Length\n" +
"2. Convert to Uppercase\n" +
"3. Convert to Lowercase\n" +
"4. Find the index of character\n" +
"5. Get a character at specified index ");

switch(ch) {
case '1':
document.write("Length of given String is " + str.length +"<br>");
break;
case '2':
document.write("Converted String is " + str.toUpperCase() +"<br>");
break;
case '3':
document.write("Converted String is " + str.toLowerCase() +"<br>");
break;
case '4':
var i = prompt("Enter character to find out index : " );
document.write("Index of "+i+ " is :" + str.indexOf(i) +"<br>");
break;
case '5':
var i = parseInt(prompt("Enter index to find out character at that position : "));
document.write("Character at index "+i+ " is :" + str.charAt(i) +"<br>");
break;
default:
document.write("Invalid Choice !!!");
}
</script>
</body>
</html>
7) Write a JavaScript to find cube of a number using function.
=>

<html>
<body>
<script>
function cube(num)
{
return num * num * num;
}

var number = parseFloat(prompt("Enter a number to find its cube:"));


document.write("The cube of " + number + " is: " + cube(number));
</script>
</body>
</html>

8) Write a JavaScript to find multiplication of a number using function


=>

<html>
<body>
<script>
function table(num) {
for (var i = 1; i <= 10; i++) {
var prod=num*i
document.write(num + " x " + i + " = " + prod + "<br>");
}
}
var number = parseFloat(prompt("Enter a number to print its table :"));
document.write("Multiplication table of " +number+ " is :" +"<br>");
table(number)
</script>
</body>
</html>
9) Write a JavaScript to demonstrate use of Switch-case. Perform any 3 cases.
Assume suitable Data
=>

done already

10) Create a webpage to design simple registration form with all major
controls.
=>

<html>
<head>
<title>College Registration Form</title>
</head>
<body>
<h2 align="center">College Registration Form</h2>
<div align="center">
<table border="1">
<tr>
Full Name:
<td><input type="text" id="name" name="name" required></td>
</tr>
<tr>
Address:
<td><textarea id="address" name="address" rows="4" cols="30"
></textarea></td>
</tr>
<tr>
Gender:
<td>
<input type="radio" name="gender" value="Male" > Male
<input type="radio" name="gender" value="Female"> Female
<input type="radio" id="other" name="gender" value="Other"> Other
</td>
</tr>
<tr>
Mobile Number:
<td><input type="number" name="mobile" ></td>
</tr>
<tr>
Country:
<td>
<select id="country" name="country" required>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Canada">Canada</option>
<option value="Australia">Australia</option>
</select>
</td>
</tr>
<tr>
<th>Email:</th>
<td><input type="email" id="email" name="email"></td>
</tr>
<tr>
<td><label>Department:</label></td>
<td>
<select id="department" name="department" required>
<option value="AIML">Artificial Intelligence and Machine Learning
(AIML)</option>
<option value="IF">Information Technology (IF)</option>
<option value="CM">Computer Science (CM)</option>
<option value="ME">Mechanical Engineering (ME)</option>
<option value="CE">Civil Engineering (CE)</option>
<option value="EE">Electrical Engineering (EE)</option>
</select>
</td>
</tr>
<tr>
<td align="center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
11) Write a JavaScript to demonstrate use of onBlur Event.
=>

<html>
<head>
<title>Event Onblur</title>
</head>
<body>
<h2>User Details Form</h2>
<form>
Username:
<input type="text" id="username" onblur="myFun()">
<br><br>
<input type="submit" value="Submit">
</form>
<script>
function myFun() {
var x = document.getElementById("username").value;
var a = x.toUpperCase();
}
</script>
</body> </html>

12) Write a JavaScript to demonstrate use of onFocus Event.


=>

<html>
<head>
<title>User Details Form</title>
</head>
<body>
<h2>User Details Form</h2>
<form>
Username:
<input type="text" id="username" name="username"
onfocus="this.style.backgroundColor='yellow'">
<br><br>

<input type="submit" value="Submit">


</form>
</body>
</html>
13) Write a JavaScript to demonstrate use of onChange Event.
=>

<html>
<body>
<h2>Select a Fruit</h2>

<!-- Dropdown List with onChange Event -->


<select id="fruitSelect" onchange="showMessage()">
<option value="">Select a fruit</option>
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
<option value="Mango">Mango</option>
</select>

<script>
function showMessage() {
var selected = document.getElementById("fruitSelect").value;
document.write("you selected" + selected)}
</script>

</body>
</html>

14) Write a JavaScript to demonstrate any 4 Date class functions.


=>

<html>
<body>

<h2>JavaScript Date Functions Demo</h2>

<script>

var currentDate = new Date();


document.write("Current Date and Time: " + currentDate + "<br>");

document.write("Day of the Week: " + currentDate.getDay() + "<br>");

document.write("Month: " + currentDate.getMonth() + "<br>");


document.write("Year: " + currentDate.getFullYear() + "<br>");
</script>

</body>
</html>

15) Write a JavaScript to demonstrate any 4 Math class functions


=>

<html>
<body>
<script>

var a = parseFloat(prompt("Enter the number :"));


var b = parseFloat(prompt("Enter the 2nd number :"));

document.write("Square root of : " +a+ " is " +Math.sqrt(a)+ "<br>");


document.write("Maximum number between " +a+ " and " +b+ " is : "
+Math.max(a,b)+ "<br>");
document.write("Minimum number between " +a+ " and " +b+ " is : "
+Math.min(a,b)+ "<br>");
document.write("Random value : " +Math.random(a,b));
</script>
</body>
</html>

16) Write a JavaScript to demonstrate use of Window.open() method.


=>

<html>
<body>

<button onclick="openWindow()">Open New Window</button>

<script>

function openWindow() {
window.open("https://www.example.com", "_blank",
"width=500,height=500");
}
</script>
</body>
</html>

17) Write a JavaScript to create a Cookie.


=>

<html>
<body>
<button onclick="f1()">Set Cookie
<button onclick="f2()">Get Cookie
</body>
<script>
function f1()
{
document.cookie="name = xyz ; expires = Wed 25 aug 2024 12:00:00 UTC";
alert("Cookie is created");
}
function f2()
{
alert(document.cookie);
}
</script>
</html>

18) Write a JavaScript to find a character is vowel or not using regular


Expression.
=>
<html>
<body>
<form name="myform">
<label> Enter the string to count vowels:</label>
<input type=text name=fname id=name><br>
<button onclick="f1()"> Count </button><br>
</body>
<script>
function f1()
{
var str = document.getElementById("name").value;
var re = /[aeiou]/gi;
arr = str.match(re);
if (arr)
{
alert("Number of vowels in given string : " +arr.length);
}
else
{
alert("no vowels found");
}
}
</script>
</html><body>
<script>

19) Write a JavaScript to find a character is in upper case or not using


regular Expression.
=>

<html>
<body>
<form name="myform">
<label> Enter the string :</label>
<input type=text name=fname id=name><br>
<button onclick="f1()"> Result</button><br>
</body>
<script>
function f1()
{
var str = document.getElementById("name").value;
var pat = /^[A-Z]/;
if (pat.test(str)) {
alert("First letter of the string is capitalized.");
} else {
alert("First letter of the string is not capitalized.");
}
}
</script>
</html>
20) Write a JavaScript to find a character is in lower case or not using
regular Expression.
=>

<html>
<body>
<form name="myform">
<label> Enter the string :</label>
<input type=text name=fname id=name><br>
<button onclick="f1()"> Result</button><br>
</body>
<script>
function f1()
{
var str = document.getElementById("name").value;
var pat = /^[a-z]/;
if (pat.test(str)) {
alert("First letter of the string is lowercased.");
} else {
alert("First letter of the string is not in lowercase.");
}
}
</script>
</html>

21) Create a webpage with Rollover Effect


=>

<html>
<script>
function f1()
{
document.cover.src="a.jpg"
}
function f2()
{
document.cover.src="b.jpg"
}
</script>
<body>
<h2> ROLLEOVER</h2>
<a><img src="a.jpg" height="300" width="300" name="cover"></a>
<a onmouseover = "f1()"></br>
<h3>flower 1</h3></a>
<a onmouseout = "f2()"></br>
<h3>flower 2</h3></a>
</body> </html>

22) Develop a webpage for implementing pulldown menu. Assume suitable


data.
=>

<html>
<body>
<form>
<table>
<tr><th>FRUITS</th>
<td>
<select>
<option value="mango">Mango</option>
<option value="apple">Apple</option>
<option value="kiwi">Kiwi</option>
<option value="watermelon">Watermelon</option>
<option value="starfruit">Starfruit</option>
<select>
</td>
</tr>
</table>
</form>
</body>
</html>

23) Develop a webpage for disabling a mouse right click.


=>

<html>
<body>
<script>
document.addEventListener("contextmenu", (event) => {
event.preventDefault();
});
</script>
</body>
</html>
24) Develop a webpage for creating rotating (changing) banner.
=>

<html>
<script>
var a = new Array("a.jpg","b.jpg","c.jpg","d.jpg")
var links= new
Array("www.britannica.com/science/flower","www.housebeautiful.com/lifestyle/
gardening/g13074130/beautiful-flower-
images/","www.pixabay.com/images/search/flowers/","www.blind-
magazine.com/tips/flower-photography-how-to-take-beautiful-flower-photos/")

banner=0;
function showlink()
{
document.location.href="https://"+links[banner]
}

function showbanner()
{
if (document.images)
{
banner++
}
if(banner==a.length)
{
banner=0
}
document.changebanner.src=a[banner]
}
setInterval("showbanner()",3000);
</script>
<body onload= "showbanner()">
<h2>BANNER</h2>
<img src="a.jpg" width="500" height="500" name="changebanner"
onclick="showlink()"/>
</body>
</html>
25) Develop a webpage for creating slideshow using banner.
=>

<html>
<script>
var myslide= new Array("a.jpg","b.jpg","c.jpg");
slide=0;
function showslide(slidenumber)
{
slide=slide+slidenumber;
if(slide>myslide.length-1)
{
slide=0;
}
if(slide<0)
{
slide=myslide.length-1
}
document.displayslide.src=myslide[slide];
}
</script>
<body>
<img src= "a.jpg" height="500" width= "500" name=
"displayslide"></br></br></br>
<input type="button" value= "back" onclick="showslide(-1)">
<input type="button" value= "forward" onclick="showslide(1)">
</body>
</html>

26) Accept full name of user in single text box and separate first, middle
and last name from accepted name and display it in capitalized form.
=>

<html>
<body>
Enter full name:
<input type="text" id="fullname">
<button onclick="processName()">Submit</button>
<div id="output"></div>

<script>
function processName() {
var name = document.getElementById("fullname").value;

// Split the name into parts


var nameParts = name.split(" ");

// Extract first, middle, and last names


var fname = nameParts[0] || ""; // First name
var lname = nameParts[nameParts.length - 1] || ""; // Last name
var mname = nameParts.slice(1, -1).join(" "); // Middle name

// Convert to uppercase
fname = fname.toUpperCase();
mname = mname.toUpperCase();
lname = lname.toUpperCase();

// Display results in the output div


document.getElementById("output").innerHTML = `
First Name: ${fname}<br>
Middle Name: ${mname}<br>
Last Name: ${lname}
`;
}
</script>

</body>
</html>

27) WAP to replace following specified string value with another value in
the string
String = “I will fail”Replace = “fail” by “pass”
=>
<html>
<body>
<script>
var str="I will fail"
var str1=str.replace("fail","pass")
document.write(str1)
</script>
</body>
</html>
28) Create a slideshow with the group of three images, also simulate the
next and previous transition between slides in your JavaScript.
=>

<html>
<script>
var myslide= new Array("a.jpg","b.jpg","c.jpg");
slide=0;
function showslide(slidenumber)
{
slide=slide+slidenumber;
if(slide>myslide.length-1)
{
slide=0;
}
if(slide<0)
{
slide=myslide.length-1
}
document.displayslide.src=myslide[slide];
}
</script>
<body>
<img src= "a.jpg" height="500" width= "500" name=
"displayslide"></br></br></br>
<input type="button" value= "back" onclick="showslide(-1)">
<input type="button" value= "forward" onclick="showslide(1)">
</body>
</html>

29) Write HTML Script that displays drop-down-list containing options


New Delhi, Mumbai, Bangalore. Write proper JavaScript such that when the
user selects any options corresponding description of about 20 words and
image of the city appear in table which appears below on the same page.
=>

<html>
<body>

<h1>Select a City</h1>
<select id="citySelect" onchange="showCityInfo()">
<option value="">--Select a City--</option>
<option value="newdelhi">New Delhi</option>
<option value="mumbai">Mumbai</option>
<option value="bangalore">Bangalore</option>
</select>

<table id="cityInfoTable" style="display: none;">


<thead>
<tr>
<th>City</th>
<th>Description</th>
<th>Image</th>
</tr>
</thead>
<tbody>
<tr>
<td id="cityName"></td>
<td id="cityDescription"></td>
<td id="cityImage"></td>
</tr>
</tbody>
</table>

<script>
function showCityInfo() {
const citySelect = document.getElementById("citySelect").value;
const cityName = document.getElementById("cityName");
const cityDescription = document.getElementById("cityDescription");
const cityImage = document.getElementById("cityImage");
const cityInfoTable = document.getElementById("cityInfoTable");

if (citySelect === "newdelhi") {


cityName.innerText = "New Delhi";
cityDescription.innerText = "The capital of India, known for its rich
history and culture.";
cityImage.innerHTML = '<img src="delhi.jpeg" alt="New Delhi"
width="200">';
} else if (citySelect === "mumbai") {
cityName.innerText = "Mumbai";
cityDescription.innerText = "The financial capital of India, famous for
Bollywood.";
cityImage.innerHTML = '<img src="mumbai.jpeg" alt="Mumbai"
width="200">';
} else if (citySelect === "bangalore") {
cityName.innerText = "Bangalore";
cityDescription.innerText = "Known as the Silicon Valley of India,
famous for its tech industry.";
cityImage.innerHTML = '<img src="bangalore.jpeg" alt="Bangalore"
width="200">';
} else {
cityName.innerText = "";
cityDescription.innerText = "";
cityImage.innerHTML = "";
}

if (citySelect) {
cityInfoTable.style.display = "table";
} else {
cityInfoTable.style.display = "none";
}

}
</script>

</body>
</html>

30) Write a JavaScript function that checks whether a passed string is


palindrome or not.
=>

<html>
<body>
<script>
var str= prompt("enter a string :")
function palindrome()
{
var reversedstr=str.split(" ").reverse().join(" ")
if(str==reversedstr)
{
alert(str+" is a pallindrome")
}
else
{
alert(str+" is a pallindrome")
}
}
palindrome()
</script>
</body>
</html>

31) Write a HTML script which displays 2 radio buttons to the users for
fruits and vegetables and 1 option list. When user select fruits radio button
option list should present only fruits names to the user & when user select
vegetable radio button option list should present only vegetable names to the
user
=>

<html>
<body>
<label><input type="radio" name="type"
onclick="document.getElementById('list').innerHTML =
'<option>Select</option><option>Apple</option><option>Banana</option>';">
Fruits</label>
<label><input type="radio" name="type"
onclick="document.getElementById('list').innerHTML =
'<option>Select</option><option>Carrot</option><option>Potato</option>';">
Vegetables</label>
<select id="list">
<option>--Select--</option>
</select>
</body>
</html>

32) 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.
=>

<html>
<body>
<a href="#" onmouseover="f1()" onmouseout="window.status=''">Hover over
me</a>
<script>
function f1()
{
window.status="MSBTE"
}

</body>
</html>

33) Write a javascript that displays all properties of window object


=>
<html>
<body>

<button onclick="document.body.innerHTML =
Object.keys(window).join('<br>')">Show Window Properties</button>

</body>
</html>

34) Write a function that prompts the user for a color and uses what they
select to set the background color of the new webpage opened.
=>

<html>
<body>
<script>
var col =prompt("which colour do you want ?");
document.body.style.backgroundColor = col;
document.write("you have selected "+col+" colour" );
</script>
</body>
</html>
35) Write a JavaScript program that create a scrolling text on the status
line of a window
=>

<html>
<head>
<title>Scrolling Text</title>
<script>
function startScrollingText() {
var text = "This is a scrolling text on the status line."; // Text to scroll
var i = 0; // Index to track the position of text

function scrollText() {
window.status = text.substring(i); // Update status line
i = (i + 1) % text.length; // Loop through text
}

// Set interval to update status line every 150ms


setInterval(scrollText, 150);
}

window.onload = startScrollingText; // Start scrolling when page loads


</script>
</head>
<body>
<h1>Scrolling Text Example</h1>
</body>
</html>

36) Develop a JavaScript Program to Create Rotating Banner Ads with


URL Links. Create a slideshow with the group of four images, also simulate
the next and previous transition between slides in your JavaScript
=>

done already
37) Write a webpage that accepts Username and adharcard as input texts.
When the user enters adhaarcard number ,the JavaScript validates card
number and diplays whether card number is valid or not. (Assume valid
adhaar card format to be nnnn.nnnn.nnnn or nnnn-nnnn-nnnn)
=>

<html>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" required><br><br>

<label for="aadhaar">Aadhaar Card Number:</label>


<input type="text" id="aadhaar" required><br><br>

<button type="button" onclick="validateAadhaar()">Submit</button>


</form>

<script>
function validateAadhaar() {
var aadhaar = document.getElementById("aadhaar").value; // Corrected
ID here
var pattern = /^[0-9]{4}[-.]?[0-9]{4}[-.]?[0-9]{4}$/;

if (pattern.test(aadhaar)) {
alert("Valid Aadhaar card number");
} else {
alert("Invalid Aadhaar card number");
}
}
</script>
</body>
</html>
38) Write HTML Script that displays textboxes for accepting Name,
middlename, Surname of the user and a Submit button. Write proper
JavaScript such that when the user clicks on submit button: i) All texboxes
must get disabled and change the color to “RED” and with respective labels.
=>

<html>
<body>
<h2>User Information Form</h2>
<form id="userForm">
<div>
<label>Name:</label>
<input type="text" id="name" name="name">
</div>
<div>
<label>Middle Name:</label>
<input type="text" id="middlename" name="middlename">
</div>
<div>
<label>Surname:</label>
<input type="text" id="surname" name="surname">
</div>
<button type="button" onclick="submitForm()">Submit</button>
</form>

<script>
function submitForm() {
document.getElementById("name").disabled = true;
document.getElementById("name").style.backgroundColor = "red";

document.getElementById("middlename").disabled = true;
document.getElementById("middlename").style.backgroundColor = "red";

document.getElementById("surname").disabled = true;
document.getElementById("surname").style.backgroundColor = "red";

alert("Form submitted! Fields are now disabled.");


}
</script>
</body>
</html>
39) Write a JavaScript program to find the area of a triangle where lengths
of the three of its sides are 5, 6, and 7.
=>
<html>
<body>
<h2> Area of triangle </h2>

<script>
var a = 5;
var b = 6;
var c = 7;

document.write("Side one : " + a + "<br>");


document.write("Side two : " +b + "<br>");
document.write("Side three : " +c + "<br>");

var s = (a + b + c) / 2;
document.write("Semi-perimeter is " + s + "<br>");

var area = Math.sqrt(s * (s - a) * (s - b) * (s - c));


document.write("Area of Triangle using three sides : " +area +
"<br>");

</script>
</body>
</html>
40) Write a script for creating following frame structure Fruits, Flowers
and Cities are links to the webpage fruits.html, flowers.html, cities.html
respectively. When these links are clicked corresponding data appears in
frame 3

=>
<html>
<head>
<title>Frame Structure</title>
</head>
<frameset rows = "20% , *">
<frame name ="frame1">
<frameset cols= "25%, * ">
<frame src ="topframe.html">
<frame name="frame3" >
</frameset>
</frameset>
</html>

topframe.html
<html>
<body>
<a href= "pr10.html" target = "frame3"> fruits </a>
<a href= "pr11.html" target = "frame3"> flowers </a>
<a href= "pr12_1.html" target = "frame3"> cities </a>
</body>
</html>

You might also like