Scribd
Upload
7 views25 pages

JavaScript Forms and Calculators Guide

The document contains multiple HTML snippets demonstrating various JavaScript functionalities, including form validation, simple interest calculation, string manipulation, and browser specifications. Each section provides a different example of using JavaScript to interact with HTML elements and perform calculations or display information. The examples cover topics such as event handling, user input, and basic arithmetic operations.

Uploaded by

prathvi07rajsingh
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
7 views25 pages

JavaScript Forms and Calculators Guide

The document contains multiple HTML snippets demonstrating various JavaScript functionalities, including form validation, simple interest calculation, string manipulation, and browser specifications. Each section provides a different example of using JavaScript to interact with HTML elements and perform calculations or display information. The examples cover topics such as event handling, user input, and basic arithmetic operations.

Uploaded by

prathvi07rajsingh
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

JAVA SCRIPT

Question 1:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form id="myform">
<label for="name">Name</label>
<input type="text" id="name"><br><br>
<label for="phoneno">Phone No.</label>
<input type="text" id="phoneno"><br><br>
<label for="email">Email</label>
<input type="email" id="email"><br><br>
<input type="submit" value="Submit"
onclick="formvalidation(); return false;">
</form>
<script>
function formvalidation() {
const name =
[Link]("name").value;
const phoneno =
[Link]("phoneno").value;
const email =
[Link]("email").value;

if (name === "" || phoneno === "" || email ===


"") {
alert("All fields are required");
return false;
}
for (let i = 0; i < [Link]; i++) {
if (name[i] >= '0' && name[i] <= '9') {
alert("Name should not contain digits");
return false;
}
}
for (let i = 0; i < [Link]; i++) {
if (phoneno[i] < '0' || phoneno[i] > '9') {
alert("Phone number should contain digits
only");
return false;
}
}
alert("Form submitted successfully!");
}
</script>
</body>
</html>

Output :

Question 2 :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>

<body>
<form>

<h2>Simple Interest Calculator</h2>

<label
for="principal">Principal:</label><br>
<input type="number" id="principal"
name="principal"><br>
<label for="rate">Rate of
Interest:</label><br>
<input type="number" id="rate"
name="rate"><br>
<label for="time">Time (in
years):</label><br>
<input type="number" id="time"
name="time"><br><br>
<label for="si">Simple
Interest:</label><br>
<input type="number" id="si"
name="si"><br><br>
<input type="button" value="Calculate
Simple Interest"
onclick="simpleInterest()"><br><br>
<input type="button" value="Clear"
onclick="clearSI()"><br><br>

<script>

function simpleInterest() {
let principal =
parseFloat([Link]("princip
al").value);
let rate =
parseFloat([Link]("rate").
value);
let time =
parseFloat([Link]("time").
value);
let si = (principal * rate * time) / 100;
[Link]("si").valu
e = si;
}
function clearResult() {
[Link]("fnum").
value = "";
[Link]("snum").
value = "";
[Link]("result").
value = "";
}
function clearSI() {
[Link]("principa
l").value = "";
[Link]("rate").v
alue = "";
[Link]("time").v
alue = "";
[Link]("si").valu
e = "";
}
</script>
</form>
</body>

</html>

Output:
Question 3 :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
table{
background-color: aqua;
font-size: 50px;
}
th:nth-child(1){
background-color: red;
color: white;

}
th:nth-child(2){
background-color: blue;
color: white;
}
th:nth-child(3){
background-color: yellow;
color: white;
}
h1{
font-size: 50px;
color: black;
}
</style>
</head>
<body align ="center">
<h1> MOVE YOUR MOUSE OVER A
COLOR</h1>
<table border="1" align="center">
<tr>
<th
onmouseover="Changecolor('red')"
onmouseout="resetcolor()">Red</th>
<th
onmouseover="Changecolor('blue')" onmous
eout="resetcolor()">blue</th>
<th
onmouseover="Changecolor('yellow')"
onmouseout="resetcolor()">Yellow</th>

</tr>
</table>
<script>
function Changecolor(color)
{
[Link]
=color;

}
function resetcolor(color)
{
[Link]
="white";
}
</script>

</body>
</html>
OUTPUT :
QUESTION 4 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Study Of String Oject and Various
Method </h1>
<script>
const sample =" helllo this is my java
script";
[Link]("lenght:",[Link]);
[Link]("uppercase:",[Link]
rCase());
[Link]("lowercase:",[Link]
Case());
[Link]("chr at inedx
4",[Link](4));
[Link]("index of
script:",[Link]("script"));
[Link]("last index of
a:",[Link]("a"));
[Link]("substring(0,10):",[Link]
bstring(0,10));
[Link]("concatenation:",[Link]
cat("and my java script code"));
[Link]("slicing:",[Link](0,10));

</script>
</body>
</html>

OUTPUT :

QUESTION 5 :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Browser Specefications</h1>
<script>
[Link]("Browser name
:"+[Link]);
[Link]("UserAgent
:"+[Link]);
[Link]("Platform
:"+[Link]);
[Link]("language:"+navigator.l
anguage);
[Link]("cookie enabled
:"+[Link]);

</script>
</body>
</html>

OUTPUT :
QUESTION 6:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a=prompt("enter a number for the
multiplication");
for(i=1;i<=10; i++ ){
table=a*i;
[Link](table);

}
</script>
</body>
</html>

OUTPUT :

QUESTION 7 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a= prompt("enter a number :");
if(a%a==0){
[Link]("the no. is a prime no.
");
}else{
[Link]("thr no. is not a prime
number");
}
</script>
</body>
</html>
OUTPUT :
QUESTION 8 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let expression = prompt("Enter a
mathematical expression (e.g., 5+3*2):");

let result = eval(expression);

alert("The result of " + expression + " is: "


+ result);

</script>
</body>
</html>

OUTPUT :
QUESTION 9:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>Document</title>
</head>
<script>
let a=prompt("enter a number :");
let fact=1;
for(let i=1;i<=a;i++){
fact=fact*i;
}
[Link](fact+"<br>");
</script>
<body>

</body>
</html>

OUTPUT:

QUESTION 10 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>GCD of Two Numbers</title>
</head>
<body>
<h1>GCD OF TWO NUMBERS</h1>
<script>

[Link]("<h3>History Object
Properties</h3>");

[Link]("Number of entries in history:


" + [Link] + "<br>");

[Link]("<button
onclick='[Link]()'>Go
Back</button><br>");
[Link]("<button
onclick='[Link]()'>Go
Forward</button><br>");
[Link]("<button onclick='[Link](-
2)'>Go Back 2 Pages</button><br>");

</script>
</body>
</html>

OUTPUT :

You might also like