Search code examples
javascriptinclusion

Strange behaviour with Javascript inclusion

Hi I'm experiencing some problems including a javascript file in my html project. When I include it like this at the end right before the body tag my site does not work correctly.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    </body>

If, however i delete the tag at the end to make it look like this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"/>
</body>

everything works fine.

And if i include it within the head, it also works, independent of the syntax. Why does it behave like this?

Solution
    1. Do what everybody else has said, regarding the <script src="..."></script>
    2. Use just src="//...", instead of src="https://..." or on non-encrypted pages (http vs https) your visitors will get security warnings for mixing the two protocols
    3. If you have written jQuery code anywhere on the page, prior to actually including the file, you're going to get reference errors, where JS will not be able to find the function ($) you're trying to use.

    There is a debugger available if you use Chrome, and press CTRL+SHIFT+J : it will take you to the developer-console, where I'm sure you're going to see all kinds of reference errors.

    In Firefox, it would be CTRL+SHIFT+K, in IE it's F12.

    This works under the same premise as writing in other languages where you try to use libraries or other classes, but don't actually import them until the bottom of your program.