element. These images will act as a source for the animation and will appear and fade in a cycle. 103
Chapter 4 ‐ JavaScript
4.1
About JavaScript
HTML is a simple text markup language, it can't respond to the user, make decisions, or automate repetitive tasks. Interactive tasks such as these require a more sophisticated language: a programming language, or a scripting language. Although many programming languages are complex, scripting languages are generally simple. They have a simple syntax, can perform tasks with a minimum of commands, and are easy to learn. Web scripting languages enable you to combine scripting with HTML to create interactive web pages. JavaScript is one of the most popular and widely used scripting language of the web and is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more. It is primarily a client‐side scripting language for use in Web browsers. Its main focus is to help developers interact with Web pages and the Web browser window itself. Because it is embedded in all modern browsers, it has an extraordinary wide distribution. One of the most powerful features of the language is its flexibility. As a JavaScript programmer, you can make your programs as simple or as complex as you wish them to be. The language also allows several different programming styles. You can write your code in the functional style or in the slightly more complex object‐oriented style. It also lets you write relatively complex programs without knowing anything at all about functional or object‐oriented programming; you can be productive in this language just by writing simple functions. It allows programmers to accomplish useful tasks with a very small, easy‐to‐learn subset of the language.
JavaScript is almost as easy to learn as HTML, and it can be included directly in HTML documents. Here are the few things you can do with JavaScript: Display messages to the user as part of a web page, in the browser's status line, or in alert boxes. Validate the contents of a form and make calculations (for example, an order form can automatically display a running total as you enter item quantities). Animate images or create images that change when you move the mouse over them. Create ad banners that interact with the user, rather than simply displaying a graphic Detect the browser in use or its features and perform advanced functions only on browsers that support them. Detect installed plug‐ins and notify the user if a plug‐in is required. Modify all or part of a web page without requiring the user to reload it. Display or interact with data retrieved from a remote server.
106
The Web Book ‐ Build Static & Dynamic Websites
You can do all this and more with JavaScript, including creating entire applications. A JavaScript is added to an HTML document using the <script> tag with type=”text/javascript”. It is typically used to manipulate existing HTML elements using the id attribute of those elements. To access these elements JavaScript provides a method called document.getElementById(). Within the parenthesis of this method you specify the id of the element you're trying to access. Let's go through a simple example to embed JavaScript in an HTML document. In this example a JavaScript is used to manipulate text of a paragraph using the paragraph’s id p1. The innerHTML property returns the inner HTML of an element. Embed JavaScript in HTML
JavaScript Example
This text will be replaced with the text in the following JavaScript.
<script type="text/javascript"> document.getElementById("p1").innerHTML="Welcome to the exciting world of JavaScript!"; Output
JavaScript Example Welcome to the exciting world of JavaScript!
107
Chapter 4 ‐ JavaScript
4.21
Using JavaScript with HTML Forms
We went through HTML forms in section 2.20 earlier in this book and exercised various aspect of it using different form controls. In this section, you will learn how to make a form interactive with JavaScript. In JavaScript, each form is represented as an object with the same name as the NAME attribute mentioned in the
Output
139
Chapter 4 ‐ JavaScript 4.21.5
Validating Form’s Data
You saw how JavaScript is used in HTML forms, but its most significant use is to validate data entered in these forms. For example, you can check that the form's mandatory fields are not left blank or, if entered, they are in the correct format. Data in the previous form could be validated as shown in the following example. The checkData() JavaScript function is used to check data in the name field through the field's length. If you leave the field blank and hit the submit button, the submission is stopped and an alert message comes up with relevant information. We used document.contactform.name.focus() statement to place the cursor on the field where the error occurred. The function checkData() is called using the onSubmit event handler in the