Document.ready

Objectives

• Set up a call to document.ready()

• Explain why document.ready is important

Introduction

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

Separating and Linking Code

This lesson doesn't render as a lab, but there are files within this repository you'll need to use. 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. We used to import our scripts in the 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 tags before it attempts to render the page. Once the browser gets to , it starts to load things in order (synchronously).

When that's just painting tags with the appropriate styles, the browser simply hums along; but when it encounters a