7.6 JavaScript if Statement and Event Handlers

An if statement executes a part of code, one time, only if a condition is true. You can also include a block of statements to be executed if the condition is false. Its syntax is:

if (condition)
{
//Statements.
}
else
{
//Statements
}

The else statement and its following statements are optional. If you have only single statements to execute, you can do this:

if (condition)
Statement1;
else
Statement2;

When execution reaches the if statement, condition is evaluated. If it is true, the first block of statements is executed. If it is false, the second block of statements is executed or, if there is no else, execution continues with the line of code that follows after that.

Else if Statement is a bit different from the one discussed above:

if(condition1)
{
//Statement block 1.
}
else if (condition2)
{
//Statement block 2.
}
else if (condition3)
{
//Statement block 3.
}
else
{
//Statements.
}

This can be useful if there are more than  conditions.

Event Handlers

An event handler is a part of the code that responds to an event such as a mouse click. In order to create dynamic Web Pages, you must use event handlers so the document can respond to user input. Events are detected by specific elements in an HTML document, such as hyperlinks and images. The event handlers you might use are as follows:

• onclick: Occurs when the user clicks an element with the mouse.
• onchange: Occurs when the value of an <input> element changes.
• onsubmit, onresert: Occur when an HTML form is submitted or reset.

An events are linked with specific HTML elements, they are included as part of the element tag in an attribute that has the same name as the event handler. Let us see an example:

<input type='button' onclick='code will come here'>

If the code to be executed is short, you can place it directly in the attribute. Otherwise you can place the code in a separate function and then call the function in the attribute.

Summary

Both JavaScript and the DOM are used in D-HTML to provide the programmer with flexibility in creating attractive, dynamic, and interesting Web pages. There’s a lot to cover in this topic, and this chapter has provided you with only an introduction to the details of DHTML. If you have understood the basic well, let us move to the next chapter where, you will learn how to use DHTML for some real-world Web page tasks.