JavaScript Functions and Events

JavaScript Functions and Events

Functions are one of the most important concepts in programming. A function is a block of code that does a specific job. You can create a function once and use it many times without rewriting the code. Events are things that happen—like clicking a button, typing in an input field, or moving the mouse. In this chapter, we'll learn how to create functions and respond to events.

What is a Function?

A function is a reusable block of code that performs a specific task. Creating a function involves:

• Function name: A descriptive name for what the function does
• Parameters: Information the function needs (optional)
• Function body: The code that executes when the function is called
• Return value: The result the function gives back (optional)

Creating and Calling Functions

Basic function:

// Create the function
function greet() {
  console.log("Hello, friend!");
}

// Call (use) the function
greet();  // outputs: "Hello, friend!"
greet();  // outputs: "Hello, friend!" again

Function with parameters:

// Create a function that accepts a name parameter
function greetPerson(name) {
  console.log("Hello, " + name + "!");
}

// Call the function with different names
greetPerson("Priya");   // outputs: "Hello, Priya!"
greetPerson("Rohan");   // outputs: "Hello, Rohan!"
greetPerson("Kavya");   // outputs: "Hello, Kavya!"

Function with multiple parameters:

function add(num1, num2) {
  var sum = num1 + num2;
  return sum;
}

var result = add(5, 3);
console.log(result);  // outputs: 8

Return Values

Functions can return a value back to the code that called them. Use the return keyword:

function calculateArea(length, width) {
  var area = length * width;
  return area;
}

var roomArea = calculateArea(4, 5);
console.log(roomArea);  // outputs: 20

var gardenArea = calculateArea(10, 8);
console.log(gardenArea);  // outputs: 80

What are Events?

Events are actions that happen in a web page. Common events include:

• click: When the user clicks on an element
• mouseover: When the mouse moves over an element
• mouseout: When the mouse leaves an element
• keydown: When the user presses a key
• change: When the value in a form field changes
• submit: When a form is submitted
• load: When a page finishes loading

Handling Events with Functions

You can make a function execute when an event happens using an event listener:

HTML:

<button id="myButton">Click Me!</button>

JavaScript:

function buttonClicked() {
  console.log("Button was clicked!");
}

var button = document.getElementById("myButton");
button.addEventListener("click", buttonClicked);

Now whenever someone clicks the button, the buttonClicked function runs!

Practical Example: A Simple Game

Let's create a function that responds to button clicks:

var score = 0;

function increaseScore() {
  score = score + 1;
  console.log("Your score: " + score);
  document.getElementById("scoreDisplay").innerHTML = score;
}

// In HTML:
// <button id="scoreButton">Increase Score</button>
// <p>Score: <span id="scoreDisplay">0</span></p>

var scoreButton = document.getElementById("scoreButton");
scoreButton.addEventListener("click", increaseScore);

Anonymous Functions in Event Listeners

Sometimes you don't want to create a separate function. You can use an anonymous function directly:

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log("Button clicked!");
  console.log(new Date());  // shows current date/time
});

Working with Form Events

Forms are interactive elements that users fill out. You can respond when they change:

// HTML:
// <input type="text" id="nameInput" placeholder="Enter your name">
// <p id="greeting"></p>

var nameInput = document.getElementById("nameInput");

nameInput.addEventListener("change", function() {
  var name = nameInput.value;
  document.getElementById("greeting").innerHTML =
    "Nice to meet you, " + name + "!";
});

Multiple Event Listeners

An element can have multiple event listeners:

var button = document.getElementById("myButton");

button.addEventListener("click", function() {
  console.log("You clicked the button!");
});

button.addEventListener("mouseover", function() {
  console.log("Mouse is over the button!");
});

button.addEventListener("mouseout", function() {
  console.log("Mouse left the button!");
});

Key Takeaways

• Functions are reusable blocks of code that perform a task
• Parameters pass information into a function
• The return statement sends a result back from a function
• Events are actions that happen in a web page (clicks, typing, etc.)
• addEventListener lets functions respond to events
• Event listeners make web pages interactive and responsive
• You can have multiple event listeners on the same element
• Functions and events are the foundation of interactive websites

The Big Picture: Why JavaScript Functions and Events Matters

Have you ever watched a magic show and thought, "How did they DO that?" Technology can feel like magic sometimes — video calls connecting you to someone across the world, apps that know what song you want to hear next, games where characters seem to think for themselves. But here is the secret: none of it is magic. It is all built on ideas that YOU can understand.

JavaScript Functions and Events is one of those big ideas. It might sound complicated, but think of it this way: every tall building starts with a single brick. Every long journey starts with a single step. And every great computer scientist started by being curious about exactly the kind of thing we are going to explore today.

In India, technology is transforming everything — from how farmers check weather forecasts using their phones to how your school might use digital boards instead of blackboards. Understanding javascript functions and events is like having a superpower: it lets you see how the digital world actually works, instead of just using it blindly.

Building a Web Page Step by Step

Let us build a simple web page together. Think of HTML as the skeleton (structure), CSS as the skin and clothes (appearance), and JavaScript as the muscles (behaviour).

