Locked lesson.
About this lesson
In this lesson, we'll discuss how to add Javascript to your Django projects.
Exercise files
Download this lesson’s related exercise files.
Using Javascript.docx57.4 KB Using Javascript - Solution.docx
57.9 KB
Quick reference
Using Javascript
Using Javascript in your Django project is fairly straightforward. Add it to your static folder like with CSS and Images.
When to use
Do this any time you want to use Javascript on one of your web pages.
Instructions
Add A directory to your /static/resume/ directory called javascript. Save all your javascript files there. To reference them on a web page, be sure to load your static:
{% load static %}
And to reference the javascript on a web page:
<script src="{% static 'resume/javascript/javascript_file.js' %}"></script>
Hints & tips
- Don't forget to {% load static %}
- <script src="{% static 'resume/javascript/javascript_file.js' %}"></script>
- 00:04 All right ,so we've looked at adding CSS.
- 00:05 We've looked at adding images.
- 00:07 In this video I want to look at adding JavaScript to our webpages.
- 00:11 So, same thing.
- 00:13 We're still in the static directory here, inside of our resume directory.
- 00:16 Let's right-click and create a new folder.
- 00:19 And we just want to call this JavaScript.
- 00:23 You know, you can really name these things, anything you want, but
- 00:27 they're going to be full of JavaScript images and CSS.
- 00:29 So we name them CSS images, and JavaScript, just sort of makes sense.
- 00:34 So let's right-click and create a new file and
- 00:39 let's save this as popup.js.
- 00:43 And I'm just going to create a very, very basic JavaScript file here.
- 00:47 I'm going to paste in this code.
- 00:49 We're going to create a function, and we're going to call it my function.
- 00:52 And all it's going to do is make an alert,
- 00:54 a popup box that says I am an alert box, right?
- 00:57 So this is not a course on JavaScript, we don't really care what this stuff is.
- 01:01 This is just some sort of dummy code to show us how to use JavaScript on our
- 01:06 Django websites.
- 01:07 So go ahead and save this.
- 01:09 Now we want to come over to our home page, and
- 01:12 make sure we have our load static tag in there.
- 01:15 And now, we want to reference that JavaScript file on our page.
- 01:21 So, really anywhere, but I'm just going to put it inside of our block content.
- 01:27 We just create a script tag.
- 01:30 And the SRC for this, we'll put in just a second.
- 01:34 Now we need to close that script tag.
- 01:36 And this is just basic JavaScript stuff how you always add JavaScript to any
- 01:40 web page.
- 01:41 The only difference is inside of here,
- 01:44 just like with the images, we need to create a Django tag.
- 01:48 And it's going to be static.
- 01:50 And it will point to resume/javascript.
- 01:57 And then slash whatever file we want to reference.
- 01:59 So we want to reference popup.js, okay?
- 02:04 So that will call the file.
- 02:06 But now down here below our Aspen image,
- 02:08 we want to create a little button that we can click.
- 02:11 So I'm just going to go button
- 02:17 onclick equals myfunction.
- 02:23 And then that function and then let say push the button and
- 02:28 then close that button tag.
- 02:31 So let's go ahead and save this.
- 02:32 Now this, we're just calling this myfunction, function which is
- 02:36 in our popup.js it's just what we name this little function right here.
- 02:41 So that's all that is.
- 02:42 All right, so let's go ahead and save this and head back over to our homepage.
- 02:45 And we see this push the button button.
- 02:48 If we click it, a little box pops up that says I'm an alert box.
- 02:52 And that's all there is to it.
- 02:53 So this is a kind of a silly example of JavaScript.
- 02:57 But like I said, this is not a course in JavaScript.
- 03:00 So we don't want to get into what all this code is.
- 03:03 This is just to show you how to use any JavaScript on a web page in Django.
- 03:08 So a lot of times, you'll import all kinds of things for styling.
- 03:12 If you've got a menu bar at the top, and
- 03:15 it has a drop down menu that usually uses JavaScript.
- 03:18 So you'll point your JavaScript to your static file using this sort of tag and
- 03:23 things like that.
- 03:24 And that'll become clear as we move forward and
- 03:26 start to actually do these things for a real world example.
- 03:29 Okay, so that's all for this video.
- 03:31 And I think we're pretty much done with the basics of Django.
- 03:34 In the next video, we're going to start to put all this together and
- 03:37 actually build out a real website that is much more sophisticated than this
- 03:42 simple thing we've been doing so far.
- 03:44 And we'll start to do that in the next video.
Lesson notes are only available for subscribers.