Module 2 - Dynamic Web Pages: JavaScript, JSON, and Handling Asynchrony

In Module 1 we got our feet wet with basic HTML, CSS, and JavaScript. In this module, we’ll focus on mainly on JavaScript — not just as yet another programming language, but as a “quirky” language that has evolved to uniquely serve the needs of Web programming. In particular, you’ll learn about JSON, a standard way of passing JavaScript data around, and writing asynchronous code (callbacks and Promise’s), which you use to handle problems ranging from downloading data to keeping web pages from “freezing up” on the user. These concepts may seem foreign at first to people who are used to Java or Python, so be sure to go through the readings and examples carefully so that you get the feel of how they work.

This learning module is scheduled for February 3, 2021 through February 16, 2021.

Readings

These readings/videos are suggested to help give you an overview of the important concepts for this learning module.

• Background
  • What Are APIs and How Do They Work? (or as videos) from the API University
  • How do (web) APIs work? (includes B2B implications) by Andrew Park
  • A History of Modern API Mashups (infographic) by Capital One DevExchange
• Web 2.0 Movement: MashUps Driven and Web Services (research paper) by Chang-Chun Tsai, Cheng-Jung Lee, and Shung-Ming Tang
• Technical
  • ECMAScript (standard JavaScript's official name) from Wikipedia
  • Learn JavaScript Interactively Online from PluralSight
  • JavaScript for Java Developers by Vasco Ferreira
  • JavaScript: The World's Most Misunderstood Language by Douglas Crockford
  • Working with JSON Data from MDN contributors (or as a video)
  • Concurrency Model and the Event Loop from MDN and a TED Ed video!
  • Chapter 7: Using Closures from You Don't Know JS Yet (2nd Edition) by Kyle Simpson
  • Promises in JavaScript Explained Whimsically by Kevin Kim
    
• Debugging
  • Debugging in Chrome from The Modern JavaScript Tutorial (or as a video)
  • Testing?
• History (for those that are interested)
  • 25 years of JavaScript (infographic) from JetBrains (makers of IntelliJ)
  • Celebrating 10 years of V8 (Google's pen Source JavaScript implementation)
  • Latest JavaScript Features With Simple Examples by Carlos Caballero

Suggested Schedule

You can work at your own pace, but here is our suggested schedule (i.e., as if this were a typical in-person class with "lab meetings").

• Friday, February 5
  • Install Extensions
• Monday, February 8
  • Study and experiment with Tag Cloud example
  • Try the Tag Cloud exercise
• Wednesday, February 10
  • Study and experiment with URL List example
  • Try the first Quiz exercise
• Friday, February 12
  • Study and experiment with ISS example
  • Try the second Quiz exercise
  • Post Plotter assignment Part 1 on Gitlab Pages
• Sunday, February 14
  • Take practice Quiz
• Monday, February 15
  • Try the API exercise
  • Take Quiz
• Tuesday, February 16
  • Post Plotter assignment Part 2 on Gitlab Pages

We strongly discourage waiting until the last minute since working with the web can range from awkward to tricky to downright frustrating — please leave yourself plenty of time for unforeseen complications!

Examples

These examples are provided to help you see our expectations for your code to get you started.

• Source code for you to clone
• Live web sites so you can see the expected results

We strongly encourage you to experiment with these examples interactively to see how changes affect the results.

Exercises

These exercises are provided to help you practice with the important concepts in a controlled way.

• Debugging a Web Page (follow the steps of this tutorial)
• Extending the Tag Cloud to let users set options
• Extending the Quiz to be data driven
• Extending the Quiz to fetch its JSON data
• Extending the ISS display to also plot recent Earthquakes on a world map
   
• Unlike the previous module, these exercises will all be extensions of the examples or previous exercises so you can work directly in those copies
• Videos of the working example so you can see the expected results

While we will not be explicitly checking that you have completed all parts of all of these exercises, we strongly believe doing the minimum (and more!) will help make doing the primary assignment easier.

Quizzes

This is intended to be similar to the content of the quiz for this module and should help you understand our expectations for its scope.

• Practice Quiz

Install VS Code Extensions

While it is not required, these plugins will help warn you of coding issues within your editor so there are fewer surprises when you validate your code online.

• HTML Hint
• ESLint (coming soon after we verify the correct settings)

When installing these programs, unless otherwise noted, we suggest following the default options.