Clientside JavaScript

1
Session 3

• Client-side JavaScript

• In part adapted by Sophie Peter from original
  document by Charlie Foulkes

2
JavaScript Facts

• A scripting language - not compiled but
  interpreted line by line at run-time.
• Suitable for Netscape v2 and IE v3 and above
• Platform independent.
• It is NOT the same as Java.
• Object-oriented.
• Event-driven.

3
JavaScript Facts

• Secure - cannot read, write, save or erase on the
  clients hard disk.
• Can be run Client-Side or Server-Side.
• Beware implementation varies according to
  browser.
• Beware there is more than one version of
  JavaScript out there!

4
Why is JavaScript so cool?

• JavaScript has many uses including
• Adding interactivity and novelty to pages (games,
  animations, user preferences)
• Giving the web developer more control over
  presentation and appearance of pages
• Validating data input through forms
• Creating and controlling windows
• Interface with databases
• Feedback to users (alert) and cookies

5
Programming Environment

• Written within HTML documents

6
Programming Environment

• Mainly between ltheadgt tags, script itself must be
  contained within ltscriptgt tag e.gltheadgtlttitlegt
  Examplelt/titlegtltscript languageJavaScriptgt//c
  ode goes herelt/scriptgtlt/headgt

7
Programming Environment

• Also in object tags e.gltformgtltinput
  type"button" valueClick Me onClickdoIt()gt
  lt/formgt

8
Programming Environment

• JavaScript can also be shared across web pages by
  saving the code in a separate file and referring
  to it as shown. This is very handy for building
  up libraries of functionsltheadgtltscript
  srcmyJavaScript.jsgtlt/headgt

9
Inputs Outputs

• Programs are most often required to do two
  things
• Run through a routine set of operations e.g.
  batch processing.
• Interact with the user in some way often
  outputting a result on screen.
• You will be using client-side JavaScript for the
  latter.

10
Inputs Outputs

• There are several ways that the user can input
  information and that your program can output it.
  These can be divided into roughly 3 categories
• Forms
• Windows
• HTML

11
Form Inputs

• Looked at this last week
• Text Boxes
• Text Areas
• Button Clicks
• Check Boxes
• Radio Buttons
• Select List

12
Form Inputs

• Normally the purpose of forms is to collect data
  which is to be emailed to someone or sent to a
  database via the submit() function. In order to
  use the methods of input just discussed it is
  always necessary to enclose the code in ltformgt
  tags even when there is no interaction with the
  web server (i.e. all the processing is done
  client-side).

13
Window Inputs

• window.prompt()displays a text box and a cancel
  button for gathering input.
• window.confirm()this has 2 buttons - OK or
  Cancel.

14
HTML Inputs

• HyperlinksClicking on a hyperlink itself is a
  method of interacting with a web page and may
  trigger an event, whether the hyperlink is an
  image or is text-based.

15
Outputs

• Without reloading the page
• window.alert() which displays a message and has
  an OK button.
• Text displayed in a text box or text area.
• Swapping one image for another.
• Messages in the status bar.

16
Outputs

• Which require reloading the page
• document.write()a function which writes HTML
  directly into a page on the fly, usually when the
  document is first loaded. This way you can
  include dynamic content, such as User name, the
  time or date etc.

17
Simple JavaScript Examples
ltformgt ltinput type"button" value"Click here!"
onClick"alert('Hello World!')"gt lt/formgt
JavaScript statements end with a semicolon
Here the alert()function is used inside an event
handler - onClick. When the button is clicked,
the piece of code is executed causing the alert
box to be shown. Code using these event handlers
must be written inside double quotation marks.
18
JavaScript Event Handlers

• ltTAG attributes eventHandlerJavaScript Codegt
• So far we have seen the onClick event handler in
  action, providing a response to clicking a
  button, but there are many others. Handlers are
  a programmed response to a specific event - such
  as loading the document, or a user changing the
  text in a text box.

19
onLoad and onUnload
ltbody onLoad"alert(Greetings!')"gt

• Certain events are associated with certain
  elements only. For example the onLoad and
  onUnload event handlers reside in the ltbodygt tag
  and can also be placed in the ltimagegt tag but
  cannot but used elsewhere. These event handlers
  are useful if you want something to happen when a
  web page is opened or closed.

20
Event Handlers

• onBlur - When focus is taken away from a form
  element (e.g. the user clicks elsewhere or
  presses the tab key). Works with text inputs and
  select lists.
• onChange - Works when the focus is taken away
  from a form element and the contents have been
  changed (e.g. a text box).
• onClick - Responds to the user clicking on a
  button or a hyperlink.
• onFocus - When focus moves to a form element.

21
Event Handlers

• onLoad, onUnload - As per previous slide.
• onMouseover - When the mouse points at a
  hyperlink.
• onSelect - When the user selects something in a
  form element.
• onSubmit - Used in the ltformgt tag and executed
  when the form is submitted.
• and lots more

It is possible to use several handlers in one tag
and to have more than one event that happens
when the event is triggered.
22
Validation and Error Prevention
Don't allow users to enter inappropriate
information into form elements - this prevents
errors at the database end. GIGO Garbage In
Garbage Out
23
Validation

• Existence can the data be null?
• Syntactic does this look like an email addressgt
• Range age between 18 and 120
• Type Is it a number or an integer
• Domain special constrained type of type e.g.
  MrMrsMs or StandardEmergency
• Rule Based collections of interdependent
  business rules
• E.g. Valid moves in chess
• Or mining for plausibility e.g. share trades

24
Client-Side or Server-Side?

• Generally, the less error checking done on the
  server the better. This minimises traffic.
• You must use server side checking when you need
  to interrogate the database
• e.g. to check if a record already exists
• However, if traffic considerations are not
  important then do all the error checking at the
  server.

25

• Client Side Error Prevention
• Use JavaScript to prevent simple errors e.g. not
  entering required data or entering wrong type of
  data in text boxes
• Use list boxes if possible to restrict range of
  input
• Give examples to the user and clear instructions

26
Error Prevention

• ltform method POST onSubmitreturn
  checkall(this)"
• action"http//www.eg.com/eg.asp"gt
• Error checking is best done at client side by
  calling a function from the form's onSubmit event
  handler.

27
What is a Function?
A function is a piece of code which returns a
value to the calling program. The program can
then act accordingly. Data can be passed to the
function in the form of a parameter or argument.
28
ltheadgt ltSCRIPT LANGUAGE "Javascript"gt function
checkall(theFormName) if (theFormName.Surname.v
alue "") alert("You must enter a
surname") return (false) lt/SCRIPT
gt lt/headgt
Make sure you use
29
If you write a function in the ltHEADgt part of the
HTML document which returns true the form will be
submitted, if the function returns false, the
form will not submit. This effectively
prevents the data being sent to the ASP document
in the first place.
30
The other bits .
ltform method POST onsubmit "return
checkall(this) action"CustomerUpdate.asp"gt
ltinput type"Submit" value"Submit"
namebtnSubmit"gt
Note the parameter this passes the name of the
form to the function
31
Validation Exercise

• Demo
• Lab exercise