Add JavaScript File through Static Folder and Demonstrate Button Action
📌 Introduction
Django supports JavaScript via static files.
👉 We use JS to:
- Handle button clicks
- Show alerts
- Add interactivity
🎯 Program Statement
👉 Add a JavaScript file through static folder and demonstrate button action.
🧠 Concept
👉 Static folder can store:
- CSS
- JS
- Images
⚙️ Step 1: Static Folder Structure
📁 Project Structure:
myproject/
static/
js/
script.js
⚙️ Step 2: Create JavaScript File
📁 File: script.js
🔹 Path:
myproject/static/js/script.js
🔹 Code:
function showMessage() {
alert("Hello! Button Clicked Successfully.");
}
⚙️ Step 3: Create Template
📁 File: jsdemo.html
🔹 Path:
myproject/templates/jsdemo.html
🔹 Code:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
<!-- Link JS File -->
<script src="{% static 'js/script.js' %}"></script>
</head>
<body>
<h1>JavaScript Integration</h1>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
⚙️ Step 4: Create View
📁 File: views.py
🔹 Path:
myproject/myapp/views.py
🔹 Code:
from django.shortcuts import render
def js_demo(request):
return render(request, 'jsdemo.html')
⚙️ Step 5: URL Mapping
📁 File: urls.py
🔹 Path:
myproject/myproject/urls.py
🔹 Code:
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path('admin/', admin.site.urls),
path('js/', views.js_demo),
]
⚙️ Step 6: Run Server
python manage.py runserver
🌐 Step 7: Output
✅ Output:
- A button appears
- Clicking button → shows alert message
🧠 How It Works
- JS file stored in
static/js/ - Loaded using
{% static %} - Button calls JS function
- JS executes and shows alert
🔥 Key Concepts
Load Static
{% load static %}
Link JS
<script src="{% static 'js/script.js' %}"></script>
Button Action
<button onclick="showMessage()">
JS Function
function showMessage() {
alert("Hello!");
}
⚠️ Common Errors
❌ Forgot {% load static %}
👉 JS will not load
❌ Wrong path
❌ Wrong:
{% static 'script.js' %}
✅ Correct:
{% static 'js/script.js' %}
❌ Function not found
👉 Ensure:
function showMessage()
matches button:
onclick="showMessage()"
❌ JS file not in static folder
👉 Must be inside:
static/js/
🧪 Practice Questions
- Change button text dynamically
- Show current date using JS
- Create multiple buttons
- Validate input using JS
🎤 Viva Questions & Answers
1. What is JavaScript?
JavaScript is a scripting language used to make web pages interactive.
2. How do we add JS in Django?
By placing it in static folder and loading using {% static %}.
3. What is <script> tag?
It is used to include JavaScript in HTML.
4. What is event handling?
Responding to user actions like button clicks.
5. What is onclick?
It is an event that triggers when button is clicked.
6. What is function in JavaScript?
A block of code that performs a task when called.
7. Why use external JS file?
For better organization and reuse.
8. What happens if JS file is missing?
Function will not execute.
9. Can we use multiple JS files?
Yes, multiple files can be included.
10. Why is JS important?
It adds interactivity and improves user experience.
🔗 Navigation
👉 Next Post: Bootstrap Styled Responsive Page
👉 Back to List: Django Programs (60 Questions with Solutions)
Further Reading
Introduction to Django Framework and its Features
Examples of Array Functions in PHP
Registration Form Using PDO in PHP
Inserting Information from Multiple CheckBox Selection in a Database Table in PHP
- Angular
- ASP.NET
- C
- C#
- C++
- CSS
- Dot Net Framework
- HTML
- IoT
- Java
- JavaScript
- Kotlin
- PHP
- Power Bi
- Python
- Scratch 3.0
- TypeScript
- VB.NET