CODEWITHSUNDEEP
javascriptjquery
euri10
euri10

Reputation: 2626

is there a difference between putting a javascript in the head or in the body?

I'm very new to javascript and can't figure if there is a difference between those 2 pieces of code using a "selectize" input.

both work but I can't figure if one is better or if they are truly the same. which one is preferable, if any ? are there "rules" or best-practice as to where put javascripts in the html document ?

apologies if this is very trivial :)

tl;dr

1st code has the $('#location').selectize({ .... }) inside the <body> tag

2nd code has the same $('#location').selectize({ .... }) but in the <head> tag and enclosed in

$(document).ready(function () { $('#location').selectize({ .... }) )}

<html lang="en">
<head>
    <title>title</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css"
          rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
</head>
<body>
<form role="form" class="form-vertical" method="POST" action="/profile">
    <div class="form-group">
        <label for="location">location</label>


        <input type="text" value="Lorien, 58120 Corancy, France" placeholder="" name="location"
               id="location" class="form-control selectized" tabindex="-1" style="display: none;">

        <div class="selectize-control form-control single">
            <div class="selectize-input items full has-options has-items">
                <div class="item" data-value="Lorien, 58120 Corancy, France">Lorien, 58120 Corancy,
                    France
                </div>
                <input type="text" autocomplete="off" tabindex="" style="width: 4px;"></div>
            <div class="selectize-dropdown single form-control" style="display: none;">
                <div class="selectize-dropdown-content"></div>
            </div>
        </div>
        <input type="submit" value="Update" name="submit" id="submit">
    </div>
</form>
<script>
    $('#location').selectize({
        valueField: 'formatted_address',
        labelField: 'formatted_address',
        searchField: 'formatted_address',
        maxItems: 1,
        delimiter: ';',
        create: false,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: "googleloc",
                type: 'GET',
                dataType: 'json',
                data: {
                    search: query,
                },
                error: function () {
                    callback();
                },
                success: function (res) {
                    callback(res.results);
                    googresults = res.results;
                }
            });
        },
        onChange: function (value) {
            if (!value.length) return;
            for (var key in googresults) {
                if (googresults[key].formatted_address == value) {
                    var lat = googresults[key].geometry.location.lat;
                    var lng = googresults[key].geometry.location.lng;
                    for (var component in googresults[key].address_components) {
                        if (googresults[key].address_components[component].types[0] == "country") {
                            var cc = googresults[key].address_components[component].short_name;
                        }
                    }
                }
            }
            $('#latitude').val(lat);
            $('#longitude').val(lng);
            $('#country_code').val(cc);
        }
    });
</script>
</body>
</html>

and version 2 which has the selectized item in the head

<html lang="en">
<head>
    <title>title</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css"
          rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
    <script>
    $(document).ready(function () {
    $('#location').selectize({
        valueField: 'formatted_address',
        labelField: 'formatted_address',
        searchField: 'formatted_address',
        maxItems: 1,
        delimiter: ';',
        create: false,
        load: function (query, callback) {
            if (!query.length) return callback();
            $.ajax({
                url: "googleloc",
                type: 'GET',
                dataType: 'json',
                data: {
                    search: query,
                },
                error: function () {
                    callback();
                },
                success: function (res) {
                    callback(res.results);
                    googresults = res.results;
                }
            });
        },
        onChange: function (value) {
            if (!value.length) return;
            for (var key in googresults) {
                if (googresults[key].formatted_address == value) {
                    var lat = googresults[key].geometry.location.lat;
                    var lng = googresults[key].geometry.location.lng;
                    for (var component in googresults[key].address_components) {
                        if (googresults[key].address_components[component].types[0] == "country") {
                            var cc = googresults[key].address_components[component].short_name;
                        }
                    }
                }
            }
            $('#latitude').val(lat);
            $('#longitude').val(lng);
            $('#country_code').val(cc);
        }
    });
});
</script>
</head>
<body>
<form role="form" class="form-vertical" method="POST" action="/profile">
    <div class="form-group">
        <label for="location">location</label>


        <input type="text" value="Lorien, 58120 Corancy, France" placeholder="" name="location"
               id="location" class="form-control selectized" tabindex="-1" style="display: none;">

        <div class="selectize-control form-control single">
            <div class="selectize-input items full has-options has-items">
                <div class="item" data-value="Lorien, 58120 Corancy, France">Lorien, 58120 Corancy,
                    France
                </div>
                <input type="text" autocomplete="off" tabindex="" style="width: 4px;"></div>
            <div class="selectize-dropdown single form-control" style="display: none;">
                <div class="selectize-dropdown-content"></div>
            </div>
        </div>
        <input type="submit" value="Update" name="submit" id="submit">
    </div>
</form>
</body>
</html>

Upvotes: 1

Views: 2169

Answers (4)

Franco
Franco

Reputation: 2329

Well, in the beginning of the jQuery revolution this question was not very hot. jQuery on top and the script whenever you wished to.

With the explosive growth of the thousands plugins developed for any possible purpose, you see webpages with many of those plugins which has to be loaded.

Placing all of this stuff, which is not directly needed in order to display your site, in the <head> tag will slow down the time the site is loading, and this because too many requests has to be done in order to load the plugins.

So that sad is a common rule of thumb to place in the head just the 'css' and the 'js' needed to run your initial HTML and at the end of the page BEFORE the closing 'body' tag all the other scripts.

At the end of all of this you can have the additional script tag where some custom code can be placed e.g.

$(document).ready(function(){
    //stuff here
})

Upvotes: 2

Joe Thomas
Joe Thomas

Reputation: 6397

If you put JS in the head and don't have a listener to detect the DOM loading then you may not be able to manipulate DOM objects. It's usually best to keep scripts at the bottom of the body this will prevent any of those errors and allow you to add stuff to all DOM elements.

e.g. Putting the following script in the head will result in an error

<script>
   document.getElementById('myElement').setAttribute('data-myValue','myValue')
</script>

Upvotes: 1

klaemo
klaemo

Reputation: 179

It is always better to put javascript at the bottom just before </body>. That way it doesn't block rendering (good for performance). Also, at that point you know the DOM (the tree of HTML elements) is ready for you.

$(document).ready(function () {}) is jQuery's way of waiting until the DOM is ready. If you put your javascript in the <head> you have to use this technique, because obviously all the actual HTML you want to work with comes after it and needs to be parsed. The callback (the function passed to .ready()) gets called once the DOM is ready.

Upvotes: 3

neurocranium
neurocranium

Reputation: 75

You should put javascript code for fast page load. Browser render code top to bottom. If you put your javascript code to bottom, page elements will be loaded first and then load javascript codes.

Upvotes: 1

Related Questions