Scribd
Upload
111 views8 pages

FSD Module 9

The document outlines three JavaScript programs demonstrating functions and event handling. Program 1 calculates the factorial, Fibonacci series, prime numbers, and checks for palindromes based on user input. Program 2 enhances the user interface with buttons for each function, while Program 3 validates registration form fields including name, mobile number, and email format.

Uploaded by

swethaj789
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
111 views8 pages

FSD Module 9

The document outlines three JavaScript programs demonstrating functions and event handling. Program 1 calculates the factorial, Fibonacci series, prime numbers, and checks for palindromes based on user input. Program 2 enhances the user interface with buttons for each function, while Program 3 validates registration form fields including name, mobile number, and email format.

Uploaded by

swethaj789
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/ 8

Module 9 – JavaScript Functions and Events

Program 1 – Design a appropriate function should be called to display


● Factorial of that number
● Fibonacci series up to that number
● Prime numbers up to that number
● Is it palindrome or not

Aim: To design a appropriate function should be called to display


● Factorial of that number
● Fibonacci series up to that number
● Prime numbers up to that number
● Is it palindrome or not

Procedure:

1. Open the Visual Studio Code, Open required folder, create a HTML file and save it.
2. To embed external JavaScript, create an external JavaScript file, save it in the same
folder and include it into HTML using <script> element.
3. Select the Toggle Panel to open the prompt.
Or
Use Ctrl + j to open the prompt
4. Step 4: Type PROGRAM_NAME.html in the prompt.
5. You will get the web page opened.

Source code:

9_a.js

function fact(n)
{
let fact=1, i;
for(i=1;i<=n;i++)
fact*=i;
alert("Factorial of the given number, "+fact);
}

function genFib(n)
{
let a=-1, b=+1, c;
c = a + b;
while(c<n)
{
document.write(c + "<br/>")
a = b;
b = c;
c = a + b;
}
}

pg. 1
function checkPrime(n)
{
let i, count=0;
for(i=1; i<=n; i++)
{
if(Math.floor(n%i)==0)
count++;
}
if(count==2)
alert("Given number, "+n+" is a prime number !")
else
alert("Given number, "+n+" is not a prime number !")
}

function checkPal(n)
{
let m, rem, sum=0;
m=n;
while(n>0)
{
rem = Math.floor(n%10);
sum = sum*10+rem;
n = Math.floor(n/10);
}
if(sum==m)
alert("Given number, "+m+" is a palindrome !")
else
alert("Given number, "+m+" is not a palindrome !")
}

9_a.html

<!--Program to demonstrate event hanlders-->


<!doctype html>
<html>
<head>
<title>Demonstrating event handlers</title>
</head>
<body>
<script src="9_a.js">
</script>
<h2>JavaScript Functions and Events</h2>
<h3>Click the following to get concerned output</h3><br/>
<script>
let n = parseInt(prompt("Enter an integer",0));
</script>
<ul>
<li onclick="fact(n)">Factorial</li>
<li onclick="genFib(n)">Fibbonacci</li>
<li onclick="checkPrime(n)">Prime</li>

pg. 2
<li onclick="checkPal(n)">Palindrome</li>
</ul>
</body>
</html>

Program 2 – Design a HTML having a text box and four buttons named Factorial,
Fibonacci, Prime, and Palindrome. When a button is pressed an appropriate function
should be called to display
1. Factorial of that number
2. Fibonacci series up to that number
3. Prime numbers up to that number
4. Is it palindrome or not

Aim: To design a HTML having a text box and four buttons named Factorial, Fibonacci,
Prime, and Palindrome. When a button is pressed an appropriate function should be called to
display
1. Factorial of that number
2. Fibonacci series up to that number
3. Prime numbers up to that number
4. Is it palindrome or not

Procedure:

1. Open the Visual Studio Code, Open required folder, create a HTML file and save it.
2. To embed external JavaScript, create an external JavaScript file, save it in the same
folder and include it into HTML using <script> element.
3. Select the Toggle Panel to open the prompt.
Or
Use Ctrl + j to open the prompt
4. Step 4: Type PROGRAM_NAME.html in the prompt.
5. You will get the web page opened.

9_b.js
function findFact()
{
let n = document.getElementById("ip").value;
let fact=1, i;
for(i=1; i<=n; i++)
fact = fact * i;
document.getElementById("op").value = fact;
}

function genFib()
{
let a=-1, b=+1, c, n;
n = document.getElementById("ip").value;

pg. 3
c = a + b;
let text="";
while(c<n)
{
text = text + c + " ";
a = b;
b = c;
c = a + b;
}
document.getElementById("op").value = text;
}

