Network Applications: Clientside Section: Review

1
Network Applications Client-side Section
Review

• Client-side programming
• HTML
• CSS
• JavaScript ( DOM, event handling)
• (Applets/Plugins)
• XML
• Structures
• DTD/Schema,
• Stylesheets,
• DOM

2
HTML

• Declarative markup language.
• Add annotation to text to indicate structure of
  document.
• Based on defining elements, by adding start and
  end tags.
• Also add attributes to give additional info about
  element.
• Different versions allow different element types
  and different nestings.
• Can validate HTML to check it meets definitions
  of the language.

3
CSS

• CSS provides way to specifying appearance/layout
  of page.
• Based on rules stating what formatting properties
  should apply given a selector (often just name
  of element).
• eg. h2 font-family times
• Can have internal or external stylesheets.
  External ones are files containing CSS
  incorporated with ltlink..gt elements in HTML head.

4
HTML forms

• Forms used to allow input from user.
• Based on form element, containing input elements
  within it. Various types of input (radio,
  text,..).
• Can specify what to do with form contents in
  various ways
• ltform action... onsubmit..gt
• Typically data checked using JavaScript, then
  sent to server-side (e.g., CGI) program to
  process.

5
JavaScript

• Client-side scripting language
• Statements interpreted by Browser software on
  client.
• Can be embedded in HTML page using script
  element. ltscript typetext/javascriptgt
• Can run JavaScript on response to certain user
  actions (e.g., button clicks) by specifying event
  handlers.
• Event handlers typically specified by adding
  attribute to element that might get (e.g.,)
  clicked on/submitted etc.
• ltform onsubmitdoit()..gt
• ltinput typebutton onclickdoit()gt

6
JavaScript DOM

• Can also use JavaScript to make changes to the
  page.
• This is done using the Document Object Model -
  standard way of referring to elements on the HTML
  page.
• Can access elements by id/name, or through
  standard arrays/properties associated with
  document.
• document.bgcolorred
• document.imgs0.srcnew
• if (document.form1.address.value )..

7
Java Applets and Plugins

• There are many client-side technologies NOT
  covered in the module, but which we should
  mention briefly.
• These include Java Applets and Plug-ins.

8
Java Applets

• Java Applets are special Java Programs that can
  run in Browser.
• For security cant write/read files on users
  machine, or make network connections (except
  back to server).
• Java Applets may be useful when we want complex
  interactive applications that run over WWW, such
  as games and simulations.
• Must be carefully written so they dont continue
  to use resources after user browses away from
  page with Applet.

9
Java Applets
Java compiles to an intermediate bytecode,
which can be run by a small interpreter on any
platform.
Client Java Virtual Machine (JVM) in Browser
interprets Bytecode and so runs program
Server Java Code compiled to platform
independent Bytecode
Java Byte Code
10
Plugins and Helper Applications

• HTML, XML, JavaScript and Java can all be
  interpreted/run within the Browser.
• But if the browser supported every
  language/technology that you might need browsers
  would get very big!
• So Browsers can also make use of applications
  that are installed on the client machine.
• These are called helper or plug-in applications.

11
Helper/Plugins

• Browser needs to be told which plugin
  applications to use when it receives data of
  unsupported MIME type.
• Browser can then send data to the appropriate
  application.
• It may be configured so the application is
  displayed within the browser window.
• Common plugins include shockwave, and various
  audio/video players.
• Also readers of PDF, postscript etc files.
• Disadvantage User may have to install a plugin
  to view your site.

12
XML (eXtensible Markup Language)

• HTML based on standard meta-language for
  defining markup languages. SGML.
• XML is a simplified version of SGML allowing
  different specialised markup languages to be
  developed for the Web.
• eg, for Maths, Reports, Multimedia, Graphics
• In XML you can choose any tags/element names,
  appropriate for application area
• eg, ltbookgt ltauthorgt lt/authorgt lt/bookgt

13
XML - DTDs

• A particular type of document can be defined
  using a DTD - Document Type Definition.
• This gives set of element names/attributes and
  allowed nestings)
• eg.
• lt!ELEMENT student (name, age, moduleList)gt
• lt!ELEMENT moduleList (module)gt
• DTDs are now superceded by schemas. These use XML
  syntax and allow tighter definition of allowed
  structures.

14
XML - Stylesheets

• Need stylesheets to display XML file.
• Can use CSS,
• e.g.age font-size 14pt
• But inflexible. Better to use XSL (eXtensible
  Stylesheet Language).
• XSL allows you to transform XML. Currently
  usually converting to XHTML.
• Based on defining templates stating what to
  output given certain matching conditionsltxsltemp
  late match/gtlthtmlgt.. ltxslvalue-of
  selectstudent/age/gt...

15
XML Namespaces Entities

• In XML need to be precise about element names
• eg., student, age
• Can do this by specifying long unique prefix to
  attach to each element name. Give short name for
  it ltbook.. xslnsb1long URIgtThen can use
  b1age to mean your version.
• Other useful thing is entities named characters
  or sections of XML.
• Include reference to them using, e.g., lt
• Avoids confusing XML parser with lt symbols.

16
XML DOM

• XML Document Object Model provides standard way
  for accessing/changing data in a XML file.
• Every element (node) will be represented
  internally as an object with properties/methods.
• Standard properties let you get at particular
  elements, or navigate XML tree structure. E.g.,
  node.firstChild xmlDoc.getElementbyID(id1)
• Can use this to search XML structure and just
  display elements of interest.

17
Summary

• Range of client side technologies available to
  use in web-based network applications.
• Choice of technology depends on things like
• What level of interaction is needed on the site?
• -gt Javascript, Java?, Shockwave?
• How important is it that the site is future-proof
  and easily maintained?
• -gt standards compliant, CSS..
• How important is it that the site is accessible
  to users with a wide range of setups
  (connectivity, browsers, plug-ins etc)?
• -gt not plug-ins or browser specific technology
• Should all pages have a common and easily revised
  look and feel?
• -gt CSS
• Are there may documents to be delivered that
  share a common structure?
• -gt XML