Where should I put my JavaScript code?

17,915

Solution 1

When to put script in HEAD

Scripts to be executed when they are called, or when an event is triggered, are placed in functions. Put your functions in the head section, this way they are all in one place, and they do not interfere with page content.

When to put script in BODY

If you don't want your script to be placed inside a function, or if your script should write page content, it should be placed in the body section.

So in your case. You can put the script in the body

Solution 2

You should probably put your code right at the end of the body tag.

Check out Steve Souder's High Performance Web Sites - Evolution of Script Loading

If you have multiple script includes and need to convince yourself that they will load in the correct order for you, check out WebSiteOptimization.com's Article on the Defer Attribute, where you can see the order your scripts execute.

Solution 3

Put it into external file and then link that file with HTML document using:

<head>
    ...
    <script type="text/javascript" src="/scripts/my-script.js"></script>
</head>

(if you're using HTML5 you can skip type attribute).

The above way is the most clear and common one, however some researches proves that it's not the fastest way. You could put that JavaScript right before </body> element, skipping jQuery.read() ($(function() { ... }); in this case, which is a short form of that). You'll gain some milliseconds (or even less) in that case, but I just feel forced to notice that.

17,915

Roman

Updated on May 15, 2022

Comments

Roman 15 minutes

I would like to use the code for the auto-complete. The code is here.

<script>
    $(function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#tags" ).autocomplete({
            source: availableTags
        });
    });
    </script>
<div class="demo">
<div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
</div>
</div><!-- End demo -->
<div class="demo-description" style="display: none; ">
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
</div><!-- End demo-description -->

However, I cannot figure out where I should put this code. In head? In body?

Pointy over 11 years

Just a hint: using w3schools as a reference around here will cause a lot of snickering and derision. It's not an authoritative source of information; it's just a random website with information of varying quality. In particular, this advice is just weird and not really comprehensive or even accurate.
qwertymk over 11 years

John Resig doens't like that way, and I'd be careful because he reads some of these post
Shervin Asgari over 11 years

Ok. So where do you suggest looking for the correct information? w3.org/TR/html4/interact/scripts.html doesn't specify best practice as far as I can see.
Pointy over 11 years

This is probably not the sort of thing that would ever show up in a real specification. It's a matter of keeping track of good blogs and of reading good answers at sites like Stackoverflow - JavaScript performance (and client-side optimization in general) is a very hot topic lately and "best practices" opinions evolve quickly.
Peter-Paul van Gemerden over 10 years

@Shervin Have a look at w3fools.com. It suggests a few very good alternate resources, such as MDC (which I can highly recommend).
Eric Rowell over 10 years

Agreed. It's good practice to declare JavaScript functions after the HTML so that the page appears to load faster. In other words, it's a good idea to load the view first (so the user can see the page) and then load functions declarations last.
Eric Rowell over 10 years

A nicely structured html page will be ordered like this: CSS at the top, HTML content in the middle, and JavaScript at the end