DOM & JavaScript - When is the right time to source a JavaScript file?

Question

I'm working on a simple page that uses only <canvas> within the <body> of the page. All of the content is to be loaded through javascript. I am having trouble with using the document in my javascript and I was wondering if anyone could point me in the right direction of using <script> tags. Here is my main question:

What is the appropriate placement of <script> for a function loaded with window.onload

Here is the code I am working with:

index.html
----
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="window.js" type="text/javascript"></script>
    </head>
    <body>
        <canvas>Canvas is not supported by your browser!</canvas>
    </body>

window.js
----
Window = function(doc, win)
{
    this.doc = doc;
    this.win = win;

    this.initialize();
}

Window.prototype = 
{
    initialize: function()
    {
        this.doc.documentElement.style.overflow = 'hidden';
        this.doc.body.scroll = "no";

        this.resize();
        this.win.addEventListener('resize', this.resize.bind(this));
    },
    resize: function()
    {
        _canvas = this.doc.querySelector('canvas');
        _canvas.width = this.win.innerWidth;
        _canvas.height = this.win.innerHeight;

    }
};

window.onload = new Window(document, window);

In all the tests of this script I have run, the only instance where it works is when the <script> is placed after the initial <body> tag. When I place the <script> in the <head> it gives me an error saying:

Uncaught TypeError: Cannot set property 'value' of null

Is it not a possibility for the sake of a clean looking document to have <script> be in the <head>?

Any clarification or direction on what the proper practice is would be greatly appreciated!

Scripts should always be loaded in the . What you are experiencing is likely due to your script running before the entire page had rendered. — Diodeus - James MacFarlane, Jan 24 '14 at 16:42
@Diodeus that is not right! Mainly its regardless where scripts are included. The fastest execution is when there at the end of the `body` tag. — dersvenhesse, Jan 24 '14 at 16:45
Read this answer for some more info on script placement: http://stackoverflow.com/a/4396937/1310604 — RyanS, Jan 24 '14 at 16:47
Similar question: http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file — Hannan Hossain, Jan 24 '14 at 16:48

score 2 · Accepted Answer · answered Jan 24 '14 at 16:42

2

Script tags should go at the bottom of the page typically. This ensures all content has loaded and is ready for interaction...

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <canvas>Canvas is not supported by your browser!</canvas>

        <script src="window.js" type="text/javascript"></script>
    </body>
</html>

answered Jan 24 '14 at 16:42

xspydr

3,030
3
31
49

Is there any documentation to back this up as a standard part of the DOM? – Ambiguities Jan 24 '14 at 16:48
here's a related article that backs me up... http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup – xspydr Jan 24 '14 at 16:57
The problem, as I noted in my answer, is that there's no way to guarantee the element is loaded by the time your JS fires. You have to reference it after it's loaded into the DOM and while the bottom of the page it more likely to be just such a spot, there are times when it's not. – Machavity Jan 24 '14 at 17:09
That's why I mentioned in my answer "Script tags should go at the bottom of the page -->typically<--." In the scenario @Ambiguities has it should go at the bottom. – xspydr Jan 24 '14 at 17:16
Your post says `This ensures all content has loaded and is ready for interaction`, which is incorrect. It would be more accurate to say most, not all. – Machavity Jan 24 '14 at 17:18

Machavity · Answer 2 · 2014-01-24T17:21:43.167

0

It really doesn't matter where your JS files are loaded. Your problem is that the JS files could possibly load before your DOM is fully drawn. I've had pages where JS at the bottom of the page was executing before the browser was done loading the middle. That's why every JS framework contains something to check if the DOM is ready or not. in jQuery you would use ready

$(document).ready(function() { alert('My DOM is loaded!'); });

Outside of jQuery, you could use DOMContentLoaded. Put this at the bottom of your window.js file and you can load it in your header without issue.

document.addEventListener("DOMContentLoaded", function(event) {
    new Window(document, window);
});

edited Jan 24 '14 at 17:21

answered Jan 24 '14 at 16:55

Machavity

30,841
27
92
100

Shorter, but equivalent, syntax: `$(function() { alert('My DOM is loaded!'); });` – Kevin Babcock Jan 24 '14 at 17:01
... or even `window.onload = function(){new Window(document, window);`} – user123444555621 Jan 24 '14 at 18:26

score 0 · Answer 3 · answered Jan 24 '14 at 16:59

If you don't put the script in after the element, as far as your script is concerned, that element does not exist. It needs to be in the bottom, or at least after the canvas element.

In your case, it should be in the bottom, after the <canvas> element.

DOM & JavaScript - When is the right time to source a JavaScript file?

3 Answers3