Day 8: Modifying Page Text with JS and Web Forms

Reminders for Tony

1. Put on mic
2. Open Zoom chat
3. Record! Anyone else?

Housekeeping

• Announcing Assignment 2
• Course Assessment Schedule
• PROJ 207 Teams

Topics Covered

• Textbook Javascript Overview
• How to structure a form
  • Form validation
• The form submit event
• Element.innerHTML
  • See also: HTMLElement.innerText
  • What’s the difference between innerText and innerHTML?
  • What’s the difference between HTMLElement and Element?

Goal for the day

By the end of the day, you should have a form that can update content on a web page.

Dynamic Page Text Demo

Topic 1: Javascript overview

We’ll take a tour of the Javascript portion of the textbook and overview the major programming concepts associated with Javascript.

Live-code objectives: Adding machine

• Create a form with the following fields
  • 2 number inputs
  • submit button
• using a form handler, add the two numbers and display the sum to the console.

Topic 2: Displaying calculator results on a web page

Using Element.innerHTML let’s display the result of our calculation on our HTML page.

Live-code objectives: Printing results

• Add a heading or paragraph to the page containing your form.
• Instead of logging the calculator result to the console, display the data in your new element using Element.innerHTML.

Mid-day Huddle

• who needs help?
• any pivots?
• any show-and-tell?

[lunch]

Activity: Calculator

Extend the adding machine provided in the live code session and add support for subtraction, multiplication and division using a select menu.

Supporting materials:

• Basic math in JavaScript - numbers and operators
• Making decisions in your code - conditionals

Optional Lecture

Activity: String concatenation

Using template literals, display a sentence that summarizes the results of the calculator and add it as content of a paragraph element.

[number 1] [multiplied by|plus|minus|divided by] [number 2] equals [result]

Supporting materials:

• Handling text - strings in JavaScript

Summary

• any trophies?
• prep for tomorrow?
• applause