title: including a .js file in another .js file
body: <p>I see a lot of articles in Stackoverflow about including one .js file in another, but I'm no wiser after having read them. Some point to requireJS and some to using jQuery, but it seems the jQuery solution is like the chicken and the egg in that I need to include jQuery in order to use it!!</p>
  
  <p>Thus, let's say I want to include sql-debug.js in my own sql reader .js file:</p>
  
  <pre><code>// my_sql.js reader
  var sql = require('../sql/sql-debug.js');
  //...
  </code></pre>
  
  <p>My js code is client code in that it is to be loaded by a browser and code dump all of my js code into the same .html file and use . However, I'd like to place it in appropriately named files.</p>
  
  <p>I read a while back that Javascript is the most used language, and yet the designers never thought of a simple way to include another Javascript file!!</p>
  
  <p>If anyone could provide a working solution to the above simple task it would be much appreciated.</p>
  
  <p><strong><em>UPDATE</em></strong></p>
  
  <p>Having looked at the cited answers I still don't get it. Let's say I have the following files all in the same directory: test.html [main html], test_loading.js [copy&amp;paste of code from cited sources] and apple.js [a simple js class] as follows:</p>
  
  <p><strong><em>test.html</em></strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Basic skeleton&lt;/title&gt;
      &lt;script type="text/javascript" src="jquery-1.9.0.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="test_loading.js"&gt;&lt;/script&gt;
      &lt;style&gt;
          body{
              /* set margin to 0 and overflow to hidden, to
               use the complete page */
              margin: 0;
              overflow: hidden;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;!-- Div which will hold the Output --&gt;
  &lt;div id="WebGL-output"&gt;
  &lt;/div&gt;
  
  &lt;!-- Javascript code that runs our Three.js examples --&gt;
  &lt;script type="text/javascript"&gt;
  
      // once everything is loaded, we run our Three.js stuff.
      $(function () {
            // here we'll put the Three.js stuff
      });
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong><em>test_loading.js</em></strong></p>
  
  <pre><code>$.getScript("apple.js", function(){
  
     alert("Script loaded but not necessarily executed.");
  
  });
  </code></pre>
  
  <p><strong><em>apple.js</em></strong></p>
  
  <pre><code>class Apple {
  
  }
  </code></pre>
  
  <p>Tell me why this doesn't work.</p>