4.1 Writing Inline JavaScript or Including External JavaScript

Hi, and welcome back to Top Speed HTML Development with Jade. In this lesson you're going to learn how to start incorporating JavaScript into your Jade files, and you'll learn two ways that you can do this. The first is by writing JavaScript inline inside your Jade document, and the other is to include JavaScript from an external site, but have it still compile to become part of your eventual HTML document. We're going to start with learning how to write JavaScript inline, so you don't have to do anything outside of your Jade file for this process. All you need is just one little trick. And you learned in the last lesson that we have the ability, using our config setup, to determine whether or not jQuery loads. Now, in this case, we don't have jQuery loading on this page, and we are using a little code block here to show that there is no jQuery. And currently, it looks like this. Do we have jQuery? Nope, no jQuery. And what we're going to do is write a little bit of inline JavaScript that will check for the presence of jQuery, and if it's found, it will replace the contents of this little block here. Its very, very simple to write JavaScript inline inside any Jade file. As with other HTML elements, you start by just writing out the actual element that you want to have, which is, in this case, the script tag. So just to show you the first part of the process, we'll save and compile that, and now you can see we have our opening and closing script tags. Now we want to include a little JavaScript inside there, and all we have to do is just add a dot at the end of that script tag. And then that will let the system know that the code that's nested after that dot is JavaScript, and should just be treated as JavaScript. So, I'll just copy and paste in a little code. So, this is our JavaScript. We are checking for the presence of jQuery, and if jQuery is available, we will replace the contents of the message here. So, we will change this to true, so we are loading JavaScript, and we'll save and compile. And now you can see we have our JavaScript inline in our HTML file. Now, if we head over to our live site, there we have it. The JavaScripts running successfully, it's checked for the presence of jQuery, and it has replaced the contents of this box with the appropriate message. So, anytime you need to write JavaScript inline in a Jade file, just remember that you add your script element to create your opening and closing script tags, and then you follow it by a dot. And after that you're fine to go ahead and just start writing your JavaScript inline. Sometimes though, you might be using JavaScript that is a little too large, or a little too long, to be writing it directly inside your Jade files, so you might want to pull in a external JavaScript file. For example, this is a little bit of code that I use often to help ensure that iFrame code like YouTube videos and what have you will always respond well with different size windows. It's not large enough that I want to keep it out as a separate JavaScript file. I do want it inline in the HTML document, but it's that little bit too large for me to want to actually write it inline inside the Jade file. So to have all of this code drawn in, and placed inside the HTML file, it's almost the same technique. We still need our script element to house the JavaScript, however, this time we're going to use include. So, write out include keyword, and then all you need, assuming that your file is in the same folder as the Jade file you're working on, you just need to include the file name, which in this case is rspm-iframes.js. Now, if we save and compile, you can see that the JavaScript from our external file has been included, and it's been written directly into the HTML file. Now, for some reason right now, this does not compile if I wrap it with talking marks. At the moment it needs to be written without talking marks, and that may just be a quirk of compilation. But if you find that you do get a compilation error, try using with or without talking marks right there. So, those are the two ways that you can include JavaScript into your Jade files. Again, it's all very, very easy. In the next lesson, you're going to learn how to incorporate other languages into your Jade files using language filters. And language filters will let you write markdown, CoffeeScript, stylelist, and languages like that, also directly inside your Jade files.