function checkPrime()
{
let i, count=0;
let n = document.getElementById("ip").value;
for(i=1; i<=n; i++)
{
if(Math.floor(n%i)==0)
count++;
}
if(count==2)
document.getElementById("op").value = "Prime number !";
else
document.getElementById("op").value = "Not a prime number !"
}

function checkPal()
{
let m, rem, sum=0;
let n = document.getElementById("ip").value;
m=n;
while(n>0)
{
rem = Math.floor(n%10);
sum = sum*10+rem;
n = Math.floor(n/10);
}
if(sum==m)
document.getElementById("op").value = "Palindrome !";
else
document.getElementById("op").value = "Not a palindrome !";
}

9_b.html

<!-- Demonstrating functions and events in JavaScript-->


<!doctype html>
<html>
<head>
<title>Demonstrating functions and events in JavaScript</title>
<script src="9_b.js">
pg. 4
</script>
</head>
<body>
<h2>Demonstrating forms and event handling</h2>
<form>
<label>Enter an integer </label>
<input type="text" id="ip" name="ip"/>
<br/><br/>
<label>Output</label>
<input type="text" id="op" name="op"/>
<br/><br/>
<button type="button" onclick="findFact()">
Find Factorial
</button>&nbsp;&nbsp;
<button type="button" onclick="genFib()">
Generate Fibbonacci
</button> &nbsp;&nbsp;
<button type="button" onclick="checkPrime()">
check Prime
</button> &nbsp;&nbsp;
<button type="button" onclick="checkPal()">
Check Palindrome
</button>
</form>
</body>
</html>

Program 3 – Write a program to validate the following fields in a registration page


i. Name (start with alphabet and followed by alphanumeric and the length
should not be less than 6 characters)
ii. Mobile (only numbers and length 10 digits)
iii. E-mail (should contain format like [email protected])

Aim: To write a program to validate the following fields in a registration page


i. Name (start with alphabet and followed by alphanumeric and the length should
not be less than 6 characters)
ii. Mobile (only numbers and length 10 digits)
iii. E-mail (should contain format like [email protected])

Procedure:

1. Open the Visual Studio Code, Open required folder, create a HTML file and save
it.
2. To embed external JavaScript, create an external JavaScript file, save it in the
same folder and include it into HTML using <script> element.
3. Select the Toggle Panel to open the prompt.
Or
Use Ctrl + j to open the prompt
pg. 5
4. Step 4: Type PROGRAM_NAME.html in the prompt.
5. You will get the web page opened.
Source code:

9_c.js
function validate()
{
let name = document.getElementById("name").value;
alert(name);
const regExp1 = /^[A-Za-z][A-Za-z0-9]{5,}/;
if(regExp1.test(name))
alert("Valid Name!")
else
alert("Invalid Name !")
let mblno = document.getElementById("mno").value;
alert(mblno);
const regExp2 = /^\+[0-9]{2}\s[0-9]{10}/;
if (regExp2.test(mblno)){
alert("Valid phone number!");
} else {
alert("Invalid phone number!");
}
const regExp3 = /^[A-Za-z][A-Za-z0-9.-_]+@[A-Za-z0-9-]+\.[A-Za-z]{2,}/;
let mailId = document.getElementById("mailId").value;
alert(mailId);
if (regExp3.test(mailId))
{
alert("Valid e-mail id!");
}
else
{
alert("Invalid e-mail id!");

pg. 6
}
document.getElementById("name").value = "";
document.getElementById("mno").value="";
document.getElementById("mailId").value="";
document.getElementById("name").focus();
}

9_c.html
<!-- Program to demonstrate validations in a registration form -->
<!doctype html>
<html>
<head>
<title> Demonstrating registration form validations </title>
</head>
<body>
<script src="9_c.js"></script>
<form>
<table align="center" border="0" width="25%">
<tr>
<th colspan="2">
Registration form
</th>
</tr>
<tr>
<td>
<label>Name</label>
</td>
<td>
<input type="text" id="name" size="25" maxlength="25" />
</td>
</tr>

pg. 7
<tr>
<td>
<label>Mobile Number</label>
</td>
<td>
<input type="text" size="25" maxlength="14" id="mno"/>
</td>
</tr>
<tr>
<td>
<label>Mobile Number</label>
</td>
<td>
<input type="text" id="mailId" size="25" maxlength="30" "/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button type="button" onclick="validate()">
Submit
</button>
</td>
</tr>
</table>
</form>
</body>
</html>

pg. 8

You might also like