*UPDATED* JavaScript Complete Series 2023 - Part 2: Console, Window and BOM | CM Code_Zone | Skillshare

Playback Speed


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

*UPDATED* JavaScript Complete Series 2023 - Part 2: Console, Window and BOM

teacher avatar CM Code_Zone, !false | funny, because its true

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.

      Class Introduction

      2:06

    • 2.

      Lets look at the console

      3:36

    • 3.

      alert() function

      4:09

    • 4.

      cosole.log()

      2:15

    • 5.

      What is the BOM

      3:20

    • 6.

      What is the Window object

      5:52

    • 7.

      Deprecated properties

      1:23

    • 8.

      console.log(), console.info(), console.warn() and console.error()

      3:12

    • 9.

      console.assert() and console.count()

      2:26

    • 10.

      count(), table(), dir(), time() and group()

      10:04

    • 11.

      Substitutions

      3:51

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

151

Students

--

Project

About This Class

WELCOME TO THIS SKILLSHARE CLASS ON THE CONSOLE, WINDOW AND BOM

THIS IS PART 2 OF MY JAVASCRIPT COMPLETE SERIES

What we cover in this particular class?

In the previous section we covered the basics of machine code, engines, and what JavaScript is. 

Its now time to start seeing the console, which is given to us by the Browser. In the console, we can type JavaScript and it can also execute our code in real time. Pretty niffy right. 

But don't let the title fool you. 

We dig a lot deeper and cover things like the BOM, what the Window object is, and various methods that are found on the console object. 

Enjoy!

What this entire JavaScript Grandmaster course covers 

JavaScript is the #1 scripting language of the web, where a lot of the dynamic and styled content is handled by JavaScript in the background. But before using this language to create dynamic websites, you need to have a firm grasp of how it works behind the scenes.

By the end of this course, you'll be able to “speak” JavaScript by gaining an understanding of how the browser uses it, what variables, objects and functions are, what different data types there are and how to manipulate content on a website. We dig deeper and create our own dialog methods from scratch. We learn about the arrow syntaxMath.random() function, looping through objects and arrays, working with dates. We look at prototypes, JS Engines, the Execution Stack and a whole bunch more!

Through practical examples, this course helps you understand JavaScript piece by piece. And we use the latest and best features of JavaScript along the way so you can stay ahead of the pack.

WHAT ARE YOU WAITING FOR. LETS GET CRACKIN'

Meet Your Teacher

Teacher Profile Image

CM Code_Zone

!false | funny, because its true

Teacher

Success takes sacrifice.

And sacrifice is something I know a lot about.

I am a self-taught developer so I understand how difficult and daunting it can be for a new comer. 

Today, I continue to code and stay on top of the latest technologies and programming languages. 

It's time to share the knowledge I've gained and to help others succeed. 

See full profile

