Web Engineering/Advanced Web Engineering

1
Web Engineering/Advanced Web Engineering

• Week 6 - JavaScript II

2
Cookies

• A cookie is a small amount of data which is given
  a name and stored by the browser.
• A cookie is associated with a web page or web
  site.
• A cookie can be used to save state.
• Examples of cookie use
• Saving user preferences.
• Recalling user preferences.
• Saving and recalling state information.
• Enables information to be accessed by multiple
  web pages.
• Cookies can be written/read by CGI scripts and
  JavaScript.

3
Cookies inJavaScript

• cookie is a property of the document object.
• It is a string property allowing cookie(s) to be
• created
• read
• written
• deleted
• It has four additional attributes
• expires
• path
• domain
• secure

4
Storing a simple cookie

• Set the cookie property to a string of the form
• name value
• For example
• document.cookie "email" escape(myEmail)
• Cookie values cannot contain semicolons, commas
  or whitespace.
• If you have such characters use
• escape()
• unescape()

5
The lifetime of a cookie

• By default a cookie lasts only for the duration
  of the browser session.
• The expires attribute gets round this
• namevalue expiresdate
• For example to set a 1 yr expiry date
• var nextyear new Date()
• nextyear.setFullYear(nextyear.getFullYear() 1)
• document.cookie "email" escape(myEmail)
• " expires"
  nextyear.toGMTString()

6
The visibility of a cookie

• By default a cookie is visible to
• the web page which created it.
• other web pages in the same directory.
• other web pages in subdirectories.
• For example
• A cookie created by
• http//www.xx.com/eag/home/index.htm
• will be visible by
• http//www.xx.com/eag/home/another.htm
• http//www.xx.com/eag/home/scripts/newpage.htm
• but not by
• http//www.xx.com/eag/index.htm

7
The path attribute

• The path attribute enables wider access to
  cookies
• namevalue pathURLpath
• For example
• A cookie created by
• http//www.xx.com/eag/home/index.htm
• with path set to
• path"/eag"
• will be visible to
• http//www.xx.com/eag/index.htm
• If the path is set to "/", the cookie is visible
  to any page on the same server.

8
Cookie domain

• By default cookies are only accessible to pages
  on the same server.
• To share across multiple servers use the domain
  attribute
• namevalue domaindomain_name
• For example
• A cookie created by
• http//www.server1.xx.com/eag/home/index.htm
• with path and domain set to
• path"/" domain"xx.com"
• will be visible to all pages on
• http//www.server1.xx.com http//www.server2.xx.
  com

9
Cookie security

• You cannot set the domain of a cookie to a domain
  other than the domain of your server.
• By default cookies are insecure and are
  tramsmitted via a normal HTTP connection.
• A cookie can be marked as secure which means it
  is only transmitted when browser and server are
  connected via HTTPS or other secure protocol.
• This is done using the boolean secure attribute
• namevalue secure

10
Reading a cookie

• When the cookie property is used it returns a
  string.
• This string contains all the cookies which apply
  to the current document.
• The string is a list of namevalue pairs
  separated by semicolons.
• You can parse this string to obtain the cookie
  values.

11
Limitations of Cookies

• Cookies are intended for infrequent storage of
  small amounts of data.
• Browsers not required to store more than 300
  cookies.
• Web servers not required to store more than 20
  cookies (across all sites/pages on server)
• Try to store multiple state variables within a
  single named cookie.

12
Demonstration

• cookies1.htm
• cookies2.htm

13
Windows in JavaScript

• The window object allows operations to be
  performed on browser windows.
• Methods exist to
• open windows.
• close windows.
• move windows.
• size/resize windows.
• lose and gain window focus.

14
Opening Windows

• To open a basic, empty window use
• var w window.open()
• Four optional parameters can be used to control
  the window features
• URL to be loaded when the window opens.
• Window name (used in TARGET attribute of ltformgt
  or ltagt tags). If the window exists then this is
  used.
• Window size feature list (string comprised of a
  comma-separated list of properties values).
• Boolean argument indicating whether the URL
  should replace the current entry in the window's
  history list (true) or create a new entry
  (false).

15
Demonstration

• window.htm

16
Closing windows

• To close a specific window object, created within
  the JavaScript
• w.close()
• To close the window in which the JavaScript is
  currently running
• window.close()
• To avoid confusion with the document object do
  not use
• close()

17
Window focus

