Functions and Events

In JavaScript, functions are blocks of code designed to perform a particular task when invoked (called). Events allow us to handle user interactions, such as clicks or mouse movements, and respond to those actions programmatically. Learning how to write and call functions, as well as handle events, is essential for creating interactive and dynamic websites.

1. Writing and Calling Functions

A function in JavaScript is a reusable block of code that can be called multiple times. Functions are defined using the function keyword followed by a name, a set of parentheses, and a block of code.

Function Syntax

function functionName() {
    // Code to be executed
    console.log("Hello, World!");
}

• Function Declaration: The example above defines a function called functionName. When the function is called, it will log “Hello, World!” to the console.
• Calling the Function: You can invoke a function by simply writing its name followed by parentheses.

functionName();  // Calls the function and executes its code

Function with Parameters

Functions can also accept inputs known as parameters. These parameters allow you to pass data into the function.

function greet(name) {
    console.log("Hello, " + name + "!");
}

greet("Alice");  // Outputs: Hello, Alice!

In this example, the function greet accepts a parameter name and uses it in the message displayed in the console.

Return Values

Functions can also return values using the return statement. A return value allows the function to send information back to the place where it was called.

function addNumbers(a, b) {
    return a + b;
}

let result = addNumbers(5, 3);  // result will be 8
console.log(result);

In this case, the addNumbers function returns the sum of two numbers and assigns that value to the result variable.

2. Handling User Interactions (Events)

Events are actions that occur in the browser, such as mouse clicks, keystrokes, and page loads. JavaScript provides the ability to handle these events by attaching event listeners to specific elements in the HTML.

Common Events

• onclick: Triggered when an element is clicked.
• onmouseover: Triggered when the mouse pointer moves over an element.

Adding Event Listeners

You can assign event handlers (functions) to HTML elements by using attributes like onclick or onmouseover directly in the HTML. Alternatively, it’s more common to use JavaScript to attach event listeners to elements.

Using HTML Event Attributes

<button onclick="alert('Button clicked!')">Click Me</button>

In this example, when the button is clicked, an alert message will appear. The function alert() is called directly from the HTML using the onclick attribute.

Adding Event Listeners in JavaScript

It’s generally better practice to attach event listeners through JavaScript rather than using HTML attributes. This makes your code cleaner and separates structure from behavior.

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

<script>
    // Get the button element
    let button = document.getElementById("myButton");

    // Attach an event listener for the 'click' event
    button.addEventListener("click", function() {
        alert("Button was clicked!");
    });
</script>

In this example:

• We select the button element with getElementById().
• We then add an event listener to the button using addEventListener(). When the button is clicked, the anonymous function passed to addEventListener() will be executed.

Handling the onmouseover Event

The onmouseover event is triggered when the mouse pointer moves over an element. You can use it to create interactive features, like hover effects.

<button id="hoverButton">Hover Over Me</button>

<script>
    let hoverButton = document.getElementById("hoverButton");

    hoverButton.addEventListener("mouseover", function() {
        hoverButton.style.backgroundColor = "yellow";  // Change background color when mouse is over the button
    });

    hoverButton.addEventListener("mouseout", function() {
        hoverButton.style.backgroundColor = "";  // Revert the background color when the mouse leaves the button
    });
</script>

In this example:

• The mouseover event changes the button’s background color when the mouse moves over it.
• The mouseout event restores the original background color when the mouse leaves the button.

Passing Parameters to Event Handlers

If you want to pass additional data to the function when the event is triggered, you can do so by wrapping the function call in another function.

<button id="clickMe">Click Me</button>

<script>
    let button = document.getElementById("clickMe");

    button.addEventListener("click", function() {
        showMessage("Hello, World!");
    });

    function showMessage(message) {
        alert(message);
    }
</script>

Here, the function showMessage() is called when the button is clicked, and it receives the string "Hello, World!" as a parameter.

Conclusion

In this section, you learned how to write and call functions in JavaScript, making your code modular and reusable. You also learned how to handle user interactions through events like onclick and onmouseover, allowing you to add interactivity to your website. These foundational concepts are crucial for creating engaging, dynamic web experiences.