Locked lesson.

Upgrade

About this lesson

Where does JavaScript go? Putting JavaScript tags in the HTML head, vs body, vs external files.

Exercise files

Download this lesson’s related exercise files.

Where to Use JavaScript.docx
59.1 KB Where To Use Javascript - Solution.docx
59.2 KB

Quick reference

Where to Use JavaScript

There are several ways to use JavaScript on a web page.

When to use

Anytime you want to use JavaScript on a web page, you'll use one of these methods.

Instructions

You can use JavaScript by simply writing it on a web page inside an opening <script> and closing </script> tag.  

You can also reference an external JavaScript file using a <script src="nameofFile.js"></script> tag (where nameofFile.js is the name of your external JavaScript file).

You can also use JavaScript by writing snippets of it into certain HTML elements (like links and buttons).

Hints & tips

  • You can write JavaScript directly onto a web page inside <script> tags
  • You can reference JavaScript externally with a <script src="nameofFile.js"></script> tag. 
  • You can also use snippets of Javascript in certain HTML elements.
Login to download
  • 00:05 Okay in this video I want to talk about where to put Java script, how to use it,
  • 00:09 where it goes.
  • 00:10 So for the most part you're going to want to use JavaScript
  • 00:12 in connection with some sort of website, HTML, CSS, and JavaScript ,
  • 00:17 they all go together for front-end web development, and so
  • 00:19 you know most of the time you're gonna be dealing with websites.
  • 00:22 So I've created this simple HTML page, its just index.html and
  • 00:26 you can see there is nothing going on here.
  • 00:27 We just have a title and h1 tag, and it just says hello world.
  • 00:32 So where would I put JavaScript if I wanted to use JavaScript.
  • 00:35 With JavaScript you can use it several different ways and
  • 00:38 place it several different places.
  • 00:39 And we're gonna get into this as we go along.
  • 00:42 But just a quick overview: You can use JavaScript in the body of an HTML tag.
  • 00:48 Anywhere you want.
  • 00:48 And you do that just by creating a script opening tag and a script closing tag.
  • 00:54 And anything in between is JavaScript.
  • 00:57 So you can see here, I've created this div with an id of first.
  • 01:00 I've written this little bit of JavaScript here referencing that first div.
  • 01:04 And this is just going to print something out onto the screen and
  • 01:06 you don't need to know what any of this is.
  • 01:07 We're going to get into this in a bit.
  • 01:09 I just want to kind of show you an example on how to use JavaScript.
  • 01:13 So if we save this, come back, and
  • 01:14 hit reload it just very simply prints out my first JavaScript onto the screen.
  • 01:19 So that's one way to use JavaScript.
  • 01:21 Just right into your document.
  • 01:23 Now we put this in the body tag.
  • 01:25 You can also use JavaScript within the head tag and
  • 01:27 we'll get into that a little bit later.
  • 01:30 But it's pretty much the same thing on the HTML page.
  • 01:33 Now, another way to use JavaScript is to reference a file, a separate file.
  • 01:38 And so if we come up here and right-click on our little folder here and
  • 01:43 create New File and let’s call this script.js and
  • 01:47 JavaScript files almost always end in .js.
  • 01:50 So, if we take this,
  • 01:51 I’m just gonna copy this line of JavaScript and open this file.
  • 01:55 Double click to open it, and I'm just going to paste it.
  • 01:58 Control V.
  • 01:58 Command V if you're on a Mac, and then I'm going to save this file.
  • 02:01 Control S or you can come up here and click file, save.
  • 02:05 And now you can come back to our index page, and
  • 02:08 I can completely get rid of this.
  • 02:10 And this.
  • 02:11 Now we still want to be able to access this JavaScript, so how do we do it?
  • 02:15 Well, just like earlier we use the script tag, opening script and closing script,
  • 02:20 but what we do is give it an src= and we type in the name of our external file.
  • 02:25 So if we do that and save it.
  • 02:27 Actually, let's come back here and type in second, save this.
  • 02:33 Now if we come back and hit reload, now this is my second JavaScript file.
  • 02:36 And all it's doing is it's calling this file from this line and
  • 02:40 it's executing the code in this page.
  • 02:43 So that's another major way that you can use JavaScript on an HTML page.
  • 02:47 Another way is to simply pop in a little bit of JavaScript in certain HTML elements.
  • 02:52 And so what I'm gonna do is I'm just gonna delete the this line here, and I'm just
  • 02:55 gonna paste in some stuff here, and this is just a button, some button code, and
  • 03:00 I referenced this on click, and then here we have some JavaScript, and
  • 03:04 then it says click me, and then the button closes.
  • 03:06 So if we save this, come back and hit reload, now we have this button.
  • 03:10 If we click it, it says, My Third JavaScript, which is what it says right
  • 03:13 here, so again you don't need to know what any of this stuff is, we're gonna learn
  • 03:17 what all this code actually means and what it does and how to use it.
  • 03:21 I just want to show you,
  • 03:22 this is sort of the third way that we can use JavaScript on a webpage.
  • 03:25 So, there's other ways to use JavaScript, these are the main ways,
  • 03:28 these are the things we're gonna focus on throughout this course.
  • 03:31 So, in the next video, I'm gonna talk about JavaScript syntax and output.

Lesson notes are only available for subscribers.

Gift this course