1 00:00:01,430 --> 00:00:04,940 In this lesson, we're going to be showing you a little bit more about JavaScript, and I am going to 2 00:00:04,940 --> 00:00:07,390 get you to write JavaScript by the end of the lesson. 3 00:00:07,640 --> 00:00:10,010 So we're going to show you more about JavaScript history. 4 00:00:10,130 --> 00:00:11,990 So, of course, there's a whole lot more to it. 5 00:00:11,990 --> 00:00:18,230 But essentially, it started in 1995 as an answer to make browsers do a little bit more functionality 6 00:00:18,230 --> 00:00:19,580 and make them more interactive. 7 00:00:19,580 --> 00:00:21,620 And this was initiated by Netscape. 8 00:00:22,040 --> 00:00:27,290 Netscape originally called Live Script, and then they renamed it to JavaScript in 1995. 9 00:00:27,860 --> 00:00:34,160 So JavaScript is only similar in name when compared to Java and ECMAScript came along. 10 00:00:34,160 --> 00:00:37,940 So you might be familiar with ECMAScript as well when it comes to JavaScript. 11 00:00:38,150 --> 00:00:42,050 And this is in reference to the standardized format of JavaScript. 12 00:00:42,350 --> 00:00:48,110 So currently there have been nine different s versions and as you can see within the chart. 13 00:00:48,260 --> 00:00:54,260 So currently as we're making the video, we're at ECMAScript nine, which is ECMAScript 2018. 14 00:00:54,530 --> 00:01:02,000 The major revision was with S six and that was with ECMAScript 2015, where there was a whole bunch 15 00:01:02,000 --> 00:01:02,930 of changes. 16 00:01:03,110 --> 00:01:06,940 And before that, you can see that there wasn't an annual change. 17 00:01:07,190 --> 00:01:11,270 So the big difference really came with 2015 and the changes. 18 00:01:11,360 --> 00:01:17,150 And most of the modern browsers right now have incorporated the changes from 2015. 19 00:01:17,240 --> 00:01:23,090 And as mentioned earlier, there are some differences on how browsers handle JavaScript, but they all 20 00:01:23,090 --> 00:01:27,050 handle all of the core fundamental concepts of JavaScript the same way. 21 00:01:27,170 --> 00:01:29,240 And that's the good thing about it being standardized. 22 00:01:29,570 --> 00:01:31,220 So JavaScript is everywhere. 23 00:01:31,310 --> 00:01:34,340 And I guarantee your favorite websites use JavaScript. 24 00:01:34,430 --> 00:01:40,670 It makes things come to life and allows you to create interaction and have dynamic content within your 25 00:01:40,700 --> 00:01:41,200 language. 26 00:01:41,570 --> 00:01:43,880 So it's applied programming language. 27 00:01:43,880 --> 00:01:48,530 It's applied with an HTML and basically it brings your HTML to life. 28 00:01:48,650 --> 00:01:50,600 It's available in all browsers. 29 00:01:50,600 --> 00:01:58,160 And it's the most popular programming language out there and with websites and web applications, JavaScript 30 00:01:58,160 --> 00:01:58,630 rules. 31 00:01:58,910 --> 00:02:02,360 So what is programming and what is code all about? 32 00:02:02,570 --> 00:02:04,940 So code really is inside of instructions. 33 00:02:05,060 --> 00:02:09,800 It tells the computer or the browser what you want it to do. 34 00:02:10,010 --> 00:02:12,890 So that's a simple explanation of what code is. 35 00:02:12,890 --> 00:02:20,060 And then the code renders out and helps deliver what the developer or the programmer wanted the interaction 36 00:02:20,060 --> 00:02:21,260 to take place. 37 00:02:21,410 --> 00:02:25,520 So, for example, if we have a person that comes to your website, you want to ask them their name 38 00:02:25,700 --> 00:02:27,620 and show a welcome message. 39 00:02:27,620 --> 00:02:30,020 So this might be a common thing that you have on your website. 40 00:02:30,290 --> 00:02:32,460 So you want to first ask the name. 41 00:02:32,510 --> 00:02:34,070 So in this case, it will be Lowrance. 42 00:02:34,070 --> 00:02:39,350 We need to provide a place to input the name as well as an interaction for the user to send the name. 43 00:02:39,500 --> 00:02:45,530 And then we have a response saying hello, welcome Lawrence to the website and behind the scenes, this 44 00:02:45,530 --> 00:02:46,940 is the code that makes it happen. 45 00:02:47,120 --> 00:02:49,310 There's not a whole lot of code that is needed. 46 00:02:49,460 --> 00:02:55,220 And as you can see, most of this is just regular HTML and then the JavaScript builds upon the HTML 47 00:02:55,220 --> 00:02:56,530 and makes it interactive. 48 00:02:56,570 --> 00:03:00,080 We are also going to be utilizing the Chrome browser console. 49 00:03:00,090 --> 00:03:01,640 So we did mentioned this earlier. 50 00:03:01,790 --> 00:03:08,230 It's available in every version of Chrome and most modern browsers will have a developer tool option. 51 00:03:08,690 --> 00:03:16,130 So what I want you to do now is to try this out, to open up your browser and access the console, and 52 00:03:16,130 --> 00:03:20,540 I'll show you how to do that, walking you through so you can open this up on any Web page. 53 00:03:20,540 --> 00:03:25,430 And in this case, I've got brackets open, so why not go to inspect so you can. 54 00:03:25,430 --> 00:03:28,100 Right click anywhere on the page on a Windows machine. 55 00:03:28,190 --> 00:03:30,380 And there are also shortcuts in order to do this. 56 00:03:30,380 --> 00:03:36,170 So you can go to more tools and developer tools and there's different shortcuts for windows and for 57 00:03:36,170 --> 00:03:36,560 Macs. 58 00:03:36,860 --> 00:03:43,880 So typically the easiest way to do it is just to click anywhere on the empty page and just hit the inspect, 59 00:03:44,330 --> 00:03:46,710 which will open up the inspector option. 60 00:03:46,760 --> 00:03:49,220 This is the developer console, a default. 61 00:03:49,220 --> 00:03:53,990 It gets docked to the right hand side and you can move where your docking it for most of the course. 62 00:03:53,990 --> 00:03:55,160 I'm going to dock it at the bottom. 63 00:03:55,160 --> 00:03:57,830 So this gives me the most screen for the buck. 64 00:03:57,980 --> 00:04:03,650 And when you see there's a different tabs here, there's elements, console sources, network performance, 65 00:04:03,650 --> 00:04:04,040 memory. 66 00:04:04,280 --> 00:04:06,530 So the one that we're focused on is console. 67 00:04:07,010 --> 00:04:13,970 You can clear that out by pressing the clear console or control L or or command K on a Mac and that 68 00:04:13,970 --> 00:04:14,570 will clear it out. 69 00:04:14,570 --> 00:04:18,170 Or you could also type in clear and that clears the console as well. 70 00:04:18,560 --> 00:04:24,590 So what you type into the console is only available in this current instance of the browser. 71 00:04:24,740 --> 00:04:30,650 So if I was to type in some JavaScript like an alert saying hello, you see that that alert pops up 72 00:04:30,830 --> 00:04:36,440 and even though it's render do it on Brackett's website or it looks like it's rendered out in the brackets 73 00:04:36,440 --> 00:04:40,090 website, it's only within this browser instance of it. 74 00:04:40,250 --> 00:04:46,460 So when I refresh it, that code goes away and we are going to be using it in order to debug and communicate. 75 00:04:46,850 --> 00:04:47,950 So try that out. 76 00:04:48,410 --> 00:04:53,660 As mentioned, it is our way to output a message in the console from the developer, from the code, 77 00:04:53,900 --> 00:04:56,650 and we can see that information directly in the console. 78 00:04:56,990 --> 00:05:00,620 So for most of the course and whenever we want to output information from. 79 00:05:00,950 --> 00:05:07,090 Directly, we're going to be using console log so it prints out content and this is only visible within 80 00:05:07,090 --> 00:05:10,930 the console, so it's not going to be visible to the average Web user. 81 00:05:11,110 --> 00:05:13,610 This is just our way to debug programs. 82 00:05:13,870 --> 00:05:19,840 There's also a console directory, a way to list out an object so you can try that one out as well, 83 00:05:19,990 --> 00:05:25,150 where you can go into your browser and just type yourself a little secret message. 84 00:05:25,180 --> 00:05:26,440 So this case, we're saying hello. 85 00:05:26,680 --> 00:05:29,590 We see that it gets rendered out within the console, of course. 86 00:05:29,860 --> 00:05:35,140 And if we do console directory, we're going to use the document object because this is already loaded 87 00:05:35,140 --> 00:05:37,870 within the Web page, within the browser. 88 00:05:38,140 --> 00:05:44,200 And as you can see, it returns back this document object and then within this document object. 89 00:05:44,230 --> 00:05:45,040 This is huge. 90 00:05:45,040 --> 00:05:46,420 There's a lot of stuff in here. 91 00:05:46,570 --> 00:05:51,820 And what this is doing is this is giving us all the information of what's contained within the Web page. 92 00:05:52,060 --> 00:05:56,500 And this is essentially a giant JavaScript object with a ton of information. 93 00:05:56,620 --> 00:05:59,000 And we are going to be covering objects later on. 94 00:05:59,080 --> 00:06:00,190 So there's more on this. 95 00:06:00,310 --> 00:06:05,380 But this is just something to be aware of for now, and it's something that you could try out and render 96 00:06:05,380 --> 00:06:05,620 out. 97 00:06:05,740 --> 00:06:10,630 And then, of course, you can look through it if you want and see all of that information that's contained 98 00:06:10,630 --> 00:06:11,470 within the Web page. 99 00:06:11,620 --> 00:06:16,960 And then, of course, JavaScript gives us the ability to interact with this object and then manipulate 100 00:06:16,960 --> 00:06:20,620 it, change it, update it and do some really nice things with it for the console. 101 00:06:20,650 --> 00:06:22,570 There's also a console table. 102 00:06:22,600 --> 00:06:26,700 So this is ideal for outputting an object within a table format. 103 00:06:26,800 --> 00:06:34,030 And there's also console error and then console clear to clear out all of that console content without 104 00:06:34,030 --> 00:06:35,530 having to refresh the page. 105 00:06:36,040 --> 00:06:38,770 So what I want you to do now is open up your browser. 106 00:06:38,770 --> 00:06:42,340 And if you haven't already tried it, type in console log hello world. 107 00:06:42,520 --> 00:06:46,390 And then also type in more than one line so you can type in a variable. 108 00:06:46,390 --> 00:06:48,490 And we are going to be covering this in the upcoming lesson. 109 00:06:48,500 --> 00:06:50,850 So this is a sneak preview to what's coming up. 110 00:06:50,980 --> 00:06:59,470 So set up a variable by var space A and then equal it to end quote around any kind of message that you 111 00:06:59,470 --> 00:06:59,770 want. 112 00:06:59,890 --> 00:07:04,780 In this case we're just doing hello so you can use double quotes or single quotes and then use the console 113 00:07:04,780 --> 00:07:08,340 log to output that a and I'll show you how to do that. 114 00:07:08,350 --> 00:07:09,160 I'll walk you through. 115 00:07:10,530 --> 00:07:16,260 So you can pause the video and try this out before moving on to the next lesson, can try it at any 116 00:07:16,260 --> 00:07:19,290 one of any any webpage at all. 117 00:07:19,470 --> 00:07:20,790 It doesn't matter in this case. 118 00:07:20,790 --> 00:07:22,380 I'm going to be using it on Brackett's. 119 00:07:22,680 --> 00:07:28,500 So what the challenge was for this lesson is to type out a message to yourself within the console using 120 00:07:28,500 --> 00:07:31,770 console log, and you can see the output being output there. 121 00:07:31,920 --> 00:07:35,040 And also is to set up the variables we're going to set up. 122 00:07:35,040 --> 00:07:42,510 Örvar, equal it to a is equal to low and you still sensi undefined being returned back. 123 00:07:42,660 --> 00:07:47,820 But now when you output a you're going to see that message being returned back. 124 00:07:48,060 --> 00:07:53,910 And as well, if you do console log, then you can see that that message is being returned back into 125 00:07:53,910 --> 00:07:54,510 the console. 126 00:07:55,020 --> 00:07:57,240 So that was a sneak peek at what's coming up. 127 00:07:57,420 --> 00:07:59,100 So go ahead and try this out for yourself.