Tutorials References Exercises Videos Menu
Free Website Get Certified Upgrade

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:

myworld
    manage.py
    myworld/
    members/
        templates/
        static/

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

myworld
    manage.py
    myworld/
    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 »

Note: For some reason, make sure that DEBUG = True in the settings.py file.