CSS-pr-qb
CSS-pr-qb
<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>
<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>
<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;
}
<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>
<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>
<html>
<body>
<h2>Select a Fruit</h2>
<script>
function showMessage() {
var selected = document.getElementById("fruitSelect").value;
document.write("you selected" + selected)}
</script>
</body>
</html>
<html>
<body>
<script>
</body>
</html>
<html>
<body>
<script>
<html>
<body>
<script>
function openWindow() {
window.open("https://www.example.com", "_blank",
"width=500,height=500");
}
</script>
</body>
</html>
<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>
<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>
<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>
<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>
<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;
// Convert to uppercase
fname = fname.toUpperCase();
mname = mname.toUpperCase();
lname = lname.toUpperCase();
</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>
<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>
<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) {
cityInfoTable.style.display = "table";
} else {
cityInfoTable.style.display = "none";
}
}
</script>
</body>
</html>
<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>
<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
}
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>
<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";
<script>
var a = 5;
var b = 6;
var c = 7;
var s = (a + b + c) / 2;
document.write("Semi-perimeter is " + s + "<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>