title: Using javascript (.js) in Google App Engine
body: <p>Using GAE, I am trying to call a text fade function from a separate .js file.</p>
  
  <p>The template and styling are both visible when running the app locally, but the JavaScript code will not run.</p>
  
  <p>Funny thing is: The HTML doc with styling and JS works fine when run in browser separately.</p>
  
  <p><strong>main.py:</strong></p>
  
  <pre><code>import webapp2
  import jinja2
  
  from google.appengine.ext import db
  from google.appengine.api import users
  from google.appengine.ext import ndb
  
  import os
  import urllib
  
  JINJA_ENVIRONMENT = jinja2.Environment(
      loader=jinja2.FileSystemLoader(os.path.dirname(__file__)),
      extensions=['jinja2.ext.autoescape'],
      autoescape=True)
  
  template = JINJA_ENVIRONMENT.get_template('/templates/Fade.html')
  
  class MainHandler(BaseHandler):
  
      def get(self):
      self.response.headers['Content-Type'] = 'text/html'
          self.response.write(template.render())
  
  app = webapp2.WSGIApplication([
      ('/', MainHandler),
      ('/login', LoginHandler),
      ('/logout', LogoutHandler),
      ("/(?:[a-zA-Z0-9_-]+/?)", PageHandler),
      ('/signup', SignupHandler)
  ], debug=True)
  </code></pre>
  
  <p><strong>Fade.html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Welcome!&lt;/title&gt;
  
  &lt;style type="text/css"&gt;     
      div.box1{
          position:absolute;
          top:30%;
          left:35%;
      }
  
      div.box2{
          position:absolute;
          top:45%;
          left:40%;
      }
  &lt;/style&gt;
  
  &lt;script type = "text/javascript" src="D:\Program\Google\Appengine Apps\myExample\static\js\Fade.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body onload="fadeDivs('div1', 'div2')"&gt;
  
  &lt;div id="div1" class="box1"&gt;text1&lt;/div&gt;
  &lt;div id="div2" class="box2"&gt;text2&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Fade.js</strong></p>
  
  <pre><code>var fade_in_from = 0;
  var fade_out_from = 10;
  
  function fadeIn(div){
  
  var target = document.getElementById(div);
  target.style.display = "block";
  var newSetting = fade_in_from / 50;
  target.style.opacity = newSetting;
  fade_in_from++;
  
  if(fade_in_from == 50){
      target.style.opacity = 1;
      clearTimeout(loopTimer);
      fade_in_from = 0;
      return false;
  }
  
  
  var loopTimer = setTimeout('fadeIn(\''+div+'\')',30);
  }
  
  function setOpacity(div){
  target = document.getElementById(div);
  target.style.opacity = 0;
  }
  
  function fadeDivs(div1, div2){
  setOpacity(div1);
  setOpacity(div2);
  
  fadeIn(div1);
  var time = setTimeout('fadeIn(\''+div2+'\')', 1500);
  }
  </code></pre>
  
  <p><strong>app.yaml:</strong></p>
  
  <pre><code>application: myExample
  version: 1
  runtime: python27
  api_version: 1
  threadsafe: yes
  
  handlers:
  - url: /favicon\.ico
    static_files: favicon.ico
    upload: favicon\.ico
  
  - url: /static/
    static_dir: static
  
  - url: /js
    static_dir: static/js
  
  - url: /images/thumbnails
    static_dir: static/images/thumbnails
  
  - url: .*
    script: main.app
  
  libraries:
  - name: webapp2
    version: "2.5.2"
  - name: jinja2
    version: "2.6"
  </code></pre>