Skip to main content

Instructor Notes

Want to make a change to this week but don't have the time? Click here

Want to report a bug in this week? Click here

Questions and Help#

We highly recommend joining the relevent Slack Channel for this module. In this channel you can ask questions, get advice from previous teachers and discuss lesson content.

cyf-module-js2

For general Syllabus feedback and help you can post in cyf-syllabus

Quiz#

Presentations#

Notes#

Exercise - Synchronous vs Asynchronous#

The aim of this exercise is to enable trainees to define the difference between synchronous and asynchronous code.This should be run in small groups and TAs should make sure that there's a dicussion about the order of the expected results.

The main messages to be delivered here are:

  1. In synchronous programmes, if you have two lines of code (L1 followed by L2), then L2 cannot begin running until L1 has finished executing. You can imagine this as if you are in a line of people waiting to buy train tickets. You can't begin to buy a train ticket until all the people in front of you have finished buying theirs. Similarly, the people behind you can't start buying their tickets until you have bought yours.

  2. In asynchronous programmes, you can have two lines of code (L1 followed by L2), where L1 schedules some task to be run in the future, but L2 runs before L1's task completes. Picture eating at a sit-down restaurant. Other people order their food. You can also order your food. You don't have to wait for them to receive their food and finish eating before you order. Similarly, other people don't have to wait for you to get your food and finish eating before they can order. Everybody will get their food as soon as it is finished cooking.

The Network Tab#

The most important part of the Network Tab to explain is the relationship between the HTML file and the requests that are subsequently made.

That is to say that when a HTML is parsed that GET requests are made to the resources that are required to view the page. This can be shown by

  • Showing how a JavaScript file is referenced in a <script> tag and is then loaded in the Network Tab
  • Showing how an <img> tag referenced a src attribute and the image is loaded in the Network Tab

Exercise - GET Requests#

The aim of this exercises to let the trainees explore the network tab and spending some time reading code.

When the class has submitted their lists open the network tab and see exactly what was requested by the website. Have a discussion around each of the GET requests. You can find the website in the exercise here.

For trainees that go very quickly through the exercise send them to a complicated website and continue to let them explore through the exercises. Some ideas:

Exercise - POST Requests#

Again, the aim of this exercises is to let the trainees see how requests can be triggered by a button click and forces them to see the difference between a GET and POST request.