Level: All Levels

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Class Introduction: thing is what I'm talking about. A nice cup of coffee in my hand. 11 year. Ask thistles. Water rescues. Who doesn't get much better than this? It does not give much. Wow, that is phenomenal. But anyway, this is a new section entirely on the job scripts, Consul. Well, actually, it's just a console in your browser. This is not the own place within right jobs in right it on any text editor, even in Microsoft Word, you can write Java script basically in your back. As a developer, you're gonna be working on blotting console mental. This class is about it's about console going to be discussing things a little bit deeper as well. We're gonna be looking at your job function We're gonna be looking at What is the bomb? The bomb? What is it? We're going to get into that shortly and very importantly, we're gonna be looking at a message on the console. And this allows us to evolve modern ears to the screen. But it allows us to log results, actually, feedback to develop, and you're gonna be using a ton. So that's why it's so important. But log is not the only method on the console. Others, and that's going to be looking at in this section, and I just want encourage you to please go through each part of the series in order. We're going to be getting more and more complex Go on. But enough said, grab your coffee, a nice hot cup of coffee and I'll see you next. Really good. 2. Lets look at the console: Let's not cutting. So let's open up Google Chrome. Okay, so I opened up right IQ and going Speak and then click on this console button here and there You have it. This ladies and German is the console and don't worry about the elements sources, networks, eccentric Citra. For now, we just want to start playing around the console. So what is the console? Will it stop playing? You know, like I see it. This is where we write Java script code. Let's start typing something. So let's right, dog. And what does this mean? On court reference? Area dog is not defined, but of course, doctors and defined. We haven't told the computer what dog is, so that kind of makes scenes. What about some random takes? Same thing. How else could if ficus is not defined, either makes instrument, so it's not scary. You can click this little button here to get clear the console to get rid of everything you talked. Let's try something else. What about one plus five? See if that works pushing toe or a turn on your keyboard and your big evaluates an expression. How was that done? Well, the awesome thing is that is draw script running on your browser. It literally knows what a oneness, what that little plus sign means. And at five and some clever program is have written a program in the browser that interprets that into machine code. It displays a result fee, and this is what the console is. The fact that we could write one plus five and then it printed Becca Result six. That is what the council does. All it is is it's an awesome way for us to see immediate results. Let's jump into something quickly before we continue. All right, a quick, quick break. We know console is a place where we can write and run Java script code. Let me just break it down a little bit more for you. The console serves two main purposes. The one is diagnostic information. It gives you information about your code, helps you fix bugs that helps you change elements on a page. That's what I mean by diagnostic in for the second function. That console provides us is awesome ties, and that is to write Java script. And you've just seen some of the code that we've written, and I'm ancient this last lecture I mentioned at the console gives us ability to reevaluate printing loop. I just want toe dive alone but mawr into what I mean by read and evaluate, because it's very important to understand how the console works and how JavaScript works in the programming world. There a few little terminologies that help us along the way, and one of these is what's known as an expression. What's an expression will think about when we talk one plus one into the console, we talk dog. We're telling the computer what we wanted to do, what we wanted to evaluate. That is called an expression and the process that the computer takes to transform that expression into response. The whole protest is called an evaluation, and the last part of it is that when the process of evaluation has done, you're left with a value in the case of one plus one. Well, if for the value of two taking a step back, I want you to start thinking when we talked this code, think about that. Expression results in the computer, evaluating that expression, which results in a value cool. That's it. Let's move on 3. alert() function: just let some our first JavaScript and we are not going to stop. So let's continue. Let's open up the browser again and let's go to the console. Something now I want to introduce you to is a built in javascript function, and that function is very well known and it's called an alert. Now, when you tell the computer you want to run and alert, the computer sometimes needs to her images from from us in order to understand or in order to execute fully that that functional that code with an alert. You need to give it text because basically what detained the machine is that you wanted to give the use and alert. But what do you want, toe? Tell the user what is the little about? So that's right. Alert. Okay. And you'll see also later. In this course, we go into functions and functions have to In order to execute a function, you have to enclose it within these parentheses, thes brackets. So let's just alert the user. Hello, world. Now, what do you think's gonna happen when I push the return key or into key on a keyboard? Um oh, yes. That's gonna come up with the alert tab that we all have learned to love, to hate. And there it is my hello world and comes up with an alert. But chicken, this bar push, okay, She did the return. I'm going to find What is that undefined? Well, I'm gonna share something with you. Night. Awesome. I'm gonna drop some knowledge. Let's check it out. We ran the lewd function and the function is just one of many Charles from commands. So let's write it out on the screen and let's dissect it. Let's understand why the return value is under final. Let's understand this alert function. JavaScript function in a bit more detail. So the alert word we know that's just a special JavaScript function. You and I didn't have to underwrite the machine code or tell the computer what to do. Because Java script as a language has already done it for us. Now, remember, and we spoke about this earlier every expression and then allure. It is just an expression. You telling the computer what to do In this case shown alert, it has to return something, and in this case, the unnerved hasn't returned anything. And if it returns. Nothing in Java script that just means undefined. Simple is it? And that's why that undefined word came up below our function call, and most people would stop here. But I just want to go into more detail to see you understand what we're doing here. In between the brackets. We've written hello world in job script, and you're going to hear this in other programming languages as well. This is termed a string literal. I know it's a weird thing to call it, but it is just called string literal orders, a string literal. It's just a way of defining a kind of value called a string. And what string will a stream is? Just text in programming. It's I don't know why. We don't just call it takes, you know, Why do we call a boat a bush? I do not know just the way it is. And a string literal tells Java script that that takes his daughter and it's not part of the code. Otherwise, how does draw the script distinguish between the word we wrote the alert and hello world Hello World is known in both JavaScript function is just words. You and I have created and putting it in those little blue speech marks tells Jarvis. Rotate. This is a string little. It's not part of the code. It is just daughter and you have the brackets, the parentheses, we've already said to execute a function of draught strip, you have to enclose it in parentheses. It's just a rule that we have to remember and you can see we ended the statement with a semi colon, just like in English when you gotta end every sentence with a period or a full stop. Same with JavaScript. You've got it in every statement with semi Colon. Not strictly speaking, you don't have to use a semi colon. It's just good practice to use this. Emiko, that's what I do. 4. cosole.log(): something else, you're gonna be coming across a lot off in Java script. Another programming Languages is what's known as the console log. Enough said. Let's get into it. Oh, actually, before we get into the reason why console log is awesome is because remember those alerts we just written? They are horrible men we don't wanna have. Let's be popped up over time. It's frustrating. So an alternative to this is Consul Mark. Okay, And I said, Let's go So it's open up our control and it start typing us So you'll see here that this console helps me. Because if I start writing cons, you can see tell me. Okay, console. So if you forget keywords, you can kind of do that not to excess objects. Properties an object you to a period or full stop. I'll get into this later. Don't worry about open up, but the most popular one that you need, Teoh remember, now is what's called this console log. So let's go console log similar. Remember, we have to use the parentheses to execute a function and its console log the word dog and Bob's your uncle. These dog printed to the screen and Let's try to get console log. Let's try one plus one. Think that'll work? Yes. The answers to and true. We could have just gone one plus one directly in the console. Same thing. Okay, Evaluates to To. But this brings me to something more important. What is Consul? Where did that come from? How does it fit into the page? Well, if I might console look sorry, That's kept If I typed console and I just push into that see, what gives us gives us a funny looking object. What is this? Has got a little triangle. Let me click that and you can see ALS the properties that we have access to on this console . How awesome is that? Then you can just see the loggers on the screen. That's literally the log that we just use. So we use console but log. And this brings us to something very interesting that I want to chat about. Now let's get into it. 5. What is the BOM: the console object gives you access to the browsers console went to see Net, and it allows us is developers to log certain results and alerts and warnings to a screen. But what is the console? How did we have that makes it available to us? Well, you need to understand the window object that's where it came from, and the consoles part of the window object. What's the window object? Well, the window object is supplied by what's known as the browser object model. Or you can say bomb for Short Raza object model. And the bomb allows JavaScript to talk to the browser about things added in the content of the page. So, yes, Javascript can interact directly with what they use is looking at on the wheat page. But there's also other information that the browser window gives us. What other information will things like Navigator screwing location history? The window object is the root element off the whole website. Think about what King sitting on his throne in all those peasants and subjects beneath him . The king, in this case, is the window object that defines everything that you and I can do on a webpage more than just manipulated content. Uh, no, no, it's difficulty, actually. Picture. So let me let me try and just draw a picture for you. Hope it helps. Let's picture the whole universe of the browser and the week page and everything that'll tabs everything in this blue box and at the very top off this box, you've got the window, and that's the entire browser. That's from trying to say that defines the whole universe in this window, provides two broad categories or functionality to us. It provides us with the document and then by document I mean, it's the website. We actually looking at titles on the screen buttons we can click on. The other thing it gives us though these things like I mentioned, they never get a location, screen the history, and I hope the sinks in because this is an awesome aspect of Java script in the console and how things fit in with each other that most people don't understand. And I'm sharing some awesome knowledge of things that I have that it's taken me a long time to live, so I hope you appreciate it anyway, moving on moving on so we know what the window object is, and each browser Ted has its own window objects. So when you've got two different tabs open in your browser, they're can't she? Each other's objects with one has a window object, and the other one has an entirely different window. The other thing with mentioning here is that they know standards for the browser object. You know, like for Java script. We've got the standard A script. Well, they all know standards for the ball and the whole HTM document. You know, we re type out HTML code Haider's bodies. Paragraphs, then, is a property off the window object. Remember, because the window object is king and a very useful window object is. And you guess that the window console and you can access the objects of a window by using the dots so window dot console would be how to access the consul object. But remember, we didn't type window dot We just talked console, and that's true for window objects. You don't have to write window dot so it's exactly the same if we just wrote the word console 6. What is the Window object: So we've seen the window Object rules everything. Well, let's see some of the properties that we could access on this window object. So let's open up the console as usual, and I'm just gonna make this but smaller so you can see what's going on. Now. If I drag this console right, narrow and wider, you'll notice. See some numbers on the screen and then showing you the width in pixels and heightened pixels off what the Web pages. And we can access these properties directly, which isn't or something. So the first thing I want to show you here is in a with an auto that's a that's instrument in the but you know what, and I'll toe What's how awesome is that? So this for show you the whipped inner and the without What I mean by that will have a look at this image. So the reed is the Inuit, and the purple is the outward includes outward includes those scroll bars and all of that, and better example. Evil so gots in the heights and outer height trying us window in the heist window outside. Okay, and this is what I mean these in the hunt. No time. You've also got the screen. The screen object that's available via the window object at that time. Make seen. So within the window you can access the screen, and that gives you access to not a whole lot of other properties like Lift and Top and UAL these things. So let's go. Screen top was 39 pixels. There's this little gap yah or what screen lift screen lift. That's this big area here, and he has a screen to find what I mean. And what about the entire width of the screen and the entire heart of your computer or laptop screen? Well, I'm gonna introduce you just on the ass now, quickly. And that's document. Remember how we had console the block and it just logs into your console. You also got document, and you can write to a document. And remember what the document waas there was your actual HTML page. So let's go document Doctor writes open parentheses because this is a gyroscope function. And now let's right window scream with and then you got that's what to my screen, and we could do the same with hot. It's in a quick protest is if you push the Pero it goes to your lost written statements. I didn t write off the whole thing again and I was right out hot. Yeah, How awesome is that? So those are some useful commands with the window object and the screen object. But why would they be useful? Think about if you want to perfectly align and motile that pops up. When you do use the screen, regardless of the device they're using, well, you could use some of this and just mathematically always pick the center. Just one example I can think of. A lot of this is fun. You can explore and try hands a few different things. Okay, so what other examples can I give you? Ah, window open is a colon open literally opens a new window. There's also one way we can move it around. Show you Maybe that is critical examples. Let's go. Let's create a new variable and call it mile window. We can call whenever we like, and it's now go window don't open and you allowed to pass a few perimeters to the window. The 1st 1 is a euro. In this case, we wanted just to be a no euro. The 2nd 1 is features within zero features. But now let's say we wanted a small window. So we want to do what? The 200 a height off. That's 100. If I push into what's gonna happen, it's gonna open a new window calls that No, let's say I want to move that window around. I want to do that. Well, we've got this variable called my window, which is why I did it in a variable. And we're gonna get into variables in a lot more detail later. So let's go my window because that's what we called it. And thats going, move to married and this just pick a random number and I watch what happens when a PRESENTO will return. Well, where to go for removed upon. Yeah, there it is. So I moved the screen. So these are just some fun things you can play around with on the window objects. You know what else is really cool? You can also never get history to say we were on this page, and now I went to Apple. I would say we're at Google, and I would say we navigated to apple. Okay. What do you mean, you is access the window object. And within that history, the history object. And we could go back and ball Jungle. Becca G. Becker, Google, Google. Ah, there's also location. You can see the current week page you're on. So if we go window and we excess location objects and we go a trip, the guy tells you that that's the page we currently on. So you can see this release or some stuff going on here, and I employ you, encourage you to go and explore. Feel free to google some of the stuff and just get familiar with the window object. It's also enjoy 7. Deprecated properties: remember how we said the window object gives you access to whole of other functionality other than the content of the Web page? Well, one of those is what's known as the Navigator, and I just want to say is just are exploring these things. Just understand that some things might be depreciated and by duplicated, it's very much a programming term, and it just means that no longer supported. So you're gonna get some weird results sometimes, and an example of it is navigator dot ep code name. They always give you Mazzella. Even if you're not using Mozilla, there's a weird kind of thing that happens. Another example. Navigator dot name and just boys gives you. So you might be asking, Why is it still around? If it's well, according to the HTML living standard, thes values must be returned, and the only reason they still around school backwards. Compatibility what I mean, but that will think about Atticus Bolt with these functions in the past and our Sunday if they're moved it, those EPS would break so they removal could break an app that the beans on them, in other words, and you know, as with the other Web standards. We pretty much always in a bit of a transitional facts. So until that happens, just be just be careful was electricity. 8. console.log(), console.info(), console.warn() and console.error(): before we move on to other code. I want to jump back to the console object that we were dealing with previously because it really is something that you're gonna encounter all the time in Georgia school. So I want you to really have a solid understanding of what it is. We know that the consul object is primarily used to log text another daughter to the screen . OK, we've seen some of that and the many properties on the console object and the most popular . We've been through this blogging stuff to screen and remember. To execute a function, you have to use a parentheses. That's why we always go console dot log parentheses and within the parentheses. We included a string the truth. But console log is not the only method available to us. Therefore, categories of output you can generate enjoy a script. It's Consul. Mohk console in for consul worn and consul era. So let's quickly code some of these and we can get some flavor is to the differences between them. So let's get into some more awesome console admitted that you may find useful, so let's type your console dot log. Okay, we really seen Log. Let's say Long, Logan Dog, just because it rhymes. Another protest is if you don't execute this code, which wanna keep writing JavaScript or shift return goes to the next line. No, let's try our hand at info. Let's say info in for that's do one and the last one is era and that you can tell they all work exactly the same way. You just passed one argument to order these one or more. We just passed one argument, which means it up. We've just passed one string of text into each one and then L But they're all printed to the screen, but in different ways, which is what you'll see now you got. Now you might be thinking, Well, what is the visual? Represent? Difference in representation between console dot log and console dot in, for you can see that warning an era t have different visual references, which is useful for your night because in different parts of your code, you might wanna have different kinds of warning, which is why that's awesome. But there's not really any difference between those two. And yes, you are right isn't a difference between those two in the console, but you don't only use error messages in the console. You can also use air messages with node, and you can use it with es Lintas. All ears Lintas are, by the way, is it's a program that checks your coat. So what I'm trying to get at is within those pieces off software, it will come up with different colors or can come up with different colors. So you may want to use it in those scenarios, but for our purposes here doesn't matter and 99% of the time, you're probably gonna use console dot log anyway. 9. console.assert() and console.count(): The cool thing with console is that we don't only have console dot log available test. We also other methods. What are some of these other methods? Well, let's have a look. It's exciting stuff. One of them that I want to show you now is called console dot bassett, and a search is just a myth. It on console that takes two parameters. Can you got to feed the function? Two things. The one is just a boy and expression and buy bullion. I just mean Drew Falls and then you go to feed the second parameter you're to feed. It is what happens when that assertion fails. It gives us some sort of an alert. Let me give you a practical example. Let's say you developing a site and you only want people above the age of 50 into the site And why? I don't know. So let's say you got it. Gentlemen, in his age, age equals 35 can, and let's say he wants to come into your side. Well, let's say in your code you want in a lit where you want to let the user that is not a lot into your stuff. Your console. Dr. Search. Remember the first parameters of bullion. And what do you want to happen? You want age to be great to then 50 Remember? And you're second. Perimeter is what you wanna happen when? What? You want to stay to the user when this fails. So in this case, if it fails, he's gonna be below 15. So you want to say excess? Denied? You're too. You are too young. Two into here. What do you think's gonna happen when I push return? You guess that it's come up with a decision and it gives you the air message? How cool is that? Another cool method is the count method on console. What's the Consummated? Well, let me show you. It would be easier that way. Consoled up count takes one argument, and that is the label that you want to give it. And it tells you how many times something has been done. So let's say you got a button and you want to know how many times they use is clicked on the button. All the count consoled account me that does is it keeps track of how many times has been called simple, right? Let's see a connection 10. count(), table(), dir(), time() and group(): Okay, Okay. Let's see. Console that count in action. So let's go Some a simple case. Console that count and this is a fine thing. Withdrawal scripture. Just start typing and go for it. You won't break anything. Console dot count console Don't count. How many times do you think it's in a show? Of course. Three. So that's click Internet and etc. Default takes because we haven't provided any parameters and it's showed you how many times has been called three times. What's a more practical example? Let's say you got some function call again. This is a four loop, so don't worry it. We're gonna get into these later as well. Let's just say way to call this thing five times and then we call console doctor count and we can posit a parameter. You can write anything in there and they'd say I have been called by pushing to know what you think is gonna happen. It's gonna be called five times, and it uses the takes that you put in here to call it up. So that's console doctor count. Okay, what's another important console? Mated. You need Teoh be aware off. Oh, and I almost forgot about this. It's console dot Do you want Consul? That log? But console don't do it. And I was gonna sound weird. Is that Prince the Java script? Representation off the object to the council console dot Log another hands. Prince takes him all representation of the doctor. What? I mean, well, you can see on the current screen we've got Google open if I console, log the document. And remember what the document waas That's right. The documents the page itself. So if a girl console log and I log the document, what's gonna happen? Well, what's cool is it gives me the actual document and you can see when I hover over it. This chrome console highlights the area real urban area. I can open it up after the hitting of what? The body. I can look at the whole occasional structure but say I don't want that Say I want to know what methods and objects are available on this from a jobs report. Will console log doesn't cut it. And it's way you top console dot dir and I can do the same thing. Let's look at that Looks the same. Look what happens when I open it? How cool this is. You can see ALS methods and properties available from a josko point of view on all of this . You got clicker, Vince. You can enter it, which we're gonna get into later. Key downs, all of that cost. So that's another important thing you Teoh be aware of with Consul met a national top that not many people know. All right, what else is they? What are sissy? Oh, yes. This table, which is quite called console table, give you an example. Quickly. Console dot table. Now, if I just execute table, nothing's gonna happen because the table needs a list. If you think about a visual representation of the table, well, you need daughter. So in Java script, what we referred to is giving daughters. It's called an array. It's an array of daughter, and you enclose are right in square brackets. I'll show you what I mean. So console table, Open square bracket. Let's go one to three, should you? One moment, Mr 14 close square bracket Close the brackets execute And how calls that literally shows your table. You can even be more practical with it. Say we once to display an object. What I mean by that call Don't worry too much about the coat. Just understand the concept but what we're trying to do here. So let's say way we want a dog dog name. Okay, The first name is poor and I don't know the second name Surname is patrol. So now we've got this dog name. What about if we want that displayed? Well, OK, first question is, you probably say, Well, it's just console. Log it. Let's console log, dog name and that's cool. You can see it displays it as an object to us, but the other way is a table method. So let's go dog our calls it. It lays it out for you. The name and the property name and the value. Sorry, the name of a So that's console. Got tape. Another one we can look at. Let's just clear this console. Another one we can look at is console about group, and what happens is sometimes you can really see are full of screens, getting you get too many locks and you want a group specific category of logs all together so you don't have them all over the place. How do we do that? Well, that's from console dot group. Let me show you an example to say we want a group. Don't think about the group as the group hating, so we want to call it dogs. And within a we want a console. That log I don't know on Irish wolfhound. Okay. And we want a console that log a sausage dog. If I push return now, can you see how awesome it is? It's literally grouped it and you can collapse it. So if I open it, I can see my Irish will find. Start, stop. And did you notice how when I clicked? Entered automatically expanded it? Well, we can stop that. If we do what we did before which group collapsed an hour ago, it literally collapses of by default. It doesn't open it by default. Whatever but lists within lists or something is with groups. You can do that. You can make a list within list that see how that's done. Okay, so let's say we want a list of animals and within the animals we've got cats and dogs. So we got console grew, coalesced. It's called the main group animals animals? No, we want stocks. So, you know, console that log group that's ever hitting called dogs. And then we want to do the same. We want a console that log Irish wolf, and we want to console that log. A sausage dog. No, let's say we want in that group consoled a group end and no, we want gets. So let's go, kids. And what's the cast? Science sign? Ease sign means, and it's on the way to go. Oh, wait. Wind at his back. Then let's do one more console door log another kids. Greg, Greg Noll, Greg raked Reagan Dole. I think that's one. Okay. And then we can go Console group. And now what's gonna happen when I execute this Julius? Hey, Here you go. Group collapsed animals group dogs, Mogul group in group. Why this word? Um no amount Swift. Okay, you know what happened there? But they is your group of animals, which is at the very top level. If you open that up, people, dogs and cats said control that law. One more. I want to show you its console the time it's similar to the group meet admitted, and that you need like an opening and a closing core in order for the browser to know when it starts and finishes, it just helps you meet your time. So say you've got a function and you want Optimizer weeps active super quick. You want to know how long it takes for a producer in the venture and use console the time. Let me give you an example. Let's say consoled off time. It's a meth timer, for example. And let's say we want to console that log some random number times. Another really big number. Okay, and we want to measure how long it took. So console that loss of time end and Sheila Bair mind. Just just bear this in mind. You're description hesed image the start description because you think you might have multiple times going on. So you want to make sure that this hitting measures that heading and let's push return. Bob's your uncle, that is, Hummel took. That's the result. Sorry, this this it's makes it number. But this year it's the result of your Tom McCall. That's along the top 2.34 milliseconds to complete at this point you his former exploding, and it's good, because what you've learned is that the consul object of powerful group methods or not you got time methods on it. You got assertions you have warnings in for there's a lot you can do just the consul object . And not many people know that he's gonna put your head. But for you and I mean by far the most important is console look, and we going to see that a lot. Let's continue with the course. 11. Substitutions: before we move on from the console is just one brief thing. I sonically go over and it's something called substitution ins. And given its name, you can kind of guess there it's replacing something with something else because you substitute one thing for something else. In this case, in Java script, we denote this with the percentage sign. In other words, you're placing a percentage to sign with something else. For example, in Java stopped a percentage s means, you know, be replacing that with a string. So, for example, with console dot log, high percentage ace, The second perimeter is what's replaced with percentages. So in this case, it's gonna display with highly. And the East keyword is not the only thing available. You also got the C and O, which replaces different things into just CSS and objects. In this case, let me show you a quick example, and then we can move on cool. So let's look at an example quickie. Let's say we want to top 33 green apples and we want to put these in a variable so we'll create your variable and we'll get into variables later and how much we sit 33 Apple. So let's say four number equals 33 and it's a The color is green, so the two very rules would on number. We got a color, and we want to display 33 green apples. How would we do that? Well, let's use substitution is console. Look, the name's a job, which is D second thing. Wanna displays the stream? So what's that? That is Yes, a drunk. See, that works on invalid or unexpected token. What did I do wrong here, but to enclose to close it off? Uh, the man Silly, silly, silly. But the percentage after that should be before, says we uh, not having a text. Editors, Excruciating. But several placed the personage D's with the number and percentages is with the color and we get the three green apples. The reason why this isn't so important now, because Year six, his temple rituals and these could be in a substitution to this approach is this can me quite cumbersome. Let me show you what I mean. All right, well, we've redefined number and color, so let's let's use the latest index and you see how much more easier to issue a console that log and you use back ticks. Now, with the new Year six Syntex. And it's that little button above your tape killed to the left of the number one key, depending ITT's this little thing, you can see what it looks like the Okay, but two of them, instead of quotation marks and inside, I can write. Oh, and then whenever you want to put in a variable, you gotta use the dollar sign. And I've been squiggly. Close these brackets. Okay, so yet the number it's the color handles. And if I execute that, get exactly the sensing, the preferred approaches, the sick and approach, which is why I don't know anyone I hope on too much of our substitutions. Cool.