1 00:00:00,470 --> 00:00:01,830 And welcome back. 2 00:00:02,240 --> 00:00:07,040 In the last section, we talked about the World Wide Web and the Internet and what the differences were, 3 00:00:07,040 --> 00:00:12,330 and then I promised you that we'll finally talk about some small success and JavaScript. 4 00:00:12,680 --> 00:00:19,220 So I've been vaguely referencing these files and just told you that they're simple text files for now. 5 00:00:19,220 --> 00:00:21,680 But what are they specifically? 6 00:00:21,920 --> 00:00:23,510 Well, initially, if you remember. 7 00:00:24,710 --> 00:00:33,230 We had Tim Berners Lee, who created the very first website, and this website uses HTML and XML, that's 8 00:00:33,230 --> 00:00:39,350 the first file over here is a way for us to just write text on a website. 9 00:00:39,740 --> 00:00:45,650 And these texts on websites can also have these things called hyperlinks that can link to other parts 10 00:00:45,650 --> 00:00:46,280 of the website. 11 00:00:47,770 --> 00:00:52,930 So that's what happened in nineteen ninety one, nineteen ninety one, we had a way for us to share 12 00:00:52,930 --> 00:00:59,100 documents and this can link to another website, another file, another research paper. 13 00:00:59,320 --> 00:01:01,730 But as you can see, it wasn't the prettiest. 14 00:01:02,350 --> 00:01:11,110 So in 1995, 1996, two technologies came into being one was success and one is JavaScript. 15 00:01:11,740 --> 00:01:13,270 Now, what did they allow you to do? 16 00:01:13,600 --> 00:01:15,790 Well, success solved. 17 00:01:15,790 --> 00:01:22,210 The problem of, well, this is nice and all, but would it be nice if we had some visual aspects we 18 00:01:22,210 --> 00:01:25,360 can toy around with this website, make it look pretty? 19 00:01:25,930 --> 00:01:32,380 And then JavaScript said, well, ideally we'll be able to have something like this website where, 20 00:01:32,590 --> 00:01:34,240 you know, I can click over here. 21 00:01:34,240 --> 00:01:35,620 I can shop now. 22 00:01:35,620 --> 00:01:35,920 I can. 23 00:01:37,100 --> 00:01:44,210 Put in my credit card and get these fancy slippers and I can do all this interactive things with my 24 00:01:44,210 --> 00:01:53,150 website, so let's play around with this and try and incorporate from this basic HTML file to add some 25 00:01:53,150 --> 00:01:55,030 success in JavaScript to this page. 26 00:01:55,700 --> 00:01:59,030 The way we're going to do that is we're going to go into view. 27 00:02:00,020 --> 00:02:05,720 Developer and developer tools, you might remember this from our previous lessons. 28 00:02:07,790 --> 00:02:12,950 So once you click on that, you'll get this pop up at the bottom of the screen for some of you might 29 00:02:12,950 --> 00:02:15,160 be on the right side, but it doesn't matter. 30 00:02:15,170 --> 00:02:16,340 You'll get both things. 31 00:02:17,040 --> 00:02:18,400 And we've seen this before. 32 00:02:18,410 --> 00:02:22,460 And if you look at the top over here, it says HTML and that's it. 33 00:02:22,470 --> 00:02:30,530 HTML is this it's this file that has this weird syntax that describes how this web page, Shilluk and 34 00:02:30,530 --> 00:02:30,860 text. 35 00:02:30,860 --> 00:02:33,170 So you can see over here, it says the World Wide Web. 36 00:02:33,200 --> 00:02:35,650 These are just text on the right side. 37 00:02:35,660 --> 00:02:38,660 Over here you'll see something called styles. 38 00:02:39,230 --> 00:02:44,960 So Styles will actually let you add styles to the website, as the name suggests. 39 00:02:44,960 --> 00:02:53,210 And that's what CCIS if we click on HTML here and actually let's click on Body without knowing any success 40 00:02:53,210 --> 00:02:53,810 or anything. 41 00:02:54,990 --> 00:02:56,880 If we define something like color. 42 00:02:59,000 --> 00:03:01,970 Semicolon and then let's go blue. 43 00:03:03,010 --> 00:03:09,250 It changes the tax color to blue chrome, lets you play around with websites and actually inject some 44 00:03:09,250 --> 00:03:17,410 CSFs into this HTML without knowing any success, we can kind of play around, type in a letter and 45 00:03:17,410 --> 00:03:18,340 it will have a dropdown. 46 00:03:18,340 --> 00:03:19,390 So let's see over here. 47 00:03:19,390 --> 00:03:24,900 If we can do background color, let's make it and then press tab. 48 00:03:24,910 --> 00:03:25,930 I'm going to do red. 49 00:03:26,560 --> 00:03:29,890 Make the website really, really well, frankly, pretty ugly. 50 00:03:30,610 --> 00:03:32,110 But that's CSFs right here. 51 00:03:32,120 --> 00:03:35,560 We've just added some success to this basic Web site. 52 00:03:35,710 --> 00:03:39,220 Let's turn this color off because it is not pretty. 53 00:03:40,080 --> 00:03:41,560 OK, so ASML. 54 00:03:42,540 --> 00:03:48,240 Texts and links, success, pretty colors now how can we add some JavaScript? 55 00:03:48,270 --> 00:03:51,380 So remember, we have three files over here. 56 00:03:52,050 --> 00:03:54,690 JavaScript came along and said, these are great. 57 00:03:54,690 --> 00:04:01,020 You know, we have these beautiful text websites that link to other pages and we have access that if 58 00:04:01,020 --> 00:04:02,760 you make websites really, really pretty. 59 00:04:02,760 --> 00:04:08,250 But would it be nice to have some interactivity, to have dropdown menus, to make websites like they 60 00:04:08,250 --> 00:04:09,420 are now interactive? 61 00:04:10,400 --> 00:04:17,269 We can actually do this again with the developer tools, if you click on console over here without knowing 62 00:04:17,269 --> 00:04:18,680 any bit of JavaScript. 63 00:04:18,709 --> 00:04:25,940 For now, we're just going to show you a simple JavaScript line and we're going to type in alert. 64 00:04:25,940 --> 00:04:29,570 And let's say hi there, exclamation marks. 65 00:04:31,350 --> 00:04:32,310 And I press enter. 66 00:04:34,060 --> 00:04:41,530 And look at that, we just made the very first website ever made interactive with JavaScript. 67 00:04:42,250 --> 00:04:47,740 Now, obviously this doesn't do anything, but hopefully this shows you where we were before. 68 00:04:48,720 --> 00:04:51,870 In 1991 to where we are now. 69 00:04:53,470 --> 00:04:55,480 Websites that are interactive. 70 00:04:56,430 --> 00:05:01,440 Full of JavaScript success and, of course, HTML. 71 00:05:02,410 --> 00:05:03,690 See, in the next one, bye.