Home / Schedule / Week 5 / Wednesday, 6/17

DOM + events · MP1 Class Favorite vote · MP2 launch

Topic Slides

JS Intro: DOM + Events Foundation

Agenda Slides Open fullscreen ↗

← Monday, 6/15 Monday, 6/22 →

Post-Class Notes

TL;DR

Today we started JavaScript for real. HTML gives a page its structure and CSS gives it style, and JavaScript is the part that makes the page do things when you click, hover, or type. We walked through your questions on the demo file, learned how to grab an element and react to an event, and ran the MP1 Class Favorite vote. The one habit to keep: you will let AI write most of the JavaScript, so your job is to be able to read a block of it and say what it does and which part of the page it touches. Before Monday, do the quick "find your MP2 idea" exercise below, submit your MP2 proposal (Sunday 6/21), and build a small to-do app with AI.

What we did today
  • Recapped the generic AI look checklist from Monday and turned auditing your own site into homework.
  • A lightning talk on a big tech-news story, plus a quick look at what Cursor actually is.
  • A four-question review of responsive design and forms (the answers are below).
  • Your JavaScript demo questions, answered live on the real file.
  • The first real JavaScript lesson: the DOM and events.
  • The MP1 Class Favorite vote.
What JavaScript is for

Three languages, three jobs:

  • HTML is the structure (the content and its boxes).
  • CSS is the style (how it looks).
  • JavaScript is the behavior (what happens when the user does something).

Before JavaScript, a page is static. The only thing that reacts is a handful of CSS states like :hover, and even those snap back. JavaScript lets the page respond to a click, a hover, a keypress, or a form submission, and change itself afterward.

One thing to get right from day one: JavaScript and Java are two different languages. Same first four letters, unrelated. Do not tell anyone you learned Java in this course.

The DOM, and how JavaScript changes a page

When the browser loads your HTML, it builds the page into a tree called the DOM (Document Object Model): a document at the top, then head and body, then everything nested inside. JavaScript reads and edits that same tree to make the page interactive.

Selecting an element (so you can change it):

  • document.querySelector("...") takes any CSS selector you already know (a tag like h1, a class like .card, an id like #title) and returns the first match.
  • document.getElementById("title") takes only an id, with no #.

They overlap for ids, and querySelector is the flexible one, so it is a safe default. This is why the CSS selector practice pays off twice: the same selectors drive CSS and JavaScript.

Changing what you selected:

const heading = document.querySelector("h1");
heading.textContent = "Web is awesome";   // change the text
heading.style.color = "red";              // change a style
heading.style.fontSize = "100px";         // change another style

You can also add or remove a class, which is exactly how a dark-mode toggle works: one class holds all the dark colors, and clicking the button adds or removes it. Open any website, press F12, go to the Console tab, and try these on a real page. The console is also where console.log("...") prints messages for you while you debug. Your visitors never see the console; it is for you.

Events: making the page react

An event is something you expect the user to do. The common one is a click, but there are many: mouseover and mouseout, keyup and keydown (this is how browser games read WASD), input and submit on forms, DOMContentLoaded when the page finishes loading, and mobile ones like touch and even device motion. The full list is on MDN's events reference.

The clean way to react to an event is addEventListener:

const btn = document.querySelector("#surprise");
btn.addEventListener("click", () => {
  alert("Surprise!");
});

The demo file also has one button that uses inline onclick="surpriseMe()" instead. That works, but it mixes JavaScript into the HTML the same way inline style="..." mixes CSS in. Keep them separate: clean HTML, clean CSS, clean JavaScript. Prefer addEventListener.

Two more habits worth picking up now:

  • Put your <script> at the end of the <body> (or use defer) so the content loads first. Then the page still shows even if a bug stops the JavaScript.
  • Format your code before you read it. JavaScript marks scope with brackets (Python uses indentation instead), so a wall of brackets is hard to follow until you format it and the structure lines up.
Quick review answers (responsive and forms)
  • A page overflows sideways on a phone even with the viewport tag. Look first for a hard-coded pixel width on an element (often an image). Switch it to a relative unit like max-width: 100% so it scales. Media queries are a second tool: they set thresholds for screen sizes, they do not resize an element on their own.
  • A form submits with no error but the value never reaches the server. The input is missing its name attribute. Without name, that field is not included in the submission.
  • Why send a password with POST instead of GET. GET puts the data in the URL, where it shows up in the address bar and browser history. POST sends it in the request body instead.
  • What switching GET to POST actually changes. The value leaves the URL, and it is still not encrypted. Encryption in transit comes from HTTPS (TLS), which protects the whole request. Even then the server receives the plain password, so storing it safely is a separate step: the backend hashes it before saving, and a real "forgot password" flow sends a reset link, never your original password.
The Class Favorite vote

You browsed the live MP1 gallery and voted for the site that felt the most complete, had the most personality, and best achieved its own purpose. Four sites tied for first. Congratulations to the winners, who each earn a participation bonus (the names are in the Canvas announcement). Three more votes are coming this term: one after each of the next mini projects, and a bigger one on the final day with more categories.

To do before Monday (6/22)
  1. Find your MP2 idea, then submit the proposal. This short exercise is how you land an idea you will actually use:
    • By hand, list 3 small things that annoyed you this week.
    • Ask AI: "Here are my 3 ideas. Which work as a browser-only tool (MP2), and which would need a live API or data source (MP3)? For an MP2 one, what state would it track and what would the user do?"
    • Pick the MP2-friendly idea you would come back to and use. Create the new repo, add a short PROPOSAL.md, and submit it. The MP2 proposal is due Sunday, 6/21. If no idea feels right by the weekend, email me and we will sort it out together.
  2. Build a small to-do app with AI. Keep it simple: one HTML file plus one JavaScript file. On Monday you will compare your app with others in a group, so notice what the same kind of prompt produces and whether you added any features of your own. Note: the to-do app is the class exercise, so it cannot be your MP2 or MP3 topic.
  3. Replay the JavaScript demo. Open js-demo.html again and play with the examples we did not get to live, so the DOM and events ideas above feel concrete.
  4. Audit your sites for the AI look. Run your MP1 and personal sites against the checklist from today's slides (boxes, big rounded corners, generic fonts, the paper background, page-to-page drift) and fix what does not fit your purpose. Be specific when you ask AI to change it.
  5. Commit and push logs/wk05.md, including your JavaScript demo questions.
  6. Sign up for a Lightning Talk on the board and book your required 1:1 if you have not yet. CP3 is due Sunday, 6/28.

Monday we continue JavaScript essentials (variables, types, functions, conditionals) and then move into arrays and loops.