Client-Side Processing

1. Client-Side Processing Client-Side Processing

2. เนื้อหา • 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)

3. เนื้อหา • Document Object Model (DOM) • DOM and XML • Function to load an XML file • Retrieving an element • Navigating XML • Properties for navigating XML • More DOM properties • A simpler way • A third way • Adding elements • Deleting elements • transformNode method (IE) • Transforming XML to preformatted text

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

5. 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="pt-atoms.xsl"?> with pt-atoms.xsl, pt-atoms.xml displays just atomic symbols and names

6. 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 are • OnClick, OnDblClick • onMouseDown, onMouseUp, onMouseOver, onMouseMove, onMouseOut • onKeyPress, onKeyDown, onKeyUp

7. 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 http://www.ecma-international.org/ ) based on JavaScript • syntax is a mixture of Basic, C and Java

8. Generating text • The following • was generated by the script: <script language="JavaScript">; document.write("Hello World!"); </script> • inside an HTML table cell • 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

9. Document properties • The following • was generated by the script: <script language="JavaScript">; <!-- document.write("<em>Document title:</em> ", document.title, "<br />"); document.write("<em>Last modified:</em> ", document.lastModified); // --> </script>

10. Document properties • 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

11. Browser and document properties • The User agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) Document links: http://www.dcs.bbk.ac.uk/~ptw/teaching/client/pt-atoms.xsl http://www.dcs.bbk.ac.uk/~ptw/teaching/client/pt-atoms.xml http://www.ecma-international.org/ • was generated by the script: <script 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>

12. Browser and document properties • 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

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

14. Events • 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

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

16. Opening a window • 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

17. User input • The table of squares of integers • was generated by: <script 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>

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

19. Defining a function (1) • 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

20. Defining a function (2) • function myEvaluate is defined by the script: <script 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>

21. Defining a function (2) • 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

22. Document Object Model (DOM) • DOM is a W3C recommendation (levels 1, 2 and 3) • defines API for HTML and XML documents • defines logical structure (model) of documents • document modelled as a tree (or forest) of nodes • using DOM, programmers can • build documents • navigate their structure • add, modify, delete elements and content • purpose is to provide portability across web browsers • DOM is platform-neutral and language-neutral • language bindings for Java and ECMAScript

23. DOM and XML • Javascript can use DOM objects, properties and methods to read and navigate through an XML document like periodic-table.xml • uses XML parser built into the browser to construct a DOM tree • the following: root element of document is: periodic_table • was generated by the following scripts

24. Function to load an XML file <script language = "JavaScript"> function loadXML(file) { var moz = (typeof document.implementation != 'undefined') && (typeof document.implementation.createDocument != 'undefined'); var ie = (typeof window.ActiveXObject != 'undefined'); var xmlDoc; if (moz) xmlDoc = document.implementation.createDocument("", "", null); else if (ie) xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false xmlDoc.load(file); return xmlDoc; } </script>

25. Function to load an XML file • only Mozilla implements document.implementation and document.implementation.createDocument (DOM2) • only IE implements window.ActiveXObject • document.implementation.createDocument method returns a document object structured as an empty DOM tree (parameters are the namespace URI of the document element, the qualified name of the document element, and the document type) • ActiveXObject("Microsoft.XMLDOM") returns a document object structured as an empty DOM tree • load is a method of a document object; it uses the XML parser to read the given XML file and load it into the DOM tree • xmlDoc.async="false" tells the XML parser to wait until the document is loaded before trying to parse it

26. Function to load an XML file <script language = "JavaScript"> var xmlDoc = loadXML("periodic-table.xml"); var root = xmlDoc.documentElement; document.write("<p>root element of document is: <em>", root.nodeName, "</em></p>"); </script> • call the loadXML function to read periodic-table.xml • retrieve the documentElement • write out its nodeName • documentElement is a property of a document; it returns the root element of the document

27. Navigating XML • each DOM node object has a number of properties: • nodeName (as seen previously) • firstChild • nextSibling • parentNode • the following: first child of root node is: atom next sibling of this node is: atom second child of this node is: symbol parent node of this node is: atom • was generated by the script on the next slide

28. Properties for navigating XML <script language = "JavaScript"> var xmlDoc = loadXML("periodic-table.xml"); var curNode = xmlDoc.documentElement.firstChild; document.write("<p>first child of root node is: <em>", curNode.nodeName, "</em></p>"); curNode = curNode.nextSibling; document.write("<p>next sibling of this node is: <em>", curNode.nodeName, "</em></p>"); curNode = curNode.firstChild.nextSibling; document.write("<p>second child of this node is: <em>", curNode.nodeName, "</em></p>"); document.write("<p>parent node of this node is: <em>", curNode.parentNode.nodeName, "</em></p>"); </script>

29. Properties for navigating XML • firstChild is a property of a node; it returns the first child of the node • nextSibling is a property of a node; it returns the next sibling of the node • parentNode is a property of a node; it returns the parent of the node

30. More DOM properties • the following • was generated by the script (root defined as before): // traverse all child nodes of root element for ( i = 0; i < root.childNodes.length; i++ ) { var level1Node = root.childNodes.item(i); if ( level1Node.nodeName == "atom" ) for ( j = 0; j < level1Node.childNodes.length; j++ ) { var level2Node = level1Node.childNodes.item(j); if ( level2Node.nodeName == "name" ) { // print value of each element var textNode = level2Node.firstChild; document.write("<p>", textNode.nodeValue, "</p>"); } } }

