Network Applications

1
Network Applications

• Lecture 4
• Client-side programming for the WWW
• Reacting to Events
• DHTML
• Cookies

2
Events

• In last lecture
• we looked at how JavaScript could be used to add
  more interactivity to page.
• Looked at using dialogue boxes (e.g., prompt) for
  user input, and different ways to modify the
  page.
• As well as using dialogue boxes for user input,
  we can detect when certain events happen, and act
  on these
• e.g, mouse clicks and movement, form submission,
  key presses

3
Event Handlers

• You can specify what action to take if various
  events happen
• We can add an attribute to the relevant HTML
  element specifying a javascript method to call.

ltform idf1 onsubmitreturn checkme()gt .. ltinp
ut typebutton valuepress
onclickclickfn() /gt
Note if onsubmit method returns false it wont
submit.
4
Event Handlers

• Each type of document object has a set of
  possible event handlers which can be defined.
• E.g., button has "onclick"

ltheadgt ltscript type"text/javascript"gt
function dontclickme() alert("I told
you not to click me") lt/scriptgt lt/headgt ltbodygt lt
form action""gt ltinput type"button" value"Don't
do it!" onclick"dontclickme()"/gt lt/formgt
Try it
Play with it
5
Form Validation

• JavaScript widely used to validate and
  "autocomplete" forms before they are submitted.
• The "onsubmit" event handler is used to validate.
  
• We write a JavaScript function that checks the
  form contains all the necessary data, and prompts
  user for missing entries.
• Function should return "false" if data is
  incomplete. This stops form being submitted.

6
Form validation
ltscript languageJavaScriptgt function check()
if(document.f1.yourname.value)
alert(Enter your name) return(false)
else return(true) .
In head
ltform idf1 onsubmitreturn check()gt ltinput
typetext nameyournamegt
In body
Example
Play with it
7
DHTML

• DHTML Dynamic HTML
• Use JavaScript to dynamically change objects on
  web page
• position of objects
• content of objects
• properties of objects (e.g., colour)
• Will show here how DHTML can be used to create
  simple animation.
• This requires that we can specify, and change
  position of objects.

8
Positioning objects

• Various ways to position objects in HTML - Ill
  use CSS-P (CSS positioning).
• We create sections (divisions) in our HTML, which
  will have a position and size on screen.
• We use CSS to specify the position and size.

9
The DIV element

• The DIV element is used to specify sections of
  HTML we want to be able to position

ltdiv idmybitgt lth1gt My Page lt/h1gt ltimg
srcalison.gif/gt ltpgt Isnt it great
lt/pgt lt/divgt

• We give the section an id - a bit like a name.

10
Adding style

• We can specify a CSS rule for just that section,
  using its id

ltstylegt mybit color blue position
relative pixelLeft 50 lt/stylegt

• position relative states that it should be
  relative to other elements on page.
• pixelLeft gives distance from left in pixels

View it
Play with it
11
Making it move

• We can modify stylesheet property values from
  within JavaScript

mybit.style.pixelLeft 300 mybit.style.color
red

• Could have a function that changed position of
  section

function jump() mybit.style.pixelLeft
20

• Then could have onclickjump()

12
Jump Example
ltscript..gt function jump()
mybit.style.pixelLeft 10 lt/scriptgt ltdiv
idmybitgt lth1gt Hello lt/h1gt lt/divgt ltformgt
ltinput typebutton valueJump
onClickjump()gt lt/formgt
In head
In body
13
Moving across the screen

• We cab keep adding a little to the positions,
  until it has moved enough..

function move() if(mybit.style.pixelLeft lt
300) mybit.style.pixelLeft 5
setTimeout(move(), 50)

• setTimeout calls function again after small time
  delay.

Play with it
View it
14
Summary DHTML

• Can manipulate position and properties of bits of
  HTML using JavaScript.
• One way is to use CSS to specify position of
  section of HTML, and then change the position
  under JavaScript.
• Note Some of methods demonstrated are Internet
  Explorer specific.
• Standard W3C DOM based methods should be
  considered in future.

15
JavaScript Objects

• We've seen how in JavaScript we modify objects
  corresponding to part of the page.
• JavaScript also has other built in objects, and
  allows a (minimal) way of defining your own
  objects.
• As example we'll look at Date object.
• For others look at JavaScript references.

16
Date Object

• Example

var today new Date() var birthday new
Date(1963,4,20) var age today.getFullYear() -
birthday.getFullYear() document.writeln("Today is
" today.toGMTString()) document.writeln("You
are about " age "years old")

• Note how objects are created using "new", and
  standard methods used to get/set object
  attributes.

More Info
17
Cookies

• Cookies allow web site providers to store and
  retrieve small bits on information on clients
  computer.
• Usually used to store customer details like name,
  address etc.
• Normally only site which wrote the cookie can
  read it.

18
Cookies

• You will have a cookie file (stored somewhere)
  holding everything any site has recorded about
  you.
• Typical line

www.mysite.com FALSE /alison 1027069996 username
alison

• mysite.com has recorded that your username is
  alison.
• It also records when this data should expire.
• Try looking in /.netscape/cookies

19
Cookies in JavaScript

• Can set and read cookies using JavaScript.
• Example

function setCookie() document.cookie
namealison

• Browser will read this and add a cookie which
  includes your site name

yoursite.com . name alison
20
Cookies in JavaScript

• Later want to read this cookie to find user name.
• Needs a bit of work getting hold of right bit of
  cookie

function readName() var broken_cookie
document.cookie.split() var yourname
broken_cookie1 return yourname
21
Cookie Demo

• In general to read/write cookies you should copy
  standard ReadCookie and SetCookie methods.
• Simple versions are illustrated in demo linked
  below.

View Cookie Demo
22
Cookie Issues

• Not everyone likes cookies
• privacy.
• Legal issues
• (data protection).
• Users may need reassurance data wont be passed
  on.
• Some users switch off cookies.
• Sites using cookies should include some statement
  on use of personal data.

23
Summary Cookies

• Used to store small bits of data about the User,
  on THEIR machine.
• Fairly simple to store/read cookies using
  JavaScript.
• But issues concerning use and storage of personal
  data.

24
Summary

• JavaScript used to add interactivity to page.
• Use event handlers to detect and act on standard
  events like button presses, form submission.
• User DOM to access and modify the page.
• Some variability in what different browsers
  support.
• But soon we will all be able to use W3C standards
  for DOM and events.