Programming: Java, JavaScript Coding For Beginners – Learn In A Day (2015)

Chapter 2. Functions and Events in JavaScript

What is a Function?

A group of codes which, are reusable when desired are called anywhere in the programme is called a function. It reduces the time and energy for one to write the same code again and again. This reduces code redundancy. Modular code can be written by using the functions. A large programme can be divided into many or desired number of parts using the functions. JavaScript, like any other programming language, supports the features which are needed for writing modular code.This is done by using ‘functions’.

Functions like write() and alert() are the default functions. JavaScript provides the user with many functions which can be used right away.

JavaScript also allows one to create our own custom functions.

Function Definition:

A function should first be defined before using it. The function key is a common method to define functions in JavaScript. It should be followed by the function name which is unique and lists of parameters. It also should contain a statement block with curly braces.

SYNTAX: <script type="text/javascript">
<!--


function functionname(parameter-list)
{
statements


}
//-->
</script>

EXAMPLE: In the example given below, there is a simple functions program.

<script type="text/javascript">
<!--
function simplefunction()
{
alert("This is a simple function");
}
//-->
</script>

Calling a Function:

To call a function in javascript, the name of that function should be written as follows.

<script type="text/javascript">
<!--
simplefunction();
//-->
</script>

Parameters of a function:

In JavaScript a function can be passed with parameters too. Different parameters can be passed in JavaScript while it is calling a function. Manipulation can be done by the passed parameters, which are in a function. Comma is used to separate multiple parameters in a function.

Example:

Here in the following example, we will modify our simplefunction function. Now we will make use of two parameters.

<script type="text/javascript">
<!--
function simplefunction(name, age)
{
alert( name + " is " + age + " years old.");
}
//-->
</script>

The function can be called. And it can be called as given below.

<script type="text/javascript">
<!--
simplefunction('Zara', 7 );
//-->
</script>

The return Statement:

An optional return statement can be added to a JavaScript function if the user desires a return value from that function. A return statement should always be the last statement of the function.

For example, the user may pass two different numbers in a particular function and from them he can expect the function to return the product of those two numbers in the program.

EXAMPLE:

<script type="text/javascript">
<!--


function concatenate(first, last)
{
var full
;

full = first + last;
return full;
}
//-->
</script>

Now the function can be called as follows:

<script type="text/javascript">
<!--
var result;


result = concatenate('Zara', 'Ali'

);
alert(result );
//-->
</script>

Events in JavaScript

EVENT:

Events handle the interactions between JavaScript and HTML. This is done when a page is manipulated by the user or a browser.

Everything is an event. The loading of a page is an event. When the user selects something by clicking, that click is considered an event too. Infact any action done by the user like closing a window, selecting a link, pressing a key, closing a tab, resizing a window, etc. are all examples of events.

The responses which are coded in JavaScript are executed using these events like closing windows, text to be displayed, alerts displayed, confirmation messages or any type of response that is possible to happen.

The events are part of the Document Object Model (DOM) Level3. A set of events are provided to every HTML element. Those events trigger the code in JavaScript.

The onclick event type:

This is an event, when clicked, displays desired validation or a warning etc. This very widely used.

EXAMPLE: The below code, when the hello button on the onclick is clicked, it triggers the ‘events’ function.

<html>
<head>
<script type="text/javascript">
<!--
function events() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

onsubmit event type:

The onsubmit event is another important event type. Validation occurs when submit a form here. The text will only be sent if the function returns true.

EXAMPLE:

<html>
<head>
<script type="text/javascript">
<!--


function validation() {
all validation goes here


.........


return either true or false


}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi" onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>