Client side programming with JavaScript and DHTML

1
Client side programming with JavaScript and DHTML

• Dr Jim Briggs

2
What is JavaScript?

• Scripting Language
• Developed by Netscape in 1995
• Originally called LiveScript
• Renamed to form a marketing relationship with
  Java
• An open language - no licence required

• JavaScript is lines of code combined with HTML
• JavaScript is supported by all major browsers
• (but in slightly different ways!)
• The client has the option not to run JavaScript

3
What can JavaScript do?

• JavaScript introduces interactivity to web pages
• This is achieved by controlling the browser
• Common uses for JavaScript
• Validating forms
• Performing calculations
• Animating images, including rollovers
• Creating advertising banners
• Detect certain predetermined aspects of the
  environment
• e.g. the browser version or required plug-ins
• Generate date and time features including
  calendars and time stamps

4
Tools for the trade

• Any simple text editor
• Textpad
• Notepad
• Specialist HTML editors
• Dreamweaver
• Browsers (for testing and debugging)

5
How to run JavaScript

• lthtmlgt
• ltscript type text/javascriptgt
• document.write(hello World)
• lt/scriptgt
• lt/htmlgt

6
JavaScript the Output
7
JavaScript's Compatibility

• Some very old browsers dont support JavaScript
• Netscape 1.X and Internet Explorer 3
• Some implement it in different ways
• Netscape vs. Internet Explorer
• Getting better!

8
JavaScript's Compatibility

• To insert HTML that only appears in non-scripting
  browsers
• ltNOSCRIPTgt lt/NOSCRIPTgt
• This would also be visible to those that have
  JavaScript turned off

9
Animation
10
What is a rollover?

• As the user moves the mouse over an image or text
  the view changes
• It is a reaction to an event
• It could invoke a status message or change the
  colour of a graphic on the web page

11
Example 1

• lthtmlgt
• ltA HREF"jmouse.htm" onMouseover"window.status'H
  i there!' return true"gtPlace your mouse
  here!lt/Agt
• lt/htmlgt
• Example rollover1.html

12
Example 2 code

• lthtmlgt
• ltA HREF"jmouse.htm" onMouseover"window.status'H
  i there!' return true" onMouseout"window.status
  ' ' return true"gtPlace your mouse here!lt/Agt
• lt/htmlgt
• rollover2.html

13
Example 3

• Use the same method to swap one image for
  another.
• rollover3.html

14
Multiple Links

• It is easy to have multiple rollovers in a page
• buttonover.html

15
Example 4 - Cycling Banners

• One feature of JavaScript is its capability to
  dynamically change images in web pages
• This technique is usually incorporated into
  adverts that popup on your web page
• JavaScript can do this very simply by using an
  image array
• The code cycles through a selection of graphics,
  giving the impression of the graphics rotating
• This creates dynamically changing content on the
  page without the need to use frames and layers

16
Cycling Banners

• Disadvantages
• Only images that exist in the document can change
• New one cant be added
• Existing ones cant be removed
• Images with differing sizes can still be used
• Image download times

17
Cycling Banners

• Image arrays
• Array contains each of the images required for
  the page
• The image then becomes the child object
• rotbanner.htm

18
Slide Shows

• Here the user controls the flow of the images
• This works simply by using the array element
  numbers
• Add 1 to move forward
• Subtract 1 to move backwards
• Add the navigation to the page
• slideshow.htm

19
Form validation
20
Form validation with HTML

• Forms are used frequently in websites to collect
  data
• They incorporate a variety of graphical interface
  elements, e.g. Radio Buttons, Check Boxes, Pop-up
  Menus and textual entry fields

21
Form validation with HTML

• User inputs the data
• Once completed the Submit button is clicked
• This triggers an event - sending the data to the
  web server
• Here the server-side program interprets the data
  and acts on it

22
Form validation with HTML

• Disadvantage
• The user has to complete the whole form and
  submit it before the data gets validated
• The data has to reach the server before the
  validation can commence

• The solution
• To validate on the client-side
• JavaScript enables validation on the client-side

23
Form Validation using JavaScript

• Example
• When changing a password the user is asked to
  enter the new password twice to check for typos
• If the text fields do not match an Alert box will
  appear to inform the user
• If the password input is accurate then it is sent
  to the server
• password_check.html

24
Active site navigation

• With JavaScript you can create a select and go
  menu to select options from a drop down list in
  one click, eliminating the go button
• Take care not to confuse people who have
  JavaScript turned off!

25
Active site navigation

