Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript Basics (Retired) Introducing JavaScript Where Does JavaScript Go?

Uche Onuekwusi
Uche Onuekwusi
17,817 Points

where is the best place for the link to the javascript file to placed. Is it in the head or body element

Linking JavaScript files

3 Answers

Steven Parker
Steven Parker
229,670 Points

Normally, you'd place your script links as the last things in the body element. This way, any elements the script might depend on have already been added to the page.

One possible exception might be scripts that only run when the page load event occurs might be linked in the head area. This is also done sometimes when loading library modules that have no code that depends on page elements.

I Dilate
I Dilate
3,983 Points

Hi again Uche,

These guys are right for most scenarios - but the real answer is that it depends what you want it to do!

There's a logic you need to follow...

Everything in your HTML file is loaded by a web browser in the order it's found on the page. So if you stick something at the top of your HTML code, it'll load first. If you move it to the bottom, it'll load last. If you switch element A for element B, then element B will load first... hopefully you get my point?

Often we want to use JavaScript to create a layer of interactivity on a web page. In that case, you need to be able to refer to elements that exist on the page already, and then do something with them.

An example would be to turn a button red when you click on it perhaps - in JavaScript you'd need to search the page for that item using getElementById() or querySelector() and then apply the red styling to it after monitoring for a click event... you'll learn about all that in later lessons.

However, in the lesson you've just completed, I believe it does explain that if you want to refer to elements already loaded on a page, you need to insert your <script src="something.js"></script> tags after that content is loaded.

For the purposes of all the Javascript for Beginners lessons, you can stick with inserting them at the end of your HTML file, just before the closing </body> tag.

Does that clear it up?

Good luck my friend, Rich

I think at some point in this course the teacher mentions that he prefers to link JS before the closing body tag. It allows for the html to load before the JS runs (without needing to do anything extra). I agree.

Let me know if this helps here