7/27/2019 Cs101_Lec15

1/53

1

CS101 Introduction to Computing

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

7/27/2019 Cs101_Lec15

2/53

7/27/2019 Cs101_Lec15

3/53

3

In Todays Lecture

We will learn ways ofadding moreinteractivity to forms

We will get ourfirst taste of JavaScript theobject-based language that we will beemploying throughout the rest of the Webdevelopment part of this course

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

7/27/2019 Cs101_Lec15

4/53

4

But first lets review the tags

that are used in forms

7/27/2019 Cs101_Lec15

5/53

5

Elements of the form

7/27/2019 Cs101_Lec15

6/53

6

Single-Line Text Input Field

7/27/2019 Cs101_Lec15

7/53

7

Password Input Field

7/27/2019 Cs101_Lec15

8/53

8

Hidden Input

7/27/2019 Cs101_Lec15

9/53

9

Checkbox Input Element

7/27/2019 Cs101_Lec15

10/53

10

Radio Button Input Element

7/27/2019 Cs101_Lec15

11/53

11

File Upload Input Element

7/27/2019 Cs101_Lec15

12/53

12

Reset Button Input Element

7/27/2019 Cs101_Lec15

13/53

13

Submit Button Input

7/27/2019 Cs101_Lec15

14/53

14

8 Possible Values for the type

Attribute of tag

1. text

2. password

3. hidden4. checkbox

5. radio

6. file7. reset

8. submit

7/27/2019 Cs101_Lec15

15/53

15

Multi-Line Text Input Area

initial default value

7/27/2019 Cs101_Lec15

16/53

16

Select from a (Drop Down) List

text1

text2text2

7/27/2019 Cs101_Lec15

17/53

17

7/27/2019 Cs101_Lec15

18/53

18

7/27/2019 Cs101_Lec15

19/53

19

End of the Review of Tags Used in Forms

Now lets take a look at a form that weconstructed last time, and see how we can

make it better

7/27/2019 Cs101_Lec15

20/53

20

7/27/2019 Cs101_Lec15

21/53

21

Lets now review what happens when I enter

all the required info and pressthe Send

eMail button?

I f t i d

7/27/2019 Cs101_Lec15

22/53

22

Info contained

in the form

Messageto the

receivers

eMail

address

Users

Computer

Web

Server

Server-Side

Script

Browser

7/27/2019 Cs101_Lec15

23/53

23

This is what happens when the form is filled correctly.

What if the form is filled incorrectly?

What if the users leaves one of theessential fields, blank?

What if the user enters an illegal eMailaddress? Examples:

altaf2vu.edu.pk

bhola@hotmail.con

bhola@yahoo

A R bl S i

7/27/2019 Cs101_Lec15

24/53

24

A Reasonable Scenario

When the Send eMail button is clicked, the

browser sends the data collected through theform 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 backto the users browser

stating the problem and asks the user to re-send

7/27/2019 Cs101_Lec15

25/53

25

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

7/27/2019 Cs101_Lec15

26/53

26

Client-Side Scripting is a viable alternate

In this technique, one uses the users browserto checking the form data

If data is missing or is incorrect, the browsercan prompt the userto 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

7/27/2019 Cs101_Lec15

27/53

27

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

7/27/2019 Cs101_Lec15

28/53

28

New Concept: Client-Side Scripts Small programs that are a part of the Web page

and runon the users (clients) computer

They interact with the userto 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

Ad t f Cli t Sid S i ti

7/27/2019 Cs101_Lec15

29/53

29

Advantages of Client-Side Scripting

Reduced server load as it does not have tosend messages to the users browser about

missing or incorrect data

Reduced network trafficas the forms data is

sent only once instead of many tos and fros

Di d t

7/27/2019 Cs101_Lec15

30/53

30

Disadvantages

Client-side scripts do not work with all browsers

Some user intentionally turn scripting offon

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

7/27/2019 Cs101_Lec15

31/53

31

A Simple Example of

Client-Side Scripting

7/27/2019 Cs101_Lec15

32/53

32

7/27/2019 Cs101_Lec15

33/53

33

Code for the simple Send eMail

button as was described during

the last Web development lecture

7/27/2019 Cs101_Lec15

34/53

34

7/27/2019 Cs101_Lec15

35/53

35

7/27/2019 Cs101_Lec15

36/53

36

This is one way of including JavaScript code inan HTML document that is, including a shortJavaScript 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 interestedin including JavaScript in our Web pages

Why JavaScript?

7/27/2019 Cs101_Lec15

37/53

37

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?

7/27/2019 Cs101_Lec15

38/53

38

What is JavaScript?

A programming language specifically designed

to work with Web browsers

It is designed to be used fordeveloping small

programs called scripts that can beembedded in HTML Web pages

JavaScript: Is an interpreted language

Supports event-driven programming

Is object-based

Object Based?

7/27/2019 Cs101_Lec15

39/53

39

Object Based?

Everything that JavaScript manipulates, it

treats as an objecte.g. a window or a button

An object haspropertiese.g. a window hassize, position, status, etc.

Properties are modified with methodse.g. aresize a window with resizeTo(150, 200)

7/27/2019 Cs101_Lec15

40/53

40

Back to our example

7/27/2019 Cs101_Lec15

41/53

41

7/27/2019 Cs101_Lec15

42/53

42

7/27/2019 Cs101_Lec15

43/53

7/27/2019 Cs101_Lec15

44/53

44

7/27/2019 Cs101_Lec15

45/53

45

checkForm()

JavaScript understands onMouseOver it isone of the pre-defined keywords in JavaScript

However, the case forcheckForm() is different

A checkForm() function does not exist inJavaScript. Therefore, we will have to define it

ourselves

It can eitherbe defined in the HEAD portion or

BODY portion. We will do it in the HEAD.

7/27/2019 Cs101_Lec15

46/53

46

Send an eMail

function checkForm() {

if ( document.sendEmail.sender.value.length < 1) {window.alert( Empty From field! Please correct ); }

}

body content

JavaScript code

enclosed in the new

,

HTML tags

7/27/2019 Cs101_Lec15

47/53

47

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

1. Put the code in the tag for the Send eMailbutton - as was shown to you earlier

2. Put the checkForm() code in the HEADportion & 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?

Th t ll d i th t t h i t

7/27/2019 Cs101_Lec15

48/53

48

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 scriptstatements in the same tag

The code in the HEAD portion is moregeneral-purpose, and the right choice for

developing larger JavaScript scripts

7/27/2019 Cs101_Lec15

49/53

49

Lets again look at the

JavaScript code

The main code segment that goes between the

7/27/2019 Cs101_Lec15

50/53

50

The main code segment that goes between the

, 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

7/27/2019 Cs101_Lec15

51/53

51

Today we checked if the From field of the form

was empty

How can we modify the JavaScript code forchecking 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?

7/27/2019 Cs101_Lec15

52/53

Next (the 6th) Web Dev Lecture:

7/27/2019 Cs101_Lec15

53/53

53

Next (the 6 ) Web Dev Lecture:JavaScript Object, Properties, Methods

We will have a more formal introduction toJavaScript and client-side scripting

We will become able to appreciate the conceptof objects in JavaScript

We will learn about the properties of thoseobjects

We will become able to perform simple tasks