31. More DOM properties • childNodes is a property of a node; it returns the collection of child nodes • length is a property of a collection; it returns the number of items in the collection • item() is a property of a collection; it returns the node with the specified index value in the collection • nodeValue is a property of a node; it returns the text value of the node if it is a text node, otherwise it returns null

32. A simpler way • the following: Hydrogen • Helium • was generated by the script (xmlDoc defined as before): var nameElements = xmlDoc.getElementsByTagName("name"); for ( i = 0; i < nameElements.length; i++ ) document.write("<p>", nameElements.item(i).firstChild.nodeValue, "</p>"); • getElementsByTagName is a property of a document; it returns a collection of nodes

33. A third way • the following: • was generated by the script (xmlDoc defined as before): var nameElements = xmlDoc.selectNodes("//name"); for ( i = 0; i < nameElements.length; i++ ) document.write("<p>", nameElements.item(i).firstChild.nodeValue, "</p>"); • selectNodes is a property of a document (only in IE); it returns the collection of nodes selected by the XPath expression given as an argument

34. Adding elements • function addElement is defined as: function addElement() { var elem = document.getElementById("target1"); var node = document.createElement("li"); var text = document.createTextNode("Hello"); node.appendChild(text); elem.appendChild(node); } • appends a new li element to the ul element (identified by id="target1") in the current XML document when called by clicking button

35. Adding elements • getElementsByID (DOM2) is a property of a document; it returns the identified node • createElement is a method of a document; it creates an element with the given name • createTextNode is a method of a document; it creates a text node with the given value • appendChild is a method of a node; it appends the given node to the list of the node's children

36. Deleting elements • function deleteElement is defined as: function deleteElement() { var elem = document.getElementById("target2"); elem.parentNode.removeChild(elem); } • deletes the ul element (identified by id="target2") in the current XML document when called by clicking button • removeChild is a method of a node; it removes the given node from the list of the node's children

37. transformNode method (IE) • we can transform a document (or node) using a stylesheet in the browser var xmlDoc = loadXML("periodic-table.xml"); var stylesheet = loadXML("xml-to-pre.xsl"); document.write(xmlDoc.transformNode(stylesheet));

38. transformNode method (IE) • which produces <periodic_table> <atom phase="gas"> <name>Hydrogen</name> <symbol>H</symbol> <atomic_number>1</atomic_number> <atomic_weight>1.00794</atomic_weight> <boiling_point units="Kelvin">20.28</boiling_point> <melting_point units="Kelvin">13.81</melting_point> <density units="grams/cubic centimeter"><!-- At 300K -->0.0899</density> </atom> <atom phase="gas"> <name>Helium</name> <symbol>He</symbol> <atomic_number>2</atomic_number> <atomic_weight>4.0026</atomic_weight> <boiling_point units="Kelvin">4.216</boiling_point> <melting_point units="Kelvin">0.95</melting_point> <density units="grams/cubic centimeter"><!-- At 300K -->0.1785</density> </atom></periodic_table>

39. Transforming XML to preformatted text (1) • top-level template rule: <xsl:template match="/"> <pre> <xsl:apply-templates></xsl:apply-templates> </pre> </xsl:template> • template rule for text nodes: <xsl:template match="text()"> <span class="keyword"> <xsl:value-of select="."></xsl:value-of> </span> </xsl:template>

40. Transforming XML to preformatted text (1) • template rule for comment nodes: <xsl:template match="comment()"> <br></br> <span class="comment"> <!-- <xsl:value-of select="."></xsl:value-of>--> </span> <br></br> </xsl:template>

41. Transforming XML to preformatted text (2) • template rule for other nodes: <xsl:template match="*"> <xsl:for-each select="ancestor::*"><!-- indent according to depth --> <xsl:text></xsl:text> </xsl:for-each> <xsl:text> <</xsl:text><!-- output start tag --> <xsl:value-of select="name()"></xsl:value-of> <xsl:for-each select="@*"><!-- including any attributes --> <xsl:text></xsl:text> <xsl:value-of select="name()"></xsl:value-of> <xsl:text>="</xsl:text> <xsl:value-of select="."></xsl:value-of> <xsl:text>"</xsl:text> </xsl:for-each> <xsl:text>></xsl:text>

42. <xsl:if test="*"> <!-- newline if there are child elements --> <br></br> </xsl:if> <xsl:apply-templates></xsl:apply-templates> <xsl:if test="*"><!-- if there were children --> <xsl:for-each select="ancestor::*"> <!-- then indent according to depth --> <xsl:text></xsl:text> </xsl:for-each> </xsl:if> <xsl:text></xsl:text><!-- output end tag --> <xsl:value-of select="name()"></xsl:value-of> <xsl:text>></xsl:text> <br></br> </xsl:template>

43. Transforming XML to preformatted text (3) • output on previous slides generated by var xmlDoc = loadXML("xml-to-pre.xsl"); var stylesheet = loadXML("xml-to-pre.xsl"); document.write(xmlDoc.documentElement.firstChild.transformNode(stylesheet)); document.write(xmlDoc.documentElement.firstChild.nextSibling.nextSibling. transformNode(stylesheet)); document.write(xmlDoc.documentElement.firstChild.nextSibling.nextSibling. nextSibling.transformNode(stylesheet)); document.write(xmlDoc.documentElement.firstChild.nextSibling. transformNode(stylesheet));

44. สรุป • 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)

45. สรุป • Document Object Model (DOM) • DOM and XML • Function to load an XML file • Retrieving an element • Navigating XML • Properties for navigating XML • More DOM properties • A simpler way • A third way • Adding elements • Deleting elements • transformNode method (IE) • Transforming XML to preformatted text