CS101 Introduction to Computing

Lecture 15
More on Interactive Forms (Web Development Lecture 5)
1

Focus of the last lecture was on Interactive Forms

We looked at the utility of forms on Web pages We found out about the various components that are used in a form We became able to build a simple, interactive form
2

In Todays Lecture
We will learn ways of adding more interactivity to forms We will get our first taste of JavaScript the object-based language that we will be employing throughout the rest of the Web development part of this course

Last time we mentioned server-side scripts; today we will write (simple) client-side scripts in JavaScript 3

But first lets review the tags that are used in forms

<FORM name=name method=get or post action=URL >

Elements of the form </FORM>
5

Single-Line Text Input Field

<INPUT type=text name=name size=widthInCharacters maxlength=limitInCharacters value=initialDefaultValue >
6

Password Input Field

<INPUT type=password name=name size=widthInCharacters maxlength=limitInCharacters value=initialDefaultValue >
7

Hidden Input

<INPUT type=hidden name=name value=value >

Checkbox Input Element

<INPUT type=checkbox name=name checked value=checkedValue >

9

Radio Button Input Element

<INPUT type=radio name=name checked value=selectedValue >

10

File Upload Input Element

<INPUT type=file name=name value=nameOfSelectedFile enctype=fileEncodingType >

11

Reset Button Input Element

<INPUT type=reset value=buttonLabel >

12

Submit Button Input

<INPUT type=submit name=name value=buttonLabel >

13

8 Possible Values for the type Attribute of <INPUT> tag

1. 2. 3. 4. 5. 6. 7. 8. text password hidden checkbox radio file reset submit
14

Multi-Line Text Input Area

<TEXTAREA name=areaName cols=width rows=lines > initial default value
</TEXTAREA>
15

Select from a (Drop Down) List

<SELECT name=name size=numberOfDisplayedChoices multiple > <OPTION value=value1> text1 <OPTION value=value2 selected> text2 <OPTION value=value3> text2

</SELECT>

16

17

18

End of the Review of Tags Used in Forms

Now lets take a look at a form that we constructed last time, and see how we can make it better

19

20

Lets now review what happens when I enter all the required info and press the Send eMail button?

21

Browser

Info contained in the form

Users Computer Web Server

Server-Side Script

Message to the receivers eMail 22 address

This is what happens when the form is filled correctly.

What if the form is filled incorrectly?

What if the users leaves one of the essential fields, blank? What if the user enters an illegal eMail address? Examples:
altaf2vu.edu.pk bhola@hotmail.con bhola@yahoo
23

A Reasonable Scenario
When the Send eMail button is clicked, the browser sends the data collected through the form to a script running on the Web server That server-side script:
receives that data analyzes it discovers the missing or incorrect data sends a message back to the users browser stating the problem and asks the user to re-send
24

This process
That is the process of user:
Filling the incomplete/incorrect data Sending it to the server Receiving the response back from the server Correcting and resending

is quite time-consuming and uses the servers resources to help the user correct his mistakes It can really bog down the server if a large number of users are using that Web server 25

Client-Side Scripting is a viable alternate

In this technique, one uses the users 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 serverside script only after it has been established that the collected data is complete and correct
26

Server-Side Scripts: Review

Are programs that reside on Web servers Receive info that a user enters in a form

Process that info and take appropriate action Examples:

CGI scripts on Unix servers ASP scripts on Windows servers
27

New Concept: Client-Side Scripts

Small programs that are a part of the Web page and run on the users (clients) computer They interact with the user to collect info or to accomplish other tasks Once it has been collected, they may help pass the collected info on to a server-side script

Well use JavaScript to do client-side scripting. However, there are many other languages that can be used for that purpose, e.g. VBScript 28

Advantages of Client-Side Scripting

Reduced server load as it does not have to send messages to the users browser about missing or incorrect data

Reduced network traffic as the forms data is sent only once instead of many tos and fros

29

Disadvantages
Client-side scripts do not work with all browsers Some user intentionally turn scripting off on their browsers This increases the complexity of the Web page, as it now has to support both situations: browsers with scripting capability, and those not having that capability
30

A Simple Example of Client-Side Scripting

31

32

<INPUT type=submit name=sendEmail value=Send eMail >

