OIM3690 - Web Technologies

2025 Spring

Session 22 (4/15)

contain

Today's Agenda

  • Welcome/News/Announcements
  • Collaborate with Git/GitHub
  • Review for loops
  • Animation with JavaScript
    • Global vs local variables
    • setTimeout

Welcome/News/Announcements

  • Project: I will assign you as Developer to a project by end of today
  • Assignment 3: due 5/3 (same deadline as project)
  • Remaining Sessions:
    • 4/17: JavaScript - API, Image Processing
    • 4/22: No class, work on your project
    • 4/24: Advanced JS - geolocation, localStorage, Date object, web games
    • 4/29: Semester Wrap-up
  • Communications:
    • Meet with me in person during office hours at least once this semester.
    • Email - specify course # in subject title, e.g., "OIM3690: GitHub settings"
    • Use Slack/GitHub when asking code-related questions
  • Questions?

Collaborate with Git/GitHub

  • Make your First Contribution (OIM3690/oim3690-first-contributions-2025spring):
    • Fork the repository to your account and clone it to your computer.
    • Create a branch add-<your-name> (or feature/bugfix in real projects.)
    • Add your name and Github link to Contributors.md, and commit.
    • Push the changes to GitHub.
    • Open a pull request from your branch for review and wait be merged.
    • Repeat above with a new branch for a new contribution (e.g. new .py file.)
  • As a Project Owner/Maintainer
    • Manage contributions by reviewing and merging pull requests, maintaining project branches, and addressing issues.
  • Recommendation: Step-By-Step Team Workflow with GitHub Desktop

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
  • Debugging

Exercises

  1. Use JavaScript to simulate rolling a dice.
  2. Use JavaScript to simulate rolling 100 dice and display the sum and average.
  3. Use JavaScript to repeat the simulation N times.

Lecture

--- # Quick Survey Do you use the following type of software or apps? If ***yes***, **what** do you use? * Time management/To-do * Note-taking * Password manager * AI tools (besides ChatGPT) --- # Software (that I use *almost* daily on <i class="fa-brands fa-windows"></i> ): - AI Tools: ChatGPT, Claude.ai, Perplexity.ai, GitHub Copilot, Cursor - To-do: [TickTick](https://ticktick.com) - Note taking: [Notion](https://www.notion.so/), [Obsidian](https://obsidian.md/) - Password manager: [Bitwarden](https://bitwarden.com/), [1Password](https://1password.com/) (paid), iCloud Keychain (for Apple) - Programming: VS Code, Git/GitHub, [Windows Terminal](https://github.com/microsoft/terminal) - Utility tools: - [Everything](https://www.voidtools.com/support/everything/) - Fast search in Windows - Microsoft [PowerToys](https://learn.microsoft.com/en-us/windows/powertoys/) - [f.lux](https://justgetflux.com/) - adjust screen color temperature - Snipaste - Telegram / Slack / Discord