⇦ Back

WDX-180

Web Development X

Week 25 | Advanced JavaScript: Web APIs

Week 24 ⇦

Updated: 10/4/2025

⇨ Week 26

Week 25 - Day 1 | Web Storage APIs

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: Web Storage APIs
  • Part 2: Web Storage APIs

You can find the lecture code here and all other assets here.

Lecture Notes:

  • The localStorage is a read-only property* of the window interface
    • Treat it as read-only.
    • It’s part of the window.localStorage
  • localStorage data has no expiration time (unlike cookies)
  • sessionStorage: data gets cleared when the page session ends — that is, when the page is closed
  • CRUD Methods for localStorage and sessionStorage: Create/Read/Update/Delete
    • setItem() (C)
    • getItem() (R)
    • setItem() (U)
    • remoteItem() (D)
  • “key(): “The order of keys is user-agent defined, so you should not rely on it.”
  • Web Storage APIs work on per-origin and per-browser context.

Questions:

  • Is it safe to store sensitive/private information in the browser’s storage?
    • You have to be very careful about the things that you store.
    • Avoid saving sensitive/private information.
    • Try encrypting things before you save them.
  • Will there be an error message when the storage limit is reached?
    • Yes, we’ll get an error.name QuotaExceededError

References & Resources:

Exercises

Become a discoverer: Experiment and find out how localStorage works with different origins and when accessed from different browsers: - Configure LiveServer to use a different default port (5500 => 5501) and see what happens with the localStorage. Also try both ports on a different browser. To find the setting, search for liveServer.settings.port in VSCode Settings, Extensions.

Coding challenge #1: Use localStorage to keep track of a web page’s horizontal position so that when the user reloads or opens up the page again, they should be looking at the last section. For this one you’ll have to dig out some other APIs (related to browser scrolling, current cursor height)

Coding challenge #2: Try localStorage with React. You might want to try useEffect for running localStorage.

  // Read:
  useEffect(()=> { localStorage.getItem() }, []);
  // Read/Write/Update/Remove:
  onClick={()=> localStorage.getItem/setItem/removeItem }

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week25/progress/progress.draft.w25.d01.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Week 25 - Day 2 | The Scrum Framework

Schedule

  • Study the suggested material

Study Plan

According to the Atlassian website:

“Scrum is an agile project management framework that helps teams structure and manage their work through a set of values, principles, and practices. Much like a rugby team (where it gets its name) training for the big game, scrum encourages teams to learn through experiences, self-organize while working on a problem, and reflect on their wins and losses to continuously improve.”

In this module, we are going to explore one of the most common and popular project management frameworks. You will watch a series of YouTube videos to familiarize yourself with the Scrum framework and the following related concepts, since chances are that one of the companies or teams you are going to work with will employ this framework:

  • Sprints
  • Sprint Planning
  • Sprint Reviews
  • Ceremonies
  • Backlog
  • Stand-ups
  • Scrum Roles

Suggested material for study and practice:

Sources and Attributions

Photo by cottonbro studio

Week 25 - Day 3 | Web APIs: Geolocation

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: The Geolocation API
  • Part 2: Combining the Geolocation API with OpenStreet Maps.

You can find the lecture code here

Lecture Notes:

  • Geolocation API: a browser API for detecting and tracking the device’s location on Earth (geo === earth).
    • Uses two coordinates (think of them as the x and y on a coordinate map) that are called latitude and longitude (floating point numbers).
  • Navigator (or user-agent, User Agent): the technical term for the Browser. In JS, it is an object: navigator.

Questions:

  • How can we find a place/address from latitude/longitude?
    • A: We will use more APIs to get more information about the lat/lon, for example, country, city, address, weather information, etc.
  • Can this geo data be trusted?
    • A: They can be easily changed by the user with geo-spoofing.

References & Resources:

Exercises

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week25/progress/progress.draft.w25.d03.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.

Extra Resources

Photo by

Week 25 - Day 4 | DOM API: Text & Comment Nodes

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Watch the lecture (40min) to learn more about DOM Nodes and specifically about the Text and Comment Nodes.

Week 25 - Day 5 | Media API

Schedule

  • Watch the lectures
  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

  • Part 1: Local Storage & Media Web APIs
  • Part 2: Media Web API

Key points:

  • Understand the basics of local storage and its limitations.
  • Learn how to use the media API to control video and audio elements.
  • Use custom HTML and CSS to create a unique interface for video playback.
  • Take advantage of the media API’s methods and properties to enhance user experience.
  • Don’t rely solely on local storage; consider using server-side storage solutions for more complex applications.

You can find the lecture code here and the diagrams here.

Questions:

  • What about iframe-embedded videos or audio, e.g. Vimeo, YouTube?
    • In this case you have to use the Vimeo/YouTube/* APIs.
    • The Media API is only available for <video> and <audio> directly accessible through the web page. The Media API won’t work with <iframe>.

References & Resources:

  • Slides
  • The <video> element
  • HTMLMediaElement Interface
  • iframe vs video/audio:
    • <video> and <audio> are HTML elements to play a video or audio file
      • You are loading a video or audio file(s)
    • <iframe> is an HTML element to load a while web page
      • You are loading basically an HTML file through a URL.
  • What makes https secure?
    • It’s not the port (443) but the other technologies* that are working alongside the port and the server. *SSL/TLS.
  • MIME Types: “A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) is a standard that indicates the nature and format of a document, file, or assortment of bytes.”
  • How to change LiveServer port: search in settings for: “liveServer.settings.port”
    • settings.json:
      {
    "settings": {
      "liveServer.settings.port": 5555
    }
  }

Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!

Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham