Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Javascript Event Handling

This article is intended to help all the Web Developer to get started with JavaScript event handling.

In the modern webpage design we use to develop the pages dynamically and for processing the pages, we generally use Javascript. Javascript is the Microsoft implementation of the ECMA 262 language specification. Javascript is a full implementation with some enhancement that takes advantage of the capabilities of Microsoft Internet Explorer.

JavaScript is an object oriented event driven server site scripting language. This language supports communicating with various dynamic scripting languages. JavaScript is no doubt very popular to server side developers. We know that modern world is running with online base system. These online bases systems directly interact with sever and also check different types of event processing which we are using regularly. So at first we have to know different event handling procedure of Javascript as well as the features of the Javascript. As Javascript is very popular language so let me know that why it is more important and when?

Features of JavaScript

Let me discuss about the features of Javascript.

  • JavaScript is a Scripting Language.
  • JavaScript is a scripting language that is a lightweight programming language.
  • JavaScript is programming code that can be inserted into HTML pages and also call from the HTML pages.
  • JavaScript inserted into HTML pages and it can be executed by all modern web browsers such as Internet Explorer 7, Mozila Firefox25.0 and Opera etc.

Process to Use and Learn Javascript:

JavaScript is an interpreter as well as object-based scripting language. JavaScript is not a cut-down version of any other language. It is a language that only distantly and incidentally related to Java, and it is not an interpretation of anything. We cannot write standalone applications in it as per example it has a little capability for reading or writing files. However Javascript can run only in the attendance of an interpreter. This interpreter may be a Web server or a Web browser.

We can use it embedded with HTML code for more efficient, error free webpage.

JavaScript Events:

A Short list of JavaScript Events:

Sl Function Application
1 onAbort It occurs when the user stops the loading of an image.
2 onBlur It occurs when an object on the page is no longer the 'focus'.
3 onChange It occurs when a text field is changed by the user.
4 onClick It occurs when the user clicks an object.
5 onError It occurs when a document or image can't load correctly.
6 onFocus It occurs when an object takes the 'focus'.
7 onLoad It occurs when a page is loaded.
8 onMouseOver It occurs when the mouse cursor moves over an object.
9 onMouseOut It occurs when the mouse cursor moves off an object.
10 onSelect It occurs when the user selects text in a text area.
11 onSubmit It occurs when the user clicks the "submit" button on a form.
12 onUnload It occurs when the user leaves a document.

Table 1: Showing Javascript events

Now we will discuss the above functions with suitable examples.

onClick:

We have already used this event in our programming area. Now we can use it with buttons, images, links, radio buttons, and check boxes. Now a simple onClick event used with an image:

Listing 1: Showing onClick event

<img class='imagem_artigo' SRC = cei.jpg onClick = "alert(Welcome to Computer Educational Institution.')">
 

onDblClick:

onDblClick is also the same process like onClick event. Using this event we can easily measure the status through the following code: In the following code we can access the data by just double clicking on the button.

Listing 2: Showing onDblClick event

<img class='imagem_artigo' SRC = cei.jpg onDblClick = "alert(Welcome to Computer Educational Institution.')">
 

onKeyDown:

This event fires when a key on our keyboard is pressed down. It can apply to the buttons, textboxes, text areas, and links. If we had a search box on the form, for example, if I want to activate the search when the user presses then it will be Return/Enter key on the keyboard. But who are using Netscape Navigator Browser they use this code:

Listing 3: Showing onKeyDown event


window.captureEvents(Event.KEYPRESS)

But it is a problem stating process so we always capture the easier example of the KeyDown event that works in both browsers is this way:

<INPUT type = text onKeyDown = "alert('Key pressed Welcome to Computer Educational Centre')">
 

onMouseOver:

This is also very nice event. This action is already done when we wrote the script for the "twirling hand". Associated events are onMouseOut and onMouseDown. They are generally used for links and images. Generally it is used when onMouseOver is used to swap images around for creating a rollover effect.

