JavaScript for Beginners (includes 6+ real life projects)

1. Welcome to JavaScript for Beginners: JavaScript, the hottest programming language today, from full blown websites to mobile APS to programs like Slack and Spotify, JavaScript is everywhere. It's the modern programming language every developer needs to know. If your brand new to Web development and don't know where to begin, Look no further. This course is absolutely for you. In this course, you will learn everything you need to know to get a strong understanding of the fundamentals of JavaScript. It doesn't matter if you're already super skilled in Web development or your brand new decoding. This course was designed for you. JavaScript is one of the world's most popular coding languages, and it's Superfund alert. In this course, you will learn the basics of JavaScript, variables, Web page, interactivity, data types and data structures, conditional statements, functions, JavaScript, quirks that make it different from all other languages, objects, classes and object oriented programming. AP Eyes and Ajax requests and everything in between. There's also five mini projects for immediate practice, and one final project to test your overall knowledge. Join today to become a JavaScript developer 2. 7 JavaScript Facts: Hello, end. Welcome to Javascript for beginners. All right, I think we should actually start off with saying what JavaScript is, where it's available and furthermore, what it is not. So let's just start off with number one. What is Javascript? Not JavaScript is not Java. There's a big distinction between Java and JavaScript. Java has been around longer than JavaScript. JavaScript was only named JavaScript so that it could leverage some of the popularity behind Jave a back in 1995. And they're actually not related at all. In fact, Jaffa is strictly a server side language, and JavaScript is almost strictly a front on language, although it can be used as a server side language now because it's been adapted to work that way. The key take away here is Java is not Java script. So whenever you're talking about JavaScript, please don't just call Java, because that's going to confuse other developers. Number two. Every Web browser uses it. 100% of all Web browsers use JavaScript. Now you as a user on let's say, chrome or Firefox. You can decide to disable javascript if you want to, but your browser comes with it so whenever you download a browser. Firefox Chrome Safari Edge. Even Internet Explorer comes with JavaScript support. In fact, JavaScript is actually the only language that you can use on the front end. So let's put that in there to JavaScript is the Onley coding language that you can use on the front end. It's the only one. There's HTML, CSS and JavaScript, and that makes up the entire front and stack of any website. HTML and CSS are not languages. JavaScript is a coding language, and it's the only one out there, and that actually contributes to its massive growth and popularity. Because there are no other choices. You have to know JavaScript to be a front and Web developer. Okay, Number four. As a developer, you're going to hear lots of words. You're going to hear things like Jake Weary React view, angular libraries and frameworks. There is a difference between all of these, and we will get more into this as the course goes on. But behind the scenes behind Jake Weary react view and angular, it's just vanilla javascript. It is all written in plain boring JavaScript. A library is a JavaScript file or a set of functions that allows you to make shortcuts. So I, for example, J Query is a library, and that's because it doesn't really come with all the extra things that ah full framework does. And a framework is like reactive you or angular, where it comes with more than just binding event listeners. That comes with a certain way of writing things that comes with a certain style, ah, coding style. That is on how you actually write your code, and it does almost everything you need. So that's the difference between a library and framework. But we'll talk more about those in the future. Number five. Can you use JavaScript online or offline? Yes, the answer is yes. You can use Js offline. Now, Why do I say that? Or how do I say that Rather is JavaScript whenever you hit a website, whenever you have you a website, your browser downloads a bunch of HTML CSS and JavaScript along with images and maybe a few other files, and your browser tries to cash those so that it doesn't have to reload it over and over and over again. Once you have a javascript file, you can execute that file in your browser, even if you don't have Internet. So even if you don't have Internet throughout this entire course, guess what? You can simply open up your browser and you can type code right in here, which is something I'll show you in just a little bit. And it will just say Hi world and that is JavaScript. So you don't need Internet for it. With that said, a lot of websites still have some sort of a p I out there and you're going to still need Internet to actually leverage the full usage of JavaScript. However, you don't necessarily need it all the time. JavaScript files JavaScript files and in dot Js So just like an HTML when you were learning html, it was dot html or CSS was dot CSS or dot python and taught pie, right? So it's the same thing, so dot Js and you're going to see this all over the place as well. So all JavaScript files end in dot Js and last but not least, you can create entire programs using JavaScript these days, so it started off. Once upon a time, you could only create programs in certain languages like C or C plus plus. And then it sort of shifted towards things like python recon. Make entire python python programs for an operating system, and now you can actually do the same thing with JavaScript. And the nice thing about that is it's one language to rule them all. So what you can do is you can create an entire program, and it can be on multiple operating systems. It can work on. Your mobile device is doesn't matter of its IOS or Android or Windows or Mac or Lennox or anything else. It's one system to rule them all. And a good example of this is Spotify, Spotify and slack. These air two huge applications that have for a very long time been using something called Electron. And what this does is it basically compiles all of your JavaScript into an actual program, and then you can go and send it to people to download on Windows, Linux, Mac os, android, iPhone, you name it. It has support for it. And so now JavaScript that's actually write this note. JavaScript is used to create entire programs, so that is sort of seven fun facts about two JavaScript. We're going to get into a lot more of the stuff as time goes on to finish off this video on the left. You see, my editor I am using ves coded is made by Microsoft is completely free. And you can get it by simply downloading it. You're going to need a text editor like this. So if you don't already have one, I would suggest V s code on the right. I simply have Google Chrome open. It's a browser. And in fact, all I did here was I went to a boat blank. So brand new page, right click inspect. And if you go into your console up here and let's make that bigger, you're gonna actually write javascript right in here as well. Hello. Hi. I just like that And we have some javascript. So you're going to see that my screen is split up into two. So I've got my editor on the left, and then I've just got ah, browser on the right. Something like that. If you have two monitors you can use to monitors, you can just flip between full screen on V s code or your text editor and chrome or whatever browser you want to use. It doesn't have to be Crumb. But this is how I have it set up in the video so that you can see all of it just laid out in front of you. Where that said, let's jump to our next lesson where we are going to create our first JavaScript script. 3. Your First Script: All right, let's jump directly into JavaScript. At this point in time, you should have a text editor like V s code. Adam Sublime. Something like that. And all we're going to do is create a new file. And I'm just going to say this as a dot html file and I'm going to call this your first script dot html. So at first, it looks like we're creating an HTML file, and in fact, we are. So I'm going to create will make that smaller. I'm doesn't to create a quick little HTML five layout here, and the first thing I want to do is I want to create a java stripped and so inside of my HTML, usually at the bottom of your page just before the body tag. You're the ending body tag. We put a tag called Script in Here script and slash script, and that's how we pretty much do anything with javascript inside of the page. Now, if you're following along with this course, Really, you don't actually need this stuff. You just need doc type html head body and then put script inside of your body. I'm just gonna leave that in there just, you know, for reasons cause heavy escort automatically puts it in there for me, so I'll just keep it in there. Let's call this your first script. And where we have our script in here, all I'm going to do is type alert, bracket quotation. Mark. Hi. My name is Caleb. And then I put an end in quotation marks and unending bracket or parentheses, and then a semi colon. And so if I save this file and I go into chrome and I simply hit commando or control Oh, you can also go into file open. And if I just open up that file, it will automatically execute my JavaScript for me. And so there's an alert in here. This little annoying box that pops up says Hi, my name is Caleb. And any time I refresh the page, it says Hi. My name is Caleb. Hi. My name is Caleb. Let's do it again. Hi. My name is Caleb. What happens if I click it once more? It will say hi. My name is Caleb. And that's because everything between this tag here this opening script tag in this closing script tag. All this javascript is going to run. Now, at this point, we don't know about things like syntax, which is like the structure of the language. Why do we have a semicolon? Why do we have a parentheses? Why do we have a quotation marks? What is an alert? We don't know that stuff yet, and that's actually OK. But for now, what I would like you to dio is just create a little script like this. So if you need to feel free deposit video and just create a script says hi, my name is whatever your name is, and just make sure it's it's an alert. Make sure it looks a lot like my code here. The important part is lying. 15 Tow line 17 here. You don't have to worry too much about this stuff. We're not looking at creating a responsive website, which is what basically this is doing. We just want some javascript to run and then open it up in your browser. There is an alternative to doing this if you want to. You don't have to do this in the file. You can also do this right in your browser. So if you open up any page right click Inspector, and you're gonna want to click on the tablets as consul. And in here, This is just your JavaScript console. Your able to write any javascript you want. So, for example, I could say alert JavaScript for beginners if I could spell it right. And there we go. It says javascript for beginners, and you notice that it looks like the exact same code as what I wrote over here. The text is different inside of it. We'll talk about that later. Ah, but basically, it looks the exact same. So you could do it that way. Or if you wanted to. You could use code pen dot io, which is a tool for basically sand boxing html CSS and JavaScript. And I'll show you that one in a couple of videos from now. But these are the two main ways that we execute JavaScript. Basically, your large scripts go in here. And if you ever need to test anything hey, just open up your browser. Right. Click, inspect. Go into your console and you can write any javascript you want. The next thing to be aware of is how do we link to JavaScript files? Well, if you're familiar with HTML and CSS in CSS, it's a link. Elements in JavaScript. We do script SRC instead of a draft. SRC is equal to Let's go scripts and your first script dot Js we could do type is equal to whatever type we want it to be. And we basically just closed the script. And what this is going to do is try to load from the scripts folder and is going to look for your first script jazz. Now this does not exist, so this is not going to work. But that is how you would use an external file. So if you have multiple HTML files that you want JavaScript to run on, you don't have to copy and paste it. You can simply use an external file, and that is something you should have learned in CSS and HTML as well. So your task for this video is to basically just create a script in open script tag, a closing stripped tag. Make sure it's just above your body. Don't want it up in the head like I wrote up there. Let's get rid of that. You want to just above your slash body tag and you know, you have all your HTML in here and then just alerts to the world. Hello. My name is. And then whatever your name is, once you've done that, let's head on over to the next lesson. 4. A Brief History: All right, let's talk about a brief history of JavaScript. I know this is not the most important thing in the world. I also know this is not the most interesting thing in the world. But it is, in my mind, a fundamental of learning a language. You sort of want to understand where it was coming from in order to project where it is going. And JavaScript, to me has a fairly interesting history. So first things first JavaScript was or is. Actually, Jeff Script is a relatively new programming language. In fact, it's called You Have a Script because it was a scripting language. It wasn't actually a full programming language until recently. It was developed in the year 1995 and it was made entirely in 10 days. Now the JavaScript that we write today significantly more complex and has taken way more than 10 days to create. But the original JavaScript prototype only took about 10 days throughout the late 19 nineties. Going into the early two thousands, a lot of people actually thought JavaScript was a fad because you had to write a programming language to make a website work, and you actually had to write a programming language on the back end so that you could do things like accept payments and you had to write a programming language on the front end so you could have small little interactions and it couldn't do very much back then. So it's understandable to think why it would have been a fat. But then, as more people came online and more people wanted interactions, JavaScript actually didn't really take off. Not not super well anyways. Flash became the default animation language now, as most of us know, flashes not really around anymore. And it's basically all JavaScript. And that's because Flash had too many security problems and JavaScript well, as it was maturing slowly in the background, it was able to do more and more things that Flash was able to dio and eventually just completely replaced it. When one day Google and a bunch of other people said no more flash. This is a major security problem, and Flash basically was given a a timeline said like, Hey, you've got a couple years to live, and then we are cutting your support. We're cutting off your life support, and we're going with JavaScript so everyone be prepared for that. And that's what ended up happening. And so throat that period. While Flash was sort of on its last legs, JavaScript really took hold. People really started to adopt it and make it better and make all sorts of libraries and frameworks that we use today. I had mentioned a few videos ago that JavaScript is the Onley front and programming language out there, and well, that was true at one point. It is not entirely true. There are other programming languages you can use on the front end, but they're not really four websites more than therefore programming languages. And the biggest threats to JavaScript successes is one called Web assembly, or blossom for short. It actually didn't even get proper browser support until late 2017 early 2018. Now, Web assembly is basically an actual programming language. A riel programming language that runs very, very, very fast is much more efficient than JavaScript for your browser. However, it hasn't really taken off, and I think it hasn't taken off because JavaScript grew so quickly through just a few years , really, about a decade and Web assembly was late. Tow launch. They were supposed to launch way before 2017. Originally, JavaScript simply grew too fast for Web assembly to catch up. That being said, if Webb Assembly did become a standard, that would be a great leap forward for basically every website or any program that's running through a browser. But I don't think that's gonna happen anytime soon. But, hey, that's neither here nor there because we're learning. JavaScript and JavaScript has huge demand today, But it's just good to know that if one day JavaScript was to be replaced for front and Web development, it would probably be by Web assembly and so fast forwarding a couple of years. We now have a server side JavaScript, called node dot Js, and is massively popular frameworks like React, created by Facebook and view dot Js. There was another one called angular, created by Google and basically view dot Js eight up the entire angular community. Ah, and React is king of JavaScript frameworks. But going back touching back on that node.js. Basically, there is an engine that can read your javascript and break it down into very performance code, and so you can write javascript and your computer. Basically, you can think of it as a way as it compiles your JavaScript into C and then as it's executing your C code, I'm doing air quotes here, but your C code. It is actually way faster. And so this is server side JavaScript, meaning that you can actually write JavaScript on a Linux machine and actually have it connect to a database and all those things that's fairly new. It's fairly popular to these days, and the nice thing about that is you can write one programming language on the front end, one programming language on the back end, and you can write basically any program that you ever need that needs to be connected to the Internet. You have javascript down pat, and you could do so many things with it. That said, when it comes to server side languages, it's still not as powerful as languages like Python Python can do significantly more. For example, a lot of AI artificial intelligence and ML Machine Learning is written in Python. It's not written in JavaScript, so that's a brief history on JavaScript. Where is going to go? Nobody really knows. I sort of suspect JavaScript is going to keep taking off again. It's the only front and programming language out there for a website. And so as more and more people come online, it becomes more and more popular. There's no choice. It has to grow, and you can think of it like this. JavaScript is the only child in a family, and so it gets all the attention. Whereas when you talk about other programming languages like C or Cortland or Java or python or any other programming language out there, you can basically hot swap most of those. In a sense, you can write an entire program in C. You could also write entire program in Python. Where is you don't really have that choice when it comes to front end Web development. And so we always use JavaScript. And I think because of that JavaScript is really going to take off ah, lot more than it already has in the coming years. 5. Introduction To Variables: Hello and welcome back in this video, we're going to talk about variables. Now, if you're not very interested in math, if you don't like math, maybe you're not good at math and you're hearing the word variables and you're freaking out a little bit. Don't worry. It's actually not as complex as it seems. A lot of people think of variables as, Hey, we're going to be right in calculus. And to be totally honest, me, my sit like as my person. I don't know calculus, and I work with variables every single day. Hundreds, maybe even thousands of them. Variables basically are just a way to store little pieces of data on your computer and then use them later. You can manipulate them, you can check them. You can tell your computer to execute a certain command based on a particular type of variable and the value that that variable holds. So let's take a look at what a variable looks like. And so I'm just gonna create an HTML five website here, and you know what? I don't need all that stuff that's call us very bulls variables and because we're not gonna have any HD melon here. I mean, we would put it in here generally, but we're not going to. We're just going to write some basic JavaScript for now. So we're going to stick with a script tag and down here, we're gonna put another script tag. And so when we start talking about variables, really, all we mean is a piece of data that we can swap in and out. And we do that with var. And this is very interesting that it's saying Django template. So let me quickly change. That's to regular HTML. There we go. And so we have a VAR declaration. This stands for Variable and Vier basically says they JavaScript. Just so you know, we're about to declare variable and then you give it a name, so whatever you want that name to be is equal to And then there's different ways of declaring different types of variables and we'll get into this overtime. So we're going to keep it simple for now. So I'm just going to say my name is Caleb and let's make that a little bigger here. So I have a variable. It's called name and the value is Caleb. And so we know of this alert function already. We'll talk much more about this down the road. If I just simply said alert name and I open this page in Google Chrome, you can actually see that. It just says Caleb. That's all it does. If I wanted to swap this out at any time, I get, say, Caleb, Darlene, save I'm gonna go over here hit Refresh says Caleb, telling you could even do more than that. So let's let's create another variable. Let's call it course. What course are we currently taking? Right now we're taking JavaScript for beginners, and you can see that it wrapped onto a new line. That's actually OK. It's just because my phone is a little too big here. Then underneath, you could say alert course and let's go ahead, refresh our page and this is javascript for beginners. And so this is really all of variable is now you can reassign a very bill at any time, so we're not using name anymore. I did mention earlier. Semi colons are thing. Generally, this tells a computer that hey, this is the end of the line and whatever comes after this is a new statement, so just as an example, we would not want to put these both on the same line like this, because if we did that and hit refresh, we're not going to see anything. In fact, you can actually right click, inspect and you can see that we have an error in here and let's open up our consul and you can see we have an error in here says something that is too hard to read in. There we go. Uncaught, syntax, error, unexpected token var And it tells us right exactly where it is. So if I click it and says Line 11 and showing me right here so that's pretty cool. So that's a debugging little pro tip there for you. And so even my editors saying, Hey, something's not right here. And so what we want to do is usually we just put that on a new line and put a semi colon at the end. This is the simplest way of maintaining us, and if we click, refresh again, it alerts us as expected, and there's no error in our council. And by the way, any time you run into a JavaScript, they're always open up your console. Take a look at what that area is because it can tell you as a javascript developer. What the problem, actually, as maybe it is something that the user did. Maybe it's something the developer did. By the end of this course, you'll be able to know exactly whose fault something is. Usually is the developers. They didn't implement something properly. Okay, so we have variable name and course, and we're just alerting this. Let's go ahead and overwrite our variable. Now we could it simply do have. Our course is equal to Python for beginners. And as I say this and go to refresh this page, it will now say python for beginners. And so that works. So basically we've created one variable. We didn't use it at all. And then we overrode the entire thing with a new value in here Now, because this variable has already been declared as of our this gets into hoisting a thing we'll talk about later down the road. We don't need to declare bar again. It's already there, so we really only need to declare var once on a particular variable. And after that we don't really need to do that anymore. So let's go ahead and save this and hit refresh finances. Python for Beginners Council didn't complain. Things were looking good. All right. One more thing that we should go over is what is with this. So you see these quotation marks around there? There's two other ways to do this. So we could do, for example, of our age. How old am I? Well, I'm 30. We could do this. And if I alert age and refresh this page, it says 30. And if I go in here and type age, it already seems to exist. It also gives me 30. And if I type in course in here, it already exists. Oh, my browser understands that there are variables in here that are accessible to the council . And so now we're sort sort of starting to interact with JavaScript in a script tag or a dot Js file. If we were to move it to an external file, and over here we can access some of these variables as well. So we're sort of starting to connect our editor and our browsers terminal or the council. So we see here, age does not have quotations around it it can. It can have quotations around it. Ah, you can also see that the semi colon was basically optional. I didn't need it, and that's OK because I was putting on my coat on new lines. And JavaScript is smart enough these days to understand that for a good practice, let's go ahead with that cynical in that in there and refresh our page, and it's still says 30 looks no different. But if I type in age here, you can see it has the quotations around it. This is a fundamental difference between different variable types. We will talk all about this down the road, but it is important to sort of get the idea right now. That's a variable that's called a variable, a variable actions called var var one. Anything that has a sentence or spaces in it. Any sort of space is like what you see in here that needs to be in quotations so we can't just put 30 30 30 30 30 with spaces in there and alert of our one. This is going to give us an error. There we go. Unexpected number, but if we put quotations around it, give this a refresh? It works. So at this point, you should be a little bit confused if you're brand new to javascript about what all this is about. So when we use quotations, this is called a string. So this is a string, and this is a type of variable that basically says, Hey, this is a sentence And then we have Let's save our two in here is equal to just the number 30 or any number or 30.5, something like that. And this is called a number. Or in other programming languages. It's sometimes called an integer. Actually, in this case it would be afloat. But that's neither here nor there. At this moment, we will get into that a little down the road. And JavaScript actually sums this up nicely is and they say, how we don't care if it has a decimal point or not. We just care. Is it a number? Is it not a number? And so when you're dealing strictly with a number, you do not need quotations around it. There are no spaces in there. You just have numbers and decimal points, and that's it. No commas, no dollar signs nothing like that. It is simply numbers and a period. So now if I go ahead and say, Let's alert far, too. And what I want to do here is get rid of these. Refresh our page. It's going to say 30.5, and it here. If I type far too, you can see 30.5 has no quotation marks around. Let's make that bigger has no quotation marks around it. But var one does. And that's because this is a string and far, too, is a number. So why is that important right now? Great question. Well, as we're learning JavaScript right now, it's not important to us. But it will become important to us very, very soon. And I think the earlier people understand this sort of difference in a variable type, the better your programming is going to be down the road. So that's all there really is for this particular video in the next one. Let's go ahead and start murdering some variables together so you can actually see sort of how a variable is supposed toe work, because right now these variables and I mean we're hard coating them, so they're not really variables were just saying, Hey, assign courses equal to JavaScript for beginners and then immediately override it. So that's no use. The variable needs to be something that can change. And, hey, if you don't fully understand this entire video, don't worry about it. Move onto the next one anyways, and eventually this will all just click into place. It becomes a lot easier once we actually start writing more JavaScript together. 6. Merging Variables: Hello, End. Welcome back. In the last lesson, we learned a little bit about variables. In this last, we're going to learn how we can merge them together. No, merging variables together like combining sentences, is called Concoct a nation. See that word here? Concatenation. You'll often see it just as the word come cat as well. Why is it called Cat Nation? I don't know. We could just call emerging. But hey, developers like their fancy words. So hey, we call it concatenation. Now in this video, I am going to actually do most of this in the console. So I go to the console and let's go ahead and make chrome bigger because we can. And so on my left, I just have ah, merging variables that HTML open. That's just the source code in here. There's currently nothing in there, no JavaScript, and it looks like a blank page, and we have a terminal in here. So I could say alert. Hi, and this will work. Let's go ahead and clear this clear council and let's create a couple of variables together and then can cat need them? So let's create an age and an introduction to who I am. So let's say Var intra was equal to Hi, my name is Caleb, and I am something something, something years old. So this is my intro. And if I type that you can see that it just spits out exactly what I had written already. Now, if I type in of our age is equal to 30 type and age again, we can see that age doesn't have quotations around it. So we know it's actually a number, and we want to inject that number in here. So how do we go about doing this? Well, we sort of went about this backwards because we defined this. First, we define intro first, and then we define their age. But guess what? We can overwrite variables so we can say intro, and it tells us what the intro is already is equal to instead of just having this blank in here. What I can do is I can actually quit the sentence by putting another quotation mark in there, put a plus sign, and then the variable, another plus sign and then a quotation. And there are different ways of doing this and more modern javascript. But you're going to see this all over the place. We're going to learn this way first. And so basically, this is saying, Hey, intro, you're already defying so we don't need toe use. VAR says Hi, my name is Calvo. Good old Calvo tabl e in. My name is Caleb and I am And then it quits the sentence and says, Hey, also add the age in their whatever that value is. Put it in there and then Oh, hey, start that sentence back up again with another plus sign and then another quotation and just put the rest of the sentence in there. And so if we hit enter, we can see Hi, my name is Caleb and I am 30 years old, and honestly, that's all there is to concoct nation. Now the problem gets into when you try to concoct Nate numbers. So if I create another variable called, uh, number two, I guess, and we'll make that 40.123 we can see in here Numb to is equal to 40.123 Now what happens if I wanted to say 30 40.123 So the number should look 3040.123 How are we gonna can Cabinet that? That is trickier because these air numbers and when you do a plus sign with numbers in most programming languages, it simply adds the numbers together, and that's not what we want. So if we did age plus numb to look at that, it gives us a number we don't want 70.12 to 99999 This is a funny little thing in computer science where there is actually no hole number on JavaScript occasionally runs into This is actually pretty cool example. But instead of saying 70.123 it says 70.12 to 99. Nn nn Nn and Infinity, infinity and so on. But this is not what we want. So how how do we merge these together? What? We can do this by contaminating a string in here. So remember that last lesson? Right side strings and numbers are a little bit different. Kind of important to know. Well, already we need to know the difference here so we can do this and always said was, Hey, take the number 30 added to an empty string and empty sentence and then add the second number to it. And so if we hit enter, we can see this is no longer actually a number. This is a string and we can tell it to string because it has quotations around it. And so this is saying this is a string of 3040.123 Also note how it says 0.123 and not 1 to 29999999 is because it's not a number. The computer doesn't have to work out a rounded number like that. It only has to say, Oh, this is a string. So yeah, I understand that there are numbers in here, but we don't have to perform a bunch of math stuff behind the scenes to make that work. This is just as if it was regular English letters. Negus doesn't have to be English letters. It could be any letters. Really? Ah, but yeah, just the difference between letters and numbers here. And so this one now thinks that these air all basically letters instead of numbers. So let's go ahead and add one sentence with two cats. So let's say ah of our cat one. His name is going to be a Zephyr. Is that for and of our cat two is equal to Henry. So these are my two cats. By the way, you're going to see this undefined. Whenever use Vyron, this gets into hoisting. This is a more complicated JavaScript feature to sort of tackle Right now, we'll tackle this a little bit later. But if you see undefined like this, don't worry. Nothing is wrong. It's just sort of JavaScript away of registering a variable and then registering the value of the variable. It's called hoisting again. We'll get into that in the future. And so now I want to say, var sentence is equal to I have two cats and the 1st 1 is going to be cat one. And the 2nd 1 is going to be cat too, and we could just leave it here just like that. And so what we're saying here is hey, I've got a sentence. But I also want to put the variable of cat one in there so whatever that is going to be, it happens to be Zephyr. But it could be any other name in the world. And maybe it's been over written 100 times. We don't know. Whatever that end result is, we're gonna put it in here, and then we're going to contaminate a another piece of the sentence, just the word end. And then, using the plus sign, we're going to concoct Nate Henry. We're just cat, too, so let's go ahead and type sentence and you can see I have two cats, Zephyr and Henry. Furthermore, we could actually get even deeper into this as well. We could dio of our age one. So let's say Age of Cat One is going to be four and of our age two. That's cat to whatever that age is going to be. We know it's Henry. I know his age is currently, too, so we've got a four year old and a two year old cat. Now we want to actually can captain eight into another can caffeinated sentence already so sentence has already been defined, and as you can see, I can take this into my console and it tells me, sort of in faded out text. I have two cats, Zephyr and Henry. Let's go ahead and say sentence is equal to sentence plus, So it's gonna take this value, and we're gonna can cat need something on top of that? So we want to put ah, period at the very end here and let's say and they are something years old, so something and something years old, so four into this is what we want to get into here. So it's always helping me to when I was learning how to concoct. Nate is just put like underscores in there. And then you can simply do your funny concatenation kind of style in here, where you have closing quotation plus sign and then in here we could put age one plus sign quotation and you can see it's an opposite order. So goes quotation plus sign, and then to get back in You do plus I in Quotation, and we're gonna do the same thing over here. And this is just so I'm going to be aged two and let's go ahead and hit. Enter. Oh, and by the way, we can put semicolons at the end of this. But we don't necessarily have to because our consul or chrome in this instance knows that every command is its own command, so we don't have to do this a semicolon thing. But again, it's just a good practice to get into. As Javascript gets older, we use semicolons a lot less and cool. You were probably screaming at the screen saying, Caleb, age to does not exist. It is called age one. You can see that here. I didn't call it aged two. I just called it a judge. And so let's go ahead and redo this. We could also just redefine or just define a variable called Age Two, and this would fix it. Let's go ahead and change us to age. And there we go. And now it says I have two cats, Zephyr and Henry, and they are four and two years old. And so if I go ahead and clear this and take sentence again to make that bigger, I have two cats whose F 100 they are four years old. So I've got aging here. We know ages two, we've got age age one is for we know that we have a cat one. We've got Cat two and then we've got sentence. So we have done a bunch of variable declarations in here. We have defined variables and we have merged them together in a sentence. And then we emerge it into that sentence one more time. So that's basically all there is to concoct nation. Now, you're going to see this all over the place because javascript is a language where you can modify your Web page, your HTML and even your CSS, and you're going to want to eventually take a variable and replace some text on your page with whatever that variable value is going to be. And so this is how we do can Cat Nation. Now, if you're interested in giving this a shot, you can do exactly what I did in this variable and just say, Hey, my name is whatever your name is. I have a cat or a dog or I have How many books do you have? Maybe you have 1000 books and you could do something like that. It's always good to go in there and give us a shot. Don't forget. If you ever have questions, I am here to help you. You can always leave a comment or question down below 7. Console Logging: Okay, Welcome back. In the last lesson, we talked Book and cat Nation. And this lesson we're going to talk about not uncashed nation. We are actually going to look at a better way to print variables to our consul instead of using alert. So, up until now, we have been saying alert test and then when we refresh our page, it just annoys us with this. And every time we hit refresh, It annoys us with this. And you know, at first when you're starting JavaScript, that's not a big deal. But you don't really see this functionality in the wild. People don't use alerts too often anymore. Unless it's like, Oh, you started to write a post and then you hit the back button. Are you sure? Because, like, do you really want to leave? That's a totally different thing, actually. Just sort of looks the same. So in here, what we want to do is just log something to our consul in here. And so whatever javascript re we right in here, anything. It could be literally anything. We just want to put it into the console that we can see what it is, and this is a very, very useful way of debugging your JavaScript. So let's go ahead and create a variable. And I'm going to put my name is Caleb Tallinn and of our profession. I am a teacher by trade. Yeah, that's actually entirely true. Also Web developer, So teacher and Web developer. And let's get rid of this alert. And let's say you just have to put on your imagination hat here for a second. But let's say we have 10,000 lines of JavaScript and we don't know what the value of name currently is. And so we have a town of code, and what we're going to do is we're just going to pretend that is way up here somewhere, and we can't really access it easily, but we want to see what it is. So, yes, we could do alert name, and when I go over here, it'll tell me what it is. But that's annoying. And if you happened to be in a loop, we'll talk about loops later. This could execute for 100 1000 generations. It will just keep alerting you just over and over and over and over and over. Your browser might even crash from it. Who knows? That's not a good way to live your life. A better way to live your life as Let's go in here and let's say, consul dot Log. And then we could just put anything we want in here. So let's say name and then a comma and let's put the name variable in year so that's actually put name Colon and so you can see this is a string and this is a variable. Let's go ahead and refresh your page here, and I'm gonna have to make that a little smaller. Thank you. So we can see name Caleb Tallinn, and it executes online. 29 of the file called 60 Underscore console underscore log dot html And if I click it, it'll tell me exactly where this is being executed. This is a great way to debug your code. In fact, this is actually just a really good way of sort of figuring out what's going on in code. In general, let's go ahead and type profession in here and again. I just added a comma and we can see in here. It says. My name is Caleb Tallinn and teacher and Web developer is my profession so moving forward? We're probably going to use console log a lot more often than we're going to use. Alert Alert is just a little obnoxious, and it sucks sort of having to click into it all the time. And it's like, Hey, here's alert. Okay, here's another alert click. OK, here's another alert click OK, and just it gets a little manana as a little too much, especially as you start writing more and more code. And the bright side about this is when you're writing code that goes on a live website, it's only going to show up in your console. So if I get rid of this council here and I just refresh, nothing happens. Lisa looks like nothing's happening. But if I right click, inspect, go into my counsel, this continues toe happen. And so really only a developers ever going to see this. And so if you're testing something out in production on a live website, you can always use this method. Now there's a couple other ones you can use to so we could do console dot warn warning, stranger danger that went to lower case and I want uppercase Ah, this one goes yellow warning. Stranger danger. And we could also do. Consul, let's make that lower case counsel dot error error, and we'll just pace that over and over again. And because these are all in their new lines, they don't need a semicolon. But let's throw it in there anyways. And now we're going to see a warning, a regular console log and an error. And there it is. We have warning. Stranger danger. My name is Caleb, calling him a teacher, a Web developer, and also error, error, error, error and also the respective lines that they're all taking place online. 28 9 29 and line 30. So that's a better way to live. Your JavaScript life is to use console log. You're not going to use console War Council error too often. Generally, we just use console log. Now, if you come from another programming language, this is very similar to the print function. So if you use Python, for example, this is like print. If you come from a huge P background, it's like saying echo something and the Javascript way is simply rejected. It did. Ah, consul dot log. So again moving forward, we are going to be using console log a lot more, so you're gonna want to make sure you know how to open up that Consul in your page again. That's his right click. Inspect well. Generally open up your elements first, and you'll just have to click. Consul. Sometimes you have to go in here and click Consul, depending on how big your screen is. Ah, but there's always a consul tab in there, and you can always just open that up and see what the code is doing if it's giving you any warnings, logs or errors. 8. Selecting HTML Elements: Hello and welcome back in this lesson. We are going to get into some of the actual reason why we're learning JavaScript and that's to modify HTML elements. And so the first thing we want to do is we want to create a script tag. We always need the script to be just above the body. Oh, by the way, the reason that it's above the body and not in her head. Well, we used to put javascript in the head, but now we put javascript at the bottom of her page so that all the extra HD milk unload. First we put it at the bottom of the page so that, for example, if we have and h one in here hello world and we just refresh your page, we see hello world. And basically, if we're going to be using any elements and JavaScript, this needs to exist first. The HTML needs to be there before the JavaScript is loaded. And in some cases, if you put javascript above this, the javascript will load. It will then try to look for an H one called Hello World or has a hello world text in it and it won't find it because it hasn't been loaded. And, yes, one line can make a difference. So in most programming languages, generally a program runs from the top to the bottom. JavaScript is no different. It runs from the top to the bottom. And so we're gonna put hello World in here. Ah, and let's give this an I d. So this is just some basic HTML and I have an HTML course if you need a quick little HTML refresher called the ultimate HTML developer. And so let's just give this an I d of test. Now. When we save and refresh us, this is not going to do anything. It's not going to do a single thing for us. And so what we need to do is we need to learn how to actually select this element and then be able to modify it a little bit. And so JavaScript is largely known for working with HTML and X html markup basically anything that has tags like this. JavaScript is pretty good at working with, almost like it was designed to work that way. So there are many different ways to select an HTML elements or a group of elements or like all the H ones on a page. But we're not going to do that. We're just going to stick with something basic called get element by I D. And so it looks like this. That's Ah, move that up. Documents dot get element by i d. And then we just put the idea in here, and so this i d matches test, and that's up there. And if we save us again, we're not gonna see anything happens. Doesn't matter how many times you refresh all it's doing is grabbing this element note. So this is called a node. We need to actually store this in a variable. So let's go ahead and put this in a variable called test. And again, if we refresh your page, nothing is gonna happen. But what happens if we go into our consulate type test? Oh, look at that, says H. One with an idea of tests. And it's actually selecting it for us. Look at that. So moved down. Nothing move up, and it has selected it for us. Now we can do things. So if we had dot we can see all sorts of different things in here and this is where JavaScript gets to be. A very, very big world. There are so many things actually, so far we are looking at event listeners, more event listeners, more event listeners, more event listeners. And it just keeps going and going and going. We can change this style. We can change the title tag. If we wanted to animate it, we could give it a class name or remove a class name. We could do all sorts of things in here. But let's go ahead and figure out what the Texas and this is just dot inner text and that's just going to give us the tax. We can also do this with HTML. We do dot inner HTML and so we can see that this now says hello world, knowing that we can now go in here and say test dot inter html and this is if we want to write HTML so we could say, uh, do an underlying Although that's deprecating. Let's do an underlying take anyway since two how low slash you world and let's go ahead and save us and see what happens. Damn! Look at that. It underlined it for us. But If we go and actually view the page source, there's no underline. That's all. JavaScript. So what Javascript did was said, Hey, grab that node. Grab this H one element, this one right here and change the Inter html. Now what we could do is we could store the old stuff, too, so we could say the Inter html is going to be high. Welcome to JavaScript floor beginners, but let's go ahead and store the old stuff. Let's do of our old text. Let's make that camel case is equal to test dot inter html, and that's just going to grab that inter HTML and store it in a variable and will be able to access it through a console. So let's go ahead and save this. Hi, Welcome to JavaScript for beginners. And if we try to access this very bowling here called old text, we should just be able to write. Let's make this bigger. Well, l d ah, hello. There it is. That's the old stuff. We stored the old stuff in a variable before we changed it. And now we can actually change it back as well, because we still have access to test as a node. Let's go ahead and change the inner text to the old text. And so now we're using variables pretty efficiently at this point. And at the same time, we're also grabbing this entire HTML elements this node and we're saying, Hey, yeah, I understand that you wanted to say hello, world, but, hey, when the page loads and against the JavaScript actually work some magic and change it for us, that's what Javascript did for us. Now again, there are a lot of different things we can do on a HTML node, so we could type in test hit dot and then we could literally just scroll through this for days and days and days and days and days. And you can see this list just goes on and on and on and on him. And so JavaScript is a really big world in all. Honestly, we're not going to learn about every single thing in here because we are going to be here for a very, very long time. My teaching methodology is to teach you how to learn efficiently so that if down the road you're working at a company and they're using something called scroll to Well, you know how to access scroll to and you know how to figure out what that is. Even if we don't learn it in this course now, we're going to learn a lot in this course. But there's just no possible way we can learn every single thing. So what I would like you to do as, ah, little test a little, a little bit of hands on experience creating new html file and just create any tag It doesnt not have to be in a church. One give it a ni de of something. Doesn't really matter what that ideas as long as it matches this value here. Not this one. This is the name of our variable. But this one right here and this one here those do need to match. So create that element and then select the node with get element by I d Remember, we used documents dot get elements by idea. We'll talk more about what that dot means down the road when we get into more advanced javascript and then just change the inner html, maybe give it underlined, maybe italicize it, maybe make it bold. You do anything you like what you write any HTML you want in there as long as you use inter html. And if you're ever just going to change the inter tax, you could always just do inner text. And then your browser doesn't have to parse and render a bunch of JavaScript or not JavaScript html. It could just do regular text, which is actually a lot more efficient. Go ahead, Give that a shot. If you get stuck, leave a question down below and I am happy to help you. Otherwise, let's head on over to the next lesson. 9. A Way To Share Code: Okay, let's talk about a way for you to share your code. That's relatively simple. So if you don't use get if you don't know I get or get Hub is I'm not gonna force that on you right now. It's It's good to know, but right now, if you don't know that, just know that there's a better way to share html CSS and JavaScript, and that is in the form of code pen. So if you go to code pen dot io and you can click of button, this has just start coating. And really, all this is going to do for us is create three sections where we have HTML, CSS and JavaScript, and we can literally right any HTML CSS and JavaScript in your that we want. And then we can save all of this code, and then we can share it with someone else so that they can see the code as well. So let's go ahead, and I'm gonna put each one in here and say Hi, my name is Caleb, and what I'm actually going to do is I'm going to javascript this a bit, but I D Span is equal to name so html doesn't look any different. Ah, the CSS. Let's change the span. Let's change that span to have a text decoration of underlying And in the JavaScript let's go ahead and select name as an I d and change it. We're gonna create variable. We're gonna call it Name is equal to document dot Get, Actually, let's change his view. I don't really like this view. Let's do, Yeah, this one's a little better here, and we can also make that a little better, but we don't need to see the C s s anymore. Okay, that looks a little better. Yeah. There we go. Okay. Document. Don't get element by i d. It's camel case. So every word that's not the first word has a capital letter. We want to get name that matches this idea in here name dot Inner text is equal to and let's say this has been hijacked by my cat named Zephyr. And let's go ahead and give this a safe. And Ono is asking me to log in. You can totally log in creating count. It's completely free. Okay, so I just logged in, and here we go. We just want to change the text so we save it and you can see in my your L says code pen dot io slash Caleb Holley and slash pen and then some hash, and you can actually just copy and paste the entire code to someone else. So if I open this up in a new tab, it's going to save all my code in here. That's pretty cool. And so that's a great way to share your code. You can also change it. So name changed by my cat. And when a refreshing here, it also changed the name There, there it is. Now, if it in any point in time you're working with Consul Law, you can also just open up that consul in here. And you could conta log really anything you want so we could do con so new console dot log test, and it shows up in their cool so you can collect save at any point in time. You can even take someone's code and fork it, which means basically, you're going to create a copy in your account of their code so it doesn't change their code it all, but it gets saved in your account and you can like it and you do all sorts of things. You change your view, but most of all you can take that you are l. And you can copy and paste. It's two friends. You can ask a question with a girl with your sample code in here like a Caleb. Why doesn't this work? And you could put all your code in there. That's super great way of sharing code and asking for feedback and asking for help. And lastly, when you are creating a project, if you want to, you can always use code pen and just share the final screen. You could take a screenshot of the final screen and share the code pen you earl in your skill share project. Of course, if you don't want to use code pen, if you don't want to create an account, you don't have to. You can continue to use HTML files and JavaScript files and take screenshots. That's totally okay to just again. Don't forget, you can always share your project with the rest of the group and most importantly, me. I will take a look at your code and your final product, and you know If you want any feedback, I can also give you feedback. But you have to make that project on skill share first and moving forward. It's definitely a good idea to put any of the code that you're writing in here. Ah, in a skill share project so that I can actually give you feedback on it. I'm not going to use code pen too much throughout the rest of this course. I just thought this would be a great way to show you how you can share your code in a nice and clean way. 10. JavaScript Mini Project #1: All right, let's take a look at our first mini project. It's time to start putting some of the things we've been learning to practice because what better way to get hands on experience than to actually experience it? So we've learned quite a bit so far, and we're going to use just a few of the pieces that we have learned. And what we want to do is we want to in this mini project, concoct innate a string and variable together. And then I want you to output that string to the page of that final variable. I want you to output that to the page by selecting an element and changing the inner HTML. So let's ah, let's quickly write that out. Number one. Create a script. You can catch a string and a variable together Number two, using dot inter html and get element by I d. Change the inner html of an element to be what your variable is. So that's really it. It doesn't seem like a lot at first, but you were going to do this over and over and over and over again in your Web development career. And so this is really, really good practice right off the cuff. Now, if you want to see the solution, just keep watching this video and I'll show you exactly how I do it. Otherwise, if you want to give it a shot, now is the time to pause the video and try doing this on your own, which I strongly urge you to do. Definitely try to do this on your own first. But you know what? If you don't feel confidence in doing all that just yet Hey, that's OK. You can watch my solution, and then you can give it a shot after, if you like. So I'm going to create an H one in here. Just some large text, and I'm going to say my favorite cat is and then in here, I'm gonna put a span of cat name, has an idea of cat name, and it's gonna start off with the name Zephyr. And when I refresh my page in here, you can see my favorite cat is effort. Now, what I want to do is I want to exchange his effort for something else. Now I'm going to take a slightly more complicated route here, and I have to start with my script, right? So I'm gonna start with an opening and closing script tag, and I need to select cat name. So variable cat name is equal to documents dot Get element by I. D. Cat name. And if I save and refresh, you'll see. Hey, nothing's happened. That's expected. All we did was put a note in to a variable. And if we do this, if we type in cat name, you can actually see that it's being selected years. So let's hinges. Cat name and it's just selecting Zephyr. That's it. Now the goal is to basically take a string and can Katyn eight to that string. So let's go ahead and actually do is a little more complicated method. And let's call this variable called Zephyr, and we're going to get the cat name dot inner text. And if we do consul dot log is ever and refresh our page here it says effort just like that . Right in there. It's a little squishy, but hey, that's OK because this is just for debugging anyways, So we have his effort in there, and that's the current text. That's the current inner text. But for this mini project we want to concoct. Need a string and a variable. So we have a very bullying here. So let's can Cat named the string to it. So let's actually change us. Let's overwrite it. Let's do Zephyr is equal to Zephyr and let's cum cabinet a string to it. So it's going to say my favorite cat is Zephyr is equal to Zephyr, whatever that currently is. So it just happens to be this text in here and Henry now this sentence is not going to make sense, cause I'm plural. Izing it. But that's OK. We don't have to make it make sense right now. We just need to make this work. And so let's go ahead and type cat name on the dot inner text or inner HTML is equal to suffer, and so this gets a little messy. But hey, let's give us refreshing says my favorite cat is ever and Henry now, actually, a better way of doing this is not necessarily overriding this. That was just an example. We would probably want to new variable for this so called cats, and we would change us two cats as well. So we're gonna create a new variable called whatever's efforts has ever his name in there Plus and Henry. So if we work through this backwards, we have cats is equal to Zephyr. What does ever zephyrs equal to the cat named inner text? Well, that's using a variable called cat name. We know that that's this element up in here and getting that inter text. So we know Zephyr is basically this value right here. That's pretty much what it is. Actually, that is exactly what it is. And so it's kind of like saying Zephyr, Katyn, eight and Henry. And when you put those together, it looks like this. And so that's what in her H e mails going to be, your inner HTML is now going to be a Zephyr and Henry. And so that's sort of how it works. And if you ever need to replace variables with hard coated like strings or other values, that's totally okay. Honestly, whatever helps you learn this in your own way, is okay, So let's go ahead and save us. Refresh. And we can see that cat name is still in here Cat name and its likes all of it cool and that is how we replace it. Now. If we wanted to double check this, we could always view page source. And in our view, page sources says, my favorite cat is Zephyr. However, when you actually view it with JavaScript enabled, it says, my favorite cat is ever and Henry. Okay, so that's how we would go about doing that. Don't forget, you can always create a code pen, and you can share it on skill share in your project. Or you can just basically take all of your code. You can copy and paste it in there. You could take a screenshot of how this works. You can sort of do, ah, visual studio on the left and then the final output on the right. You can take a big screen shot of this and just say that in your project, and I can take a look at it and give you some feedback and hate. If you get stuck on this, don't forget. You can always leave questions, comments and concerns down below, and I will get to them as soon as I possibly can 11. String Manipulation: Hey there. I hope you enjoyed that many project. We're gonna do a few more of those down the road and, ah, we're sort of going to learn a bunch of stuff in between them so that we can, you know, learn a little practice a little, learn a little practice a little. I think that's a really good way of learning JavaScript. And so in this video, we're going to learn about string manipulation, and it sounds fancy, but really it's not. It is actually super super common in JavaScript to so string manipulation is basically we take a variable that's like a sentence or maybe a number, and we we manipulated. We change it. We force it to be something different, and there are several different ways of doing us. But in this video, we're just going to go over a few of them. So we're going to go over to lower case to upper case, split joined slice and sub string. There are way more of these, but I think this is a really, really good way. Do you sort of just get used to how we can manipulate some data? So first and foremost, let's create an H one with an i d of sentence and let's go ahead and put some Lauren Ipsum in here. And so when I say this, it's just gonna look pretty boring. And that's okay. We're not trying to make this look nice right now. We're simply trying to do some javascript. JavaScript does not necessarily mean things Look nice. CSS means things look nice. JavaScript means things are functional. And so let's go ahead and create a script in here. And we want to grab all of this text in here. All this Laura MIPs. Um, so we could do you know of our sentences equal to and then we could pace are lower MIPs, um in there. Or we could do it the javascript way and say documents does get element element by i d sentence. Let's call this sentence node, and I'm enough to make that smaller. Hopefully, that's still OK to see. And then let's do of our sentences. Eagle to sentence node dot inner text and let's go ahead. Just console log this council dot log The sentence is going to be sentence. And when we refresh and right click, inspect every click, inspect and go to our council. Ah, there it is. We see all this gross text in here, and this one might actually be better if we change the view to Let's change a to bottom. And so we have a sentence in here and it's a a bunch of Lauren Ipsum stuff so we can go ahead, get rid of that console log We know that is working and that our sentence is in fact, a string. How do we know that it's a string? Well, we could always do type of sentence tells us it's a string that's pretty cool. We can also just type sentence sentence and because it has a quotations around it, you know, it's a string, so let's just clear that out And let's put sentence back in there and you can see that it's sort of highlighting itself there. But it's not actually doing anything yet. So cool. We have our sentence text now. What if you wanted to make this all uppercase? Let's do var Upper sentence is equal to send in start to upper case. That's literally all we have to do, and we can actually test this out in our consul, too so we could do send in stud to upper, and you can see that it's auto feeling for me and then opening and closing bracket. And what this says is this is a function. We'll learn more about functions down the road. But basically this is going to actually take our sentence, the Lauren Ipsum text, and it's going to do something with it, and that's what this means. These opening and closing brackets or these parentheses means it's going to do something with it. Let's go ahead and hit, enter and look at that. It's all uppercase now, all of it. So we know that works, and we can simply keep that in there. We can also do of our lower sentence and let's go ahead and do sentence dot to lower case. And by the way, we're creating new variables here based on whatever this string is this variable. So we're not overriding sentence over and over again. We're taking the same sentence, which is this value in here, the Laure MIPs Um and we're saying hey, make it upper case. That's not gonna work either. Hey, make it uppercase. And then also hey, make it lower case And so basically, we're just copying the data over and over again without actually overriding it. So if you ever want to see this actually work, we could go ahead. Let's just copy that. Grab that whole thing Copy Paste and let's type lower sentence. Now we can see that it's all lower case. The first l should be upper case. It's not. It's lower. Case are right here. Should be upper case. It's not. It's lower case. And so that worked. What if we just wanted to get, like, the 1st 10 characters of a sentence? For whatever reason, we just want the 1st 10 and this is actually strangely useful. You wouldn't think you would use something like Just get the 1st 10 or the 1st 4 but yeah, we use it quite a bit in JavaScript. So let's go ahead and create a sub string. So we're gonna call this 1st 10 Chars is equal to that stands for characters sentence dot sub string, and this is going to take two optional parameters here, really out of the first ones. Not really option. So let's just do 10 and let's let's not do this in here. Let's go ahead and do it right in here where we can experiment so we can actually see what is returning here, says M. Dolar. Sit. Omit. So did todo m dollars it, um, it So what this is doing is saying, Hey, start at character 10 and grab everything else. So we've got 123456789 10. So it took those 1st 10 characters and completely disregarded them, and it started here M dolar sit omit, probably butchering that Latin, by the way. And we can actually see that. That's what it returns here. M dolar Sit in it. Cool. And so that's how we use sub string. This is pretty cool. I didn't didn't actually know that the council would do this, but it gives me from an optional length. How many characters do we want so we can start at the 10th character and let's say we just want to the next 10 characters. There's 10 11 12 13 14 15 16 17. We could do the next. That's a 30. There we go. So we have between character 11 and 30 showing up in here. And so that's what sub string does. And that's actually really useful. Because sometimes, you know, maybe a user inputs that you, Earl, and they don't put www in front of it. And maybe your website requires that or http in order to turn it into a proper link. This is where we do something like that. So let's go ahead. This is gonna be 1st 10 characters. Let's do zero and 10 and let's do zero and 10 in here cause this is basically a live preview. Zero and 10. We see Laura Ipsen lets you 11 Lauren Ipsum 1st 10 And because that variable says 1st 10 characters, let's do first 11 characters. Okay, These next two are going to introduce a new data type. So we know about strings and we know about numbers. We haven't really used numbers too much, but we know about them now. What happens if we wanted to get all the individual words in here? Well, in javascript, we have this method called Split, and basically we can tell it to split anything. So split anything in here and we can tell what to split on. So we say split on every sentence. What this is going to do is take every single, every single space in here like what we have here. So it's just gonna match whatever is in there, and it's going to turn this into a list is going to turn it into an array. So let's go ahead and let's do a live example. Don't do sentence dot split and let's split it on every single space. And let's do words is equal to and look at that. We have all the different words in your and if I make this bigger, we have all the different words and we can actually open and close this and it's going to show us all the words. So we have a list now. Now these air called a raise and JavaScript this call and a ray let me type that out. It's called an array Hurry array, And so really, all in array is is a giant list of numbers or strings or objects, which we haven't learned about, or all sorts of other different types of data and data types that we haven't learned about yet. And it can hold all of them in a list and it will maintain that order. So we can see Florham Ipsum Dolar said I met so on and so on and so on. So now we can go in here and we can say Vier all words is equal to sentence dot split and split it on every single space. And let's go ahead and do consul dot log all words. I didn't give this a refresh and this console log for me and this gave me all the words. Now, where is this useful? All right now, in the US, this is not very useful. But down the road, this could be very, very useful. We can use a thing called a four loop and loop through every single one and perform in action on them. We're not going to get into that just yet because that's a little more complicated than what we generally like to do at the very beginning of JavaScript. I just feel like that might overwhelm some people. It certainly overwhelmed me when I was learning JavaScript way back in the day. And so I would like to keep this, you know, nice and simple. Learn step by step, but okay, so we have all these different words in here and Let's say, Let's say for whatever reason, we wanted to peace those all back together. But we didn't want a piece him back together using a simple space. We don't want the sentence to look like a normal sentence anymore. Maybe we wanted to put parentheses around every single word. Well, we could do that. We could do Let's do far. We're gonna bracket the words here and we're going to join all of these together. So we're going to take all words not sentence. We want to take this one because this is the list. All words don't join and then it takes a string. What do we want to join it by? Well, if we do this and that's actually just save this and let's see what bracket words looks a look of that bracket words has all the different brackets around it, to the exception of the 1st 1 in the last one. Well, guess what? We can do some string and cat nation here so we can add a bracket there and we can do a bracket here and refreshing. Let's do you bracket words and ha ha! Look at that. All of our words have brackets around him now. And just for fun. What if we did sentence node dot in her text is equal to bracket words. Hey, look at that. So now we're actually doing something with our page. That's pretty cool. So I'm going to remove that because I don't want to change that yet. And there's one more that I want to talk about. And so, really, when we're looking at this and this, we have split and join. So Split is going to take a sentence and split it based on whatever you want to split it by . In this case, we used just a regular space, and then we took whatever that list of words was and we said, actually join them all together with something else. And so this looks a little weird. We don't actually need to use opening closing parentheses like this. We could if we wanted to use a bunch of spaces, and that's go ahead, refresh and type bracket words and look at that so we could do that as well. And so join and split usually work in tandem together. And there's one more in here. What if let's go ahead, actually refresh us. And let's do all words. We have this list of words in here. What if we just wanted the 1st 3 words? So let's go ahead and type all words dot slice and it's going to say this is a function. That's what the F means. It's a function. Where should it start and where should it end? Let's start at zero, because when it comes to computers, we start counting at zero. As humans, we start counting. 12345 computers. Don't computers go? 012345? Because to a computer, zero is a number to a human. Zero means nothing. There's literally nothing there. So number zero and let's go to number three. And that's going to give us the 1st 3 words. Laura, um, Epsom Dolar So? And then we can go ahead in our code, and we can say far, first three words is equal to sentence. No, that's not right. Already fooled myself. All words dot slice and just take the 1st 3 Just just grab a slice of it. So we just want to slice this. We say, Hey, if this was a giant pie, we want three pieces. Alternatively, we could also dio words dot slice. And what happens if we just said Start at this one here? So six went one too many. I guess on that one, because I didn't count them, Ahmed says. All words dot slice start at number five and go to the very end so you can see here. Ah, there's 20 items in this list. Now again, we'll talk more about lists down the road. They're super super useful, actually. Not super complicated, either, but it's going to start at number five, so it's going to start on 012345 And that's the one we told it to start on. Start on Consecutive tour probably should have used words that I can actually read. Uh, yeah, there is. It starts on consecutive tour, and now what we can do is we can say, Hey, we actually just want every word between the fifth word and the 10th word. We want all of them and that we want to put it into a sentence. So now we can actually do something kind of neat with this. So let's go ahead. Let's grab far middle words is equal to all words dot slice and we want to grab number five to number 10 and then we can do of our I don't call it makes sentence middle words dot join and let's join them with a just a regular space. And then let's go ahead and do sentence. Node dot inner text is equal to make sentence, and that's just give this a refresh and watch how it's going to take, probably from here to here ish I'm guessing, cause I'm not counting the words and it's going to replace this text with those middle ones . Tutta Just like that. It just replaced them for us and again one last time. If we go in view our page source Look at that. We have all of it in here. But hey, Javascript said no. Grab the sentence node, grab that inter text so that we can work with us as a variable. And so we've got a copy of sentence here. A copy of sentence here, a copy of sentence here, here and then with these, we can do different things if we wanted to, and like at the end where basically we took that sentence, we took this sentence. We took all over those words and we broke it apart based on spacing. And then we turned all of those words into bracketed words. So there were no more spaces, just brackets all over the place. And that's where where leave leaves off because we didn't do anything with that. Then we said, Actually grab the 1st 3 words and we said, Okay, well, there's a list of words in here broken apart by the space. That's what split is here. And we said, Just grab the 1st 3 So we grabbed Laura Ipsum Dolar, and that was the 1st 3 words. And then we said, Our we're not actually going to do anything with that. Let's take the middle words. Let's take all the words again. That's all of these Split on the space, Grab number five. So 012345 and then grab up until the 10th word. So 12 three or 89 and then done. And then we said, Hey, you know what grabbed those 10 words and put it back into a sentence so we don't want a list of things. We just want a regular sentence and Then we said I change that text, Change it to be whatever those five words are. And there it is. We have those five words just like that. So this is a base introduction into string manipulation. Now, at this point in time, you're probably thinking, Hey, that's not useful at all. But in the coming lessons, we're going to make use of quite a bit of this. So it's really, really good to know that these exist, even if you don't use them every single day is good to know that they exist. Now, me as a developer has a full stack developer that includes the front end. I use these almost every single day. But, hey, if that sounds like a lot of pressure, you're still learning. JavaScript. Just remember, you are still learning. You are a student of JavaScript. You don't need to be the very best. You don't need to know all of this off the top. Your head can always google it Pro tip. All of his senior developers, We girl things non stop all day. So don't feel bad if you ever have to google it and then lastly, just don't feel like you have to remember all of it because, frankly, you don't. You just need to know that these types of functions exist. So it's like if you wanted to take all of your words and make him uppercase, you don't really need to remember that it's dot to upper case. You just need to remember how to access it. And so, for example, we could do sentence dot and I just type you peopie for uppercase and look at that. It gives me to upper case, and all I have to do is add parentheses around it, and it does it for me. And so it's like a little reminder all the time. It's always there, and you don't have to feel the pressure of knowing all of it right away. Now, I would really, really appreciate if you could give this a shot. Just go through each one of these, write it out by hand. I know it can suck writing things out by hand, but if you write it out by hand, you're going to create muscle memory. And one day when your brain gets stumped and you can't really remember all of it, you know what your fingers were just gonna start typing away and they know what they're doing. You're thinking about something else and your fingers air just doing the work, and it does actually work like that. So go ahead, give that a shot, and then we're gonna head on over the next lesson whenever you're ready and let's learn about accepting some user input and making use of that. 12. Accepting User Input: Hello, Welcome back. Hopefully I didn't lose you on the string manipulation video. I know it was a little long. There's a lot to learn in there, but it's also very, very important stuff to know in this video we're going to learn how to accept user inputs in the form of a prompt. And so when we open a page, it can ask for your name or an age or something like that, and then you can actually work with that. And then you can turn it into upper case or lower case or anything like that. So I just have an HTML file here, and I'm going to create a new script. And let's move this sort of in the center of the screen here and let's create a new script and we're going to use a brand new function. It looks a lot like alert, but it's not alert. It's called Prompt, and this is just going to prompt someone for some input so we could say prompt and what is your name? And when I refresh this says, What is your name? I'll type in Caleb. Nothing happens. That's because all it did was asked for my name. I didn't store it in a variable. I didn't force the HTML to change. We didn't update the document object model. We didn't do anything. We just said, What is your name? And that's it. So while that's a cool function, currently it's not useful. So let's go ahead and make it useful. So let's save our name is equal to prompt what is your name? And then let's go ahead and console log that consul dot log your name is and name refresh. Put Caleb once more. Ha. Your name is Caleb just like that. And so that's how you ask someone for really any sort of data. Now, the big thing to take note of here is that whenever you use prompt, the input always comes back as a string. So if you're trying to add numbers together, so if you have to promise, like enter number one and then enter number two and then maybe enter number three, you might not get the results you're looking for. And as an example, let's go ahead and type name and we can see that it has quotations around it, so we know it's a string, but we can always also type type of name, and that tells me it's a string. So let's go ahead and get rid of this and let's inject this change. These underscores here from custom input to whatever the value was that someone put in there. So when I say what is your name? And I type in Caleb, these underscores. That should change to Caleb. So first things first. We need to grab this note This h three. Let's go ahead, create a new variable. It's called H three note. I guess documents dot get Elham meant by i d. And we're going to use custom input again. That just matches up here. And then we could say h three don't know. Dutch inner text is equal to whatever the name is. Let's go ahead and refresh and say, What is your name? Well, my name is going to be Caleb. Ah, look at that. Your name was or is Caleb. It's change what it is because I am not past tense. I am present tense. Now. What if we wanted to do some sort of string manipulation on this? What if I wanted to make sure l the input all of it is always lower case. Well, we could do two things if we know that is always, always, always, always, always going to be lower case. We could change it right away because a name is equal to name dot to lower case. And whenever we reference name down the road, such as in here, it will always be lower case. So let's give this an example. Caleb in all caps and I hit OK and it shows up in lower case. That's what we're expecting now. If you don't want this to always be lower case and you want to preserve whatever the user inputs and you just wanted to be lower case, just once you could do dot to lower case here, and then we could all stew like a console log, and we can log the original name. And so what we're doing is saying, Hey, what is your name store that invariable. Then we grab the age three note. That's this custom input and we say, Hey, let's grab that inter text and change it. Let's change it to whatever the users inputted. But let's actually make sure that it's always lower case and then Let's Consul logged the name. Now, at this point time, do you think the name is all going to be lower case when we do a console log? Will the name be entirely lower case? Because we said it's a lower case here or do you think it's going to be not lower case because we only changed it this one time? Now, that's actually good question, because different programming languages operate differently in this respect. So let's let's experiment with this. Let's go ahead and put Caleb in in all caps and we can see all lower case. But when we console log, it's all in caps. So this did not actually change it at all. So what we did here named out to lower case It didn't actually change the name value. It just changed it this one time. It just changed the value of this one time, but it didn't actually change the entire name forever. And so this is where we get into a lot more variable manipulation, string manipulation, things like that. Because now we can preserve the user input. That's the name. And we can say, actually, you know, just in this one case, make it lower case, but in every other case, keep it the same because we might want to do something with it. So this is a very simple way of accepting user input. And in the wild, in a live website you don't see this used, you see text fields being used, you see text areas drop down, things like that, and we're going to get to all of that. But we need to learn how to manage user input to begin with, and this is a really good stepping stone for that. So we've learned how to accept someone's inputs, save it in a variable, grab a node and then change the value of that note to be whatever the prompt was, whatever the user input was. And this sort of prepares us for a thing called event listeners, event listeners are how we can basically say, Hey, any time someone types in a text area or changes a select field, weaken, do something based off of that. And it's at this point that our code actually becomes quite dynamic because up until now we haven't been able to accept custom input. We've had alerts that tell us things but we've never actually been able to inject any sort of text or variable information onto the page. And now we can. And so I think, for the next couple of videos were going toe, learn how to sort of work with this a little bit, and that's going to really prepare us for the more future JavaScript. When we deal with the event listeners and more user input and how to manage all of that. And just as a refresher, let's go ahead and let's say name and let's do alert name. What is your name? My name is Kate Lubbe, and they're gonna click. OK, it's just going to alert. My name is Caleb. My name is Galeb, just like that. And that's all there is to prompt and alert. And now you're a prompt and alert pro to be totally honest. Okay, so I just undid that Now what happens if you want some default? Texan here, let's say you're tinkering around and you know you're experimenting. You're learning your playing with javascript as you should be, but every time you refresh the page, you have to type in the name. Well, eventually you're gonna start typing and stuff like this that's not super useful. Let's give it a default. Let's go ahead and the second parameter of prompt is going to be. I'm just putting my name. What is your name? Caleb? And when I refresh, it's automatically filled in for me. And another thing to note in here is when we refresh, Let's get rid of this and let's click OK, and let's go in here and say What is name? Name is an empty string. There's nothing in there now. What happens if hit Cancel instead of leaving it empty while it says My name is null, So let's go ahead and see what name is. Name is a string called No or so it seems. Let's double check that you type of name, and it is a string, and so basically there's nothing in here. In the next video, we're going to learn about these things, called comparison operators to make sure that our input is actually what we're expecting and if it's not, do something else, and this is how we give computers commands based on user input. So let's jump over the next video where we learn about comparison operators, and this is really where everything we've learned so far turns into riel programming 13. Introduction To Comparison Operators: Okay, let's take a look at comparison operators. Operators are the little pieces of logic in a program that tell us to do a certain thing or tell us not to do a certain thing. Basically, it's how we taken action based on a variable value. This is where variables really become super importance, not just about alerting things or console logging, its about giving a program a particular task to do. Or maybe not to dio. And so a comparison operator basically looks like this. Let's go ahead, make some room here. It basically says, If your name is Caleb, do something otherwise or else do something else that's basically all it is. And in fact, in the world of Python, it actually looks a lot like this. Very, very, very similar. JavaScript has a different type of syntax, so the way we make it look, let's go ahead and create a script tag here. And let's take a look at our first if statement. So we're gonna hard code this and then we're going to turn it into a prompt where we can actually accept user input. So let's do far name is equal to Caleb. We're gonna have to make this little smaller here. And then we could say, if parentheses? Because it's doing action, right? If it's going to do an action, you're gonna need some parentheses in there if name equals equals Caleb Opening Curly bracket closing curly bracket just like that. And this is an if statement. So you're saying, Hey, if a variable is equal to whatever you're expecting it to equal to alert, do something and let's go ahead and refresh and it says, Do something now why did you do that? Because you can really see that name is equal to Caleb. And if the name is equal to Caleb now, there's one caveat here is we're using to equal signs. One equal sign means this is the variable. Variable is equal to whatever this value is. That's one equal sign to equal signs. Means hey, is the name Caleb are, which we're checking to make sure that it is actually the right name. So this one is called an assignment operator, and this one is a comparison operator. Now there are several other comparison operators out there, but we're really just going to learn about this 1st 1 For now, to keep it nice and simple. So now let's change this to prompt what is your name? And now I can refresh is going to say What is your name? And if I type in any other name, let's I'm gonna be my cat for a moment. His name is Zephyr. I'll type in Zephyr. Nothing happens. And that's because if we go in here and we type in name, we can see it. Zephyr. And we're saying, Hey, if the name is equal to Caleb, do something, It's not Currently it's saying its effort, But if we refresh and I type in Caleb with a capital case so it matches this value right there, he says, do something cool. So now we actually have something to work with. Here we can say, Hey, ask the user for some information, and if that information matches what we're expecting, Weaken, do something else. So now let's make this a little fun or let's make an H one here I d is equal to just call Welcome. And let's turn this into eight nodes of our welcome node is equal to documents dot Get element by idea it auto fills for me That's nice name. Make it smaller. So it fits on one line. And now we have this in here, and we can say, Hey, if the name is Caleb, Welcome note dot Inner text is equal to welcome to your website, Caleb. And before we give this a shot Ah, I just noticed that we have document I get l element by i d. It's not the name. Welcome. In my fit of excitement, I got a little too ahead of myself there and, you know, fun Fact that happens to all of us. So now I'm gonna hit, refresh and say, What is your name? I'm going to say my name is Caleb. And now it says, Welcome to your website, Caleb. And if I say any other name, if I said my name is no, not Zephyr. Let's be Batman. My name is Babin does nothing. Batman is not supposed to be here. And Snow, we have some logic and something happening based on the fact that my name is Caleb. Now, what if we needed this to be a little more accepting? Because right now you need a capital K. If I type in Caleb with a Capital R, A lower case K, nothing happens. Okay, well, now we need to actually change this. We need to say if name is equal to Caleb with a lower case K. Well, that's not gonna change for that. And that And that and that and that. Those are all the different variations and mix and matching them, Of course. So what we can do is we can say, if named to lower case. So we're gonna take whatever the name is turned into lower case and then compare the lower case value. Let's go ahead and do this. Lets you all uppercase Caleb. And then let's say okay and says, Welcome to your website, Caleb. And that's because we said, Hey, if the name all capital letters, Caleb, and then we force it to be lower. Case is equal to lower case Caleb. And now it's going to match on every single one. We could say K a l O b. Damn. It still works. And this is where string manipulation gets very, very useful. So now at this point, we need to take a look at the actual if statement itself. What is making this trigger while it's not just the fact that it does match Caleb. Yes. It's looking for a match with the logic behind it is saying, Is this statement true? Does name dot to lower case equal? Caleb? Well, if someone were to type in Caleb like this, would that match? No, those air different to a computer. But we said to lower case, which is the same as saying, Is Caleb equal to Caleb? And if yes, this would be true, Your computer then says Yep. This is true. Logically. Beep, beep, beep, beep. Yep, This is true. Make it do something. And so your if statements should always return true. And then what happens if we don't return? True, how do we handle something that is the opposite of true? How do we handle something that's false, or how do we handle multiple scenarios? Well, those are things we're going to get into in just a little bit for now, I think we should just practice a simple comparison operator just to sort of get the hang of it, because this is where we can have a lot of fun with it. We can do anything with our website at this point. based on just if statements. And then, lastly, let's take a one more quick look at the syntax here. So we've got if parentheses and then inside of these parentheses, so I could actually delete that if whatever in here is true, so if value one is equal to value to, then you have some curly brackets. You've got opening curly bracket and in closing curly bracket, do some stuff in here. And if it's not true, if your if statements does not turn out to be true, this does not execute at all. It just skips over your program, says there's nothing there. I'm not going to do anything with that. And that is essentially the core of every single programming language on the planet. If you want to get into artificial intelligence, if you want to get into machine learning, guess what most of it is a ton of. If statements, it's if a data points matches a certain value. If a set of data matches exactly the outcome that you're expecting. If it is not, do something else that's really all it is. Even if you look at you know, more fantasy movies like I robot, you know the machine, The sunny was his name. Sonny will look around and he will analyze the entire picture. And you will say If there is a person there, say hello. If there is no person there, keep walking. So that's an if else statement. And at the end of the day in programming, everything boils down to something called a Boolean. It is either true or is false. That's it does not really a whole lot of middle ground there. And so that's all we're doing here is we're saying, Hey, is this true? A of this statement? If this if statement is true, do something. And if it's not, maybe do something else. But we'll learn about that in a future lesson. So what I would like you to do is give this a shot, ask for your name using a prompt, and then check to see if that name matches a value that you're looking for. And if it does match that value, then do something else. Just write an if statement and sort of get used to it. And don't forget, you can experiment. You're not going to break anything. You could always do, like hey, if my name is Nathan. If my name is Zephyr, anything like that, he could also do. I doubted that data instead of to lower case you could do to a bird case. You could do something like that. You do all sorts of things, So don't forget to just tinker around that. Have fun experiment. You're allowed to experiment. And once again, there's no possible way you can break anything on your computer just writing this so you are totally safe to experiments to your heart's content. 14. Handling Opposite Operators: hello and welcome back. In the last lesson, we learned about comparison operators. In this lesson, we are going to learn about handling the opposite of something that is true. So, for instance, if we have a script that asks for my name and it says, Hey, if my name is Caleb, welcome me. What if my name is not Caleb? What if you're asking for a course and it is not JavaScript for beginners? Let's go ahead and do that. Now let's say var that was called input is equal to prompt. What course are you taking? And then we could say with an if statement if input dot to lower case is equal to JavaScript for beginners and that just make sure that it doesn't matter if there's Ah, capital letter or no capital letter and then let's make this smaller curly braces. And then we could say, you know, do something in here. And so we're familiar with this already. In fact, we could actually clean this up to we could say, input lower. Let's just call it that of our input lowers equal to, and we'll just create new variable called in, put lower, and that just matches this one here. But what if the course is not JavaScript for beginners? What if you're taking another course of mine called Javascript essentials? Well, you need to be able to handle that. In fact, what if what if someone types in anything that is not this while you need an else statement ? So if something else do something else and really it boils down to something like this. You can sort of read this like a sentence to let's make some space here. And you could say, you know, if the course is javascript for beginners, do a thing otherwise or else do something else. And in fact, this is interesting, because if we said this, this is python. Mrs. Python sent syntax. And so, by learning javascript syntax here already somewhat familiar with python syntax. So no, your skills and python or your skills and javascript rather are actually paying off because you're learning how to apply logic in other languages. It just looks a little different, but yeah, this is how it works. And so you can actually read this as a sentence if courses javascript for beginners do something. But if it's not, do something else. That's all it is. And so the world of programming is really just made up of, if else statements. It's a bunch of if statements l statements and ah, hybrid of both called and if elsewhere, else f depending on your language. So if this is JavaScript for beginners, let's add add. Ah, welcome message. And if it's not, let's say you're in the wrong course. Well, we need something to do here, So that's a H one. Let's give this a name of text and i d of text and we need to grab a node here. So let's grab this node. Vier text is equal to documents dot get element by i d text. And then, let's say text dot inner html is equal to It's too strong. Welcome. It's that strong to JavaScript for Let's do another strong beginners. And now we're writing some html inside of her JavaScript. And what if it's not? Right? Well, we could do this and just copy that, cause I don't want to write all of it over again. We could just say you're in the wrong course and watch this. What course are you taking? Okay, well, let's say I'm taking another course that I have called javascript Essentials. Yeah, because I'm in the wrong course because we're not in javascript essentials. In fact, the one that I'm in is JavaScript for and that's really messes up Once put it all in capital letters or the last word's gonna be capital letters. JavaScript for beginners. Welcome to JavaScript for beginners. And if we view our source here, we doesn't actually doesn't really look like it's bold, but it is. We've got a strong element there. We've got a strong element here and regular text in here. So there we go. And that is how you do in, if else statement. So basically, you're saying, Hey, if this is true, if we are in fact in JavaScript for beginners, execute this otherwise doesn't really matter what the answer is. We're saying any other answer in the world, execute this line. So go ahead. Give that a shot. You're going to need to know how to do this for our mini project that is coming up. You're definitely going to need to know how to do it if else statement and at this point time, if you get stuck with this, don't forget, you can always leave a question down below. I am always here to help 15. JavaScript Mini Project #2: Welcome to your second mini project. This one has to do with comparison operators. So I hope you had watched the previous two videos in this many project. What I would like you to do is ask the user for a you Earl, and then check to see if that link starts with http. And if it does not start with http, I want you to fix up that link. So fix up the variable and then injects that as a link into the page. And so, for part number one, you're going to want to use prompt for part number two, you're going to want to use sub string. Part number three is you're going to want to use and if maybe if else statement or statements and then part number four, you're going to want to grab an HTML elements node and change the inner HTML toe, have more html inside of it. I'm going to do this project right in front of you as well in the same video, but I think would be best if you could pause the video now and just give it a shot yourself . Get as far as you possibly can and then you know what? If you get stuck, just resume the video and you can watch exactly how I end up doing it. So go ahead, click Pause. Give it a shot and I'll see you in just a couple of minutes when you hit Resume. Okay, So the first step was we needed to ask the user for input. So let's create a script in here where we put our JavaScript and that's a fire. You where l is equal to prompt. Enter a u R l whatever that's going to be. And so we'll just do this piece by piece. Here I'll refresh. Enter, You are out and I could do coding for everybody dot com does nothing as expected. So we just have a girl in a variable, but we haven't actually done anything with it. Let's go ahead and move on to step number two. Let's see if it starts with http or if it does not start with http so we can say if you are own dot sub strings up string 04 so starts at character zero, which is one in computer language. Go up to the fourth character is equal to http then it's good and we can console log that we can say Council don't log the euro is good, Otherwise we need to fix it. So consul dot Warren and so bad you, Earl Bad, Bad. You are ill. Let's go ahead. Give this a shot So I go ahead again. Any type coding for everybody dot com and it's not counseled out warm if you were screaming at the screen. Uh, yeah, that's a good call. It's worn fun. Fact, uh, coding for everybody dot com is try this again and says, Bad you are. Well, what if I refresh the page and say H T T p Golin slash slash coating for everybody dot com and says the girl is good? Okay, so we have a working if else statement in here. So if the u. R L is good, we don't really need to do anything. But if the u. R L is bad, we need to fix it. So let's go ahead and fix this. U R l we're now going to fix it by saying the u. R L is equal to http colon slash slash and then we're just going to contaminate the rest of the girl. Yeah, we can get rid of these Consul logs if we want to. Do they're not really doing anything on. The last step was we need to select an HTML element by its i d and change the inner HTML to have a link in it. So let's go ahead and do that. Now let's create a paragraph. Let's say this is the link and let's just create an empty span in here That's called Link is not gonna be anything in there. So when we refresh the page, you see it cancel. It just says This is the link we can actually see that even has an uncaught type air cannot read property sub string of No, because there's nothing in there. That's what happens when we click. Cancel. At this point, we should have somewhat of working. You are assuming you actually type something in there, and then we just need to put it in here. So let's grab that node. Let's do var Link node is equal to or I guess it's a span notes. Oh SPAN note is equal to document. I get element by i D and just called Link and let's go ahead and put span node dot inner HTML is equal to the URL, so we're almost there. Let's go ahead and say coding for everybody dot com. It fixed it for me. Cool. But ultimately, that's not quite what we're looking for. We actually want this to be a link to coding for everybody dot com. So we need to put this into some HTML and this is where it's drink and Cat Nation comes in So we could do this a couple different ways. We could say all of it in one line. A h r E f is equal to and then closing. And then we could go in there and we could say Contaminate this and we could put the U. R L in here. And then we can also contaminate in here with the girl. And so this will work coating for everybody dot com. And when I click it and you can actually see it says, quoting for everybody dot com, boom loads the site. That's pretty nice. Or if you wanted to write some slightly cleaner code, we could also just say HTML will create a new variable called HTML and this way We have our HTML in a new line, and it just doesn't look as crowded so we can do the same thing here. We can't say google dot com and don't take us to http google dot com There's actually a short cut. Ah, we currently have an empty if statement. So like, why even write that? So what we could say is we could skip this whole thing. Let's get rid of the else statement and we get, say, if it's not so to compare something to make sure that it is true, you say to equal signs, to say something is not true or not the same. Rather, you say, exclamation mark equal sign. And that says not the same. So let's just zoom in and it looks like this, not the same. And so what we're saying here is if the girl in the 1st 4 characters is not http, make sure it is http. And then we got rid of that else statement. So now we're saying, basically, if it doesn't start with http, it needs to so overwrite the euro. Let's give this a shot. Let's go in here, refresh. Last time, what side do we want to go to you. Let's go to facebook dot com and bam, that works. What if we already put http in there? You know, a copy and paste You are all that's already in their http YouTube Elcom. It's also working, so it's all good. This is working perfectly fine. And so that is the entire many project. And so what we used is prompt. We use an if statement. Actually, we used an else statement technically, and then we sort of combine that into one line. We'll talk more about this a little bit later. You didn't have to know that one off the top of your head. Then we grabbed our SPEN and then we injected HTML into it. Furthermore, we could actually do this. We could check to see too, if someone has canceled. What is that you are out? Well, that you are l is equal to know type of new URL is an object. And so we know that this is going to be some sort of data type, and actually you might not know that And that's okay. You don't really need to know that what I'm going to do is show you something pretty pretty cool, in my opinion. So we could say if the girl is equal to know Alert, Cancel this quickly because we don't want it to execute. So let's go ahead. Cancel this quickly because we don't want it to execute. And so we could actually say if the girl is equal to know, then cancel this else and then we could wrap everything else in that else statement is now we're saying if basically no one has clicked council, we're good. But if someone has quick council, we're gonna say alert to this, we're gonna say, cancel this quickly. In fact, actually, what we could do is we could do absolutely nothing or we could do console dot ever missing input. Otherwise, if someone did put something in there, we could then do an if statement in here. And then we could do the rest of our logic. And so let's go ahead and give us a shot hit. Cancel missing input just the way we expected it to. So there you go. That is your mini project number two. I did a bunch of stuff in here that I did not expect you to know for instance, if you're l is equal to know. Yeah, I sort of just pulled that out of a hat. You didn't know about that one yet? The if not statement. You didn't know about that one yet either. That's okay. We're learning things together at the same time. We're going to go over all these things a little bit later down the road to and I like to sort of just drop in some of these. I call them Golden Nuggets. Just these little hints of slightly more advanced things in inside of code. That already makes sense. So you're constantly pushing yourself. You're not pushing yourself too hard. Now, don't forget, you can always put this in a code pen. Or, you know, you could just take a screenshot like what I have here. You've got your editor on the left, and you've got your browser on the right, and you could take screenshots and share it in your skill share project. 16. Handling Special Cases: okay. We know a little bit about comparison operators and how to handle something that's returns true. And something that returns false. We know them to be, if statements and else statements. But what if we want to match more than that? What? We could do something like this. You know, if our name is equal to Caleb and then we could say if name is equal to Caleb, do something in here, okay? And what if it's not Caleb? Well, what if the name is Zephyr? Well, then we would have to do if name is equal to a Zephyr. Skins ever action in here and then we have an else statement. And what if the name is not Zephyr? What if it's also not Caleb Wars ever? What if the name if the name is equal to Henry Henry Action in here else? What if the name is not Caleb Zephyr or Henry? And this goes on and on and on and on, and it just gets really gross. I mean, even looking at this right now, it's sort of it seems a little confusing to the naked eye. You just look at it and you go. That's a lot of nesting, and this could go on forever and ever. Luckily, there is a better way to handle this. In the world of JavaScript, there's actually two ways we can do this. I'm gonna show you the main way. The most common way. They wouldn't show you another way. That's a little less common, but also a super useful. So what we can do is if the name is equal to Caleb. Great. You know, council don't log awesome. Okay, we can also do else if the name is equal to Zephyr and then we get, say, council dot log no. And then we can say else if name is equal to Henry Consul, that log little me. Oh, because he's a little kitty. And finally, if it's not Caleb or Zephyr or Henry council dot warren not handled something like that. And let's go ahead and give this a refresh, and we can see it says awesome in your let's make that smaller. And if we change that name to Zephyr, says me. Oh, if we change that name to Henry, we know is gonna say little Meo because that's what we wrote. A little meo and If we change it to anyone else, let's change it to dog. Oh, dog, it's not handled. And so this is how we get away from nesting if statements inside of if statements inside of if statements, we can keep them nice and flat like this. And in fact, my editor and most editors will allow you to do this because you have curly brackets in here you can actually close them to. And so now it actually looks a lot more clean. You can you can actually sort of read this. If name is equal to Caleb, it's gonna do something. If it's equal to Zephyr, do something, Henry, do something, or if it's anything else, do something else. And so if you're ever looking through a lot of code, you're like, Ah, what happens if the name is Zephyr? You just open that up console log meal. And so that is how we get away from a nested. If statements now in Javascript, there is another way of doing this, and many other languages have this as well. It's called a switch statement. You don't see it too often anymore, but it is definitely a thing you can lean on whenever you have a lot of, if else if statements. So you just say switch and you give it a variable, whatever that is going to be curly brackets and then you give it a case. So the case is going to be Caleb. And then if the case is Caleb, you could say council dot log uh, Caleb. And then we say break. And this is like an if statement Onley instead of using curly braces, were using a colon. And instead of this curly brace, we're using the word break. We'll actually see the word break a lot more when we get to wire loops. Four loops for each loops, things like that there we could give it another case. Any other name we could say, Nathan consul dot log. Hi, Nathan break. And then we could say so on and so on and so on. Or if we just wanted to catch any other scenario, we could just say default council dot warn not handled and break. Let's go ahead and let's changes from name. That's changes to family member. And let's create Var. Family member is equal to start off with Caleb, I'll be me and says, Hi, Caleb. And then if I changed it to Nathan Hi, Nathan. And what if I changed it to Wade? Not handled on 9 22 like that, not handled line 22. So this is basically the exact same way of doing. And if else if else statement some people like this way, some people like the if else if way, personally, I lean towards the if else if else way, it just seems a little more explicit. And not everybody knows about the switch functionality. So it can be a little bit harder for someone who has never seen a switch statement like this before to figure out what's going on, whereas every programmer you run into will know about if else if and else statements. And so one thing to note here is is going to try to match that first case and stop. So what we're saying here is if the family member is Caleb, console, log high, Caleb, and then stop. Don't do any of the other ones, just like down here. If the name is equal to Caleb, then just execute this one. But it's not. Then it's gonna try to do. This one doesn't match? No. Then it's gonna try to do this one. Does that match? No. Then it's going to do the else statement. And this L statement is actually optional. You don't need to have that in their you can say if the name is Caleb Words that for, or Henry taken action. And if it's anything else, don't do anything at all. You could totally right that So what I would like you to do for some hands on experience here is right. And if else if else statement it doesn't have to be big, it doesn't have to be complex, you know, just like something. What I have here, just a bunch of console logging. That's totally okay. I just want you to get some experience with the else if syntax and really, when it comes down to this intact, it just looks like someone grabbed an If statement like this one up here and in their else statement, they just pasted it in. That's all it is to give that a shot. Don't forget to have some fun with it, and when you're done with that, let's head on over to the next lesson. 17. Code Comments: Okay, Welcome back to another lesson on learning JavaScript. We are going to talk about code comments now, generally, in a course, I put code comments first, but frankly, they're boring. Unfortunately, they're also super useful, and it makes sense to learn them. And so I sort of wanted to defer that and get to some of the funder stuff before we get into, You know, things that are not as fun like code comments. So at this point, if you don't know what a code comment is, you should be asking Caleb. What is a code comment? Well, a code comment is basically a way to take a piece of code that you've written and tell your browser not to execute it. So I have an example here. Console log comment. One end to and if I refresh my page, we'll just see comment. One and two. In fact, let's make two show up four times to a comment one and then 222 and two. So let's say we have a bunch of code in here on one line and we don't want it to be executed at all. We say, Hey, javascript, don't execute it and All we do is we put one slash with another slash together, and that creates a single line comment. So if I save this and refresh comment, one no longer shows up in here. Now, when it comes to multi line comments, most editors you can hit like a command slash shorts like CMD plus Slash. Or if you're on Windows, it's usually control slash something like that, and you can select all of these these lines and you can comment them all out at the same time. But that's not a multi line comment that's commenting out every single line individually. So if we wanted to get rid of all of them, we would do slash and then an asterisk, and then at the end we would do an asterisk and then a slash, and this will comment on everything between these two points. And so if you remove the space, you'll see my code goes gray, and that's going to keep going on forever and ever and ever. So if I do council, you can see that my code is still gray year consul dot log. Do I show up and let's get rid of that one? Oh look at that. There's actually a syntax error because the comment was never closed. But if we do asterisk and then a slash right after that saying, Hey, everything between here just commented out. So save refreshing. Do I show up? Yes, you do. You do show up because all the other lines Air commented out. So let's view our page source and we can see there's a comment here, and there is a comment, a multi line comment here getting rid of all of number two. You can also comment out the end of a line as well. So instead of just having a comment at the very beginning, you could have a comment after it so you could save our name is equal to Caleb. And then, if you wanted to make a code note a code comment when you put two slashes afterwards and say, This is my name and that's not going to execute either. But as someone as another developer looks at your Cohen says Var name. What is that supposed to be? What kind of name is that supposed to be a person's name and say This is my name? All right, well, I know that's the developers name now, so I can refresh. And it just says every time I refresh, do I show up? Yep, you do show up. And when I refresh this var name is Caleb and let's make sure that it still works that's going here and type in a name. Name is Caleb ha ha. Look at that. And anything over here to the right of your double slashes is not going to show up. That's going to be commented out. So moving forward, you're going to see me doing a lot more code comments. This is a really good way of writing a bunch of code that does not actually need to execute , and it's also a really good way of, just like testing things out. So if you want a consul long something and you're not sure if you're going to use it later , just commented out or a comment comment uncommon to comment on comment. That's all there is to code comments not super super interesting as a topic to learn about , but very, very important, and you're going to see this all over the place in every single programming language, you will see code comments everywhere 18. Introduction To Arithmetic: All right, let's talk a little bit about arithmetic. So basically, that's just a fancy word for math. You know, multiplication division addition, subtraction on. Then you've got things like modules, which is remainder and exponents, and that's really all there is to it. And then, you know, there's a few extra functions we could get into for, like, sign and co sign. And I'm just kidding. We're not going to do all of that stuff. We're just gonna work with the basic stuff for now. Actually, that's really all we're gonna work with at all, because when it comes to coding when it comes to programming, it turns out that most of us coders air. Actually, we're kind of lazy, and we are not interested in writing all sorts of complicated math. We don't want to get into calculus and algorithms and things like that. Yes, algorithms are a buzzword, and it's it's fun to talk about that. But at the end of the day, do we want to be spending eight hours a day writing that honestly know most of us don't. And the good thing about coating is you don't have to. You can get away with a simple, simple math. And so in this video, we're going to learn about a little bit. You know, some of the basic arithmetic behind JavaScript and really, we're just gonna stick with multiplication addition, subtraction and division. Okay, so let's go ahead and let's create a variable in here. So we've got variable Number one is equal to 100 then we've got variable. Two is equal to I don't know, let's say 33.5. I'm honestly just making up numbers at this point. Now. If we wanted to do, let's say, divide these numbers, let's say we wanted to divide 100 by 33. We could do numb one divided by numb to and you can actually see that's going to give me the exact number down here. And so this is division. It's just a sash. That's all it is. And if we wanted to multiply these numbers, it's just the asterisk. So you do, Ah, shift and then the number eight and you'll get an asterisk, although on some keyboards that might be a little bit different. But on a standard keyboard, it's shift eight to get that asterisk, and you're gonna do multiplication subtraction is just a dash, and addition is just a plus sign, and that's all there is to it. And honestly, it's very, very rare to use anything more advanced than that. Occasionally we'll get into something like Module ISS, which will give you the remainder of something. So if we did 10 module ISS three well, 10 divided by three goes three times and then there's a remainder of ones that was 369 and then 10. Minus nine is one. So basically it's just remember Long Division. Well, it's like that. And then that's the remainder. And then we also have exponents, which is just to multiplication signs together. Now there's one rule. When you are working with larger formulas, you also want to keep in mind. Ah, the rule of bed mass and it's actually a different acronym for several different areas of the world. But the way I remember it is bed mass. You have brackets, exponents division and then multiplication, and then addition additional addition, slash subtraction, whichever comes first sub. I don't know how to spell that apparently sub attraction, And so the idea here is whenever you have advanced math It's not really advanced, but it's a little more advanced. I guess. There's an order of operations and it's bed mess. So whenever you see brackets, do your brackets first, Do the math inside of that first, then the exponents inside of those brackets, then division and multiplication, whichever comes first from left to right, and then addition or subtraction, whichever comes first from left to right. So an example of this would be if we wanted to find out what 30 degrees Celsius is in Fahrenheit so we could do Celsius is equal to 30. And then to figure out what the answer is. Well, you could dio see Time's 1.8 plus 32 and actually get rid of See, That should preview for us. There we go. So it's 86 F Now. The order of operations where this becomes important is we did this backwards plus 32 times , 1.8. We had a slightly different number, and while that's not a big deal, it's only 1.6 degrees difference in, you know, regular weather temperatures. If you were 1.6 degrees off in a circle, that could be significantly different especially if you're trying to point a telescope to maybe a particular star. Well, you're gonna miss that by a lot. And so this is just a simple example. But your order of operations is important. And so this is the same as, you know, doing your brackets first. So you've got C, which is 30 multiplied by 1.8 plus 32. And so it's going to do this first and then whatever that is, it's going to add 32 on top of it. And so that's a super super fast crash course into basic algebra. Just be simple order of operations. And again, you really don't need to know too much about this because for the most part, we don't do a lot of math until we get into, like, the really nitty gritty of something super complex. And for most of us, that doesn't happen. So this was your introduction into arithmetic. Just as a quick summary. Here you have num one divided by numb to So you've got a division sign here. Multiplication is your asterisk. Subtraction is just a dash. Just the subtract sign and then the plus sign to add. And if you wanted module iss. You could use the percent sign. And if you want it and exponents, I have no idea what this is gonna be use. Yeah, as a really big number. You use two asterisks side by side, so it looks like multiply, multiply, which is exponents. 19. Boolean Logic: All right, let's get introduced to a new data type called the Boolean, and you see that here and again, this is just a fancy programmers term for either something is true or it is false. That's it. It's either one or zero, true or false, on or off black and white day and night. There's no in between. And you know how people always think that robots or machines only ever think in black and white. Well, they're not entirely wrong because a lot of logic does come down to true and false, and there isn't a lot of giving between their now weaken. You know, when it comes to machine learning, we can give an answer like 0.6, and that leans more towards true than false, and we can work with that. But that's not the same as Boolean logic. We know that 0.6 is a number, and Boolean Logic is true or false, so we can work with us in a few different ways. But first and foremost, let's go ahead and create a script, and in this script, let's go ahead and create a boolean variable. So it's creative. Variable is cat is equal to true. And so let's just talk about my cat Zephyr. And we can say, Is my cat a cat to true or false? And so we could say in a comparison Operator is cat, and so we can actually do this. A couple of ways we can do is Cat is equal to true, which is the more explicit way of writing it. But that's sort of unnecessary, because when you do any sort of comparison operator, it's always checking to see if that statement eventually turns out to be true. And while this is already true, so we could short cut this and just say is cat. It was a console dot log. Zephyr is a cat, and let's go ahead and inspectors and open up our Council Council Council Council. It's actually switched at the bottom. Here we go, and it says Zephyr is a cat, and if we wanted this to be false, we could just say, Hey, you know what is cat false? Maybe Maybe I got a dog and named him Zephyr as well. And nothing is going to show up, However, because we know about the else statement we can now say council dot log is not a cat and there we go. And now we can just talk about true and false is a cat is not a cat. We could even get a lot more complicated with this if we wanted to. And we could ask the user for a name so we could say of our name is equal to prompt and her name If name dot to lower case is equal to let's make that smaller is ever is cat is equal to true. Let's go ahead tonight into a virus. Well, otherwise we're going to save our is cat is equal to false and I'm just sort of really nearly throwing semicolons in here. They're not necessary, but good practice to be in anyways because all JavaScript, once compiled into production gets Min ified and squished, and it all becomes one line of javascript and so it eventually puts semicolons in there anyway, so it's a good practice to have, but not always necessary. And then we could say in here, you know, actually, in real life we would have some other logic and here, based on the variable, is cat. And then we could say if is cat alert. You're a cat kitty cat. And we have a immune to Miami on now. Alert. You're not a cat. You're not a kid. He got at all. Okay, so I refresh. And if we walk through this is going to ask me for the name into your name. Okay, I'm gonna type in is Zephyr. I'm gonna spell it, right? Those effort, and it's going to take that name lower case it and check to see if it matches. Lower case ever. So I hit. OK, and it says your cat says Goes ahead. Says he Okay, there's variable in here. Is Cat is equal to true. Does some logic some other magic stuff behind the scenes and then with another If statement , if it is a cat alert, you are a cat. And so that is your base introduction into Boolean logic. Now there's another way we can do this. We can actually shortcut the If and Ellis. So let's go ahead. And you know what? Yeah, Let's keep that. I like that. That's in there. That's making our programs a little more complicated, so we can also shortcut the if else statement. So if We just wanted to check if something was false. We could do. If is. Cat is equal to false alert, not a cat. So let's go ahead, and I'm going to give this a default as well, so I don't have to take this over and over and over again. Zephyr. You're a cat that's executing line 21 down here. And nothing because it wasn't false, so this didn't execute. But what if we said Henry, my other cats? It says You are not a cat that executes Line 23 it's also going to execute lines 27 through 29 says not a cat. That's right here. Now we can also shortcut this the same way we did. If is cat, we can do the opposite by saying, Exclamation work is cat. This is saying false. So let's go ahead. And what I'm gonna do here is let's go ahead and put these on separate lines. Let's move that up so you can actually see it. So this is going to be false as well. So this is basically saying If cat is false, let's take that out. If is, cat is false. That's what this is saying here you could also, if you wanted to, You could say, If is cat does not equal true, it will only ever be true or false. So if this is false than this, is the false block to execute, execute. And so there are several different ways of doing this. Generally, the most common way that you're going to see this in the wild is if is cat because that's false. It's the shortest way to right if it is not a cat, and then if we head on over to our council here we have a variable called Is Cat. It's false. And if we do type of is cat, we're going to see it is a boolean now. One thing I skipped over that I did not mean to skip over was when you have a Boolean where we hear VAR is, cat is equal to true or false. We do not put it in quotations like this because that's a string that's not the same as true or false. A string can be any any number of characters letters it can mix and match spaces and special characters and all that stuff Boolean cannot a Boolean can only ever be true or false. And so this is a, I think, a pretty good crash course into Boolean logic. It really doesn't get any more complicated than this. The most complicated part is when you see if statements like this. So if is cat when your first looking at this, If you've never seen an if statement before, you're probably thinking, What does that mean? Well, this is saying it's true And if you ever see if exclamation mark is cat, that's the same as saying if the cat is false so you know, nice and simple like that. What I would like you to do, though, is you know, just tinker around with this gets an idea of how Boolean logic works and just create a few if else statements using Boolean logic, you're going to see billions every single day. It is the fastest way to get a yes or no answer. And one more thing before we go. Boolean logic can also be represented by ones and zeroes. I almost actually forgot that that is an important one here. Let's scroll down here, make some room. We could also say far is cat is equal to one, so this is the same as true, and Var is cat is equal to zero. This is false, and this works across almost every single programming language. If is Cata because this will be true. Or you could also say, If is cat and that will be false, something along those lines and that will totally work for you. So maybe also give that a shot. Try assigning a variable to true or false, and then try assigning the variable 21 or zero and just play around with some if else statements. 20. Making Lists With Arrays: Hello and welcome back in this video, we're going to talk about something called an Array. Now, with all things developer related and array is just a fancy term for ah list. That's all it is. We're just gonna create ah, list of variables may be, ah, list of strings, Boolean ins. We could make a list of lists if we wanted to. And in some languages, like Python, we even actually call it a list. But in JavaScript is called an array. So let's go ahead and make this bigger cause I think we can do all of this without actually writing any code in a file. And so an array is really, really easy to create, So there's a couple different ways of creating an array, but we could just say like a R r variable, a R is equal to. And then we have an opening and closing hard bracket, and inside of it, we put Maybe I'll put my name and then a comma and then because it's a string, you put quotations around it and then put my cat's name Zephyr and then Akama. And then if I wanted to, I could put true in here as a Boolean, but false. And there is a Boolean I could put my age in there. I could put Zephyrs agent there. Now none of this is mapped, so it's not really understandable what all this data actually relates to. But if we were to sort of change all of this and say they are are no, not so called a are let's call it names is equal to a list of names we could say, Caleb Zephyr, Henry and a dog Oh, don't go there we go and just hit, Enter. And even if we try to access it again, we have a list here and it says in parentheses there's four. That means there's four items so we can see. And here we have these things called Indices. These air numbers. It's your index value. So it starts at zero because computer start counting at zero. So zero Caleb one is effort to Henry three Dog. Oh, now not only can we loop through all of these different values and you know, performance or inaction on them, we can grab each one individually as well. So we could say var. Caleb is equal to names and then if I wanted to grab one, I could just grab. Let's say zero. Now, if that is a little confusing, you can always trial this out in your console as well. So it's names, and then you've got your hard bracket and then your index number, so I want number zero. So this zero here is going to match this zero right here and is going to say, Caleb, and if I want a dog Oh, I would use index number three and again computers start counting at the number zero to a human, the number zero mean nothing. There's nothing there to a computer, Computers say, Oh, the number zero is actually a number because a computer doesn't understand the concept of nothing. Technically, it just understands that there's a number and it's zero, so it starts at the number zero. So if we want a dog Oh, we would use the name of the array hard bracket and then the index number and then a closing hard hard bracket. And we could call this if we wanted to. Da go is equal to, and then we could do whatever we want with Douglas to let's do uppercase dog. Oh, in all caps just like that. So that is how we basically create an array. There's another way of creating an array. We could do an array of numbers. Let's call it numbs is equal to, and we can just give it a an actual array. We called Array with a capital A and then we could do 1 99 I don't know, 23 and you can see that it created the exact same object. So you know, you've got the hard brackets around here. We have indices in here so we could do numbs. This is going to get a little confusing, but numbs too. If we did the variable name numbs and we put the index of two in there is going to map to the number 23 so, sure enough, it does. It maps to the number 23 now. Okay, let's clear that out and let's work with names. If we take names, our council automatically tells us there's four items in there. What if we want to check to see if there are actually four items? Well, we could do names dot length and this is a property on the names object will talk more about properties and objects and methods and all sorts of complex things a little bit down the road. But for now, you can know that if you do dot length, you're going to get the total number of items in your array. And that's force that four here matches that for their now we also have a variable called Dog. Oh, and this is a string. So this is sort of outside the scope of this particular lesson. But we could also use length on DA Go to get the total number of characters. So there's a difference here. The difference being names is an array, and this is where data types it's really important that we know what data type we're working with. Your names is an array, and if we use dot length is going to get the total number of items in their whereas dog oh is a string. And if we use dot length, it gets us the total number of characters in there. And just so we know working with their dog Oh is actually Dogg. Oh, so there is five characters and that's why it returned five in here now. OK, that's cool. That's an array. So you know, we've got two different ways of creating an array we could do. A R is equal to an array with our items in there. Or we could just do the shorthand way and use hard brackets. I like using the hard brackets, but occasionally I use a R R K. Why just to be super explicit, depending on the code I'm working on by that. But that's really up to you the way you want to do it. Neither way is wrong. Neither ways, right? Okay, let's look at adding something to an array. So we have an array called names, and we want to add one more person in here or one more name or maybe one more pets. Let's go ahead and say names dot push and we want to push something into this array. Let's put the word parrot in there, and you're going to see it automatically returned the number of items in the array, and if we take names again, we can see that there's Caleb's ever Henry dog. Oh, and the new one parent and the total number of items is five now, if we wanted to get something out of here. What we can you slice? So let's say we wanted to get Ah, the 1st 2 items in here we could do two items is equal to names dot slice Where to start, where to end started? Zero. And that, too. And here we go. We get two items we get, Caleb ends effort. And so it just sliced out array and sort of just said, You know what, slice it right down this sort of center line. You're almost center line and remove Henry Dog one parent. Actually, what he's saying is Copy Caleb in Zephyr and put that into a new array called two items. Now if we just wanted to get the very last item and you're going to see this one a lot, too, we used dot pop, and this is the same across several programming languages. It's clear that we have names in here and we want Parrot. Let's go ahead and create a new variable called Parrot is equal to names dot pop, and that's it just dot pop with parentheses around it and watch this Perritt is now equal to parrot. If we did type of parent, and this is going to be a string because it did not return an array. It just returned this last item in year. But more interestingly, what it did was, if we type in names, it actually got rid of parents. What it did was inside grab the last item in the array, actually remove it from that array and put it into anywhere. Now, we don't necessarily have to store that in a variable either. We could do names dot pop, and this is not going to store the last one anywhere. So the last one currently is dog. Oh, it returns, dog. Oh, but we didn't start and variable, so it's not accessible to us anymore. And if we type names, we only have three names. And so this is a good introduction into a raise A raise. Get really, really powerful when we get Maurin toe loops. So, for example, for every name in names we get say hello. My name is Caleb. Hello. My name is ever Hello. My name is Henry. We get right in three lines that over and over and over again. And if this array was 100 items long we would still only have to write three lines of code versus having to right now Say council that log. My name is Caleb, and then consulate log. My name is ever consider log. My name is Henry Constant log. My name is Dog. Oh, you get the point. So on and so on. We're going to talk a lot more about a raise down the road. But for now, you are now fully introduced into the world of a raise in new data type called an array. And just as a quick recap of the most important thing that you can know about an array right now are the indices. So if we did this, we open this up. If we wanted to get his effort, which into C would we use? We would use number one. It's not the first item, because the first item is Caleb. It's the second item. And so we off put every number by minus one, because computer start counting at zero. That is the key take away here. So I would highly recommend that you get a little bit of experience writing a raise. You don't have to do a lot with them. You could just create a simple array with names and then maybe just get the middle one using an index. Otherwise, if you feel pretty comfortable with this already, let's head on over to the next lesson. 21. Checking Variable Types: all right. Up until now, we have learned about strings, numbers, arrays, Boolean ins, and there's a few more that we're going to learn down the road. But for now, I would like to explain a particular function that I've been using to show you if something is a Boolean or a string or an array or a number. Now, behind all of these, these different types of variables is this thing called a data type or, in some languages, a data structure. So let's go ahead and look at a few of these. So it's create of our age is equal to 30. Okay, we know that this is a number, but what does Javascript think it is? Does it think it's a string number? Anything like that? Let's create another one in your Vyron name is equal to JavaScript. Four beginners. What does JavaScript think? This variable is? Var. You know we did this one already. His cat, true or false? And let's create one more of our cars is equal to folks Wagon Lambeau and Audie Audio. Audie. Something like that. Let's yeah, let's put that on one line again. And so when we refresh your page we're not gonna see anything happen. We've declared a bunch of variables, but we're not doing anything with them. Let's go ahead and console log each one. So consul dot log age is. And in here we're going to use a function called Type Of and it's just simply going to say ages and then what it actually is. Let's go ahead and save us. We're going to see ages a number that's the variable type or the data type. Let's go ahead and create another one in here. Say the name is the name of this course is whatever that's going to be is cat is going to be to do. To do is cata. And lastly, we have cars. Is the data data todo cars? Okay, so before I refresh my page actually gonna make some space here so that this actually looks somewhat ledge a ball, We know that age is a number, JavaScript told us It's a number. What do you think? Name is from What do you think cat is and what do you think cars is? We have at some point gone through all of these, but we haven't actually fully explored their data types. I mean, we sort of have, in a sense, but not completely so. If I hit, Refresh on this page will save us and hit Refresh. We're going to see that age is a number. Name is a string is Cat is a boolean and cars is an array, so age is a number. Name is a string is cat is a 1,000,000,000 cars is Oh, what's this? It's not an array. Well, that's interesting. Even though we told it to be an array, it's actually this thing called an object. And interestingly enough, even if we do this, do, do, do, do, do, do do let's go ahead and change us to the word array. We're going to see that this does not change Hit, refresh, And it still says cars is an object. What is with that? Well, in JavaScript and in many other languages, object orientated programming languages. We have this idea of an object, and an object really is just a data structure that allows you to have several components in it. Whereas an age in this case, a number is just a number. You can't really do too much with that you can't turn it to upper case or lower case. You can't pop it so you can't get rid of, you know, the last item because there's only one item in here. It's not even a list or an array. We can't really do anything with that. We can't add too many custom functions to it. It's just a number, whereas with the variable called cars, it's an object and we can actually do a lot more with objects. Let's go ahead and take a look at this real quick cars dot and all I have to do You can see that it says, Can Cat array here is hit dot and then just scroll down and you can see all these different things that I can perform on this particular type of object. Now we're going to get into objects much more in depth down the road. So you don't have to worry about knowing the difference between an array and an object right now, because yeah, well, totally cover that in this course. But the thing that I did want to make you aware of is different data types using the function type of one type cars, and it gives us an object. Now why is this important? Well, let's take a look at the difference between one particular property. So if we did age, dot length what we don't have age, darling. That's because there's a number. There is no length to a number. I mean, in human terms there is. But to a computer, there is not. It just says that the number. I mean, what do you want for me? And the number is the number, and so the numbers are pretty basic. If we said name dot length, we know that this is a string. If we did name dot length we know that this one is in particular a string, so it's going to count the number of characters in it. So J a v A S e r I p t space for space b e g i N N e. R s 22 characters now what if we did is cat dot length undefined. It doesn't even have a property called length. Same thing with numbers doesn't have a property called like we can't use that, but with cars because it's an object or as we currently know it as an array, we can do dot length and this will return three. Where this gets important to know is if I did that wrong, if we did, if we did cars dot length, we're going to get three as the total number of cars we've got. Volkswagen, Lambo and Audie. But if we did name dot length, ignore the one that I messed up there with the typo. If we didn't game dot length, we're going to get the total number of characters, and so that's very different. And so if you try to do dot length on a string versus dot length on an array, you're going to get different answers. And that might change your logic down the road, you might say, if the Array has five names and it do something. But if your logic says, if variable dot length is equal to five and someone just types in a word with five letters in it, that's also going to trigger. And so that's sort of the difference between data types is, you know, some of them have certain functions or properties on them that we can use, and some of them don't and so you will inevitably run into this down the road where you're like, oh dot length on name is 22 but dot length on cars is three. Why is that? Because when I count cars, there's too. Plus five is seven plus four is 11. So you think that return return 11. But no, it doesn't. It returns three causes three items in there. Now you're not going to need this right away. But it is very good to know, and I have been every now and then showing you the function called the type of just to show you what this is. So if you're ever concerned about what a particular variable is or what the data type is, you could always just use the function type of, put your variable name in there with parentheses around it and just looks like that. And it will tell you Oh, I'm a Boolean. Oh, I'm an object. I'm a number. So there's nothing you have to do with this particular lesson. I just wanted to show you this just so that you are aware because you will run into this issue down the road, and I just wanted you to be prepared for that 22. Variable Casting: all right, we've looked at checking variable types. We've looked at different data types or variable types. We know about numbers, Boolean strings, arrays, things like that. But occasionally you're going to want to do this thing called typecasting. So if you have, for example, ah, variable age is equal to 30 and you want this to be a number well, currently, this is a strings. Let's do council don't log type of age, and it says it's a string, but it's actually a number, just has quotations around it. So what we what we can dio is this thing called type casting, where basically, we take a particular variable and we try to very forcefully turn it into a different type of variable. So, for instance, age we could type cast us as a number by typing number with the capital end and then age. And if we refresh this, it now says it's a number. So that's how we would typecast in number. Now, where this gets important is, let's say you're asking for someone's age so far, age is equal to prompt your age is, and that's do council dot log type of age, and we're gonna see here, I'm gonna type in 30 and it's going to say it's a string. What we take in a number. We didn't type in a strength, but because it doesn't know what you're going to put in letters or numbers or true or false , it just assumes that is going to be a string. So if we type in true, it's still a string. But what we can do is we can typecast this now so we can say age is equal to number age, and when we do this, this will work. However, there is a little caveat here when we try to do this again and let's type the word hours. But my name Caleb, it says it's still a number that's cool. But what is that number? Let's type and age, says Nan. This is another JavaScript data type, and A N means not a number. It's not a number. It doesn't know what to do with it. And if we refresh your page and let's just type in 123 and let's check the age in here, it says 123 so it's either going to work or it's not going to work And so you have to really know what your data is supposed to be. If you're asking for someone's age, you can always say, Is the age actually number? And so now we can actually try to test this. We can say, If age alert, you have a proper number. Let's go ahead and give this a shot So it's type in Caleb, and that's not going to work for me, right? But what if we did 30? It says you have a proper number, and that's because this number actually turned out to be a proper number. And so when we were learning about billions, basically any number in JavaScript that is not the number zero is true in some. Other language is it could be the opposites. But in Javascript, unless it is explicitly zero, it is always considered true. Nan is considered false. It's not a number, but if you give it any other number, it's true. So that works so pretty nicely. So now we can say we have a proper number in here. We can detect if it's an actual number. Okay, so now we have a proper number. So now what we can do is we can actually detect if the number is something. Now, we haven't got into more comparison operators yet, and this is a little bit of a sneak preview into the next dozen. But we could say if the age is greater than or equal to 18 council dot log, You can vote. So now this is going to ask me for my age. I'm gonna put an agent is going to cast it as a number is going to say, Is that actually number? Oh, it is actually number alert that you have a proper number and then is going to say, Hey, if your age is over the number of 18 you can vote and so says you have a proper number. And sure enough, you can vote and also console logs, the type of age, which is a number we can also take. Cast the other way. He doesn't have to be from a string to a number. We could go from a number two strings. Let's say of our age is equal to a string. Nope. Nancy, the wrong way of our age is a number of 30 and we wanted to say actually, the age is going to be a string that's forced us to be a string and consul dialogue. Let's put the age in there and the type of type of age. Uh, it's a string now. The nice thing about that is because it is now a string we can do age dot length. We can see that there two characters in there, whereas with a number we weren't able to do that before. And so there are benefits to typecasting. We can also do this with like Boolean is and things like that as well. So let's try this. That's se var is Cat is equal to its a string, But let's go ahead and cast this as a Boolean. So is Cat is equal to Boolean of Is Cat, So we're just overriding itself with itself as a Boolean. Let's see what happens here. That's copy this down and uncommon. That and let's change age to is Cat. Look at that. It's actually true, and it understood that true as a word could actually be confirmed as true as a Boolean. And so now we can say, if is cat or if is not a cat, okay, and let's do one more in here. Let's do Var course is equal to Js for beginners. Now we know that this is a string already because well, we declared it as a string. As soon as I had spaces, we put quotations around it. Let's say we want to turn this into an array. What we could do is course is equal to array. Of course. So now when I refresh the page and we do course uh huh Look at that. It is now in a race. It only has one item in it. It really only has the one in desy or index for Heather. Ah, but it is an array. And so now we could do, for example, course taught length and get how many items are in here? Well, there's only the one which is not the same as getting the length of a string which would be over 10 whatever that number is going to be. And actually we could do this. Of course. Zero don't length. It's 16 and so weaken typecast into basically any other data type in javascript. All we have to do is say Hey, this is a Boolean. Hey, this is a string. Hey, this is an array or hey, this is a number and as we learn more data types, we can create new ones as well. And so basically, this is how we cast variables, and that's really all there is to it. And it really helps you when you're using certain properties or methods or trying to figure out how to work with particular data types again. This is becoming more and more relevant as we get through this course, and it becomes more and more relevant in modern day JavaScript. So it is good to know, even if you don't use it every day right now, you will eventually end up using it quite a bit down the road. 23. More Comparison Operators: already. Let's take a look at some more comparison operators. Up until now, we have really only worked with is equal to or is not equal to. And if something is true or if something is false, there's actually a lot more weaken Dio, for example, we can see if something is not equal to which we sort of dabbled in, but not formally. So we'll take a look at this one in just a little bit. We also have is greater than or equal to is greater than is less than is less than or equal Teoh. And then we have, lastly, a strict comparison operator, which will get to at the very end of this video. So first things first. Let's look at the is not operator. Let's go ahead and comment this out, and so we need to be able to compare. Something is not. We've sort of looked at this before, but let's formally take a look at it now. So we have a variable. And let's say the course is equal to just a JavaScript course or something, you know, simple to compare. And we could say if the course is equal to Js Council dot log is J s course. And let's go ahead, make that little smaller and refresh our page. And it says, is a J. S course regular. Okay, no problem with that. But what if What if it's not? Well, this is not going to do anything. But let's go ahead and change this. Let's say if the course is not a J s course, let's say if the course is not a PHP course now, this logic doesn't really make a lot of sense. But it is a good example of how to use the opposite. A comparison operator. We're basically saying right here. JavaScript. The string JavaScript is not equal to PHP. Are they different? It's correct. That statement is correct, so it returns true. And so what the computer sees behind the scenes is Yep. If it's true, which it is true, execute this. And so that's sort of how we get to that point using the not operator or the not equals operator. Rather next, we have greater than so let's go ahead and create an age. Age is equal to 17 and we can say if age is greater than 10 then console dot log you can play soccer or something along those lines. Let's go ahead and refreshing. It says you can play soccer Now. What this is doing is again. Basically, we can replace this saying a 17 greater than the number 10. Yes, it is. So this statement turns out to be true, and because it's true, it will execute this block of code. Now what happens if we said, Oh, in order to actually play professional soccer, you need to be 18 or older. You can play pro soccer again. Let's make that one step smaller and let's give that a save. Nothing happens because this returns false. This is saying, if the age 17 is greater than 18 was 17 a bigger number than 18? No, this turns out to be false, so it does not execute. Remember if statements always need that final conclusion to be true. Next we can do the same thing, but we can say is greater than or equal to. When would we ever use this? While let's say your age is 18 and you need to be at least 18 in order to vote, you can vote. We can also do an else if statement here. So else, if age is greater than equal to 21 I'm purposely setting us up for failure on this one, and I'll show you in just a sec, you can drink alcohol. It says you can vote. But this is also true. Age is also greater than 21 now. We learned about this a little while ago, but it's always good to retouch on the fundamentals and JavaScript. It runs from top to bottom and says, Yep, this is true. This is the if statement we want to connect to and don't worry about anything else below it . So this else if statement gets ignored. But what we can do is if we get rid of the else and just create another. If statement, it still says, you can only vote. But if we did this, it says, you can vote and drink alcohol. Now again, where do you use something like this? Well, if you're checking someone's age, 18 year olds are allowed to vote. It's not people who are greater than 18 or people who are greater than 17. In life, we say people who are 18 or older are allowed to vote people who are 21 or older in the United States are allowed to drink alcohol. We can also do basically the exact opposite, so we could say, But that's a variable. Let's do something different here. Long name is equal to Caleb Tallinn, so that'll be my full name. Let's not use long because that's not a long name. But let's do full name. And we could say, if full name dot Length is greater than 10. Confidante log, Long name. And it says I have a long game. Okay, well, we did that one already. But what if it's less than less than we could say This is a short name, It's now we can say, Hey, if this name has 012345678 or nine characters in it because it's less than the number 10 this will say Short name. It doesn't have that. Let's go ahead and shortened my name to just my first name and it says short name. So that's a less than operator. We can also do less than or equal to if we wanted to. Let's do you have our name is equal to John Smith what we have in here. We've got 10 characters in here. That's a perfect name, actually. Should be used in the first example we could do. If name dot length is less than or equal to 10 Council log total length is less than or equal to 10. And let's go ahead. And also let's put this on new lines cause we can. JavaScript gets us, gives us all sorts of white spaces. Put this as the second parameter in here and, let's say name dot length total length is less than 10 and we can see that the actual value here is 10. Which other ones do we have to go through? Ah, I think, really. The main one that we have here is the strict comparison. So all these other ones air really basic math is something greater than less than equal to Really, that's all it is. Where it gets a little bit weird is the triple equal sign in JavaScript. This is a strict comparison, so that means that not only does the value have to match, but the data type has to match as well, and this is actually a lot more performance. It works a lot better on your computer. It's much faster code because it doesn't have to try to determine really any other factors . It just says, Hey, is this a right data type? Yes. Is this the right value in the data type? Yes, move forward. It doesn't have to try toe, say, like, Oh, is three the same as three? I mean, JavaScript doesn't know that. So it tries to figure it out or is true. You know, the same as true. One is a string one is a Boolean, and it has to sort of figure that out. Whereas if you can get rid of that using a strict comparison, your programs, your scripts will actually be a lot faster. It's not noticeably faster to the human eye. However, when you are dealing with large programs, maybe you're starting to crunch a lot of data. Like what Netflix does. Maybe you want that kind of performance. Regardless, you're going to see a strict operator in the wild quite a bit because it is fairly common in modern JavaScript. So let's take a look at this. This is the biggest one to take note off. Age is equal to Let's say 30 and watch this. If age is equal to 30 consul dot log, you are 30 and sure enough, it says you are 30. Despite age being a string and this being an integer or a number, those are two different data types, and so it still works out. It's still understands that Hey, yeah, this could still actually be a number as well. So this means that JavaScript is a loosely typed language. It means you can sort of mess around with it and get away with breaking some of the general rules that you would find in programming languages like C or Python. So now what happens if we do a strict comparison? If we do the strip comparison with three equal signs, let's make that larger three equal signs. This is not going to execute. In fact, let's at an else statement console dot do, warn, wrong data type, and let's make that smaller. Let's go ahead. Save that and refresher page and it says wrong data type. Why is it the wrong data type? Well, it's because we have given it a string and we're saying compared to a number, so what this is saying is, String 30 is equal to number 30. That's not the same thing in the world of data types. They're not the same. The value is the same to a human. It is the same to a computer. It is different. And so you can sort of think of this as string is equal to number. Well, those don't work out the same. You can't compare a string to a number that's like so this is kind of like comparing a watermelon to a a rock. Ah, yes, their shape might be the same, but fundamentally, they're different. They're entirely different things. And so you're going to see this strict comparison a lot in the wild, and I just want you to be prepared for that. Let's go ahead and touch this up. Let's go ahead and save. Refresh says. Wrong data type. And if we change this to an integer or a number, as it's called in, JavaScript says, you're 30. Even if I did, 0.0 still says you were 30. You know, if you come from another programming language, you are probably familiar with decimals or floats in JavaScript, decimals, floats and integers are all the same thing, it is equal to a number. Let's go ahead and throw this on a new line as well, so we can keep that in our notes. And so that is a quick little introduction, I guess. And so this was the more comparison operators lesson. Where we looked at does Not Equal is greater than or equal to is greater than is less than is less than or equal to n a strict comparison. These are the most common operators you're going to find is very rare, that you ever find anything other than these. And as one last example here with the strict comparison, Let's just go ahead and let's turn this back. You know what I mean? A copy, this whole thing because I like that example the way it is. So it's common died out. Copy this pasted in there rather and let's do 30. So this is going to give us wrong data type. Well, in the last lesson, we talked about typecasting or variable casting. Let's go ahead and force us to be a number number Bam. It works. So we had we had originally a string and we said, Oh, this is a string. We're expecting it to be a number moving forward. We always want this to be a number. So we over wrote the variable called Age. We type casted it as a number and the parameter for the number function that we see here is basically that and output 30 as a number. And so now when we do the strict comparison, it works. So that is all we have for more comparison operators. Definitely take a few minutes out of your day and tinker with these, especially the last one with strict comparisons. This is a very important one. All the other ones, I think most people for the most part can get them. Preeti quickly. It's really just Hey, is one number bigger than the other number? Or does one thing match something else? You don't need to be a professional at this point, you just need to be somewhat familiar so that in the next mini project, when you are asked to create a strict comparison or you are asked to write some code for a client or your next employer and you see something like this, you don't go. What is that? You can say? Oh, I know exactly what that is. So there we go, setting you up for success. When you're done that let's head on over to that next lesson and actually think the next lesson is going to be a mini projects. So let's ah, let's have some fun with that. 24. JavaScript Mini Project #3: welcome to many projects. Number three in this little challenge, what I would like you to do is ask the user for a number and then cast that number to an actual number because we know what's going to come back as a string. So cast it as a number and then make sure that number is valid. It cannot be N a n and n means not a number. Make sure it is actually a number. And then if that number is over 18 or 21 whatever you like, then and change the text on the screen to say yes, you are allowed. So as a couple of hints here, So step number one asked for the user number. I asked the user for a number you're going to use prompt cast the input to a number. You're going to use number with a capital end. Make sure the number is valid. So you're going to need a if statement in there, and then if that number is over 18 check or change some text on the page to say congratulations. You're over 18 or yes, you can vote or, you know, do a particular action. So I know this mini project is a little bit dry, but it is really, really good practice because you're going to use things like this all the time in real life . JavaScript. Now, as always, I will provide you with my solution as well as with many things in life. There are different ways to accomplish this, but I'm going to show you my way of doing it. But I would like if you could, in just a couple of seconds, pause this video and give it a shot on your own. And if you get stuck, then you know, resume the video and you can watch my solution. Or if you just want to, you can just straight up watch my my solution and then try to input it yourself. Whichever way helps you learn the best. All right. So I am going to get started on this mini project. First things first. We need to ask the user for a number, cast the input to a number, make sure the number is valid, and then if that number is 18 say something like you're allowed to vote. So let's go ahead and write some javascript. So in here we want to ask the user for a number of our number is equal to prompt. Enter a number. Step two. We need to cast us as a number because if we did consul dot log type of numb, this will be a string. Let's make that a little bigger that's going to end up being a string. So we need this to be a number. So let's go ahead and take cast us as a number numb and number. There we go and we need to make sure that this number is actually valid, cause if someone types in something that's not a number is going to return and A n and A and not a number. So we need to say, if numb, we need to say, Hey, this is definitely a number So if it is a number, let's go ahead and execute something in here and then we can say if numb is equal to or greater than 18. Actually, the instruction said over 18. If you want to get finicky about it, buddy, you know let's do greater than our or equal to. So if you are 18 or older, you can grab an element from the page and change its let's create an element here of our Elem is equal to document dot get element by i d. And let's just call this l m. Make it one step smaller here so we can see it all in one line and then we can dio l m dot in her text Or we could do inter html and say you are 18 or older now that's all great, but getting an element by i d with an element idea of e l E M does not exist yet, so let's go ahead and get rid of that. And let's create an H four with an i d of e l E m and leave it at that. So let's refresh your page. Enter a number. Let's go ahead and type Caleb. Not with quotations, although quotations don't hurt. Yeah, nothing happens. And hey, by the way, that came back as a string. Let's go ahead and type of number. Let's say I'm 17 Okay, well, it's still not gonna work because, you know, that might have executed, but it did not pass this if statement, and it's still saying it's a string which is supposed to. In fact, let's go down here and let's change us from string to number. So this is now going to say string and the numbers, so don't here, it'll say string and the number. Let's refresh once more. Let's give it my proper age of 30 and that 2nd 1 didn't show up because I didn't save my file. So let's quickly we do that age of 30. There it is. String number. You are 18 or older, and that is the mini project in a nutshell. So that's all we're doing. Okay, so if you want to take this one step further, we haven't actually learned about this yet. But if you wanted to, you could turn our two if statements, because it's one inside of the other into one. If statement. So let's go ahead and delete this and bring him toe one line and say, and and so what this is saying is if number is actually number, So if it's true and the number is greater than 18 then execute this. Otherwise is not going to do anything. Let's try this again. 30 bam! Just like that. So we didn't learn about that. I don't expect you to know that right now, but it's ah cool little thing that we can tinker with in the future. So that is many Project number three all wrapped up. If you have not given us a shot to definitely try this on your own, try to not have to reference the video material if you don't have to and tried to just do it from memory. If you get stuck. Hey, that's OK. Just resume the video again. You can watch it over. No problem there, but it's good to make your brain sweat a little bit once you're done with this. If you're happy with your solution, let's head on over to that next lesson. And hey, don't forget. Take a screenshot of your code and throw it into your project down below for skill share so that no, I can take a look at some of your coat and you can share and inspire other people as well 25. Functions: Hey, how low? I hope that last minute project went well for you in this video. We're going to learn a fundamental of programming, and it is called a function. Now. A function is really just a way of writing one piece of code so you don't have to write it over and over and over and over and over again. There is a benefit and a downside to this. So the benefit to writing just code once and then using it over and over again is that it's less code to maintain, so you don't have to worry about fixing something. If there's a problem, you don't have to fix it 10 times. You could just fix it once, and it will take effect 10 different times or wherever you're using. It will get into that in just a second. You really just need toe fix it in the one place. Now a function has a downside, and that downside is it is a little hard to understand at first, so if you are brand new to programming, this might hurt your brain a little bit. But bear with me on this, I want you to work on this until it makes sense because you're going to see functions in every single programming language. You're going to see functions as commonly as you see variables in the world of JavaScript, and it really does make your code easier to work with. So in this video, I'm just going to show you what a function looks like and we're not actually going to write a function. We'll do that in the next video, but I just want to show you what it looks like right now. So let's make this way bigger. And we have a function. So it starts with the word function. You can see that my editor V s code has highlighted that it says function, whereas, you know, if it wasn't a key word, it would be great. But it is a key word, so it is nice and colorful, so we start with the word function and we give the function a name. So let's give this the name of greeting. And then we put parentheses because it's a function and because it's going to be taking some sort of action. Generally, there are a set of parentheses after it, and then in here we can just say, consul dot log Hello, world. And so all the code you want to execute inside of your function goes between these curly braces. It looks a lot like an if statement, actually. And then to execute your function, all you have to do is type greeting with your parentheses, and this will say hello, world. So if I open this up in chrome, you're going to see down here It says, hello, world Now functions can take these things called parameters or arguments. And so you can say what is someone's name So you can pass in a name into this particular function, and then you can contaminate it. You can say hello plus name. And you can use this variable name inside of these brackets and then to pass in a name, you're just passing like a string or a number or a Boolean or something like that. We're gonna pass in a string called Caleb and let's go ahead and refresh our page. And it says down here Hello, Caleb. And so now, inside of our function, we have this ability to use any sort of name. And what this is doing is saying, Hey, There's one parameter in here. There's one parameter in here. Let's say that name is now equal to Caleb in basically what it is doing behind the scenes is saying Name is equal to Caleb. Now, if you want multiple parameters, absolutely, you can do that. So let's say there's a name and there's an age. So let's say hello Name and age is Let's put age in there and we also need to pass in an age. So there's two parameters in here. We need to make sure we have two parameters in here. We do that by separating these with a comma, and we've actually seen this already with council dot log. And then we said something, and then we had a comma and then said something else. And so what this is saying is there is an object called Consul will get to objects later, but basically there is a function called log. This is the first parameter. This is the second parameter, and it's no different than our function here called Greeting, where we have our first parameter and then we have our second parameter. So let's save that open up, chrome and refresh and it says Hello, Caleb. Age is 30. So now we actually have two parameters or two arguments inside of our greeting function. There's two more points in here that we should look at. One is in more modern JavaScript. We can actually give us a default age as well or a default name. So let's go ahead and maybe even do that. It's a default name is going to be his effort. My cat and his age is not 30. He is four. Let's go ahead and get rid of these parameters. So what we're saying here is if there is no name parameter as the 1st 1 it used to look like this. If there is no name parameter, just assume the name is Zephyr. If there is no second parameter called age, just assume the ages four. So let's go ahead. Save. Refreshing. It says Hello, Zephyr Ages. For that's relatively new JavaScript, it's actually super useful. Many programming languages have had this for many, many, many years, and it is finally the time for JavaScript to use it as well is a beautiful feature. Now, the last thing to know about functions, at least for this particular video is a function can return of value and we do that with the keyword called Return and this can return anything. So let's go ahead and return space x and thats all its going to return Semi. Colons are optional when it's on a new line, but let's go ahead for continuity sake. And so when we refresh your page, we're actually not going to see Space X shows up anywhere. What this is doing is saying, Hey, if this function runs and it is being stored into a variable, that variables value is now going to be Space X, So let's go ahead and save greeting into a variable. So far, I just called var, named variable name is equal to greeting. It's still going to execute the console log stuff because it is still executing this function. However, of our name is now going to be whatever is returned here and that could be an array could be an object. It could be a string Ah Boolean a number, you name it. It could be anything you want to return, but you only get one. You can only return once, and anything down here does not get executed. so watch this. Consul dot log does not work. So this next example we're going to see that this console log is not going to work. But var name is also going to be Space X as a strings. Let's go ahead and give this a shot. Okay, I refresh Issa's Hello is effort ages four. The console log did not work. Didn't show up because anything below the return statement doesn't work. Let's go ahead and get rid of it since it's useless and let's take a look at var name. Look at that, it says Varney MySpace, Six of our name here has the value of Space X, and you could do anything with variables to so you could do age to the exponents of age, which could get really dangerous if you're using a large, large large number. But in this case is going to be four to the power of four, and that's what the number is going to be. So let's say new number and okay, it did our regular console logs. Now let's type in new number and we see 256. We got that because four times four times four times four is 256. And then lastly, when it comes down to using a function, all we have to do is re in Stan. She hated re initializing Let's go ahead and say, Caleb and 30. Let's go ahead and create a new one in here and this is going to be Henry and he is to And so this is going to be, you know, let's change this return to something that makes sense. Let's just return the name. And so this is going to be default name and this is going to be Caleb and this one is going to be Henry. So watch this as I hit, Refresh says. Hello, Zephyr. Ages four. Then it returns. The name stores it in a variable called default name. Then you go to the next line says, Oh, there's a function appear. OK, run that code. We gave it a name called Caleb, and we give it an age of 30. Hello, Caleb. Age is 30. Okay, so it does. That line stores it in variable called Caleb. Next goes to Line 18 says, Oh, there's one in your called Henry. It's running a function called greeting, just like the other two times it's gonna say, OK, well, I'm gonna stop here. Look for a function called greeting. The first value is Henry. So we're not going to use the default value his age is to. We're not going to use the default value of four. And so it's going to say hello, Henry. Age is too, and then it's going to return his name. This part here is going to store that in a variable called Henry. And sure enough, we see Hello, Henry. Ages, too. So if we go ahead and say default name heads from right here, we get suffer. Kayla is Caleb. Henry is Henry. So functions are a critical point when it comes to programming in any language, not just javascript, but in any language. And they almost all work the same way. You have some way of defining it. You give it a name, you give it some parameters if you want to. Ah, you perform some sort of logic in here, or in this case, we're just doing a console log and you return something, and then maybe you store it in a variable, and then you could do something with that variable down the line, so that's functions in a nutshell. In the next lesson, let's go ahead and get some serious hands on practice with functions we're gonna right. A number of them is going to be fairly fast paced. But hey, you can always slow down the video. You can always pause it and try it yourself, and I'm here to guide you every step of the way. 26. Practice With Functions: in the world of programming, there are a few hurdles that are hard for the mind to wrap around the 1st 1 Its functions. It can be hard to understand at first, and really, you just need to practice with it over and over and over again until it just clicks in your brain. Just like that. The next one is loops, and then we've brought objects and object orientated programming and things like that. But the 1st 1 is functions, and once you understand functions, things actually get a lot easier. But this is the first major mind hurdle to get over, so it's really good for us to get some serious practice with functions right now. Now, functions are an everyday part of life. We actually need to know these. You can't write JavaScript without functions. Well, actually, that was a lie. You could, but you're not going to get very far. Your your general code or your Your entire application is going to be extremely basic and not very dynamic, and it's going to get very, very long, and you're going to copy and paste a lot. Now there's a general rule and programming called Dry, which means don't repeat yourself, and how we do this is with a thing called a function, so we can write the logic just once, and we can execute it over and over and over again. And so, for example, if we were converting Celsius to Farron Heights and we wrote out the formula the long way 10 times and we realized that we we got the formula wrong and it's in four different files , we're going to have to go and change those four different files into a find and replace on all of them. That kind of sucks, Whereas if it was just a function, you could just fix the function once, and it fixes it everywhere else. Now, functions can be a little confusing if at first. But you know what? Honestly, just keep working at them because they get easier with time. And I think without further ado, we should just really jump into this. So let's first create a simple and useless function that adds 100 divides by three and just going to take one number, divide by 100 or rather add 100 then divide by three and return whatever that number is So we start off with function. It's a keyword and let's just call it do math and it's going to take whatever number we give it. We have some opening and curly brackets for it to do some logic in here now, we don't know if this number is actually going to be a number. We could make sure it's a number, so we could always say Numb is equal to number numb and let's make sure that's spelled correctly. There we go and then we can say If numb is an actual number, then we could do stuff in here else, not a riel number. And so now our function is split into two because we've got a if else statement in here now , we could do a return statement down here. We can also do a return statement in here and in here, so let's do that. If it's not a real number, let's just return a Boolean of false and if it is a real number, so do do do do do is a real number. We said we want this number to add 100 divide by three. Let's say of our new number is equal to NUM plus 100 divide by three. And if we want to make sure that that strictly turns out this way, we can use the rule of bed, miss Brackets, exponents, division, multiplication addition, subtraction. So it's going to do number plus 101st whatever that turns out to be. And then it's going to divided by three. And let's just return new number. So this is either going to return false or it's going to return the new number. And let's make that a little smaller so we can see this on one page. And don't here, let's say of our custom, Numb is equal to do math, whatever number we want to give it. So let's give it 343 because random numbers save that. And if you were to open this in your page right now, you'll see that nothing happens because we performed all of this logic and we returned either a Boolean or a number into this particular variable called Custom Numb. But we didn't do anything with custom them we didn't console log it or anything like that. So let's go ahead and console log now. Consul dot log custom numb. Now let's open up her page and hit Refresh, and so we can see the number. Here is 147 point 6666666666666 What if we give it something That's not a number? Let's say the number is Caleb. Well, Caleb's not a number. I'm a person, not a number. It returns false because that was not a number. It did not turn out the way we expected it to. Now, should we want to execute this function over and over and over and over again? We could simply do this. We could say, Let's do it with 30. Let's change all of these do do do do. Let's move that up and let's go ahead and just console log every single one of these. And so here it is. It's just gonna console log every number. We're just constantly overriding the same variable here. Let's go ahead and see what this returns. 1st 1 is false, and that's because the name was Caleb. Yep, that's not a number. The 2nd 1 was 30 so we added 100 divided by three and we get 43.3. Repeating next one was 50 so 50 plus 100 is 1 50 Divide by three is 50. That turned out really nicely. 501 plus 100 divided by three, 200.3 repeating. Then we get 41 minus 90. This is an interesting one. So minus 90 plus 100 is just 10 10. Divided by three is 3.3 repeating and then three plus 101 103 divided by three. 34.3. That was a lot of threes. Wow! And so that is the power behind a function. And, hey, if one of these turns out to be incorrect, we can always go back here and say, Oh, actually, that wasn't supposed to be Divide by three was supposed to be divided by four. And watch this All those numbers change. So if you're interested in working along with me, here's what you can do. Create your first function and just pass in a number as its one and only parameter, and then just work with a number a little bit, even if you just do return numb. That's better than nothing So go ahead and give that a shot. Otherwise, we're going to move on to the next function, which is going to be a little bit different. But, you know, sort of the same thing. Let's create another function in here. But this time we're going to create a function based on something that JavaScript does. You notice how we've been writing document? I get element by i d. And then whatever the element is the element i d We've been writing that a lot. We can shortcut that. In fact, you actually see this a lot in a lot of JavaScript libraries. We can write a function, we'll just call it dollar sign and we're gonna pass in the I d. And then what? Weaken dio is weaken simply return this. And so now we've got a function called dollar sign. It takes an I d whatever that ideas. And it says, Hey, returned documents dot get element by i d. We need to change that to our variable, and it's gonna look for this inner document object model, and it's just simply going to return it. Then we can work with a little bit later. So let's Let's try this. Let's say Var title is equal to idea of title and then we want to change. The title dot inner text is equal to custom inner text, and we need to actually make sure this exists. So let's go ahead and create each one in here with an idea of title. There's nothing in it. JavaScript will populate this for us. And just to make sure we know what's going on, your console log I d. Is. And this looks like a function. No, doesn't it function of log first parameter second parameter. Let's open up her page and hit Refresh, and we're going to see custom inner text. False was from this one up here. Let's just go ahead and comment that out for now and you can see the ideas title. So what this is doing is saying, Hey, get the element by its I d of title matches up here. Store that in a variable with your return statements. That's what we did. We were We stored it in a variable called title, and then we can use that. It's the exact same as doing this. Just bear with me here. It's the exact same is doing this. Only now you're writing a lot less. And if you ever wanted to create another one, you could always do of our custom element. Whatever your element is is equal to custom I d. And then custom Ellam dot inner html is equal to something here. You could do something like that and now you're short cutting it. Now you're not writing documents. Don't get element by i d parentheses. Whatever your ideas over and over and over again. You're just writing dollar sign. So it's a nice way of short cutting. Met. Lastly, let's go ahead and create a function where we convert Celsius to Fahrenheit. So we start with the function that's called C to see if I can spell this right the first time fair in hate. It's actually do this. That's called, Uh, yeah, I don't really like this. Is that so? It's just to see two f and we can add a comment in here. Ah, Celsius to air ridden height. Now we need to give this a number. What is the Celsius number? So see, numb? Something like that doesn't need to have an underscore can. If you want, we need to perform some math here. So let's do variable of our Fahrenheit Fahrenheit There is equal to what is the math that we want to do. Variable Fahrenheit is equal to whatever Celsius is. S O. C. Numb times 1.8 plus 32. And so let's put the brackets in here. So that's always executed first again, that's just order of operations. You don't necessarily need it because multiplication is going to come before division. That's not the here nor there that is just math. And then we can return fair night. Now we're not doing any checks in. You were not typecasting. See numb as a parameter as a variable, we're just assuming that it is a number of some sort. So let's go ahead and create some variables in your we got far. Let's say with zero degrees is so C to F well, to put the number zero in there so whatever that's going to be and lets you counsel dot log zero. Hey, fun fact. You can also put lines of code on the same line as long as there is a semi colon. So your computer is going to read this from top to bottom and say Fire zero is equal to and they get to the semi, Colon says. Oh, hey, Okay, well, this part is done, so let's go ahead and execute this as if it was on its own line. So we're gonna do that. One. What is room temperature while room temperature in Celsius is 20? Let's call this 20 and what is boiling so boiling boiling in Celsius is 100 degrees. What is that in fair night and just for fun? Z's Let's do freezing and let's put in a number of minus 40. So what is minus 40 in fair night? Let's go ahead. Refresher page. So we have that going to log from our previous function, but we can see zero degrees Celsius is equal to 32 degrees fair night. That is correct. 20 degrees is 68 F and freezing minus 40 Celsius is the same in fair height. It's also minus 40. Now, why is this important to know? Well, because we're actually doing some math in here. And what if we wanted to right this out manually? Every single time? We would have to replace this with whatever number isn't here. so zero times 1.8 plus 32 were writing it out again. And then we have to do 20 and then we have to do 100 we'd have to write that out every single time. And we're not interested in spending all day typing. We're interested in writing good code. So what we do is we throw it in a function. And you know what the worst case scenario here is? What if all of these are wrong? What if instead of 32 there was a typo and it was 31? Well, it's not gonna make a big difference when it comes to Fahrenheit, when we're talking about, you know, room temperature. But still the number is wrong. And so we would have to go through and fix all of them all at the same time. To that, that's no way to live your life. And if it wasn't a function, while the mistake would have been 31 here and all we have to do is change it back to 32 all four of these are fixed with one single keystroke. So now we're being much more cognizant of where we're spending our time. In fact, we can actually even shortcut this. We don't need to put that as a variable. We can just go ahead and return whatever Celsius is as a number. Times 1.8 plus 32. All right, that is three different functions in JavaScript by now. You should be somewhat familiar at least with the syntax with how it looks before we move onto your next mini project. What I would really like you to Dio is try writing a function on your own. It doesn't have to be useful. Blue first function I wrote here was adds 100 divides by four like I'm never going to use that function in real life. But it is good practice, so don't forget as a reminder functions start with a keyword function. It has some sort of name, parentheses and then you have arguments thes air optional. You can do absolutely nothing if you wanted to and has a return statement to store whatever data you want in a variable. So return return something and then to execute you could do of our name is equal to name like that. Or if you just wanted to execute it, not store anything in a variable. You can also just do it this way. So go ahead, give us a shot. I'm not going to tell you what kind of function to right. It's neither here nor there. It could be a good type of function, a useful function in real life or not. It doesn't really matter. Get as complicated or simple as you like. I just want you to be able to write a function, because in our mini project, we are going to be writing a function. Go ahead. Give that a shot. Don't forget I'm here to help. You have a common section down below. Don't forget. If you have a question, please ask your question. I'm here to help. I want this to be easy for you. Otherwise, let's go ahead and get started on this next mini project because this is where things start to get a little bit fun. I think it's gonna get a lot funner from here on out 27. JavaScript Mini Project #4: Hello and welcome to many Project number four. We're going to be creating a tip calculator, and this really just has to do with functions. Functions are so important. I was warning you in the last couple of videos you need to know functions, and I would actually say Just practice functions until you get him. And so this is a really good way of practising a function. So in this many project, what I would like you to do is create a simple tip. Calculator should accept two parameters. Your 1st 1 should be the total amount of your bill. So let's say you're going to a restaurant and your bill comes to $25. Needs to accept $25 as one parameter, and the second parameter is your tip percentage. How much do you want to tip? Make that second parameter your tip parameter. Make that optional. Give it a default value. It doesn't really matter what your default value is if you If you think tipping should be a minimum of 15% go for 15%. If you think tipping 15% is absurd and it should never be higher than five, make your tip parameter The default value. Five. Lastly, I want you to return the total amount and save it to a variable and then maybe console log that total amount to your page. As always, I am going to work through this right after this, but I would like you to give this a shot first, so feel free to pause the video. Give it a shot. Try your best. If you get stuck, just resume the video and you can watch my solution to this. All right, this is my solution to the tip calculator, so let's go ahead. And first we need to create a script so script. You can also do this in an external file. If you wanted to. The first thing we need to do is create a function so function. Let's just call it tip, and it needs to accept two parameters. So it's a the total bill amount are actually suit total amount and a tip percentage. That tip percentage should be optional with a default value. So let's say 10. That 10% is going to be 10%. And let's just zoom in here, make this nice and big on Let's go ahead and work out some of this math. So the total amount of the tip is going to be of our tip amount is equal to total amount. Times tip. Well, that's not necessarily going to work because our tip is a full number. And so if you're Bill was $25 you said 25 times 10 that's $250. That's not gonna turn out right. So let's overwrite the variable tip. That's a tip is going to be whatever it currently is divided by 100 that's going to give us something like, you know, instead of 10 is going to be 0.10 And so our tip amount here is now going to be 0.10 So this is going to be as if it was 25 times 0.10 just like that. But we're doing it in the language of variables instead. So that's our total tip amount. And we could if we wanted to just return the tip amount. We could say return tip amount and we'd be done. What if we want to return the total amount so we don't really care for tipping 10% or 15% or anything like that. We just want to make sure that our final bill or the function rather is giving the final bill amount. So if we have a $25 bill and we want to tip 10% well, we need to add 10% on top of 25. So now we have our tip amount and we could dio ah, total amount. We could even just overwrite this one because we're not going to use it again. Total amount is equal to the total amount, plus your tip. And then in here, let's do total amount. That's what we're going to return. And let's see if I have any typos or if I've done this wrong. So let's create a variable in here. So it's a var tip amount. No, let's do var total bill. We're not doing tip amount we're doing Total Bill is equal to tip. What is my bill? It's $25 how much do I want? A tip, Let's say 10% and then consul dot log total bill. Let's go ahead and give this a refresh and we can see that my bill is 25.1. That doesn't seem right, does it? Because 10% of 25 is 2.5. So should be 27.5. Something isn't right. What could it be? So now, as we debug us, we could do council dot log tip amount is the tip amount, and then we could also dio council dot log Total amount is the total amount and we can see what's happening here. And then we can also consul like this one council dot log tip as, ah percent is and then whatever tip is going to be So let's refresher page tip as a percent of 0.1. But the total amount is not right. Something's not right here. Why is that? Oh, look at that. There was a typo I used tip and it was supposed to be tip amount. And so there we go. We got some live debugging for you. I'm just going to get rid of all those council logs and refresher page and look at that 27.5. And with that, the mini project is complete. Now I know in step four says returned the total amount and save it to a variable. But if you just wanted to return the tip amount, you could actually extend this as well. You could say Return Tip only is equal to false. But if returned tip only is equal to true. So if returned tip on, Lee is equal to true. We could return just the tip amount and then in here we could say No, let's not do that one. Let's go ahead and copy this because that's fine the way it is. Total tip. Let's give that true. We need this to be total tip as well, and let's comment that out. And then let's go ahead and ah ha look at that total tip $2.5. And let's uncommon that, and we'll see both in year. And so now we have, ah, function mean this return tip only part was extracurricular, but we have a functioning here that can return one of two things, either the tip amount or the total tip amount. Also, take note that I did not use an else statement. I didn't use an else statement because I didn't need to were saying if returned tip on Lee , then just returned the tip only otherwise, in every other instance, just returned the total amount. That is the exact same assaying else. In this particular scenario, it's the exact same. So there you have it. That is, many project number four year tip calculator all figured out. If you wanted to make this really fancy, you could actually query your page for an element and change a bunch of text on there as well. So your page actually looks like it's doing something instead of just simply console logging anything in here. Because right now, if someone were to try to use this and non developer would not know toe, look in the console. And, as always, if you have questions, don't forget, you can leave them down below. I'm happy to help at any point in time. Once you're done with this many project, let's head on over set next lesson and learn a little bit more about query. Selectors 28. Query Selectors: Okay. Hello. I hope that last many project went well. Now is the time where we start getting a little fans here with our code. So we're gonna start actually interacting with our page. Up until now, we've been using document dot get element by idea, and we began getting the i. D. Every single element, which means up until now, all over HTML needs to have an i d. And that is just honestly, no way to live your life. What if you just wanted to select the small element or just a link or just a particulary link? What if you wanted to select something by its class? What if you wanted to select multiple elements that all have something in common? We can do that with JavaScript, notices more modern JavaScript, and you won't see this an older JavaScript And that's actually OK, because this is super well supported. So for this, you're going to need to know a little bit about CSS. So in the world of CSS as a quick little crash course you have, this is a class, and then you've got and I d declaration. And then you've got an element declaration and that's just about it. And then we can get fancier with the two. So we do like class and then a child element with the I d of I d and then a child element of a link and weaken style it that way. And so dot means class hashtag means i d. And if neither of them are presented, then we're assuming that it's an element. So that is a quick, quick crash course on CSS selectors. That is fastest. I think I've ever explained it. But hey, let's not learn about CSS. Let's actually get into some of this nitty gritty stuff because this is going to be pretty fun. So we have this new thing called a query selector. So let's go ahead and write a query selector and let's just get the title such to Vire title and let's make that just a tad bigger here. Fire title and we want to get it by its I D. Okay, well, we could do that so we could do documents, don't get element by i d title and then title don't inner text is equal to changed by default is going to say hello world. This is the title and it's good to have a child element in there, a small element, and it just has changed me, too. If we load this up, it just has changed. Okay, so we know that this is working, but we don't want to get it by its I d. So let's give us a class. Class is equal to title and let's go ahead and just ditch this idea because we've been using it so often and honestly, not many elements have ideas. So let's go ahead and try to get this by its title or its class called title. So we do. Query selector dot title Just like it's CSS. So we're going to grab the 1st 1 now query selectors, only going to grab the 1st 1 So if there's another element in here with a class name of title, it's only going to grab the 1st 1 to find moving from top to bottom. So make sure that whatever class you're using is unique. In this case, it would be, ah, better practice to use an I d rather than a class, but let's go ahead and give us a shot anyways changed using a class bam changed using a class. And if we do this title, we can actually see as soon as I type it in here, it's selecting that entire node. Okay, I have to common that out because I want to now select the small. How do I select an element inside of an element? Well, if I wanted to, I could do far. Small is equal to document dot query selector and just type small and this will get it. This will get it by its element name so we could do something along the lines of online. 21 small dot inner text is equal to wow, I'm tiny text. And there it is, while I'm tiny tax, all caps. But it didn't change the hello world. This is the title. It just got this one. So that's pretty cool. We could do that too. Now what if somewhere down the road we have a large class, Maybe it's ah card of some sort and we want to get a particular element inside of it. So let's just pretend that this is much more complex and much bigger. So we've got a class called title and we want to get just the small element. Remember, Query selector is going to get the first small that it finds. So let's actually create an example here. Small. This one is first and watch. Change me to is not going to change, but this one first will change and there it is. It selected the first small. It didn't select the 2nd 1 It just got the 1st 1 What if we wanted to get this one? Well, currently, we don't have a way to do that. We don't know how to get the 2nd 1 So let's go ahead and grab just the 2nd 1 So what we can do here is let's comment this out. Let's create another one in here called. We'll also call it Small Virus. Small is equal to, and then we can do title dot query, selector, small. And so instead of getting the entire document or document object model and looking through it, we're just looking through the title in North Ince. Anything that's inside that title with an element called Small grabbed the 1st 1 there. So now we could do a small dot in her text is equal to what, what? What? What? Wow, and bam. Look at that. 1st 1 is unchanged. The 2nd 1 is changed. Awesome. So now we know how to select an element by its class, and we know how to select an element that is a child element of that original element. In this case, we selected the child element of the H one. Okay, I'm gonna comment those out and let's go ahead and change just the link text. We can do that as well. We've already seen this, but, hey, a few more examples never hurts so far. A for my guest anchor is equal to documents. Dutch query, selector A and let's do a dot inner text is equal to coding for everybody dot com bam coding for everybody dot com. So there's that example is, well, that's just selecting an element based on the actual element name. Not a class, not an I d. Just the element name. Now that's all well and good. Let's go ahead and comment this ode and also this one and also this one. Let's go ahead and create an instance where we need to select multiple classes. So let's create an a nordeste of boring a Norden list nothing fancy in here. And let's do L I number one ally. And where you gonna go Over and over and over. So in here, I have a nordeste with seven elements in it. So let's go ahead. Number 1234567 So we've got list items in here. What if I wanted to select all of these list items? How am I going to do that? Well, what I could do is that's open up a new script tag here, and you can actually see that V s code is going to try to auto complete this for me. So it's du var allies. L I I wish I could do it apostrophe there. But allies is equal to documents. Then watches Queary selector all, and we can give it the exact same thing. In this case, we just want to select an element. No, we're not going to do anything with this yet, but let's take a look and let's get real small. And then let's just refresh and did it did, uh, Allies, this is going to look somewhat familiar to you by now. Let's actually make this bigger drum roll, please. It's a note. A list. But, hey, when we look into it, doesn't this look a lot like an array? So once we learned how to loop through an array, we can learn how to look through a node lis pretty easily. And it comes with all sorts of stuff in here, too. Okay, so in our list of allies, we have Index's zero through six or in human terms, one through seven. Let's grab the 1st 1 and just change that text. How would we do that? Because it's an array with an index. Well, we know it's basically an array. Looks like an array. We could grab the 1st 1 There we go. We can actually see that. It's highlighted it in my document object model. And then I could do in her text. And I could change that to anything. I want anything I want and look at that. It worked. So now we can change any of these. So let's say we wanted number five. Well, what number is that? Remember, computer, start counting at number zero, not number one. So we want to go back. One for it. Selected the right one dot inner html is equal to H R. Yes. Hi. Hi. Hi. Hi. Hi. Bam. Now there's a link inside of you. And actually, if we right click and inspect it when you'll see that we have added a link to our document object model. That's brand new. That was not there in the source code. We added that dynamically. Okay, now, that's all fun and games. But what if we wanted to get the value of a text field or a text input? So let's go ahead and create a new example in here. Mm. We're gonna create an input. I'm going to just give it a type of text style. Let's make it big padding. 30 pixels. Font size, 30 pixels. So, you know, fairly big. Let's give it a class name. Something that were sort of familiar with. If you've ever worked with bootstrap called form Control. Now, this is not going to look nice, but it will have a class name. Okay, Cool. We've got big text area here pretty easy. What if we want to get that value? Well, let's give us a default value default value of at Low World blah, blah because it doesn't really matter what it is. We just want to get this value. Let's go ahead and create a query selector where we can actually get that value. So we have a new script in here, and let's call this variable Input is equal to documents dot queary selector, and we just want to select the 1st 1 cause there's only one in here dot form control when that will give us our 1st 1 Then we could do council dot log input and then simply the value. And that's just doctor value. So let's go ahead and refresh your page. We can see Hello world blah, blah, blah. That's exactly what's in here. And if we change this to hi hi, I it changes in there as well. All right, So as a quick little refresher of everything, we just went over to grab an element by its title and only one of them. We use query selector, and you can use CSS electors, as you normally would in CSS. And then we just changed the inner tax. No big deal. Then we said, actually, let's just get these small, but that was the 1st 1 and we have to on the page so it just changed the 1st 1 Then we said Let's create another variable called small. But instead of querying through the document, we queried through just the title, which we have already selected up here. That's a note that does exist. And so there's a title here and we're gonna say within that title, look for a small element and inside of that just changed the inner tax to Wow! Wow! Wow! Wow! Wow! And then we said, Hey, you know what? We just want to grab a regular link just the 1st 1 on the page and change the inter text a coating for everybody dot com No big deal. And then we said, Oh, actually, let's grab multiple elements. Let's grab all the Allies It created an array like object called a node a list, and it grabbed every ally, all seven of them. And then we were actually able to change it by just selecting one at a time with its proper index number. And lastly, we haven't input field here with a class of form control, which we grab. There was only one, so we used query selector, not creepy selector, all like we did with the allies. This grabbed all seven. This just grabs the 1st 1 you can find on a page, and then we can't along with the input value. So whatever the value was on the page, we were actually able to get that and console log it. So now we're starting to build some interactivity between the user and us. Now, your biggest take away is honestly, this one here, it's probably the simplest one. So what I would like you to do as a quick little task, a little bit of homework give this a shot, create a new input and then use document a query selector to grab that input, Maybe use a class use an I D. Maybe just use the regular elements name called input. Give it a default value and then console log that default value. If you could do that, we're good to go onto the next lesson because we're going to start working with a lot more events, and this is where our JavaScript gets a lot more dynamic and becomes a lot more fun. Not that this wasn't fun at all, but we really had to get through a lot of the fundamentals in order to get here. But now we can start creating pages that have event listeners. We can trigger events when someone clicks a button or submits a former types into a text field. So go ahead, give us a shot. Don't forget. If you have questions, leave it down. Be low for me. I'm always happy to help. Otherwise, if you are feeling confidence in this lesson, let's head on over the next one where we're going to learn about events. 29. Introduction To Events: events are what makes javascript really awesome. When someone does something like type in a text field or click something, click a button scroll, submit a form. This is what makes Javascript really interactive. Now there are really two primary ways we can do this weekend creates an event listener, which we're going to cover in a later video. Or we can create HTML based events, which is what we're going to stick with for now because it is a nice transition into JavaScript. Bind ID event listeners. So forget I even said that last part. Let's just start with a simple button. So let's go ahead and create a button in here. We have a button. Classical BBT nbt n primary. If you're using bootstrap or something like that, let's just make sure this is a regular button. So type is equal to button, and this is going to say Click me. All right. We got ah, boring button in here. And when I click it, yeah, it does nothing, but what we could do is we can use on clicking. So if you remember using this in HTML or if you remember sort of learning about it, we're seeing it. This is where we're going to use on click. Now. There are several other events. There's on submit on Click so on and so on and so on. There's tons of them. I couldn't possibly go over all of them, but the on click event is the one we're going to use to trigger some JavaScript. So let's go ahead and put this on separate lines. So that's just look a little nicer. And on Click, we want to execute some JavaScript function. So let's create a function called Click Me Put parentheses in there, and we also need some JavaScript in here as well. So script function. Click me and that matches this one up here, and it's not going to do anything at all, and it's not going to take any parameters at all. It's just going to console log cook and that's it. Nice and simple. But watch this. I can spam this over and over and over, and it just keeps getting clicked. And so this is really the base behind a click event is any time someone clicks on the button is going to execute some JavaScript, a function called Click Me Now we could actually get a little fancier with us to get. So far, Total clicks is equal to zero. Let's do this. Total clicks is equal to total clicks, plus one. Alternatively, if you come from other languages, it might be easier for you to do total clicks plus plus, that's the same thing is doing. Plus one and let's do console dot log. You've click this button Total clicks times and just so we can see this on one line so it looks a little nicer. You've click this button Total clicks time, so you've clicked it one time two times, three times, four times. Let's give us a refresh. You click that one times two time one times. I like that two times three times four times, and it goes on and on and on. And so that is a click event. And really, what JavaScript is all about is events, because why have any JavaScript running if someone is not going to have some event going on ? If you don't need user interaction, you probably don't need JavaScript at all. So let's go ahead and make this a little more interesting. Let's create a very basic calculator it's going to be. Basically, someone adds one number two, a number that already exists. So let's go ahead and start this from scratch. So we've got an input. Field type is going to be a number. Class could be like form control because we see that a lot in bootstrap. And let's go ahead and give us some basic styling. So padding 30 pixels, fun size, 30 pixels, color, blue border, one pixel, solid blue. And that should look fine enough. That is way too big. Let's make that. Does that wee bit smaller. There we go. So we've got a number field in here. Okay, now we need a button. So let's go ahead. Create a line break and this at a button to get a button in. Year class is equal to I don't know Bt and got beat Ian Primary. Just like in bootstrap. We're not using bootstrap, not yet. So that's not gonna do anything, but we could also style is if we wanted to. I don't let's add 100 so whatever the number is in number is going to be added to the number 100. So it's really half a calculator at this point cause we're not giving two numbers. We're just giving one and saying, We're gonna add 100 Now let's make this a little funder and let's actually make this page do something different. So let's do, ah, throw each one in here. The total is and then we could say span. And then whatever that total is going to be. So. Currently, when we load the page, there is no total. Let's see what this looks like. We had a number field in here, which looks pretty disgusting. Then we can add 100 and the total is nothing yet. Let's add some JavaScript to make this fun script. We always have to add 100 because that's I guess, what we're doing. So let's say Vyron, um is equal to 100. It's just sort of how this example is rolling out. Next. We need to create some sort of on click feature, so I on Click is equal to Let's call it Calculate and we put that on our button. Now we could do function calculate it's going to take no parameters because it's going to automatically grab values from the page. So now we need to grab this input field, which has a class of form control. It's the only one in here, so we can just do a regular Corey selector instead of query selector. All so far, input is equal to documents dot queary selector and selected by its CSS class of our value is going to be input dot value. But let's typecast that as a number, make sure it's always a number, and then we could do, you know, if value. So if it's actually number, we're not going to get that far into this. I think that's going to pollute this lesson a little bit, but we could also do something like far total value is equal to value plus 100. That 100 already exist in a very bold called numb right right there. So now we have a total value and we have to select this fella. So let's create a query selector to grab the H one. And then let's create another career selector to grab the span, and we we could just select this band because it's the only one on the page. But what if it wasn't? It wasn't the only one on the pages could be a little trickier. Let's create var. Age one is equal to documents dot queary selector. We know that this is the only one on the page, so we can just use a regular query selector H one and then we could do far span is equal to H one dot query selector span. Now that we have that in there, we can say spend dot inner text is equal to whatever the number is. So let's put the total value in there. And let's see if Caleb has made any mistakes. Console log is not complaining about anything that's put a number in here. Let's put the number nine Oh, yeah, Look at that. It can't find something I cannot set property inter text of No. Oh, it doesn't know where to find that. So now we debug, and this is a big part of coding as well. I'm actually glad that some of these mistakes come up so you can actually see how someone does this kind of debugging. So we have a function in here and we want to grab this h one. So let's just grab that. And when we type H 10 look at that. It's because it's not the only age one on the page, huh? Well, we could do one of two things. We could get rid of this one, or we could do it the javascript way and we could do query, selector, all but because this returns and a rain, we know all about indexing, and we know that there's at least two H ones in there. We want the 2nd 1 Just grab one, because remember, computer, start counting at zero, not the number one. Let's try this again. That's just get rid of that. And let's put the nine Number 23. Oh, look at that. And now we have somewhat of a calculator so we could put any number I want in here. And it's just going to add 100. What if I don't have anything in there? Nothing. Okay, what if I tried to put the name Caleb? Oh, it's a number field, so html doesn't allow me to put numbers are letters. It only wants numbers so cool. That's a little bit of security there. So let's do 01 What happens there? It's still 101 And so now at this point, we have somewhat of a working calculator prototype. There's nothing in the console log. We're doing it all on the actual page and now our pages becoming a lot more dynamic. This is where it gets a lot, not funner, because you can actually see your progress at this time now going back to our function. We're not actually returning anything we could, but because it's an event listener, it doesn't need to return anything. It just needs toe execute a bunch of code. And that's what we did. We said, Hey, run these six lines of code but, you know, wrap it up in a name called Calculates that we can just type calculate in here. So really, we packaged it up in a nice Amazon box, and we said, Hey, this box has a sticker on it called Calculate, and inside of this box is six commands. When you open that box, the calculate box there are six commands in their six items, and so that is the basis behind JavaScript events. Now there is a much more JavaScript you way of doing this, called an event listener. But this is a very good Segway into that Now, what I would like you to do is try this out. Create an on click event that uses a function again. It does not need to be super complicated. Don't feel like you have to impress anyone with it. It just needs to do something, anything. It could even console log if you wanted it to. If you get stuck along the way Hey, there's a common section down below. Don't forget, I am here to help you. And if you're feeling rather confident that you have this down pat, let's move on to a bigger project. 30. JavaScript Tip Calculator Project: Okay. Hello and welcome to your first big ish project. We've done a bunch of many projects up until now, and at this point, we're going to work on a bigger project. So one point we actually worked on a tip calculator, and we just wrote the javascript for it, but we didn't actually write the front end, which is an important aspect of JavaScript. So in this project, we are going to be creating a tip calculator and actually displaying the totals in the document object model in the actual browser. So there are a few things I would like you to do. First of all, you need tohave a bill amount however much that's going to be. We need an input field to grab that that value that number, we need a tip percent, and then we're going to need some sort of event. So when we click calculate, tip and total bill, it's actually going to work those numbers, and then it's going to tell us how much we should tip and how much the total bill will be with the tip. So for this, we're going to use the on click event on the button and then we're also going to use a couple of query selectors to grab these values, so there should be a calculate event and on click events. So whenever you click this button, it calculates the total tip and total bill with the tip on top of it. It's supposed to grab the numbers, whatever numbers are in here at the time when you click the button and then it's going to display the total tip amount and the total tip amount with the bill on top of that. Now, as you can see, I already have some of ah, the layout built in here. I'm just using regular bootstraps, so there's nothing fancy going on, and we're going to use a vanilla javascript to get this done. Now you're going to be using a function Ah, and event and a number of query Selectors. Now, I would like you to give this a shot on your own. See if you can figure this out on your own. At this point time, you can pause the video right here and give it a shot. It shouldn't take more than maybe 15 or 20 minutes total. And hey, you know what? If you get stuck, just resume the video and I will show you exactly how I go about the solution. All right, let's take a look at how I would create a tip calculator using to input fields and a button . So let's go through my you I first the html just so you sort of know what I'm working with here in here. I have a label for the bill amount an I d for the bill amount, and that's just the regular total bill. We're gonna put a number in there. For example, 25 99. Whatever the meal is going to cost, let's say you're at a restaurant in cost 25 99. This is the bill amount, so I'll be using an I D. But you can use a class if you wanted to. You could use anything else. Whichever way you want to select this element, that's up to you. But I'm going to use an I D because it's the only one that's going to be on this page. I basically did the same thing with a tip. Amount to selective amount is going to be a percentage has an I D. We can see that here the ideas, tip amount and the placeholder is AII like nine or 9% and we're going have to take that 9% and turn it into a decimal. And then we've got a button in here. So we've got, you know, some more formatting in here, but primarily we have a button that says Calculate Tip and total bill. And lastly, we have a row that we can't see yet, and I'll actually demonstrate this 123 and then 456 And here's where we're going to display the tip amount and the total with the tip, so just because I don't have any values in their it looks like it's currently invisible. So when this is calculated, we're going to fill these dibs with some sort of text or HTML in it. Let's go ahead and get this started. Let's dissect this moving backwards. We want this form when it's actually not really a form. It's an event. It's not using a form. Elements were not submitting a form. We need an event on the button. So whenever someone clicks this button, it needs to do something first. Things first is we go to our button and we use on click, and then we need to give it a function name. So let's give it, ah, function, aim of calculate. And at that point, the project really starts to guide us. So we have calculated they're not make this just a little bigger. Here we have a functioning here called Calculate, and now we need to add a script in here, and we need to create a function called Calculate. Now we don't know what this is going to take yet, but we do know that we have a function called Calculate and it has to exist. So let's go ahead into a console log clicked. And when I refresh the page and open up my inspect tools here in the council, and let's just make that bigger, let's click here click, click, click, click like Okay, good. The click event is we're working. Next. We need to be able to grab the total bill amount and the total tip amount. So how are we gonna grab these elements? Well, we know these elements are inputs, so we need to grab the value of them. Currently, there's no value in there, but when we type, there could be a value in there. So let's go ahead and create a query selector for each one. It was created variable for the bill amount and that's going to be documents dot No, we're not gonna use critics selector We're going to use get element by i d. And what was that? I d. We have bill amount and tip amount feel amount and we have the same thing down here. Tip amount. That's near the bottom south. Kind of hard to see now. These are just the nodes, these air, the HTML elements. This is not the actual value. So we could at this point do something like dot value. Or we could put these into new variables or overwrite the existing variables with something like tip amount is equal to tip amount that value. And I didn't spell that right, because that is technically a different variable. There we go. So we could do it one of two ways here. I'm gonna leave both of these in here just as an example. Now, this point, we don't know if either of these are numbers, so we're gonna have to work with that. A little bit and let's go ahead and cast these as numbers. Let's say Bill amount is equal to the bill amount, and in here we just want to cast us as a number and we want to do the same thing with the tip amount. But we could actually even do it in here like this. And in fact we could even do it this way. So now let's go ahead and console log. Liza Suit Council. I thought, Log bill amount and the tip amount. And so when I refresh the page and I put a number in here, let's say 12 is the 1st 1 and 34 is the 2nd 1 We see 12 and 34. So we know that these are working. And if we were to console log the type of each one, we would know that they would be a number. So we can now do appropriate math with them. We don't have to worry about can Katyn ating? It s so that the total turns out to be 1234 We know that if we were to add these together, it would be 46 instead of 1234 So it's an actual edition and not taken Captain ation, and we make sure that that's the case by using a number. No, the tip amount is currently a number. The tip amount is by default. Well, by default, it's nine. But right now I have 34 showing, so default is nine as the placeholder text. It's not what the actual default is, but it says that's you know example. Nine. We need to turn this into a decimal, so let's go ahead and change. The tip amount is equal to tip amount divided by 100 so that just changes nine. So let's say nine is going to turn into 0.9 That's basically all it's gonna dio. And now, at this point, we need to create a total tip amount. So I have some pretty bad naming conventions in here because I'm just calling it all tip amount. You might want to rename yours so that it's a little more verbose, little more discreet, so you always know what you're working with. I'm just going to use tip amount in here, and I'm gonna create a new variable called total Tip of our Total tip is equal to the bill amount times, the tip amount and that's it. And at this point in time, if I save and refresh the page, there's no errors in here. And I know that I can now select this and put the total tip in there. So let's go ahead and do that. Let's do documents. Don't query selector. We want to use the tip amount. CSS selector dot inter html. We usually do this in a couple different steps, but in this case we're just going to do it all in one line. And that Inter html is simply going to be the total tip we could use inner HTML or with use . Inter texts were not using HTML, so we should probably use inter text. But we might want to spice this up a little bit later. Okay, so I put let's say 50 and 10. And if this works out of the total tip amount should be five and everyone says five right there. It's a little small. We'll make that bigger and in fact, because it's HTML, we could say HD male, total tip and then in here we could make a small element in Katyn ate all this. And in fact, what I want to do is actually split this onto new lines. So let's do var tip html, and this just keeps it nice and clean by putting it on two lines. And so I closed the small tag and the H three tag, and then I put tip HTML on here and let's rerun this. So again, let's put something like 100 put a total tip amount of 25%. So we know 25 of 100 is going to be 25 about total tip 25. We could put a dollar sign in there if you know you're working with dollars and something we didn't learn. But, you know, could be kind of fun to work with. If you want decimal points in there, you could do to fixed two and that Just make sure that there's always two decimal points in there, so let's go ahead and refresh and give this a shot. 125 and this will say 25.0 So I don't expect you to know the to fix things, but, hey, that's a cool little trick, and I like to throw those little tricks and tips into these projects solutions as well. Kind of gets you more familiar with some of the different ways. We can do things in JavaScript without necessarily needing a whole lesson around it. So we have our total tep. Now we need the total bill amounts. Let's do var total bill amount, and all we want to do here is add the total tip, the one that we've already calculated to the bill amount. That's the regular bill amount. And let's go ahead and copy this line here because we're not gonna change too much. So tip HD mail is going to be. It's a bill html total bill with tip, and we're going to need to change this to match total bill amount. And so this variable now matches this very. But let's put this on separate lines as well. Let's do this. Make it nice and easy to read. And then, lastly, we just need to grab our note element from the HD males. We need to use a query selectors of document dot query selector. We don't want the tip amount we want to the total with tipped. If so total with tip and we could do inner. HTML is equal to Bill HTML. Let's go ahead and refresh and let's give us a shot. Let's do some basic numbers so that we know this is always going to work out. So we've got a bill of $100 in a tip of $25.25 percent, not $25 25 out of 125% out of the hundreds going to be 25. So the tip amount should say 25 and then the total bill amount. Assuming we did everything right is going to be $125 and boom. Just like that, we've got total tip $25 total bill with the tip $125. And let's go ahead and do something a little a little crazier, because bills are not usually just $100 let's say 87 dot 43 so he's $7.43 and tip amount as a percentage. So maybe you generally like to give 15% and you don't want to work out that math in your head So you just click, calculate tip and total bill and it tells you that to your new tip is going to be 13. 11 and your total bill is going to be $100.54. So there you go. That is a calculator project. It's the tip calculator project is a larger one, and we are using a little more functionality within the document object model. So we're actually using input values were actually calculating it with a function. We're not actually even returning anything because this has more to do with events and not really storing data as a variable. We don't really need to return anything. But if we wanted to, just for good measure, we could always return the total bill amount like this. Or if we wanted to put this into an array, we could say, Ah, the total tip amount, the total tip amount comma the total bill amount. I know we have access to this function in the browser console so we can run, calculate, and it's just going to grab the numbers from our page automatically and is going to return an array with the tip amount and the bill amount the total tip in the total bill. So let's go ahead and give us a refresh. And let's do this. Let's say 92.67 and the total tip amount is going to be eight. And in here we can say totals is going to be calculate and it doesn't take any parameters. It's automatically grabbing the parameters that it requires from the input fields from your document object model. And look at that. It automatically changes our page. Plus, it also returns the total tip amount plus the total bill with the tip, albeit it looks like it returned strings. So if you wanted to, you could actually change that into a number. But, uh, so that's all there is for the tip calculator. I hope you learned something really cool. And as always, if you have questions, concerns, comments, you can always leave them down below. Don't forget, you can always take all of your code. You can take a screenshot of your code like I have. I've got my editor right here, and then I've got my final product right here. You can take a screenshot of that and share that as your project. Or you can throw it up in code pen. If you like that better and you can share your code pen. You're Ellen. I can take a look at the actual code and functionality of it for you as well. 31. Anonymous Functions: already. Let's take a look at anonymous functions before we do that. I hope that last project went well, where you created a full tip calculator from scratch and sort of transitioning from that into some more function based stuff. So these become a little more JavaScript e things where an idea like an anonymous function may not exist in every single programming language. But it is definitely a very common thing in the world of JavaScript. When it comes to a function, we have keyword function, whatever your function name is going to be. Param one parameter to bunch of stuff. Return a thing here. That's your basic function. I'm gonna go ahead, comment this out and let's go ahead and look at what an anonymous function looks like. So an anonymous function is a function without a name, and this gets a little bit more into scoping, which we'll talk about a little down the road. Scoping is basically where variables are able to be used or where functions are able to be used. But we'll talk about that down the road. You don't have to be concerned about that right now. Let's take a look at an anonymous function so anonymous function could be stored in a variable, so we have variable get name. And then instead of creating a function name, we just give this a regular function function, and then we could give it a parameter if we want to. But we're not going to at this point and then just like a regular function, we could return a thing here. So, for example, I could return my name Caleb hauling. And when I opened this up in my browser, if I type get name Oh, it's a function. Look at that. It's not a variable in. If I do type of get name, we're going to see it is a function. So how do we actually get this now? So it looks like a function. Basically, we just store to function in a variable. Now to actually make this work, we need to add parentheses because it is a function, not a variable. It just happens to be named as if it's a variable. So we use get name with the parentheses here, make that a little bigger, and you'll see Caleb telling. We can also store this in another variable, too. So that's a variable one. That's what we're gonna call it variable one, because I am creative that way. And then I could do council. Let's do a warning. Fire one. There it is, Caleb telling. And so that's really all there is to an anonymous function. Now, at this point time, you're probably thinking, Well, why would I ever need that if I could write a regular function? Well, an anonymous function is basically, if you have a bunch of logic or really any logic that you want to perform just once, it doesn't necessarily need to go in a function. Functions are meant to be used over and over again. But if you have group code where you're performing some sort of logic, or maybe you're getting a value from the document object model from your HTML and you only ever getting it once. Well, then maybe putting it in an anonymous function, a function that only ever should be run once is a good idea. And let's give this a solid example here. So I already have bootstrap in here, and what I'm going to do is just set up a simple bootstrap layout. Okay, so here I have a container row. Call him no big deal. We have an input text that has a form control class and a custom one in here called Js Custom name. This is the one we're going to want to use here. So, in our anonymous function, what we could do is return document dot query selector put our query selector in there, don value. And now the name is going to be whatever we tell it to be. So if I refresh your page here, we have an input. It's actually the very top of the page was kind of hard to see, but if I say John Smith and then I execute get name? My name is John Smith. So now I could say so. Now we could change us to anything, Caleb Colleen. And down here, I could run get name again, just like a regular function. Or I could store this in the name so I could say name is equal to get name. And now name will always be name. No matter how many times I changes. So if I change is back to John Smith and I type in a name, it stays as Caleb telling because we got the original name and then we started as a variable. Now the big thing here is when you're using an anonymous function, really, you should only be trying to use it once you have one or two or three or maybe more lines of code, and it's all just supposed to go into a regular variable. So instead of storing this as a variable, what we can do is we can use get name as a function almost as if it were a variable. So let's go ahead and do council dot log. Hi, my name is and that's can cat get name in here as a function not as a variable. And it says, Hi, my name is John Smith. And if I change this back to Caleb Tallinn and I rerun, this exact same thing is going to change. It's going to say hi, my name is Caleb calling. And so there is a use case for this. We're not going to get into this too much right now, but down the road, you're going to see a lot of this in more advanced javascript. And then if we wanted to actually make this run automatically, so we don't have to run this every single time. We can just run it as soon as the page loads. We can wrap this in parentheses at two more sets of parentheses at the end and a semicolon , and this is what we call an immediately invoked function. And I i f e We'll talk more about this in the next lesson, but basically this is going to run right away. So if I refresh the page here and I type get name not as a function but as a variable we can see that has already run happens to be there's nothing in there. So let's go ahead and change this default value. Let's do kylo ren. So default value here is kylo ren, and if I get rid of this and type, get name it says Kylo Ren. So now we have a function that automatically running just once and storing it as a variable name called Get Name. And that's how we use immediately invoked functions again. We'll talk more about these in the next lesson, so I'm just gonna undo this for your task. In this lesson, there actually is no task. I'll keep that that there again, this is just something that's really good to know. You're going to see this a lot more down the road. When you start sort of getting out into the JavaScript wild, you're going to use these a lot more often, but essentially it works the exact same way as a function so you could pass in a parameter if you wanted to, and then you could call it as if it was a regular function. 32. IIFE: Okay, let's take a look at what is called an immediately invoked function. Basically, this is a function that runs right away. So in the wild, in regular JavaScript, we're going to see a regular function that looks something like this. We've got a regular function keyword than the function name, maybe a couple parameters, and it returns something. We don't know what is going to return. You could return basically anything on. Then, To execute that function, we always have to do something like this function name put in the first parameter, put in second parameter and maybe start as you know, a variable of some sort, and that automatically runs it in the last lesson. What we looked at was something a little bit different, an anonymous function, and we sort of got into and I i f e and immediately invoked function Expression is actually what it's called to let me write that out. I've been saying I i f e, but I haven't said the whole thing, so I i f e is equal to and immediately invoked function expression. And so these are basically just functions that run automatically. And when we do this, we're going to see that this actually works. So let's go ahead and refresh. I've got a default value in my input field because that's what is grabbing document curry selector Js doc Custom name and it's returning the value. So I have default value of kylo ren and when I refresh looks like nothing happens. But when you use get name shows up his kylo ren, so to create an immediately invoked function. Basically, all we do is we take a function. We'll do this one first. This one is an anonymous function, so we just put an opening bracket at the beginning closing bracket at the end and then a set of brackets or parentheses, rather a set of parentheses at the end. And that tells Javascript. Hey, as soon as you see this function, run it. And so it does. And so no, we can just use get name instead of what we would have had to do with the regular function , which is get name as a function. You can actually see that there's an uncaught type air here says get name is not a function it's not. It used to be a function, but it actually returned of value in here automatically. So now get name is actually just a variable with a value in it. That's how we turn an anonymous function into an immediately invoked function expression. If we wanted a regular function, let's let's not do that. Let's make a note in here. Actually, that this is an I I fi with an Nana Miss function. If we wanted to create a new function that runs automatically could do literally anything, we could just create a function like this. Give it a name. So let's say load app. That's gonna be our name. And in here is going to say consul dot log app is loading. There's going to be some sort of logic in here. Maybe your page was going to do something. Maybe there's an animation. Maybe you have to wait for something. And then at the end, you could say council dot log AP is loaded. Well, right now, this is a regular function, so this isn't going to do anything. If we load the page, we're going to see that neither of these consul logs show up and let me get scared of that there. And when I refresh you have, None of it shows up. I'm actually going have to run load app as a function for this toe work. But what if you have all sorts of logic in here and you don't necessarily want to run load app? It's just supposed to run automatically. Well, I mean, there's nothing wrong with doing it this way in this would work. Or you could just tell JavaScript. Hey, just run This automatically just doesn't matter what it's called. We don't have to. Instead, she ate it. We don't have to load it, just perform just as soon as it's there, Let it execute. And so now when I refresh the page, we're going to see that the consul logs both show up just like that APP is loading app is loaded. So really again, just as a quick refresher. All we do is we put in opening parentheses at the beginning of the function and then one at the end of the function and then a set of opening and closing parentheses at the very end and that just tell JavaScript. Hey, even though this is a function, run it automatically again. There's no homework, but whenever you look at a JavaScript library or framework, you're going to see this kind of expression all over the place. And at first you think, Well, why are there so many parentheses all over the place? And that's all this means. This just means we are simply going to execute whatever is in between this automatically. That's all it says. And so that is some fantastical fund with JavaScript. 33. The `this` Keyword: Let's talk about a subject, a keyword that is kind of scary to a lot of new developers. And that is the this keyword when I say keyword, I mean, it's a reserved word, so we've got reserved words like return function, var. And now the word this. So generally you don't want to use any of those keywords as variable names. So the this keyword really just refers to an object with which is executing a current bid of JavaScript code. It sort of just means myself, me talking about itself. So in the example of a function, we have a function get person, and we could give this a name and then we could do return name. So pretty simple function variable. Kayla was equal to get person Caleb. And so that's just going to return. Caleb is equal to Caleb, And whenever you see this, you're gonna see this dot something. Maybe it's a function with parentheses. Maybe it's this dot Another variable don't function. Something like that will get into proper naming a little bit down the road. Or maybe it just this dot name. Whenever you see this dot what this is referring to is your function or if you're inside of an object which we haven't spoken about yet, We haven't formally learned it. It's just going to reference itself. So really, what this is saying is this current function dot name and this is the key word here. And so a nice thing that we can do here is we can start sort of assigning variables inside of a function, and we can assign a normal variable so, like fire name is equal to name. But we already have that in here. Instead, I'm gonna show you a cool thing we can do. We do far this dot name is equal to name. And if we change return name to return this. So just return this particular object we could say, Caleb dot name and get my name. So let's go ahead, save us and give us a refresh. And this is already executing as Caleb is equal to get person so far. Caleb Weird. What is that type of Caleb? Oh, it's an object, something we haven't formally learned about what we're starting to transition into. But the nice thing about the this keyword is now I can do Caleb dot name look at that. There it is. I do. This dot Profession is equal to Teacher and Dev save Refresh, Caleb dot profession. Caleb is a teacher and a developer. Caleb dot name. My name is Caleb, and so now we have a variable with variables inside of that variable that are accessible through dot notation. And you're going to see this everywhere and jabs. This is incredibly common. This dot notation Basically, all we're saying here is you know, if we were to write this out manually, and if this were allowed in javascript, it's not. But if it were allowed in javascript, it would be vier. Caleb dot name is equal to Caleb and var Caleb dot profession is equal to Teacher and Dev, and that's essentially what this is doing here. Now, this is not technically allowable like this, but yeah, that's pretty much what we're doing. So we're saying, Hey, you have variable one var one dot an internal of are two sides to internal vier too, and then you can just reference whatever that is going to be so internal. Var to. The nice thing about this is now all of a sudden, instead of writing two variables per person. We could be writing two variables inside of a function, and then the variable itself could just be one line. And so we have to only said it once, and then we can reuse it over and over again. And so the more code you write, the more complex your code becomes more efficient. It becomes cause your actual writing last code less code is often better now, just as a quick summer here. A quick re reference whenever you see this dot it is referring to a function may or may not have a parameter may just be a regular function. It might be referring to an object, which we'll talk about more down the road, but essentially it is just referencing whatever is inside of its brackets inside of this ecosystem here, this just means itself. That's all it is. So whenever your learning javascript or you're learning PHP so in PHP, I believe it's this is equal to, and then whatever your var name is. Ah, if you're learning Python, I believe it's just self doubt. Whatever your var name is, this dollar sign this and self in different languages all reference the exact same thing. Now, this point in time, you don't need to know how to use this too much. We're going to get into that a little bit more down the road. But as you're learning JavaScript, you were going to see a lot of this, and I just wanted you to be prepared. So, like when you see this, you don't go. Uh, what is that? I don't understand how this is working. That's totally okay. Because now you understand that this basically is saying, Hey, get person dot Name is equal to whatever the name was, which is like that. And this tough profession is basically saying Get person dot profession, which is a variable inside of the function. So it's just really talking about itself now. It's sort of, ah, little bit of a mind bending concept at first. So if you don't get it right away, don't worry about it. Don't beat yourself up. Don't be too hard on yourself. This comes with practice, so there is no homework for this particular lesson. I just wanted to show you this, get you a little bit familiar with it and sort of ease you into the idea of objects which we're going to talk about down the road. And I know I keep saying that, but objects are big part of object oriented programming, and we sort of need to be prepared for it. So there you go. That is the this keyword. This just means whatever your code is referencing this particular set of curly brackets, that's all it means. I hope that made sense, and I'll see you in the next lesson. 34. Scope: Hello and welcome back. I know we've been talking a lot about functions lately. I think we should give that a break for a little bit. For the most part, we're done with functions, at least for a little bit. Hey, so let's talk about scope. Scope is a subject that I've been purposely dancing around. Scope is basically where our variables out loud toe live. So we've been creating a very bold just sort of in our script here. Variable name, actually variable, of course, is equal to JavaScript for beginners. And we can use this variable anywhere in our script. So if we created a function function, do ah thing we could say console dot log course. We could even return course because we've defined this variable up here and we're going to use it inside of this function. So let's go ahead and refresh our page and just type, of course, as a variable. We're gonna see javascript for beginners. Sure enough, and then do ah, thing is a function we can see. It's presented by this curly f. We put parentheses around it or after it rather hit enter and we're going to see javascript for beginners is console log, and it returns Javascript for beginners. This is an introduction into scoping. So the idea is that if you have a variable that's outside of a function, you can use that variable inside of a function. And so, really, this is your outer scope. You can think of this as, like the atmosphere around our planet. No matter where you are, you are pretty much accessible to something that is found in the atmosphere. Oxygen or nitrogen or hydrogen. Something like that. And the planet itself would be the function. And so because this variable here sort of wraps around all the other functions that are, you know, think of it like on the same line here, sort of wraps around that you can use it inside of a function. Now the opposite is absolutely not true. This is very important to note. So if we created variable in your bar, teacher is equal to Caleb Tallinn and it doesn't matter what we return or what we console log. In fact, we can even get rid of both of those. And we did consul dot log teacher, This is not going to work because this variable is scoped to this function. Go ahead and give us a refresh and you can see that uncaught reference. Every teacher is not defined. And that's because even though it is defined in here and we can console, log it in your watch this console log, let's go ahead and let's make exclamation marks for the 1st 1 and for the 2nd 1 is out of school. And then let's run do a thing. So we actually to run this function. In fact, we could turn this into an I F E if we wanted to. We could do something like that. Let's go ahead, refresh and it says, Hey, teacher is in here. It's in the function, but it is not accessible outside of the function. And so the opposite of what I was saying originally is not true. But watch us. We can still use course inside of the function, even if it's an immediately invoked function expression. There it is. There is my name. There's the course name, local variable, global variable and those of the actual names that we tend to use. And so when you have a global variable and you can use it locally, in any sort of function that you want. When you define a local variable inside of a function, you cannot use it globally. And this entire thing here is not to JavaScript specific. Although the way JavaScript does it is a little bit quirky. In JavaScript. You can create the variable out here and access it immediately without passing it in through ah parameter in other languages. That's not entirely true. You have to offer often put course in there and then let's get rid of this. I I f e Just because we want to keep this simple, you would pass in course, and then you would say something like this, do a thing and then you pass in the course variable and then you'd be able to use it in here. And so when we give this a shot, this is going to work. This is going to say three exclamation marks. Teacher and then three exclamation marks. The course which is outside and then outside of the scope, still not going to give me the teacher. And sure enough, whenever I refresh three exclamation marks, teacher named through exclamation marks the course name because we passed it in, So a lot of languages do it this way. But in JavaScript you don't need to explicitly pass it in because a global variable automatically has jurisdiction into a local ecosystem like a function. And so when I hit refresh, you'll see that absolutely nothing has changed. So let's go ahead and create some code comments. Some notes. This is, ah, global variable because this function is allowed to be out in the open. This is also called a global function. This is a global function, and then we're just gonna execute the function, execute the function and a simple council dot log. No big deal there, and this variable in here. This is the very important one. This is a local variable, and local variables are only accessible within their local ecos ecosystem. So this is only accessible and it's local ecosystem and then to console logs. And so now we've properly commented and documented our code. And so the way to think about this is global Variables are allowed to be anywhere. Assuming that they are defined or they're created outside of a local ecosystem, they're allowed anywhere else. And if they are defined inside of a local ecosystem like a function, they are not allowed to leave that local ecosystem. They can Onley live inside of the function, their local. But again, global variables have jurisdiction to basically be anywhere at any point in time. So what I'd like you to do is give this a shot to try to break this as best as you can. So create a global variable creative function. Try to access that global variable inside of the function without passing it, and do not give it a parameter. Just try to access it from within the function and then create a local variable access that within the function. But then, outside of it, try to access that local variable outside of the function. So create a global variable that works inside of the function and then create a local variable that does not work outside of a function. Give that a shot and you should see the same air that I ran into, and that is really all there is to scope. So whenever you're out in the wild and you see an error that says uncaught, reference air variable is not defined. That's because it is probably out of scope or the variable does not exist yet 35. Hoisting: Okay, let's talk about a weird thing that JavaScript does. This is a JavaScript quirk. It is called hoisting, not hosing, hoisting. Nailed it in JavaScript whenever you see the word var, which we have seen all over the place, Basically what this is saying is whatever your variable is moving to the top of its scope. But don't give it a value yet. So, for instance, function get person, and we created a local variable in here. We know about local variables from the scope lesson. Var name is equal to Caleb, and then we could do something super simple, like a console log name. And then if we run, get person inside of our page here, get person with parentheses because it's a function. It's going to say, Caleb, but you notice this undefined thing. That's because of variable hoisting. Let's do an example here. We know that code runs from top to bottom, and we do council dot log variable name. This should give us an error because this is not defined yet. The variable name is not defined above this, so it should not work, and then we define it, and then we cancel logged the name. Let's give this a shot. Let's see what happens here. Get person. We see Undefined Caleb Undefined. And so at this point time, we know that undefined was up top and we could actually do this. Let's let's make this easier. Var not set yet That rhymed, and that was unintentional. Bar is set, and that's refresh and rerun that function. And here we're gonna see. Var is not set yet, and this is the value undefined in JavaScript. Undefined is basically a data type. It's just like a number. It's just like a string or a function Boolean or an array. This is another data type. It's undefined. And really, what that means is, and you're going to see this quite a bit out in the wild To is just declaring variables. Var name. It's the exact same is doing this. So we said, Hey, there's a variable, but it has no value, so no value. Although this is a string that says no value, so it has a value, no is also a value. That means there's actually nothing in it. You've explicitly told it that there's nothing in it. In JavaScript, undefined means that the variable was defined, but there is no value in it. Currently, the JavaScript interpreter has no idea what this is supposed to be. And so this is going to be undefined. Let's go ahead and save that, and we're gonna see if we rerun this function. We should make this and I I F E says Variable is not set still undefined, and then it is set. And then we've got our regular undefined in there, which we can ignore. That last one's let's go ahead and create and immediately invoked function because I don't want to keep writing that. And let's go ahead. There we go. That looks much better. And so hoisting is this idea that as soon as your browser interprets JavaScript as soon as it is reading the code, it's saying, Hey, in this function, are there any variables? Says um, let me look through it first before I do anything and then says, Oh, yeah, there's one variable in here, Okay. Ah, I don't really care what the value is. I just want to make sure that this is defined. So it basically does. This moves it up to the top, and at this point, time We're really just saying name is equal to Caleb. We don't have to declare Vier because it's already going to be up there. That's essentially what is doing now. We're not doing it that way. Not necessarily. Not exactly that way. But that's okay. That's okay, because we know as soon as we create any sort of variable that is going to be hoisted to the top of its scope, which is in here between these curly brackets and then based on the scope, lessen the previous lesson. We know that we cannot access variable name outside of this functions. Let's go ahead and do console dot log and it's a name is name. We know that this is a local variable. It is being automatically hoisted to the top as if it was automatically set without a value . And then down here, we basically just said, Oh, actually, we have There is a value, So there's a little piece of memory allocated in your computer for this variable name. Hopefully you use it and we said, Yeah, okay, here it is. We're going to use it, and because it's a local variable, it's not accessible in the global scope So when we refresh your page, this is embarrassing because it still says My name is Caleb. Uh, actually, the reason for that is because I have history in here. Variable named Caleb. I just did that. It's killed. If I changed this one, lets change all of these. Change that one and that one and that one and that one. And the changes to my name where I don't already have that stored in my browser. So refresh. And there we go, that's better. And so it's saying my name is not defined and because this is again due to scoping this variable is sort of bound. It is locked to this particular area. We can't use it outside of here. Even though hoisting says, Hey, variable name is we're gonna move it to the very top of the scope. It is locked to this scope so it can't get out. Now let's take a quick look at the undefined data types, so let's do of. So let's create a variable here and let's just call it a computer, Okay? It returned its value. Its value is undefined. Let's do type of computer and we see that it is undefined. What if we throw this into an if statement If Computer is equal to undefined Alert is undefined, undefined, not under find. Look at that. It's undefined. We could even do a strict comparison here, too, as well we can do if computer went to three. So three equal signs is equal to undefined alert, strictly undefined. And look at that. It says it is strictly undefined. And that's because computer doesn't have any sort of value in a year. Now we can say computer is equal to I don't know, Mac OS, I guess, and that's rerun These nothing happened. What if I do the not strict comparison with just two equal signs? Nothing happens. And so how that would look in her code is if we wanted to. We could do. If my name is equal to undefined, then let's define it in here. My name is equal to Caleb. Let's go ahead. Get rid of this now. If we save us and we tried to refresh your page, we are going to be presented with an error just like this, it says uncaught reference error. My name is not defined. We haven't defined it yet. It thinks it's supposed to be there, but we haven't used the VAR keyword. What if we did this? Let's throw down here. Let's do var my name. Just throw it at the very bottom. This is hoisting at its best. We refresh the page and there we go. It actually works. So what they said was, Hey, move this variable up to the very top as if it lived up here. My name is up here. It's currently undefined. There's no value. We don't know what it is. So says, Hey, if my name is undefined, if there is no value, just reassign it. Make sure that it does have a value of Caleb and then we can use it in here now to make this a little more complicated and just to get some more time with the this keyword we could always do. Let's change this changes from and I I e to a regular function. We could always check to see if a parameter is set or not. If there is no default. So we could say, you know the name by default is equal to Caleb. That's great, but what if there is none? Often you're going to see something like this. And what if there is one that's not passed? What if we did? Consul console dot Log name. So what happens when we save this and we try to print this out with Sue console log thing? Whatever that name is going to be, refresh. And we have to execute those get person parentheses. It says a thing. Undefined. Okay, well, we haven't given it a name, but now we can check to see if it is actually there. So we can What? We haven't given a name, but now we can check to see if that name is undefined and define a default. We can do this the manual way. So instead of giving a default value such as this, if you're using JavaScript on an older browser like Internet Explorer, it might not support something like this. So you're going to want to write backwards compatible code that says if name is equal to stripped strictly equal to undefined, we can define it in here. Name is equal to Caleb. Let's go ahead and refresh. Get poison. Bam! A thing, Caleb, That's a console log here. Says a thing. Caleb, we didn't give it a name. So now the default name is Caleb. We manually wrote that, and we can always just give it a name, too. So we could say is effort, my kid cat And it's going to say, Oh, it is actually defined So, you know, just skip this whole if statement. And so this is where hoisting, scope and undefined all come together. And as a quick summary, undefined basically just means that there's no data type associated with a particular variable. Yet whenever you define a variable, doesn't matter where you define it of our name is equal to whatever whatever that name is going to be, JavaScript reads us and says, Oh, let's move that up to the top. It's currently undefined until you define it later. That's called hoisting and scope is the fact that this name is not allowed to leave these brackets that is scoping. So hopefully that all made sense. There is a lot to unpack in this particular video, but we needed to learn a bunch of other stuff in order for this to sort of start making sense. There's no homework for this. I really just want you to be able to digest this if you want to feel free to tinker around with some of your own code and sort of get the hang of this. But this in the last couple of lessons were JavaScript fundamentals. These air not super fun things to learn necessarily. But they are very important. You're going to run into problems down the future where these the subjects like scope and hoisting are going to help you out quite a bit. You'll understand why you might be getting a particular error. Next. Let's move on to something a lot more fun. Let's learn about the second way to bind events to our page. 36. Introduction To Event Listeners: Okay, let's learn about something fun. We were learning a boat core. JavaScript. Fundamentals, like hoisting anonymous functions, immediately invoked function, expressions, scope, things like that. All very important things. But admittedly, they're not the funnest things to learn. So let's change that. Let's learn about an event listener event. Listeners are, I was about to say hilarious, but they're actually not hilarious. They are tremendously useful and also fun. Eso They're called event listeners, and we sort of dove into this at one point in time when we wrote Button on Click is equal to yeah, something we told it to run a particular function. And so we actually modify our HTML. Modifying your HTML is not always possible, and sometimes you just want things to work automatically. And so what? What we can do is we can create a little bit of JavaScript code called an event listener, and it's bound to a particular node element or ah, javascript, no Doran. Html element emerged the two words there together to create a node element. So event listener is basically just a function that's bound to your Web page toe. Listen for events clicks whenever you type a key whenever you scroll down the page. Something like that. Now the two most common event listeners out there, by far are the click and key press. So whenever you type into a text field or input field, or whenever you click something it can trigger. Ah, there's another one called Blur. So whenever you click into a text field and then you leave, it might be able to perform some action at that point. But these two seem to be the most popular. Blur is still very, very popular. And then there's just tons and tons and tons of event listeners out there. We can't possibly learn all of them, but luckily they work almost all the same way, so we really just have to learn one or two of them. And then you can use any event listener that you want. So let's create a simple event listener that's going to count the number of times a button is clicked. So it's at a class here. Let's do Bt nbt in primary. This is just bootstrap Bt an LG, and that's given a class of Js button, and this is just going to say, Click me. It's make sure this looks okay on our page says, Click me So you know, a boring button. The first thing we need to do is we need to actually grab this button using some sort of queries. Elector get element by I d. Would work. Ah, we could use a regular query selector, which is what we're going to dio doesn't really matter how you get this element. You just need to be able to select this node. So let's go ahead and create vier. Bt N is equal to document stud query selector. We're not going to use create selector all because there's only one on here that we want to select. So we use Js button and that's going to give us a button. So let's go ahead, refresh and watch. This will type of BCN and it automatically highlights my button here, as you can see. So we have this button as a note and when we do type of button, you can actually see it's an object. We're getting toe objects, I swear. I promise you they are coming Now All we have to do is say BTM That's the name of this variable here. Add event listener What kind of listener do we want? This one is going to be a click just like how we have on Click, which was on click. We just call it Click in JavaScript And then we give this a function and we're going to pass in the event. And so at this point in time, we're sort of familiar with the idea of dot notation. So we've got a button in here and we know button dot in her text is equal to click me, please. So we can change a dot notation that's just sort of dot notation at its finest. So we're saying, Hey, grab the button at the event listener, This is a function. And so the first parameter is what kind of event? Listeners that were saying, Hey, listen for clicks and the second parameter, we have not seen this yet, but the second parameter is actually ah, function basically looks like this only were writing it out the long way. So we have a function in here, and the event listener will always pass in the event to this particular listener. So here's what we can do. At this point, we can say do something in here, but we want to count to the number of clicks. So let's say far total clicks is equal to zero. And because this is a global variable, we can access this locally. Total clicks is equal to total clicks, plus one, which is essentially the same as doing total clicks plus plus. And then let's create another element on the page that just counts or displays rather displays the total clicks. So Div I d. Total clicks something like that and let's grab that element as well. So let's do document dot get element by i d. Total clicks dot in her text is equal to total clicks. Let's go ahead and give this a shot. So says Click me and it's counting over and over and over again. I'm gonna make that significantly bigger by changing that from a div to an H one. And I'm also gonna zoom in here. Look at that. It's counting for me. We didn't write any additional HTML for the event listener. We just wrote some JavaScript add event listener. And so do you remember when we were learning about scope a couple of lessons ago probably bored you to death with that one. But this is where it becomes important, because if we moved total clicks in here, Scope says, Well, this is always going to be zero. Every time this function executes this event, listener is executed. Every time we click the button, we're resetting this 20 and this will not work. It's always interview. One resets it. Zero adds one. But if we define that's globally and only modify it locally, it will be zero and then one and then two and then three and then four and then five and so on and so on and so on. There we go. We have a JavaScript event listener. Now, this is pretty cool, but this is not as cool as being able to grab text from an input field, which we're going to do in the next lesson. So you don't have to do anything in this last. There's no homework. I just want you to sort of take a look at this kind of syntax. So we've got button dot add event listener. Its first parameter is the event type. We said it's gonna be a click type and as the second parameter we pass in an entire function and one last thing to note before we head on over to the next lesson, we can actually move this entire function out, give it a name of ad clicks, so function ad clicks and so the second parameter is simply the name of the function. So let's go ahead, refresh, and it works as well. 37. Getting Input Values: Hey there. In the last lesson, we learned about the click event listener, which looked a lot like those button dot ad he event listener click, and then some function name. In this video, we're actually going to try to get the exact value of something from an input field. So maybe we're asking for someone's name and we want to get that name on every keystroke. We can do that first of all, set apart html. So we've got input input dot form control dot Js name, and we're going to select this by its name. And then maybe let's also display a welcome message back to the page. So h two hello, And then whatever that name is going to be. So we're gonna want to select this in the world of JavaScript. We're going to need some sort of element to just change this. We could change all of it. We could say Hello, Caleb. Hello is effort. Hello, Henry. Or we could just change the name if we wanted to Just do one particular way. Let's just change the span. Class is equal to Js change name. And so when we boot this up in her page and just as hello and there's an input field here, okay? And then just scrolling down to our JavaScript. Now the first thing we need to do is we actually need to select this this input field. And so we gave it a name of jazz name. That's the class. Seems Let's grab that var as an input and that input as a fire. So documents dot query selector We're gonna grab just the 1st 1 Js, not name. And so now we want to bind an event listener to this. So we do input dot add event listener. We could do key up, and then we can give it a function as its second parameter. And this is going to be the event it's always going to pass in the event. Ah, lot of times you're just going to see the letter e that stands for event were really just renaming the variable input. It doesn't really matter to be more explicit. I like to call it event, but in production, I often just call it E. But let's keep it simple and college event, and then we could do council dot log event dot target dot value So you think it would be just event dot value? But that's not going to work. We need the actually event and then to target that value. So let's go ahead and save this. And every time we type something in here, we're going to see it show up in the Consul and occasionally actually type too fast for that's a k a L O B. There we go. So that's key up. We could do key down. There is a difference. It's like when you press the letter on your keyboard and your finger has not moved up yet. That's key down. Key up is when your finger comes up from the keystroke. But let's go ahead and just stick with regular keep up because that one's going to give us the full value. So as soon as I hit, Kay says K A L O B. As soon as I type, it gives me the whole value in there. So now we need to go ahead and change this name. So let's query our document object model our HTML For this they are name, not named input. That seems a little weird to name it that name element I guess, because why not? Documents dot query So locked door jazz change name. And then because we don't want to redefine this every single time. Every time we press a key, it's just little more efficient this way. We could just used the variable do inter text is equal to event dot target dot value. Let's go ahead and get rid of that. And this is going to change as I type. Hello, Caleb. Hello, Zephyr. Hello, Henry. Hello, D'argo. Hello. My name is Caleb and I love Coda, including two did editing coding And there you have it. And again, this is just the second parameter and then to expand on this even a little further. This function here as a parameter is technically called a callback function, a callback function, or just a callback for short. And what this means is, every time you press a key and your finger moves up from the keyboard, it's going to execute a function. And so what we could do here is we can actually remove this and let's define a functioning here function called call back just to keep it simple. We give that name in there, and it's going to execute this. It doesn't really matter what this name is. The name could be anything does not matter, but it is technically called a callback function, so I'm gonna call it Call back. So as you're reading this, you go input at the event listener key up and after everything up, it's going to execute a callback function. So you click, save, refresh your page and it keeps working. Yes, look at that. That's pretty awesome. And that's fun. So now if you combine that with click event listener, you can change all sorts of stuff on your page based on click events or key up events, you could do all sorts of other things. So now if you're interested in, ah, little extracurricular activity, what you can do is hop on the Google machine and just look for a different JavaScript event . Listener types. There's a lot of them out there. You don't need to know most of them to be totally honest, but you should know that there are a lot out there and I can't possibly go over every single one because this video series is going to get very, very long and bloated and I don't want to waste your time like that. Teach a person how to add event listeners, and it doesn't matter what the listener is. You'll be able to deal with it in the future, So that's sort of my teaching philosophy. So this is getting input values with a JavaScript event listener. In the next lesson, let's go ahead and change some CSS colors with event listeners and make our page super super dynamic. So we're not just changing text anymore. We're gonna change something that actually has to do with the page styling. 38. Changing CSS With Event Listeners: high in the last couple of lessons we learned about event listeners. We used the click event listener, and we used the key up event listener. But let's actually do something fun, because up until now we just change a little HTML in a little inner text, and that's you know it's OK because it makes our pages dynamic, but it's not as fun or is visually appealing as I think it could be. So let's go ahead in this lesson and create a new event listener that's going to change the pages based text, color and the background color. So we need some HD melon years. Let's do H one. Hello World Now let's not do Hello, world. We're way beyond Hello world. Let's do changing CSS with event listeners. Now we need an input fields. Let's create a negative with an input, just a regular text and I'm gonna style this so your has some sort of styling it. Let's dio patting 30 pixels and also font size 30 pixels. Let's make it big, and we need a label in here background color and let's go ahead and duplicate this. Call this one text color, same thing and Then let's add a class in both of these classes equal to Js something around there. And I just called Js just so that I know it's just for JavaScript, JavaScript, BG color and let's do JavaScript text color. And if we look at her page, it's gonna be pretty ugly. Yeah, adds pretty gross. But you know what? It is what it is. So the idea is that we can type in here just like that, and it's gonna change the background color of her page and change the font color of our page. So we need to create two event listeners for this. Let's crab, the first event listener before background color. So far, BG color is equal to documents dot query selector Good enough, and let's also grab the Js text color Js text color, and we'll call this one text color. Now we need to add our event listener, so let's do BG color dot add event listener key up because we're typing in a text field, we're going to pass it a callback function that automatically takes a parameter called event. And then let's just console log this for now. Canceled out log event dot target dot value, whatever that's going to be, and we're going to go ahead and duplicate this whole thing. Copy passed. A and text color is going to do the exact same thing. Let's say BG color in this console log and that's do text color in this console log. Refresh BG color. We can see that in there and then x color. We can see that in their chlor, as I named it. No, he wants to basically change the pages text, color and the pages background color. We haven't learned how to do this in JavaScript. Yes, this is going to be pretty fun for this. Let's go ahead and grab the entire document body, and then we're going to change the styling of the body, the background color. So let's do of Our body is equal to documents taught query, selector. Let's just grab the body and then we could do body dot style dot. Background color is equal to events that target that value. And so all we did here was said, Hey, let's grab the entire body. That's the body element that comes from right there and then the styling on it. So we're seeing this dot notation a lot more often. Now this styling is going to have a background color. Technically, it's background dash color, but in Javascript you cannot use a dash in a property or variable name. So what we do is we camel case it. So any time you see a dash in a CSS declaration, not Dash C, it is just uppercase See, or if it was, ah, background image, it would not be background image. It would be background capital. I image camel casing so she has a background color. And let's see if this works. Background color Red. Oh, look at that background color blue background color. Let's do a hex color black. That's pretty neat. That's starting a work. Okay, let's do the same thing with our text color. Now we can get more efficient with this because on every key up we are querying the page for the body element. Now, luckily, there's only ever one, so it's easy to find. But you know, if you type the word red R E. D, it's going to execute this three times, and as your page gets bigger and bigger, that gets slower and slower, and so Let's just move this up into the global scope, and we don't have to worry about clearing it more than once because it will always be available to us and in her text color. We could make use of that by pasting it down here, and I pasted the wrong one. So, uh, you saw nothing. And so here we're just saying, the body style, not the background color. Just the regular font color is going to be whatever this event target value is going to be for the text color for this note, let's go ahead. Refresh text color. Let's say white. It looks like it all disappeared. What if I select it all? It's still there. Background color is going to be read or blue or green that is so hard to see. Or black and yellow, black and yellow, black and yellow. And so that's how we go about changing CSS with event listeners. Now, at any point time, you could even change a CSS while your pages loading initially. So if we wanted to. Let's go ahead and change the BG color using JavaScript so BG color dot style ends, too. Background color is equal to read so as the page load that's going to be read. And ha actually did that wrong because I selected BG color. I got ahead of myself. I got a little too excited there. So I'm gonna do is just undo that and let's go down. And instead of BG color, let's do body. There we go. That looks better. Ah, we could also change the default color too do black, which it probably was already sleds. Do you wait? There we go. And this goes with any CSS you confined. So, for example, BG Color. Let's say we wanted to add some rounding. Let's do BG color dot style That border radius is going to be Let's give it a 10 pixel border radius. Look at that. Those air now around in a little bit. Let's give it a border that's given a border of three picks is dotted black. Hey, look at that. I mean, this is pretty ugly. Don't get me wrong, and we never want to actually deploy this in real life. But But now we're actually changing CSS with javascript. We're not writing any really CSS. I mean I mean, this is CSS, I guess but we're not writing any. Actual styles were letting JavaScript you, all of it. And as we type in here, it's going to change for us, which is pretty cool. Now. We could take this one step further. We could say, Hey, maybe background colors can only be a certain color. Let's go ahead and add this as a variable so we don't have to type event that target value all the time and let's do an if statement. Better yet, let's do a switch statement. We haven't seen this too much yet, so switch the color. We actually need to assign that. That's two cases equal to blue, and we could do that. In fact, what? We could actually even stack these together. So this is kind of interesting. Blue read, Wait and then default. It's always going to be We need a break in your break. The default color is always going to be white and syntax error. That was my fault. I just wanted to write that out. You could tell that was syntax error because it was all turning gray eso. Basically this is saying, hey, grab every color or whatever color this is currently and says If it is red, white or blue, then change the background color to red, white or blue. Otherwise always change it. The white just keep white is the default. And so now we're actually limiting user input. So if I type black, it just goes toe white as default. But if I type red, it's gonna work. Blue works. White obviously works. Fact we don't want Wait. We want this to be yellow because white is already up there, so that doesn't make sense to have white works. And if I type anything in here just defaults to yellow. And so there you go. That is a pretty good example of how to use an event listener how to use query selectors changing CSS styling. We even use a callback function. We used a switch statement we used to event listeners and we changed default styling when the page loaded. So we've actually accomplished a lot in this video. So what I would like you to do is just get our hands on experience with basically everything I've written in this video. Go ahead, create some cruelly selectors, try to change the styling, then create an input and try to add an event listener with a key up and a callback function . And maybe it doesn't have to have a switch statement that might be a little bit complicated for what we're currently using. But you could say body dot style dot color is whatever that color is that you're typing into the input field. Go ahead, give that a shot, tinker around with it again. You're not going to be able to break anything. So do your best and, honestly, just have some fun with it. I always like to tinker around, and I like to try to break things and sort of figure out where the edge is of every sort of topic that I learned, like, How far can I push something exactly, and that gives me a lot of hands on experience. I really like doing that. Otherwise, if you're feeling pretty confident with this, I think we should move on to our next mini project. 39. JavaScript Mini Project #5: Hello, End. Welcome back. We're going to get started on our next mini project here. Now, the idea behind this project is all about event listeners. So this mini project, what I would like you to do is create three input elements. And then I want them to do different things with the different event. Listeners change background color, changes text color and change your page font size as you type. So they should be input fields. And you should be looking at the key up event listener, And any time someone presses a key in one of these input fields, it should execute your event listener and try to make a change on your page. Now we basically did this in the last video where we were changing like CSS colors with event listeners as you typed. You don't need to get that advance, but I just want you to get some hands on experience with straight JavaScript event listeners. So go ahead and give that a shot. Try if you can to do it all from memory. If you can't, that's okay, but it's it's good to make the brain sweat a little bit. And as always, if you get stuck, you can always reference the other material. That's totally okay. No one's gonna shame you for it. And I would suggest right now that you pause this video because I'm about to fade this to black and then I'm going to start with my solution the way I would implement it. So go ahead, Posit Video. Give this a shot, and then when you're done, resume this video and you can watch my solution. It's not the perfect solution, but it's a solution. There's so many different ways to do things in programming languages like Javascript and Python, all these other languages that there is no perfect way of doing it. But I'll show you my solution. So pause now and give that a shot. All right, I am going to show you my solution to many Project number five event listeners. First things first. We need to create three input elements. Want to change the background color one to change the text color and want to change your page font size as you type. All of these should be as you type some to go into my editor V s code here, and first things first I need three input elements, so I'm not going to make a beautiful looking page by any means. I am simply going to create a bunch of dibs labels and inputs. So Div we're gonna have a label in here, and this label is going to be for BG color background color again, this is just a regular label. And then let's go ahead and at an input in here form control some basic bootstrap in there and the I D is going to be BG color. And so that idea is going to match this four label or it's four. Attribute in here and we stop and refresh your page. We'll see about background color in here. Nothing's gonna happen. We have not written any JavaScript yet. Now we basically want to copy this twice background color, text, color and font size, and this one's going to be a number, so it's changes to phone size. Let's change this to text color, and what I'm going to do is something you'll see a fair amount in the wild. But instead of getting these elements by their ideas, which we definitely could would be a very fast way of doing this. I'm going to get them by their CSS selector using a JavaScript prefix. So Js and then BG color is going to be the 1st 1 Js Text color is the 2nd 1 and Js font size is the 3rd 1 Okay, let's refresh and you know it's not the greatest looking page but it does the job Now we need to create some query selectors, We need to grab all three of our input fields so let's go ahead and creative are variable. Let's say BG color is going to be I'll just move that up here document dot query selector and we only want the 1st 1 So Js BG color that matches this one here and then in here we want text color and this one's going to be text color and then the 3rd 1 is going to be fun size and this one is going to be fun and dash sighs Okay, at this point in time because we're writing some javascript, I'm gonna right click inspect, go over to my console refresh And I'm just using firefox for this and I see that there are no errors in years. So, for example, this would create there. See Reference Air SD s. D. A s is not defined. So we didn't get any errors like that. So we can assume that things are looking good. Next, we want to change the background color, text, color and page font size as we type. So we need one more query selector in here. We need to be able to change these styles on the body. Let's go. Vier body is equal to documents dot query selector. Instead of adding a C s s selector for a class, we're just going to use a regular CSS collect selector for the body. Now we need to add or event listeners. So let's say BG color dot add event listener. We're gonna say on key up execute this particular function with the event inside of it, And just to make sure that this is in fact working, let's console log the event dot target dot value Refresh your page. No errors. And as I type, it shows up down here. Okay, so that's looking good. That's nice and healthy. So now for the BG color, all we want to do is say body, Dutch style dot background color. Remember It's Camel case like this and JavaScript. There are no dashes in JavaScript variables, so we use camel casing. Background color is equal to event dot target dot value, and that's it. We don't need to return anything. We don't need to do anything fancy. Let's go ahead and give this a shot. Bam! Just like that background color turns red as I type the word red. No, really, all we have to do is copying faces a few times. Background color. This one's going to be text color dot Add event listener on the key up body dot style dot background color. No, we want to change that to text color, which in CSS is just called color. And that's going to be event target value. And in the last one is going to be font size dot at event listener again. Key up callback function with an event parameter in there, and we're gonna say body dot style dot font size is equal to whatever this is. Plus, we're gonna Kincannon eight, maybe pixels, Or if you want to do ems or rams, you could do that as well. I'm gonna stick with pixels so I can use a regular number, and it's not going to make this page two ridiculous more ridiculous than is already going to be. Let's go ahead. Hit Refresh. There are no errors in my JavaScript consuls. Let's move that down a little bit. Background color is going to be blue. Text color is going to be white. Font size is going to be nine pixels. Ah, maybe 90 pixels. I mean, really ridiculous. Let's do something a little bigger. So we've got font size 25 pixels, text color of white background color of blue, and this changes as we type. We can even use hex values in here as well. AB 00 That's red F F zero that's yellow or yellow or aqua. And that's how we go about creating a page that will change pretty much as you type into different input fields. So all together we use the total of 369 13 lines of JavaScript to make a completely dynamic page based on whatever the user wants. And that's all there is to this mini project. Now, if you're on skill share, don't forget you can create your course project and share it either via a code pen or you can share it or you can share your exact code. You can take a screenshot of your code and also the page actually working. Feel free to share your project with the rest of the group. You probably end up creating a bunch of inspiration for a lot of other people, which is always helpful to other people as well. Plus, I'll give you some feedback if you like. 40. Objects: Okay, Today is the big day. This is the big moment. We have talked about this thing called an object so many times, and I keep saying we're gonna learn about it. We're gonna learn about it. Eventually, we're gonna learn about it. Now is the time we're going to learn about it. So an object is a terribly, terribly named idea for a way to store data. Because if you think about an object, well, think about holding anything in your hand. And if someone were to describe that item that is in your hand, the word object could fit any physical item that really has any sort of mass or weight to it could be considered an object that's not very helpful. Whereas an array basically, that's a fancy developer term for a list. Just a list of things variable a variable. If I could spell that right Variable is a value that changes. It's actually in the name. It is variable. In JavaScript, a number is obviously just a number, and in a function we know that a function is actually supposed to do something. But the word object is like what? What is an object now? objects have basically infinite complexity. So I think we should take this one step at a time, and we don't really have to know all of it right now. That's just going to be too much information that will be information overload. So what I'm going to do is introduce you to objects any more friendly manner. So we know that when we create a list in JavaScript we can create in a race. Let's say, Ah, let's create names is equal to an array. Caleb Nathan ends ever and that was my type of their capital. A. And so when I type in names like this, that's clear that type names. If I wanted to get Nathan, I would have to type names hard bracket, the number one and then another bracket, and that will give me the index here. But what if I wanted Teoh store a bunch of data on a particular person? So I said a particular person his name is Caleb. His age is 30 and he has two cats. No, that's nice, but we don't know if this is necessarily the right order, because if I said hey, out of all of these numbers out of all of these variables. Rather, how many cats does Caleb have? Well, you would guess, too. But for all you know, I might have 30 cats and I've only ever mentioned to. And so there is this gray area, and we don't know how to access this properly with an object we can name it. So let's go ahead and create an object. So we'll create a person object, and the object just looks like this. It's a bracket, and then we give it some sort of name. So let's go ahead and actually call this name and you can see that there are parentheses are not parentheses. You can see that there are quotations around this. They could be single or double quotations. It does not matter colon, and then whatever the name is, so is going to be basically looks like a string is equal to using. A colon sign is equal to pretty much any type of variable. Could be a number. It could be a function. It could be an array. It could be No, it could be another object. And let's go ahead and create another one. In your age. My age is going to be 30 and the number of cats I have to and to close us, we just give it a closing, parentheses or not. Apprentices, a closing curly bracket hit, Enter and there we go. We have now an object. And instead of saying, Well, this is an array where it's just like Caleb, 32 is what inside before this now actually says age is equal to 30 cats to name is Caleb. So now whenever I take person, I can take person dot Age gives me 30 person dot name gives me the name person dot Cats gives me the number of cats, and now we've actually assigned a name to basically a list or an array, and you can almost think about these as internal variables. So we have a very bold called person. But inside of that, there's a variable called age variable called name and variable called cats. Now the main thing to know about an object is yes. It comes with great naming, so you can name pretty much anything in here. So person dot name actually gives me my name, which is fantastic, but you can also add to it and use the this keyword. So we've learned about that a little bit. We learned in the array lesson where we could do whatever the array is called dot Push, and that will actually push something to the array person doesn't quite work the same way. We can literally just create anything. So person, let's do something very interesting here. What sound does this person make? So to create a brand new data point inside of this object, it looks a lot like an array. We give it whatever sort of variable name we want in there is equal to, and then whatever we want it to be equal to in this case, I'm going to give us a function and I'm going to council dot log. What sound does kill it make? What does the Caleb say? This guy says me. Oh, I don't know why, but I'm gonna say me how Hit Enter, Save it. And now we can actually see the function itself. That's what it returning returned to function. It's called Sound has no arguments. Okay, so I just cleared that off. Now if I actually wanted to see what is inside the person object, I could just type person, and we're going to see that there's a judge, cat's name and a sound. A sound as a function gives us all the details in there now. I can also just do function dot sound parentheses because it's a function. Functions are actions, actions need parentheses. I hit. Enter, make sure I've got logs turned on here so that console log actually shows up and it says me out. And so no, not only does my person have a variable inside of it, my person also has, ah, function inside of it. Now, when it comes to variables and functions inside of an object more inside of a class, generally they have different names, and this tells other developers what the scope is. So typically we have a variable name is equal to Caleb, and this is just called variable. We've seen this 100 times already. Then we also have a function function something, and it does something in here and this It's called a function when we're dealing with an object so of our new object is equal to, and name is going to be Caleb, By the way, it doesn't matter if we're using single apostrophes or quotation marks. It doesn't really matter. It's a coma there. So the JavaScript knows there's going to be another object in here. Another piece of data. This thing is no longer called variable. This is called a property and function. So, like when we wrote, sound is equal to function something in here. This is called a method, so we're going back to hear person dot Age is going to be a property. It acts just like a variable. Basically, the same thing is variable, but what we're saying is this variable actually belongs to an object, or in some other languages, it belongs to a class. Likewise, with sound sound is a function, but it's inside of an object, so we call it a method has the exact same properties, and it works the exact same way as a function. The only difference is it's now inside of an object, so we call it a method, and this is really just a naming convention, so that when you're talking to other developers, they can understand what's going on now. Why is this important? This is important because we could say person dot sound. Let's overwrite. This is equal to function and we want to console log the name. So we do this dot name and if we run person dot sound, he gives me my name. Now this is where the this keyword really comes in handy because let's take a look at this person. Object once more because we ran a function that is inside of an object. The this keyword refers to the entire object, not just the function. It's the entire object and so inside of a function. Scratch that inside of a method we can use this dot name to start age does not cats just on name. We could even return itself if we wanted to, which we're not going to But we could return the entire object if we wanted to buy just saying Return this Let's go ahead and create a brand new method in here called person dot Get cats. This is going to be a function and all this is going to do is alert and the number of cats that I have alert this dot Cats, In fact, let do this this dot name Captain E has to stop cats. There we go. So this is going to say Caleb has two cats. Let's go ahead and close that function off. Okay, that was set. If we look at the person object again, we have a function in your called get Cats. We could pass parameters in there if we wanted to as well. Just like a regular function. Let's run this person, don't get cats and let me move this over. And it says Caleb has two cats. And so when we originally learned about the vis keyword, it wasn't actually super useful. But when we start working with objects, that becomes a lot more useful. Now, why would you ever use this? Why would you ever use an object like this? Well, you could say object person is equal to Caleb. I make a sound. I have an agent here 30 and I have cats to. And let's just fill this out entirely. Council don't log. No. So the reason we would use this is because now we can use person dot name Or how do we change this to Caleb? Me? We'll just use me as an example. Caleb dot name is gonna be Caleb. Maybe it's my full name. Caleb telling Caleb dot age. As you read this, this makes more sense. Now the Caleb, Very Buller, the carrot Caleb object. What is his age? How many cats does he have? And this becomes a lot more verbose. So as you're reading it, this actually makes a lot more sense, and you could do the same thing with pretty much anybody. So let's say we had another person in here and his name is Zephyr, who is actually my cat. He actually says me how his age is for how many cats does he have? None. He doesn't have any. Actually, he does. He's got one little brother. So he's got one cat. And now I could say his effort cats, and that's going to give me one or his effort, that sound and that's going to console log. Now again, where does this really come into play? Because right now we're only using one object. Well, this comes into play because up until this point, we had to store all of this into separate variables so we would have variable that looks something like is that her name is equal to whatever his name is. Zephyr Zephyr. Age is equal to four as ever cats is equal to one is that for sound is equal to me. Oh, and then we would have to do council Don't log. Is that for sound? And so now we've written four variables. And if we wanted to a copy of this to anyone else, we have to right for more variables. And if we wanted to populace again, we'd have to guess what copy and paste over and over and over again. And so now we have 12 variables in the global scope of things. This is really just making a big mess of the global scope, whereas with ah, a beautiful object, we get just the regular variable name. Plus, we get these properties and methods inside of it. Now, just as a quick little refresher here, I missed that one in there as a quick little refresher in here. Let's take a look at the syntax of an object. So object syntax is going to look like this. Got variable of some type and you've got to your variable name is equal to an object. So that's your opening and closing curly brackets in there. And then you've got a key colon not fair value. And then if you have more, you throw a comma in there and then you go key to value to again. If you got more thrill, come in there. Otherwise, that last one does not have a comma. And then when you want to access any of us, you could just write object name and sort of like how we access things in an array instead of using 0123456 and so on. So on. We just used the key name. So key is going to return value and likewise key to is going to return value to now. That's the overall just behind an object. You're probably not going to use these too often until you get a lot more experience with JavaScript and then all of a sudden they'll be everywhere. You sort of go from 0 200 in, like, five seconds. As soon as you start seeing them, you're going to start using them all over the place. But as you're just learning javascript, you're not going to use these all over the place. Not yet. So what? I would like you to do a little task for this video just created Object. Maybe it's you. So create variable. Whatever your name is, create the object. Give it a name, a sound. Ah, an age, maybe your favorite food, maybe your website. And then just try to execute some of the stuff inside of your browser's council. Go ahead and give that a shot. Don't forget. If you have questions, comments, concerns, you can leave them down. Be low. I am here to help you at a moment's glance. Objects are a very interesting thing in JavaScript. I hope this explanation was all right. It's This is one of those hurdles when it comes to programming is understanding objects. But once you get it, there is no going back. So definitely get some practice in there is going to be very, very important down the road. 41. For Loops: a low end Welcome back. We're going to start touching on and concept that is really important in programming, and this concept is a loop. So the idea is that you have a particular function or are set a code or something. You want to do more than one time over and over and over again automatically. And so let's say you have a bunch of names. So you have Caleb, Nathan and Zephyr, and for each of these names, you want to capitalize it. You want to maybe put at gmail dot com or something at the end of it to get an email address. You want to do something to all three of these. This is where a four loop would come in and it doesn't just have to be three. It could be one item that's in an array. We'll talk about that in a second. They could be two items, three items, 3000 items. It doesn't really matter. It's just going to keep looping until basically, it's all done. So let's let's take a look at a four loop. So four loop is going to look something like this. We've got key word for we said. A variable I is equal to zero. So this is our interval. Whatever this is going to start at, this is basically our counter. We'll talk more about this in a second. How long should this go for? Well, let's say I has to be less than 10. And then after each Lupin aeration just ing increment I by one. So let's do I plus plus council. Don't log I. And so what this is saying is for the variable. I is going to start at zero for as long as I is less than 10. Console, log, whatever that number is I and then at the end of each generation, it's kind of like saying this I is equal to I plus one. That's what we're doing at the end here. Only this time we don't have to write that out. So let's go ahead and save us and open this up in our browser and refresh our page and we're going to see 0123456789 and you notice that it's all happening online. 18. So when I click into this and move this over lying 18 sure enough, there is the council log just like that? So this point, you're probably thinking, Hey, that's kind of cool, But honestly, I don't know where I'm going to use that. So let's create a real life example here. Let's create an A race. We've got variable of names, and this is going to be an array. We've got Caleb, Nathan Suffer and Henry. And let's say we want to look through all of these. How are we going to do this? So instead, I'm gonna comment this out just so that you can reference us later if you want. Let's create a new four Lupin here. Let's actually see what V s code wants to auto fill this with. Yeah, that's actually pretty perfect. It's doing a few things in here that we haven't learned about yet, so I'm gonna undo that. But if using V s code, you can just hit four tab. So your for loop starts with your four key word for variable. I is equal to zero. We want to look how many times we want to loop the number of items that are in this array. So let's say names dot length and I is less than names dot length. So what this is saying is a za long as eyes less than four keep on rolling. And then at the end of each generation, let's say increments. I buy one we could implemented by two. We had multiplied by 10 if we wanted to. But most commonly you're going to see it just increments by one. And then we could create a new very bowling here and say, Ah, this variable is the current name. And because this is a list we have to access these names, Caleb is going to be Index zero index one index to index three. And so we can now say I names. The 1st 1 is going to be zero. So in the first iteration, and then once it's done, it's basically going to say behind the scenes, I is equal to I plus one, and so it runs a second time. And then that one's going to be Nathan and then Zephyr and then Henry. But we're storing all that in a variable called I Just Interval Stands for Interval. I is equal to interval. Let's go ahead and console Loggers Council don't log current name. Refresh our page How we get Caleb Nathan and Henry Cool. So now we're actually doing something with an array because up until this point, a raise for us. Just store a list of data, and it's not actually super helpful unless we know exactly what's in it Now. We don't need to know what's exactly in it, so let's go ahead and make this a little more complicated. Let's create a function in here where we're going to turn an input into lower case and upend at gmail dot com. So function. Let's call this to email address, and it's going to take a name and we can do it all in one line now so we can do name that comes from this parameter here dot to lower case plus at gmail dot com. And so this is just can Captain ending at gmail dot com on its lower casing, all the names So now we can take that you can apply it here. We're saying the current name is going to be whatever the current name is in our array. This is where it gets a little more complicated. We're going to pass that name. Whatever that name is. in here as the parameter into to email address, and that's going to return whatever the name is. Lower case and canned cat Nate at gmail dot com So now let's go ahead and give this a save . And look at that. Caleb, A genial Nathan Ojima, Zephyr Jima and Henry at gmail dot com. That's no, we're actually doing something useful here. Now. The nice thing behind this is we're actually not writing that much code. And as your a Reagan's longer and longer and longer, you're not writing anymore code, which is really, really nice. In fact, we could, if we wanted to even reduce this and instead of name, we're going to use names. I Let's go ahead and get rid of that. Let's not actually delete it. Let's just commented out. And so now, in 1234 five lines of code, we can execute these four. Consul Lux, which doesn't seem like much, but what if we did something crazier? Let's go ahead and do a Laura Epsom loop, so let's take Florham 50. And so we just have 50 words of warm ipsum in here dot split on every space and what this is going to do is, say, split their split, their split, their split there all the way down. And this could be user input his ball. We could split it. And let's change us from names. Two words just because it's going to seem a little nicer and we change it from names. Two words here as well. So start off Invariable zero or interval zero. Keep going for as long as there are words in that erect. We know this isn't array because we use dot split after every Lupin aeration go ahead and increments the number. I buy one current name. So let's do this current e mails What we're going to say and what we're doing here is we're saying this current email is going to be whatever the word is to lower case Can Katyn eight at gmail dot com. So this is going to take every single word in here. Lower case each one and then add gmail dot com, which is pretty pointless example. But this will demonstrate the power of loops. Look at this. There is now 50 of them in there. We didn't write any extra lines of code. We have one line of code here. It's just on multiple lines because there's a long string in there. My editor likes toe break it down into multiple lines. So one line to line three line four line in the exact same five lines of code. We got 50 outputs now that's no pretty useful, and you're gonna see these all over the place. This is wildly popular in all programming, especially in JavaScript. Let's say you only wanted the 1st 10 Okay, Well, what we could do is we can actually break out of this loop at any point in time or we could continue over it. Now, what we could do is say, if I is equal to 10. So it's the 10th word. I don't know why we would do this in this example, since we want to loop over every word. But we're going to say, Hey, as soon as I gets to the 10th number increments up to the number 10 simply break otherwise keep running normally. And so this is only going to show the 1st 10 And what we can do here is we can actually consul log I plus the current email so we can see all of these And what this will show us is from 0 to 9. And there it is. We have 0 to 9, technically 10 items because we start at the number zero. So if you count on your hand, 0123456789 You have all 10 fingers on your hand pointing outwards. So there you are. And we said, Hey, on the 10th interval, just break out of the loop. Don't show anymore. Let's go ahead and comment doesn't see what happens. This will go all the way down to number 50 or the 49th Index. Let's go ahead and comment that out. And let's do something a little more interesting. We're going to use some basic math here. We're going to use this thing called modules, which we haven't really learned about, and it's it's okay. You don't really need to know too much about this one. We're going to say if I module ISS two is equal to zero. So this is saying is whatever I is divided by two has a remainder of zero continue, and this is going to skip over the loop. So whatever is down here, for example, this console log. This will not run. The continue statement basically says, Hey, everything below here. If this continues, statement is executed. This stuff does not get executed. Move onto the next generation. Let's go ahead and save that and let's see what happens here. We get every 2nd 1 So, for instance, we don't see the number 10 in here. 10 divided by two is five with the remainder of zero. And so because this is true, it's going to continue its not going to consul up. So that's how we create even and odd rose and like tables when you have, like a gray row white road, gray road, White road, Gray road, white row This is basically all we're doing. So this is your introduction into four loops. This is actually also introduction into wild loops and for each loops to other loops, we're going to get into right away. What I would like you to do before you move on is create a basic for loop. So go ahead, use the four key word variable. I is equal to zero. I is less than, or maybe less than and equal to ah particular length. I plus plus, don't forget to add that and then maybe just console log, whatever I currently is. And that's all I would like you to do. Just get a little hands on experience with it. You don't need to be a professional added to move onto the next lesson at all. I just want you to get a little familiar with this weird looking syntax the way that this code is sort of described using funny characters in a funny order. 42. While Loops: Okay, let's take a look at this idea of a wild loop a while loop. So we learned about a four loop in a for loop. Basically says, Hey, I'm going toe loop until you tell me to stop looping. A wild loop will not A wild loop. If you are not careful with this, one will go on forever until your computer runs out of memory and either your browser crashes. Or if you're on an older computer, your computer crashes. So just be very careful with this wild loop. This one is very, very important to understand before you actually write one in the worst case scenario here is you know, maybe your computer runs out of memory and you have to give it a reboot, not the worst thing in the world, but generally your computer just locks up. You give it a reboot. Don't run the script again and you're good to go. So let's look at a while. Loops, syntax. So basically what's going to happen here is you have a while. Something is true. Do a bunch of stuff in here. It really boils down to something that simple, and so what we could say here is var Numb is equal to zero. And let's say while number is less than or equal to 1000 we could council dot log the numb . No, don't run it at this point because this is going to run forever. We didn't do anything with number in the four loop. We did. We automatically implemented it in a while loop we didn't. So we have to manually put this in at the end of our Lubar at the beginning of a loop. Somewhere in there, we need to increment number. So we could say number is equal to number plus one or we could just do none plus plus and that will give us 12345 So on and so on. So let's go ahead and give this a shot. And when I refresh this, this is going to console log the number 1000 times and sure enough, there it is, and I can just keeps curling. Just keep scrolling and you see that there is in fact 1000 in there Now when would you ever want to use something like this? Well, what we could do is we can ask the user for some sort of input. So let's say var numb is going to be number and we're going to prompt the user for a number . Give me a number and then we're going to cast that prompt whatever that's going to be to a number. And then let's switch this over and let's say bar starting numb is equal to zero, not 90 And let's get rid of this. Let's change this out. Let's do starting Numb is less than numb. And so what we're saying is always started the number zero and go until it reaches whatever the user says, Maybe it's number 10. Maybe it's the number 10 million is going to run until it hits that number. Also, we have to be careful here because this is the number that we're trying to increments. So while this is true, we need to go ahead, swap those out. So basically, what this is saying is zero. Maybe the user typed in 1000 is here less than 1000. Yes, it is. So execute one, then two, then three, then four, Then 5000 times until it gets to is 1000 less than 1000. It is not. This is false. And so it stops executing. Let's go ahead and give this a shot. Move this over so we can ask me for a number. Refresh. Give me a number. I'm gonna roll my Dyson. I'm gonna say 89. And the consul logged 89 because I did the wrong one here. If you're looking at your screen going, Caleb, you forgot to change one. You're right. I did this Consul logged 89 because that was the number I entered. I wanted Konta log the starting number. The number that's going to constantly increments. Let's go ahead and give it a shot. Let's pretend that 1st 1 didn't happen And number 89 is there It is. Starts at zero. Goes down to 88. Remember, Computer start counting at the number zero. Although if we wanted to, we could say this is going to be one is less than or equal to. Let's go ahead and refresh 89. And this will give us numbers one through 89. There it is. Last number is 89 1st number is one. And so that's a while. Loop. Now, in modern javascript, you see these? Ah, lot less than you used to back in the day. These were everywhere. These are less popular now because four loops and the for each loop, which we'll talk about in the next video has basically taken over there. Better forms of loops for JavaScript. But you're still going to see this one out there. And if you're wondering, Caleb, where we'll have I going to use a wild loop? Well, what if you wanted to create ah list of something So actually, before we move on to that next lesson, let's go ahead and create another example in here. So I'm gonna comment this out so it doesn't use any computer resources of mine. And let's create a list. So we've got UL classes Eagle Js list slash you well, and when I refresh my page, we see nothing in here. In fact, let's do this each one list. So we have a listing here, but there's no list item, so we're going to need to actually create some list items. So let's use query selector to grab this item So far, list or rather, you l is equal to documents dot queary selectors at Lecter. There's only one so we can use this one. Let's go ahead and create some HTML for this. So vier html is equal to a blank string. And then let's loop through this a certain number of times. While something is true. HTML is Eagle two html plus Ally, whatever the number is going to be. So let's just call it number, I guess. Could be anything. We haven't got that far yet, so just they're with me slash Ally. And so now we're just writing a bunch of html in here were saying, Hey, it starts off with nothing. Put an ally in there. Second iteration comes in, says there's one L. I put another one in there. Third generation comes in, there's ready to allies in there. Put another one in there. So let's go ahead and ask the user. For a number of our numb is equal to Let's cast this as a number prompt. Give me a number and we're going to say the starting number starting numb is going to be zero. And while that starting starting numb is less than the number, let's go ahead and let's actually start this that one so we can count like humans, not like computers. So starting number is going to be one. And as long as this number is less than or equal to whatever the number person gives you is this will continue to run. Remember, this needs to be implemented manually. So let's manually increment that. And at this point, nothing is gonna happen. We just loaded up this variable called HTML with a bunch of HTML. Now we have to go ahead in rul and actually add this into our document object model. So let's go ahead. Type that ul inner HTML is equal to whatever the HTML variable is. Refresh. Give me a number. Okay, let's do 42 and again, it just has 42 over and over again. Let's go ahead and let's type iteration in oration is going to be whatever that starting number is. Let's try this again. Number 42 there it is. It oration. 123456789 all the way down to 42. And so while Loop does actually have a place in the JavaScript world, it's just a little less popular these days. But it is still very good to know about. You don't have to do anything in this video. Let's move onto the next one where we got we're going to work with some of the document object models and we're going to use this thing called a four h Loop, which is really, really useful. 43. For Each Loops: All right, let's take a look at probably the most useful version of a loop in the JavaScript universe . This is called a four each loop. And because we tend to camel case things in javascript, it looks like this for each lower case F capital E. We'll get into the syntax of us in just a second. So for each loops are relatively new to JavaScript. Other languages have had these Fort Ages. JavaScript has only recently got this in the last few years, and it has been a major improvement to the JavaScript ecosystem. So for ages, basically a shortcut for the four loop that looks something along these lines. So you had variable is equal to zero. Do something for the length of an array and automatically increments. What this is going to do instead is just say, Hey, you have a list of names, you have an array of names. There's five of them in there. I'm gonna loop through each one for you. So let's give this an example Here. Far names is equal to an array of Caleb. Nathan is ever and Henry almost actually wrote the word end and so previously, how we would have to look through. These is kind of actually grow, so we'd have to do for var. I is equal to zero. I is less than or equal to know. Just last night names dot length I plus plus. And then we could console doubt log names I and this will give us all of them. Let's go ahead and refresh your page and we'll see that this works. But when you're actually writing this, this looks a little too much. There's an easier way to do this. The easier way to do this is through a four each loops. Let's go ahead and type names dot for each and this is going to take a function, and this function has two parameters in it as the name and the index. And so the name is going to be whatever the value is in here, so it might not actually be called name. You can rename these if you like, but because these are names, I'm going to call this names, and this is going to be the loop iteration, so council don't log whatever the index's whatever the name is, and this already just looks a lot easier Let's go ahead and refresh this page. We have Caleb Nathan's effort and Henry just like that. Nice and easy the way it should be. No more dealing with our own generators and our it aerator integer over and over and over again. We don't have to increments that. We don't even have to worry about it. It's just going to say, Hey, there's four items in here. Let's loop through this four times Now it's still important to know both because this is the older way of doing it. You're going to see this everywhere for backwards compatibility moving forward in JavaScript. From here on out, you're going to see a lot of for each loops. Now, where does this actually become useful? Well, what if we wanted to get all of the inner text from every single ally so even ally in here , So l i dot Js text and I don't know, item one. Just do this over and over and over again. Okay, so I just made 17 list items, all with the same class, and I want to select all of these in loop through them and get the text in here. How am I going to do that? Let's go ahead, comment this out and let's use a query selector all So let's do of our allies is equal to documents dot cree selector all and we want to select all the Js text elements or rather, all the list items with a class of Js texts. Now let's loop through these. We've got allies dot for each for each takes a function. This is going to be whatever is in here. So this is going to be our particular note and then it's going to give us our index. Now. What happens if we just a consul dot log? Okay, Not quite. Consul dialog node dot inner text. Go ahead and refresh your page and sure enough, it all shows up in her JavaScript. So we have managed to loop through 17 list items and get the text of each one in 1234 lines of code and this also allows us to enable the query selector all We haven't really been able to use us too much because up until this point, while we knew about lists or a raise, but we didn't really know how to loop through them now we can. You can also use the old school loop way if you wanted to do it that way. But this is just so much cleaner now, just for fun. Z's Let's go ahead and actually change the inter text of this note. So let's go node dot inter text. And just to make this ultra clear, where we got node from was, If I do this type in allies, this gives me a note list down here, and each one of these is like a query, selector, regular query selector. And so we just renamed the regular query selector to basically have a variable name, which is called it Note. And in there we have access to all of these different things, and we just said, Hey, grab that note and then get the inner text. Let's go ahead and changes inter text to something different. This inter Tex is going to be index multiplied by 12. Whatever that's going to be. And let's try this. Let's add some brackets around there and the cat Nate a string and see if this is going to work the way we intended to work. So that should say a number is the number, and sure enough, there it is. Zero multiplied by 12 01 times 12 is 12. 16 times 12 is 1 92 It's now basically again, with just four lines of code. You can ignore the comment in there that's not necessary anymore. With four lines of code, we were able to loop through every single item in here and change it to be whatever we wanted it to be. Now let's go ahead and do one more thing. Let's say we actually want to cut this list down. This is gonna be fun. Let's say we want to cut this list down to just 10 items the 1st 10 items. So what we're going to say here is if the index is equal to 10? Nope. That's going to be exactly 10. If it's greater than or equal to 10 let's go ahead and remove this note. Let's just remove it from the document object model entirely. And then let's also continue. And so this is only ever going to run on the 10th iteration or higher, and this is only ever going to run. Assuming that continue is never executed, is going to run from zero up into the number 10. But we're not necessarily in a loop here. This is a function that's being executed from each particular item in a list or in an array . How are we going to continue? We can't continue because continue is a key word that is reserved for loops. Exclusively, we are inside of a function. So what we can do is return false. And I would like you to also experiment with returning true and just returning in general. But let's go ahead and return false. And when a refresh the page, we can see here. 0123456789 We have 10 items in there in total, and it got rid of all the other ones. Let's go ahead and actually comment this out so that we can see these indexes properly. Item one through 10 is available. We got rid of 11 through 17 so that is four. Each loops. In a nutshell. That's really really nice, because now we can actually very, very easily grab multiple elements from our page and loop through them and do something with it. Whatever that something is is entirely up to you. But now you know how to work with four loops, wild loops and for each loops I would really appreciate if you could take a few minutes and just even just recreated the example that I created in this video. Just so you get a little hands on experience with the dot for each notation with a callback function in here, these were going to be incredibly useful. Going forward allows you to basically execute one chunk of code over and over and over and over again without having to copy and paste over and over and over and over again. So go ahead, give that a shot. And when you're ready in your feeling confident, let's head on over to the next video. 44. JavaScript Guessing Game Project: okay. We just learned about objects and looping. Those are two fundamental pieces of object oriented programming such as javascript. Now, what I would like you to do for another project hearing larger projects, actually, not larger. It's just gonna take a little bit more effort to wrap your mind around. It is I want you to create a guessing game. Now, however you make, this is totally up to you. You can make that very bare bones, or you can make it really, really beautiful and use the document object model. You can make it as simple or complex as you like. The idea behind this guessing game is you should be asking someone. Maybe it's a prompt or input box or text field. Say, hey, enter a number. And if that number is the right number, then break out of the loop. Otherwise, I want you to keep looping through it. No, it sounds a little bit complicated, but basically what I want you to do essentially is one. Create a loop that always asks a number and then two. If the number is incorrect, ask again and just be real annoying about it. And then if the number is correct. Break out of the loop. So I'm going to leave this up to you. I'm not going to give you any more hints. I want you to try and figure out how to do this on your own. Actually lied. I'm going to give you one hint. Remember that loops will always continue for as long as a particular statement is true. So if the loop logic is always true, it will keep running. If it is not true, it will not keep running. It will break out of the loop. Go ahead and give us a shot. If you get really, really stuck, you can just watch the rest of this video and I will show you the way that I do it posit video here. I'm going to fade this video out and faded back in and I'll see you. Hopefully in a couple of minutes. All right. I want to create a loop that is going to ask for a number. So the first thing first is I need to ask for a number. So far, num is equal to prompt. What is the number? And I'm going to do this very bare bones so I'm using prompt. But you might want to use something different and then I'm going to cast whatever that input is as an actual number. And then I want to say if it is actually a number, I could do something in here. Then I can also say if the number is equal to the magic number, do something in here. So now we need a magic number in your the the magic number is going to be 42. And so what we're saying is ask the user for a number if it matches 42 which we could also hard code in here if we wanted to Something like that. Then you win. So you've won and let's go ahead and do this console log. You win. Let's go ahead and refresh. This is going to ask me for a number. If I put in 41 nothing. If I put in 42 logs, it says I win. That's fantastic, but it's not quite doing what I wanted to do. I said, if the numbers incorrect, ask again. Okay, well, if the number is incorrect, you could do here and I get asked again. But this is only ever going to run once. And at this point, I no need to basically copy and paste this whole thing into here just like this. And if it's wrong again, I have to copy and paste the whole thing into here and we can see how this gets pretty gross pretty quickly. Go ahead, paste the whole thing into here again, over and over and over and over and over again. How many times are you going to do that? None. I don't want you to do that any number of times. This is where loops come in. So we're not going to do an else statement in here. What we're going to do is run a loop. So while true, because we know that loops always execute when they're true. We're going to ask for the number every single times. Let's put that in our loop. So for every generation is going to ask you what the number is. If that number is a valid number and that number is equal to the magic number, it will say you win. So it's do alert, you win. Otherwise, this is not going to match. So do nothing if This is not even a number. It's going to ask again for a proper number, but we have a little bit of an issue here. This is just going to keep asking over and over and over again. And so what I'm going to do is I'm going to break out of this loop just like that. So even though there are, if statements in here, the loops still knows that it's in a loop and we basically can still use break, let's go ahead and give this a shot. Refresh. What is the number 12? Nope. 32. Nope, Some crazy number. Nope. 42. Ah ha! I win And that is a guessing game. Now there's a way we can actually clean this up. We can use additional if statements, so we can say if the number is in fact a number, and this has to be true as well. So if it is a number and the number is equal to the magic number, it's going to alert that we have one break out a loop and we are done. So in roughly eight or nine lines of code, we managed to make a very bare bones guessing game, and if you ever wanted to change that number, you could change that number as well. Let's go and change us 109. I don't know if that has any significant meaning in my life. I would see 108. Nope, that's wrong. 110. Nope, that's wrong. 109 mailed it. And so when when you win, maybe you change the background style of your entire page. Change the background color to blue, add some text in their say you've won, which, actually, if we wanted to make this a little fancier, we totally could. So we do have our body is equal to documents. Dutch query selector grabbed the body. We don't want to put this in the loop because we only only need to really grab it once. It doesn't need to be in a loop, and then we could do Body dot Style that background color is equal to blue. Let's do body dot style dot Color is equal to white and body dot inter HD miles equal to H one. You win and then break out of the loop. Let's try this again. What is the number 12? Nope. 32. Nope. 109 I win. And from here, I know you can really just make this fans here and fans here now to understand what's going on here. I just said, Execute this white loop forever. Until we say otherwise, do we purposely break out of it? We're not using particular numbers or anything like that. We're just using a loop that's going to execute forever until told otherwise. And that is how we create a simple guessing game. If you have any questions, comments or concerns about this particular project, go ahead. Leave them down below. And also don't forget you can update your skill share project with the latest code that you have. Take a screenshot or share a video or share your coat on code pen. Sharing your project is a great way to show that you are making progress to the rest of the class. 45. Let and Const: In recent years, JavaScript has made a lot of progress as an actual programming language. It started off as just a scripting language. Thus the name script. But it has really evolved into its own entire language over the last 5 to 10 years or so. And with that comes some pretty cool changes. But some things that are a little different from other programming languages as well. And the one I want to talk about in this video is let and const let and constant so up until now we have been defining every variable with var. Var name is equal to Caleb. We could also use let name is equal to Caleb and we could also use constant name is equal to Caleb. We could use any of these three now there are differences here. We know about var and hoisting. If you don't recall what hoisting is, go back to that hoisting video and just take a quick re watch over that just to make sure that you're familiar with what hoisting is. We know about scope again. There's a video on scope. You're going to want to watch that one again. Make sure you're somewhat familiar with the idea of scope because let and constant R Block scoped. And so what this means is var name is equal to Caleb is accessible in a function like this function. Get name council dot log name. I could even do this. I could do name is equal to new name, and then I could console log the new name down here. So console log name again and let's go ahead, comment those out. And then let's run this function right here. And so says Caleb and new name. And so the nice thing about far is that this is now in the global scope and a function can use it. We can even overwrite whatever the value was as soon as we call the function. And then the name actually changes with let and constantly. Don't get that. We actually get more restrictions. Now. The interesting thing about good programming languages, you want restrictions. It doesn't seem like that at first, but actually you do because the less freedom you have in a programming language usually means the faster the language will execute. Means is going to take up less memory in your computer means more people are going to write code that looks the exact same way means better standards. Basically, it's less of a mess if there are more rules in there and what let and constant do is introduce more rules. So let's go ahead and create example here. So we've got a variable, and the course is equal to JavaScript for beginners. And what we can say here is if the course is equal to JavaScript for beginners, consul dot lug this course. I just want to make sure that this is working. So let's go ahead and refresh our page. Sure enough, it says this course now. If I wanted to define another variable, I would do far Something is equal to something else. And then I could say, Consul, don't log something. So watch this. This will still work something. What let does is it says Hey, you've got a variable, but I'm going to scope it to these curly brackets, and so when you try to console log something outside of these curly brackets, it's not going to work. Let's give this a shot and see what it complains about. There's an error in here reference air. Something is not defined I love how it used something as if it was actually part of the air . Let's go ahead and change that, too. A new var. There we go, a new virus, not defined. That seems a little more verbose, although we can see that a new bar is actually defined. But what this is saying is this variable can only be used within these brackets. It's curly braces. And so what? Let does let allows us to use this variable Onley inside of here, so it's scoped to these curly brackets. But we can also we can also override it. So let let's you overwrite variables that air scoped to your closest set of curly brackets . And so if I move this up here, we're going to see that console log will spit out something else. Sure enough, it says something else. And if I try to console, log this again a second time, we're going to get both a log and an error, so we get a log and an error. So the main difference between Var and let is let is scoped to again these curly braces. It is important to know that because you're going to see code out there that says, Let whatever the variable name is, is equal to something, and then you won't be able to access it outside of its parent Curly braces. But let's go ahead and take a look at Const. So you hear that CONST. Is somewhat the same thing. Const. Is a variable that is scope to its closest curly braces, called block Scoping. But Const stands for constant. It is a variable that cannot change, which is a funny way of basically saying this is a value, and this value will never, ever, ever, ever, ever change. And so it's no longer really a variable more than it is a constant data point that will never change and so, with constant, were not allowed to override it. So if we get rid of this, this will work perfectly. Funding says something. If we try to overwrite this because it's already been defined here. If we try to redefine it, it's going to throw us an error. Look at that invalid assignments to Const. A new virus. You're not allowed to reassign anything to a concert, so there's actually benefit to this when using a regular variable, for example, course, it comes with a bunch of methods basically functions on on the string object. It comes with a bunch of different things in here. We can see a ton of them in your as well, and some of these allow us to actually change the value. Of course, whereas Const does not allow us to do that, Const doesn't come with all the functionality that a regular variable comes with because it cannot change. So what's the point of assigning a method or function to it if we can't change that value at all? So there's actually a fairly big performance gains, and because it is block scoped, you don't have to worry about that leaking out of this. If statement your javascript function, your JavaScript program does not have to worry about storing a lot of that in memory for too long, and so it's just a really fast way of using variables. Now, if that all sounds a little too crazy for you, you can think of it like this. Var is basically a variable that can be scoped to the global environment. Let is block scope to the closest curly brackets. In fact, let's do this let and const our block scoped to the closest curly brackets. Let can be changed. Constant can not be changed. And that's the main difference. And you're going to see these all over the place in modern JavaScript. So we've been using VAR up until now. But moving forward, we're probably going to be using fire. Let and const you know what I would like you to do as, Ah, quick little task here is create a let variable inside of maybe an if statement or a for loop or something, and then try to access it outside of your if statement and then right, a const variable constant. And then just try to change the value of that const variable and it will throw you an error . Once you've experienced these errors and and how they actually work, it starts to make a lot more sense and we'll be using these moving forward. You'll get a lot more experience with these as we progress through the rest of this course 46. Introduction to OOP: Okay, now we're getting into some of the fun bits. This is actual programming. This has less to do with the document object model. More than has to do with actual programming fundamentals with a a thing called an object oriented programming language in 00 P. Now, while this sounds kind of complex and at first is going to seem a little complex, really, all it is is a way for you to cluster your variables and functions together to keep your code nicely organized and to reduce co duplication. So remember when we created a person object in the object video? We created something like this name sequel to Kaye Love and the age is equal to 30 Yadi Yadi Yadi on something like that. That's what we ended up creating. This is basically object orientated programming because we've got an object here, and then we have object dot property in that returns. Caleb person dot age is equal to 30. There's actually a nicer way of writing this in more modern JavaScript, and that is through this idea of a class. And the nice thing about a class is basically you can take your entire person object and you can copy and paste it over and over again. You can give it default values so that it creates basically this object for you with just a single line of code. You just have to write out that functionality first. So let's take a look at this. We've got class, person, and this is essentially what your syntax looks like. It just keyword class. Whatever your class name is, generally it starts with a capital P. But really, that's up to you. And then in here we have functions and variables called methods and properties. So we have a function in here called Make sound, and all this is going to do is council. Don't log me. Oh, now two in Stan, she ate or to start a class like this because this code may have been executed in the background but is not actually stored anywhere. Now, this is sort of what it would look like if we wrote a regular function in here. Let's go ahead and get rid of this. We don't need it because javascript is smart enough to know. Hey, this is not a variable. This is a function. And now to actually in Stan. She ate this to start this class. We actually to store this into some sort of variable so we could do Const. Caleb is equal to new person. So this is our syntax here. We've got key word class. Whatever class name is that matches here opening and closing curly braces. And then we just have a simple function in here. It's a function inside of an object that classes are objects. And so we call this a method. And so then we said, Hey, use const. Kayla because this is not going to change the stuff inside of it might change. But this itself is not going to change and then do Caleb dot make sound with parentheses in there because it is a function, it's a method. Let's go ahead refresher page, and we can see that it says me. Oh, now why is this so awesome? Well, because now I can make another person. I can call him Nathan, and we can both make the same sound. And all I did was right. One extra line of code and it took everything in here and applied it to this one extra line of code started in a variable in a constant old Nathan. And now we will both make the sound of Miao, so this will show up twice. Miami. You see that to their that means that showed up twice. Go ahead and undo that. Now let's go ahead and add some default values. So let's say a person needs a person needs a name and age and their favorite food. So unlike a function where it would be like name, age and food, we sort of do this. But we have to go kind of the long way for this. So we create a new function, a new method in here called Construct. Er, this is a magic function name. You can actually see that it's pink. That is a reserved word that is a key word. And then we can pass in these values in here so we can say, What is the person's name? What is the person's age? What is the person's favorite food? This is a function it just doesn't say function in front of it. But this is a function. And then we could say, Consul, that log name, age food and let's go ahead and throw the default values in here. So my name is going to be Caleb. My age is going to be 30 and my favorite food is going to be zahk. Refresh says Caleb. Thirties are so now. We actually have put values into our new class. We could go ahead and create a new one. Let's get rid of make sound. We don't need that new person. This one's going to be Nathan and he's gonna be 28 his favorite food is going to be a salad . And we're going to see Caleb, 30 Pizza Nathan, 28 salad. And we could do this over and over and over again. And any time we add more code in here, this is going to affect both of these equally, which is really nice. And now we're writing one piece of code that can affect multiple sections of a website or multiple pieces of functionality. Now, what if I wanted this to say Caleb says mm to, and then whatever the food is well, unfortunately, because this is object, we can't just say food, and we can't just say name. This just simply is not going to work. So let's go ahead do Caleb dot make sound make yammer sound. It's actually fix up that syntax there. Save that and refresh and food is not defined. Although food is here, we gave it here. We even passed it in here and here. But for whatever reason are coda saying food is not defined. And that is again where this idea of the this keyword comes in. So in our magic construct er method here, we could do this. Dot Name is equal to name this dot age is equal to We could cast it if we wanted to Age this dot Food is equal to food and we could get rid of that. And what this is saying is, Hey, there is a property in this person class called name. There's another one called age, and there's another one called food. And so when we pass in our parameters into this person class Caleb, 30 pizza, this is going to say Okay, well, yeah, sure, I understand that these are all being passed in to the first function, but also make thes available through the entire class. So now I could change this to this dot name says food to says him to this dot food, rather. And let's put this on multiple lines because we can. And so now this will say, Caleb says MM to pizza. And again all I'm doing here saying, Const. Caleb is equal to a brand new person class. The name is Caleb. The ages 30 favorite food is pizza, and again, that just matches up here just like a regular function. It just happens to be this one has to be called construct. Er, let's go ahead and refresh this and says, Caleb says to pizza And again, the key here really is the this keyword. This is what allows you to transport this variable to any other function inside of the person class. But if it helps, I find this actually helped me when I was originally learning this way back in the day. It sort of looks like this name is equal to whatever the name is going to be. This dot age is equal to whatever the age is going to be, and this dot food is equal to whatever the food is going to be. And all this is saying is saying, Hey, there's a variable outside of this function scope called this dot name and just assign it to whatever this is. There's another one called this dot age. Assign it to whatever we wanted to be a judge and this dot food. And so basically think of it like this. We're just taking a variable from a higher scope and changing the value of it on Lee. We don't have to write that out. And then if we wanted to, we could also come down here. And we could say, Nathan dot make sound, make numbers sound refresher page. This will say, Caleb says, move into pizza. The next one is also going to say, Nathan says soon to Salad, just like that now, this may not seem super useful at this point in time, but as your logic grows, it makes sense to group things that are together. So instead of having an array, an object and a bunch of functions for one single particular person, and then copying and pasting over and over and over again for a second and the third and fourth person, we could wrap all of this together because it's all related into a class and then just say hey, use a new person. We can even extend this down the road if we wanted to, to do additional things, so we could say that this is the base. But then if we wanted to say if person is part of the military, they have extra functions or extra features. We're not going to get into that in this video. This basically wraps up the entire class lesson. What I would like you to do, though, is give this a shot. Create a class, create a magic construct er function. We can take any parameters that you want. You're going to definitely want to use the this keyword and then create a function. Another function doesn't matter what it's called and try to access. For example, this dot food. Even though we did not pass food into here, we were able to get it by saying this dot food because this refers to the entire class itself. Lastly, instead, she ate your class by saying, Const, your name is equal to new person or whatever your class is going to be about and then execute the method in there, that function mine was called Make sound. You can execute yours with your name dot your function name and then parentheses. This is also one of those ideas that is a big hurdle for programmers to get over. But once you learn about object oriented programming and it starts to make a lot more sense to you, life gets a lot easier as a developer and you jump from that beginner or that junior status to an intermediate status. Because you start to understand how data relates to itself for two other functions or how to group things together, and it all just starts to come together. So definitely give us a shot. And, hey, if you have questions, don't forget there is a common section down. Be low. I'm happy to help at any time. Please ask questions if you need any assistance. 47. Extending Classes: all right. In that last lesson, we talked about an introduction into object orientated programming, and we talked about things like properties, methods, magic construct, er's and the this keyword in this lesson, we're going to go over some more of that. Honestly, if you're brand new to JavaScript, this is going to be very theoretical for you right now. It will be a lot more applicable for you as your career as a JavaScript developer down the road. But as of today, if you're brand new to JavaScript, honestly, just feel free to watch this video. You don't actually have to do anything with it. It's just good to know about the concept behind it, so that when you are introduced to this down the road, it's not going to be super scary or anything like that. You will be adequately equipped to deal with classes, and in this lesson, we're going to create a class, and then we're going to extend it. And a really good example of this is just something super basic. Let's say we have a class of an animal, and what does every animal have in common? So we have a construct er class or construct your method in here. And this is where we put in all of our default values or default parameters. And so let's say every animal has a name or rather not a name, but a species. It also has a weight and yeah, and then just a height. So we're just gonna do these three in here, and then we're just going to say this does Species is equal to species, which seems really weird that we're writing this out like this, but it allows us to use these variables across the entire animal class. Wait. We could also cast this as a number if we wanted to. We wanted to. We could cast this as a string. So it's always a string. And then we could say this dot height is equal to cast. That is a number height. And then we could create a nice little method. And here just called, I don't know, get info. So get info about this particular animal. It has no parameters because it's magically just going to get the this dot species. That's not Wait. That's not height, because this is like saying animal dot species. Whatever this animal is animal dot Wait, whatever this animal is, animal dot height, whatever this animal is. And so this function already understands the concept of this. It's now we can say, Consul, don't log this dot Species ways This stuff Wait, we don't know if it's kilograms or anything. So we're gonna just going to leave this one without any sort of metrics or we don't know if this is pounds or kilograms, so we're just gonna leave that as is a regular number. And is this duct height tall? So, for example, a Tiger Ways 400 is three feet tall. Now, we don't know if these are pounds or feet or anything like that. So we're just gonna stick with regular numbers for now to keep this pretty simple. And I'm gonna make this a little smaller so we can see more of this on the screen. Let's go ahead and stand sheet a brand new animal. So let's say const. Tiger is equal to an animal. A new animal. We're going to say, Tiger, it's weight is 200 its height is 36 inches. Something like that. And then we could do tiger dot get info and this will just console log. It's species weight and height in a sentence for us. Let's go ahead and refreshing. This is Tiger weighs 200 is 36 tall. So not the greatest English there, but you get the point. So this is a regular class, and this is basically exactly what we did in the last video. Now let's go ahead and extend this. What this means is we can write another class that inherits all over this data already, and we can add more to it if we wanted to. So let's go ahead. And what I'm gonna do here is but that all in one line just so that we can sort of sum this up in one view a little easier. And let's create a new class for a house pet like regular cat. So we do class cat keyword extends animal, and so this cat is already going to get constructors such as species, weight and height, and it's also going to get the method of get info Now. What we could do here is we do construct er kamau instructor. Let's pass in the species, the weight and the height and we could run all of that if we wanted to, or we could say because it's extending from animal, we could just run this exact same function. You can see that they're actually highlighted when I select one. It selects both because they have something similar. Have similar functionality here so we can do this thing called Super, which is really cool because this extends because cat extends animal. We can run this function called Super and it says, Oh, go up to animal and run whatever this function currently is. Let's go ahead and toss species weight and height in there. And we can also add something brand new so we could do this dot color and let's say I have an orange cat, which is actually false. I have a great and a black cats. Let's do that. So no animal does not have this color. That's that's not up here at all. But cat does. Cat has all of this stuff. We're saying Hey, run Super So basically run all this stuff with these three parameters in there, which is exactly what it's doing, is gonna set the species weight and height. And they were saying, Hey, also add the for color. So he's great. And so we can still keep this stuff in here. If we wanted to him in a comment this out, it's got to change that there. I'm gonna comment that out and I'm going to create a new cat class. So let's go ahead, Const. His effort is equal to new cat, not animal. We define a new class here. It just extends from animal species. Is he's a cat sort of pointless because we know it's going to be a cat. What is his weight? He weighs £13. And what is this height? I don't know. I think he's like 13 or 14 inches tall, something that is a fairly large cat. And then we could do console dot log Zephyr and take a look at what's actually going on behind the scenes here and see if color shows up, so refresh. We get an object in here. Color is great. Look, there it is. Height of 13 species is a cat and the wages 13. Now what if we wanted to do is ever don't get info. It's not actually in here. It's in the parent class. It's the one that we're extending from. And so this will say Cat weighs 13 and is 13 tall again. Terrible English. But that's not really the point here. Cat weighs 13 and 13 tall, just as expected. And it's just like saying, If I copy all of this in year and get rid of it in here and then say this dot color is equal to Gray, it's just like saying that only this time we were able to write less code. Nice thing about this is if we ever extended this again, we could say Class dog extends Animal and dog will also get species weight and height, so we don't have to redefine that. It will have a method in here called Get Info so we don't have to redefine that. And it's just an easy way to copy this over and over and over again. And so we could say Const. Thiago is equal to new dog Vito. How tall is he? I don't know. He's huge. It's like 3.5 feet tall. And that was actually is wait so his weight would be about £140 he's 3.5 feet tall. He's a big dog. But now we could run Zephyr. We could do Dargo dot get get info on this will say Vito weighs 140 is 3.5. And so again, this is quite theoretical. At this point, we're not going to be using this too much down the road. But you are going to see this in the wild and his JavaScript grows and grows and grows. You're going to see this a lot more. You're actually going to see this in a lot of other programming languages, such as Python and PHP as well. Let's do one more example. You. Let's get rid of dog. We don't need that in there. And let's create a brand new method for our cat. So let's create a method where the cat is sleeping rules. Call it sleep consul dot log this dot name Well, that's alright. There's no name in there. This dot species is sleeping for 16 hours a day, so Cat is sleeping for 16 hours a day. We could go ahead and now use this. So instead of zephyr dot get info, we could use his effort dot sleep and this is only available on the cat class. So if we wrote animal here, this would not work. But if we wrote Cat, this will work. So let's go ahead. Refresh our page. Cat is leaving for 16 hours a day. Perfect. Now that's what you would call a perfect class. And lastly, one more example in here we could do in the animal class here. Let's do a speak function, Speak method council dot log. I say a thing. We don't know what this animal is. We don't know what is going to say. And a cat we can say a cat always says me. Oh, so we can overwrite this by saying Speak council, don't log, not speak We want to say no. And then instead of sleep, we could do sleep and then speak and then sleep and let's say is having a nap So Cat is having a nap. Then he's going to get up. He's going to speak, and then he's gonna have another nap again. Refresh Cat is having a nap. Miao cat is having it up and so we've successfully over written us. And if this did not exist, this is going to inherit the speak method from its parent class from the class that is extending the animal class. So it's going to say I say a thing which is not useful. It says Cat is having a nap. I say a thing. Cat is having a nap. So basically all we did was overwrite the default method that came with Animal. Lastly, let's learn how to chain functions together, chain methods together because in other parts of JavaScript, you're going to see things like this where it's like his effort, not sleep. Don't speak about sleep. It's like, How do you change these together? This is actually pretty easy. So when you're dealing with an object of some type, we know that classes are objects. All you have to do is say return this. This is going to return the entire cat object. And if you do it down here to return this every time you execute his effort, not sleep, it's going to console log species is having a nap, then is going to return this which is basically all this code in here. It's gonna return the whole thing, which means we're now able to change its together. So then you can use speak and because it's returning itself basically all this code again, you can then run sleep. So let's go ahead. Save this refresh and Walla just like that. Now we have an extended class and we're changing methods together. So we're getting into really, really nice JavaScript here and frankly, me, along with most Javascript Dev's preferred to just have this dot notation in here. So instead of his effort, not sleep and then has ever not speak. And then Zephyr not sleep and separating is over and over and over again. We can just put this all on one line, so that is extending a class again. You don't need to know too much about this. We're actually not going to practice extending classes in this class just because it's not something that's going to be incredibly useful to you right now. What? It is one of these skills that you should just talk in your back pocket for now because eventually you're going to see this in the wild. And it's going to be important for you to understand what this is, or at least have a vague memory of that. One time when Caleb talked to you for 15 minutes about what the extend key word means with construct er and chaining methods together and things like that. So just tuck this video in your back pocket, and if you're feeling a little spicy, you can give this a shot. You can try writing this out if you like. I personally think it would be a good idea. But if you don't want to know pressure, we can head on over to that next lesson whenever you are feeling nice and ready. 48. JavaScript Modal Project: Okay, Now is the time where we start putting a lot of these skills together. This project is going to be a little bit harder. We're going to create a motile from scratch. Now, if you don't know what a motile is, it's you know, whenever you click a button and then like the background of the page sort of goes blacker or dark, and then you've got, like, a little internal window inside of your page. That's what a motile is. We're going to create one of those from scratch. Now, if you don't know a lot of CSS, that's okay. You're motile doesnt not have to be beautiful by any means. It just needs to be functional. That's the key to JavaScript is functionality. So what I would like you to do is create a button that's going to open a motel, create a button that's going to close the motile, and then I want you to write all of this inside of an object or a class. It's up to you. If objects make more sense to you at this point, right it in an object. If a class makes more sense to you, right it inside of a class. Make sure you have your functions or your methods inside of your object in your class and do whatever you need to do to make this work. Now you're also going to have to write a little HTML because your page requires the actual motile structure they say requires very loosely it doesn't actually require. You could also get javascript to create that dynamically if you wanted to. For this, you're going to need to write a few event listeners, and you're also going to need to write them inside of an object or a class. So if you mix those two together, you should be able to create a motile fairly easily. Once again, this is not necessarily about beauty. It is about functionality. You can always make something nicer toe. Look at using CSS. That's totally fine. That's more of a CSS thing we want to do just JavaScript so focused largely on functionality. Give this a shot. Try to do it on your own without googling anything without having to reference other videos . Make your brain sweat. This many project this object oriented programming motile is supposed to be a little more difficult. Get as far as you can with this. Try to figure out the solution on your own. But you know what? If you really get stuck and you just can't make any more progress, you can definitely reference the other videos. Hop on the old Google machine or just watch the rest of this video because I'm about to show you the way I would do it. But give us a shot. I'm gonna fade this out to black and then you can hit, pause, and then either when you're finished or if you get stuck, you can just resume this video and you can see the way I would do it. So let's go ahead and give us a shot, OK? First thing's first. We need the actual motile html. So I'm gonna create a div in here and I'm gonna do some gross in line styling. So style position. Absolute, actually, let's do position Fixed top 50% left, 50% border, one pixel, solid red. That's gonna be super ugly. Background color is going to be read as well. The with is going to be 50% and we're going to give it a padding of 20 pixels Let's see what this looks like. Yeah. Okay, so it's, you know, a big red ugly box. Let's transform translate. Minus 50% minus 50%. And there we go. It is in the center of our page. Let's go ahead and just move that over. So it is in the center of our page now. And lastly, we want to display none. Make sure it doesn't show up at all. There we go. It as if it never even existed. Next. We need to be able to grab this. So let's go ahead and give us a class Js motile. And while we're doing this, you know what? We might as well throw this into proper CSS as well. So let's grab that. And let's give this a class of just a regular motile throw our class appear style dot motile and I'm gonna touches up. Do do do do do select only semi colons New line bam just like that. And just to make sure this is working, let's get rid of display none, and it's still not showing up. And I bet you that's actually because I have bootstrap installed. So I'm going to uninstall bootstrap, get out of here. Bootstrap, We don't need you. We know how to write our own CSS and JavaScript. Now go ahead and get the red of display. None. Bam! There it is. Okay, cool. Yeah, It was a bootstrap thing, and it was just using the class of motile. So we got rid of that end. Now we have complete ownership over it. Okay? We need to create a button that's going to open the motile, and we need to create about is going to close the motile. So let's create a button here it regular button class Js open motile open motile That's always going to say big ugly button and currently does nothing. Now let's go ahead and create an event listener for open motile. So open button so constant open BT N is equal to documents dot query selector that jazz opened motile There's only one so we can totally use Cree selector instead of Crease Lecter all and we could do open bt n dot add event listener it's a click function is going to be the event and all we want to dio is grab the motile and display it So now we need to grab the model CONST. Motile model model is equal to documents dot query selector dot Js model. We're just going to select this and we're going to say Motile that style don't display is equal to Let's just change it to initial, which is going to be whatever it was before we told it to be Display none. Refresh your page. Ha! It works. I mean, it only opens, but that's pretty good. Okay, let's actually go and style this up. Just a little nicer cause that red is just phenomenally terrible with of 80% that's out of max with 800 pixels for super huge browsers, Border is going to be one pixel. Solid black background is going to be white. That's at a box shadow. Five picks those five pixels black display none. Remove that. Yeah, good enough again. We're not looking for beauty. We're just making sure that this works. Let's go ahead in our motile. It's at a title. This is a model paragraph, Laura, Um, 50. And if we refresh your page and open, this is a motile and it just layers on top of the rest of the page. Now we need a close element in here, So let's go ahead and add a button in here. Button class is equal to Js close motile. We could also get get it by its idea if we wanted to. Doesn't really matter close model. And now we need to add the close event. So let's do this. And I know I said, Let's do this and objects or inside of a class and we're going to But because we're learning JavaScript is going to be easier if we right the way we know and then sort of make it more advanced from there. So we have an open button now we have a close button and it is very, very similar to the open button event listener. So motile dot style dot display is going to be display None. Let's go ahead. We have an error. What does ever say Close button is no. It's because it's not jazz, but motile It's jazz close motile. If you're screaming at your screen saying Caleb, you didn't wrong Good catch. Okay, no more error. Open motile close Motile open motile close motile Okay, we're getting pretty close now. The last thing we needed to do was we needed to write all of this inside of an object or a class. Now again Because we're new to JavaScript. We're not gonna immediately throw all of this into an object or a class. We're gonna write it the way we know how to write it, and then we can make it more complicated. So let's go ahead and create a class so class, let's call it motile. We could have a construct er in here and it could do some stuff and then we could have make that a little bigger. And then we have an open method and then we could have a close method. And so let's uncommon that okay, and then in her construct, or what is a piece of data that we need to access through the construct of the open and the clothes methods? While we need the motile every single time we need that motile we don't use constant here because if we want to access the motile inside of the open in the close method we do this dot Motile is equal to the only motel on the page. Then what happens when we say open while we need to open this motor. So we're going to grab this and we're going to say this dot motile That's this guy here dot style dot displays able to initial and then we're going to close it by basically doing the same thing. This dot motile dot style. That display is equal to none. Okay, let's give that a quick save and refresh. Do we have any errors or warnings in your new book? Does that work new because model is not defined anymore. And that is because we have event listeners in here that are looking for this. So instead, what we can dio is we can actually do a mix here, So we have a regular motile and let's go ahead and just pace the stuff down here. But now we actually need to define this motile. So what we could say is constant motile is equal to new motile and instead of setting this , we could do motile dot open and in here we could dio motile dark clothes and in fact we could actually keep all of this together that does not need to be above model at all. And so what we did was we just took our hide the motile and open the motile that kind of functionality, plus the actual selector itself. And we put it into its own class. And now we could just do, like mortal dot open motile dot clothes and refresh your page. This is a motile closes the model. Ah, so that's pretty nice. And just like that, we have a working class with construct er this top model which allows us to use this dot motile across multiple methods. Whether we just changed the styling, he's a crease Lector in there. He's a few other career selectors. We created a new motile and then we added a few event listeners. No, what if we wanted to extend us? We could. We could easily extend this. What if we wanted to change the title and the text? Well, let's go ahead and change This class digests motile title class Js motile text and we could you know, Phyllis with regular defaults and we could also change these as well so we could do something like this. Construct is going to take a title. It's also going to take some text and right away we could do this dot motile dot query selector. We could find Js motile title change that inner text two title, not text and then we could do the same thing again with the text is equal to text. And so what this is saying is that we already have the motive. This is our elements note and then we're going to find a new one in here, just the 1st 1 called Title and in the 2nd 1 called text text. There we go ends at the Inter text to the title and the text. Let's make this optional though. So let's say if title does not equal undefined now we can actually set this. If text does not equal undefined now, we can actually set this as well. And so when we refresh open model clothes model that works. What if we wanted to open our motile with a new title, new title and new text New text in here? So this is what it currently looks like. This is a motive A bunch of warm ipsum refresh. This is a motile new title new text in here. In fact, we could actually even take this one step further here we could say this dot title is equal to title. This don't text is equal to text, and then we could throw this into its own method as well. So let's go ahead and say New method, change content. It does not need to take anything. Let's just throw this in here and we're going to say, If it's not, title is not undefined. This tax is not undefined. Then we're going to grab the motile. Also select the title from inside of it. It's like detect inside of it. And instead of title, we want this dot title this dot Tex. And again, we're doing this because this was set up here. We've got title. For all we know, this is actually just undefined. We even set a default in your so it's not a default default title. And let's set a default text in here. Default text. Okay, let's go ahead. Refresh this page Missing a parameter. Where are you missing Something? Text is equal to default. There it is. Thank you, Counsel, for helping me out without her d bugger. Rather, let's go back to the council. Refresh No errors. Open Motile. This is a motel. The reason it didn't change was because we didn't actually use change content yet so let's open up Motile we have this. We've an object with a bunch of stuff in here. We've got motile title and text. The motile property is the actual note element itself. So let's do motile dot And what we have in here we have close If we wanted to my little dot open if we wanted to motile dot change content and there it is. Okay, so that was some fun motile ing we did there. We did quite a few things. We extended it a lot more than I actually had anticipated extending this, but I think this is actually a pretty good exercise to create your own motile. If you aren't great with CSS, don't forget you can always just copy my code here That will create a basic motile for you . I went way above and beyond what this original task was asking for, but I also think I showed some cool things in here for you as well. In fact, there's actually one more I want to show you. One more is we don't have to use title in text at all. Let's go ahead and let's get rid of this dot title and let's get rid of this, not text, and we could say right in here title and text. And then if we refresh open motile, we have a model in here dot change content Title is going to be new title ha motile that change new title to and new text in here just like a regular function. So now we're actually passing in parameters into a method. And you could write that code out in here as well if you wanted to. There you haven't. That is how I would create a motile using JavaScript classes and a few event listeners. Actually, just a couple event listeners, and I even change some of the content in there as well. Feel free to replicate this. Feel Frieda's steal this exact code and just tinker around with it and figure out how it works. If you're satisfied with your solution or you're satisfied with my solution, we can head on over to the next video. And don't forget you can update your skill share project with the latest code that you have , or you can share a screenshot of what you're motile looks like or a video or a code pen. Either way, you can update your skill share project with your latest code. Once you've done that, let's head on over to the next one. 49. Home Stretch: Okay, we're on the home stretch. We're going to go over some newer JavaScript, things that you're going to see everywhere. A few of them included template liberals. So better way to Katyn. Eight, those gross strings that we've been trying to contaminate. There's a much nicer way to do that. Object liberals. You're going to hear this term all over the place. And they're not actually a scary as they seem to there, Actually, very, very nice and simple. We're gonna talk about destructing and aero functions and things like that. Then we're going to get into adding and removing classes dynamically with JavaScript so that your whole page can actually be very, very dynamic. And you could make it look very dynamic by adding entire CSS classes to an element or removing them from an element. Then you can let CSS do things like transitions and animations, which is really nice, because basically, we'd be offloading our general javascript animation. So a bunch of math we would have to figure out to just letting the CSS engine do whatever it does. And then, lastly, we're going to have one final project where well, I'm actually going to tell you what it is you're gonna have to get there and find out. But it's going to use a lot of different components from things we have already learned about. So once you are ready to go, let's head on over to the next section and jump into template. Liberals object liberals de structuring aero functions and much more. 50. Template Literals: Okay, let's take a look at this thing called a temp. Late, literal, so template, literal. It's a nicer way to can cat Nate variables with your strings and basically put side put variables inside of a string. And so, if you ever wanted to print out a statement, for example, name is equal to Caleb, and you wanted to say council dot log. Hi, my name is. Then you close your string at a plus sign and then your variable. And if there's more at a plus sign, I just ring more stuff here. Close your string plus sign at a variable and so on and so on. And so it has a terrible sentence. Hi, my name is Caleb Moore. Stuff your Caleb. And so this is how we've been doing string concatenation so far. It's actually a much better way in relatively newer JavaScript. You can do this thing called a template literal, and instead of having to write this gross syntax, which as soon as you start writing like HTML and stuff in it, it gets pretty, pretty gross. What we could do instead is we could say council dot log used back ticks. Notice that This is not an apostrophe. This is not a quotation Mark. It is a back tick. And then you can say Hi. My name is dollar sign opening and closing Curly Brace. And then you put the variable name in there just like this. And doesn't that look so much cleaner? Because this literally just says hi, my name is Oh, by the way, this is variable coming from outside of this string. My name is Caleb Bam Just like that. And so that's all there really is to a template, literal. Now the syntax behind it looks a little bit funny. So let's go ahead and create one more example Here, let's create a sentence. A constant sentence because we're not going to change us. We're going to use a template literal, and it's going to say hello. My name is again Dollar sign opening and closing Curly brace. Then you put your variable name inside of there. That variable name just comes from up here. Welcome to my course on Javascript JavaScript. And then it just has that closing back tick and an opening back tick. So it's not apostrophes is not quotation marks. It's a back tick go ahead, slam that enter button. It's gonna say undefined cause All we did was define a variable here or a constant rather, and let's go ahead and type sentence and voila, it says. My name is Caleb. Welcome to my course on JavaScript and just for fun, Z's Let's go ahead and take a look at type of the sentence. It is still a string, and so that is a nicer way of concoct in ating variables into a string for any form of output. It's really, really nice, but I would like you to do is just take a quick minute and just try to write one of these coaches, right? Ah, constant with a variable. Maybe it's your name. Maybe it's your age. Maybe it's the number of pets you have and just throw it into a template literal string. Once you've got that figured out, let's head on over to that next video 51. Object Literals: Hello and welcome. Back in the last video, we learned about a template literal. In this video, we're going to learn about a thing called an object literal. And so this one is a little more complicated than a template, literal and by complicated. I mean, it actually just reduces how much code we have to write, which is really nice. So let's go ahead and create a new object in here, just a regular object. So let's say, CONST. Person is equal to And then I'm gonna put my name in here and my name is going to be Caleb , and then I can access that with person dot name. So that's a regular object. Now what if I wanted to define a function in here or a method, as it's called? We're gonna make Caleb speak, and it's just going to be a function called Speak, and it's just gonna console log something. Console log, I say wolf. I used to say me out. Now I say wolf, and this is accessible through speak. Let's go ahead and save that. And it says, I say wolf. Okay, well, what what object Literal is saying? You don't actually need this because this name and this name are the exact same. Go ahead and cut out this stuff in here, and so you'll just see above. It is a comma because there's key value pair in there and instead of saying speak is equal to speak, we're just saying, Hey, there's a function in here. It's called Speak. Just go ahead and save that and refresh. It also works, And so that is what an object literal does. It's a shortcut in an object. So if I created one more in here, But this time I want to do it with a property or variable inside of an object. I'm just going to use a random word. Here s so let's create another constant here. It's called Computer, and it's just going to be a string called Computer. Well, right now, what we would have to dio is computer is equal to computer or this. Essentially, that's the same thing. But because these are the same values, let's go ahead, cut that out. And so instead of basically having parentheses here telling Javascript, Hey, this is actually a function were saying, Hey, computer, the key and the value are the exact same. Let's go ahead and console. Log this. Let's computer. That's to consul dot Log. And there it is computer. And so now we're not writing at the long way. We no longer have to write. Computer is equal to computer or the way we would have originally wrote it. Computer. We don't have to do it that way. We can now just do it this way, which is really, really nice. And so that's all an object, Literal is is saying that your key is the same as your value or when it comes to a method, you're saying that the key for the method is also the name of the function. And so it's just a short cut. Writing less code makes life a little easier. If you feel in spicy, go ahead and give that a shot. Don't forget. If you have questions about how this works, you can leave them down. Be low. I am here to help. Otherwise, when you're feeling confident, let's head on over to the next video 52. Destructuring Arrays, Objects and All the Rest: Hello. Let's talk about this idea of de structuring. Now. Before we even get into this, I'm going to tell you that there is two ways to basically pull data out of an array or an object. And so I think the best way to really learn this is just by doing it. So I'm gonna reduce some of the spacing here and that side, because that was getting a little large. And so if we have an array, so let's create a regular variable. It's called a Are short for array, and it has names in here. So it's got Caleb, Nathan and Zephyr. Now, if I wanted to get Caleb O to this, I would have to say That's a constant. Caleb is equal to a RR zero and Const. Nathan is equal to a R R one. We could loop through this and try to assign this, but basically we just be assigning it back to another variable in the form of an array or an object. And so, you know, if you have, for example, an array that has 100 names in it, you do not want to be doing this 100 times. That's pretty painful. And so what we can do instead, is this idea of de structuring. And really all we're saying is, Hey, we want to grab these and throw them into their own variables. So let's go ahead and d structure this array. Let's go ahead and create. Let's use a let and this is going to look like a list but on the wrong side of a variable. So this is on the left side. Instead of the right side of the equal signs, it's gonna look something like this, which looks a little bizarre, but we'll break this down. So first we want to get Caleb, Nathan and Zephyr, and then instead of and right here, let's just actually put the array variable. Let's go ahead and save this refresh Our page looks like nothing happened, but it is all in here now, All of a sudden, these air actual variables that can be accessed in your application. Now, this is not really a super useful example to be totally honest. Okay, so let's create a new example here. Something more useful. Uh, I'm gonna ask for my name. Prompt. What is your full name? And so we know that this is going to return a string. So this is going to be a string. We know that my name is going to be Caleb's based hauling, and so we can split it on here. And then we could do var or rather, let first name last name is equal to full name dot split on every space. Now there are some logic flaws in this because what if someone puts multiple spaces in here ? Yes, that's going to break the script. However, in this example, it won't. So, ideally, when you're working in in production or more professional JavaScript, you'll have ways of mitigating this particular problem where someone puts in multiple spaces. Maybe you just reduced multiple spaces into one space. Let's go ahead. Console Loggers council dot log First name is the first name and last name is the last name . Let's go ahead, Refresh. What is my full name? Caleb. Tall Lean. It's about my own name. They're wrong. Caleb is the first name. Calling is the last name. And so this is de structuring in a better way. Without d structuring, we would have had to do this a different way, So let's go ahead and comment that out. What we would have had to do was full name is equal to full name dot split. So we have to split it either way. And then we could do var let or const. Let's do cons because my name is not going to change. First name is equal to a full name, and it is the zero index in the 1st 1 in the array and the last name. And when I refresh the page, give us a shot. Let's not use my name. Let's use John Smith. John is the first name Smith his last name, so it still works. But this way we had to actually write more lines of code we had right three more lines of code, or, I guess, two more lines of code. Instead of just writing one line of code. It's going to comment that out. Keep this up here and you can reference this code at any point in time. So that is D structuring an array. There's actually much more to this, though, so this is just regular de structuring. I'm gonna actually comment out this stuff because I don't want that to run right now. What if we have? Let's go back to our first example here. What if we have more than these names, but we just want the 1st 3 for whatever reason. So I want to get Caleb, Nathan and Zephyr. But what if there's also Prairie Henry Veto and Maya? If we run this, what's gonna happen? And I always always invite people to try things you're not You're not going to break anything by running javascript locally on your computer. It's OK to test things, so if it breaks, that's totally fine. Let's go ahead and hit. Refresh. OK, we've got Caleb. We've got Nathan. We've got Zephyr. We probably don't have prairie. Nope. We don't have Henry. No puts the other one veto. Maya, these are all reference airs. These variables don't exist yet, So what if we wanted to get the rest of them? Well, in JavaScript, there's this thing called rest. And so instead, what we can say is let I'm gonna actually copy this because I don't want to talk about all that again. So let's we're gonna d structure Caleb, Nathan and Zephyr. Those are just the 1st 3 they don't actually have to be the same name that could be anything else. And in JavaScript look into this thing where we have this fancy dot, dot dot rest, and then let's go ahead and Consul, don't log whatever the rest is. Let's go ahead and refresh. Console log. We have Prairie Henry Veto and Maya that is all the other ones that are in here Now, this is called arrest. You do not have to use the name rest. It could be anything else. It is signified by the dot, dot dot notation, Hurley dot, dot, dot syntax. So let's just say everyone else just approved that. We don't need to call it rest and voila, it works the exact way we're expecting. All right, I'm gonna common that out, and we have one more. We can also d structure objects. So let's go ahead and create a new object. Object person is going to be. It's going to be mean because reasons I guess so. The name is going to be Caleb my age. What is going to be 30 and the number of cats I have is going to be, too. And my favorite food is going to be pizza So again we run into the same problem where if I wanted to just get my name and store that in a variable, I would have to write. Constant name is equal to person dot name. Const. Age is equal to person dot age Const. Katz is equal to person dot cats. I think you get the idea here instead. Weaken d structure this And so let's go ahead and throw these all in. Let's do it, Let here. I guess. So. Let's do it. Let's and we're not working with an array, so we're not going to use the A race and tax. We're going to use the object syntax, and it's going to look like this, basically, is the object sign on the right object sign on the left on the right. We can actually replace us with the actual object variable itself. So this is like saying all of this is in here. And then let's say I just wanted to get the name and food I could do. Name and food council dot log name is name and food is food. Let's go ahead. Give this a shot. Name is Caleb. Food is pizza. This one didn't have to go in order. It did. With the array when we d structured an array, but with an object because everything is named always had is hey, get the name. So that's the key here. Also get the key called food All the other ones Now we don't care about but let's take this one step further. We can actually get a little more complicated with this because what if this key name is something obscure like first name for the user? Why this would happen? I don't know, But occasionally things like this do happen. And so you'd have to put that name in there. That is just terrible. And so But just make sure that this does work. Let's save free fresh. And there it is. My name is Caleb, but now you have this gross variable called first name for the user. What we can do is reassign this and because basically, we're creating object on the left here and then reassigning the key to a variable name that was a little confusing. We can basically say Hey, this is the key that we want to extract. And what is the variable name we want to use. Let's just call it first name and we can If this makes more sense for you, put this on multiple lines as well. Let's go ahead. But there's on multiple lines and this just looks a little cleaner, especially with my fun being so big. But this is basically saying, Hey, grab that key and then we're going to re assign it to the variable called first name. Go ahead, save and refresh. And sure enough, it still works. And just to really make sure it works. Definitely not. Caleb. There it is. Name is definitely not Caleb. So we know that this is working and so too reassigned. This all you have to do is say food. Put a colon in there. So it's your key. So it's actually do this gonna be your key. And then whatever your new VAR name is, in this case, we're gonna say food is going to be remap to favorite food. And now this is a little more verbose in the rest of our application. So we could say favorite food. There it is. We could even go as far as setting properties that don't even exist yet, so I am just going to undo some of this. Just keep this looking nice and tidy. Okay, so I just undid a bunch of that sort code. Looks nice and clean still. And what if there was a property in here that I'm looking for? That does not exist. So let's say for whatever reason, I'm supposed have a favorite color. And let's say that color is supposed to be blue. But for whatever reason, this person object does not have that while what we get saying here is color and then we can just say is equal to blue. And when I do this favorite food is this changes to faith color, and there it is. Favorite color is blue, and so now we're actually setting the default value. But what happens if this is in your This already exists? We changes to read. Do you think this is going to stay blue because we're signing colors equal to blue? Or do you think this is going to try to grab this? And if it doesn't exists, then use the color blue. Let's go ahead and experiment and find out and again, I always always recommend just testing things. It could be fun. Just a testing to see how they work behind the scenes. Okay, so I hit Refresh, and it's his favorite color is red. Despite this saying blue, it's because it actually does exist in the person object. This is just setting a default value, like when we were writing a function with a default value for a parameter. That's the exact same thing we're doing here Now what I'm going to let you do on your own as a little experiment here is I want you to create an object such as this, and then I want you to d structure that object. But what I want you to do is use arrest, and I want you to figure out what is stored in this rest. You might need to add new properties in here to make sure that this rest actually shows something additional. Or maybe not. Depends on how you write it. But I entice you to give this a shot in. Just tinker around with it and have some fun. See what this rest does console log dot Rest. So at the end council, I don't log rest and just see what that returns So go ahead, Give that a shot. If you don't understand everything in this video, guess what? That's totally okay. You were not expected to know every single thing from every single video permanently moving forward. It's coding doesn't work that way. Learn as much as you can. And when you're feeling a little fed up or board of de structuring and move on to the next , the next lesson. And if you ever see de structuring out in the wild, maybe you're reading some source code and you go how How come, it says, Let's curly brace Name. Food color. Curly brace is equal to some object. Or maybe you're seeing a D structured array. Either way, you're going to be prepared for whatever code is going to be thrown at you. 53. Timeouts: Hello, End. Welcome back. Let's take a look at this new thing called a time out. So in the world of JavaScript, we can actually tell some code to not run for a certain amount of time. And this is called a time out. So let's take a look at the syntax behind a time out. We use this keyword called Set Time out. It's not actually a keyword as a function name set time out, and then we could pass it a function if we wanted to. And this is our call back. And then our second parameter is simply going to be. How long should we time out in milliseconds? So 1000 milliseconds is equal to one second until we write this in milliseconds. Additionally, we could also just say callback function, whatever that function is going to be called. So this would look like function, something like that. And so this is really all a set time. It looks like it's going to run a particular function, and it's going to wait 1000 milliseconds, or 5000 milliseconds, or 42 milliseconds before it actually executes. So let's take a look at what this actually looks like Says to set time out. Set time out. Is that a function in here? And we're just going to council dot log time out and we're gonna wait three seconds. Remember, this is milliseconds. So this is the equivalent to three seconds, and I'm going to refresh my page here. You can actually watch me do this, and then we'll count together, and there it is. It took three seconds. Now that's a little harder to detect. So what we can do instead is we can refresh our page, and then we can change like the background color of the page. Let's do const body. Remember, const is going to be block scoped to this particular block here. So body is going to be documents dot query selector, body and then body dot style that background color is equal to blue. That's also changing. Colored to white, just the text color. Let's go ahead. Give this a refresh and we're just waiting, man. There it is. And after three seconds, sure enough, the page changed. Now what happens when we put a console log up here? Console log, first console log. And we put one down here. This is the third console log. And let's just for posterity. Say this is the second console log. So because it's doing a time out here, do we think that is going to run this? Wait three seconds, then run this and then run this line? Or do we think it's going to run this? Say, Yep, there's a time out here. Run the third console log and then three seconds after it gets to this particular line here , it's going to execute this. What do you think is going to happen? Let's go ahead. Saving refresh and find out 1st 3rd and boom second console log. And so this is a light introduction into the world of asynchronous code. What that means is your computer is going to read this code from top to bottom. It's going to read this line, too. Yep. Okay, I can execute that. It's going to read this line and say, Oh, this is a time out of three seconds. I understand that I'm going to log this, so I'm gonna put this in the back of my mind, and I'm going to move on. But from the absolute millisecond or microsecond that your computer hits this line right here. It's going to start counting to three. It's gonna go one to three. And while it's doing that in the background, it's already ran that probably a bunch of other code and then way down here after bunch of other code has already been executed. It's going to run that set time out function, so it's going to run it down here. And so that is a light introduction into set time out and asynchronous code. 54. Intervals: in the world of Javascript. There is this idea that you can run code over and over and over and over again until it is told to stop running. And this is an interval. And just like setting a time out, we said an interval very much the same way. So we would use a set interval. It takes a function as sort of the callback function and then a time as a second parameter . And so let's say for every second this is again milliseconds just like in set time out. This is one second. So we're going to use us in milliseconds and we just want to console dot log. I'm running. And when we refresh our page, we're going to see this runs every one second over and over and over again. We can actually see that this is counting here. Every second is going to continue running over and over and over, and it's not doing anything useful, but in the wild. When you're writing riel code, you might actually want to perform an Ajax request to some server every second to see if ah users log dinner to keep a cookie alive or to maybe send browser data back to a service. There are a lot of uses for this. There's also a good use case for getting rid of this. So what we can do is put this into a variable so should create a regular variable here. Let's call it. It's a longer and so it's just going to log, and when I refresh the page, it will still run. It's in a variable, but this function, this set interval function actually gets executed and it gets stored into this variable. Now let's say we wanted to get rid of this well, as a better example. Let's do it right in the Consul. We're gonna do clear interval, and we just give it the variable name longer and you can see it stopped at the number 22. Number 22 is not important. It just happened to be that I stopped it when it was counting at the number 22. And so let's go ahead and create a time out with an interval. Let's do set time out. We're gonna put a function in here, and we're going to clear this interval clear interval of lager. And this time out is going to take place after five seconds. And so this is going to run presumably five times, and after five seconds it will stop running. Let's go ahead and refresh, and we just wait to three, four, five. Don't know. Look at that. Didn't quite get to five now, did it? Now this comes down to your computers processing time. What if we did 5.5 seconds? Let's see what happens here. So it's going to go to two and then three and then four. And then there it is. Five. And so all we had to do there was really bumped this number up just a tad, just to make sure that this always runs five times. There's definitely a better way of doing this, but this is just a way of mixing and matching it. A set interval, and he set time out together 55. APIs and Ajax using Fetch: Okay, let's take a look at an Ajax request using the fetch A p I Now this is getting pretty JavaScript e and honestly, this is not super beginner friendly, but I'm gonna put this out there anyways because it is actually very important when it comes to making single page applications, for instance. You know, when you're on facebook dot com and you click a link and the page does not flash, only certain sections actually update That's using the fetch a p I. So that's basically creating an Ajax request saying, Hey, server facebook dot com or app dot facebook dot com Whatever it is, I want a bunch of data back, and then I'm going to render whatever that data is using JavaScript gonna write out my own HTML and then I'm gonna update the page just in this particular section So you don't have to make a full http request and clear the database for user information and things like that. It's just gonna update a little section of the site. That's basically what fetch does. And so we're going to need an A P I for this. So let's do the Star Wars. A P I swampy good old, swampy and let's go ahead and ah, let's get the swampy AP I hear. In fact, I believe it's down here. Yeah, this is the link that we want. So it's gonna tell us in here it's swampy. Dot dot c o slash ap I slash people one nor planets three or starship nine Go with people. One. Who is this Luke Skywalker? Of course. Of course it's Luke. What if we want to get this Jason Data? How are we going to make this work? Well, what we can do is right. A fetch. And so let's go ahead and write some fetching here. We could simply use the word factory, give it to you or l, which was to do to do this. You are all here, and it sort of looks like it's done, but it's actually not. Then we're going to use the then keyword, so basically, this is going to perform the Ajax request. There are other settings in there that you can add if you don't want to do a regular get request, you can do a post, request a bunch of other things in there as well. We're not going to go over all those headings. So the next step is using dot Then all I did here was put it on a new line. So it's the same as this. It just looks a little more readable this way function, whatever that response is going to be. And I'm going to return response dot Jason. So I'm just to make sure that whatever is coming back from this you Earl in the variable name called response, I'm going to then j sahn If I make sure that isn't Jason Format, you know, if you've never looked at Jason before, it looks a lot like a JavaScript object. In fact, it is almost identical to a javascript object. You have your opening curly brace. You've got a key value pair, comma, key value pair, comma, key value pair. Granted, these could probably not be strings. These could just be numbers, but we can leave it as a string for now. So what this is doing is saying Hey, wait for this to happen. And then when that's done happening, when we get a response in this particular function, go ahead and turn that into Jason. Just make sure it is Jason, and we know it's Jason, because this is Jason format hoops. I click a link there. We know it's Jason because this is Jason formatting, and then we're gonna write one more in here dot Then function. And we could do anything we want with this response. Really? So we put our s and here for a response, it was just console log are yes. Let's go back to our page and hit Refresh and you can't see that it did all these different things. But it did create an object for us here. And so we have our birth year. We've got created, edited the film season with the U R. L is that we could then go on hit It's a list so that we could go and looped through all of those if we wanted to. Gender, hair color, homeworld, All this stuff we can go and get all this information if we wanted to as well. Now, this is a very simple way of creating an Ajax request with vanilla JavaScript using the fetch a p I again just toe sort of show you how this works. Use the fetch word. It looks like a function has parentheses. It takes a parameter in here. That's your UL. There are additional settings in there that you can set. I'll leave that up to you if you want to go and explore that right now or maybe explore that at some later point in your career. Once we're done waiting for this to return, we say, Okay, once that's done, then go and do this. And we said, OK, well, whatever that responses, we wanted to make sure it's Jason doesn't necessarily have to be Jason. Maybe it's XML. Maybe you have to parse some XML, do something else with an A p I. And then when that's done, whatever this is returned is going to be this variable here. So I just called it rez. A short for response. You see our ES quite a bit. Occasionally you'll see some people just say our That's also short for rez, which is short for response. So then we change these together and say, Hey, once this is done, do you this one and just conta log it. Now we can bundle a lot of other things we've learned, such as scoping and say, Hey, let's go ahead and get Luke Skywalker so constant Luke is equal to just an empty object. And then we could say Luke is equal to whatever this responses council dot log Luke. And just like in her set, interval less. And let's go ahead and see what happens here when we do consulate log before consul dot log after. And where do you think this is going to run? We could even do a console log here council dot log then number one console log, then number two. And so as humans, we read this as well. This is going to be the 1st 1 then one, then two and after. But is that how it really works? Let's go ahead and refresh the page we get before after then one, then two, and then we get an invalid assignment to const. Because look at that. I said a constant to be an empty object. What this should have been was a let Okay, here, you This works better. So we've got before after then one, then two and then all the Luke Skywalker information before, after this was waiting on a response from another website. So maybe the sense of taking a second or five seconds or 30 seconds then is going to process it, process it a second time, and then console log. Luke. Now, what does all of this mean? This is basically your fetch a p I using JavaScript promises. And the nice thing about this is you can actually split thes out into function one. And then you could split this out into a function to if you wanted to, and this just looks a lot cleaner. Do that and keep that the way it was, though now the problem with what we wrote here is if you spotted this, we have let Luke is equal to Justin empty object, and we're setting. Luke is equal to whatever the Jason response was, but because this runs, this has a wait time. So it's asynchronous. So it's doing something in the background, and then this runs immediately after this one. At least it looks that way. We don't have access to look yet, so council don't log Luke and let's go ahead and actually say Luke, so we can identify this council log. We had an empty object. That's because that's what we set up here. We said it to be an empty object and Onley after a little while. Did we actually get the response back and say, Hey, override it? All right, so I just cleaned that up. I think we should do one more thing here. So let's go back to our object that we get from the swampy dot c o a p I and let's get the films. So this is a list we can see. It's a list because it has the hard brackets here. Luke Skywalker isn't five films, so 1234 and five You can also see that there's a length of five there. Let's go ahead and d structure this and let's just get the 1st 3 films so we know this is an array, but it's inside of an object. So how do we get films? Well, films comes from an object called Well, we called it Luke so we could do looked at films and this would be an array. Now we know that that is the array weaken now D structure that data. So we could say, Const, you are a one. You were all too, and you are all three. We don't necessarily know what those are. We know we're working with an array, so we need to use the rate type syntax. Let's also put arrest in here other movies, so let's not call it you help 12 and three. Let's do this movie 12 and three is equal to luke dot films. Now that's not going to do anything because we aren't using movie 123 or movies and also Constance Block scoped to this so we can't really use it beyond this particular function. But we could say What is the second movie console log movie to whatever that's going to be . And here it is. That's the movie. So let's go ahead and copy link location. This was filmed number six and identity. It'd it'd, uh, we're looking at Luke Skywalker here films in order to 6317 263 one in seven. So movie to had an idea of six and we can see that right here that was movie to. We did that with a ray de structuring, and that brought us to this. And then we could perform fetch request on that if we wanted to as well, another thing we could do is let's ah, let's comment that out because that's kind of neat, but not useful. I'm gonna change that as well. We could loop through every film and get each one of those so we could dio luke dot films dot for each passing a function. This is going to be the URL and then the index council dot log the index and then the earl , this is not going to be in any particular order is going to be whatever order this a p I returns back a raise, keep their order. So this is going to say to 6317 Let's go ahead, save refresh. And so now we have 26317 in the same order that swap edotco gave us. But in our loop, we have index zero through four in order. Now, if you really wanted to get fancy with this, what you could do is you could take this for each and you could fetch each movie in here and get that data as well and so on and so on and so on. And as you do this, you were actually building up your own form of a single page application. We're basically you're just using an A P I to grab data. Now, this is a fairly complex concept in JavaScript. I don't expect you to know this right away. I don't actually even expect you to know this for quite some time. But it is good to know that this option is out there. You're going to see this quite a bit, especially moving forward in the coming years. Fetch is everywhere. It is a great way to use Ajax requests and just for posterity. Let's make sure that we know what Ajax is. Ajax is a sink road, this javascript and XML, or in this case, it's Jason. So a judge, I guess. Age J A. J Originally, it was designed for XML. So there you quick lesson on Ajax and fetch and promises. We use de structuring. We used a for each loop. We're now getting super javascript e with an A p I. That is super cool again. I do not expect you to know all of this, so don't feel like you should be overwhelmed by all of us. Feel free to give this a shot to tinker around with it? Absolutely. But you know what? If it doesn't click in your brain right away, that's okay. It will eventually. Once you're satisfied with this, let's go ahead and watch the next video. 56. Arrow Functions: in modern JavaScript. There is this idea of an arrow function and really, what this is is a special type of function. This is relatively new and is a little bit different from the other types of functions that we've learned about in this course. So just as a quick little recap, a regular function has a keyword function and then some name, and then either no parameters or one parameter or multiple parameters, and then it returns, return something, it returns a thing. There's also anonymous functions, so you could put that into, like a variable name. So, like Const, Caleb is equal to function. Do some stuff return, Caleb. And then we could always wrap these in and and I I f e and immediately invoked function. So this is going to run automatically, and we could do the same thing here. So that is a quick recap on what we've learned about functions already. Now, in JavaScript, whenever you right to function, just like when you have an object, you have access to the this keyword same thing with a new class and a method inside of it. So you got a basically a funk name here you have access to this same thing in an object, so CONST Person is equal to funk name here, function name here, and you have access to this. And what this really means is it's referring to this function. This means this class, this means this object. So whatever is defining it, that is what the this keyword means when we start talking about aero functions that doesn't exist anymore. So when we use an arrow function, the big difference between a narrow function and irregular function is other than the syntax looking different. It also does not have this this dot whatever name or this dot whatever name function doesn't have that this is not bound. No, The nice thing about that an arrow function is, if that is not bound to your function or the defining object that means faster JavaScript. If you don't have to constantly reassign variables or store things in memory, then your computer can actually run faster. Now it's not noticeably faster for a human, But if you have 10 million lines of JavaScript, yeah, it might get a little bit faster, quite a bit faster, depending on the logic that you're writing. So Let's take a look at a regular arrow function here, So let's just say greet. Let's make that a little bigger is equal to opening and closing parentheses. So we've got our brackets there. Fat arrow. This is why we call it an arrow function and then braces. No, you just say hello world. And to execute this, we could just do greet with parentheses. Let's go ahead. Load this up in our browser. I'm using Firefox. I hit Refresh, and it does nothing. Let's go ahead and run it in here anyways, and it's going to say agreed. The reason that does nothing is because it's returning something. So if we said Const. High is equal to greet refresher page, say hi and it also says hello world. So it's just like a regular function. It just looks a little different at this point. So this is saying this is your function. Name is equal to an arrow function, so there is no this keyword that does not exist in here this dot whatever does not exist and it's just going to execute this now. What if you wanted a parameter in your well, if you wanted a parameter in here, you could say something like the name. Hello. And then let's go ahead and use a template literal. So back ticks. Hello, name and console dot log. Hi Refresher page. And it says, 00 it's undefined. While it's because we didn't put a name in there. So let's go ahead and put my name Caleb. Hello, Caleb. Hello, Zephyr. And so on and so on and so on. We could also put another parameter in here called a place. So, uh, welcome to and then place and they don't have to be name or place. They could be anything you want. We're gonna put a place in here of Atlantis, a place where my cats ever would absolutely hate to be because it is watery. But it says Hello, Zephyr. Welcome to Atlantis. And so this is how we would right in a row function. Now, let's actually undo that last example here. And let's go ahead and just get rid of these brackets. If there's only one parameter in here, we don't need brackets. It's only if we have two or more parameters that we actually need these parentheses in your we only have the one So we're gonna say the function. Greet has one parameter called name, and then it's going to execute whatever is inside these curly braces and so we can go ahead and get rid of that. And let's change this to Henry. And this will just say hello, Henry. Now we can actually get even Mawr slim with us. We don't actually need this in here. If what you're doing is just returning something right away, we can actually get rid of this entirely. And so this looks a little weird, but this is a function misses the parameter, and this is going to return whatever is currently here. And so when I refresh my page, it still works. And then for multiple parameters again, we could just put place in here. Hello. I'm gonna not say anything nice. Interesting place. Make that a tad smaller. So function greet has a name parameter place parameter is going to say hello. Whatever the name is, whatever the places. And Henry is in Canada. And so hello, Henry Canada. And so that is, for the most part, all there really is to an arrow function, and this is really the same as saying function. Greet has name in a place. Return. Well, right. That's the old way. Hello, Name, please. So this is the older way of writing a function with the old way of contaminating strings. And this is the new way of doing it. You're going to see both of these methods all over the place all over the world, so it's good to be familiar with both of them. But that is really all there is to know about the arrow function. That and this dot name is equal to name. And then you could do Consul, don't log this dot name if you wanted to. That does not exist in here. There's just no this key word. It's just not bound. Now let's take a look at how this is going to work in. Maybe a four each loops. Let's comment this out. I got to really change that. Let's comment this out and let's get a list of things in here. So, uh, let's create an array. Let's create a const A r r. Is equal to JavaScript, python PHP. And then in V s code, I'm just going to type for each Nope for each hit tab and is going to say, What's your first array when my raise a R That's this right here and then for each element . This is a fat arrow. This is a fat aero function. So we're saying this element here, whatever this is going to be, we can now work with it. So let's changes from elements to language, because it's going to be JavaScript, python or PHP. And let's do console, don't log language and refresh your page Transcript. Python patri. So there we go. We're starting to actually replace the regular function with a fat aero function. If you don't need the this keyword, you might as well just to use the fat arrow function. It's technically less code and also less burden on your computer. Let's go ahead and create a set time using an arrow function so set time out. This is how we were writing it before, and we're gonna say Wait one second. Well, we don't need to do that now because there are no parameters in here. What do we do? We can't just do this. Instead, we pass it an empty set of parameters and then we say, consul dot log yea, I waited Jascha Python PHP and then, yea, I waited. Let's make that a little more dramatic in here and that's spam. The council just wait for it. I am there It is. Yea, I waited over and over and over again and these are your fat Errol functions. Okay, so I would suggest giving us a shot. You're going to be writing a fair amount of aero functions in the future if you're going to be a JavaScript developer and so you might as well get used to it Now the nice thing is, it is actually very easy to get used to it. One line instead of multiple lines is always very nice. And as always, don't forget I'm here. If you have questions, leave your questions, comments or concerns down Boogaloo and I will be happy to help 57. Adding and Removing CSS Classes: Let's now take a look at how we can add and remove CSS classes. Two elements in our document object model. So in front and Web development we rely very heavily on this class is equal to, and then whatever class names air in here. So maybe we have a class name in here of red, blue and white, I guess where we can change the text color to read text color to blue text color toe white . How do we go about actually removing these? Well, first things first, To set up this demo, we're going to have to create some CSS styling. So style dot red color is equal to read dot Blue is going to be blue. And let's not do White because there's going to be a white background leads instead do black. No blacks not gonna work either, because black is default. Let's go ahead and go with green. Get rid of our classes. Let's go ahead and refresh your page. And yet, of course, nothing happens. We haven't actually added these classes. If we added read, we're going to see our tech cut their text color turns to read. Let's get rid of that and what we need to do is grab this element using some sort of query selector. So let's say we have a const here. H one is equal to documents dot query selector and we just want to grab that age one. Now what we can do is H one dot class list dot ad, and we can add That's a blue. And so this is going to grab the list of classes. Currently, there's nothing in there, and it's going to add blue to it. So let's go ahead save. And as soon as I hit Refresh. This is going to turn blue just like that. In fact, we have h one in here already. We have access to this. We can do H one the class list dot ad No, let's not add Let's remove blue OK, text changes. Again, Let's do H one dot class list dot Add red Perfect. Let's go ahead and add blue as well and we can see when we look at the h one note that it has class red and blue in it. Now the reason that is blue is because of CSS styling. So red came first, then blue was the last one executed. So naturally, CSS is going to say I'm gonna listen to the last rule the last one I was told about. I'm going to use that one. So that's the reason why it's doing that. Had we also said each one dot class list dot add green, which is the last one on her list Down here, it turns green. All right, what happens if you want to add multiple classes? Well, you could do H one dot class list dot ad blue, red, green, so on and so on. This is not going to work. This will probably actually throw you an error. Let's take a look at this. Yep, invalid character error string contains an invalid character. Basically, it says, there's this. There's a space in there and there shouldn't be so Instead, what we do is we pass it an infinite list of parameters. The 1st 1 is going to be blue, and then the 2nd 1 is going to be read now. This is not going to work necessarily because they're already set. So let's go ahead and remove these. Let's remove green and blue and it should turn red again. Green blue. And there it is our CSS. Our H one turns to red and just like that. And so that's how you add and remove. And if you wanted to remove, just as a quick example, once more class list dot ad one parameter blue second parameter green. CSS is going to say whichever one comes last, I'm going to honor the most, So this will turn green, as expected. 58. JavaScript Final Project: all right. It is that time we are going to be working on our final project, and this final project is going to use not everything we've learned, but a good chunk of all the really important things. And so your final project should do this. Whenever you put your mouse over one of these letters, it's going to just animate a little bit. This is going to be a mix between CSS and JavaScript. If you are not super strong and CSS, that's okay. You don't have to make it animate necessarily like this. You could make it have ah, border or change the font color or something like that. It doesn't have to be as fancies. I've made it here. Now, to get started with this, I would like you to create a title. So create some text on your page. I just wrote Final Project for mine. Select the title using your javascript and then you're going to wonder. Split the title by all of its characters. You're going to want to grab every single character in here, and then you're going to want to basically rejoin all those characters with a little HTML around them and Then you can select every character by the class that's around it and add an event listener to each one. So you're going to have to use a couple of loops here. And then whenever you put your mouse over one, you should be able to change the class styling. So add or remove a class again. This is going to require a little bit of CSS. But hey, you know what? If you're not super strong with CSS, it doesn't have to be fancy. It just has to be functional. That's what javascript is. JavaScript dysfunctionality. CSS is beauty, so I've mixed the two here, but we really just need to be focusing on the functionality. So this is my final display. This is exactly what I got here, and I would like you to try to write this out on your own for this because this is fairly complex. Definitely feel free to reference the other videos again, or any of the source code definitely used Google or Stack Overflow or Mozilla's Developer Network, MD end as any sort of reference. You need to get this done, take a much time as you need and try to work through it yourself. So in just a moment I'm going to turn the screen black. And I would like you to pause the video and give this a shot. Try your very best to do this on your own. Now, obviously, if you get stuck, you can just hit resume on the video and you can see the way I do it. I'll show you exactly how I got to this point so that I can do this. So go ahead, pause the video now and give this a shot. All right, getting started with my take on this particular solution. So the first thing we need to do is create a title. I'm just going to use the H one in here called Final Project. So that one's done. Let's go ahead, get rid of that from our list. Next, select the title using JavaScript, so we're going to have to select this title. So let's go ahead and create a constant. Each one is equal to documents dot query selector se locked door, and I'm just going to select the H one. It's the only H one on the page so I can do this. Then I want to grab all the title character's. So I want to get all of these. So let's go ahead and create a new constant here called text and that's going to be 81 dot inner text on that. I want to split all the title character, so I want to grab every single one. And so what I want to do here is turned this into an array. So I'm going to use dot split and we're going to split on absolutely nothing. And let's get rid of that one and that one. And now we need to rejoin each letter with a class. And so we need to loop through all of this text and for every single one in here, we need to put some sort of class around it. So what I'm thinking is spanned Class J s letter so I can select it with javascript something like that, and is going to go through every single one. So there's going to be a span around the F A span around the eye and a l p r o j E C T. And I'm going to also want to not include the space. So how do we go about doing that? Well, we're gonna need to create some new HTML to put in here. Some would create a new variable called HTML, and it's just going to be a blank string for now. Then I want to look through all the text. So this is not actually text these our letters and let's do letters dot for each For each letter that we have, we have a single letter and we're going to use a fat arrow here. And we could just work with this letter. So now we can say HTML is equal to HTML plus span. Class is equal to whatever the classes are going to be. We don't know yet. Whatever the letter is open, I'll just fill that with L for now. And this is what it needs to look like something like that. Now we need to actually put the data in here. I don't want to do a lot of concatenation here. I want to use a template literal, and the letter can just be the variable letter. Now the class in here is going to be letter and J s letter. So letter is going to be what I use CSS to select and J s letter is just going to be a JavaScript selector, So I'm sort of keeping those two worlds separate. Now, at this point, I can select my H one again and do inner dot html is equal to html. Let's go ahead and open up her page and refresh Open up our consul And where is our H one? Look at that. We have a span around every single one with letter and J s letter classes in it. So that's really good. That's exactly what we want. Unfortunately, it also has the space in there. So we have to detect this. So if letter does not equal an empty space, then we can set some sort of classes. Classes are equal to you something. And also let's set class appears classes is equal to by default is going to be blank. And then if the letter is anything other than a space that's also add these classes and yourself to letter J s letter and we just want to replace this with classes. And this is block scoped too. These brackets here So I don't have to worry about this leaking outside of my scope for the for each loop. Let's go ahead, refresh our page. And there we go. We don't have any classes in there Now. There are other ways to go about doing this as well. You could basically just say this with a few extra tweaks, but we're not going to do that. Alright, What's next on the list? We need to add an event listener to each one of these. Okay, So before we do that, we need to actually select every single one of these. Now, these all have one thing in common That is this class. What? They'll have both classes in common, But we're going to use the Js letter selector, so let's go ahead. A green new const Js letters is equal to documents, Dutch query selector all because we want all of them and we're going to select R J s letter . Now we need to loop through each of these and add two event listeners one for when we put our mouths over a letter and one for when we remove our most from the letter. So we are going to create a for each loop, so Js letters dot for each we're going to pass in the node, and the note that we're getting here is every single Js letter element. So this is a note. That's a node. That's a node node node. We're not selecting that one node node node. No, no, no. And no doubt. So we're saying for every one of those nodes grabbed the individual note and do something with it. And it's at this point we can add our event listeners. Let's just scroll this up, no dot add event listener and which one do we want? We want mouse over whenever we put our mouths over the event listener, and it's going to have a functioning here with the event, and that's just console. Log this console log this dot intertek So it's gonna console. Log the letter now the reason we're using function here instead of an aero function Well, we're using an arrow function here, but we're using a regular function here is because we need this. We need this to refer to the node, which is coming from here. Let's go ahead, save give us a refresh. Open up. Our consul and query selector is not a thing. Query selector is a thing. There we go and let's put our most over final project and you can see it's starting to spell it out in my counsel. So that's perfect. That's what we want. Now we need to add another one in here for mouse out, mouse out. So whenever we move our mouse out of that particular element and let's just say out, let's go ahead, refresh and put it over the P out p out de out f out. So that's working perfectly. So now we have event listeners on each one. The last thing we need to do is on our mouths over. The letter should animate using CSS, so we need to add and remove classes here. So here we can do this dot class list dot ad, and I'm going to add a class called Active and on mouse out. We're going to remove this class and let's take a look at how this works. Let's open up our inspector refresher page, and whenever I put my mouse over here, you can actually see that the classes are in fact changing. So now the last thing we need to do is make the mouse over letter actually animate using some CSS. Right now, we can use the class called letter, and if we move over it, there's also a class on there called Active, so we can use both of those together. So I'm going to get rid of this because that's no longer needed. And let's write some CSS first things first. I'm gonna want to change some of the body stuff. I want to change the background color so that it's not just a straight white. Let's make it off white. Then let's text the line center because I want all the text on the page to be centered. Next. Let's go ahead and select letter and let's add some default styling to each letter. Let's say the font size it's going to be pretty big would save 90 pixels. The forint family. I have a custom front loaded in here already, and it is Pacific. Oh, so let's say the font family is going to be Pacific. Oh, or cursive. If it doesn't load from Google, is just going to load something curse of display in line blocks that we could make some of these animations work properly. Let's change the color, too 999 Refresh. Okay, okay. It's coming along nicely now. We need to add an active class, so dot letter dot active. And let's just transform this transform scale 1.5 make the letter just 50% bigger. And that's also rotated, I guess Rotate 20 degrees. Now, let's change the color to something like green. Oh, look at that is getting there. Okay, so this looks a little choppy, but we could fix us up pretty easily with some CSS. Let's go ahead and add a trans ish in transition. We're gonna say all because I'm gonna be a little bit lazy here. Say all of them is gonna take 250 milliseconds to ease in and out. He's in and out. Refresh our page. I am. Look at that final project complete. So let's take a quick look at what I did. Once again, I grabbed the h one. That's this fella here, grabbed all the letters inside of it, and then I split it based on absolutely nothing. So I broke apart every letter in here into an array. I then said for every single letter in that array, let's loop through it and Let's let's a pen, some html toe a string. Now we could have used an array and used dot joint as well. That's another way of going about it. I just used a regular string. We use a template literal in here with a couple of variables that made our cap nation look nice and smooth. Then I said, Hey, when you're done, that change that each one's inner html toe, whatever the whatever came out from the loop. And then I said, OK, well, because there's this Js letter in there for every single letter. Let's go on, grab all of those on. Then let's loop through every single one and in there we have each note. Every single element that has Js letter as a class is its own note. And so this node now has an event listener for mouse over. And whenever we mouse over as the class of active and there's another event listener. So whenever we take our mouths out, it removes the class of active. Lastly, I made it look pretty with some CSS. So just little body background styling there. The letter itself has a larger font size Ah, Custom point family display in line block because we're using a span. So we need to use that in order. Teoh use transform properly, change the phone color, the default font color and gave it a transition. So it's gonna take 0.25 seconds in order to transition in and out of its animation, and his animation comes from its active state. So whenever the letter, whenever there's an element that has the class of letter and it also has a class of active at the same time, we're going to transform it to be 50% bigger, rotated 20 degrees and change the font color to green, done and done. Lastly, we check our council. We make sure that there are no more logs, so we're not consul logging anything, cause that's not necessary. And also there are no warnings. There are no errors. There's no info or debug. Everything looks healthy and happy. We have finished our final project together, and this is my take on the solution. There are again several different ways to do this, but this is using a lot of the larger pieces of javascript that we've learned throat this course and lastly for all you skill share developers out there? I would really like if you could share your code, take a screenshot of this and put it into a skill share project. It will be great for me to see the kind of progress that you're making, but I can also help you out with tips and feedback in support. So don't forget to update your JavaScript project and then I'll take a look at it. 59. JavaScript for Beginners Summary: all right. You did it. You got all the way through this course. That is a really big deal. Make sure you congratulate yourself. Buy yourself something nice. Buy yourself a nice meal. Do something to really reward yourself because you got through over 50 videos of JavaScript and, ah, it's worth rewarding yourself over. Now. We did learn a lot of JavaScript, but honestly, this is just really an introduction to JavaScript. There is a much bigger JavaScript world out there, including things like node package manager NPM or frameworks like react and view dot Js or libraries like slick dodge. As for creating amazing care cells or J Query for basically creating and writing JavaScript that is backwards compatible. So you don't have to worry about JavaScript not working on older browsers. There's also a lot of tools out there that you can install with, like node, package manager and node.js. And it can compile your javascript into what I call dummy JavaScript, where basically you, right fancy modern JavaScript, and it compiles it down into a different file that older browsers, like Internet Explorer 11 can understand. So if you're loving the world of javascript and you want to keep getting deeper and deeper into it. Your next bet is probably to keep learning JavaScript. So if you were interested in continuing toe learn javascript and becoming a really, really strong, powerful JavaScript jet, I then you're probably going to want to start learning some more of the advanced things get into the real nitty gritty details of all these different things that we've learned all the different methods that you can use on, like strings and arrays and things like that. All the different event listeners, right, more classes, things like that. And then you're gonna want to jump into probably some note package manager so you can use other people's code in your projects and then maybe start learning some reactor view dot Js and you've your goal was to learn javascript so that you could be a front and web developer . Well, you now have enough skills that you can actually go and apply to be a front and Web developer. You know, a lot of JavaScript right out of the box. And that is a very strong head start. Once again, congratulations on finishing this entire course. Yeah. Please make sure you do reward yourself. It is really important for you to reward yourself for all the hard work that you've done. My name is Caleb telling you can find me all over the Internet. But more importantly, if you have any questions, comments, concerns or feedback, you can always leave them in the comments section down below. I read everything that comes in, and I try to answer everyone in a timely manner as well. So, once again, thank you for taking this course. I hope you learned a lot. I hope you had a good time learning some JavaScript. You got some good hands on experience, and lastly, I would love to see you out in the world. So don't forget, you can join the Facebook group, the learning to Code Facebook group. You can always just leave comments or questions down you low. I read everything that comes in and try to be as helpful as I possibly can. And I hope you had a good time in this course.