1 00:00:00,690 --> 00:00:07,230 All right guys so when the last video we created our initial index each Tamal and Jasc file and we have 2 00:00:07,230 --> 00:00:13,860 those linked and I have this running in live server from vs code you can see it's on my local host here. 3 00:00:14,010 --> 00:00:15,600 And of course you don't need to do that. 4 00:00:15,600 --> 00:00:20,880 You can just open it right on your file system or you can use some other type of server whatever you 5 00:00:20,880 --> 00:00:22,230 want to do is fine. 6 00:00:22,230 --> 00:00:24,920 Now one thing I didn't mention is how to stop the server. 7 00:00:24,930 --> 00:00:30,480 So if you want to stop it then you can go down to this right here where it says port fifty five hundred 8 00:00:30,490 --> 00:00:31,460 click that. 9 00:00:31,680 --> 00:00:34,440 And that will actually close the server up. 10 00:00:34,440 --> 00:00:38,490 So now if I were to reload this page it's not going to work. 11 00:00:38,520 --> 00:00:43,710 All right and then if you want to run it again you can just right click and say open with a live server. 12 00:00:43,770 --> 00:00:44,120 OK. 13 00:00:44,130 --> 00:00:48,360 So in this video what I want to do is just focus on the console because that's what we're going to be 14 00:00:48,360 --> 00:00:50,120 working in for a while. 15 00:00:50,190 --> 00:00:57,720 The consul gives us a way to test things to debug to just give just a way to get to output stuff from 16 00:00:57,780 --> 00:00:58,980 our code. 17 00:00:58,980 --> 00:00:59,310 All right. 18 00:00:59,310 --> 00:01:06,690 Back in the day before dev tools we would do things like alert if we wanted to you know show something 19 00:01:06,690 --> 00:01:07,320 really quick. 20 00:01:07,320 --> 00:01:13,860 We would just say alert and run that which isn't very efficient and it's just not not a good way to 21 00:01:13,860 --> 00:01:14,870 do things. 22 00:01:14,880 --> 00:01:21,930 So now we have the console and in Chrome and just about any other browser you can open it up the dev 23 00:01:21,930 --> 00:01:28,020 tools up with F 12 and then you have different tabs in console should be one of those tabs. 24 00:01:28,620 --> 00:01:33,510 So you can actually write javascript or execute javascript from the console. 25 00:01:33,510 --> 00:01:41,080 So again if I wanted to alert one to three and enter you'll see that that will actually actually execute 26 00:01:41,460 --> 00:01:45,320 and you can get variables from your scripts that are connected. 27 00:01:45,360 --> 00:01:47,530 It's just it's really powerful. 28 00:01:47,550 --> 00:01:54,000 Now this undefine that you see here just means that nothing was actually returned from this alert function 29 00:01:54,000 --> 00:01:55,760 that we that we wrote here. 30 00:01:55,890 --> 00:02:00,590 So we can put expressions in here we can actually just put in a number if we say four. 31 00:02:00,640 --> 00:02:07,200 It'll give us back for if we say four plus four it'll give us back eight we can select things from the 32 00:02:07,200 --> 00:02:08,300 DOM. 33 00:02:08,310 --> 00:02:15,720 In fact if I just typed the word document it will give us the entire document structure so the H HTML 34 00:02:15,720 --> 00:02:22,140 tags all of that if we want to select something from the DOM we can do that from here. 35 00:02:22,140 --> 00:02:32,940 So we have this each one and if we wanted to select that we could use document dots query selector and 36 00:02:32,940 --> 00:02:42,280 pass in each one and we could do something like Daut style dots color equals red. 37 00:02:42,720 --> 00:02:44,020 And it turns it red. 38 00:02:44,040 --> 00:02:44,340 All right. 39 00:02:44,340 --> 00:02:49,700 Now I know that a lot of you guys might not know what you know queery selector means style and all this. 40 00:02:49,700 --> 00:02:50,710 Don't worry about it. 41 00:02:50,850 --> 00:02:56,730 I'm just showing you that you can do pretty much anything you could do from a javascript file from within 42 00:02:56,730 --> 00:02:57,820 your console. 43 00:02:57,960 --> 00:03:00,830 Of course it's not going to stick if I reload it goes away. 44 00:03:00,930 --> 00:03:05,750 But we can use it for testing debugging and just you know just trying things out. 45 00:03:05,780 --> 00:03:13,950 All right now we want to log to the console from our application with a comment in here and by the way 46 00:03:13,950 --> 00:03:20,310 if you don't know about javascript comments double forward slash for single called single line comments 47 00:03:20,640 --> 00:03:30,720 and a forward slash asterisk and then Astras forward slash for multi-line comments. 48 00:03:30,930 --> 00:03:31,440 OK. 49 00:03:31,440 --> 00:03:33,660 And I'll just go ahead and leave that in there. 50 00:03:33,870 --> 00:03:40,290 But let's go back up here into lock to the console we simply say console Daut log. 51 00:03:40,380 --> 00:03:40,740 All right. 52 00:03:40,750 --> 00:03:41,550 And we'll say 53 00:03:44,400 --> 00:03:50,700 hello world and save and notice that it executes right away because amusing live server if you guys 54 00:03:50,700 --> 00:03:54,810 are not then you just have to reload after you type your code in. 55 00:03:55,170 --> 00:04:00,360 All right so that's how we launch to the console if we hold control and most will we can make this bigger 56 00:04:00,360 --> 00:04:01,820 or smaller as well. 57 00:04:03,420 --> 00:04:08,040 All right so that's logging a string and we're going to get into data types and all that later on but 58 00:04:08,040 --> 00:04:15,420 just to show you we can also log numbers so a log 1 to 3. 59 00:04:15,450 --> 00:04:17,790 Now notice that the number is blue. 60 00:04:17,790 --> 00:04:23,670 That's because in the con at least in the chrome console I'm not exactly sure about the others numbers 61 00:04:23,670 --> 00:04:26,490 are blue strings are going to be black. 62 00:04:26,520 --> 00:04:26,880 All right. 63 00:04:26,880 --> 00:04:31,980 We can also log booleans which is true or false. 64 00:04:32,070 --> 00:04:35,080 Go ahead and do that booleans are also blue. 65 00:04:35,550 --> 00:04:36,550 We can log. 66 00:04:36,550 --> 00:04:42,360 Let's say actually we can log variables if we want to create a variable like let's say greeting and 67 00:04:42,360 --> 00:04:45,150 I'm going to get into variables too. 68 00:04:45,570 --> 00:04:51,920 Sometimes I might do some stuff that I haven't explained yet but we will get into it in a little bit. 69 00:04:51,930 --> 00:04:56,050 So if we want to log greeting and save we can see it. 70 00:04:56,040 --> 00:04:57,240 Log's Hello. 71 00:04:57,720 --> 00:04:58,050 All right. 72 00:04:58,050 --> 00:04:59,940 We can also log arrays 73 00:05:02,620 --> 00:05:06,140 and so in array we're going to just put some brackets. 74 00:05:06,230 --> 00:05:10,470 We'll just do an array of numbers save and you can see it logs the array. 75 00:05:10,470 --> 00:05:16,930 It also gives us this little arrow so that we can see each each individual index in value. 76 00:05:17,230 --> 00:05:20,800 OK we can also log objects. 77 00:05:21,210 --> 00:05:23,900 So let's put it this is an object literal. 78 00:05:23,970 --> 00:05:34,530 So we'll say a 1 b 2 and save and that a log the object and just like the array we can hit the arrow 79 00:05:34,530 --> 00:05:38,730 button and we can see it in a more readable form. 80 00:05:38,730 --> 00:05:39,030 All right. 81 00:05:39,030 --> 00:05:45,930 Another thing you can do with objects which is really cool is you can do Konsole dot table. 82 00:05:46,780 --> 00:05:55,710 OK so let's grab that and save and it'll actually print the object out as a table so we have the index 83 00:05:55,770 --> 00:05:57,720 and then the value. 84 00:05:57,720 --> 00:05:58,750 All right. 85 00:05:58,890 --> 00:06:01,270 Another thing we can do is log errors. 86 00:06:01,410 --> 00:06:04,420 So if we say Konsole dot error. 87 00:06:04,950 --> 00:06:10,920 So at some point in your application you might want to you know output something as an error. 88 00:06:11,220 --> 00:06:14,860 So I will say this is an error and save. 89 00:06:15,000 --> 00:06:19,050 And notice that it logs it but it makes it puts it in red. 90 00:06:19,170 --> 00:06:24,540 It also shows us exactly where it is in the application if I click on this link here it'll bring us 91 00:06:24,540 --> 00:06:34,380 to the sources tab and show us the code which you can't really see just make this bigger and it shows 92 00:06:34,380 --> 00:06:36,130 it shows you right where it is. 93 00:06:36,200 --> 00:06:36,910 OK. 94 00:06:38,360 --> 00:06:41,940 Now in addition to it's going to close. 95 00:06:42,080 --> 00:06:46,750 Whoops we just want to go back to our con.. 96 00:06:46,750 --> 00:06:47,080 All right. 97 00:06:47,080 --> 00:06:51,210 So we can also clear the console which is a good thing to do a about now. 98 00:06:51,430 --> 00:07:00,460 So if we say console dog clear and run that and save the console was cleared OK. 99 00:07:00,460 --> 00:07:06,550 In addition to errors we can do warning's so we can say console Daut warn. 100 00:07:06,970 --> 00:07:15,820 I will say this is a warning and it does the same thing as error except it makes it yellow. 101 00:07:15,820 --> 00:07:22,570 And again you can click on it and you can see exactly in the code where the warning happened. 102 00:07:22,960 --> 00:07:29,770 OK so the last thing I want to show you is the timer so if we say console Daut time and we give it an 103 00:07:29,770 --> 00:07:39,940 identifier like let's say hello and then down here we're going to say console Daut time and same identifier 104 00:07:39,980 --> 00:07:46,600 hello and then we can do anything in between here let's say we would just want a console log hello world 105 00:07:46,600 --> 00:07:48,510 a bunch of times. 106 00:07:52,460 --> 00:07:56,280 Go like that and I'll just have this over and save. 107 00:07:56,280 --> 00:08:03,270 So what it did is it ran all this console logged hello world and then it gave us the time that it took 108 00:08:03,510 --> 00:08:06,770 from this point from the beginning to the end. 109 00:08:06,930 --> 00:08:07,710 OK. 110 00:08:07,710 --> 00:08:15,070 So if you ever want to know how long something takes in your script then you can use console's time. 111 00:08:15,090 --> 00:08:20,370 All right so there's a lot of stuff here that you know you're probably not going to use for a little 112 00:08:20,370 --> 00:08:25,760 while but I wanted to show it to you anyways what we're going to be using the most is just the you know 113 00:08:25,890 --> 00:08:32,250 console log just to show the output of whatever it is we're doing at that time whether we're looping 114 00:08:32,250 --> 00:08:39,060 through something whether we're looking at the result of a conditional whatever it may be. 115 00:08:39,180 --> 00:08:45,300 We're going to be using the console to debug to show things and it's going to be a big part of this 116 00:08:45,300 --> 00:08:46,340 course. 117 00:08:46,350 --> 00:08:52,200 All right so that's it guys in the next video we're going to start to look at variables and we're going 118 00:08:52,200 --> 00:08:57,540 to look at the different ways to declare variables like var let Konst and then we're going to move on 119 00:08:57,540 --> 00:08:58,560 to data types. 120 00:08:58,590 --> 00:09:00,340 So I will see you in the next lecture.