From the course: JavaScript Essential Training

Mix text and variables with template literals - JavaScript Tutorial

From the course: JavaScript Essential Training

Start my 1-month free trial Buy for my team

Mix text and variables with template literals

“

- At this point we need to take a quick detour and talk about how to output content from JavaScript to an HTML document. I'm sure you're wondering why we've been spending so much time on the console, but nothing really happens in the browser. Well, we're about to bridge that gap. We need a way of effectively bridging the gap between what happens in the JavaScript world and what happens in the human world, and HTML functions as that bridge. A typical use of JavaScript is to either generate HTML, modify existing HTML, or remove HTML from a live document in the browser. So from this perspective, it's useful to think of JavaScript as an interactive layer on top of the content, the HTML, and its presentation, the CSS. And we can use Java scripts to manipulate the HTML and CSS to get the browser to do what we want. The most basic way of doing this is to use JavaScript to inject new HTML content into the document. To do that we first need to access an element within the document. We can then manipulate with JavaScript and now all that work we've been doing so far with objects comes into play because the entire document is an object in the browser. Let me show you. If I go to this new HTML document from the exercise files and just type in documents in the console and hit return, we get the document object and return. And this really is the full HTML output of the current document. You can see it here. We have an article with an H one, then an unordered list. And if I go over into index.HTML, these match exactly. So what happens is when the browser renders a document, it creates a document object model of that document. And we can then access that document object using JavaScript. I will talk about this in great detail in the next chapter. For now I want to show you how to directly manipulate this using something called a template literal. What I want to do is change the output here so that instead of just listing the properties we also get the property values. But the property values are sitting in our JavaScript object. So what I'm going to do is replace the content over here on the browser with content generated with JavaScript. So I'll show you first how we do it and then we'll use the template literal to output exactly the content we want. Here's the key: we can access anything within the document object model. So for example, I can say document DOT's body. This gives me the body elements. And then we can say give me the inner HTML of the body elements. So I'll say inner HTML. This is a property of the body elements. And it'll return to me all the inner HTML here. Now, instead of asking for it to be returned I'm going to reset it to something else. So I'll just type in some text here and then hit return. Now what happens is in the browser, I wiped out everything inside the body element and replaced it with just that string of texts, some texts and nothing else. So the main and the article, everything else has gone. Now, it's only gone in this current document object model in the browser. So if I reload the browser, everything comes back again. Okay, keep this in mind. Now we want to create a template where we use this HTML that you have here. And then we fill it in with data from our JavaScript object. So I'll copy the main, actually I'll cut out the main completely so the body is empty and save it. Now we have nothing in the browser. That's where we want to start. Then I'll go to my Java script and here I'll create a new constant, call it content. And then I'll set it equal to two back ticks. Now notes back ticks are different from quotation marks and they're also different from single quotation marks. It's a left-leaning, a weird tick that you don't normally use an English language on American keyboards. You'll find it directly under the escape key. On other language keyboards, it may be hiding somewhere else but you should be able to find it. The back ticks tell the browser that anything inside here is a template literal meaning we can mix HTML and strings with JavaScript expressions to literally create templates. And that's what we want to do here. So I'll paste in that HTML I copied out from index and then maybe clean up the layout a little bit here so that it's nice and clean. Then I'll use Java scripts to get the document and the body inside the document and the inner HTML inside the body and set it equal to the contents of this new constant content. Save that. And now JavaScript is injecting this main and everything else into the HTML on the fly. Cool, now we need to somehow pull the values from our everyday pack object into this template literal. And this is why it's called a template literal. Inside of template literal, anytime you want to call in something generated by Java script, we add a placeholder. It looks like this, take the title here and then set dollar sign and then curly brackets. And inside the curly bracket we can place any JavaScript expression. That JavaScript expression will be rendered and the output will be placed where this placeholder is. So in our case, we're looking for the everyday backpack object and I want the name. So name, save this and the name property is now sent over. It looks the same, but what if I changed the name property of our objects to Green frog? Save. And now it changes over here as well to green frog because we are now injecting the value from the everyday pack object into our template literal. Now we can do the same with all of the other properties to fully fill out our object. The template literal allows me to inject any JavaScript expression so we can call for properties. We can also run functions like this method here the backpack age that outputs the age and we can even run advanced functions or call in new functions if we want to. What's happening is we're just co-mingling strings, in this case HTML with generated JavaScript output. And this is what makes template literals so powerful. Save this and you'll see over in the browser we now have full output that uses the data from our object co-mingled with HTML to give us all the information we need in the browser. We're effectively bridging the JavaScript world and the human world through injecting HTML into the document. Thanks to this template literal, we can now create a string like this with formatting and everything else and co-mingle JavaScript into that string for generated output. If you ever worked with template tags in another language like PHP, you'll recognize this pattern and moving forward, I'll use template literals to output my content whenever possible. And I encourage you to do the same.

Contents