title: Keeping javascript external - doesn't work
body: <p>When i keep my javascript/jquery external, my code doesn't work.  but when i combine them in my html file everything is fine.</p>
  
  <p>any suggestions as to why this is?</p>
  
  <p>here is the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
         &lt;script type ="text/javascript" src="jquery.js"&gt;&lt;/script&gt;  
         &lt;script type ="text/javascript" src="program.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="clickme"&gt;
      Click here
      &lt;/div&gt;
  
      &lt;img id="book" src="book.png" alt="" width="100" height="123" /&gt;
  
      &lt;p&gt;First Paragraph&lt;/p&gt;
      &lt;p&gt;Second Paragraph&lt;/p&gt;
      &lt;p&gt;Yet one more Paragraph&lt;/p&gt;
  
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>with external javascript</p>
  
  <pre><code>$('#clickme').click(function() {
    $('#book').fadeOut('slow', function() {
      // Animation complete.
    });
  });
  $("p").click(function () {
       $(this).slideUp();
     });
  </code></pre>
  
  <p>VERSUS</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script type ="text/javascript" src="jquery.js"&gt;&lt;/script&gt;  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="clickme"&gt;
          Click here
      &lt;/div&gt;
      &lt;img id="book" src="book.png" alt="" width="100" height="123" /&gt;
  
      &lt;p&gt;First Paragraph&lt;/p&gt;
      &lt;p&gt;Second Paragraph&lt;/p&gt;  
      &lt;p&gt;Yet one more Paragraph&lt;/p&gt;
  
  
      &lt;script&gt;
          $('#clickme').click(function() {
        $('#book').fadeOut('slow', function() {
       // Animation complete.
       });
       });
  
      $("p").click(function () {
      $(this).slideUp();
       });
  
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>