Complete Web Designing Course for Beginners

Lesson 6.6 – Functions

🚀 Creating Reusable Blocks of Code in JavaScript

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Functions

✅ Create Functions

✅ Call Functions

✅ Use Parameters

✅ Use Return Values

✅ Reuse Code Efficiently

✅ Build Professional JavaScript Programs

📖 Introduction

Imagine you want to display:

Welcome Student

10 times in different places of your program.

Without Functions:

alert("Welcome Student");

alert("Welcome Student");

alert("Welcome Student");

alert("Welcome Student");

Lots of repeated code.

Instead of writing the same code again and again, we can create:

⚙️ Functions

🤔 What is a Function?

A Function is a reusable block of code designed to perform a specific task.

Simple Definition

Function = Reusable Block of Code

Real Life Example

Imagine a remote control.

When you press:

Power Button

TV performs a task.

Similarly:

When a Function is called,

JavaScript performs a task.

🌟 Why Use Functions?

Functions help:

✅ Reduce Code

✅ Improve Readability

✅ Save Time

✅ Avoid Repetition

✅ Make Programs Professional

🎯 Function Syntax

function functionName()
{

Code Here

}

Example:

function welcome()
{

alert("Welcome Student");

}

🌟 Function Declaration

Creating a function is called:

Function Declaration

Example:

function greet()
{

alert("Hello");

}

Nothing happens yet.

The function is only created.

🎯 Function Calling

To execute a function:

functionName();

Example:

function greet()
{

alert("Hello Student");

}

greet();

Output

Hello Student

🌟 First Function Program

function welcome()
{

alert("Welcome to JavaScript");

}

welcome();

Output

Welcome to JavaScript

🎯 Calling Function Multiple Times

function welcome()
{

   alert("Welcome Student");

}

welcome();

welcome();

welcome();

Output

Welcome Student

Welcome Student

Welcome Student

Same function reused.

🌟 Function Example Using document.write()

function showMessage()
{

   document.write("Learning Functions");

}

showMessage();

Output

Learning Functions

🎯 Function with Parameters

Sometimes functions need input values.

These inputs are called:

Parameters

Syntax

function functionName(parameter)
{

Code

}

Example

function greet(name)
{

alert("Hello " + name);

}

greet("Rahul");

Output

Hello Rahul

How It Works

Parameter:

name

Receives:

"Rahul"

🌟 Multiple Parameters

function studentInfo(name, age)
{

   alert(name);

   alert(age);

}

studentInfo("Rahul",18);

Output

Rahul

18

🎯 Addition Function

function add(a,b)
{

   alert(a+b);

}

add(10,20);

Output

Example

function add(a,b)
{

   let total = a+b;

   alert(total);

}

add(50,25);

Output

🌟 Function with Return Value

Sometimes a function sends data back.

Use:

return

Syntax

function name()
{

return value;

}

Example

function add(a,b)
{

return a+b;

}

let result = add(10,20);

alert(result);

Output

How Return Works

Function:

add(10,20)

returns:

Stored inside:

result

🎯 Area of Rectangle Program

Formula:

Area = Length × Width

Program

function area(length,width)
{

return length * width;

}

let result = area(10,5);

alert(result);

Output

🌟 Function for Student Information

function student(name,branch)
{

   alert("Name: " + name);

   alert("Branch: " + branch);

}

student("Rahul","Computer Science");

Output

Name: Rahul

Branch: Computer Science

🎯 Function with No Parameters

function college()
{

alert("Government Polytechnic");

}

college();

Output

Government Polytechnic

🌟 Function with Parameters and Return

function multiply(a,b)
{

   return a*b;

}

let result = multiply(5,4);

alert(result);

Output

🎯 Function Scope (Basic Introduction)

Variables created inside a function belong only to that function.

Example:

function test()
{

let name = "Rahul";

alert(name);

}

test();

Output:

Rahul

Outside the function:

alert(name);

Result:

Error

Because the variable exists only inside the function.

🌟 Complete Practical Program

index.html

<!DOCTYPE html>

<html>

<head>

<title>Functions Example</title>

</head>

<body>

<script>

function welcome()
{

   alert("Welcome to JavaScript Functions");

}

welcome();

</script>

</body>

</html>

🎯 Expected Output

Popup appears:

Welcome to JavaScript Functions

🌟 Calculator Function Example

function add(a,b)
{

return a+b;

}

function subtract(a,b)
{

return a-b;

}

alert(add(20,10));

alert(subtract(20,10));

Output

30

10

🏫 Real World Applications

Functions are used in:

✅ Calculator Apps

✅ Login Systems

✅ Registration Forms

✅ E-Commerce Websites

✅ Banking Systems

✅ Attendance Systems

✅ Games

✅ Robotics Dashboards

⚠️ Common Beginner Mistakes

Mistake 1

Creating Function But Not Calling It

Wrong:

function hello()
{

alert("Hello");

}

Output:

Nothing Happens

Correct:

hello();

Mistake 2

Missing Parentheses

Wrong:

hello;

Correct:

hello();

Mistake 3

Wrong Parameter Count

function add(a,b)
{

alert(a+b);

}

add(10);

May give unexpected results.

🌟 Best Practices

✅ Use meaningful function names.

✅ Keep functions small.

✅ Avoid duplicate code.

✅ Use parameters when needed.

✅ Use return for results.

🏆 Mini Project – Student Greeting System

Create a function:

function greet(name)
{

   alert("Welcome " + name);

}

Call:

greet("Rahul");

Output:

Welcome Rahul

📝 Practical Activity

Create Functions:

1. Addition Function

add(10,20);

2. Multiplication Function

multiply(5,6);

3. Student Information Function


student("Rahul","Computer Science");

Display outputs using alert().

📋 Assignment

Assignment 6.6

What is a Function?
Why are Functions important?
How do you create a Function?
How do you call a Function?
What are Parameters?
What is a Return Value?
Create an Addition Function.
Create a Student Information Function.

🧠 Quiz

Q1. What is a Function?

A. Variable

B. Loop

C. Reusable Block of Code

D. Operator

✅ Answer: C

Q2. Which keyword creates a function?

A. create

B. function

C. method

D. define

✅ Answer: B

Q3. How do you call a function named hello?

A. hello

B. call hello

C. hello()

D. function hello()

✅ Answer: C

Q4. What is used to send data into a function?

A. Loop

B. Parameter

C. Operator

D. Variable

✅ Answer: B

Q5. Which keyword sends a value back from a function?

A. back

B. send

C. return

D. result

✅ Answer: C

📌 Lesson Summary

✅ Functions are reusable blocks of code.

✅ Functions reduce repetition and make programs cleaner.

✅ Functions can accept parameters.

✅ Functions can return values.

✅ Functions are used extensively in modern JavaScript applications.

✅ Learning Functions is essential before building advanced projects.