A JavaScript Validation Example | Object-Oriented Thought Process, The (3rd Edition)

< Day Day Up >

JavaScript, as are most scripting languages, is considered to be object-based. Just like C++, you can write JavaScript applications that do not comply with object-oriented criteria. However, JavaScript does provide object-oriented capabilities. This is what makes scripting languages, like JavaScript and ASP .NET, very important in the object-oriented market. You can use objects in a JavaScript application to enhance the capabilities of your Web page. In some ways, you can think of these scripting languages as bridges between traditional programming paradigms and object-oriented models. I feel it is important to understand you can incorporate objects into your Web applications, even if you aren't using pure object-oriented technologies.

To understand the power of the scripting languages, we must first understand the limitations of HTML. HTML is a markup language that provides functionality, not inherent programming capabilities. For example, there is no way in HTML to program an IF statement or a loop. Thus, in the early days of HTML, there was little if any way to validate data on the client side. Scripting changed all of this.

With the functionality provided by JavaScript and other scripting languages, a Web page developer could actually perform programming logic within the Web page. The capability to perform programming logic allows for client-side validation. Let's look at an example of a very simple validation application using HTML and JavaScript. The code for this simple Web page is presented as follows :

 <HTML> <HEAD> <TITLE>Validation Program</TITLE> <SCRIPT LANGUAGE = "JavaScript"> function validateNumber(tForm) {         if (tForm.result.value != 5 ) {                 this.alert ("not 5!");         } else {                 this.alert ("Correct. Good Job!");     } } </SCRIPT> </HEAD> <BODY> <HR> <P> <H1>Validate</H1> <FORM NAME="form"> <INPUT TYPE="text" NAME="result" value="0" SIZE="2"> <INPUT TYPE="button" VALUE="Validate" NAME="calcButton"    onClick="validateNumber(this.form)"> </FORM> <HR> </BODY> </HTML>

One of the first things to notice is that the JavaScript is embedded inside the HTML code. This is different from how a programming language is used. Whereas languages like Java and C# exist as independent entities, JavaScript code can only exist within the confines of HTML.

Java Versus JavaScript

Although Java and JavaScript are both based on C syntax, they are not really related .

When presented in the client browser, the Web page is very straightforward, as shown in Figure 13.3.

Figure 13.3. JavaScript validation application client.

graphics/13fig03.jpg

In this application, a user can enter a number in the textbox and then click the Validate button. The application will then check to see whether the value is 5 . If the entered value is not 5 , an alert box will appear to indicate that there was a validation error, as seen in Figure 13.4.

Figure 13.4. JavaScript validation alert box.

graphics/13fig04.jpg

If the user enters 5 , an alert box indicates that the value was as expected.

The mechanism for performing this validation is based on two separate parts of the JavaScript script:

The function definitions
The HTML tags

As with regular programming languages, we can define functions in JavaScript. In this example, we have a single function in the application called validateNumber() .

 <SCRIPT LANGUAGE = "JavaScript"> function validateNumber(tForm) {         if (tForm.result.value != 5 ) {                 alert ("not 5!");         } else {                 alert ("Correct. Good Job!");     } } </SCRIPT>

JavaScript Syntax

Because we are more concerned with the concepts in this book, please refer to a JavaScript book for the specifics of the JavaScript syntax.

The function is actually called when the Validate button is clicked. This action is captured in the HTML form definition.

 <INPUT TYPE="button" VALUE="Validate" NAME="calcButton"    onClick="validateNumber(this.form)">

When the Validate button is clicked, an object that represents the actual form is sent via the parameter list to the validateNumber() function.

Objects in a Web Page

Object programming is inherent to this process. We can see this by looking at the code within the validateNumber() function. Although there are many names , like component, widgets, controls, and so on to describe the parts of a user interface, they all relate to the functionality of an object.

There are several objects used to create this Web page. You can consider the following as objects:

The text box
The button
The form

Each of these has properties and methods . For example, you can change a property of the button, like the color , as well as change the label on the button. The form can be thought of as an object made up of other objects. As you can see in the following line of code, the notation used mimics the notation used in object-oriented languages (using the period to separate the object from the properties and methods). In the line of code, you can see that the value property of the text box object ( result ) is part of the form object ( tForm ).

 if (tForm.result.value != 5 )

Additionally, the alert box itself is an object. We can check this by using a this pointer in the code.

 this.alert ("Correct. Good Job!");

The this Pointer

Remember the this pointer refers to the current object, which in this case is the form.

JavaScript supports a specific object hierarchy. Figure 13.5 provides a partial list of this hierarchy.

Figure 13.5. JavaScript object tree.

graphics/13fig05.gif

As with other scripting languages, JavaScript provides a number of built-in objects. As an example, we can take a look at the built-in Date class. An instance of this class is an object that contains methods such as getHours() and getMinutes() . You can also create your own customized classes. The following code demonstrates the use of the Date object.

 <HTML> <HEAD> <TITLE>Date Object Example</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript" TYPE="TEXT/JavaScript">     days = new Array ( "Sunday", "Monday", "Tuesday",                         "Wednesday", "Thursday", "Friday",                         "Saturday", "Sunday");     today=new Date     document.write("Today is " + days[today.getDay()]); </SCRIPT> </BODY> </HEAD> </HTML>

Note that in this example, we actually create an Array object that holds the string values representing the days of the week. We also create an object called today that holds the information pertaining to the current date. This Web page will display the current day of the week based on the date in your computer's memory.

< Day Day Up >