Code for the simple Send eMail button as was described during the last Web development lecture
33

<INPUT type=submit name=sendEmail value=Send eMail onMouseOver= if (document.sendEmail.sender.value.length < 1) window.alert(Empty From field! Please correct) >

Additional JavaScript code for the smart Send eMail button that would not allow itself to be 34 clicked if the From text field is left blank

<INPUT Event type=submit Handler name=sendEmail value=Send eMail onMouseOver= if (document.sendEmail.sender.value.length < 1) window.alert(Empty From field! Please correct) >

35

 This is one way of including JavaScript code in an HTML document that is, including a short JavaScript segment as part of an HTML tag There are a few others as well. Lets now find out about another. But before we do that lets just make clear why we are interested in including JavaScript in our Web pages
36

Why JavaScript?
HTML is great for static Web pages; however, supports only rudimentary interactivity through forms and hyperlinks

JavaScript can be used (along with HTML) to develop interactive content for the Web

37

What is JavaScript?
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:
Is an interpreted language Supports event-driven programming Is object-based

38

Object Based?
Everything that JavaScript manipulates, it treats as an object e.g. a window or a button An object has properties e.g. a window has size, position, status, etc. Properties are modified with methods e.g. a resize a window with resizeTo(150, 200)
39

Back to our example

40

41

<INPUT type=submit name=sendEmail value=Send eMail onMouseOver= if (document.sendEmail.sender.value.length < 1) window.alert(Empty From field! Please correct) >

42

<INPUT type=submit name=sendEmail value=Send eMail onMouseOver=checkForm() >

43

<INPUT type=submit name=sendEmail value=Send eMail onMouseOver= if (document.sendEmail.sender.value.length < 1) window.alert(Empty From field! Please correct) > <INPUT type=submit name=sendEmail value=Send eMail onMouseOver=checkForm() 44 >

checkForm()
JavaScript understands onMouseOver it is one of the pre-defined keywords in JavaScript However, the case for checkForm() is different A checkForm() function does not exist in JavaScript. Therefore, we will have to define it ourselves It can either be defined in the HEAD portion or 45 BODY portion. We will do it in the HEAD.

<HTML> <HEAD> <TITLE>Send an eMail</TITLE> <SCRIPT> function checkForm() { if ( document.sendEmail.sender.value.length < 1) { window.alert( Empty From field! Please correct ); } } </SCRIPT> </HEAD> <BODY bgcolor=#FFFFCC> body content JavaScript code </BODY> enclosed in the new <SCRIPT>,</SCRIPT> </HTML> 46 HTML tags

We have looked at 2 techniques for embedding JavaScript code in a Web page:

1. Put the code in the tag for the Send eMail button - as was shown to you earlier 2. Put the checkForm() code in the HEAD portion & put the onMouseOver=checkForm() attribute in the tag for the Send eMail button

Both perform the required function satisfactorily.

Q: Which of two techniques is better?
47

 The put all code in the tag technique seems to require less code

For very short scripts, all code in the tag works well. However, this technique does not work when one needs to put multiple script statements in the same tag
The code in the HEAD portion is more general-purpose, and the right choice for developing larger JavaScript scripts
48

Lets again look at the JavaScript code

49

The main code segment that goes between the <SCRIPT>, </SCRIPT> tags in the HEAD:
function checkForm() { if ( document.sendEmail.sender.value.length < 1) { window.alert( Empty From field! Please correct ); } }

The JavaScript code included as an attribute of the Send eMail button: onMouseOver=checkForm()
50

Today we checked if the From field of the form was empty How can we modify the JavaScript code for checking if the To field is empty as well? How about checking all four fields? How about checking if the addresses given in the From and To fields are legal eMail addresses? Please try thinking about those possibilities? 51

In Todays Lecture
We learnt ways of constructing forms that were a bit more interactive We got our first taste of JavaScript the object-based language that we will be employing throughout the rest of the Web development part of this course

Last time we mentioned server-side scripts; today we wrote (simple) client-side scripts in JavaScript 52

Next (the 6th) Web Dev Lecture:

JavaScript Object, Properties, Methods
We will have a more formal introduction to JavaScript and client-side scripting We will become able to appreciate the concept of objects in JavaScript We will learn about the properties of those objects We will become able to perform simple tasks 53 through the application of methods