COMP 20: Web Programming

Lab: Messages, Part 1

This lab is worth 2 points.

Lab Objectives

  1. Practice parsing JSON data.
  2. Practice using JavaScript associative arrays.

Overview

In this lab, you will parse data in JSON format, and output the data to a section of a completely loaded HTML file.

Getting Started

I am going to give you the HTML so you do not have to write it! Copy and paste the following HTML below into an index.html in a folder named messages in the private GitHub repository I created for you:

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8" />
  <title>Messages</title>
  <script>
    function loadMessages() {
      jsonData = '[{"id":1,"content":"Do you really want to hurt me?","username":"Boy"},{"id":2,"content":"Do you really want to make me cry?","username":"George"}]';
      // Your code here......
    }
  </script>
</head>

<body onload="loadMessages()">
  <h1>Messages</h1>
  <div id="messages"></div>
</body>

</html>

Instructions

Please review the index.html file. Your job is to modify the JavaScript function loadMessagesto parse the JSON data, and output the messages with corresponding usernames in the "messages" section of the HTML, as ordered in JSON file (notice // Your code here......). IMPORTANT: you are not allowed to modify the HTML body! You are also not allowed to use jQuery!

Example Output

Lab JSON

Note: disregard the styling. You will have an opportunity to do that next week.

Viewing Your Work

Serve your page via Python's simple HTTP server in the folder of your lab. That is:

% cd comp20-XXXXX/messages; # where XXXXX is the name of your private GitHub repository
% python -m SimpleHTTPServer

By default, a simple web server will open up on port 8000. Go to http://localhost:8000 on your favorite web browser to test your work.

Do not serve your work via the gh-pages branch of your private GitHub repository.

Debugging

Be sure to look at your JavaScript console for any errors.

The README File

Each 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 lab.
  3. Say approximately how many hours you have spent completing the lab.
  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.md file must be directly in the folder of the lab.

Submitting the lab

To submit this lab, your work must be in the master branch of your private Git repository on GitHub.

Assessment

  1. (0.5 point) The basics (e.g., file names, Git commit messages)
  2. (1 points) Your JavaScript code that parses the JSON, modifies "messages" section of HTML
  3. (0.5 point) The README
  4. (-2.0 point) Outputs exist in JavaScript console
  5. (-2.0 point) You modified the HTML
  6. (-2.0 point) You used jQuery