title: Where to put all that jQuery JavaScript code?
body: <p>From the documentation I've found this example:</p>
  
  <blockquote>
    <p>We can animate any element, such as a simple image:</p>
  
  <pre><code>&lt;div id="clickme"&gt;
    Click here
  &lt;/div&gt;
  &lt;img id="book" src="book.png" alt="" width="100" height="123" /&gt;
  </code></pre>
    
    <p>With the element initially shown, we can hide it slowly:</p>
  
  <pre><code>$('#clickme').click(function() {
    $('#book').fadeOut('slow', function() {
      // Animation complete.
    });
  });
  </code></pre>
  </blockquote>
  
  <p>I remember from 5 years ago, that you should NEVER ever refer to any element until it was defined. Does this rule still apply? So I would have to put all that code in the footer of my web page? Or can I put it in a separate file and import it in the footer? What's best practice?</p>