CPNT 262 Day 3 - Strings, string methods and the browser environment

Houskeeping

• in-class code pushed to GitHub

Trophy of the day

• A Date with Harry Potter

1. Spoiler Demo: Tip Calculator

Materials

• JS Activity: Tip Calculator

2. Strings and string methods

Materials

• Handling text - strings in Javascript
• Useful string methods
• Takeaways: String Methods
• Gist: String Methods

3. Dates and common DOM objects/methods

Materials

• Manipulating Documents with Javascript
• document.querySelector()
• Node.textContent
• Element.innerHTML

Key Takeaways

• The querySelector() method accepts any valid CSS selector, such as:

  • .intro
  • h1
  • #sign-in-form
  • a[href="https://example.org"]

• querySelector() will return the first matching element only. Use querySelectorAll() to return a list of all matching elements.

• All HTML elements have the querySelector() method, so you can query for elements directly inside other elements:

  // finds the first paragraph in the document
  const paragraph = document.querySelector('p');
  
  // finds the first span element in the above paragraph
  const paraSpan = paragraph.querySelector('span'); 

• Both textContent and innerHTML are object properties that you can read and assign like any other variable.

• Use textContent unless the value contains HTML, then use innerHTML.

Activity

• A Date with Harry Potter

4. Open Lab

• Trophy of the Day
• Free Code Camp Exercises
• Assignments
• Prep for tomorrow

Prep

MDN Readings

• String data type
  • Handling text - strings in Javascript
  • Useful string methods
• Outputting information to a web page
  • Background: Manipulating Documents with Javascript
  • Creating a variable from an HTML element with Element.querySelector()
  • Outputting to an HTML element with Element.innerHTML

Free Code Camp Exercises

• Javascript basics: Exercises 23-36
  • Start: Declare String Variables
  • Complete and Stop (or not): Word Blanks