Week 7 Labs: JavaScript - Callbacks, arrow functions, promises & apis

• JS Practice: JavaScript objects & arrays
  • First arrays : accessing, reading, adding, removing, modifying, sorting, reversing & looping over array elements
  • First objects : JSON - reading, changing and adding data
  • Nested objects : reading nested objects
  • Looping : arrays & objects


• JavaScript classes
  • Class definitions : Classes are functions
  • First class definitions : Squirrel class
  • JSON example : Adding new functions to JSON


• Callback functions & Arrow notations (=>):
  • Animals : forEach() looping with a classic callback function & callback function using =>.
  • Button : button with an addEventListener() for a click event with a callback function
  • setTimeout(handler/fn, ms): a method that calls a function or evaluates an expression after a specified number of milliseconds.
    • Classic callback function : displays an alert after 3 seconds
    • Callback function with arrow notation (=>) : displays an alert after 3 seconds
  • setInterval(handler/fn, ms): a method that calls a function or evaluates an expression at specified intervals. It will continue calling the function until clearInterval() is called, or the window is closed.
    • Classic callback function : shows current date & time with seconds updating
    • Callback function with arrow notation (=>) : shows current date & time with seconds updating
  • Draw text on a picture : drawing an image on a canvas with text writing input features. Demonstrates the load event listener with a callback function.


• fetch() and promises
  • Promises : Introduction
  • YouTube projects: 1.1: fetch() - Working With Data & APIs in JavaScript by The Coding Train
    Needs a live server for demonstration
    • Fetching images:
      • V1 : locally fetching an image using a server with .then
      • V2 : locally fetching an image using a server with async and await instead of .then
      • V3 : locally fetching multiple images using a server with async and await instead of .then
    • Fetching text : locally fetching a text file using a server with async and await instead of .then
    • Fetching text from csv file : locally fetching a csv file using a server with async and await instead of .then. Displaying the data into a line chart using ChartJS library.


• API (Application Programming Interface)
  • ISS API : Where is the ISS (International Space Station) at?
    • Hello fetch() : promises & api calls
    • Leaflet Maps : Open Street Maps (OSM) with leaflet marker
    • Map updating ISS location : setInterval(fn, ms) to update map, move marker, date iss data fetched, custom satellite marker
    • Map updating ISS location : recursive setTimeout(fn, ms) is a better approach than setInterval(fn, ms). Handling failed requests.
  • Requesting country data - World Bank API : Capital city quiz page
  • API DEPRECATED: Ask the magic ball a question : Magic 8 ball API
  • YouTube project: How to Get User Location in HTML CSS & JavaScript by CodingNepal
    TO BE UPDATED: Detect device location : Uses the Geolocation Web API to access user's device location. Then uses the OpenCage Geocoding API to convert device location coordinates to a place. (Needs an API Key)
  • Sunrise & Sunset Timings : Uses the Geolocation Web API to access user's device location. Then uses the Sunrise & Sunset API to display sunrise & sunset timings for that location.
  • Weather : Uses the National Weather API Web Service
  • Pokemon list : Uses the Pokemon API
  • Currency exchange rates: Exchange rates API
    • V1 : Simple currency converter from US dollar to 3 defined conversions
    • V2 : Currency converter from US dollar with currency dropdown list built from API & using smaller functions & using setInterval(fn, ms)
  • API DEPRECATED: Astronomy picture of the day : From APOD API
  • GitHub Repo Analysis : Uses the GitHub API


• ExpressJS
  • First express app: Hello express
  • Latitude/Longitude Geolocation Express App with Geolocation API


• Also see, Lab 7 assignment repository

ITEC 2560-60: Web Client and Server Programming
Minneapolis Community and Technical College (MCTC), Minneapolis, Minnesota
Prof. Clara James, Fall 2020
August 25, 2020 to December 15, 2020 (Tuesdays)