OIM3690 - Web Technologies

2025 Spring

Session 25 (4/24)

contain

Today's Agenda

  • Welcome/News/Announcements
  • How PM and Dev work together by AJ Matise
  • Responsive Web Design
  • Advanced JavaScript Features
    • Fetching API data
    • navigator.geolocation
    • localStorage
  • Creating a Web Game using JavaScript

Welcome/News/Announcements

  • Assignment 3: Due 5/3 (same deadline as project)
  • Project:
    • First Version and PM-Dev Communication: I will check it on Monday.
    • Final Version: Due 5/3
    • I am available to discuss about your project before the deadline.
  • Next Class:
    • 4/29: Student Opinion Survey, Semester Wrap-up

How PM and Dev work together by AJ Matise

What we have learned so far...

  • HTML: basic tags, image, link, list, id, class, div, span, table, form, multimedia, ...
  • CSS: syntax, internal vs. external vs. inline, selectors, flexbox, grids, ...
  • Website: design, deployment, ...
  • JavaScript
    • Event, element
    • Variables, types, functions
    • Conditional statements
    • Access and validate form inputs
    • Array
    • Iteration: for loop
    • setTimeout
  • Debugging

Responsive Web Design

API (Application Programming Interface)

Fetching API Data with JavaScript Using fetch()

  • Example:
    fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
      console.log(data);
      });
  • Explanation:
    • The fetch() method makes a request to the API at the specified URL.
    • The .then() method is used to handle the response from the server.
    • The response is converted to JSON using the .json() method.

Fetching API Using fetch() and async/await

  • Example:
    async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
  }
  • API Demo:

OpenAI API Quick Start

More JavaScript Features

  • get geolocation
  • localStorage

Create a Game App using JavaScript

  1. Game Demo
  2. Pair Programming
    1. Close your laptop. Discuss and write pseudo-code on a paper (20 mins)
    2. Open your computer:
      1. Create game folder under WebTech.
      2. Under game folder, copy game.html from OIM3690/resources/templates
      3. Under game folder, create game.js
      4. Write JavaScript code in VSCode (20 mins)
        • Driver: typing code, sharing screen
        • Navigator: paying close attention to the code, providing guidance and suggestions whenever possible

What other features can we add to this game?

Recommendations on JavaScript Game