VU

1
VU
2
CS101 Introduction to ComputingLecture 15More
on Interactive Forms (Web Development Lecture 5)
3
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

4
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

5
But first lets review the tags that are used in
forms
6

• ltFORM
• namename
• methodget or post
• actionURL
• gt
• Elements of the form
• lt/FORMgt

7
Single-Line Text Input Field

• ltINPUT typetext
• namename
• sizewidthInCharacters
• maxlengthlimitInCharacters
• valueinitialDefaultValuegt

8
Password Input Field

• ltINPUT typepassword
• namename
• sizewidthInCharacters
• maxlengthlimitInCharacters
• valueinitialDefaultValuegt

9
Hidden Input

• ltINPUT typehidden namename valuevalue
  gt

10
Checkbox Input Element

• ltINPUT typecheckbox
• namename
• checked
• valuecheckedValuegt

11
Radio Button Input Element

• ltINPUT typeradio
• namename
• checked
• valueselectedValuegt

12
File Upload Input Element

• ltINPUT typefile
• namename
• valuenameOfSelectedFile
• enctypefileEncodingTypegt

13
Reset Button Input Element

• ltINPUT typereset
• valuebuttonLabelgt

14
Submit Button Input

• ltINPUT typesubmit namename valuebutto
  nLabelgt

15
8 Possible Values for the type Attribute of
ltINPUTgt tag

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

16
Multi-Line Text Input Area

• ltTEXTAREA nameareaName colswidth rowsli
  nesgt
• initial default value
• lt/TEXTAREAgt

17
Select from a (Drop Down) List

• ltSELECT namename
• sizenumberOfDisplayedChoices
• multiple
• gt
• ltOPTION valuevalue1gt text1
• ltOPTION valuevalue2 selectedgt text2
• ltOPTION valuevalue3gt text2
• lt/SELECTgt

18
(No Transcript)
19
(No Transcript)
20
End of the Review of Tags Used in FormsNow
lets take a look at a form that we constructed
last time, and see how we can make it better
21
(No Transcript)
22
Lets now review what happens when I enter all
the required info and press the Send eMail
button?
23
Info contained in the form
Browser
Server-Side Script
Users Computer
Acknowledgement
Web Server
Message to the receivers eMail address
24
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_at_hotmail.con
• bhola_at_yahoo

25
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

26
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

27
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
  server-side script only after it has been
  established that the collected data is complete
  and correct

28
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

29
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

30
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

31
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

32
A Simple Example of Client-Side Scripting
33
(No Transcript)
34
ltINPUT typesubmit namesendEmail
valueSend eMailgt
Code for the simple Send eMail button as was
described during the last Web development lecture
35
ltINPUT typesubmit namesendEmail
valueSend eMail onMouseOver if
(document.sendEmail.sender.value.length lt 1)
window.alert(Empty From field! Please
correct)gt
Additional JavaScript code for the smart Send
eMail button that would not allow itself to be
clicked if the From text field is left blank
36
ltINPUT typesubmit namesendEmail
valueSend eMail onMouseOver if
(document.sendEmail.sender.value.length lt 1)
window.alert(Empty From field! Please
correct)gt
Event Handler
37

• 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

38
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

39
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

40
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)

41
Back to our example
42
(No Transcript)
43
ltINPUT typesubmit namesendEmail
valueSend eMail onMouseOver if
(document.sendEmail.sender.value.length lt 1)
window.alert(Empty From field! Please
correct)gt
44
ltINPUT typesubmit namesendEmail
valueSend eMail onMouseOvercheckForm()gt
45
ltINPUT typesubmit namesendEmail
valueSend eMail onMouseOver if
(document.sendEmail.sender.value.length lt 1)
window.alert(Empty From field! Please
correct)gt
ltINPUT typesubmit namesendEmail
valueSend eMail onMouseOvercheckForm()gt
46
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.

47

• ltHTMLgt
• ltHEADgt
• ltTITLEgtSend an eMaillt/TITLEgt
• ltSCRIPTgt
• function checkForm()
• if ( document.sendEmail.sender.value.length lt
  1)
• window.alert( Empty From field! Please
  correct )
• lt/SCRIPTgt
• lt/HEADgt
• ltBODY bgcolorFFFFCCgt
• body content
• lt/BODYgt
• lt/HTMLgt

JavaScript code enclosed in the new
ltSCRIPTgt,lt/SCRIPTgt HTML tags
48

• 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 onMouseOvercheckForm() attribute in
  the tag for the Send eMail button
• Both perform the required function
  satisfactorily.
• Q Which of two techniques is better?

49

• 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

50
Lets again look at the JavaScript code
51

• The main code segment that goes between the
  ltSCRIPTgt, lt/SCRIPTgt tags in the HEAD
• function checkForm()
• if ( document.sendEmail.sender.value.length lt
  1)
• window.alert( Empty From field! Please
  correct )
• The JavaScript code included as an attribute of
  the Send eMail button
• onMouseOvercheckForm()

52
Today we checked if the From field of the form
was emptyHow 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?
53
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

54
Next (the 6th) Web Dev LectureJavaScript
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