You learned one way of collecting information from users by way

of the prompt method.

And you displayed that information in an alert dialog, as well as in the console.

While those techniques are great for learning, there are other effective

options that tend to be a better fit when building projects.

So now I'll teach you a more conventional way of displaying information on a webpage

using a special JavaScript method and property.

You're also going to use many of the skills you learn in this stage to create

your first web app.

It's called Shout App.

And here's how it works.

When the page loads, a dialogue box appears.

The user types in something to shout, like JavaScript is the best.

We'll convert their response to all upper case letters, add exclamation marks, and

display it on the page.

This time, open the file shout.js inside your js folder.

And update the script tag in index.html to point to shout.js.

First, declare a variable named stringToShout to store the value

returned by a prompt dialog that asks, what do you want to shout?

Then create another variable named shout.

We'll assign shout the return value of stringToShout.toUpperCase().

Remember, the toUpperCase() method converts a string to all upper case.

Next, I'll create the final shout message by declaring a variable named

shoutMessage and assigning it a template literal.

Remember, you define a template literal with backticks.

Inside the backticks, type, The message to shout is:,

then use a dollar sign and curly braces to dynamically insert or

interpolate the value of shout.

Let's also add a couple of exclamation marks at the end.

I'll test this code by logging the value of shoutMessage to the console.

In the browser, The prompt dialogue appears.

I'll type, I love javascript, as the text to shout.

And in the console, I see the message to shout is, I LOVE JAVASCRIPT,

in all uppercase.

Great, now let's get this content into the page.

I'll teach you a JavaScript method and

property that will let you insert content, even HTML tags into a webpage.

Inserting content into the page with JavaScript is a two-step process.

First, you access or

select the HTML element where you want the content to appear.

Then you let JavaScript know what content to insert into that element.

A common way to access HTML elements is with a method called querySelector.

Between the parentheses, you provide the tag name,

class, or ID of the element you want to access as a string.

So let's, for example, access the main element in our index.html file.

To access the main element, we need to add one more piece of information before

the query selector part.

And that is document dot.

Now, don't worry too much about what document dot means.

In fact, you've seen it before when you used the documen.write method.

All you need to know right now is that querySelector is a method of

a built-in object the browser has called document.

And it's what's going to let us interact with the browser to find the HTML elements

we want to access.

You'll learn a whole lot more about this in a later course.

Okay, so now we're saying, hey, JavaScript, go in the HTML, and

get us a main element so that we can do something with it.

And it's going to return the first main element that it finds.

In this case, there's only one.

I can make sure that this works as expected by switching over to the console

and running document.querySelector('main').

When I press Enter, the console indeed returns the main HTML tag, perfect.

We've targeted the main element,

now we need to let it know what content to display.

After the parenthesis add a dot,

then type innerHTML, followed by an equal sign.

innerHTML is a property that replaces the existing contents

of an element with new content.

So what do we want the main elements innerHTML content to be?

Well, in this case, it should be the value of shoutMessage.

And you learned that a string can also contain HTML tags.

So let's make the message a level two heading by including opening and

closing h2 tags inside the backticks.

All right, let's try it.

Save the file and refresh the browser.

This time, I'll type, javascript is cool, into the prompt dialog.

Click OK, and see the message appear on the page.

And when I inspect the page in Chrome Dev Tools,

notice the newly created h2 element that's inside the main element.

Part of the code we used to build the Shout App might look familiar to you.

You used it earlier as part of the self-destructing message challenge to

display the final boom message.

And in the very first video to replace the content of a we page with new content.

So now you know how it all works.

You've just learn some pretty powerful new tools and techniques in JavaScript.

Interacting with webpages like this is a huge topic in web development.

And you will continue to build the skill as you progress through your

JavaScript curriculum.

We have an entire course dedicated to interacting with webpages.

As we wrap up this section on strings, I wanna show you a resource where you can

learn more about how strings work, as well as other string properties and methods.

One of the best JavaScript resources is the Mozilla Developer Network, or MDN,

for short.

You'll find that it's JavaScript reference section offers in depth information on

every aspect of the JavaScript language.

For example, the section on strings displays a sidebar

that lists all the properties and methods you can use on a string.

For example, here's the length property, which you learned about earlier.

Below is the list of the methods.

Again, one of the main differences between a property like length and

a method is the pair of parentheses.

The parentheses indicate that something is a command, or a method of the string.

Near the bottom of the list, we see the familiar methods,

toLowerCase() and toUpperCase().

Click on one and it opens a reference page on the method with useful examples.

If the title String.prototype.toUpperCase()

looks a bit scary, don't worry.

The Mozilla Developer Network sometimes uses accurate but

not beginner friendly language to explain JavaScript.

So a lot of it might seem like it's written for professional developers.

For example, the String.prototype part here refers

to the string itself, either a set of characters between quotes or

a string value that you've stored in a variable, for example.

So for now, know that the important part here is to just toUpperCase().

With time and practice, you'll get more and

more comfortable exploring a resource like MDN.

I've also posted the links in the teacher's notes with this video.