1 00:00:00,300 --> 00:00:02,380 All right, so this is a lesson you've all been waiting for. 2 00:00:02,400 --> 00:00:08,510 Where are we going to create an index e-mail page and then link our JavaScript into our HTML code? 3 00:00:08,520 --> 00:00:10,770 So we're going to do some really cool things in this lesson. 4 00:00:10,800 --> 00:00:15,480 I'm going to get you to write some JavaScript code and then run that code in your browser. 5 00:00:15,780 --> 00:00:17,760 The code that we're going to be running is an alert. 6 00:00:17,970 --> 00:00:20,130 So the alert is something that we've seen before. 7 00:00:20,130 --> 00:00:27,390 And this is just a really simple method that runs within the document window of your browser and it's 8 00:00:27,390 --> 00:00:33,140 JavaScript and allows you to communicate a message and it can be written several different ways. 9 00:00:33,390 --> 00:00:36,880 You don't have to include the window object as this is assumed. 10 00:00:37,110 --> 00:00:40,700 So that's why we can just write alert and have our message rendered out. 11 00:00:40,800 --> 00:00:43,900 And there's going to be more on this later on when we look at objects. 12 00:00:43,950 --> 00:00:46,290 So this is an example of some JavaScript code. 13 00:00:46,290 --> 00:00:50,460 And of course, we are going to be covering it as we progress through the lessons, including setting 14 00:00:50,460 --> 00:00:54,090 up variables and then outputting content into the console. 15 00:00:54,330 --> 00:00:58,920 And you can try this out as well within your HTML and JavaScript file. 16 00:00:59,250 --> 00:01:02,330 If you haven't already tried the alert, go ahead and try it. 17 00:01:02,580 --> 00:01:08,760 So all you have to do is type alert rounded brackets and then between the quotes, type out your message. 18 00:01:08,760 --> 00:01:10,230 You can have a space in there as well. 19 00:01:10,230 --> 00:01:15,630 So you can do hello or hello world and say hello to the visitors of your web page. 20 00:01:15,870 --> 00:01:19,770 So single quotes or double quotes, either ones work the same way. 21 00:01:20,160 --> 00:01:26,910 So the syntax is that this is actually a function in JavaScript and of course, more on functions later 22 00:01:26,910 --> 00:01:29,060 on and at the end of each statement. 23 00:01:29,070 --> 00:01:30,930 So we end up with a semicolon. 24 00:01:31,170 --> 00:01:37,650 So semicolons are not necessary, but they are indicating that it's sits on line and it is considered 25 00:01:37,650 --> 00:01:41,800 best practice to leave a semicolon after each statement. 26 00:01:41,850 --> 00:01:47,130 So in order to include JavaScript on your website, you can link in it in a number of ways. 27 00:01:47,310 --> 00:01:48,720 You can link it as. 28 00:01:49,630 --> 00:01:56,440 Directly within the HTML page, or you can link it as its own file, and if you are familiar with success, 29 00:01:56,650 --> 00:02:02,890 it works the same way where you can create a file and then call that file with an extension of G.S. 30 00:02:03,100 --> 00:02:06,320 and then link to it from your HTML page. 31 00:02:06,640 --> 00:02:10,660 And that does the same functionality as if the code was directly on the page. 32 00:02:10,840 --> 00:02:16,840 And it's actually better to do that because this provides a separation of your HTML and your JavaScript. 33 00:02:16,990 --> 00:02:22,780 And also the benefit is if you want to link your JavaScript on multiple pages, it's a whole lot easier 34 00:02:22,780 --> 00:02:23,370 to do this. 35 00:02:23,380 --> 00:02:25,800 You don't have to type it over and over again. 36 00:02:26,080 --> 00:02:28,650 The difference between HTML four in each HTML5. 37 00:02:28,660 --> 00:02:31,720 So there was change in the way that we can call JavaScript. 38 00:02:31,930 --> 00:02:40,120 So you might still see that the script tag has type text for JavaScript and then the source within the 39 00:02:40,120 --> 00:02:47,380 syntax and this is HTML and there was a change with HTML5 and if you are using its HTML5 or newer then 40 00:02:47,380 --> 00:02:49,380 of course you don't need to include the type. 41 00:02:49,390 --> 00:02:53,670 So that's an option and there's a syntax difference between the different HTML versions. 42 00:02:53,860 --> 00:03:01,420 So in order to run your indexed HTML page and HTML, just like any other HTML, it runs within the browser 43 00:03:01,420 --> 00:03:04,090 and that's the same thing for success and JavaScript. 44 00:03:04,330 --> 00:03:09,880 But you do need to wrap it within an HTML file in order for it to run in the browser. 45 00:03:09,880 --> 00:03:12,130 It won't be able to run to JS file on its own. 46 00:03:12,130 --> 00:03:14,170 It will just don't put the contents of the JS file. 47 00:03:14,320 --> 00:03:20,400 So let's try all of this out and create our JavaScript file and link it into our HTML. 48 00:03:20,620 --> 00:03:23,620 I've got a completely blank page and I'm going to go ahead. 49 00:03:23,620 --> 00:03:26,110 I've got my editor open on the left hand side. 50 00:03:26,320 --> 00:03:31,480 I've got the browser window linking to the file that I'm going to create on the right hand side. 51 00:03:31,480 --> 00:03:33,070 As you can see, there's nothing there yet. 52 00:03:33,220 --> 00:03:36,000 And then I've got the directory open up here in the bottom. 53 00:03:36,310 --> 00:03:37,950 So go ahead and open up your editor. 54 00:03:37,960 --> 00:03:45,160 In this case, I am using brackets and I'm going to just save this as index HTML and you can add in 55 00:03:45,160 --> 00:03:49,070 your typical HTML tags, in this case brackets. 56 00:03:49,070 --> 00:03:54,100 So I'm going to just do an HTML template, so that gives me a quick HTML template to work with and I'll 57 00:03:54,100 --> 00:03:56,440 call it JavaScript in the title. 58 00:03:56,590 --> 00:04:01,800 And then within the body we saw there was a number of ways to bring JavaScript into our page. 59 00:04:01,810 --> 00:04:08,050 We could write it as a script tag and then have our JavaScript within the script tag and we're going 60 00:04:08,050 --> 00:04:09,450 to do a simple hello for now. 61 00:04:09,850 --> 00:04:15,900 So when I refresh it and all we have to do is run this file, the HTML file within the browser. 62 00:04:16,240 --> 00:04:18,070 So once you've got it in your directory. 63 00:04:18,100 --> 00:04:20,050 So this is that index file that I've created. 64 00:04:20,170 --> 00:04:26,890 I can open it up with the browser and you can see that once we open it up, it runs to that path. 65 00:04:26,890 --> 00:04:30,270 So this is the local path and it renders the JavaScript. 66 00:04:30,280 --> 00:04:31,330 So it says hello there. 67 00:04:31,810 --> 00:04:34,780 And then when I press, okay, then it can render out the rest of the page. 68 00:04:35,020 --> 00:04:38,950 So try that one out and then also do one for console. 69 00:04:39,640 --> 00:04:43,170 And this was the same console log that we saw in the earlier lesson. 70 00:04:43,510 --> 00:04:48,130 So type yourself a message or a message to your users so we can type in Hello world. 71 00:04:48,310 --> 00:04:54,640 You can refresh that same page in your browser type C that the hello pops up and then in order to see 72 00:04:54,640 --> 00:04:58,570 the console message, you're not going to see it regularly within the page. 73 00:04:58,570 --> 00:05:01,480 So it's not meant for regular visitors to your site. 74 00:05:01,480 --> 00:05:07,330 You have to go to inspect, open up the console and are going to have it here at the bottom of my screen. 75 00:05:07,450 --> 00:05:11,320 And you can see that the JavaScript rendered out the hello world. 76 00:05:11,740 --> 00:05:16,900 So the other option for JavaScript and also where you place JavaScript, my HTML. 77 00:05:16,930 --> 00:05:18,100 So just before the body. 78 00:05:18,700 --> 00:05:24,520 So basically you can put it anywhere within your HTML file and best practices to keep it at the bottom 79 00:05:24,910 --> 00:05:28,550 or within the head, depending on how you're using your JavaScript. 80 00:05:28,810 --> 00:05:32,500 So the other option was to create a JS file and link to it. 81 00:05:32,710 --> 00:05:39,880 So for the file we can copy the same code that we were using within our script tags, create a new file 82 00:05:40,060 --> 00:05:47,560 and just going to call this app JS and then paste in the same JavaScript and then go back to the index 83 00:05:47,560 --> 00:05:50,140 file within the attribute of the script tag. 84 00:05:50,290 --> 00:05:54,550 So source and then linking to where you've got the source of the file. 85 00:05:54,700 --> 00:06:00,820 If you are calling external libraries, it's the same thing, the same syntax, except you just specify 86 00:06:01,000 --> 00:06:08,280 the path which might have the HTTP and the whole you URL, including the domain within the path. 87 00:06:08,830 --> 00:06:14,230 So once you save it and you refresh it, you're going to see it does the exact same thing. 88 00:06:14,530 --> 00:06:20,050 So it doesn't matter if you type it in within the script tags or if you link to just file, it's going 89 00:06:20,050 --> 00:06:20,980 to do the same thing. 90 00:06:21,130 --> 00:06:26,830 And for the purposes of the upcoming lessons, we're going to just keep that same apps file linked and 91 00:06:26,830 --> 00:06:28,690 we're going to write all of our JavaScript in here. 92 00:06:28,990 --> 00:06:33,670 So go ahead and try this out herself, create your index, each HTML page and then create your apps. 93 00:06:34,360 --> 00:06:39,550 And you be ready to move on to the next lesson where we start diving deeper into what JavaScript can 94 00:06:39,550 --> 00:06:39,820 do. 95 00:06:39,820 --> 00:06:40,570 So it's coming up.