• To give the keyboard focus on a particular
  window
• w.focus()
• To remove keyboard focus from a window
• w.blur()

18
Demonstration

• windowfocus.htm

19
Window moving/sizing

• To move a window to absolute or relative
  co-ordinates (refers to top left of window)
• w.moveTo(x, y)
• w.moveBy(x, y)
• To resize to an absolute or relative size
• w.resizeTo(width, height)
• w.resizeBy(width, height)
• To scroll by an absolute or relative amount
• w.scrollTo(horizontal, vertical)
• w.scrollBy(horizontal, vertical)
• Note that parameters here are in pixels

20
The location object

• The location object is a representation of the
  URL for the document currently displayed in the
  window.
• Different parts of the URL can be identified
  using properties. For example
• protocol
• host
• pathname
• search (any portion of the URL following ? which
  can be used for embedding arguments in a URL)
• A new URL can be assigned to the location object
• document.location"http//www.cet.sunderland.ac.uk
  /webeng/"

21
Browser Detect example

• The location object can be used in the detection
  of a JavaScript enabled browser.
• If JavaScript is enabled it can load a new page.
• If JavaScript is not enabled the code is ignored
  and the current page displayed (usually with a
  hyperlink to a non-JavaScript area of the site).

22
browserdetect1.htm

• ltbodygt
• lth1gtBrowser Reload Examplelt/h1gt
• ltscript language"JavaScript"gt
• lt!-- hide JavaScript from old browsers
• document.location "jsbrowser.htm"
• //--gt
• lt/scriptgt
• ltpgtThis browser does not support Javascript.lt/pgt
• lt/bodygt

23
Demonstration

• browserdetect1.htm

24
A problem...

• Setting a new URL to the location object adds a
  new entry in the browser history.
• If "Back" is pressed we return to the page which
  then runs the JavaScript and loads the current
  page.
• This effectively disables the "Back" button.

25
browserdetect2.htm

• ltbodygt
• lth1gtBrowser Reload Examplelt/h1gt
• ltscript language"JavaScript"gt
• lt!-- hide JavaScript from old browsers
• location.replace("jsbrowser.htm")
• //--gt
• lt/scriptgt
• ltpgtThis browser does not support Javascript.lt/pgt
• lt/bodygt

26
Demonstration

• browserdetect2.htm
• reload.htm

27
JavaScript and Frames

• Each window has a frames property - frames .
• This refers to an array of window objects, each
  referring to a frame within the window.
• If a window has no frames the frames array is
  empty and frames.length 0.
• Each frame in a window can be referred to as
• frames0, frames1, etc
• If any of these frames have sub-frames then they
  are further referred to as properties. For
  example
• frames1.frames2 (third sub-frame of second
  frame!)

28
Frame references

• Frames can be identified through the frames
  hierarchy working down from
• top (absolute top level frame)
• parent (relative to current frame)
• self (current frame)
• They can also be identified by name (often easier
  than position in the frames array).
• For example
• top.displayFrame.middleFrame
• parent.image_frame

29
The frames hierarchy
frames0
self window
frames1
frames1.frames0
frames1.frames1
frames1.frames2
top parent self window parent.frames0 parent.fra
mes2 top.frames0 top.frames1
30
Frames Example

• jsframes.htm defines two frames
• lthtmlgtltheadgtlttitlegtUsing Frames with
  JavaScriptlt/titlegtlt/headgt
• ltframeset rows"25,"gt
• ltframe src"jsframes_controls.htm"
  name"control_frame"gt
• ltframe src"jsframes_target.htm"
  name"target_frame"gt
• lt/framesetgt
• lt/htmlgt

31
Frames example

• jsframes_controls.htm uses JavaScript to write to
  target_frame.
• ltbodygt
• lth1gtUpdating Frames Examplelt/h1gt
• ltpgtClick
• lta href"" onClick"top.target_frame.document.wri
  teln('Hello World!ltbrgt')"gtherelt/agt
• to update framelt/pgt
• lt/bodygt
• lt/htmlgt

32
Demonstration

• jsframes.htm

33
Resources

• David Flanagan, JavaScript The Definitive Guide,
  3rd Edition, O'Reilly, 1998, ISBN 1-56592-392-8
• WebMonkey JavaScript Tutorial
• http//hotwired.lycos.com/webmonkey/programming/j
  avascript/
• Material for this lecture came from these
  resources