Web Engineering/Advanced Web Engineering - PowerPoint PPT Presentation

1 / 33
About This Presentation
Title:

Web Engineering/Advanced Web Engineering

Description:

The string is a list of name=value pairs separated by semicolons. ... Try to store multiple state variables within a single named cookie. University of Sunderland ... – PowerPoint PPT presentation

Number of Views:37
Avg rating:3.0/5.0
Slides: 34
Provided by: lizg9
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com