JavaScript and JavaScript-based libraries can access and manipulate the Document-Object Model(DOM).

Using jQuery

jQuery provides convenient access to the DOM.

Exercise 7.1

Work through this jQuery tutorial: How jQuery Works. Generally, you can follow the tutorial as written, but make the following modifications.

  1. Load the most appropriate version of jQuery. Options:

    • jQuery’s website (their CDN supported by StackPath).
    • a local library (configured via NPM or downloaded directly)

    Don’t use the “slimmed” version; it doesn’t include AJAX, which you’ll need for the next exercise.

  2. Be sure to understand:

    1. the use of JavaScript anonymous functions in the context of jQuery. Note that you don’t need to implement anything for the “Callbacks and Functions” section of the tutorial.
    2. the importance of waiting for the ready event.

Save this code in lab07_1.html.

Using jQuery-UI

jQuery-UI provides a number client-side UI widgets.

Exercise 7.2

Make a copy of your solution to the previous exercise, call the new version lab07.html, and modify it to implement something similar in function to the example shown on the right. Notes:

  1. If you haven’t already done so, move the CSS style and JS scripts into separate files.

  2. Import the appropriate jQuery-UI libraries (both CSS and JS).

  3. Replace the hyperlink from exercise 7.1 with a jQuery-UI button or something similar (e.g., the “Get Data” button shown to the right). See jQuery UI Demos for examples.

  4. Add an event handler (e.g., a button-press handler) that creates a new DOM element that can be used to display a “no data yet...” message (shown to the right).

    $("<em>", {html: "no data yet..."}).appendTo("body");

    Note that the message should be displayed when the user presses the button, not before. You’ll use this feature to display data in the next exercise.

Save this code in lab07.html for use in the next exercise.

Using AJAX

The AJAX technologies support more natural, interactive interfaces. We’ll use jQuery’s AJAX API. As a reference, you can use the “jQuery’s Ajax-Related Methods” section of this Ajax tutorial.

Exercise 7.3

Modify your solution to the previous exercise to implement something similar to example shown on the right as follows.

  1. Upgrade your server to respond to a new route, /hello, by returning a JSON-formatted text message.

  2. Upgrade your client code to:

    • Make an AJAX call to your server when the user presses the button. Configure the AJAX call to:

      • specify the new route you added to your server.
      • Pass data (e.g., the name shown in the example: “lab7”) to the server by hard-coding it as JSON-formatted data in the AJAX call.

    • Handle the return data. Configure the AJAX success/fail handlers to:

      • place the returned text into the message as shown on the right (e.g., by using result.name).
      • place an appropriate error text into the message.

Save this code in lab07.html, updating the CSS style and JS script as needed.

Checking in

We will grade your work according to the following criteria: