Start Here! Learn JavaScript - Cdn.oreilly.com

placing JavaScript in a Webpage
The overall title for this section is “Where JavaScript Fits,” but so far I’ve discussed only the conceptual
environment in which JavaScript operates. It’s time to fix that by discussing the literal location for
JavaScript code on a webpage.
Just as you need to use an HTML tag to inform the browser it should expect an image, you
use the tag to inform the browser it will be reading a script of some sort. There are a few different
kinds or types of scripts web browsers can read; JavaScript is one of them.
You place JavaScript within the or section (or both) of an HTML document and
you can place multiple scripts on a given page.
The browser executes JavaScript as it is encountered during the page-parsing process. This has
practical implications for JavaScript developers. If your JavaScript program attempts to work with
some elements of the HTML document before those elements have been loaded, the program will
fail. For example, if you place JavaScript in the section of a page and that code attempts to
work with an HTML element that’s all the way down at the bottom of the page, the program might
fail because the browser doesn’t yet have that element fully loaded. Unfortunately, the program will
probably fail in subtle and difficult to troubleshoot ways; one time the program will work, and the
next time it won’t. That happens because one time the browser will have loaded that HTML element
by the time it executes the JavaScript code, but the next time it won’t. An even more fun (not really)
failure scenario is when everything works in your local development environment on your computer
but fails when deployed in real-world (and real slow network) conditions. One especially good
method for solving this problem is with the jQuery ready() function, as you’ll see later.
The basis of JavaScript’s close coupling with a webpage is through the Document Object Model
(DOM). Just as your perception of the elements on the page comes through a text editor or Visual
Studio, the DOM represents the programmatic or browser view of the elements on a page. Much of
what you do as a JavaScript programmer is work with the DOM. Unfortunately, the DOM works in
slightly different ways depending on the web browser being used to render the page. Of course, if
you’ve done any HTML and CSS work, you’re already familiar with the different and nuanced ways
in which browsers render pages. The same is true for JavaScript. You’ll spend a nontrivial amount of
time either writing for various browsers or troubleshooting why something isn’t working in a given
browser.
For anything but the most basic scripts, you should use external JavaScript files. This has the advantage
of providing reusability, ease of programming, and separation of HTML from programming
logic. When using an external script (which is how most of this book’s examples will be constructed
in later chapters), you use the src attribute of the tag to point the browser at a particular
Java Script file, in much the same way you use the src attribute of an tag to specify the location
of an image in an HTML page. You’ll see how to specify external scripts in more detail later in this
chapter, but here’s an example:
CHAPTER 1 What Is JavaScript? 9