5.1 Using JavaScript Processes With Jade Variables

Hello and welcome back to Top Speed HTML Development with Jade. In this lesson, you'll be learning how to take some of the functionality from JavaScript, and apply it to your Jade variables. So you remember from an earlier lesson, I mentioned that it's possible to use an array to set the class names against a particular HTML element. So we are going to start by setting up an array of class names which we will set against the body element. So I've create a variable named body classes and I have created an array against that variable. And in that array I have added the class names bodyclass_one, and bodyclass_two. So now we're going to take this variable and we're going to use it against the body element to provide it with these two class names. And you remember from the lesson on setting attributes against elements that we can set the class of this element by putting the word class in-between brackets, and then an equal sign. And in this case we're going to use the body classes variable that we just created from our config file. So that will pull in that array with those two class names, and it will apply those class names to the body element. So we'll save and compile and just watch this body tag here. So there are our two class names. Now, why is this important? It's important because I want to demonstrate to you how you can apply some JavaScript functionality to process that array of class names on a page by page basis. Now it's quite common to find the need to add a different class name to the body for a specific page. You might need to have page specific styling in your CSS and might need to add a unique class name to that page in order to bring in that individual page styling. So by using JavaScript processes you can push an extra class name into your body class's variable array. And to do that, we're going to use the same technique that we did earlier of appending to config block. And in this case, we're going to use this code. So we've created a new variable and next to that we've used JavaScript's push method, which will push this class name, extra class into this variable. And we then just, this is basically just a container variable. Unfortunately if we were to say bodyClasses = the result of this functionality here, what we would get is a number. It would look up to see how many entries there are in this array. And then, when we try to output body classes you would end up with this code saying bodyClass = three. So, we don't want that, we just have a container variable, a placeholder to run the push method against, so we will save that and compile it. And what we should see is that the extraclass, this class name here, has been added to our body classes array and applied to our body element. So we'll save that. And there we go, there's our extra class. So you'll be able to use that any time you need to add more class name or individual class names on a page by page basis. Now should you need to add a second individual class name to this page, just create a comma and add another value. And there's our additional class. So this push method, that's straight out of JavaScript, there isn't a special Jade way of doing this, it's just your basic JavaScript push method. Let's have a look at another example of how you can use JavaScript processes in a similar way. So in our config file, we already have our GoogleFonts variable. And we're loading in a font called Wellfleet. And we are using that by sticking it on the end of the standard GoogleFonts URL. So what if there is one or two extra GoogleFonts that you want to use but only on a single page? Well that's where you can use JavaScripts concatenation method, or concat for short. And we can do it like this. So we're using JavaScript concatenation method, Concat to add this string here on to the end of the GoogleFonts variable that we already have. So it will take Wellfleet and it will attach this pipe symbol and this extra font name onto the end of it. So that means that on this page alone, you'll be able to load both the default Google Font and this extra Google Font. Now if I save that, you'll see that will turn up on the end of this URL here. There you go. Now if I just add a little HTML that uses, or a little Jade, rather, that uses that font. Now you'll see that the extra font is available in the file. If we hadn't done that, That would not be available for formatting in the file, but because we have used JavaScript to add that extra font, now it's available for this file. Now we could also use this same technique to adjust the page title, and the actual article title here. So, right now we have our page title in our head title section as Learn Jade, and that is coming from our config file, so what if rather than completely replacing Learn Jade as the title, we want to add something to it? So let's say we wanna have a article title here and we wanna add that to the end of the overall document title at the top. Let's have a look at how we could do that. Now the first we're gonna do is create a new variable to hold the title for this individual page. And that is going to be this page as the variable name. And we're giving it this text as its value. And now, we're going to use this variable here in our h1 element. So it will replace this text here. So we'll paste that variable name in. And now we have a new title here. And now we want to attach this to this. And here's how we can do it. We're going to override our original page title variable by taking the original page title and concatenating it with a pipe symbol to create a separator and the content of, our this page variable. So let's see the effect. Now you can see we have our original default page title with the pipe symbol and the h1 title that we have on the page here, added on to the end. So that's a very handy way that you can adjust some of the variables that you have in your config file without completely overriding them. You can add to them and then reuse them in the site. So another thing that you can do with JavaScript processes and apply them to Jade is you can perform some mathematics. To illustrate, we have a variable named start number, or start_num and we have given it a value with quite a few decimal places. And, we're going to show the current value of this variable in our HTML. Then we're going to use a little bit of JavaScript to round down that number. So we're gonna use Math.floor. And that will round down our original start_num variable. And then we'll display the value of the new variable in the HTML at the bottom. So let's see that work. So there we go. There's our original number with the decimal places and then there's our rounded down number. So, you can use all the different math functions that are available in JavaScript. Perhaps not all necessarily, but certainly very many of them. And this is wonderful, because it means that when you want to do the type of things that we have just looked at, when you want to concatenate strings, create arrays, push values into those arrays, perform mathematics, and all of these types of things, you don't have to go and look at the Jade specific way of doing those things. All you have to do is have a look at any given reference for how to use JavaScript. And then you'll have all the information that you need in order to proceed. In the next and final lesson of the course, we're going to look at how you can use Jade mix ins. Mix ins are reusable blocks of code that you can write once and then deploy as many times as you need. So we'll be creating a nav menu mix in, and we'll also be learning how to use Jade's iteration functionality. I'll see you in the next lesson.