Interactivity to Forms, JavaScript, server-side scripts

<< WORD PROCESSING: Common functions of word processors, desktop publishing

ALGORITHMS >>

Introduction to Computing CS101

LESSON 15

MORE ON INTERACTIVE FORMS

(Web Development Lesson 5)

Focus of the last Lesson 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

In Today's Lesson ...

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

15.1 Single-Line Text Input Field

<INPUT

type="text"

name="name"

size="widthInCharacters"

maxlength="limitInCharacters"

value="initialDefaultValue"

15.2 Password Input Field

<INPUT

type="password"

name="name"

size="widthInCharacters"

maxlength="limitInCharacters"

value="initialDefaultValue"

15.3 Hidden Input

<INPUT

type="hidden"

name="name"

value="value"

15.4 Checkbox Input Element

<INPUT

type="checkbox"

name="name"

checked

value="checkedValue"

15.5 Radio Button Input Element

<INPUT

type="radio"

name="name"

checked

value="selectedValue"

Introduction to Computing CS101

15.6 File Upload Input Element

<INPUT

type="file"

name="name"

value="nameOfSelectedFile"

enctype="fileEncodingType"

15.7 Reset Button Input Element

<INPUT

type="reset"

value="buttonLabel"

15.8 Submit Button Input

<INPUT

type="submit"

name="name"

value="buttonLabel"

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

text

password

hidden

checkbox

radio

file

reset

submit

15.9 Multi-Line Text Input Area

<TEXTAREA

name="areaName"

cols="width"

rows="lines"

initial default value

</TEXTAREA>

15.10 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>

Introduction to Computing CS101

End of the Review of Tags Used in Forms

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

Introduction to Computing CS101

Let's now review what happens when I enter all the required info and press the "Send eMail" button?

Info contained

in the form

Browser

Server-Side

Script

User's

Acknowledgement

Computer

Web

Server

Message

to the

receiver's

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

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 user's browser stating the problem and asks the user to re-send

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 server's 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

15.11 Client-Side Scripting is a viable alternate

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

15.12 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

Introduction to Computing CS101

New Concept: Client-Side Scripts

Small programs that are a part of the Web page and run on the user's (client's) 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

We'll use JavaScript to do client-side scripting. However, there are many other languages that can be

used for that purpose, e.g. VBScript

Advantages of Client-Side Scripting

Reduced server load as it does not have to send messages to the user's browser about missing or

incorrect data

Reduced network traffic as the form's data is sent only once instead of many to's and fro's

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

<INPUT

type="submit"

name="sendEmail"

value="Send eMail"

Code for the simple "Send eMail"

button as was described during

the last Web development lecture

Introduction to Computing CS101

<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 clicked if the "From" text field is left

<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')"

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. Let's now find out about another.

But before we do that ...

... let's just make clear why we are interested in including JavaScript in our Web pages

15.13 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

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

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)

Introduction to Computing CS101

<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()"

<INPUT

type="submit"

name="sendEmail"

value="Send eMail"

onMouseOver=

"if (document.sendEmail.sender.value.length < 1)

window.alert(`Empty From field! Please correct')"

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 BODY portion. We will do it in the HEAD.

Introduction to Computing CS101

<HTML>

<HEAD>

<TITLE>Send an eMail</TITLE>

function checkForm() {

if ( document.sendEmail.sender.value.length < 1) {

window.alert( "Empty From field! Please correct" );

}

</SCRIPT>

</HEAD>

JavaScript code

... body content ...

enclosed in the new

</BODY>

<SCRIPT>,</SCRIPT

</HTML>

> 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?

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

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()"

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?

In Today's Lesson ...

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

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 through the application of methods

Table of Contents: