About Javascript

Page Index

Introduction

Javascript, the most popular scripting language on the internet, is used in tandem with HTML and XHTML to improve interactivity on a webpage. It can detect and react to events in a browser, and is useful for verifying the correctness of input from the user. In this tutorial, we will explore event handlers: one of the many ways in which javascript is significant. Our major emphasis will be on how to use javascript to validate input on a web form, such as a lexical data entry form or a member information form.

The major advantage that javascript offers is that it runs right inside of your browser as part of the webpage, so javascript in your page is fast and can provide seamless interaction.

Writing Javascript

You can write javascript in any text editor. All of the examples we have here are written as part of an HTML page. There are two places you can find javascript in a web page: script tags and event handlers. We need to use and understand a bit about both before we can do much with javascript.

Script Tags

Script tags tell the browser to execute a series of javascript statements when they are encountered. You can place a <script> tag anywhere in your document.

The simplest example of javascript is probably the following.

<html>
<head>
<script type="text/javascript">
alert("Hello World");
</script>
</head>
<body>
</body>
</html>

The alert function pops up a message saying 'Hello World' that the user must acknowledge by clicking 'OK'. This message will pop up every time the page is loaded. In order to perform an action every time the user does something, we need to turn to an Event Handler.

Event Handlers

Event handlers allow your javascript to react to changes in a browser window, such as movement of a mouse or the submission of a form. They also can respond to the loading of a webpage, for instance. Each event handler deals with a different type of event, and they all start with the word "on". The syntax for a mouseover event (see the welcome box on the School of Best Practices mainpage), for example is onMouseOver.

You attach an event handler to an html element by including an extra attribute with the name of the event that you are interested in.

<html>
<head>
</head>
<body>
<input type="button" name="clickme" value="clickme" onClick="alert('You Clicked Me!')">
</body>
</html>

Now, every time you click on the button labeled 'clickme', you will receive a message telling you that you clicked the button. Note, that we had to use single quotes inside of the event handler, because double quotes were already being used to surround it.

Functions

There is nothing particularly special about alert in the example above. It is just a function accessible from javascript. You can create your own functions, and need to do so in order to do anything non-trivial.

You create functions inside of the script tag:

<html>
<head>
<script type="text/javascript">
function warn(message) {
alert("Warning: " + message);
}
</script>
</head>
<body>
<input type="button" name="warning" value="warning" onclick="warn('Devoicing ahead')">
</body>
</html>

In the above example, users will encounter a javascript box saying, "Warning: Devoicing ahead", and must click on 'OK' to make the box disappear. We also see that we can use + to append two strings and make larger ones - "Warning" + the message content "Devoicing ahead".

Form Validation

Data that you are submitting on a form is available to you in javascript, and you can add an event handler to a form that is called before the form is submitted to the web server. This enables you to verify that the fields are filled out correctly before you submit the form.

Suppose we are starting from a simple form and we wanted to ensure that the end user entered their name before clicking submit. The following is the simple form that prompts a user to imput their name:

<html>
<head></head>
<body>
<form name="myform">
Name: <input type="text" name="myname">
<input type="submit">
</form>
</body>
</html>

The following code adds to the name prompt a javascript check that ensures that the user has indeed entered their name:

<html>
<head>
<script type="text/javascript">
function validate_form() {
if (document.myform.myname.value == "") {
alert("You need to enter your name!");
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<form name="myform" onsubmit="validate_form()">
Name: <input type="text" name="myname">
<input type="submit">
</form>
</body>

We have introduced a number of pieces in the above example.

Validating more than one field

It is also possible to validate multiple fields, by using multiple javascript statements. This is common in webforms, where users often are required to enter several fields of information. Most websites denote required fields by placing an asterisk by the appropriate input box.

The following code checks for the user name and the user job:

<html>
<head>
<script type="text/javascript">
function validate_form() {
if (document.myform.myname.value == "") {
alert("You need to enter your name!");
return false;
}
if (document.myform.myjob.value == "") {
alert("You need to enter your job!");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myform" onsubmit="validate_form()">
Name: <input type="text" name="myname">
Job: <input type="text" name="myjob">
<input type="submit">
</form>
</body>

More information

This page gives a very simple overview of javascript. While recycling the code on this page may help in creating a functional page, more knowledge is necessary to ensure that the functions will work properly. Furthermore, javascript can offer more complicated functions such as menus (the menus on the left sides of the pages in the School of Best Practices are javascript menus). We refer readers to other sources for this valuable information that is, regretably, outside of the scope of the E-MELD project.


User Contributed Notes
E-MELD School of Best Practices: About Javascript
+ Add a comment
  + View comments

Back to top Credits | Glossary | Help | Navigation | Site Map | Site Search