Index: 13
Title of the Program: JS | Function (4-types) with examples
Objectives
• To understand the concept and purpose of functions in JavaScript.
• To differentiate between the four main types of functions based on their arguments and
return values.
• To practice declaring and calling functions to perform specific tasks.
• To learn how to use functions to write reusable and modular code.
Requirements
1. Computer System
2. A Code Editor (e.g., Sublime Text, Notepad++)
3. A Modern Web Browser (e.g., Chrome, Firefox)
Theory: JavaScript Functions
A function in JavaScript is a block of code designed to perform a particular task. It is executed
when "something" calls it. Using functions allows you to write reusable code, as you can define
the code once and use it many times.
Functions can be classified into four main types based on whether they accept arguments (inputs)
and whether they return a value (output).
1. Function with No Arguments and No Return Value: This type of function performs a
task but does not receive any input or send back any output. It is typically used for simple
actions like displaying a message.
2. Function with Arguments and No Return Value: This function takes one or more inputs,
called arguments, and uses them to perform a task. It does not return any value to the caller.
3. Function with No Arguments and a Return Value: This function performs a task and
sends a result back to the code that called it. It does not require any input to perform its
task.
4. Function with Arguments and a Return Value: This is the most common and versatile
type. It takes one or more inputs, performs a task using those inputs, and then sends a result
back.
Procedure
Program 1: Function with No Arguments and No Return Value
Problem Statement: Create a function that displays a welcome message to the user when a button
is clicked.
Computer Department-KMSS, Bagbazar
HTML Program:
<!DOCTYPE html>
<html>
<head>
<title>No Arg, No Return</title>
</head>
<body>
<h1>Function Type 1: No Arguments and No Return Value</h1>
<p>Click the button to see the welcome message.</p>
<button onclick="displayMessage()">Click Me</button>
<script>
function displayMessage() {
alert("Welcome to the JavaScript Functions Lab!");
}
</script>
</body>
</html>
Output:
When the "Click Me" button is clicked, a popup alert box will appear with the message: "Welcome
to the JavaScript Functions Lab!".
Program 2: Function with No Arguments and No Return Value
Problem Statement: Create a function that takes a number from the user, checks if it is odd or
even, and displays the result.
HTML Program:
<!DOCTYPE html>
<html>
<head>
<title>No Arg, No Return 2</title>
</head>
<body>
<h1>Function Type 1: Example 2</h1>
<p>Check the console for the result after entering a number in the
prompt.</p>
<script>
function checkOddEven() {
let number = parseInt(prompt("Enter a number to check:"));
if (number % 2 === 0) {
Computer Department-KMSS, Bagbazar
[Link]("The number " + number + " is Even.");
} else {
[Link]("The number " + number + " is Odd.");
}
}
checkOddEven();
</script>
</body>
</html>
Output:
A prompt box will appear asking for a number. If you enter 15, the browser's developer console
will show: "The number 15 is Odd.".
Program 3: Function with Arguments and No Return Value
Problem Statement: Create a function that takes two numbers from the user as arguments and
displays their sum.
HTML Program:
<!DOCTYPE html>
<html>
<head>
<title>Arg, No Return</title>
</head>
<body>
<h1>Function Type 2: With Arguments and No Return Value</h1>
<p>Check the browser's developer console for the output after entering two
numbers.</p>
<script>
function calculateSum(num1, num2) {
let sum = num1 + num2;
[Link]("The sum is: " + sum);
}
// Taking numbers from the user
let a = parseFloat(prompt("Enter the first number:"));
let b = parseFloat(prompt("Enter the second number:"));
calculateSum(a, b);
</script>
</body>
</html>
Computer Department-KMSS, Bagbazar
Output:
Two prompt boxes will appear. If you enter 25 and 10, the browser's developer console will show:
"The sum is: 35".
Program 4: Function with Arguments and No Return Value
Problem Statement: Create a function that takes two numbers from the user as arguments and
calculates their sum. Display the result on the web page.
HTML Program:
<!DOCTYPE html>
<html>
<head>
<title>Arg, No Return 2</title>
</head>
<body>
<h1>Function Type 2: Example 2</h1>
<p id="sumResult"></p>
<script>
function addTwoNumbers(a, b) {
let sum = a + b;
[Link]("sumResult").innerHTML = "The sum of " + a
+ " and " + b + " is: " + sum;
}
// Taking numbers from the user
let x = parseFloat(prompt("Enter the first number:"));
let y = parseFloat(prompt("Enter the second number:"));
addTwoNumbers(x, y);
</script>
</body>
</html>
Output:
Two prompt boxes will appear. If you enter 5 and 7, the page will display: "The sum of 5 and 7 is:
12".
Program 5: Function with No Arguments and a Return Value
Computer Department-KMSS, Bagbazar
Problem Statement: Create a function that returns a fixed string message.
HTML Program:
<!DOCTYPE html>
<html>
<head>
<title>No Arg, With Return</title>
</head>
<body>
<h1>Function Type 3: No Arguments and a Return Value</h1>
<p id="message"></p>
<script>
function getGreeting() {
return "Hello, World!";
}
let message = getGreeting();
[Link]("message").innerHTML = message;
</script>
</body>
</html>
Output:
When the page loads, the following text will be displayed on the screen: "Hello, World!".
Program 6: Function with No Arguments and a Return Value
Problem Statement: Create a function that takes a number from the user and returns the factorial.
HTML Program:
<!DOCTYPE html>
<html>
<head>
<title>No Arg, With Return 2</title>
</head>
<body>
<h1>Function Type 3: Example 2</h1>
<p id="factorialResult"></p>
<script>
function getFactorial() {
let n = parseInt(prompt("Enter a number to find its factorial:"));
let result = 1;
Computer Department-KMSS, Bagbazar
for (let i = 1; i <= n; i++) {
result *= i;
}
return result;
}
let factorial = getFactorial();
[Link]("factorialResult").innerHTML = "The factorial
is: " + factorial;
</script>
</body>
</html>
Output:
A prompt box will appear. If you enter 5, the page will display: "The factorial is: 120".
Program 7: Function with Arguments and a Return Value
Problem Statement: Create a function that takes a name and age from the user, and returns a
formatted string. Display the returned string on the web page.
HTML Program:
<!DOCTYPE html>
<html>
<head>
<title>Arg, With Return</title>
</head>
<body>
<h1>Function Type 4: With Arguments and a Return Value</h1>
<p id="info"></p>
<script>
function createInfoString(name, age) {
return name + " is " + age + " years old.";
}
// Taking input from the user
let personName = prompt("Enter a person's name:");
let personAge = parseInt(prompt("Enter their age:"));
let personInfo = createInfoString(personName, personAge);
[Link]("info").innerHTML = personInfo;
</script>
</body>
</html>
Computer Department-KMSS, Bagbazar
Output:
Two prompt boxes will appear. If you enter "Suman" and "30", the page will display: "Suman is
30 years old."
Program 8: Function with Arguments and a Return Value
Problem Statement: Create a function that takes a number N from the user as an argument and
returns the sum of the first N natural numbers.
HTML Program:
<!DOCTYPE html>
<html>
<head>
<title>Arg, With Return 2</title>
</head>
<body>
<h1>Function Type 4: Example 2</h1>
<p id="sumNaturalNumbers"></p>
<script>
function sumOfNaturalNumbers(n) {
let sum = 0;
for (let i = 1; i <= n; i++) {
sum += i;
}
return sum;
}
// Taking input from the user
let num = parseInt(prompt("Enter a number to sum up to:"));
let total = sumOfNaturalNumbers(num);
[Link]("sumNaturalNumbers").innerHTML = "The sum of
the first " + num + " natural numbers is: " + total;
</script>
</body>
</html>
Output:
A prompt box will appear. If you enter 10, the page will display: "The sum of the first 10 natural
numbers is: 55".
Computer Department-KMSS, Bagbazar
Conclusion
By completing this lab, I have developed a strong foundational understanding of JavaScript
functions. I can now effectively declare and call functions, pass arguments to them, and receive
return values. I understand how to choose the appropriate function type for a given task, which is
a key step towards writing more organized, efficient, and reusable code.
Computer Department-KMSS, Bagbazar