Unobtrusive JavaScript: <Script> at the Top or the Bottom of the HTML Code

Unobtrusive JavaScript: script at the top or the bottom of the HTML code?

There are two possibilities for truly unobtrusive scripts:

including an external script file via a script tag in the head section
including an external script file via a script tag at the bottom of the body (before </body></html>)

The second one can be faster as the original Yahoo research showed some browsers try to load script files when they hit the script tag and therefore don't load the rest of the page until they have finished. However, if your script has a 'ready' portion which must execute as soon as the DOM is ready you may need to have it in the head. Another issue is layout - if your script is going to change the page layout you want it loaded as early as possible so your page does not spend a long time redrawing itself in front of your users.

If the external script site is on another domain (like external widgets) it may be worth putting it at the bottom to avoid it delaying loading of the page.

And for any performance issues do your own benchmarks - what may be true at one time when a study is done might change with your own local setup or changes in browsers.

Load java Script at the end of page. why?

If you write javascript at the start of the page, than you'll not be able to access the DOM elements, directly.

However when you use it at bottom, all the elements will have been rendered and you can use them.

In the first case, you would need something like this:

window.onload = function(){
  document.getElementById('id');
}

But in the second case, you need just:

document.getElementById('id');

Also, if you have scripts at the start of the page, it will block the UI from rendering.

Does Javascript / JQuery code need to be below other HTML code?

It doesn't need to be, but it's recommended to be. Read this previously asked question.

What you should definitely do, is use jQuery's ready function to ensure the DOM has finished loading before attaching your events. For example:

$(function() {
    $("a#EditPageLink").click(function (e) {
        alert("f");
        e.preventDefault();
        $("#EditPageFrame").attr("src", $(this).attr("value"));
        $("a").removeClass("active");
        $(this).addClass("active");

        JQueryPopup('#EditPage');
    });
});

Doing that will attach the event correctly, regardless of where your script tag appears in the html.

Is it OK to put javascript code anywhere in HTML code?

Not only is it OK, it's actually better, since it lets the content come first.

If your viewers have a slow (eg, mobile) connection, it's better to send the actual content first, so that they can read it while the browser downloads the Javascript.

Migrate non function script from HTML to JS file

Include your script in the HTML with defer attribute. This will run the code when HTML is ready. You could place the script tag at the end before </body> as well, but I prefer having it on top.

<head>
   <script src="/myscript.js" defer>
</head>

in myscript.js

(function() {
   // your code goes here
})();

Wrapping this into a function gives your own scope and another wrap into parenthesis and () at the end will do the execution.

Is it bad practice to embed JavaScript into the body of HTML?

It's perfectly valid.

You wouldn't want to put great big blocks of code mixed up in the markup there (better to use external scripts), but it can be useful to:

add extra binding information for progressive-enhancement (where that data is difficult to fit into a classname or other approach to hiding extended information in attributes); or
where it's necessary to kick off a scripted enhancement as quickly as possible (rather than waiting for window-load/document-ready). An example of this would be autofocus, which can irritate if fired too late.

You may be thinking of <style> elements, which aren't allowed in <body> (although most browsers allow it nonetheless).

Difference between obtrusive and unobtrusive javascript

I don't endorse this anymore as it was valid in 2011 but perhaps not in 2018 and beyond.

Separation of concerns. Your HTML and CSS aren't tied into your JS code. Your JS code isn't inline to some HTML element. Your code doesn't have one big function (or non-function) for everything. You have short, succinct functions.

Modular.
This happens when you correctly separate concerns. Eg, Your awesome canvas animation doesn't need to know how vectors work in order to draw a box.

Don't kill the experience if they don't have JavaScript installed, or aren't running the most recent browsers-- do what you can to gracefully degrade experience.

Don't build mountains of useless code when you only need to do something small. People endlessly complicate their code by re-selecting DOM elements, goofing up semantic HTML and tossing numbered IDs in there, and other strange things that happen because they don't understand the document model or some other bit of technology-- so they rely on "magic" abstraction layers that slow everything down to garbage-speed and bring in mountains of overhead.

Unobtrusive JavaScript: <Script> at the Top or the Bottom of the HTML Code