1 00:00:00,670 --> 00:00:02,140 And welcome back. 2 00:00:02,890 --> 00:00:10,810 We're going to take a quick break from learning JavaScript syntax to show you how JavaScript gets implemented 3 00:00:11,020 --> 00:00:11,830 in the browser. 4 00:00:12,340 --> 00:00:16,570 We're going to go back to this image that we've seen many times before in this course. 5 00:00:17,260 --> 00:00:22,600 And we have a pretty good idea of what HTML and access does. 6 00:00:22,600 --> 00:00:31,720 If you remember, HTML gets sent to the browser, then it sees the link tag and the CSFs gets sent to 7 00:00:31,720 --> 00:00:32,409 the browser. 8 00:00:32,560 --> 00:00:36,110 But what about our new friend JavaScript over here? 9 00:00:36,160 --> 00:00:37,120 What happens with him? 10 00:00:38,110 --> 00:00:42,190 Well, in this video, we're going to learn exactly that. 11 00:00:43,270 --> 00:00:50,080 So I have over here an index that ECMWF out, I'm going to open it with Google Chrome, it's completely 12 00:00:50,080 --> 00:00:57,390 empty now and I'm also going to drag it to my sublime text so that we can add something to it. 13 00:01:00,300 --> 00:01:06,330 So I have sublime text and the browser, and we're going to use our little short command to create a 14 00:01:06,330 --> 00:01:18,180 quick e-mail file, JavaScript, and let's just have a simple header that says JavaScript and HTML. 15 00:01:19,750 --> 00:01:23,750 Save and refresh, perfect, we're master of this already. 16 00:01:23,800 --> 00:01:25,220 We all know what's going on. 17 00:01:26,080 --> 00:01:29,460 So how do we add JavaScript to this? 18 00:01:29,680 --> 00:01:35,200 I mean, with success, we had the link tag, right. 19 00:01:35,470 --> 00:01:38,830 And we had this graph where we tell it where it is. 20 00:01:40,300 --> 00:01:43,390 Well, if you remember. 21 00:01:44,900 --> 00:01:51,260 JavaScript, again, just like she says, is just a file, so let's create one first. 22 00:01:53,540 --> 00:01:55,730 And sublime text, I'm going to create a new file. 23 00:01:56,030 --> 00:02:02,540 I'm going to save it and I'm going to say script dot just see the Dodgers at the end. 24 00:02:02,720 --> 00:02:03,800 That means JavaScript. 25 00:02:04,520 --> 00:02:07,940 Notice what happens when I click save at the bottom. 26 00:02:08,810 --> 00:02:12,620 Sublime text now converted the syntax to JavaScript. 27 00:02:13,700 --> 00:02:16,460 So now I can write something like. 28 00:02:17,490 --> 00:02:26,520 Four plus three, and I get the cool JavaScript colors, I can write if four plus three equals. 29 00:02:27,490 --> 00:02:28,090 Seven. 30 00:02:30,500 --> 00:02:31,610 I can alert. 31 00:02:34,000 --> 00:02:38,470 You're smart, so you can see that it does the syntax for me. 32 00:02:39,810 --> 00:02:41,170 OK, perfect. 33 00:02:41,900 --> 00:02:43,500 I'm going to just save that. 34 00:02:44,620 --> 00:02:50,200 Let's see if we can add this to I forgot the semicolon here, I always forget it, too. 35 00:02:51,070 --> 00:02:52,980 Let's add this to our e-mail. 36 00:02:53,290 --> 00:02:56,860 If it works, we'll get an alert saying you're a smart. 37 00:02:58,860 --> 00:02:59,850 So how can we do this? 38 00:03:01,120 --> 00:03:04,750 Well, there's an e-mail tag called. 39 00:03:05,770 --> 00:03:13,150 Script tag, so linked tag for stylesheet script, tag for JavaScript and all we do. 40 00:03:14,520 --> 00:03:24,180 Is this we have the type text JavaScript you see over here how with access we have text access. 41 00:03:24,390 --> 00:03:26,700 Well, we're telling it that this is JavaScript. 42 00:03:28,230 --> 00:03:34,980 And in here, JavaScript can be written right over here. 43 00:03:37,150 --> 00:03:44,080 If I go alert hello, and you might remember this because it's kind of like the style tag for success. 44 00:03:45,170 --> 00:03:46,130 Let's see what happens. 45 00:03:47,410 --> 00:03:57,490 Going to refresh and I get hello, look at that, we just added JavaScript to our e-mail, but I really 46 00:03:57,490 --> 00:04:04,360 want to use this file as we know with success, we don't necessarily want our JavaScript to live on 47 00:04:04,360 --> 00:04:04,830 a Schimmer. 48 00:04:04,840 --> 00:04:06,430 We want separation of concerns. 49 00:04:06,430 --> 00:04:08,430 We want the JavaScript and the JavaScript file. 50 00:04:09,040 --> 00:04:10,990 Well, the way we do that is. 51 00:04:12,480 --> 00:04:21,329 Through a Sourcefire, so all we do is source, you might remember this from images, so instead of 52 00:04:21,570 --> 00:04:27,290 ref and link, we have source and we say script, Dr. James. 53 00:04:28,510 --> 00:04:30,250 I save and I refresh. 54 00:04:31,240 --> 00:04:32,650 And I get your smart. 55 00:04:34,180 --> 00:04:41,140 Now, again, we can say script dogs because, well, it's in the same folder, it's in the desktop 56 00:04:41,140 --> 00:04:41,550 folder. 57 00:04:41,890 --> 00:04:49,600 If it wasn't, then let's say this e-mail wasn't in the desktop folder, we'd have to do something like 58 00:04:50,350 --> 00:04:51,280 desktop. 59 00:04:57,630 --> 00:05:01,170 OK, so that's very interesting. 60 00:05:01,200 --> 00:05:07,560 What if I have multiple JavaScript files, we might have seen that in, remember, bootstrap and bootstrap, 61 00:05:07,560 --> 00:05:09,060 we have like three script tags. 62 00:05:09,660 --> 00:05:13,170 Well, yeah, you can just just like you can with link. 63 00:05:13,270 --> 00:05:20,270 You can have multiple script decks and you can just say script to script three. 64 00:05:20,910 --> 00:05:24,240 And again, each one gets executed one at a time. 65 00:05:25,550 --> 00:05:30,530 OK, now one question you might have is. 66 00:05:31,920 --> 00:05:33,960 Why did I just put the script tag? 67 00:05:34,880 --> 00:05:37,010 At the bottom here at the bottom of the body. 68 00:05:38,150 --> 00:05:45,350 Why didn't we Let me just remove this for now, why don't we just put it at the top like we do with 69 00:05:45,350 --> 00:05:46,100 the successful. 70 00:05:47,580 --> 00:05:50,460 Well, let me show you something, let's put it up here. 71 00:05:50,490 --> 00:05:51,300 Let's see what happens. 72 00:05:51,890 --> 00:05:52,710 I'm going to refresh. 73 00:05:54,320 --> 00:05:55,880 OK, I get your smart. 74 00:05:59,220 --> 00:06:03,630 I don't know if you saw that, did you see the JavaScript go, let's change this quickly, let's say 75 00:06:03,630 --> 00:06:06,180 our website is now Fashanu and I'm going to say. 76 00:06:08,010 --> 00:06:11,760 Waiting for JavaScript going to save. 77 00:06:12,860 --> 00:06:15,980 Notice what happens to the header I refresh. 78 00:06:17,660 --> 00:06:20,750 It hasn't changed yet, I have to click your smart. 79 00:06:22,410 --> 00:06:31,410 You see, it's completely gone click OK, and only then it shows up because the browser reads the file 80 00:06:32,400 --> 00:06:38,490 goes and gets the access file and then sees a script and says, oh, I'm going to go read what's over 81 00:06:38,490 --> 00:06:38,850 here. 82 00:06:39,000 --> 00:06:43,830 And here is an alert and what an alert does it it waits for us to click. 83 00:06:43,830 --> 00:06:49,140 OK, so the browser can't display waiting for JavaScript. 84 00:06:49,980 --> 00:06:56,250 So you will see in older websites people that put the script tags in here, but that actually delays 85 00:06:56,430 --> 00:06:59,460 what gets seen by the user instead. 86 00:07:00,180 --> 00:07:05,970 If we put it down here and change the text again to not waiting. 87 00:07:08,210 --> 00:07:08,930 And to save. 88 00:07:10,150 --> 00:07:11,010 Let's see what happens. 89 00:07:13,130 --> 00:07:15,590 Not waiting for JavaScript, that got changed. 90 00:07:17,180 --> 00:07:23,810 So we ideally want to put our script at the bottom of the body, what that means is that the website 91 00:07:24,440 --> 00:07:32,120 gets displayed, gets rendered, and then we have to still wait for the JavaScript to lo. 92 00:07:32,120 --> 00:07:33,620 Let's say we had a cool animation. 93 00:07:33,860 --> 00:07:35,780 You'll have to wait until that loads. 94 00:07:36,110 --> 00:07:42,890 But to a user, it appears like the website goes a lot faster because they might not click on a drop 95 00:07:42,890 --> 00:07:46,460 down menu or see the animation right away and notice that there's a lot. 96 00:07:46,460 --> 00:07:49,930 But they will see a delay if they don't see anything on the page. 97 00:07:50,210 --> 00:07:52,100 So script tags at the bottom. 98 00:07:53,990 --> 00:07:54,860 One last thing. 99 00:07:56,320 --> 00:07:58,270 How do we get that console? 100 00:07:59,200 --> 00:08:00,340 To print stuff out. 101 00:08:01,310 --> 00:08:05,490 It would be nice if instead of alert all the time, I can get something in the console. 102 00:08:05,780 --> 00:08:12,050 Well, in JavaScript you can do something called console dialog. 103 00:08:13,990 --> 00:08:15,220 And here I can say. 104 00:08:16,570 --> 00:08:17,050 Hello. 105 00:08:18,700 --> 00:08:24,910 So this Syntex, a little bit weird, I'll explain later on what is going on here, but console dialogue 106 00:08:25,780 --> 00:08:29,500 is a special little syntax that we can use. 107 00:08:29,500 --> 00:08:31,180 And now if I refresh the page. 108 00:08:32,590 --> 00:08:34,419 I get logging over here. 109 00:08:35,780 --> 00:08:41,900 So I can write as much as I want here, kind of like alert, but without getting that annoying pop up 110 00:08:41,900 --> 00:08:42,490 over and over. 111 00:08:44,860 --> 00:08:51,880 And refresh and I get hello and we'll be using console log a lot in the next couple of videos, you 112 00:08:51,880 --> 00:09:00,280 can see here that it's a nice way for us to print something to the console before we learn how to change 113 00:09:00,310 --> 00:09:01,060 our e-mail. 114 00:09:02,350 --> 00:09:03,280 So I'll see you in the next.