Events are actions that can be detected by JavaScript. Every element on a web page has certain events which can trigger a JavaScript. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags. Following are some events we use in javascript.
- A mouse click
- A web page loading
- Mousing over
- Selecting an input field
- Submitting an HTML form
- A keystroke
Details of some some events are below.
onLoad and onUnload :
The onLoad and onUnload events are triggered when the user enters or leaves the page. The onLoad event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information.
Both the onLoad and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page.
onFocus, onBlur and onChange :
The onFocus, onBlur and onChange events are often used in combination with validation of form fields. In following example the validateEmail() function will be called whenever the user changes the content of the field.
<input type="text" size="30" id="email" onchange="validateEmail()" />
onSubmit :
The onSubmit event is used to validate ALL form fields before submitting it. In following example, the validateForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function validateForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled.
<form method="post" action="mypage.htm" onsubmit="return validateForm()">
onMouseOver :
The onmouseover event can be used to trigger/call a function when the user mouses over an HTML element.
Function :
A function is a block of code that executes only when you tell it to execute. It can be when an event occurs, like when a user clicks a button, or from a call within your script, or from a call within another function. Functions can be placed both in the <head> and in the <body> section of a document, just make sure that the function exists, when the call is made. Syntax to write a function is as follows :
function functionname()
{
some code
}
The word function must be written in lowercase letters. Example of JavaScript function is below.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myfunc()
{
alert("Called by JS Function!");
}
</script>
</head>
<body>
<button onclick="myfunc()">Click Me !</button>
</body>
</html>
Function with Arguments :
When you call a function, you can pass along some values to it, these values are called arguments or parameters. These arguments can be used inside the function. You can send as many arguments as you like, separated by commas (,). Declare the argument, as variables, when you declare the function. Syntax to write function with arguments is as follow :
function myfunc(var1,var2)
{
some code here.
}
For example
<script type="text/javascript">
function myFunction(var1,var2)
{
alert("you passed " + var1 + ", and " + var2);
}
</script>
<button onclick="myfunc('isb','pak')">Click Me !</button>
Functions With a Return Value :
Sometimes you want your function to return a value back to where the call was made. This is possible by using the return statement. When using the return statement, the function will stop executing, and return the specified value. Syntax of function with return value is as follow :
function myfunc()
{
var y=10;
var z=5;
return y+z;
}
The function above will return the value 15. The function-call will be replaced with the returnvalue. For example
var x=myfunc();
After executing function "myfunc", value of x will be 15. The return value of function can be directly written into html elements. For example
document.getElementById("id").innerHTML=myfunc();
The return statement is also used when you simply want to exit a function.
The for .. in statement loops through the properties of an object. Syntax of for .. in is as follow :
for (variable in object)
{
code to be executed
}
For example
var person={fname:"waqas",lname:"ali",age:23};
for (y in person)
{
txt=txt + person[x];
}
The result of above code will be
waqasali23
The break Statement :
The break statement will break the loop and continue executing the code that follows after the loop.For example, in following code, for loop will stop its execution when value of i equal to 3, and code continue execution after this for loop.
for (i=0;i<7;i++)
{
if (i==3)
{
break;
}
y=y + "The number is " + i + "<br />";
}
The result of above code will be :
The number is 0
The number is 1
The number is 2
The continue Statement :
The continue statement will break the current loop and continue with the next value. For example, in following code the for loop skip its iteration at value equal to 3 and then continue its execution normally.
for (i=0;i<=7;i++)
{
if (i==3)
{
continue;
}
y=y + "The number is " + i + "<br />";
}
The result of above code will be :
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The while Loop :
The while loop loops through a block of code while a specified condition is true. Syntax of while loop is as follow :
while (variable<endvalue)
{
code to be executed
}
For example
while (i<3)
{
y=y + "The number is " + i + "<br />";
i++;
}
The above while loop will run when value of i less then 3, and it will stop working when it is exceed or equal to 3.
The do .. while Loop :
The do .. while loop is a variant of the while loop. This loop will execute the block of code once, before checking if the condition is true, then it will repeat the loop as long as the condition is true. Syntax of do .. while loop is as follow :
do
{
code to be executed
}
while (variable<endvalue);
For example
do
{
y=y + "The number is " + i + "<br />";
i++;
}
while (i<3);
The above loop will run once before checking condition, and then it will check condition every time, and run only if condition met.
