Using Javascript

Quick reference

• 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.