title: Why my javascript isn't working?
body: <p>I have this working code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Bandom&lt;/title&gt;
      &lt;script src="jquery-latest.js"&gt;&lt;/script&gt;
      &lt;link href="bandom.css" rel="stylesheet" type="text/css" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;textarea maxlength="50" id="field1"&gt;&lt;/textarea&gt;
      &lt;div id="field2"&gt;&lt;/div&gt;
      &lt;script src="bandom.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>But when I call my <code>.js</code> file in the beginning in the head tag, javascript is not working. Why?</p>
  
  <p>All my javascript do, is counting symbols.</p>
  
  <pre><code>$('#field1').keyup(function () {
      var left = 50 - $(this).val().length;
      $('#field2').text('Characters left: ' + left);
  });
  </code></pre>
  
  <p>I had like plenty of projects, in some the position of javascript doesn't matter, but in some it does. Can anyone explain this to me.</p>