Tutorials References Exercises Sign Up Menu
Create Website Get Certified Pro

Django Adding JS file


Add a Static JS File

Adding js files in Django project is done exactly the same way as adding css files in Django:

Static files, like css, js, and images, goes in the static folder. If you do not have one, create it in the same location as you created the templates folder:

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
        static/

Add a .js file in the static folder, name it myfirst.js:

my_tennis_club
    manage.py
    my_tennis_club/
    members/
        templates/
        static/
            myfirst.js

Open the JS file and insert the following:

members/static/myfirst.js:

function myFunction() {
  alert("Hello from a static file!");
}

Modify the Template

Now you have a js file, with a JavaScript function. The next step will be to include this file in a HTML template:

Open the HTML file and add the following:

{% load static %}
<script src="{% static 'myfirst.js' %}"></script>

And, add a button with a onclick event that triggers the function:

<button onclick="myFunction()">Click me!</button>

Restart the server for the changes to take effect:

py manage.py runserver

Example

members/templates/template.html:

{% load static %}
<!DOCTYPE html>
<html>
<script src="{% static 'myfirst.js' %}"></script>
<body>

<button onclick="myFunction()">Click me!</button>

</body>
</html>
Run Example »

Didn't Work?

Make sure that DEBUG = True in the settings.py file, otherwise the example will fail in development.

Set the DEBUG property to True:

my_tennis_club/settings.py:

.
.
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
.
.

Handling Static Files

When your website is in production, and open for everyone, static files are handled differently than they are in development.

You will learn how to deploy the website to production later in this tutorial, and you will learn how to handle static files in production then.