Adding Interaction
Recap
JavaScript can be used to add
functionality to the content
Javascript is the programming
language of the web!
Recap
[Link](1337) We can print messages to the console
We can use Numbers and Strings
”hi” Strings are enclosed in “quotes”
Recap 10
Data
Numbers and Strings can
be stored in variables
var name = "JavaScript" Variables are a way to give
[Link](name)
a name to a piece of data
Lesson Objective
• Use alert to catch users’ attention
• Learn to access HTML elements by their ID
• Modify HTML content with JavaScript
• Create reactions for user events
Inline Javascript
Let’s make our websites awesome!
Combining HTML & Javascript
So far, we have done HTML and Javascript separately.
HTML Javascript
How do we run Javascript code in HTML?
The <script> Tag
The <script> tag lets you run JavaScript code inside an HTML file.
HTML
Ending tag is needed to mark
the end of the element
Web Output (left)
Console Output (right
Adding Interaction
Let’s make our websites awesome!
Adding Interaction
alert("Your password
has been
compromised!")
Adding Interaction
There’s been a data
breach!
alert("Your password
has been
A user’s password has compromised!")
been compromised and
we have to let them know
immediately!
Adding Interaction
Alerts
The simplest form of interaction with
the user
They’re great, but let’s
see how we can
interact with the
HTML document itself
Adding Interaction
Interacting with the DOM
DOM: Document Object Model
Fancy way of saying “the
hierarchy of all the elements
of our HTML document”
Adding Interaction - Demo
HEADER
TEXT
SLIDER
ICONS Let’s start by modifying the <body> of
our document from JS
Adding Interaction - Demo
[Link] = "<h1>This body has been hijacked!</h1>"
◉ When we write document JavaScript knows that we’re
referring to the HTML document of our webpage
◉ Using [Link] we can access the <body>
element of the document
Adding Interaction - Demo Recap
[Link] = "<h1>This body has been hijacked!</h1>"
By assigning a value to the [Link]
property of the body we are able to change the
contents of our web page!
Adding Interaction
Changing the whole body
at once isn’t very useful… How can we change only a
specific element?
Adding Interaction
Element IDs
We can give our elements names, then
target them by their names.
In HTML, this can be done using the id
attribute:
<p id="my-special-paragraph"></p>
Adding Interaction
Element IDs
IDs have to be unique
Must not contain spaces or special characters
You can think of them like the NRIC of the element
Adding Interaction
Accessing An Element by ID
[Link]()
This will tell JavaScript to look for an
element with a specific ID so we can
manipulate it
Adding Interaction
Accessing An Element by ID
[Link]("my-element")
The ID is passed as a string between
the parentheses:
Adding Interaction
Accessing An Element by ID
var myParagraph = [Link]("my-
special-paragraph")
We’ll store the result in a variable so we
can play around with it.
Adding Interaction
Accessing An Element by ID
To see the current text:
[Link]([Link])
And now we can modify it!
[Link] = "I've changed!"
Demo Time
How to change a paragraph into a link!
Code
<h1 id="my-special-paragraph">Paragraph on Wiki</h1>
<script>
var myParagraph = [Link]("my-special-
paragraph")
var currentText = [Link]
[Link] = '<a href="[Link]
+ currentText + '</a>'
</script>
Intermediate Summary
Because wow, that’s already quite a lot…
Selecting Elements
To select specific elements
[Link]("id")
Changing content
Change the HTML of an element
[Link] = ...
Events
Adding Interaction
Events
But that’s still not interactive you say?
Interaction requires “reacting” to a
certain “event”
Adding Interaction
Events
Events are “things that happen” to HTML elements, like a button being clicked
Using JavaScript, we can “react” to these events
Adding Interaction
Reacting To a Button Click
<button id="my-button">Click Me!</button>
Adding Interaction
Reacting To a Button Click
We want to pop an alert when
the button is clicked:
CLICK ME
Adding Interaction
Reacting To a Button Click
We want to pop an alert when
the button is clicked:
<script>
[Link]("my-button").onclick = () => {
alert("Button clicked!")
}
</script>
Adding Interaction
Reacting To a Button Click
Let’s break this down:
Adding Interaction
Reacting To a Button Click
[Link]("my-button") Get the button
element
Tell JavaScript to run a
.onclick block of code when
the click event is fired
Adding Interaction
Reacting To a Button Click
Any code between
( ) => { /* Code */ }: the curly braces will
be run when the
event is fired
Adding Interaction
Reacting To a Button Click
You tell JavaScript: Someone clicks the The button yells
button
“Hey, when this button
is clicked please run “Hey!! Somebody
this code” clicked me!!”
Adding Interaction
Reacting To a Button Click
JavaScript hears this and JavaScript runs the
remembers that you wanted code you gave it
something to happen when the before
element is clicked
Reacting to an input
Let’s ask a user for their favorite color and change the background color
accordingly!
<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>
Reacting to an input
We can read the color that the user typed using the value property and
change our background color
<script>
[Link]("submit").onclick = ()=> {
var myInput = [Link]("my-input").value
[Link]("coloring").[Link] = myInput
}
</script>
We are changing the “style” attribute of <p> based on user’s input
Adding Interaction
Reacting To an Input
Input event
A character being typed into an input
Mirror Imaging
<p id="mirror"></p>
<input type="text" id="mirror-input">
We’ll write code to mirror whatever text is typed into the
input to a paragraph in real time
<script>
[Link]("mirror-input").oninput = ()=> {
var inputValue = [Link]("mirror input").value
[Link]("mirror").innerHTML = inputValue
}
</script>
Summary
Using JavaScript we can really start to bring
our webpages to life!
Summary
We can select a specific
element:
[Link]("id")
And change its content:
[Link] = ...
Question
What are events?
Answer: “Things that happen” to our HTML
elements that we can react to using JavaScript
Question
How can we react to
a click event?
[Link] = () => { /* code */ }
Questions?
> YOUR TURN!
> Play around, have
fun, ask questions!