Week 5 - JavaScript

Wednesday Agenda

  • Page mockups

Monday

Tuesday

Thursday

Asynchronous JS

Asynchronous programming refers to any situation in which some of our code is running in the background or in a delayed fashion while the rest of a program continues its work.

This video introduces the concepts behind asynchronous programming and one common method for writing asynchronous code in JS - the callback:

In modern JS we often still use callbacks, but we also have another tool to manage asynchronous operations - the Promise. Promise-based programming allows for arguably cleaner syntax when managing a sequence of asynchronous steps in an algorithm:

Reference: MDN - JS - Asynchronous

JSON

JSON is a popular text-based representation of structured data. As its name suggests, it is closely tied to JS, although it can be used by other languages and tools as well.

Reference: MDN - JSON

REST APIs

REST is the protocol that browsers use to make requests of a web server. But those requests can also be made by other code, including JS running on an existing web page. This video describes the process and an important security tool called CORS.

Reference: MDN - Fetching Data From the Server

AJAX

AJAX is the term used to describe when a web page that is already loaded by a browser requests new information from a server and then uses that information to update the page without completely reloading it. The first video introduces the idea, the second does a deeper dive into some demonstrations of the technique:

Reference: MDN - Client Side web APIs

DOM and Events

JavaScript's interface to the contents of a webpage is known as the Document Object Model or DOM. This video explains:

In addition to running code when a script is loaded, we can attach code to various events that might happen - like the user clicking on an element:

References:

Putting it Together

This final video shows an example that ties all of the ideas from the week together. It features a webpage that:

  • Responds to the user inputting a number and clicking a button
  • It makes a request to a server to retrieve new information based on that input
  • It then uses the returned data to create new content on the page