7. Client-Side Processing - Part 1

Client-Side Processing
Client-side XSL
Client-side scripting
JavaScript
Generating text
Document properties
Browser and document properties
Events
Opening a window
User input
Defining a function (1)
Defining a function (2)

7.1. Client-Side Processing

client program (e.g. web browser) can be used to
- customise interaction with the user
- validate user input
- generate (part of) document dynamically
this can be done using
- programming language (e.g. Java applets)
- XSL (for XML)
- scripting language (e.g. JavaScript, VBscript)
since these are built into browsers

7.2. Client-side XSL

recent browsers (e.g., IE 5.0+, Mozilla) have XSL processors built in

use stylesheet processing instruction in XML file, e.g.

<?xml-stylesheet type="text/xsl" href="rss-headlines.xsl"?>

with rss-headlines.xsl, rss-fragment-headlines.xml displays just headlines (titles of items)

7.3. Client-side scripting

scripts can be executed upon
- loading a document
- event occurrences
<script> element specifies script to be executed
often just declares functions to be called later
event attributes link scripts to events
event attributes in HTML 4.0 include (18 in all)
- OnLoad, OnUnload
- OnClick, OnDblClick
- onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut
- onKeyPress, onKeyDown, onKeyUp

7.4. JavaScript

interpreted, scripting language for the web
can generate HTML dynamically
can respond to user actions and input
can be used in client or server
ECMAScript (ECMA standard) based on JavaScript
syntax is a mixture of Basic, C and Java

7.5. Generating text

The following

was generated by the script:

<script type="text/javascript" language="JavaScript">;
  document.write("Hello World!");
</script>

inside an HTML table cell
language attribute is deprecated (only valid in (X)HTML transitional)

document is a special object referring to the document displayed in the browser window
write is a method defined on an HTML document, which writes text into it

7.6. Document properties

The following

was generated by the script:

<script type="text/javascript" language="JavaScript">;
<!--
  document.write("<em>Document title:</em> ",
                 document.title, "<br />");
  document.write("<em>Last modified:</em> ",
                 document.lastModified);
// -->
</script>

title is a property defined on document, which retrieves the title
lastModified is a property defined on document, which retrieves the date and time when the document was last modified
comment used to hide JavaScript from old browsers that don't include JavaScript interpreters
W3C HTML validator requires comment closer to be on its own line with JavaScript comment ("//") preceding it

7.7. Browser and document properties

The following

was generated by the script:

<script type="text/javascript" language="JavaScript">;
  document.write("<em>userAgent:</em> ",
          navigator.userAgent, "<br />");
  document.write("<em>Document links:</em><ul>");
  for(i = 0; i < document.links.length; i++) {
    document.write("<li>",
            document.links[i], "</li>");
  }
  document.write("</ul>");
</script>

navigator is a special object referring to the browser in use
userAgent is a property of navigator, which returns information sent by the browser in the user-agent header in HTTP requests (see later)
links is a property defined on document, which returns an array of anchor elements in the document
length is a property defined on arrays, which returns the number of elements in the array
the i'th item in an array is retrieved using [i]
the for loop cycles through each element of the array, starting with i = 0 and incrementing i by 1, using i++, each time around the loop, until i becomes equal to the number of items in the array

7.8. Events

normal HTML code for a hyperlink is:
```
<a href="mylink.html">hyperlink</a>
```

to display text on status bar when mouse is moved over this link, need to add:

<a href="mylink.html"
 onMouseOver="window.status='Click here';
 return true;"
 onMouseOut="window.status=''; ">hyperlink</a>

above code will produce a link like this

onMouseOver and onMouseOut are events
window is an object representing the web browser window
status is a property of window, which specifies the contents of the status line
return true is needed to ensure the browser does not overwrite the status line

7.9. Opening a window

The following:

was generated by:

<form>
<input type="button" value="Click to open window"
  onClick="window.open('birkbeck.html', 'window1',
           'width=235, height=75')" />
</form>

with birkbeck.html containing:

<html>
  <head><title>Birkbeck</title></head>
  <body><img src="birkbeck.gif" /></body>
</html>

the form element indicates an HTML form
the input element creates a button with the given value displayed on it
onClick is an event
open is a method of window, which opens a new window called window1 and displaying the URL birkbeck.html

7.10. User input

The following table of squares of integers

was generated by:

<script type="text/javascript" language = "JavaScript">
  var num;
  // Display a prompt with a zero in it
  num = window.prompt("Enter an integer", "0");
  document.writeln("<table border = '1' align='center'>");
  var count = 0;
  while (count < num)
  {
    // Display each line of the table, 
    // each line is an integer and its square
    document.writeln("<tr><td>", count, "</td>
                      <td>", count*count, "</td></tr>");
    count++;
  }
  document.writeln("</table>");
</script>

var declares a variable for storing values for later use
a variable can be initialised with a value, e.g., count is set to zero
prompt is a method of window, which opens a dialog box with the given message and default value for the input; it returns the value entered by the user
writeln is a method of document, which writes text followed by a new line into the document
while is a loop which continues to execute its loop body (between { and }) until its condition (count < num) is false
count++ adds one to the value of the variable count, i.e., it is the same as count = count+1

7.11. Defining a function (1)

The following

was generated by the form:

<form>
<table>
<tr>
  <td>Enter an expression:</td>
  <td><input type="text" name="expr" size=15 /></td>
</tr>
<tr>
  <td></td>
  <td><input type="button" value="Determine value"
        onClick="myEvaluate(this.form)" /></td>
</tr>
<tr>
  <td>Value:</td>
  <td><input type="text" name="result" size=15 /></td>
</tr>
</table>
</form>

function myEvaluate is defined by the script on the next slide

the value of the onClick attribute is a script which calls the function myEvaluate
this refers to the input element in which it occurs
this.form returns a reference to the form in which the input element occurs

7.12. Defining a function (2)

function myEvaluate is defined by the script:

<script type="text/javascript" language="JavaScript">;
function myEvaluate(f) {
   if (window.confirm("Are you sure?"))
      f.result.value = eval(f.expr.value)
   else
      window.alert("Please try later")
}
</script>

f is a reference to the form element in which the function myEvaluate was called
confirm is a method of window, which opens a dialog box with the given message; it returns the value true if the user clicks the OK button, false if the user clicks Cancel
eval is a function which returns the result of evaluating its argument
result and expr are named input elements of the form referred to by f
value is the contents of the named input elements of the form referred to by f
alert is a method of window, which displays the given message in a dialog box which contains an OK button