Javascript Lesson 4

Foreword

In this lesson, you will learn about the use of forms, JavaScript events, which are used very often in JavaScript and dialog boxes.

4.1 Forms

Forms are often used in JavaScript to create scrolling messages, clocks and other small applications.
You create a form using the <form> and </form> tags.
To create form elements we use the <input> tag, there can be different inputs wich will be defined by the type word inside the <input> tag. Here's a little example of a text box with a button:

This is the code used to display the example:

<form name="exampleForm">
<input type="text"  name="exampleText" size="25" value="This is a text box.">
<input type="button" name="exampleButton" value="Example Button">
</form>

Including the name parameter in the <form> tag is important if you want to refer to the form or any of its contents. You will learn more about this later.

4.2 Alert Dialog Box

The syntax for the alert dialog box is easy, you will only need one little line of code:

alert("your message")

Your message will be displayed in a little pop-up window. You can close the alert dialog box by clicking the OK button.

You might think this is a good way to send the visitors of you site a little message, but I do not recommend this as it can get very annoying after a while, because the pop-up just keeps appearing every time they visit the page again.

Example

The code used to call the alert dialog box used above is:

<a href='JavaScript:alert("A nice little example of the alert dialog box")'>Example</a>

If you look at this little line of code, you notice that I used the href attribute to call a JavaScript function.
JavaScript:functionName() is a valid location parameter for the href attribute of the anchor tag.

4.3 Event Handlers

With JavaScript we can use events to call a JavaScript function. Events are actions that take place inside a document and are caused by something the user did. Some event handlers are:
onBlur, onLoad and onUnload for the Window Object.
onClick, onMouseOver and onMouseOut for the Link Object.
You place the Window Object event handlers in the body tag and the Link Object event handlers in the Anchor tag.
Here is another example of the alert dialog box using the onClick event handler:

This is the code used:

<form name="exampleForm2">
<input type="button" name="alertButton" value="Alert Box" 
onClick='alert("An alert dialog box using the onClick event handler.")'>
</form>

4.4 Confirm Dialog Box

Another dialog box available for the window object is the confirm dialog box.
When you press OK it returns the Boolean value true and when you press Cancel it returns the Boolean value false.

The code used to call the confirm dialog box used above is:

<form name="exampleForm3">
<input type="button" name="confirmButton" value="Confirm Box" 
onClick='confirm("Do you like the confirm dialog box?")'>
</form>

4.5 Prompt Dialog Box

Another dialog box available for the window object is the prompt dialog box.
The prompt dialog box returns the value of the text in the field if the OK button is pressed. It returns null if the Cancel button is pressed.

The code used to call the confirm dialog box used above is:

<form name="exampleForm4">
<input type="button" name="promptButton" value="Prompt Box" 
onClick='prompt("Fill in some information")'>
</form>

Before continuing to the next lesson, try to call some alert boxes yourself using the onClick, onMouseOver and onMouseOut event handlers.

Home | Code | Learn
© 2007-2008 ProgLogic, all rights reserved. | ProgLogic.com is created by Stijn Strickx. | e-mail