JavaScript ‐ JavaScript and HTML

Opening Task (25 Minutes)

• Scholars will complete opening task on Schoology covering topics learned from python foundations unit
• Randomly selected scholar will facilitate review with peers

JS Foundations Review (25 Minutes)

Review of previous day’s JS foundations covering the following topics:

• <script></script>
• let variable declarations
• console.log()
• if else statements

Break (10 Minutes)

Modifying HTML Demo (30 Minutes)

Teacher guided demonstration of using JS and HTML together:

• Writing to HTML:
  • document.write()
  • What happens when this command rus?
• Referencing existing content:
  • In CSS how would I target (select) a specific element to style? ID
  • document.getElementById()
• Modifying content:
  • In what ways would we want to modify existing content?
    • Text
      • element.innerHTML vs element.innerText
    • Style
      • element.style.[propertyName]
        We have to convert CSS’s kebab-casing to camelCasing for JS:
        • background-color -> backgroundColor
        • font-family -> fontFamily
        • color -> color

Buttons & Functions (30 Minutes)

Students will watch a video or read an article to learn about using buttons to trigger JavaScript functions to create the following program:

Create a HTML file called “randomness.html” and complete the following tasks:

• Create 3 Buttons, called “Simple”, “Old Style”, “Crazy Style”
• Create 3 Functions for each button
• Each button should modify the style of the website to match the button’s name

Exit Ticket (10 Minutes)