Functions and events in JavaScript …

… will be the main topic in this part of articles about JavaScript basics.

So let’s go.

Functions in the JavaScript

Functions are the next important element of the language. As we already mentioned in part 1: functions exist independently, while methods are directly associated to the objects.

When we define a function, we can call it, or assign to the events that we want to capture and handle. Capture is possible through assign event handling to element(s) of the website. Both cases demonstrated below.

Example — definition of the function and its call:

function square(number) {
  result = number * number;

  return result;
}

function compute() {
    var k = square(2); // call the square() function
    alert("Square of 2 is: " + k);
}

// call the compute() function:
compute();

The compute() function, that doesn’t return any value, is similar to constructions known from other programming languages, called procedures.

The great feature in JavaScript is the possibility of assigning functions, in the same way as assigning a value.

Example — assign function to the event:

window.onload = function() {
    alert("The window says Hi after load");
}

This (unnamed) function has been assigned to the onload event.

Functions and arguments

The arguments we put in parentheses after the function name. Inside the function, we can refer to the arguments directly, or using special array:

arguments[index];

Example — the arguments array:

function myConcat(separator) {
    var res = "";
    // iteration on the arguments
    for (var i = 1; i < arguments.length; i++) {
        res += arguments[i] + separator;
    }

    return res;
}

// usage
var demo = myConcat(", ", "red", "green", "blue");
alert(demo);

The function will return following string: “red, green, blue,”. It was built with passed words and separator, but please note that the function takes only one argument explicitly (separator). The rest of parameters was accessed through the “arguments” array.

Events

In JavaScript we can capture a lot of various events.

Example — click event handler:

<img src="my.jpg" onclick="alert('You clicked on the picture');" />

More basic information about events below.

A list of events in JavaScript

– onblur  — the event, which occurs when the element is losing the “focus”; in other words the user is leaving / changing the active field

– onchange — when the user changes the value of the field

– onclick  — when the element is clicked

– ondblclick — after double-click

– onfocus  — when the field element receives the “focus”; so when the user activated the element

– onkeydown — when some key on the keyboard is pressed

– onkeypress — when some key on the keyboard is pressed and released

– onkeyup — key released only

– onload — when the browser finishes loading the page or frame content

– onmousemove — when the mouse cursor is moved over the element

– onmouseout — when the mouse leaves the area of ​​the element

– onmouseover — when the mouse cursor is in the area of ​​the element

– onmousedown — when the mouse button is pressed

– onmouseup — when the mouse button is released

– onreset  — form reset event

– onselect — an event occurring during the selection of the text (content of the field)

– onsubmit  — when content of the form is sent

– onunload — when currently displayed page in the browser is being changed.

By adding onsubmit=”return checkForm(this)” attribute to the form, the function checkForm() will be executed after the submit event. Inside this function we can do the validation. In case of returning false by our function, the form won’t be sent.

Example:

<form action="index.php" name="myForm" id="myForm"
onsubmit="return checkForm(this)">
… fields of the form here …
</form>

The this parameter determines current object, in this case it’s the form (object associated with the form tag).

Let’s refer to the form. The simplest way in “pure” JavaScript (i.e. without frameworks) is to call document.form object.

However, in practice is better to refer by the document.forms and the name of our form.

Example — simple link to send the form:

<form action="index.php" name="myForm" id="myForm">
… fields of the form here …
</form>

<a href="javascript:document.forms.myForm.submit()">Send</a>

After click on “Send” button, the submit event will be triggered, so the form will be sent.

Summary

It’s all in this part. Next time we will talk about JavaScript operators, data types, global elements, and the program flow control.

Thank you.