Arrays and Strings

Recap

• in-class code

Housekeeping

• Lab time facilitator schedule (for now):
  • Monday
    • Jess
    • Fesal
  • Tuesday
    • Jess
    • Patrick

---

1. Review: Capitalize utility function

Demo: Create form for capitalizing strings

• Refactor code into functions.
• starter code

2. Arrays

Materials

• MDN: Arrays
• MDN: Common Array Operations
• Video Introduction to Arrays with JavaScript by Steve Griffith

Slides: Arrays and Strings

Breakout Activity

In groups of 3-4, create some more sample arrays for this Gist.

1. As a group, decide on a topic for your list;
2. One member create a Gist or GH repo to share your list;
3. Using the nouns.js list as an example, brainstorm items for your array and save them to your Gist/repo.

You will be asked to submit your share link in the main room so your Instructor can add it to the above Gist.

3. Strings and string methods

Materials

• MDN: Handling text — strings in JavaScript
• MDN: Useful string methods

4. Demo: <textarea> Character Counter

Materials

• <textarea> HTML Element
• Element.getAttribute()

Activity

• Text area character counter

---

Lab Time

Using this starter code try the following to practice your arrays and strings:

• Using String.startsWith(), print a "yes" or "no" response stating whether or not the string is matches the start of the phrase. See spoilers.
• Using String.endsWith(), state whether or not the phrase is a question.
• Using String.includes(), print a "yes" or "no" response stating whether or not the string matches any section of the phrase.
• Using String.indexOf(), print the index of the first matching string found in the phrase.
• Add the <textarea> counter back into the starter form.
• Using String.split(), refactor the <textarea> counter to be a word counter.

Stretch Lab

• Add a second string field to the form and use String.replaceAll() to print a new phrase where the first string has been replaced with the second string.

---

Prep

Arrays

• MDN Readings
  • Arrays
  • Common Array Operations
• Videos:
  • Introduction to Arrays with JavaScript

Strings

• MDN Readings
  • Review: Handling text — strings in JavaScript
  • Useful string methods

---