<!DOCTYPE html>
<html>
<head>
  <title>My India Page</title>
  <style>
    body { font-family: Arial; background: #f0f8ff; }
    .card { background: white; padding: 20px; border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1); margin: 20px; }
    h1 { color: #FF6600; }
    button { background: #25D366; color: white; padding: 10px 20px;
             border: none; border-radius: 5px; cursor: pointer; }
  </style>
</head>
<body>
  <div class="card">
    <h1>Welcome to My Page!</h1>
    <p id="message">Click the button to see magic</p>
    <button onclick="changePage()">Click Me!</button>
  </div>
  <script>
    function changePage() {
      document.getElementById('message').textContent =
        'Namaste! You just used JavaScript! 🎉';
    }
  </script>
</body>
</html>

This single file demonstrates all three web technologies working together. The HTML creates the structure (heading, paragraph, button), the CSS inside the <style> tag makes it look beautiful (rounded cards, colours, shadows), and the JavaScript inside the <script> tag makes the button actually DO something. When you click the button, JavaScript finds the paragraph by its ID and changes its text. This is exactly how real websites like Flipkart and Zomato work — just with thousands more lines of code!

The Dabbawala Analogy

Mumbai's dabbawalas deliver 200,000 lunch boxes every day with an error rate of 1 in 16 million — better accuracy than most computer systems! Their system is actually a brilliant algorithm: each dabba has a colour code (like an IP address), a number (like a port), and follows a specific route (like packet routing). The sorting system at Churchgate station is essentially a load balancer — distributing dabbawalas across delivery zones. When computer scientists study efficient delivery systems, they literally study the dabbawalas as a real-world example of distributed computing done right.

Variables, Loops, and Making Decisions

Programs become powerful when they can remember things, repeat actions, and make choices. These three abilities — variables, loops, and conditionals — are the building blocks of ALL software:

# VARIABLES — the computer's memory
name = "Priya"            # Stores text (string)
age = 12                  # Stores a whole number (integer)
height = 4.8              # Stores a decimal (float)
likes_cricket = True      # Stores True or False (boolean)

# CONDITIONALS — making decisions
if age >= 13:
    print(f"{name} is a teenager!")
elif age >= 6:
    print(f"{name} is in school!")
else:
    print(f"{name} is very young!")

# LOOPS — repeating actions
print("
Counting to 10:")
for number in range(1, 11):
    if number % 2 == 0:
        print(f"  {number} is EVEN")
    else:
        print(f"  {number} is odd")

# REAL-WORLD EXAMPLE: Calculate your cricket batting average
scores = [45, 72, 0, 88, 23, 105, 34]
total = sum(scores)
innings = len(scores)
average = total / innings
print(f"
Batting average: {average:.1f} runs per innings")

Notice how the code reads almost like English? That is Python's superpower — it was designed to be readable. The indentation (spacing) is not just for looks; Python REQUIRES it to know which code belongs inside an if block or a for loop. In India, Python is now taught from Class 6 in many CBSE schools as part of the NEP 2020 curriculum.

Going Deeper: The Real-World Impact

Let us connect what you have learned about javascript functions and events to the real world. Every year, millions of students across India prepare for exams — CBSE boards, JEE, NEET, and state board exams. More and more of these students are using technology to prepare. Apps like Byju's, Unacademy, and Vedantu use the very concepts you are learning to deliver personalised learning. When the app figures out which topics you are struggling with and gives you extra practice questions, that is computer science at work!

The Indian government's DIKSHA platform uses technology to train teachers and provide digital textbooks in multiple Indian languages. When a teacher in a remote village in Jharkhand accesses a teaching video in Hindi, that video is stored on a server, delivered over the internet, decoded by a browser, and displayed on a screen — all using the principles we are discussing. Every layer of this process uses concepts from javascript functions and events.

India's Aadhaar system is perhaps the most impressive example of technology at scale anywhere in the world. It gives a unique 12-digit identity to every one of India's 1.4 billion citizens using fingerprint and iris scans. This system uses databases to store records, encryption to protect data, networking to verify identities, and algorithms to match biometrics. Understanding javascript functions and events is literally understanding a piece of how India's digital backbone works.

Here is a career perspective: India's IT industry employs over 5 million people and generates $245 billion in revenue. New fields like AI, cybersecurity, cloud computing, and data science are growing even faster. The demand for people who understand javascript functions and events is only increasing. By the time you finish school, there will be jobs that do not even exist today — but they will all need people who understand the fundamentals you are building right now.

Key Vocabulary

Here are important terms from this chapter that you should know:

🧪 Challenge: Design Your Own System

Here is a design challenge: imagine you are building a system for your school canteen. Students should be able to see the day's menu on their phones, place orders before lunch break, and pick up their food without waiting in line. Think about: What data do you need to store? (menu items, prices, student names, orders) How would the ordering work? (app sends order → canteen receives it → food is prepared → student is notified) What could go wrong? (two students order the last samosa at the same time!) This is exactly how engineers at Swiggy and Zomato think about building their systems. Try drawing a diagram on paper!

Connecting the Dots

JavaScript Functions and Events does not exist in isolation — it connects to everything else in computer science. The concepts you learned here will show up again and again: in web development, in AI, in app building, in cybersecurity. Computer science is like a giant jigsaw puzzle, and each chapter you complete adds another piece. Some day, you will step back and see the complete picture — and it will be beautiful.

India is producing the next generation of global tech leaders. Students from IITs, NITs, IIIT Hyderabad, and BITS Pilani are founding companies, leading engineering teams at Google and Microsoft, and solving problems that affect billions of people. Your journey through these chapters is the same journey they started on. Keep building, keep experimenting, and most importantly, keep enjoying the process.

Crafted for Class 4–6 • Programming & Coding • Aligned with NEP 2020 & CBSE Curriculum