Web Development

JavaScript Functions and Events

JavaScript Functions and Events is section 4 of Beginner’s Guide to JavaScript.

JavaScript Functions and Events are two different concepts but so much related. Let’s first look at what a JS function is.

JavaScript Function

A Function is much the same as a Procedure or a Subroutine, in other programming languages.

[code language=”js”] function myFunction(p1, p2) {
return p1 * p2; // the function returns the product of p1 and p2

A JavaScript function is a block of code designed to perform a particular task. It executed when “something” invokes it. This invoking can be done by a event call or function call from the code.

If we look at the syntax of a function, it is defined with the function keyword, followed by a name, followed by parentheses ().

Function names can contain letters, digits, underscores, and dollar signs, the same rules as variables. The parentheses may include parameter names separated by commas: (parameter1, parameter2, …). Then the statements which need to be executed written inside the curly brackets.

function functionName(parameter1, parameter2, parameter3) {
code to be executed

Function parameters are the names listed in the function definition. Function arguments are the real values received by the function when it is invoked. Inside the function, the arguments are used as local variables.

Function Return

When JavaScript reaches a return statement, the function will stop executing. If the function was invoked from a statement, JavaScript will “return” to execute the code after the invoking statement. Functions often compute a return value. The return value is “returned” back to the “caller”. Look at the following example.

[code language=”js”] var x = myFunction(4, 3); // Function is called, return value will end up in x

function myFunction(a, b) {
return a * b; // Function returns the product of a and b

After the execution of this code segment, x will have the value of 12.


The importance of function is, the code inside of a function can be reused. Also you can use the same code many times with different arguments, to produce different results. Look at the following example.

[code language=”js”] function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);

The above code segment convert the Fahrenheit value into Celsius which demonstrate the reusability of the code.

text = “The temperature is ” + toCelsius(32) + ” Centigrade”;

text = “The temperature is ” + toCelsius(34) + ” Centigrade”;

You will have different Centigrade values from the same function.

JavaScript Events

Events can trigger something to be happen in the web page. When JavaScript is used in HTML pages, JavaScript can “react” on these events. As we said earlier, we can setup to trigger a function when a event occurs.

HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.


Look at the following example.

[code language=”html”]

In the above example, when the user click the button, event occurs and it triggers to call a JS function called alert with a text parameter.

Following is a list of some common events just like the onclick above.

Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page

So how the functions and events related. If a function is setup to trigger when a event occurs, we called that function as event handler. Event handlers can be used to handle, and verify, user input, user actions, and browser actions. Following are few examples.

  • Things that should be done every time a page loads
  • Things that should be done when the page is closed
  • Action that should be performed when a user clicks a button
  • Content that should be verified when a user input data


What’s Next?

Learn what includes in JavaScript Strings.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.