Converting inline Javascript to external

Question 1

Added to the <head> of the HTML:

<script src="myJSFile.js"></script>

In the external JavaScript file (per my example, "myJSFile.js"):

window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('versionHidden').addEventListener('mouseover', function () {
       document.getElementById('hiddenVersion').style.display= 'block';
    }, false);

    document.getElementById('versionHidden').addEventListener('mouseout', function () {
      document.getElementById('hiddenVersion').style.display = 'none';
    }, false);
}, false);

The advantage of doing this is that you don't need anything inline and can therefore have full control of the behaviors in your web app without needing to mess with the document structure.

And we add code to wait for the DOMContentLoaded event when we put our script tag in the head (as opposed to the bottom of the page) because there is no "versionHidden" element at the time the browser renders the script tag if the script tag is before the "versionHidden" element, so document.getElementById('versionHidden') would be null if we didn't wait for the DOMContentLoaded event.

Putting a script tag at the end of the document avoids the need for DOMContentLoaded, and is recommended by Yahoo for performance (as the browser doesn't block loading and rendering the rest of your page content while the script is running), but 1) You may not want the page visible until the script is loaded, and 2) Some purists (like myself) feel that scripts are not really a part of the document, so should not, for conceptual as opposed to practical reasons, be put in the body but in the head.

Note that the code above requires a modern browser to work; to support older browsers, consider using jQuery.

Note however that the above code won't be very useful since using display none will mean the element is removed entirely, so there is nothing to mouseover!

You will probably want to use this instead:

window.addEventListener('DOMContentLoaded', function () {
    document.getElementById('versionHidden').addEventListener('mouseover', function () {
       document.getElementById('hiddenVersion').style.visibility = 'visible';
    }, false);

    document.getElementById('versionHidden').addEventListener('mouseout', function () {
      document.getElementById('hiddenVersion').style.visibility = 'hidden';
    }, false);
}, false);

...and change your HTML element to:

<div id="hiddenVersion" style="visibility: hidden">

This reserves the space for the item, but just makes it hidden.

Question 2

Wrap your mouse events in a function in an external .js file...

function mouse(d) {
    document.getElementById('hiddenVersion').style.display = d;
}

Then on your versionHidden element...

<div id="versionHidden" onmouseover="mouse('block');" onmouseout="mouse('none');">

Question 3

There is no JS file in the head of the code you posted. To properly link a JS file do it like this:

<head>
    <script type="text/javascript" src="myscript.js"></script>
</head>

More info here: http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml