- Set up a call to
document.ready() - Explain why
document.readyis important
We don't ever want to write our JavaScript and jQuery inside our HTML files. For the same reasons that we want to separate out our CSS from our HTML, we want to separate out our JavaScript from our HTML, too.
But so far we've written our JavaScript code at the bottom of our HTML <body> so that the code would run once the page loads. How can we run our code when it's in a totally different file? We need to guarantee that the HTML document is loaded before our other files are triggered.
This lesson doesn't render as a lab, but there are files within this repository you'll need to code along. Click on the Github icon in Learn, and fork and clone this repository.
If you take a look at index.html, you'll notice we have jQuery-flavored JavaScript code written at the bottom. Our goal is to refactor this site to move that code out into script.js
The first thing we need to do is load script.js in index.html. In the olden days (the 1990s and 2000s), we used to import our scripts in the <head> of our HTML documents. As our applications grew more interactive, our JavaScript files grew larger and our pages took longer to load. This was because the browser loads everything in between the <head> tags before it attempts to render the page. Once the browser gets to <body>, it starts to load things in order (synchronously).
When that's just painting tags with the appropriate styles, the browser simply chugs along; but when it encounters a <script> tag, it either needs to evaluate the script or else make a request to the location specified in the <script> tag's src attribute. These requests take time, so nowadays, we put all of our <script> tags at the bottom of <body>, below all of the static HTML content. Go ahead and add a <script> tag for "script.js" at the bottom of <body>:
<script src="script.js"></script>Now that our HTML file can find our JavaScript File, let's remove the code between the script tags from the bottom of our HTML file and move it to script.js.
In this simple example, you should already see "this is so freaking cool." appended to div#text. But normally, it's not safe to execute JavaScript code until the browser tells us it's ready.
Thankfully, the browser has a built-in way to determine when a page is loaded. You'll be coding along in index.html and script.js.
In script.js, we need to set up a document ready in order to detect when our HTML page has loaded, and the document is ready to be manipulated:
$(document).ready(function() {
// code to be executed goes here
});The $ is a shortcut for jQuery, and provides an interface to the library. Every time you see $, think jQuery.
Once the load event fires (which we've told jQuery to listen for with $(document).ready()), the rest of the code will fire. Place the document ready around the jQuery already in script.js. Save your changes, and refresh in the browser. You should see the text appear in the browser!
View Document Ready on Learn.co and start learning to code for free.
View Document Ready on Learn.co and start learning to code for free.