• When the menu is not pulled down, it will display
  a user prompt
• This technique is used by many websites to move
  the user to different sections
• SelectAndGo.html

26
Validating fields

• Use Regular Expressions
• Powerful way to validate and format text strings
• It provides compact way of coding
• You need to know the syntax
• There is only a limited amount of checking that
  can be done client-side
• RegExp.html

27
Regular Expressions

• This regular expression will test the e-mail
  address for us
• re /\w(\.-?\w)_at_\w(\.-?\w)(\.\w2,3)
  /
• re is the variable the RegExp is assigned to
• RegExp begins and ends with /
• indicates beginning of string end
• \w is any character a-z, A-Z and 0-9
• one or more of the previous item

28
Regular Expression

• The use of () brackets indicate a group
• Square brackets indicate any one of the
  characters inside
• \. means a full stop (. means any character)
• ? means optional
• \.\w2,3 looking for the . followed by either 2
  or 3 characters

• must exist 1 or more times e.g. .com, .ac.uk,
  .net
• after an item indicates 0 or more of the item
• _at_ represents the _at_ character
• \w means 1 or more characters
• (\.-?\w) indicates a . or are allowed in
  the suffix/prefix of an e-mail address

29
Event handling
30
Event Handling

• Events are actions that the user performs while
  visiting your web page
• These events can be triggered by
• A mouse click
• A key press
• Form loading

31
The onLoad Event

• Triggered when the user enters your page and all
  its elements have loaded
• A common use of this event is to have
  advertisement windows pop up when you first load
  the page
• The onLoad command is normally in the ltBODYgt tag.
• ltBODY BGCOLOR"WHITE" onLoad"document.myForm.newL
  ocation.selectedIndex0"gt
• If you want to do more than one thing, define a
  function

32
onUnLoad Event

• Triggered when the user leaves the site
• Used commonly again for pop up advertising
  windows when you leave the site.
• Can be used to produce an infinite loop of pop
  ups - a users nightmare!
• A possible use would be to display an exit
  message.
• The onUnLoad is normally on the ltBODYgt tag,
  similar to the onLoad command.

33
Mouse Event Handlers

• Commands can be associated with most page
  elements
• Event only applies to element it is associated
  with

• onmousedown
• onmouseup
• onclick
• ondblclick
• onmouseover
• onmouseout
• onmousemove

34
onMousemove Event

• This is triggered when the user moves the mouse
  over an element
• The eyes

35
onMouseover Event

• This command is used extensively with image
  rollovers.
• This event is triggered when the mouse is moved
  into any area for which the command has been
  assigned (i.e. over an element)

36
onMouseout Event

• The reverse of the onMouseover.
• Triggered when the user moves the mouse out of
  the area for which the event has been assigned.

37
Form event handling

• Form handling event are largely used in form
  validation scripts
• onSubmit event
• Triggered when the user clicks on the Submit
  button to complete the form
• If the result of the handler is false then the
  form is not sent to the server.
• onReset Event
• Triggered when the user clicks the reset button
  on the form
• A function should be called to (re-)assign the
  default values to the form.

38
Form Event handling

• onSelect Event
• Is trigger if the user selects text in an INPUT
  or a TEXTAREA form field
• onChange Event
• Triggered when a user changes a form field.
• Used to verify information immediately or to
  respond to a users choice before the submit
  button is clicked.

39
Advanced interfaces
40
User Interface Design

• "MS-Windows" interface elements not available in
  HTML
• Menu bars
• Pull-down menus
• Need to accomplish with JavaScript

41
Pull down menus

• Source pulldownmenu.html
• The function toggleMenu() switches between the
  menu pulled down and not
• currElem is the element to be toggled
• nextPos is where you want the top position of the
  menu to be

42
Sliding menus

• DHTML enables elements of a page to be switched
  on or off
• Not implemented in Netscape 4
• display attribute either "none" or "block"
• Source slidingmenu.html

43
Tool Tips

• Tool tips appear when you hold a cursor over an
  item.
• Example tooltips.html
• Contains an image map (ltMAPgtlt/MAPgt tag)
• Associate named map to image (ltIMG usemapgt
  attribute)
• Specify region of an image (ltAREAgt tag)
• rect, circle or poly
• Associate action with that region
• Can be client-side action (e.g. JavaScript or
  follow link) or server-side (send co-ordinates to
  server)

44
Click anywhere form fields

• In MS-Windows, clicking on the label of a control
  selects it
• Browser interaction doesnt work in the same way
  - the control requires a precise click
• Source clickanywhere.html