Skip to main content

Day 4 - Strings and the DOM

Housekeeping

1. Strings and string methods

Slides - Javascript strings

Activity: String method practice

In pairs, practice using string methods:

  1. Go to wikipedia and choose a sentence or phrase that interests you (or doesn’t);
  2. In a new client.js file, create a string variable containing your selected phrase;
  3. Try using the following string methods on your phrase:
    • Using String.length, log the sentence “This phrase has [Number] characters”, replacing [Nunber] with the actual number of characters in the string.
    • Using String.startsWith(), log a true or false based on whether or not the the word “The” (or similar) matches the start of the string.
    • Using String.endsWith(), log whether or not the string is a question.
    • Using String.includes(), log a true or false based on whether or not the string contains the word “the” (or similar).
    • Using String.indexOf(), log the index of the first matching word (i.e. “the”) found in the string.
    • Add the <textarea> counter back into the starter form.
    • Using String.split(), log each character in the string as an array.

2. The Document Object Model

Slides - Document Object Model

Activity: DOM practice

In pairs:

  1. Using document.querySelector() and Element.innerHTML, try printing the console logs you created in the previous activity to a <p> element on an HTML page;
  2. Using prompt() print dynamic content to an HTML page using user input.

Lab Time