Onblur:

Basically this event precedes a place when objects lose focus (change the cursor position). If we click inside the text box then click outside it and the textbox has lost focus. That movement onBlur event will be fired. The following code easily demonstrates the working principal of the onblur event.

Listing 4: Showing onKeyDown event

<INPUT TYPE = text onBlur = "alert ('Lost focus from here……..')">

onSubmit:

This is a very useful event that can be used for data validation on a form. Sending data from one page to another page it is takes a vital role. We can use this event with a Submit button. The details on the form can be checked for errors. We catch any error and we can stop the form's details from being submitted.

Note the use of the word return statement. This is set to a Boolean value. If we return it false, which means wrong arguments then the form cannot be submitted. On the other hand if it is true then the form is submitted successfully.

Listing 5: Showing onsubmit event and validation

<form name = form1 onsubmit = "return validate1()">
<input type = submit value = " send ">
</form>

This form is not very secure because it is only Submit button. But if we set this submit button through the following manner then it checks data step by step.

function Validate()
{
flag = false
if (flag == false)
{
alert("An Errors detected……..");
return false
}
if (flag == true)
{
       alert("Form Submitted Successfully…..");
        return true
}
}

In this function we can set a variable (flag) to false. This is just used for testing purpose and that means the user has filled up the form incorrectly. We look at the two return values though. If the Details are false then return is set to false message from the user and the form doesn’t get submitted. Other hand when the details are true then return is true and the form is submitted successfully.

Then the procedure is like this:

<form name = f1 onSubmit = "return validate()"
Method = post Action="ceimaa.netii.net" Enctype="text/plain">

Real life example of Javascript Even:

This all are the simple examples of the Javascript event handling in our dynamic website buildup procedure. But this is not enough for us in developing Javascript. So now, we have to look at the real time example.

This is example is given below to execute Javascript function and also work efficiently.

Listing 6: Showing form validation

<html>
<head>
<script>
function validate_form()            // This is function definition part
{

var a=document.forms["mypage"]["fname"].value;
if (a==null || a=="")
{
alert("First name must be filled out");
return false;
}

}
</script>
</head>
<body>
<form name="mypage" action="cei_form.jsp" onsubmit="return validate_form()" method="post">
Enter First name: <input type="text" name="fname">
Enter Last name: <input type="text" name="lname">
<input type="submit" value="Submit">
</form>
</body>
</html>

When we use the following code and give no arguments in the text box then this type of alert message will be displayed.

Showing alert message

Figure 1: Showing alert message

Listing 7: Sample showing back ground color change

<html>
<head>
<title>
</title>
</head>
<script type="text/javascript">
function cchange(bgval)
{
  nc = bgval.options[bgval.selectedindex].text;
  document.bgcolor = nc;
  bgval.selectedindex = -1;
}
</script>
<body style="font-family:tahoma;font-size:10pt;">
<div style="border:2px solid #fff; width:300px;text-align:center;">
<b>Processing to changing background colors…</b>
<br>
 <form style="padding:20px;">
   <select size="8" onchange="bgchange(this);">
   <option>red</option>
   <option>orange</option>
   <option>yellow</option>         //This is option button that display as list box.
   <option>green</option>
   <option>blue</option>
   <option>indigo</option>
   <option>violet</option>
   <option>white</option>
   </select>
 </form>
</body>
</html>
Showing color change

Figure 2: Showing color change

Conclusion:

Dynamic Hypertext Markup Language is no doubt dependent on JavaScript language. Javascript takes a 99% role for server site scripting language. Every webpage is now combined with dynamic hypertext markup language. Different types of server site event is executed via Javascript. Javascript takes a standard roll for business rule, alert message, error message and a lot of events. So after the study of the above system we can easily understand event and I am sure that readers can also solve various problem from the article. Enjoy reading.



Website: www.techalpine.com Have 16 years of experience as a technical architect and software consultant in enterprise application and product development. Have interest in new technology and innovation area along with technical...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login