Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 1e6b75b407
Fetching contributors…

Cannot retrieve contributors at this time

82 lines (59 sloc) 3.177 kb
chapter section title attribution github
javascript-101
1
Running Code
jQuery Fundamentals
jquery

External

The first and recommended option is to write our code in an external file (with a ".js" extension), which can then be included on our web page using a HTML script tag and pointing the "src" attribute to our file's location. Having our JavaScript in it's own file will reduce code duplication if we wish to reuse it on other pages and will allow the browser to cache the file on the remote client's computer, decreasing our page load time.

alert('Hello World!');

Inline

The second option is to inline the code directly on the web page. This is also achieved using HTML script tags but instead of pointing the "src" attribute to a file, we place the code between the tags. While there are use cases for this option, the majority of the time it is best to keep our code in an external file as described above.

Attributes

The last and strongly discouraged option, is to utilize the event handler attributes of HTML attributes.

Click Me! Click Me Too!

Placement

Placement of the previous two options is important and can vary depending on the situation. If we are including some JavaScript which does not access the elements on the page, we can safely place the script before the closing HTML head tag. However, if the code will interact with the elements on the page, we have to make sure those elements exists at the time of our script's execution. A common pitfall can be seen in the following example where we attempt to find the element with an ID of "hello-world", the problem here is our script will be executed prior to the element being defined within the document.

<!DOCTYPE html>

Hello World

It is a common pattern to just move our scripts to the bottom of the page, prior to the closing HTML body tag. This will guarentee the defination of any element we may need when our script is executed.

<!DOCTYPE html>

Hello World

Jump to Line
Something went wrong with that request. Please try again.