when and where to put javascript in html
<p>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</p>

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

        &lt;script type="text/javascript" src="js/attributes.js"&gt;&lt;/script&gt;   // null

    &lt;/head&gt;
    &lt;body&gt;

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

        &lt;script type="text/javascript" src="js/attributes.js"&gt;&lt;/script&gt;   // ok

&lt;/body&gt;
</code></pre>

<p></p>

<p>Here is my javascript</p>

<pre><code>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
</code></pre>

<p>And also tell me, placing <code>&lt;script type="text/javascript" src="js/attributes.js"&gt;&lt;/script&gt;</code></p>

<p>after the <strong>a</strong> element, is the same as i write script in the script tag , like</p>

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

<p>Are both things mean to same?</p>

<p>Thanks</p>
