Internet

1
Internet Communications

• Client-side programming for
• the WWW (lecture 4)
• 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 attribute to relevant HTML element
  specifying 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 it 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
• We give the section an id - a bit like a name.

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

• We can specify a CSS rule for just that section,
  using its id
• position relative states that it should be
  relative to other elements on page.
• pixelLeft gives distance from left in pixels

ltstylegt mybit color blue position
relative pixelLeft 50 lt/stylegt
View it
Play with it
11
Making it move

• We can modify stylesheet property values from
  within JavaScript
• Could have a function that changed position of
  section
• Then could have onclickjump()

mybit.style.pixelLeft 300 mybit.style.color
red
function jump() mybit.style.pixelLeft
20
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..
• setTimeout calls function again after small time
  delay.

function move() if(mybit.style.pixelLeft lt
300) mybit.style.pixelLeft 5
setTimeout(move(), 50)
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 IE
  specific. Standard W3C DOM based methods should
  be considered in future.

15
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.

16
Cookies

• You will have a cookie file (stored somewhere)
  holding everything any site has recorded about
  you.
• Typical line
• mysite.com has recorded that your username is
  alison. It also records when this data should
  expire.
• Try looking in /.netscape/cookies

www.mysite.com FALSE /alison 1027069996 username
alison
17
Cookies in JavaScript

• Can set and read cookies using JavaScript.
  Example
• Browser will read this and add a cookie which
  includes your site name

function setCookie() document.cookie
namealison
yoursite.com . name alison
18
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
19
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
20
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.

21
Summary Cookies

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

22
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.

23
Labs etc

• Assignment is now up on web site and will be
  marked week 4.
• First stage involves HTML, CSS, simple
  JavaScript.
• Make sure you have done the labs on these topics.
• Also labs on DHTML and cookies, but less crucial.