when and where to put javascript in html

Question

I am new to Java script. I am practicing code.When i put my code in the head section, then i get element null, and when i put it inside body, but before element, then i also get null, but if i put it inside body, but after element then i get the element. I want to ask why i am getting null in case of the first two cases. Here is my code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="js/attributes.js"></script>   // null

    </head>
    <body>

        <script type="text/javascript" src="js/attributes.js"></script>  // null
        <a id="braingialink"
           onclick="return showAttributes();"
           href="http://www.braingia.org" >Steve Suehring's Web Site
        </a>

        <script type="text/javascript" src="js/attributes.js"></script>   // ok

</body>

Here is my javascript

var a1 = document.getElementById("braingialink");     //get null in first two cases
window.alert(a1.getAttribute("href"));
a1.setAttribute("href", "www.google.com");
window.alert(a1.getAttribute("href"));

function showAttributes() {

    var e = document.getElementById("braingialink");
    var elementList = "";

    for (var element in e) {

        /**
         * Sometimes, especially when first programming with JavaScript, you might not know what
         * attributes are available for a given element. But you don’t have to worry about that, because
         * of a loop that calls the getAttribute() method.
         */
        var attrib = e.getAttribute(element);
        elementList = elementList + element + ": " + attrib + "\n";

    } //end of for()

    alert(elementList);

} //end of function showAttributes

And also tell me, placing <script type="text/javascript" src="js/attributes.js"></script>

after the a element, is the same as i write script in the script tag , like

<a href="http://www.braingia.org" id="braingialink">Steve Suehring's Web Site</a>
<script type="text/javascript">
    var a1 = document.getElementById("braingialink");
    alert(a1.getAttribute("href"));
    a1.setAttribute("href","http://www.microsoft.com");
    alert(a1.getAttribute("href"));
</script>

Are both things mean to same?

Thanks

nnnnnn nnnnnn · Accepted Answer · 2012-02-09T10:37:36

The browser parses the document from top to bottom, and if it encounters a <script> block (whether inline script or inclusion of an external JS file) it runs that JavaScript before parsing any more of the document. If that particular code block tries to refer to any elements it can only access the ones above it in the source, i.e., the ones already parsed.

The document.getElementById() method returns null if no element is found for the id you supply, so if you try to use it to access elements below it in the source they've not yet been parsed and can't be found.

The two most common practices to deal with this are:

Put all of your script at the bottom of the <body> such that when it runs all of the elements will have been parsed.
Create an "onload" handler, that is, define a function that will be run as soon as the document finishes loading. You can do this from a script block in the <head> - the JavaScript that defines the onload function is run immediately, but then the function is executed later after everything has loaded.

Following is the simplest way to do option 2:

window.onload = function() {
   var x = document.getElementById("x");
   // other element manipulation here
};

There is nothing stopping you doing 1 and 2 in the same document, along with throwing some <script> blocks in the middle of the document, but most people find it neater to keep all their code in the one spot.

when and where to put javascript in html

7 Answers