5. Introduction to JavaScript

HTML is great for static Web pages; but supports very less interactivity through forms and hyper-links. JavaScript can be used (along with HTML) to develop interactive content for the Web.

What is JavaScript ?

===================

JavaScript is a programming language specifically designed to work with Web browsers. It is designed to be used for developing small programs – called scripts – that can be embedded in HTML Web pages. JavaScript supports event-driven programming and is object-based language.

Object Based means that everything that JavaScript manipulates, it treats as an object – e.g. a window, button etc... and again object has properties – e.g. a window has size, position, status, etc.

Why JavaScript ?

===================

Assume that there is no such thing like JavaScript and consider a simple HTML form (say the form created in the last post). Here, when we enter all the information and press send button, this is what exactly could happen in acual scnerio:

• Browser will send all the information to the server.
• Server will then send an acknowledgement back to the browser 
• And finally send the contents to the receiver's mail address.

This is what happens when the form is filled correctly.
(Server side scripts/code are programs that reside on Web servers, receive info that a user enters in a form, process that info and take appropriate action)

Now consider if the information is filled incorrectly for example user leaves one required field as empty or might type a wrong email address. Now this is what exactly happens:

• Browser will send all the information to the server.
• Server side code receives the data, analyze that and discover the missing or incorrect data.
• The server will send a respose back to browser stating the problem and ask the user to fill the form again.
• Again, user will fill the information and resend the data to the server.

This is quite time consuming as every time sever code helps the user to correct his mistakes. Moreover, if large number of users are using the server, it can really slow down the server processing.

Here comes the use of client side scripting (javaScript is one of the method).
In this technique, one uses the user’s browser to checking the form data. If data is missing or is incorrect, the browser can prompt the user to take corrective action. This way, the form data is sent to the server-side script only after it has been established that the collected data is complete and correct.

Now consider a simple example of javaScript. (Here I am extending the functionality of the same form as in my previous post).
Here user will be prompted an error message if receiver's field is empty as soon as he moves cursor on the 'send' button as shown below:

Below is script for the same:

< HTML>
    < HEAD>
        < TITLE>Send email to me< /TITLE>
    < /HEAD>
    < BODY>
        < H1>Send an Email< /H1>
        < FORM name="sendMail">
            < TABLE>
                < TR>
                    < TD>
                        From : 
                    < /TD>
                    < TD>
                        < INPUT type="text" name="sender" size="50" />
                    < /TD>
                < /TR>
                < TR>
                    < TD>
                        To : 
                    < /TD>
                    < TD>
                        < INPUT type="text" name="receiver" size="50" />
                    < /TD>
                < /TR>
                < TR>
                    < TD>
                        Message:
                    < /TD>
                    < TD>
                        < TEXTAREA name="message" cols="38" rows="6">< /TEXTAREA>
                    < /TD>
                < /TR>
                < TR>
                    < TD>< /TD>
                    < TD align="right">
                        < INPUT type="submit" name="sendEmail"
                        value="Send email to me"
						onMouseOver="if(document.sendMail.receiver.value.length<1)
						window.alert('Empty Field. Please correct')" />
                    < /TD>
                < /TR>
            < /TABLE>
        < /FORM>
    < /BODY>
< /HTML>

Here is additional javaScript code on button that would not allowed to be clicked if the 'To' field is empty.

onMouseOver="if(document.sendMail.sender.value.length<1)

window.alert('Empty Field. Please correct')"

• onMouseOver is a predefined event in javaScript.
• Any HTML page is reffered by 'document'
• sendMail is the name of the form.
• receiver.value.length - receiver is name of 'To' text field. So we are fetching its length. If length is less than 1 (means blank), we have to prompt an error message.
• window.alert: 'window' is a predefined object in javaScript having a function named 'alert'.

Here, instead of writing javaScript inside <INPUT> tag, we can define our own function using <SCRIPT> tag and then use that function whereever required.