COMP 20: Web Programming

Lab: Messages Revisited

This lab is worth 2 points.

Lab Objectives

Getting Started

  1. Inside of your private GitHub repo folder, create a new folder named messages.
  2. Copy all the HTML of below, and paste into an HTML file named index.html in your messages folder.
<!doctype html>

<html>
<head>
  <title>Messages</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
    // Complete this section...
  </script>
</head>

<body>
  <h1>Messages</h1>
  <div id="messages">Loading...</div>
</body>
</html>

Instructions

Take a look at the example we did in class a week or so ago that loads JSON from a remote location via XMLHttpRequest: https://github.com/tuftsdev/WebProgramming/blob/gh-pages/examples/ajax/messages.html. Your job is to rewrite the code but using jQuery to load the JSON and list messages inside the "messages" div (without the "Loading..."). The behavior of your work shall be exactly the same as the example that uses XMLHttpRequest. Your code should be very short.

Caveats

  1. You are not allowed to modify the HTML body
  2. You are not allowed to use for or while for looping
  3. You are not allowed to use document.getElementById()

Notes and References

  1. jQuery is already included but you must have Internet connection as evident by the absolute URL to jQuery script.
  2. You can mix "normal" JavaScript with jQuery.

Viewing Your Work

Open your index.html page on any modern web browser.

The README File

Each assignment and lab shall include a README file that describes the work. This description must:

  1. Identify what aspects of the work have been correctly implemented and what have not.
  2. Identify anyone with whom you have collaborated or discussed the assignment.
  3. Say approximately how many hours you have spent completing the assignment.
  4. Be written in either text format (README.txt) or in Markdown (README.md). Markdown is preferred. No other formats will be accepted. Please use all capital letters for README

This README file must be directly in the folder of the lab or assignment.

Submitting the Lab

Commit and push your two files for this lab, the README.md (or README.txt) and index.html, to your private repo in a folder named messages.

Assessment

  1. (1 point) Messages are displayed in the "messages" section
  2. (1 point) The basics (e.g., folder name, README)
  3. (-2 points) Errors and outputs exist in JavaScript console; you violated one of the caveats