Adding Interaction: Examples, Code, Notes

JavaScript Adds Functionality

It is the programming language of the web and can make content respond.

Console, Numbers, Strings

We can print with console.log() and use numbers or quoted strings.

Variables Store Data

var name = "JavaScript" gives a name to a piece of data.

Interactive Slide Preview

Click a topic to move through the lesson like a mini slide deck.

Combining HTML And JavaScript

The <script> tag lets JavaScript run inside an HTML file.

Example

Click the button to run JavaScript from this page.

Code

<p id="my-text">Click me!</p>

<script>
  document.getElementById("my-text").onclick = () => {
    alert("You clicked me!");
  };
</script>

Notes

The script tag has an opening and closing tag.
HTML creates the page content.
JavaScript inside the script tag can make that content react.

Inline JavaScript

JavaScript can also be written directly on an HTML element.

Example

Waiting for a click...

Code

<p onclick="alert('You clicked me!')">
  Click me!
</p>

Notes

onclick is an attribute that runs code when clicked.
This is quick to demonstrate, but script tags are easier to manage later.
Both examples react to the same click event.

Alerts

alert() creates a simple pop-up message to catch the user's attention.

Example

Click a button to see what alert code can do.

Code

alert("Your password has been compromised!")

// Another example:
alert("Button clicked!")

Notes

An alert is one of the simplest ways to interact with a user.
Alerts can look urgent, even when the message is fake.
A pop-up alone is not proof that something real happened.

The DOM

DOM means Document Object Model: the hierarchy of all elements in an HTML document.

Example

document html body h1 p button

Code

document.body

// document means the HTML document
// body means the <body> element inside it

Notes

JavaScript knows document means the current web page.
The DOM lets JavaScript find and change HTML elements.
The page structure is like a hierarchy or tree.

Changing The Body

document.body.innerHTML can replace the visible content of the page.

Example

Demo Body

This box acts like a safe mini body.

Code

document.body.innerHTML = "<h1>This body has been hijacked!</h1>"

Notes

innerHTML means the HTML content inside an element.
Assigning a new value replaces the old content.
Changing the whole body works, but it is usually too broad.

Element IDs

An ID gives one element a unique name so JavaScript can target it.

Example

This paragraph has an ID.

This paragraph does not have that ID.

Code

<p id="my-special-paragraph"></p>

Notes

IDs should be unique.
IDs should not contain spaces or special characters.
Think of an ID like the NRIC of the element.

Accessing An Element By ID

document.getElementById() looks for an element with a specific ID.

Example

Current text: I can be selected.

Console output appears here.

Code

var myParagraph = document.getElementById("my-special-paragraph")

console.log(myParagraph.innerHTML)

Notes

The ID is passed as a string in parentheses.
We can store the selected element in a variable.
After selecting it, we can read or change its properties.

Changing One Element With innerHTML

After selecting one element, use innerHTML to change its content.

Example

Paragraph on Wiki

Code

<h1 id="my-special-paragraph">Paragraph on Wiki</h1>

<script>
  var myParagraph = document.getElementById("my-special-paragraph")
  var currentText = myParagraph.innerHTML

  myParagraph.innerHTML =
    '<a href="https://www.wikipedia.org">' +
    currentText +
    '</a>'
</script>

Notes

Changing one element is more useful than replacing the whole body.
currentText stores what was already inside the element.
You can put HTML inside innerHTML, such as a link.

Events

Events are things that happen to HTML elements, like a button being clicked.

Example

Interaction requires reacting to an event.

click input type change

Code

element.onclick = () => {
  /* code */
}

Notes

An event is something that happens.
JavaScript can remember code to run when the event happens.
The element is like it yells, "Somebody clicked me!"

Reacting To A Button Click

Set .onclick to a function so code runs when the button is clicked.

Example

Waiting for the click event...

Code

<button id="my-button">Click Me!</button>

<script>
  document.getElementById("my-button").onclick = () => {
    alert("Button clicked!")
  }
</script>

Notes

document.getElementById("my-button") gets the button.
.onclick tells JavaScript what to do on click.
Code between the curly braces runs when the event fires.

Reacting To An Input

The value property reads what the user typed into an input.

Example

What is your favorite color today?

Type a color name:

Code

<p id="coloring">What is your favorite color today?</p>
<input type="text" placeholder="Your favorite color" id="my-input">
<button id="submit">Change</button>

<script>
  document.getElementById("submit").onclick = () => {
    var myInput = document.getElementById("my-input").value
    document.getElementById("coloring").style.backgroundColor = myInput
  }
</script>

Notes

.value reads text from an input.
.style.backgroundColor changes the inline style.
The user's typed text controls what happens.

Input Events And Mirror Imaging

The oninput event fires while a user types into an input.

Example

Type something:

Mirror output appears here.

Code

<p id="mirror"></p>
<input type="text" id="mirror-input">

<script>
  document.getElementById("mirror-input").oninput = () => {
    var inputValue = document.getElementById("mirror-input").value
    document.getElementById("mirror").innerHTML = inputValue
  }
</script>

Notes

onclick reacts to clicks.
oninput reacts as characters are typed.
This creates a real-time mirror from input to paragraph.

Slide Coverage Map

Slides 1-5: title, recap, and lesson objectives are covered in the header and recap cards.

Slides 6-12: combining HTML and JavaScript, script tags, and inline JavaScript are covered in sections 1 and 2.

Slides 13-16: alerts and the fake compromised password message are covered in section 3.

Slides 17-20: DOM, document, body, and body innerHTML are covered in sections 4 and 5.

Slides 21-29: IDs, getElementById, reading innerHTML, changing content, and turning text into a link are covered in sections 6 to 8.

Slides 30-43: intermediate summary, selecting elements, changing content, events, and button clicks are covered in sections 9 and 10.

Slides 44-47: reading input values, changing background color, and mirror imaging with oninput are covered in sections 11 and 12.

Slides 48-53: final summary, questions, and your-turn practice are covered by the notes, examples, and interactive demos.