Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
You learned how to collect information from users with the prompt() method, and you displayed that information in an alert dialog, as well as in the console. In this video, you'll learn a common way to display information on a webpage using JavaScript.
You learned one way of collecting
information from users by way
0:00
of the prompt method.
0:03
And you displayed that information in an
alert dialog, as well as in the console.
0:05
While those techniques are great for
learning, there are other effective
0:09
options that tend to be a better
fit when building projects.
0:12
So now I'll teach you a more conventional
way of displaying information on a webpage
0:15
using a special JavaScript method and
property.
0:19
You're also going to use many of the
skills you learn in this stage to create
0:22
your first web app.
0:25
It's called Shout App.
0:26
And here's how it works.
0:28
When the page loads,
a dialogue box appears.
0:29
The user types in something to shout,
like JavaScript is the best.
0:32
We'll convert their response to all upper
case letters, add exclamation marks, and
0:36
display it on the page.
0:40
This time, open the file
shout.js inside your js folder.
0:43
And update the script tag in
index.html to point to shout.js.
0:48
First, declare a variable named
stringToShout to store the value
1:01
returned by a prompt dialog that asks,
what do you want to shout?
1:06
Then create another variable named shout.
1:19
We'll assign shout the return value
of stringToShout.toUpperCase().
1:23
Remember, the toUpperCase() method
converts a string to all upper case.
1:30
Next, I'll create the final shout
message by declaring a variable named
1:35
shoutMessage and
assigning it a template literal.
1:40
Remember, you define a template
literal with backticks.
1:44
Inside the backticks, type,
The message to shout is:,
1:49
then use a dollar sign and
curly braces to dynamically insert or
1:54
interpolate the value of shout.
2:00
Let's also add a couple of
exclamation marks at the end.
2:03
I'll test this code by logging the value
of shoutMessage to the console.
2:08
In the browser,
The prompt dialogue appears.
2:16
I'll type, I love javascript,
as the text to shout.
2:20
And in the console, I see the message
to shout is, I LOVE JAVASCRIPT,
2:25
in all uppercase.
2:30
Great, now let's get this
content into the page.
2:31
I'll teach you a JavaScript method and
2:35
property that will let you insert content,
even HTML tags into a webpage.
2:37
Inserting content into the page with
JavaScript is a two-step process.
2:42
First, you access or
2:45
select the HTML element where
you want the content to appear.
2:47
Then you let JavaScript know what
content to insert into that element.
2:51
A common way to access HTML elements
is with a method called querySelector.
2:56
Between the parentheses,
you provide the tag name,
3:03
class, or ID of the element you
want to access as a string.
3:06
So let's, for example, access the main
element in our index.html file.
3:10
To access the main element, we need to
add one more piece of information before
3:22
the query selector part.
3:27
And that is document dot.
3:29
Now, don't worry too much
about what document dot means.
3:33
In fact, you've seen it before when
you used the document.write method.
3:36
All you need to know right now is
that querySelector is a method of
3:40
a built-in object the browser
has called document.
3:44
And it's what's going to let us interact
with the browser to find the HTML elements
3:48
we want to access.
3:52
You'll learn a whole lot more
about this in a later course.
3:54
Okay, so now we're saying, hey,
JavaScript, go in the HTML, and
3:57
get us a main element so
that we can do something with it.
4:01
And it's going to return the first
main element that it finds.
4:04
In this case, there's only one.
4:08
I can make sure that this works as
expected by switching over to the console
4:10
and running
document.querySelector('main').
4:14
When I press Enter, the console indeed
returns the main HTML tag, perfect.
4:18
We've targeted the main element,
4:24
now we need to let it know
what content to display.
4:26
After the parenthesis add a dot,
4:29
then type innerHTML,
followed by an equal sign.
4:33
innerHTML is a property that
replaces the existing contents
4:38
of an element with new content.
4:43
So what do we want the main
elements innerHTML content to be?
4:46
Well, in this case,
it should be the value of shoutMessage.
4:51
And you learned that a string
can also contain HTML tags.
4:55
So let's make the message a level
two heading by including opening and
4:59
closing h2 tags inside the backticks.
5:04
All right, let's try it.
5:11
Save the file and refresh the browser.
5:13
This time, I'll type, javascript is cool,
into the prompt dialog.
5:18
Click OK, and
see the message appear on the page.
5:24
And when I inspect the page
in Chrome Dev Tools,
5:28
notice the newly created h2 element
that's inside the main element.
5:31
Part of the code we used to build
the Shout App might look familiar to you.
5:40
You used it earlier as part of
the self-destructing message challenge to
5:45
display the final boom message.
5:48
And in the very first video to replace
the content of a we page with new content.
5:50
So now you know how it all works.
5:54
You've just learn some pretty powerful
new tools and techniques in JavaScript.
5:56
Interacting with webpages like this
is a huge topic in web development.
6:01
And you will continue to build
the skill as you progress through your
6:05
JavaScript curriculum.
6:08
We have an entire course dedicated
to interacting with webpages.
6:09
As we wrap up this section on strings,
I wanna show you a resource where you can
6:14
learn more about how strings work, as well
as other string properties and methods.
6:17
One of the best JavaScript resources is
the Mozilla Developer Network, or MDN,
6:22
for short.
6:27
You'll find that it's JavaScript reference
section offers in depth information on
6:28
every aspect of the JavaScript language.
6:32
For example,
the section on strings displays a sidebar
6:35
that lists all the properties and
methods you can use on a string.
6:39
For example, here's the length property,
which you learned about earlier.
6:42
Below is the list of the methods.
6:46
Again, one of the main differences
between a property like length and
6:48
a method is the pair of parentheses.
6:52
The parentheses indicate that something
is a command, or a method of the string.
6:54
Near the bottom of the list,
we see the familiar methods,
6:59
toLowerCase() and toUpperCase().
7:03
Click on one and it opens a reference
page on the method with useful examples.
7:06
If the title
String.prototype.toUpperCase()
7:12
looks a bit scary, don't worry.
7:15
The Mozilla Developer Network
sometimes uses accurate but
7:17
not beginner friendly language
to explain JavaScript.
7:20
So a lot of it might seem like it's
written for professional developers.
7:23
For example,
the String.prototype part here refers
7:27
to the string itself, either a set
of characters between quotes or
7:32
a string value that you've stored
in a variable, for example.
7:36
So for now, know that the important
part here is to just toUpperCase().
7:39
With time and practice,
you'll get more and
7:45
more comfortable exploring
a resource like MDN.
7:47
I've also posted the links in
the teacher's notes with this video.
7:50
You need to sign up for Treehouse in order to download course files.
Sign up