Display the Value of a String on a Page

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 documen.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