Jan 30: Dynamic Content

Learning Objectives

After today's class, you should be able to:

• Describe three ways JavaScript can be embedded into an HTML document.
• Explain the difference between innerText, textContent, and innerHTML.
• Write a for loop that dynamically adds new content to an HTML document.

Lesson Outline

Part A [20 min]

• 05_JavaScript-Primer.pdf – by Wang and Kirkpatrick
• Live Editor: kirkpams/343/demos/

Part B [30 min]

• 06_Textbook_8.2-8.5.pdf – by Connolly and Hoar
• document.write() vs the "usual way" to add content

  document.write("This is plain old text.");
  

  let para = document.createElement("p");
  para.textContent = "This is a new paragraph.";
  document.body.appendChild(para);
  

• Demo of built-in objects (example using Date)

  let date = new Date("2025-01-30");
  date = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
  console.log(date.getTime());
  

Lab [25 min]

• Install browser extension/add-on: HTML Validator
• Complete first steps of HTML and also JavaScript