7. Client-Side Processing


  1. Client-side processing
  2. Client-side scripting
  3. JavaScript
  4. Document Object Model (DOM)
  5. Document methods and properties
  6. Events
  7. Calling a function
  8. Defining a function
  9. User input
  10. Comments on previous script
  11. Event handlers
  12. Event handlers example
  13. Functions and form fields
  14. Defining the function myTranslate
  15. Alternative solutions
  16. Adding elements
  17. Deleting elements
  18. Using jQuery
  19. Using jQuery to add elements
  20. RSS Example
  21. DOM and XML
  22. Function to load an XML file (using jQuery)
  23. Function to load an XML file (using DOM)
  24. Navigating XML
  25. Finding elements by name
  26. Finding elements by name (standard DOM)
  27. Finding elements by name (jQuery)
  28. Applying a stylesheet
  29. Applying a stylesheet (comments)
  30. Modifying a stylesheet using jQuery
  31. Modifying a stylesheet (source code)
  32. Exercises
  33. Links to more information

7.1. Client-side processing

7.2. Client-side scripting

7.3. JavaScript

7.4. Document Object Model (DOM)

7.5. Document methods and properties

7.6. Events

7.7. Calling a function

7.8. Defining a function

7.9. User input

7.10. Comments on previous script

7.11. Event handlers

7.12. Event handlers example

7.13. Functions and form fields

7.14. Defining the function myTranslate

7.15. Alternative solutions

7.16. Adding elements

7.17. Deleting elements

7.18. Using jQuery

7.19. Using jQuery to add elements

7.20. RSS Example

7.21. DOM and XML

7.22. Function to load an XML file (using jQuery)

function getXML(myUrl) {
  var xhr = $.ajax({
              url:      myUrl,
              datatype: "xml",
              async:    false
              });
  return xhr.responseXML;
}

7.23. Function to load an XML file (using DOM)

7.24. Navigating XML

7.25. Finding elements by name

7.26. Finding elements by name (standard DOM)

7.27. Finding elements by name (jQuery)

7.28. Applying a stylesheet

7.29. Applying a stylesheet (comments)

7.30. Modifying a stylesheet using jQuery

7.31. Modifying a stylesheet (source code)

  var xmlDoc = getXML("rss-fragment.xml");
  var stylesheet = getXML("rss-headlines.xsl");
  $(stylesheet).find("xsl\\:value-of, value-of")
               .first()
               .attr("select","description");
  if (typeof (XSLTProcessor) != "undefined") {
    ...
    document.getElementById("target4")....
  } else {
    window.alert("Your browser ...");
  }

7.32. Exercises

  1. Implement the following functions:
    1. Function celsius returns the Celsius equivalent of a Fahrenheit temperature using the calculation C= 5.0/9.0 * (F-32)
    2. Function fahrenheit returns the Fahrenheit equivalent of a Celsius temperature using the calculation F = 9.0/5.0 * C + 32
  2. Use these functions to write a script that enables the user to enter either a Fahrenheit temperature and display the Celsius equivalent or enter a Celsius temperature and display the Fahrenheit equivalent. Your HTML document should contain two buttons, one to initiate the conversion from Fahrenheit to Celsius and one to initiate the conversion from Celsius to Fahrenheit.
  3. As suggested on slide 26, write a script to retrieve the values of all title elements from rss-fragment.xml using nested for loops.

7.33. Links to more information

There are many books devoted to Javascript and/or jQuery. DOM is covered in Chapter 7 of [Moller and Schwartzbach] and Chapter 8 of [Jacobs]. See above for a book on jQuery.