JavaScript Essentials: From Nothing to Ninja

1. Welcome: Hello. Welcome to JavaScript Essentials. In this course, you will learn how to become a front and JavaScript developer. You should already have some understanding of HTML and CSS, but if you don't, that's OK because it's not technically required. This course was designed to help you break into Web development as a career, so you'll be learning transferrable programming skills such as try, catch, functions, classes and inheritance. But you'll also be learning all of the JavaScript basics as well. You can take the skills from this course and apply them to other languages in the future, such as No Js python and PHP Plus. You'll learn about the strange bits and JavaScript to including hoisting scopes and closure . And while you're going through the lessons, there are to small projects that will give you working experience with real JavaScript code . This way, you don't enter the market blindfolded and empty handed. The lessons come with downloadable code examples and lessen assignments so that you can get hands on experience with again really JavaScript code. As a bonus, you'll also learn some es six as well. Nearing the end of this course, we will talk a vote five ways that you can make money while learning to code as a junior or intermediate developer with very little skill and how you can break into the Web development industry. I'll also be providing you with some direction in regards to what you should learn after this. JavaScript essential scores. Some people say you should learn Essex React No Jake weary, angular python PHP, ruby, etcetera, etcetera. That's just way too much, so I'm going to provide a little bit of clarity for you. Now, in this course, there's no magic fluff. In fact, I'm going to be sharing some of the secrets to becoming a successful Web developer that no other teacher wants to admit. I've never heard another teacher admits anything like what I'm going to tell you in this course. And in fact, the first secret is that Web development is actually more than just writing code. Hi, I'm Caleb, your JavaScript essentials teacher. I'm a full stack Web developer of online and structure. I'm an entrepreneur, and I've taught tens of thousands of students in just the last few years. Have encoding since 1999 and now I'm passing my JavaScript knowledge on to you now here. Just a few things that students tend to appreciate about me. My direct way of teaching again. No fluff. How I can break down difficult concepts into simple and easy to learn pieces and how fast I answer questions that they have now. I believe that online learning is mawr than watching videos. You need to learn the coding theory. Absolutely. You need to jog your memory, and you need to practice writing code. So again you get hands on coding experience. Once you finish this course, you'll get a certificate of completion to prove that you've learned the JavaScript essentials. So here's what's included in this course. Full lifetime 24 7 Access to all of the HD videos, a certificate of completion, access to our support group, downloadable code examples, coding projects and a final exam and a 30 day money back guarantee. Meaning If you don't learn anything from this course in the first month, go and hit refund. Get your money back. So what do you say? Are you ready to become a JavaScript developer? If you are, then click the enroll button 2. Introduction: Hello and welcome to Javascript Essentials. In this course, we're going to be learning the basics of JavaScript. If you're looking for a course on Yes, six. This is not it. This is more of a beginner course on a few of the things that we're going to go through. They include internal vs external JavaScript files. Where to put your JavaScript in your HTML file all the way down to variables. Common assignment, string manipulation operators. If else try catch query selectors for selecting your HTML inside of your d o m changing values of the inner HTML What hoisting is functions. Anonymous functions were going to get into a raise objects, loops. And we're going to start talking about changing CSS styles with selectors classes with different methods. Like what? Our classes. What makes javascript object orientated? We might dive into a little bit of E s six JavaScript. Things like Consulate Anvar or Errol functions nearing the end of this course, we're going to learn about frameworks, some really awesome JavaScript libraries that will make your life just so much easier. And I'm gonna show you how you can make a little bit of money by writing JavaScript through this course, there's going to be a couple different projects. They're not going to be overly extensive. They're not going to really make your brain sweat. But they are going to be great practice. And it's only ever going to consist of things that you have learned in this course. So we're not going to assume that you already know other JavaScript from another course. We're not going to assume that, you know, CSS three transitions and animations or anything advanced like that were purely learning JavaScript here, and this is going to get you really rolling as a JavaScript developer on the front end of any development website. All right with that said, Thank you for attending this course. If you have questions, definitely leave them in the comments below. Don't forget to join the Facebook group. The link will be in the comments below or it will be in the next lesson, and I look forward to seeing you soon 3. What You can Expect: Hey, everybody, welcome back Before we begin, What I really want to talk about is what you can expect in this course. There's some courses where it's just video courses. Ah, and it's a teacher talking at you, and I've made those courses before, and this is no longer acceptable at so. I want Teoh just sort of set the expectations for what this course is and what you're going to be able to get out of it. So the first thing you can expect from this course is code examples, right? Everything that I am going to be writing, whether it's in sublime or right in the browser, I'm going to give you these code examples. So what, you can expect code examples. The second thing you can expect is I don't want to call it home work, but they are sort of assignments. It's a way to practice everything that you will be learning. So we're going to go through 10 15 20 quick little courses and you're not going to actually do a lot of homework in those. But at the end of that module or at the end of Siris of videos, we are going to have a little assignment. The assignments are not going to be difficult. They're not going to hurt your brain. They're not going to stress you out. They are purely designed to practice what you have been watching in the videos and feel free to always go back and use any sort of interactive code examples again. So Number two what you can expect assignments. The third and last thing that you can expect from this course is access to our Facebook group, and this is a Facebook group of developers. It's been up for a couple of weeks already on there's over 500 developers. Perhaps by time you're watching this. There will be thousands of developers in this group, but it's just a simple Facebook group where people can go and ask questions. So whether you're watching this on any platform, you can come and join our Facebook group and ask your questions in there were happy to answer them. We're happy to give you support. There are again hundreds, possibly thousands, of developers that are willing to help you out at any given time. There's no additional marketing. You don't need to sign up. You don't need to give your email or anything like that, it's just a great place to go and ask your questions. So Number three is our Facebook group. You can do a search on Facebook for learning to code. That's what the Facebook group is called. I'm going to create a link and put it in this document where you can download this document can view it. Ah, it's also going to either be in the comments or in additional downloadable content so you can find the link in there. Or you can just hop on Google type in learning to code, and you should ideally find that Facebook group. 4. Where To Put Your JavaScript: Hey, guys. And welcome back to Javascript. Essentials In this lesson, we're gonna quickly go over where you should place your JavaScript. Now, there's a lot of debate about if you should put your JavaScript and head of your HTML or in the body on your the top or the bottom of your body s. So I just wanted to quickly go over when you should put your JavaScript in which area First part is our head. So this is where you put, you know, your title, and that's just, you know, basically a she male. We all know that. But if you wanted to, you could also put some javascript in here. Now I'm gonna write some in line JavaScript and you can write anything in here. This is just regular javascript. You don't have to worry about knowing what this is right now, but know that you can put javascript in the head. That being said, I would highly advise against doing that just because a lot of JavaScript relies on the D. O. M. The document object model, which is basically your HTML structure. Now, if you have any javascript that's loading in the head, right, just like CSS, your browser's going to load your page from top to bottom. So if in here your javascript is trying to grab an element that has not been rendered yet in the body, which isn't here, then it's either going to produce an error or it's going to give you unpredictable results . And that really depends on how fast your page can load how fast the JavaScript unload, how fast the user's computers. There's too many variances that we just can't control. So generally speaking, when you have to work with anything that's in the dom, don't put it in the head. Put it in the body. Now there are two places in the body where you can put it so you can have you know, your regular HTML in here, and you can put your JavaScript, you know, in here at the top. And for some scripts like analytics, that might be best because Google analytics, for example, will ask you to put it at the top of your body element and Google analytics. All it is is javascript. Now, the reason that they ask you to put it at the top is simply because it doesn't rely on anything else for a little while. You can take a second. It can load often. It's a synchronous, so it's not going to slow anything down anyways. If you click a button, Google Analytics doesn't necessarily fire at that time unless you doing some custom analytics work. But really, until then, not a big deal. Now JavaScript that you write is most likely going to be working with your dumb. It's going to be working with any sort of HTML that you've already written that your pages going to load, whether that's through python or PHP or no Js any sort of JavaScript that's in your dom needs to be loaded before you can grab it. And that's why you put your JavaScript in here. Now what this has done for me. All they did was typescript tab. That's just a little plug in for the browser that I'm using. I'm using sublime. The plug in is called M it. It's really nice, not the point right now, But what this does is it allows me to quickly type something out hit tab and an auto complete, so you're gonna see a lot of that throughout the rest of this class now in here we have our type Texas equal to JavaScript, which we didn't use up here because our browser knows that this is a script. This is only going to be JavaScript. The only type of Scripture browser can ever run is JavaScript, the front end Web developer. Stack on. Lee ever has three languages, and technically they're not all, actually, languages. You have HTML, which is mark up. You have CSS, which is, you know, essentially mark up, although it's getting a lot more complex these days and you can start adding variables that's not quite inspect yet as of mid 2017. But variables are coming. That's going to be very cool. And JavaScript, which has probably made the most progress since it was born over 20 years ago, getting a little off track here. This bottom part here, where it says script type is equal to text slash javascript we want to put SRC is equal to javascript dot Js And all this does is say, Look, Mr browser, whichever one you are, you're going to load a script for me. Load this one and inner javascript Js file. We do not need to have our script in there Now, moving forward. We're not going to actually write any JavaScript in line on our page. We might do it in the browser when my do it in code pen somewhere a little more interactive , if I have to. I'm going to use a blind, but generally I'm going to try to stay away from that. Uh, the reason for that is javascript is meant to be interactive. And I think teaching in amore interactive environment is going to be better for the overall learning experience. So to quickly talk this off, where should you put your JavaScript? Well, if you're uncertain, always put it just before your closing body tag. Don't put it in the middle of your page. Don't put it at the top of your body tag. Don't even put it in your header. If you're uncertain, put it at the bottom. Now, if you're using ah library like J query, which you may or may not be familiar with at this point, But libraries should always be loaded at the bottom unless specifically told otherwise. There's some frameworks that so yeah, you know, load your javascript library and it'll look a lot like this and just move it into the head of your script, and that's that's fine. If they tell you to do that, then absolutely do it that way. However again, if you're uncertain, just take your entire script. Are the scripts HTML line rather, and just throw it at the bottom of your page. This way, your page can load everything. Your browser can load everything, and by time the JavaScript is ready to render all your html is there. The only thing that's going to be missing is the closing body tag and the closing HTML take , which JavaScript generally does not care about. It just wants opening tags, generally speaking, so that's that, uh, quickly wrap up. You don't put your job script put at the bottom of any page. If you have to write any in line JavaScript, right, put it at the bottom of your page as well. Again. Let that don that document object model load 5. Variables And Data Types: Hello. Welcome back. Today we're going to be talking about the dreaded variables. Variables actually aren't as bad as people think they are when they first start programming . Variable is really just a way to hold information and a way that's little easier to memorize. The tricky part comes when you start talking about different data types now data types of something we're also gonna talk about in this lesson. Budge for the time being. Let's just stick with a regular variable, right? So variable looks a lot like this. You declare with far or in JavaScript you don't necessarily need the bar. However, just for learning purposes, we're going to stick with far. And we're going to say name is equal to Caleb. Now, this is what declaring a variable. Looks like you have your declaration, you have your variable name is equal to just one equal sign. That's important, and we'll talk about that in a later lesson. And then in here we have apostrophes, which could technically be replaced by quotation marks. Same thing, and it ends in a semicolon. Now the semicolon javascript is completely optional. You don't you don't need to have it there, but If you're going to write some clean code, it's a good idea to have it there. There are some standards out there that prefer, if you have it again, not really necessary in the future. If you're going to be writing a programming language like ah Ph. B, for example, every line in PHP has to end in a semicolon. So getting in the habit of writing a semi colon versus not writing the semi colon is a good idea. No, if you choose toe learn python in the future, Python does not end in the semi colon. It just has blank line. In fact, Python looks a lot like this now. This is not a python course, but I'm just showing. You are demonstrating that there are different ways to do this. Moving forward in this class, we're always going to have a semicolon at the end of every line. It might miss a couple here there, but JavaScript is not strict enough to complain about that unless there's obviously a good reason to, uh, but I always try to put a semicolon at the end. Now, for this lesson, I'm actually going to do a little bit more inside of the browser itself so you can see that you can actually write JavaScript inside of your browser. I'm gonna create a new file. I was gonna call it index dot html. Okay, so I have my index dot html file, and all I did was add some basic HTML structure. We're not gonna write javascript in here. I'm just going to go ahead and open this inside of chrome, though. All right? So in Crumb, there is absolutely nothing fancy about this. All we're going to do is right. Click and go to inspect. And you can do this in pretty much any browser. And I was gonna change us to be on the right. And in here, we have elements, council sources, network performance, memory, etcetera, etcetera. What we want is Consul and right in here, you can actually take a JavaScript right into the browser. So if we say variable name is equal to Caleb and hit, enter, it says undefined in all. Honestly, it's lying to you. It's not undefined. So if we go ahead and type name, we get Caleb. Right? This is a variable. That means that the variable name and Amy has a value called killed. Now, if you remember back to your math days where AH, your teachers say, find the value of X and X would be nine or 3.14 Some number right? Those are variables. Now, don't get discouraged. This is really as much math as we're going to be doing for quite a while. The math in JavaScript does not get very extensive unless you want to get into charts or animation libraries or anything like that. But for what we're doing, the math is super simple, so you don't have to be afraid of that at all. Now there is a difference between different types of variables. For example, variable age. I could say 27 right again. I hit, Enter says undefined. But if I type page, it says 27. But what happens if I type variable age to write? Tries to auto feel for me? You can see that age two is equal to, and I put it in quotations. If I put this in quotations again, says undefined. But if I say age, too, the difference is that one is just a number, an integer, and the other one has quotations around it. Now that is a pretty big difference. And this is the difference between a data type. Don't be concerned with memorizing all of us. We're going to get a lot more hands on with this a little bit later. And for the time being, you really just need to know that there are different types of variables of their different data types. So what we have experienced so far name would be a string. Now anything with quotations around it or with apostrophes around it is called a string. If it doesn't have quotations, it's a full number is called an integer. But what if we have Variable pi is equal to 3.14 something something, something right and we type high again. Now this looks a lot like an integer, but technically it's not an integer. Well, I mean it is, but because it has a decimal point in it, it's actually called a float. Now, afloat is basically just a number that has a decimal point, and if you remember back to your math days, free coin zero is the exact same as three. However, when we're talking about being the exact same in programming. 3.0 is not the exact same actual. Let me take that different. It is not in the exact same is three. This one here just three is an integer and 3.0, is that float? Is that incredibly important at the time? No. On maybe throughout your JavaScript future as a JavaScript developer, it might never come up. However, when we get into comparisons, how do we compare if three is equal to three? Or if something is true or false, right? Those types of comparisons were going to get into those, and all of a sudden this is going to make a lot more sense. So just bear with me for the time being. It's important to know this now. We're getting a little ahead of ourselves, but it's very important to know. Now there's another one. As you can see, actually, I hit Enter. Just make a new line in says false. But if we did, ah, three is equal to three. That's true again. We'll get into that a little bit later. There's another type of data out there. Ah, data type called No eso. We could just say variable. We'll call it something. Ah, and actually, it's not know this has been defined. Um, but the value is undefined. And so we see this everywhere else. Technically, this value name is not undefined, but something is undefined because we didn't write. Something is equal to something else, which that actually would have broke because there were no strings. Now, when we are declaring a variable as a string, we have variable string. We have to have quotations or quotes around. It doesn't matter which one as long as they are the same. So you open with the quotation, something you end with a quotation type string. That's the variable name that we type that we declared. And we get the value. I'm going to go ahead and clear this now what happens when we try to declare a string without quotations or apostrophes? Right? We do variable. Something else is equal to, and we could just write anything that would be a string, right? So it's not a number, it's not afloat. It's on object or array will get to those. It's supposed to be a strength like a sentence, but it doesn't have quotations around it. So we say hello My name is Caleb, and we get a syntax air unexpected identify for identifier. And that's because something else thinks it's referencing another variable technically called hello. And the space breaks the whole process. Now, when it comes to declaring a variable, there are lots different ways into it. You can camel case, right? So camel casing is you start with a lower case letter and every word. After that put together into one. Long word has a capital camel casing or, for example, Hello. My name is Caleb. That's camel casing. I'm just gonna make that bigger. Actually, there's another way. Teoh name your variable variable is and you can use underscores. Hello. My name is Caleb. No, you can't actually see that. There we go. I have underscores in there is equal to test. Now. Why does this bring up the string? When I defined it here, but in previous examples, it always it always said undefined. But the reason it was undefined was because we were using var and var has a a hoisting mechanism on. And I think that's going to something we talked about in the future. Just because hoisting is sort of unique to JavaScript. But it's just one of those things that's good to know, because eventually you're going to run into a problem where it's like, Why is why is my anonymous function or why is my variable not being defined? Or why is it being defined? But it has nothing in it yet that's called hoisting. We'll get into that later. Don't worry about that. Going back to naming conventions, you could name any variable, literally anything you want spelled that wrong. Anything you want. However, there are some exceptions. Do not write a variable like don't start a variable name with the number in most languages . That's not allowed, not to mention it's bad practice. So don't say for something or 40 year old right, that's that's not good. Don't do that in JavaScript. You'll see a lot of variables that start with an underscore. Totally acceptable. That's fine. Also, do not use dashes. No dashes, so don't use dashes. Ah, in fact, don't use any other punctuation, either. It's unnecessary, so don't use dashes is equal to see. It gave us an air uncut syntax, air invalid or unexpected token. What it thinks right now is that this is being escaped again. Subject will talk about the future. No important right now. Ah, and also thinks that this is the variable essentially, and it can't figure out what's going on after it or why there's a slash there, so it throws you in there. 6. Don't Forget To Rate This Course, Please.: Hello, It's me. I'm the voice behind the videos. Just a quick reminder that if you've enjoyed any of these videos so far, you can follow me on skill share. But more importantly, you can actually rate this course. And just by simply reading this course, that actually helps me out a lot. It's super easy and super quick only takes a couple seconds, and I mean it really would mean the world to me. So if you've if you've loved what I've been teaching you, if you like the style of my courses, give that a good old thumbs up, Um, and let other people know what you fluffed about these videos as well. Cheers. 7. Variables And Data Types Part 2: Now there's there's another one I want to talk about real quick and again. We're getting quite a quite a bit ahead of ourselves. But again, these air good to know, because we're going to be practicing these in the future. And they're going to make more sense once you actually start writing some code. So we have objects. We have a raise. We have undefined. We have no, I can't float and strings the next one. I want to talk about objects se o B j is equal to and it starts with a curly brace. Angela Curly race or bracket. If you want to call it that you have some sort of key. You have some sort of value. You have a key to Oops, another value. Notice how these all look like strings. I hit enter and it gives me an object, and that's something that we can actually use here. So the proto don't worry about this. That's a lot of JavaScript functionality that comes with the object data type. We're not going to modify these or add any of these What's cool about O. B. J. And this is where the power of object orientated programming comes in is weakened, type will be j dot and automatically we have key and key to in here. So if we type o b j dot key, that's the value, right? We said key is equal to with a colon value. But we also said O b j dot key to is another value. Let's just capitalize that and I'm gonna show you that you don't necessarily need to have your key in a string se 27 points eight or whatever that would roughly round Teoh I hit enter and again I've got name and age. Even if you noticed up here when I had the key as a string, it automatically turned it into a key eso that's basically a string or like ah, variable name without the quotations around it. It's unnecessary in an object, and so an object is a way of storing variables inside of other variables. But then you can name them as well. So you have all of these different data points inside of one variable. Now this is really, really powerful when it comes to storing information about one particular data object. It clears this and let's create a person object, right? We have person is equal to object. Uh, let's say the name. Okay? We're going to create a person object for myself. Age. We did this already, but this is This is a different object because we call it. We're calling it person. Ah, and I don't know what what is my favorite color? Maybe. Right. We're gonna say red. So I take that in hit. Enter. The consul in our browser has now stated that Oh, yeah, this exists. So now I can type person dot name like that. That's my name, person dot age. If I take that right, that probably would have worked person dot Age Knocking Alliance A little bit embarrassing . I take the word page so many times that I guess it's just habit person dot Pitch, uh dot age There we go. Third time's the charm and ah, let's try a person Don't color. We have red Beautiful. But what happens if we just type person? We get the whole object, but we can't use that in a page. And again, we're gonna get some hands on experience of that in the future. But right now, it's just good to know that and we can store multiple data points inside of one object. So you could have your friend. Kyle, for example, is equal to an object full of data points. And now you don't have to remember. Uh, you know, 200 different variables. You can just remember that every object named Kyle were person or whatever you want to name . It has thes different sub variables that that's a good way of putting in some variables inside of a variable. Now, when we talk about a raise right, we had remember we had objects and we had a raise. That last one was an object, and array is a list of variables. Now it's different from an object because the object very specifically has person dot name or person thought, whatever variable you give it. Whereas an array is simply a list. So we could say friends is equal to, and we're just gonna create Honore this way. We use too hard brackets, and inside of it we have a bunch of strings or, uh, since or floats. Basically, you just declare a bunch of variables in a list that's all separated by commas. Very simple. So let's go ahead and delete that. And my friends were going to be Nathan Prairie and Zephyr. I hit Enter, and this gives us something a little bit different. We haven't seen this one yet. We have 012 These are the keys. And it's sort of like an object, but we can't really rename these keys. If we did rename them, essentially, we'd be working with an object is simply a list. No, we saw right here. Zero is Nathan in computer programming. When we start counting, it always starts at zero. So zero is actually 11 is actually 22 is actually three. Only in human language do we start counting at one. But computers, they started zero. So if I type friends and curly brackets to not currently bracket sorry. Like these hard brackets that's selling JavaScript. Okay, so I'm looking for a friend's array, which is what we wrote up here. And I'm looking for the very first piece of information that's in there. So if I go ahead and hit, enter what should come back? Is the name Nathan just as we expected? Now, if I type friends too, what do you think is going to be returned. If you think the name Zephyr is going to be returned, you're absolutely right. Now, here's a tricky one. What happens when you take friends? Three. We know that three doesn't exist in here. So what is going to be returned? Undefined. No. Javascript. If you were trying to access a variable or data point that does not exist, it's going to be undefined every single time. And we can see this as being a true statement. Uh, let's actually take that correctly. Friends three is equal to undefined. If this turns out to be true, as in friends three, the third or the fourth item in this array does not exist. This is going to pop the little word true underneath. Just like that. So now you know about objects you know about a raise, you know about strings inst into his short for integers and floats. Oh, and allied on and when to find him. Now, these are just variables. The way I declared them in here is the exact same way that you can declare them in your javascript. Whether that's your internal JavaScript on your page variable. ABC is equal to 123 it's the exact same way. Or if you're in just ah regular Js file, you could say age is equal to 27.8. We know that you know this is afloat because it has the decimal point, and we know that if we remove the decimal point that there's going to be that this is going to be an integer now, what I would like you to dio for. Ah, just a little bit of practice. There's there's there's no homework here, but I would like to you to get a little bit of practice, so just open up a blank index html for a logical index. Could be any HTML file. You could actually be any page anywhere. You can open up Facebook if you wanted to. Right click to go to inspector. Inspect elements to depending on the browser that you're using. Go over to console and just start typing. Some JavaScript declare some variables. So declares a variable. Uh, my age is equal to whatever your age is. You know, if you're 15 or if you're 45 hit enter. Just see what happens and then type, and you can type your integers your floats your strings. You can see if there are any errors. You can sort of learn what works, what doesn't work. And while you're doing that, type here your variables in and see if it turns out if it spits out exactly what you are expecting. And if it's not what you're expecting, well, then you can figure out why you can ask why and remember if you have questions asking our Facebook group, what I would like you to do is create an object, create an array, remember and raise just a list. Create one string one integer and create one float. Do that in your console, and you will be very familiar with variables. Ah, we're going to get into comparisons little bit down the road, and that's when these variables are are going to really come to life and you're going to be able to see things and other. This lesson right now is, is a little bit dry. It's not super exciting or anything. Um, this is a fundamental concept, pretty much every programming language, and it's really, really important to know how these work, because this is transferrable. What you're learning in this lesson is not just javascript. It works in PHP and python in node. In every other language there are they're basically objects of race strings, integers and floats there, actually a bunch of other ones, depending on the language that you're writing. But these are the most common ones that are completely transferrable. So it's really, really good to know how these work. So, uh, go ahead, give that a shot. If you get stuck, ask questions. We're here to help. Otherwise, I look forward to seeing you in the next lesson. 8. String Manipulation: Hello. Welcome back in this lesson. We're going to be talking about string manipulation, which basically is. We take a string usually in a variable on a string type in a string data type, and we change the value of its dynamically or we get some sort of information from it. These air basically, these are called methods again. Because javascript is an object orientated programming language. We use this thing called dot notation that allows us to access functions that are attached to strings or objects or a raise. Things like that. So this example, what I'm going to dio is just create a very simple string and I'm going to call it str is equal to And we could feel this with anything. So if you're following along, if you're typing along while I'm doing this to feel free to answer anything in here the blue blanket is sitting on the desk, but nice and simple. So when we take that back, str we have the blue blanket is sitting on the desk. Nothing fancy. We know how to do that. Caleb, this is boring. I know, I know. Let's go ahead and see how many characters are in this. How many letters are in us? So we type str dot length and you can tell that a browser is telling us that the length has to be from a string here. Right? Or the lease is coming from this drink. We type enter 39. There are 39 characters in here, not including the quotations, quotations, or simply to show you that it's a string. Now, why is that important? Well, because one day when a user input some sort of information on your site, for example, Twitter, where you can only have 140 characters, it's important to make sure that their sentences or their tweet is only 140 characters. And this is the first form of validation. They would say. If the tweet is a tweet, length is less than or equal to 1 40 Then they can go ahead and execute some or code. So now that that's just finding the length. Pretty simple stuff. But what happens when we want to find a string inside of a string? So let's say we're looking for the word blanket. How do we find that we could rip apart every single word and compare it in a loop and it gets way too complicated. Things that you don't even know about yet really are completely unnecessary. At this point, we could try this string dot index of and let's put the word blanket in here. Nine. What nine means is that at the ninth letter in this sentence is where the word blanket is found. So we have th e and the word blue together that seven plus the spaces to spaces before the letter B in blanket that totals nine. So that's that's where the word starts. Now, if the world does not exist, what happens if we type string index of and let's take the word red? Because there is no word red in in our string. We get minus one, so if something does not exist, we have minus one now. Do you think this is case sensitive or case insensitive? We haven't talked about this yet in JavaScript, so I want to know what you think. Is this case sensitive are case insensitive? Let's go ahead and test this out string index of and let's take the word blanket, but with a Capital B. So it's different from this one. This one has a lower case. Be this one. Has an upper case be? Let's see what the difference actually is. When I hit Enter does not exist now. That in itself could become very problematic because you're not going to check every possible variation of the word blanket with different capitalization on different letters. That's it's not impossible. It's just a lot of work. And that's something you definitely want to stay away from. Programming is not meant to be a lot of work. It is meant to be nice and simple. So what do we do? We take string and we can turn the entire sentence into lower case or the entire sentence into uppercase for what we're testing here. It doesn't really matter. We just have to change what we're looking for exactly. So as a first example, let's change this to lower case string dot to lower case and you have these rounded brackets. Here's these parentheses. Now these parentheses means it's running a function or a method, and you see it here to this one Takes takes the parameter of blanket red blanket again. This one dot length is not a method that comes when a string is formed. So it's actually a data point inside of it. And now you can tell that string is technically not a string. But it acts a lot like an object, just like when we wrote in the last lesson that name or a sorry. The person object has a name and an age and a favorite color, right? And we said person dot name or person dot age This is string dot length or string dot whatever that other value is going to be very object orientated here. No going back. For example, String to lower case changes everything toe lower case. Well, there's only one letter in there, so this is actually a very bad example. But the first letter that was capitalized is no longer capitalized. Now what happens when we type str It's back to normal now why is that? It's because it took your string, your sentence eternal lower case and return to that value. We didn't start that in another variable, so let's type str Lower is equal to us. Urata too lower case. And this is just a simple variable name. And that's in Camel Case and str lower and now we have the successful at any point time because we've assigned another variable now if we tried. Str lower dot index of And instead of typing blanket with a capital B, we know that all of these letters, every letter in the sentence is going to be lower case. We also check lower case. It gives us a positive number that means it exists. Or rather it gives us a non negative number and that means it exists now on the inverse. We can try this string. Upper new variable is equal to string dot to upper case now we could use string or we can you string lower. It doesn't matter because it's going to take all the letters and turn them into uppercase letters. Capitalized everything. So let's try this. As you can see, the blue blanket is sitting on the desk and now we have all uppercase letters. It's exactly what we want because if we did strength dot index of and we typed blanket in all caps, that still doesn't exist because str it's set to be the proper way. It is still is still the same variable. Now we can override this and variables. The beautiful thing about variables is, is you can override them and basically any point in time Now it said the over arrow to get my last commander. And if I type string upper dot index of it's looking for a blanket in the string uppercase string uppercase. We turned the lower case version to upper case. So it's trying to match this blanket with this blanket and it found it at the ninth character. Now that's how you find a string inside of a string. Is that important? In a lot of cases, Yes, that's very important. You're going to want to find strings inside of strings. That is not an uncommon task. I know again, not the most exciting thing in the world. And we haven't even started really modifying anything on the D. O m. The document object model, which is our webpage. So we see on the left. Here we have this big white box. Nothing has changed, and that's fine. We need to learn the principles before we can get to the fun stuff. Thankfully, the principles of programming don't actually take very long to learn, and the more languages he learned the easier it is to pick up other languages and again things like index off. While the function might be different in other languages, the concept of trying to find a capitalized word like this one blanket in a string that is all capitalized is the same across every language. Now I'm going to clear this type str again so that we can see what we're working with. What if we wanted to change? Str uh, to instead be the blue blanket is sitting on the desk to just be a fragment of that. Well, I don't want to overwrite this yet because I'm still going to be using the str the string variable. So instead I'm going to write ABC because I don't care what the variable name is at the moment. Str dot sub string You know, we've two methods here. We're going to stick with 1st 1 sub string and this takes two parameters were to start and where to end now where should this start? Well, if we want to start the very first letter that remember, this is the 1st 1 and that's how we talk in human languages. But in programming languages, The first is the number zero comma and then our second parameter And where do we want to get? Well, we knew from the previous example that this year was the 1st 9 letters. We could also count that out if we wanted to. What if we wanted to get Ah, from you know, the blue blanket is sitting on a desk from the blue blanket to somewhere in here. Now I'm going to put in a random number. I'm gonna put no found into this just to show you how this works. We know that this is 39 characters long because we did string dot length and we got 39 hit enter and I get the blue blanket is in fact, actually, I wanted to be a little bit longer eso and said, I'm going to overwrite this, and I'm going to put it as 29. Dario, the blue blanket is sitting o So we have from here all the way. Here is 29 characters and we can see that when we when we sub string 0 to 29 0 no, you don't have to start with zero. You can dio sub string and let's start at 10 and go to the next 10. So this is going to start at technically letter number 11 and is going to get the next 10 after that. How we get blanket is Look at that. So that's sub string now. Is that important? In times? Yes, that's very important. At other times, that means there are other methods to do this. You can also use string dot slice. Let's check out what slice does 10 and 15 so entered string dot slice and it starts at 10 and it's going to end up 15. The differences sub string starts at 10 and gets the next 10 whereas Slice starts at 10 and ends at 15 starting from zero now. Both slice answering don't require two parameters. They just need 11 is mandatory. So I said, ABC is equal to you. String out sub string. Ah, let's start that one at 12. It's going to start at 12 witches right there, and it's going to get the remainder. And if I typed, ABC is a new string. That sub string a negative number, let's say minus 20. It's going to start here and work its way back now slices going to essentially do the exact same thing. If we type in slice 15 it starts at 15 goes to the end of the string or string. Dodd slice minus 15 starts in the back. Clear that again and trade what we're working with now, just a minute ago, when we said ABC is equal to string dot sub string, whatever the value was, we over wrote ABC over and over and over again, and that changes value over and over and over again. So that demonstrates how variables from a previous lesson are easily over written. All you have to do is take the same Grable name is equal to something else, and you overwrite it. Now what happens if you want to replace a string inside of a string? Well, JavaScript is pretty straightforward, so we just use dot replace and we look for a word again. This is going to be case sensitive. We know that JavaScript case sensitive from a previous example, and instead of using Blue Blanket, let's Tight Pillow so replaces looking for the word blanket, and it's going to try to replace it with the word pillow. What happens? The blue Pillow was sitting on the desk. But what happens if the word is not found? What does it return? Eso. We don't want to look for the word blanket and said We want to look for any other word. Let's look for a car and replace that with pillow. What happens? It just returns your string because nothing was replaced. It's just going to replace your string inside your string and return the entire thing back to you. Now here's one more thing is with strings. We can concoct. Need them. That means to take one string, one sentence and a pen just to another string or sentence. 9. String Manipulation Part 2: Now here's one more thing is with strings we can concoct. Need them. That means to take one string, one sentence and a pen just to another string or sentence. Let's type, uh, intro, as the variable name is equal to Hello. My name is, and that's always going to be. And I'm also going to create another variable name, Kayla. So now we have intro. We have a name. How do we put these together? This is a process called concatenation or Can Cat for short to merge Lee strings. Together, there are various different ways to do this in JavaScript were the most popular. One is to use the plus simple. So let's create a new variable and called sentence is equal to intro plus name. Now this looks like it's math, but it's not. And this is why data types are very, very important. When we add a string together using this plus symbol, we're not actually adding anything together. What we're doing is we're joining them together. So if I hit answer on this, we should get Hello. My name is Caleb. Just like that. Now, any time I type sentence, the variable sentence we get Hello. My name is Caleb. Now, Why did that happen? Why? Why is it when we type 12 plus 20 we get 32 only type hello, plus something emerges the sentences together. The strings are put together Now, in the last lesson, we talked about data types and I keep bringing this up. And this is why data types are important to know in languages like PHP, PHP doesn't really care too much. It will try to add a string with the number, and it will fail because it's very loosely written in python and javascript in node. That's unacceptable. Thes are more strict languages, meaning that you can only add integers with integers or introduced with floats because you can add numbers with other numbers, but you cannot add a sentence with a number. It doesn't work that way. When you add one sentence with another sentence, it becomes one long sentence. What happens if we try to apply some other math? Let's type Put the word long in here and multiply. Multiply this by 20. We get this beautiful little thing called any and not a number since for not a number. Now, why do we get this because you cannot multiply the word or the string long, 20 times. You can't multiply letters, numbers they don't mix. It's like oil and water. They just don't mix. Unfortunately, And so that's why learning your data types is very important. Because if you ever get this now, you know that one of my variables is probably not an integer or is not afloat. And for that reason, I need to change something. You know, we might be getting a little ahead of ourselves here, but I want to show you one more thing. Type number, actually change that name. Uh, the numb is equal to, let's say, 500. Sorry, 315. We know that's a strength against as quotations around it. What if we did? The num times 20 JavaScript is smart enough to realize that in this string is actually a number and it did the multiplication for us. So that's acceptable. But what if Mr overwrite this? The number is equal. Do 315 is the number. So now we have a new string in there. We type the numb times 20 again. We get not a number because javascript looks at this as a whole and says, OK, well, I know there's a number in there, but this whole thing is under numbers. That's unacceptable. So I'm gonna throw you a new little error. We're going to return the value called Not a number to you Now if you wanted to actually be quite the stickler with your data types, and this is a very good thing. If you wanted to be very clean with your data types, I would say by all means go for it as long as it doesn't make your code too bloated. So if we go back and we say the number is equal to 315. But that's in a string. And we wanted to convert that, because if we type, the numb now is still in a string. But if we said the numb is equal to number, the number, we're just passing a simple variable in there. We're actually passing itself type enter. Now we have trust a number, and you can tell because there's no quotations. The color even changes, not red. It's blue now, and every time we type the numb its 315. So that's a quick way of parsing, I guess your strings that are only holding numbers into a legitimate integer. I'm gonna go ahead and clear this and we're going to do one more example. We're going to turn a string into an array three type string or str. We have our original string. We've never over it in this, and if we put in a new variable was called a are are short for array is equal to str don't split. Where do we want to split this? Well, we want to break up each word, so we're just going to put a simple space in there. And what this is going to do is it's going to break on each little space inside of this string and everything in between. Each space is going to be an array value I hit. Enter. It gives us eight and now we can do air dot Length is eight. There's eight pieces in here. Eight different words now a RR dot length. We know this from string string dot length gave us how many letters are in it, but a ray gives us how many different objects are objects is a an ambiguous word, but it gives us how many different pieces are in this list. And in this we see that there are eight. So now if I just type a r r, I get, uh, all of these together. And if I wanted to put things back together instead of using split, we use join, creating a variable cold air join and type a r dot join And what do we want to join it on? What is the glue that we want to put this broken sentence back together with? Well, we could put it back together with a simple space or something, but let's do something a little more creative. If we use a dash, it looks a lot more like a U R L, and now is that of spaces. We have dashes. And if we want to create Ah, you're all from this we type. You are always equal to air joined dot to lower case, and now we have what looks like a Euro fragment or a query string. So if you went to facebook dot com slash you know the dash blue dash blanket dash is dash so on and so on. It looks a lot like a girl. So now we're returning strings into will look like actual you or else. And this is very, very valuable when creating things like single page applications or taking user input. For example, when someone creates in your Facebook page and turning that into a ah, you l that will be in the facebook dot com slash whatever your your group or Facebook page need is. So now we're actually getting a lot more useful, and we still haven't done anything with a d o M with with the actual HTML. But we're creating very useful things here. So again, not super, super exciting but incredibly useful. And these don't just stop here. There are tons and tons of other methods that we can use if we just type str dot we get a long list of things that weaken Dio. In fact, that's actually what I want you to do is in your council, created a new string, put a sentence in there could be anything making about 40 ish characters like we did in this example in this video, and let's just see what the's do. What happens when you type Godbold well, it returns a function Well, that's interesting. What is that? That might be worth a little bit of a Google, but play around with some of these because these are all very, very useful. You could do the same thing with array. How we haven't array here air dot and then it gives you a list of what you're looking for here. Do you wanna captain A These brings together? Do you want to shift these slice? Please sort these. You could do all sorts of stuff in here. No, JavaScript is not just limited to this function list. Like this list is. It's nice. It's convenient. But that's not everything JavaScript has to offer. So as your homework lose video, go ahead, create a string. Um, type in whatever your variable name is. Hit dot and take a look at some of these. If any of these catch your eye, you really insured what they might possibly do. Go in Google them because here's one of the secrets to being a great Web developer. And I'm not even kidding you. If you talk to any senior to have, they're all going to tell you this that the the real superpower behind being great developer is knowing how to ask questions and knowing how to Google, because in the world of programming front and end back in, there are so many things out there that you have to remember, you're not going to remember them all. That's just that's a fact of life. Our brains don't work like that. And why remember at all, when it's all easily accessible through the old Google machine to go ahead, give it a shot. I hope you've learned a lot of useful things in here. I hope that in the next few lessons we start getting into something a little more, Um, yes, interesting where we can start manipulating the deal m and really making your page a lot more interactive and dynamic. 10. Mini Project: Turn a string into a URL: Hello. Welcome back Before we move on, what I actually want you to do is I want to do a little project. It's it's very simple. It's just working with what we have already learned. Um, I feel like what we have done. It already could be considered a lot of information, especially if you're brand new to JavaScript. And so what we're going to do is we're going to turn, Ah, little bit of text a few variables into an actual U R L that you could possibly use in a project moving forward. So the idea is to take 123 harm however many variables you need. Manipulate them using ah, using, replace. Or you could break it into an array and join it back together like we did in a previous lesson. Turn your your URL into all lower case because all you where else should always be lower case. That's a good practice on. Then you want to add your website name in front of it Now. If you don't have a website name, you could use any name you could use google dot com facebook facebook dot com are come on dot com Whatever you really want Your end result should really look like this. Now there's two ways we can do this. Um, we could do it using a ton of the the methods that we've already used, which I think is the best way to do it just for practice. There is a simpler way, which is basically you could just write str any sort of variable name is equal to and then you put it in there. That's not what I want you to do, though. I also don't want you to write, you know, string one plus string to ah, sort of. You know, this being string two in this one being string one. You know, don't do that either. Get creative with this. Take the long way around. This is one of those times where programming the long wages, experimenting, breaking things. And, you know, just writing a lot of code is completely acceptable. You're learning. And while you're learning a great way to learn is to write a lot of code on, then in the future optimize it, and that's perfectly fine. So you want to stick around for a few more seconds? I'm actually going to do this myself in a way that I think would be useful using some of the different methods that we've already use, including concatenation to split to join lower case uppercase finding, replacing words. I'm gonna get a little bit creative with it. I'm gonna take a long way around. I'm gonna have fun with it and feel free to watch it. But if you really want to challenge yourself, maybe pause the video here, give it a shot on your own, and then once you have figured out or if you get stuck then, you know, resume the video and play through the rest of it. 11. Mini Project: Turn a string into a URL Solution: All right. So what I'm gonna do here is I'm gonna do those alive, right in the consul. I could do this in sublime, so you have the code. But realistically, this is not, you know, super awesome code or anything that's really gonna revolutionize how the Internet works. So it's not really it's not worth saving. Um, but this is a really good practice run. So the goal was to create a website You, Earl. Now I'm going to use face methods. The 1st 1 I'm going to do is figure out which website were supposed to be going to so creative variable called website. And it's just going to be https artman dot com with the trailing slash Done, it's now we have a website. This is, you know, lossy cheating. We could do some fund or things, but this is not the part that I want you to focus on. What I wanted you to focus on was creating the URL and that you were all could be coming from anything. So let's create a new string and serve using camera case. Amusing underscores time. Just show you that you can use the other, you know, variable naming conventions. The quick brown box jumps over the lazy dog or something along those lines. So you see that I've added two extra spaces in here instead of just one. There's two in there. This is all capitals. This is, uh I don't know why there's a capital C Capital Cape. Either way, we need to turn this into some sort of your l form. So now we have website, we have new string, so new string needs to turn into the euro. Well, the first thing I want to do with my you string is I want to turn this into something that I can manipulate no matter what down the line. So I'm gonna say new string is equal to new string, which really is just taking itself in overriding itself to lower case. Now we have no more capitalisation problems. This is perfect. Now, if we wanted to run a search on this, we don't have to worry about ah, random Capital C in the middle of the word quick. But now let's say I wanted to remove any extra spaces. Let's say there are two or three extra spaces anymore anywhere, and they say we just want to remove them now. We might not know that they're there, but it might be a good idea toe to go and replace those extra spaces. Anyway, At this point, um, there's two ways to do this one way. We didn't learn on the way that we did learn the way we did learn was to use Don't replace , and that's how we're going to use it just because that's what we've learned. So I want you to get some practice with that. The other way is to use what's called regular expressions, which is a crazy computer way of searching through anything and finding the exact pattern that you have specified. And we're not going to learn about that yet. This is a JavaScript essentials course, and you only being, Ah, few videos in a few lessons into this course. You don't need to know about Reg. Exe just yet. Rejects is the way we say regular expressions. So next step to replace, say, new string is equal to, uh, you know, let's not call it new string. That's it's gonna get confusing. You're always equal to new string dot and we know we can use replace And what do we want? Our place. We're gonna replace extra spaces with just regular spaces. We can do that. Now take this. And we have only got where there were two spaces between thought and lazy. There is now only one You Earl is equal to euro dot um no, not slice split. We want to split all the spaces. Now we know that there are a bunch of spaces in here between each word. We've gotten rid of any extra spaces. What happens we get and right now you are out is now in a right. We can't do anything with that. What would happen if we did? Website Plus you're out. Well, it automatically joined it together with comments pretty close to Well, we want bread it not quite. So let's do you, Rosie for you URL dot join And let's join all of the great pieces All these different words The dash now like that. So now our final product is going to be your l is equal to website Plus you are which is going to come, Katyn eight our website and our euro. And there we have an actual girl. Now, Does this actually go anywhere. Honestly, it's probably never going to go anywhere. Maybe out. No, that's not the point. The point is we have what looks like a legitimate euro based on what could have been user input. User input is never perfect. Never like if user input is perfect as very, very rare. Just assume that user input is always wrong, that it's always it always looks terrible that is not formatted properly. Just those kinds of assumptions not to be negative or anything are good assumptions. Just assume that content entered into your website is not what you expect it to be, and that is having a security first mindset. Now, after we can caffeinated website with your oh well, we have a legitimate looking you are all here, and we could have done that with any sentence running through this with any other sentence would have worked. If you feel like you've got a grasp on what we've done here, then I invite you to open up the next video. Let's keep digging into JavaScript. This is getting fun. This is getting exciting and moving forward. This is only going to get better 12. Code Comments : hello. And this lesson, we're gonna be talking about comments. Super quick, super brief. Really? There's not a whole lot to talk about here. To be honest comments, what you have usually seen in HTML is, ah, comment. That looks a lot like this in JavaScript. We don't use comments like that. We use commas. Actually, you've seen this before. If you've looked at any of the project files, any of the javascript at Js files, they all have this little double line here. She's gonna do that in, and that's a comment, but how does it look in code? Well, let's write some basic code. And I don't expect you to understand what this code actually is. Nor do you have to right now. So you write something in here? Uh, it would be great if I could spell any of the words correctly. And, you know, what does this function do? Actually gonna move us up one and in here? Uh, step one? No, it's gonna execute some code in here. Whatever that might possibly be on, then step two executes more code, and then it's just going to return something. Maybe it's going to return an object so again, you don't need to know what that actually is. But here are the comments now. If we wanted to actually comment this whole thing out, we could dio is we just add the double sashes in front of it. Or we could do the easier way and use Theus risk and Slash. So to start a single line comments, just one line writes, we have one line to line three line. Just a comment. One note. All we do is add slash flash in front of it. But if we wanted to come in, all of them out looking at slash slash in front of all of them or we could add ah, slash, asterisk. And that's going to comment everything out until it's told not to be commented. And you can tell because all this Texas Gray was going to actually get rid some. Some of this it fits on screen again. And to end that comment, use asterisk slash, which is the exact opposite of this, and to tell if you've got editor any sort of I d. That's using syntax, highlighting or any sort of coloring color comes back. That's all. It is now, one thing to note about writing any code in any programming language is use comments. Use a lot of comments. I would always say Use more comments than not enough. Tell people what your function does. Why is variable declared? Was it supposed to do? Is there a difference between one variable between variable and and an object? Or do you want to remind someone that one function has to run at a certain time or, you know, whatever you're doing, leave it in your comments Now, if you're the only developer working on a project, really, is that necessary? For the most part? No. Until your project gets bigger because when you're working on, ah, large project might not touch them code for, ah, week or two at a time when you come back, you might not remember where it is. Even if you think at the time you were going to remember all of us, chances are you won't and you're gonna come back and you have to figure out everything, or you just simply leave comments for yourself and you can read them when you come back to . On the other side of the spectrum is if you're working with other developers, and this is very common whether you're working on open source project or you're a front end developer or back in developer working in ah, in a Web development firm or on a team or in a start up, whatever it is you're doing. If you're working with other developers, leave comments so they understand what's going on and they should do the same for you. And if there any developers that are writing code that are not leaving comments for you, in all honesty, they're not doing a very good job of communicating with you because developers don't pick up the phone and say, Oh, hey, so I made this change because I would take forever. We would be on phone calls all day. Instead, we leave little comment, saying only, I change this or this This one variable was was meant for something in particular, and it doesn't have to be extensive. So I put variable name this is, he declared variable. But there's nothing in there that means technically it's defined, but the value is undefined, so this would be an empty string. This just means is undefined. And in the comments we could say why this is undefined. So this is just to set up a basic variable used, and I know for other functions something like that that's absolutely acceptable. If you're adding any level of clarity that another developer could benefit from, it is worth writing, even if it takes a little bit longer to write the same code. Just because you're adding comments, it is that important comments are easy. Comments are simple. Everybody knows how to do them, and they can exponentially increase your level of communication between you and your future self. Who is going to be looking back on pass code that you're writing right now, or you and your team, and vice versa. 13. Basic Operators: welcome developer in this lesson. We're going to learn about that, uh, operators, operators, while really not the most interesting in the world. Interesting subject in the world is how to explain this. It's the most important, most fundamental thing most. I can't explain how important understanding operators is to programming because right now all we've ever used eyes, a little bit string manipulation. We've created some variables. We might have written a few comments at. Nothing extraordinary. To be honest, it's all actually quite boring fun stuff. It's getting so close. But before we could do any of that, we need to know what operator is. So programming, while not strictly mathematical, is very, very logical on. Because of that, you cannot avoid not doing some math. You don't have to understand a lot of math to be a great programmer. That's the truth. In fact, a lot of programmers are actually quite terrible at math. All they have to do is figure out the correct answer once throat into some chunk of code. That gives him the correct answer every single time, and they never have to worry about it again. That is the beautiful thing about programming is you don't have to be Einstein or Stephen Hawking or any sort of genius that has revolutionized the world. You can literally no very minimal math. And so some of the operators we're gonna talk about today are super, super basic. We've got addition, subtraction, multiplication division, and we're gonna get into a couple other ones. Some of these are a little bit different. You may have not seen these. If you have been around programming a little bit, you might have seen some of these. Just remember to keep a little bit of an open mind here, Um, and try to be as logical as analytical as you can possibly be, because if you can turn on that logical part of your brain, this gets so much easier for you. So first, let's start with addition, right? If we do 12 plus 15 JavaScript gives us 27 basic math. 12.5 plus 15.123 gives us the exact answer. We're looking for basic addition. Subtraction is absolutely no different. And we can give this any number in the world that we want, right? We're going to give it some crazy numbers. I just threw in random numbers. Let's look at this because this is such basic math. We just know that this is correct. This is not incorrect. So essentially, this is your calculator. But what if we said 15 divided by five? Well, five goes in 15 3 times. Basic math, right? We're not here to teach teach enough. I'm here to show you that this little operator sign is very important. What happens if we do? 15 Divided by 62.5 gives us a float 15 divided by 14.9 groups did that wrong. 15. Let's try division gives us a pretty accurate number, but what if we wanted to get the remainder of something that's a little trickier. So programming comes with this operator called Module S. And so if we said 15 Ma jealous, let's say for right, how many times has four go into 15 while three times So for a 12 and what is the remainder ? Three. Because it's exactly what we're looking for. If we said 97 module lists 42 42 goes into 97 twice with the remainder of 13 that's module is that's pretty nice. Are you going to use that often honestly, throughout my career as a front end developer, I have not used it that often. I've actually isn't more on the backside than I have on the front side. That's not to say that you won't ever use it, though. Okay, so I just cleared off the screen there. Um, let's create a variable. Age is equal to 67 now. There are two more operators called Ah, the incremental and Decker aumentar and incremental increases as the root word suggests your number. Age plus plus, that's what an incremental looks like. Ah, you re up it plus plus 68. What if we run it again? 69. What if we run it once more? 70 and it's gonna keep going up by one. We said age is equal to 60.5 and run the the increment. It just keeps going up by one. And if we wanted to do the inverse, we could decrease it by one. Why is this important? Because in the future we're going to be getting into loops. Loops will run code, and basically, until it hits something that says stop. And for us sometimes that means it hits a certain number and increases by one over and over , or decreases by one over and over until hits like zero or a specified number. Now loops will do this for us automatically, but there is a reason that we want to do this manually. It's because sometimes we're in a loop in. We want to keep track of something else. How many objects are applicable when you loop through an array of words, like the quick brown fox jumps over the lazy dog? We split that into individual words, and we looked through each word. If that word is dog, or if that word is four letters or less, maybe increase the number by one over and over again. If that didn't make sense to you now, that's fine. We're going to be going over things like that in the future. It's not as complicated as I probably made it seem. Now let's look at assignment operators, assignment operators, our ah yes, cleaners off. And let's say number one is equal to 10. Number uh, two is equal to 15. What if we said number one? Ah, if we just wanted to add 25 to number one, we would say Number one is equal to number one plus 25. That's no use when we could really just right number one plus equals 25 now the reason for that is because Number one was the number 10. We said, Plus is equal to 25 if we tighten someone again, it has assigned it. So not only did it do the addition for us, but it also said Number one is whatever the total is going to be here now. We could do the same thing we say number one, but on the inverse and minus a number. So let's minus not 35. Let's mind is a bigger number. That's minus 54. Number one is now minus 19. If we take the variable again, we know that Number one has been reassigned to B minus 19. Now you can do these assignment operators with addition, subtraction, multiplication division and module list. All you have to do is add the operator in front of the equal sign, and it automatically assigns the value of whatever is going to be to that variable for you . So now we have math on one line, so instead of saying, you know, Number one is equal to 10 plus 25 like we did before. What we're going to say is numb one is equal to plus equal to 25. Now we know numb one is currently minus 19. This again and what we have is six minus 19 plus 25 is six. We type in someone, we have sex, so there's not really too much more we can go over with us, but it really just makes your it makes your math a little cleaner and really only do this for basic math. Don't Don't try doing this for anything that's, you know, outside of your your basic operators, if you have to do things in a certain order like Bennis bed mass brackets, exponents, division, multiplication addition, subtraction, Um, again, that kind of math you don't really need to remember right now. Then then do it in line. Your math can also have parentheses in it. So if we did 12 plus 20 divided by Tu minus one plus four totally made that up. Hit, hit, enter and we get whatever that answer was supposed to be 19. But what this was doing is the rule of bed, miss. Now, the next lesson we're gonna talk about comparison operators, comparison operators. This is how programming is done. If something is true or false, really comes down to quite Boolean things or one number is bigger than the other. Take some sort of action. Those air comparison operators were going to get into those that also comes with, if else statements. As of right now, the only homework that I think you should you should do. Call it in many project or whatever you want is just open up your consul here and just do some basic math. Just figure out how this works. You don't have to do anything super complicated, but try this. Try the ah, the addition Operator, right 12 plus 58. It threw me on error because invalid left hand side in assignment. That means this is not ah, variable. But if we said terrible Numb is able to 12 and we said 12 58. It gives us never so just play around with things like that, feel free to get errors like this, and whenever you do get an air, google it. Google is a great source of information. Stack Overflow has a ton of questions for you again. Being a great developer is knowing went to Google things. If you get stuck, we have ah giant Facebook group full of developers who are, you know, at your position, all the way up to the senior level who can definitely help you as well. 14. Comparison Operators: All right, welcome back and this. Listen, we're going to be talking about comparison operators now. This is a fundamental concept between all programming languages. It really comes down to if something is true or false. And these are binary options. Computers don't think in any sort of gray ground. It's, you know, it's either it's black or white. It's true. It's false. It's yes or no. And to get started, we needed to know a lot up until this point. Now, this point is really how you give any sort of program, the ability to think if a variable comes out true, I do something. If it's false, do something else that comes out to like, if else operator and we're going to get into that in the next lesson. But right now we're just talking about comparison operators. No comparison operators. They're not very difficult on, really. The only math you need to know is if something is greater than less than or equal to, there's one other sort of caveat in there, and that's the one does it equal to, or does it not equal to. So instead of really trying to explain this, I think the best way to learn this is to just write it on the console. I'll talk as I go, And, uh, if you have questions about how these work, feel free to ask them in the Facebook group. Yeah, so let's just get started with us, All right? So what I'm gonna do is one is equal to one. This comes out true because one is always one. What happens if I said one is equal to two? It's as false. Now, the reason that this is comparing and not assigning a variable is because there are two equal signs. If we said one is equal to one, JavaScript is gonna think, Oh, well, I'm gonna sign the variable named one. The value of one. And what happens? Nothing. Because you're variables can not start with the number. Now. What if we used floats instead of integers? We said 1.0 is equal to 1.0. That's true. What about 1.0 is equal to one? That's also true. All right, so just cleared consul there, And, uh so that's basic managers, right? One is equal to 10. We know that one does not equal 10. Only 10 can ever be 10. So this turns out to be false. What if we started comparing strings together? What if we said test is equal to test? Well, this is the exact same thing, comparing essentially against itself. So this has to be true. But what if we said test is equal to something else? Now we're comparing two strings together, so the data type is the same. However, the values are different, so test does not equal something else. Just because the data type is the same does not mean that this is necessarily true. And when we hit enter, we see that this is in fact, false. So what happens if we start putting some of these into variables? So let's put variable name is equal to Caleb. That's just my name. Now. We wanted to say name is equal to equal to this is comparing it. So this is not going to compare. This name is going to compare Caleb, remember Capital K because javascript is case sensitive. So if we said Caleb is equal to let's spell my name technically the proper name, what happens? It's false. But if we said Caleb is equal to equal to. We're comparing it Killed with Capital K. It's true because it's the exact same now. Now, if we do a strict comparison, that's three equal signs, and we put the exact same comparison as above, but only with with one additional equal sign. It's still true now. The reason for that is because this value right here is literally the exact same. So it's not comparing just the value. It's also comparing the data type. Now. What if we said ages equal toe 45 and then we compared age is equal to equal to 45. That's true. What if age is equal to equal to equal to 45? Also true. What if ages equals equal to equal to 45.0? Also true, JavaScript realizes that 45 is the same as 45.0. Or what if we did? The inverse 45.0 is usually actually equal to age. Also true, So it doesn't matter what side the equal to comparison variable lives on as long as it's being compared. That's all it cares about. Now there are other comparison that we need toe really consider here. Clear off the council here. And what if we said age is greater to greater to or equal than 45? Also, true age is greater than 45. That's false. Age is 45. It is not greater than it is greater than or equal to before we continue. Let's take a look at some of the different operators that we have. We have equals a strict equals, does not equal a strict, does not equal we have greater than or equal to less than or equal to. And then when we when we want to mix and match comparisons we have, this is. And so instead of writing the word and we used to to m percents or when we want to say if something is true or something else is true, we use to pipe symbols, and this stands for or now let's declare again. It's re declare age is equal to 20 and if you live in the United States, the drinking age is 21 so drinking age is equal to 21. Now we can say, essentially, if the age is greater than or equal to the drinking age, then you can go and buy beer. But we would compare that by if the age, not 20. But age is equal to or greater than the drinking age. Then we can excuse him. Coat. Now this always has to turn out. True. In this case, it didn't turn out false because age is less than the drinking age. If we did the inverse we wrote, age is less than or equal to drinking age. We get true. What if we just did? Age is less than drinking age, also true. But what happens when we start comparing variables to other variables that do not exist? So what if we said age is equal to equal to something else? Says, you see, we get something else is not defined. What if we said age is equal to and we know the other data type is undefined? Well, that's false, because ages in fact, defined. But what if we said something else is equal to undefined? Well, again, JavaScript gives us a reference area and says that something else is not defined, and to do a strict comparison gives us the exact same thing. So why should we ever use a strict comparison? Well, let's take a look at age ages 20. What if we did? Age is equal to as a string 20. That's true what we said. Age is equal to 21. That's false. So JavaScript realizes that this 20 is the same as an integer, which is technically not right, because this is not supposed to be a number. This is considered to be a string. This is where we start using strict operators. What if we said Angels equal Teoh equal to 20? We get false. So while it's true here with a loose comparison, it's false here with a strict comparison. No, Why would you ever use that? Well, because sometimes the user is going to input information, and when the input it like a number or text, it always comes back as a string. So if the users agent put happened to be 20 when we want to compare it to be at least 21 or higher, we would we could do a loose a loose comparison greater than or equal to 21 false, or if I had to be an exact age, for example, someone winning the lottery could only ever be. The age 20 has to be exactly 20 we could do this way or we could do it with a strict operator like this that comes out true as well. Okay, so now on the inverse weaken do does not equal to right, so we still have ages. 20 what it was that age does not equal 20. That's false, because age is, in fact 20. But every cent age does not equal any other number. Anything that's not the number 20. This will turn out to be true. So we could say age does not equal literally anything can of those in there. No, we can do a strict comparison as well. What happens if we said age does not equal to undefined? Well, that's true, because age has been defined. That means age has a technical value of 20. What if we said, um, something else does not equal to undefined? We still get the same is not defined error. Now, what if we created another variable, but one of those blank ones that we've seen just a little bit of Let's call this variable empty comes back as an undefined because variable hoisting, we type in empty, we get under find. So what if we said. Empty is equal to undefined. Well, that's true. Empty is equal to strict undefined. Also true. But what if we said Empty does not equal undefined? No one's false. So it's the exact opposite of what you see up here. Because Empty, which was declared is Variable does not have any sort of information associated to it is, in fact, undefined. We know that using the not equals or the strict not equals comparison that empty is in fact false. So what I would like you to do just for a little bit of practice, open up your council and start writing some variables and just compare them together? It doesn't really matter what it is. I want you to get a feel for how these work versus whether it's right or wrong. Right or wrong can come a little bit later. I just want you to understand how these work, the comparisons that you have access to you have equals a strict equals greater than or equal to greater than you have less than or equal to. We have less than does not equals and does not equal strict. So go ahead, give these a shot, and when you're done that we'll see you in the next lesson. 15. If..Else Statements: hello. In this lesson, we're going to be talking about if else statements. Now we've done a lot of flirting with what if else statements are. We've learned about comparisons and variables, and we've really have all the ingredients that we need in order to understand. What if else statement is now. The simplest way to describe what an if else statement is is really just that if something is true or if you want it to be false, then run a certain set of coat a few lines here. A few lines are. If it's not that, if it's the opposite, do something else again. This is one of those fundamental concepts of all programming languages they all have, if else statements, this is how a program decides what it's supposed to do versus what it should not do. Ah, and when it's supposed to take any sort of action. And this is when things start to get really, really interesting, because users can start to input their own information and once they input their own information, you can start, you know, changing the actions based on what they've added. So as a very basic example, let's get started with our first variable. Say, variable name is equal to Caleb, right? Just my name. We know what this is all about. Not exciting. Caleb, get to it. All right, I'm getting to it. So if and the print the parentheses for NFL statement is really everything goes in here. This is where your comparison is. Your comparison. I did not spell that. Right? Come. Harrison goes in here. So if name is equal to Caleb, which we know it is, what should it run? So when we open a new if statement, we wrapped the new code that's supposed to run in curly brackets, just like you see here. So what happened? There was I had entered a little too fast. So suppose hit, shift enter. That's all that was. Now, if my name is Caleb Alert name is Caleb. We haven't formally learned alert yet. If it's not, my name is not. Kill him. So this is not formatted very nicely. Typically, you'll see code with little nicer spacing. Something like this. It's now we have If a name is equal to whatever you specify, that name is supposed to be, remember, it's case sensitive. Then run the code between the curly brackets. No one here is going to run. Just a basic alert. Now, if the name does not equal Caleb, which remember does not is the exclamation mark equal sign. So if the name does not equal k level alert something else. So what happens when I run this? My name is Caleb. That's the alert that Chrome just gave me. So now we're starting to get a little more into interactivity because this just alerted me on the page. And there's nothing you can do it about about an alert when you alert someone that shows up every single time. And that's a basic if else statement, that's all there is to it. Now, if you want to change these together, you can do what's called an else. If so, we have, if else if and else as a quick example, if name is name is equal to pick any name you want doesn't doesn't have to be your variable should actually be something else. So I'm gonna see if my name is Joseph Alert. Hello, Joe. Else if name is equal to, and that should actually be space in there else. If name is equal to can we know that this one's true? So this is going to run. This is true now. We could just leave it here if we wanted to. There's no rule saying that you have to have an else statement or NFL statement. Really, You just need, if statements, if something is true or if something is not true, execute a certain piece of code. That's all it is. But for the sake of this example, it's not a run through this quickly. If the name is Joseph Alert. Hello, Joe. If the name is not Joseph, check to see if that name is Caleb. We know that's true. That's going to run. But if the name does not match Joseph or Caleb, then it's going to alert something else. So based on what we know so far, just take a quick second positive. You hear if you have to Andi, think to yourself which one is supposed to run or if you switch the order of these, which one is going to run? And if Joseph or Caleb is true and one of the 1st 2 If statements is successfully run, the code inside of it starts running does the code inside of the else statement also run? Let's find out says this is true because the name is Caleb and that's it. So it didn't run because Joseph, the name is not Joseph Iran. Because the name is Caleb and it did not run the else statement. So what if else if else block really does is it checks for a certain true comparison? So when your comparison is true, it's just going to run that code. It's not going to run any of the other blocks that you write with it. In the next lesson, I'm gonna show you how to prompt for some information. And then we're gonna do NFL statement based on what the user inputs, and we're gonna show you that user input can actually change how a program act. But for now, I take a quick second open of your council on Decree It. Ah, and if else if else statement for yourself on just play around that, make sure it works. The lesson here is not about alerts, although if you wanted to throw that in there, no harm done 16. If..Elseif..Else from User Input: all right. In the last lesson, we learned how to do and if else if and else statement. But now I want to show you how we can take some user input. Ah, and really customize what the program is supposed to do. And for this we need to learn something new. Something called Prompt and last lesson. We learned to boat alert a little bit. A little informally, I suppose. But in this one, we're going to learn about the prompt, which is basically an alert with a little text box that allows people to enter information . Now, just as a heads up, nobody uses prompts anymore. But because prompts are nice and simple, we're going to use them in this lesson just to show you how we can use user input to change how the program acts. So let's go ahead and type. Name is equal to prompt. What is your name now? Here? I hit shift enter because if I just hit, enter it, just going to be a prompt and not going to do anything else. Now, this is where we start putting a lot of javascript inside of a JavaScript file so we can run more than one line at a time. Now, I said, If name actually see this, if name to lower case is equal to Caleb, Just my name. Nothing. Fancy alert. Hello, Caleb. Now that's a basic if statement, we can leave that here. In fact, I think we should run that. Let's see what happens. What's your name? And I'm gonna put Well, it's asking for Caleb in lower case, so let's change that. Let's put it all in uppercase minus to B B. Could be in lower case because remember, user input is never the way you expect. So you have to do a little extra filtering to make sure that the user input is possible. Ontario says Hello, Caleb. The reason for that is because it took my name. Ah, which was Kloo all in caps with a lower case be and changed it to a lower case. And then it said if that lower case value of the name variable is equal to lower case Caleb , then alert. So what I have here is just a blank index file. There's no JavaScript being attacked this page. It'll first thing we need to do is attach the JavaScript file. So the bottom of my body typescript SRC is equal to javascript dot Js The JavaScript IGs is your JavaScript file. Now I have a JavaScript RGs file, and it's in the same directory as index dot html is in the same folder. So this is all we have to do now to make sure that this is working. Let's go over to JavaScript at Js and type alert. Hello world. All we want to do is make sure that the script is working. I saved that safe. Both files over chrome and I refresh the page and it says, Hello world. That means or javascript file is working. Now there are other ways to check it. This is one of the faster wasted. Check to see if your JavaScript is loading. You don't have to open your consular anything. It's just ah, blatant alert in your face. It's ugly, but it does the train. So now we want to rewrite our script. Let's say name. It's do variable name is equal to what is your name, and we want to wrap that with a prompt and we say if name alert hello and we know how to can Katyn eight. Right. So we use Hello, captain. Eight. Variable name and hello guests. So what this is doing is if someone enters the name, if there is information in here, it's going to return. True. JavaScript is going to say yet there's something in there that is true. It is not undefined. It is not. No, it is not false that this data type from this value is in fact true. It has some information in there. And if there is, just give us an alert back, say hello and whatever that value is. But if there isn't anything in there, if someone clicks the cancel button, what happens? Well, hello, Guess Now, this is called information floor data flow. And this is also a very important concept. Pretty much of all programming languages again is what happens if something does not meet your expectation. What if someone cancels in the prompt? So let's say this Go back to this page. I'm gonna hit, refresh and asked me what my name is now. They're only ever two scenarios. I can enter my name and hit OK, or I can cancel. So what happens when I put my name in or anyone's name. It doesn't have to beat my name. Let's put someone else's name in there. Let's put my name is Zephyr and hit OK, hellos, Ever cool. That's user input. No, I refresh the page again to get that prompt running again. What is my name? And if I hit cancel this time, What's gonna happen? Well, if we look back at her code, if there's a name is going to say hello, plus your name, if there is nothing is going to say hello, guest. And in fact, it actually didn't. And that's because I forgot to take into account than no data type. And that's something that just happens with all programs. Every now and then, we move a little too fast. Ah, lesson. As a developer, making mistakes is okay. You're allowed to make mistakes. As a developer, I'm giving you permission to make most mistakes right now. Completely acceptable. It only becomes unacceptable when you start making the same mistake over and over and over and over again. So, looking back at the code, we know that the value of name is no. No came back as a true value. That's why it ran in here. So what? We need to dio Instead of running an else statement, we run an if else statement. Sorry, we run an else if statement else. If name is equal to let's do an exact comparison and see how that pans out alert. Your name is empty. Say that. Go back a page Refresh. My name is it's cancel again. Says hello. No, Well, why is that? What's Because the if statement came before the else if statement and so once this is true is going to ignore the rest of the Thean tire statement. The chain of command goes from top to bottom, and once one of those has met, it doesn't matter what else you have in there, it's not going to include it's not going to run it. That's what we need to do is we need to change the order of this here. So I'm just gonna move this up one this down one And so all I did was say, check if the name is no first now we're using a strict comparison here. Let's see what happens. What's my name? I hit. Cancel again, says Hello Know why is it doing that? could it be because we have are up there? Could it be because we're using a strict comparison? Could it be because no is supposed to be in quotes or apostrophes could be now, as a developer, this is one of those times when you need to understand that knowing everything, it is impossible. You don't have to remember things like this all the time. This is a small detail, and if you ever forget, it's totally acceptable to hop on the old Google machine and type in. Whatever your questioning your query is, chances are it will bring you to a stack overflow page and you'll find it probably a pretty good answer in there. Now changes to know toe. Remove these strict comparison, and I just want to see what this is gonna happen right. We're experimenting here and again, experimenting as developer completely acceptable because that's how you learn. You experiment, you make mistakes and you reiterate over that you you just keep iterating, and when you eatery, you learn more and more. That's all development is. That's really old technology. Is. Is people trying new things and moving forward, failing, taking a step back, realizing why they failed and trying again. That's all it is. We still get No, that's fine. What happens if we remove bar? We still get known now. Another option that we have is to check to see if this is a string or not. Now, do you remember a few lessons ago? Quite a few lesson to go. I said that user input always comes in as a string. For the most part, that holds true across every platform for every website and application. And that's just because we don't know if the numbers are the user. Input is supposed to be a number or tax, and it's our job as developer to figure out what it is. So all I'm going to do is add quotations around here. So now it's going to say if the name is no as a string like this is what it brought back. This is what it thinks. Your name currently is not that there's nothing in there. Not that anything else. Not that this is a number or afloat. It just thinks that this is your name. So it would be a string. Save that. Refresh the page, click cancel, and I guarantee you that this time is going to work. Your name is empty, just like that. So now we know what happens when your name is empty? No, As a learning lesson. Go back, figure out what happened. Hit. Refresh it. Cancel. My name is still empty, so we know that it wasn't of our What if we do a strict comparison? Same thing. So we know with the street comparison that this is returning? No, no. Another way we can check. This is this beautiful, beautiful method Here. Console log will log anything to your console. What I'm gonna do is I'm going to inspect. Refresh the page it cancel says my name is empty over the console. And this is what it came back with. Now we know what the answer is. Now we don't have to do a lot of this additional testing. We can do a console log right here. We could do a console log in here. We do one in here. We could do one in here to see where the information is going, and it gives you a better visual idea of where your data is flowing too. Now what happens when I put My name is Caleb. Hit. Enter. Hello, Caleb. Killed comes in here. Just is expected. Just like what? No work. What we know response gave us, but sort of No, it's Caleb, as a developer is a program is also your job to look for efficiencies. So we look at this, if else if else statement we know that there can only ever be two different types of input . Right? We know that there can only be a cancel and in OK, do you submit your name or you cancel? That's it. What we have here is if your name is empty. If you didn't add a name alert that your name is empty otherwise, basically, in every other situation just alert the name. So why on earth do we have the else statement in there at all? If there are only ever two scenarios, we only ever need to. If else statements, we don't need to check what the name is in the else statement. Because, frankly, the name is always going to be reiterated back into the alert message. Now, if we wanted to make sure that the name was something very, very specific, then we would say if else if name is equal to something else, and only in that time will this display. So let's try. Let's try another name. What this is doing if you have no name. If you canceled, your name is empty. If the name is Henry, alert Henry. Otherwise. If it doesn't meet either of these criteria, do nothing, and this is the exact same as leaving a blank L statement in there. The only difference is you don't need to have the else statement in there. If nothing is going to run, it's Let's get rid of that. Save it. Type in Henry. Hello, Henry. But as an example, when we type in any other name, people type in prairie. Nothing happens. We're still getting the name. We're getting the console log, and that always comes right here. But there was no alert, so that is pretty much the most in depth, if else if else statement based on user input that anyone could really give you moving forward, the if and else if statements really don't get too complicated. But in the meantime, what I want you to do is I want you to basically take this script if you can. I would prefer if you wrote this out. It's not a long script, so it's not gonna take you very long, but writing it gives you a little bit of muscle memory and your fingers, so writing it becomes a little bit easier in the future. All righty, eso that's it for if else if and else statements and we will see you in the next lesson. 17. Query Selectors: Hello. Welcome back. I was originally going to go over a few more fundamental concepts of programming in Javascript. But to be honest, it's getting a little bit dry. And I think we need something a little more exciting, something a little more interactive, something that really demonstrates why Javascript is so popular and why it is a good programming language now, to do that, I think we need to create a little bit of interactivity in the page. So now we're going to edit a little bit of HTML. This course is not based on HD Miller CSS. So the styling that you see the basic HTML is very raw. We're not here to make a beautiful website. I'm sure you know HTML and CSS and you can make thes as beautiful as you want. But for the purpose of this lesson, we're gonna keep things simple. So what we're going to learn today are query selectors. How do we get information or how do we add information to the page? So we have two parts to this lesson that I would like to go over the 1st 1 is how do we add information into the page and the 2nd 1 is how do we grab information from the page Now, a query selector requires either a class and I d or in elements. Now, there are ways to make this a lot more complicated, but we're going to stick with the basics right now. And at this point time, you should be familiar with ideas and classes and HTML and CSS. So what I'm going to do here is I'm just gonna write a basic class. Actually, let's do an I D. I'm going to call this main, So I have a diff called Main with the idea of Maine in there. That idea is very important, and I'm gonna leave this blank. There's not going to be anything in there now over my browser. And I'm seeing the open up the council and what we see here inside of the the Elements section. If I toggle down the body, we can see that Maine is in there in case you didn't know you can actually edit information in here, so make this a little easier for you to see hear. So I added the word tested and it added it onto my page immediately. Then add a little bit more says and more so it doesn't take into account your extra white space because that's what HTML does it smell isn't terrible your extra white space unless you explicitly tell it that it needs to have more white space. So I'm going to undo this. I'm gonna go over my console and I'm a creative variable, and this variable is just going to be called body. In fact, we don't actually need the bar, and all we want to do is raised document dot query selector. Now, the reason we use document dot is because query selector is a method, a function that is a part of the page document. So we type Cree selector and what are we looking for? Well, we're looking for the I. D of Maine. So we wrap this in a string with parentheses around it because it's a function. And just like you're targeting in CSS, you target the same way using query selectors. So here we type main it enter, and it gives us our HTML. We can see it in there, so we know that it's selected the right thing. In fact, actually, what I'm going to dio because I don't want to. I creates too many variables of different names. In fact, what I'm going to use them and clear this there we have Maine is equal to mean. I want to make sure that Maine is equal to me in this way. Nobody's getting confused about the body element main. If we wanted to add any information into this element, we add inner HTML. And when we start typing the word dot inner, we get inner dot html parentheses in an open a string and say, Hello, world. How come this didn't work? We use parentheses. We used a string just like we did in the query selector, but it gave us a promise that HTML is not a function it. When you see something like that, it's because it literally is not a function. There's nothing to run. Instead, what you want to do is you want to change the actual value. The inner HTML is what is held inside oven element. That's what Javascript sees it, as. It sees it as a property, not a function but like an attribute, just like how you might have dark hair or blue eyes. Or you might be wearing a green shirt. It's a property of who you are or what you're wearing, and that's what we're going to edit. So instead of trying to change the fundamental properties of a person to get them to change their shirt color, we're just gonna change your shirt color because it doesn't need to be that complicated. So here we type main dot underage female is equal to hello world, and we see that it shows up automatically. So now we're getting a lot more interactive are JavaScript is actually able to go in and edit things that are on the page as long as it knows what to look for. In this case, it's looking for the I. D of Maine, which we know is in here Now. If we look at the element, it actually added, Hello, world for us. So if we wanted to, we could go in here. We could edit this hello world to to To to shows up in their consul we could run the same thing again, and it's just going to override it just like that, you know, if we wanted to add more, we can use an arithmetic operator. We say Maine thought interface email is equal to whatever it currently is plus hello world . So instead of adding Hello world, we're going to add another line in here that just says I am editing things Page. And now we look up here and says, Hello, world. I am editing this patient. We have both sentences in there. But what if we wanted to get the information from there and store that in a variable edited and put it back on the page? Well, we can do that, too. Let's create a new variable called content Variable Name is unimportant. You can call it whatever you like, say main dot inter html. And now every time we write content, we get to the current content. So what happens now that we've created the content variable that has Hello world? I'm editing this page as a string. What happens if we edit theater HTML again? Just content change. Well, let's find out main dot inter aged, you know? Well, we know that's the same. Let's go ahead and change that. And we added the word edited. Now what happens when we type contact again? Nothing content was stored the way that we originally grabbed the information. So just because you stored information in one of the variables from the enter A she male does not mean that you cannot go and change that in your HTML again and have your content change. This is a very, very good thing. So now we have the original content. We don't have the word edited in there. That's perfect. That's exactly what we want. But now we want to edit content and throw it back into the page. We want to edit the page based on what? What it used to be. So dress as a demonstration. We're gonna change the Inter html to please remove me. We know that content is still what it originally was. So now let's edit contact content is equal to Well, what do we want to do with it? We can change it to upper case so as to content to upper case. Now, a beautiful thing in JavaScript is this ability to string methods together So we could say to upper case And then we could also say dot replace faces with dashes. And what happens when we hit? Enter? It did exactly what we wanted. Eso it turned everything to upper case. We replaced our first space with a dash. That's because we didn't tell it to replace all the all the spaces. We just told it to replace the 1st 1 of its kind. So now if we type main dot in her, HTML is equal to content. We have changed the content of page. However, while doing this, we overrode the original content variable and it is no longer what it used to be. It we can no longer get that back. 18. Query Selectors Part 2: we're going to do another example. We're going to create an input. We're going to use a class elector instead and we're going to call this text field to have an input type. Is tax classes, text field and inside of this text field. We're going to assume that someone has entered some sort of information in here. Some info in here we go back to a page refresh. We have a basic input field, just as some info in here Now, how do we get that information? It's not the same as how we did it with Main. Let's try that. Let's do txt is equal to documents. Doctor Query, selector What is the selector that we're looking for dot text field dot Being the class just like in CSS cool. That gives us the entire element. We have the entire element to modify here. What happens if we do? Txt not in her. HTML was equal to test return test. It didn't look like it changed anything in there. Well, okay, change the inner html of input. However, input is one of those elements that doesn't have inner HTML. It's a self closing tag. There's only one. It's not. It's not like a div or a text field or a text area. Rather, the input field generally just looks like this. That's your input field. So how do we view the input that we wanted to change? How do we see that on the page? The trick here is that we're no longer editing inner HTML editing and attributes. We want to change the value we want to change the value at tribute. So instead we type txt and then the attributes name is equal to a new attribute value. And now we can see that the value of the text field has changed as well. Now, if we wanted to get that information, creating new variable called input is equal to txt dot value. And if I alert the input, it gives us exactly what's on the page. But what if I changed it dynamically on the page? What if I'm a years? I'm not looking at the code, right? As a user, I just want to interact with the page normally, So I'm gonna say hello. My name is Length and I wanted to get this information again. Well, I know I want to alert it and I know that I need to get this information again. So what happens if I dio txt dot value? We get the value of the input field now it's perfect, but that might be a little bit confusing. How come it worked here, but it didn't work in the previous example. When we're changing the inner HTML, that's not to say that it didn't actually work it work the way that we wanted it to. However, there is little bit of difference because we're working with a value. So what we're doing here is we're grabbing the txt variable from up here. And we know that this is selecting this input this whole element. Now the variable has not stored the value of this element. Yet this variable is simply referring to the entire element. So any time that the value changes, we can go ahead and get the new value because we didn't store that in a variable. Now, if we did, data is equal to txt dot value we get Hello, My name is lamp. If we change txt, that value is equal to something else. Type data again. It's back to where it was, so it basically takes a snapshot of where the data was, what it was. Ah, and stores it in a variable for you. I was gonna comment this out in HTML so it doesn't show up, and I'm gonna go back to Maine and I'm gonna change some of these style attributes because in javascript, a very common thing that you want to do is add classes, Remove styling, adds styling. You know, you want to basically manipulate your CSS because CSS is extremely static. Do you want to change it from time to time? Refresh the page? I have absolutely nothing there looking my elements. I know that Maine is there. My input is also there, but it's commented out. So we're not gonna work with that. The main se main is equal to document Di Query selector Cool. It selected the right one. Now if I want to change the inter html Perfect. Now we have some text on the page and if I want to change the style, we say main dot style dot border because this is an object orientated a dot notation kind of language. It looks for the style and then it looks for the specific CSS style order is as a string one picks off solid red, and now we have a one pixel solid red border around it. One thing you can't do, though, is if you wanted to add order to just the top, you don't add dashes instead, you camel case it and it would be border. And instead of the dash, use the capital T. That's actually bad example because we already have a border. Let's use something else. Main dot style dot patting top is equal to Let's make this absurd and say, 50 pixels Now that padding only took place on the top and what happens And her page is where it says style. We're changing the style attributes now. We didn't give it a startling attribute in any HTML, but JavaScript smart enough to realize that. Okay, this can have a style pretty much everything in html cabin style. So it goes ahead. It creates the attribute for us, and it fills it with the information that we gave it. We gave it a style of one pixel, solid red border with a 50 pixel patting on the top. Now, if you're unfamiliar with how to edit CSS just a quick little reminder is when you're on your elements page, you can toggle these as well. And if you don't like what you're saying, you can always add it the HTML directly. Okay, so that's query selector in a nutshell. What I want you to do is I want you to creating element on your HTML page. I'll give you the project files as well, creating element on your HTML page and then open up your consul and write a query selector Grab that put it in a variable like you saw with Main is equal to document Dockery selector . Then I want you to change the inner HTML and then I want you to change the styling of it. And it doesn't just have to be the border of the padding. Try other CSS properties that you're aware of. It could be margin background color. It could be the font color, and then I want you to basically do the same thing. But instead of using an I D select or class elector just using elements, elector, see what happens when you select the entire body and you change the background color on the body 19. Intro to Functions: Hello again. In this lesson, we're going to be talking about functions now. Functions are again a very important part of programming. It's in every programming language, and essentially what a function is is they set amount of code that you can run over and over and over without having to copy and paste it over and over again. This falls in line with D R Y, which Eyes is the dry methodology of Don't repeat yourself. So whenever you're writing code, try not to repeat the exact same code over and over again. If you ever have to repeat the same code, it should go into a function. But a function can also take parameters or arguments, and basically, what it does is you input information, and it spits out a little bit of information. So let's take a look at a quick sample function. A sample function always starts with the word function, and that's how JavaScript knows exactly what this is. And then you give it a name and you can name it pretty much anything. Stick with the same naming conventions as variables. Don't start with number. Don't use dashes. Basically, anything else goes so for this one. We're isn't it called in addition, and we're just going to add two numbers together. That's all we're going to do. So this looks a lot like an else statement where we have the parentheses and then we have our curly brackets, and anything inside the curly brackets is part of the function. When we want to add numbers together, we can run this function over and over again. So whatever is in here is going to be able to run time and time again. Now, just because you ever written a function does not mean is going to run. It's registered in part of your application, but you actually need to give it a you need to give JavaScript command. You have to tell it, Oh, go and run that particular function. So to do that, you just right the function name without the word function in front of it. Give it the parentheses that it needs, and that tells Javascript, just with these parentheses, that is a function and it will run it. So let's give this a shot here alert. Hello. I am a function now when I open this page and I refresh it This is the stage female here, by the way. It's just from the previous lesson we're going to keep. Adding onto this is HTML as a lesson goes on another on anyway. So refresh the page and says, Hello, I'm a function. Refresh the page. Hello, I'm a function. If I comment this coat out and I refresh the page again, nothing happens. I'm refreshing over and over and over, and nothing is happening. That's because JavaScript knows that the function exists, but it also knows not to run it yet until it's told to do so now. This function, as of right now, is not very useful now. What if we wanted to run a certain set of code that just ask for somebody's name? Just like in previous examples that we've done well, we can create variables inside of a function same name is equal to. And let's krump what is your name? So all this is going to do is ask what your name is and say Hello name? We've seen this before, but the difference is this time it's in a function. So I say, if refresh, it says, what is your name? I'm gonna put my name in there. Hello, Caleb. Nothing fancy. Nothing we don't know about yet. The only difference is that we're essentially running this from one command. And if we wanted to run this over and over and over again, we could put this and other bits of code we could say, If today is equal to you know, Wednesday you have to assign today to be whatever the day actually is. In this case would just be W e d. Then addition else tradition. So now we're not writing these two lines of code in here twice. We're using just this one line twice. And so it creates this reference back to what the original set of code is supposed to do. And now you're not repeating yourself. There's no point typing the same thing over and over again. If you could type it once and have it run the exact same way every single time. Now carry on with this with this example. Let's actually do some addition here. Let's do Number one is equal to 15. Num num two is equal to 89 and alert. Numb one. Plus I'm too on. Then let's get rid of this stuff. Save it, refresh the page gives me 104. That's because it added 15 with 89 just returned that now. Ah, function should not alert something, innit? Alert is generally, actually just a bad practice. It's good for debugging, but really, alerts are. It's an old school JavaScript thing that most developers don't use anymore. So let's say we wanted to put these two numbers 15 and 89 added together into a variable. Well, how do we get the total? The 104 number that we saw into a variable outside of the function because we can dio total is equal to someone plus numb to awesome. What do we do with that? Well, let's try running this function and then let's see what happens when we run Alerts total. Refresh the page. I get 100 and four cool. What happens if I move this above the addition? Nothing is happening and refreshing. Nothing is happening. Why is that? Well, if I open up my console, we haven't air here. Total is not defined now. Why is that? That's because javascript does not know that this exists even though total is right here as of this point time, it has not been declared so again. JavaScript is aware of this function. It does not know the contents of it until it's run. So if we move this down, save, refresh the page, it gives us the number that we're looking for. But now what happens if we, uh, let's keep that there? ADV are in front of it? Refresh The page total is not defined. Even though it was defined a moment ago, it no longer is defined. Now, why is that? That's because Var declares a variable inside of a scope. Now scope is this concept that variables can Onley exist inside of certain areas. So if you have ah, function any function with var and then you have a variable, they can only ever be accessed inside of that function. So you might be thinking at this time, Well, why the heck would I ever want that? Why wouldn't I want total to be accessible outside with this function after I run it? And that is a fair question, and the honest answer is you don't want variables bleeding out of their scopes. Sometimes it's for security purposes. Sometimes it's for efficiency. Sometimes it's just to keep your code clean, but you do not want to use these outside of your functions. So if we're not supposed to use it this way, how the heck are we supposed to get total outside of the function? Well, this is where the beautiful return key word comes in. We return total. So total has been declared here it's the addition of number one, plus numb to we return that total. And if we run this on our page, we still get Total is not defined now. Why is that? Because what return does is it says Okay, I'm going to run this function, and I'm going to return this as the definition of a variable. So if we have and we've done this many times, eso if we did variable name is equal to John. We know that this is the value of the variable called John, but instead what we can dio is, we can say, Let's actually just leave Things go at Variable Total or let's call it New Total instead is equal to addition. So instead of saying this is 104 as a string or an integer or instead of saying 15 plus 89 all we're saying is store whatever this function figures out the total to be in this variable. So now if we said alert New total, this will give us 104. So go back to the page Refresh 104 as we expected. Now, inside of your function, you can run all the JavaScript in the world. Ideally, it should never leak outside of your function that your function should be a contained, specific set of instructions that you can use over and over again. But let's say we want to customize this. We want to customize number one and number two well, every time we run, this function is always going to be 15 and 89 respectively. That's not what we want. Functions are typically use best when they are extremely dynamic, and the only thing we want to do is we want to automate numb one plus numb to So instead of saying, number one and number two are always the exact same numbers and said we give them parameters or arguments and all we dio is we create a new variable inside of the parentheses, separated by a comma and another new variable. Now this is the name, as you can see here, numb to numb to numb one matches number one. So let's go ahead. Delete thes because as soon as this function is run, it's going to create this variable inside of the function, and it's only accessible inside of this function. So if we did different numbers this time 10 and 15 we're saying Run Edition. The first number should be 10 and the second number should be 15. The functions then going to take number one, which is 10 numb to which is 15 total them together. Return that into a new variable for us. When we alert that new variable, we're going to get whatever the total is going to be. So I'm going to save that refresh. And as soon as that refresh, this is going to alert with number 25 just like that. Now, why is that useful? But you can create a calculator. It's pretty basic calculator, but you can create a calculator that only has the addition function right now. But what if we wanted to add more? What if we wanted to do different edition So, instead of having to run total is equal tune number one plus numb to or having to explicitly hard coat numbers into our program or application, we can now say any other number in the world, and what I'm going to do is instead of alerting, I'm going to console, log, console log, new total comma, the total. To save that, I'm going to refresh the page instead of the answer being alerted to the page. It's going to show up in the console. So I hit at five, and there we have 25 and 1114 now that's the addition of thes two numbers and these two numbers. So now we have one function that's doing the same thing over and over again. Completely honest with you. This course is not about sugarcoating things, as you may have experienced already. But this function is honestly, it's nonsense. There's no reason that this function should really exist. But if you wanted to, you could make this function significantly more complex. You could take numb one you get multiplied by pi you could take numb to, and you could divided by whatever itself is you could take numb to, and you could square rooted by whatever number you want. Now, you don't have to remember that formula anymore. Or if you have a specific math formula, right, so it's gonna take numb one times basically pie and then is going toe Adam two divided by eight. I cannot do that in my head, so I'm gonna save that. And what happens when I refresh the page? It gives me a very accurate number. So now it's doing basic math for us and buy basic. I mean multiplication addition, and division is still basic, but I've only ever written this formula once. I never have to remember it again. The only thing I should do is add comments around this function as to what exactly it's doing. So what I would like you to do for this lesson is, I want you to create a new function. It does not have to be addition. It could be called whatever you like. You can have as many parameters as you like. It could be one parameter. It could be 30 parameters, although preferably don't do that. Maybe stick to a limit of like four parameters at Max just because it gets to be a lot to remember whatever you do inside of your function. And I don't really care what you do inside of your function as long as you save it as a variable inside your function and return it for. Alternatively, you could take this, and it's going to return the exact same number for you without storing it in a variable. I just did this for clarity, but I want you to return whatever it is you're function is supposed to return and then throw it into two new variables and call it a log goes out just like I did with this video . In the next lesson, we're gonna create a couple other functions just as a demonstration because functions air so incredibly important. I want to make sure that this is really drilled into your brain, because again, this is something that you can take from JavaScript to every other programming language in the world. So go ahead, do that task real quick, and then we'll do a couple examples. A couple more examples of functions in the next video 20. Function Examples: in this lesson. I just want to go over a few more examples of what you can do in a function, and that's really not limited to anything. You can do any JavaScript inside of a function but functions or something that you're going to be working with every single day. And I want to make sure that you really understand what is so if you don't have a full grasp of what functions are yet in this video is definitely for you. So in the last video we created in addition function, and all it did was add two numbers together. Instead, let's go ahead and create a few different other functions, and this is really just, for example, purposes. These might not be practical in real life, but I just want to show you what they can and cannot dio or rather know what they cannot do , just what they are able to do. So remember, you always start with a function key word, and that's a reserved word. So don't call your variables. The word function gets that's going toe cause a little bit of, ah, pain in your life as a developer. So this function, let's just call it get name and this one is not going to take any parameters at all. Now, if we look at her index dot html, we have from a previous lesson going into this, we have an input field called Text Field. I'm gonna actually change that to name and name. Here is what the value value is going to be actually gonna change. I don't want Namie Aziz of real name a totally, really name John Smith. And just so you can see what this page looks like, all we have is input Field called John Smith. That's the only thing is visible going back to a JavaScript. Let's go ahead and get this value. We want to get this name so we create a new variable and we want this very variable to be local to the function. So we use VAR name is equal to document dot query, query, selector and we want to selected by its class name of name. Now, if you remember from a previous lesson, as soon as we select this element, we have access to this entire element. We have access to its inner HTML, which there is none because it's a self closing tag. We have access to its value. Its classes type any other properties and attributes that we can give to it. We have access to all of that now, but all we want is the name. So let's changes from name too Name element, because that's just the element of the HTML element. And let's get the name as name element dot value. So we know that name element is selecting the name elements in here, and we're going to grab the value which matches this property or this attribute. Cool. So now we have a name. What if we want to mutate that name? What if we want to modify it a little bit? What if we said the last name Smith is too common and it has to be something else? With any time the last name Smith shows up, we automatically replace it. Well, what we can do is we can create a new variable. There's gonna call it a new name is he could name dot replace Smith with calling and to run this function, we just run, get name. I refresh this page. Absolutely. Nothing's gonna happen. I opened up my console and nothing has happened. Now, why is that? Because this function is not returning anything. If we said alert new name, it's going to run this function. It's not going to run this stuff. It recognizes that it's there, but it's not going to run the code until here. I'm gonna go ahead, save that refresh the page on I get John Colleen, whoever that might be. But we don't want to learn the name. Nobody uses alerts anymore. So what we want to do is we want to return new name and instead of just running dysfunction , which it will still run. But we just don't have access to anything yet. We're going to create another variable called current name that is going to get the name from The input area is going to replace Smith with selling, and it's going to give us whatever that name is. So now if I said consulate log current name, refresh the page, I get the current name. That's the name that's in here. So if I went into my index page, change that from John to Caleb Refresh. I now have Caleb telling. That's because it's grabbing this value and it's changing Smith. Too tall, lean. But what if we wanted to do more? What if we just wanted to get the first name? We can create another function called get first name, and we want to get the entire name for so we don't need to copy all of this over. We could, but that breaks the principle of Don't repeat yourself. Your code should always stay dry and dry. Is don't repeat yourself in case you didn't catch that. Okay, so what I'm going to do now is variable name is equal to get name. This name does not conflict with this name at all because they're in different functions. This this variable here is completely unaware that anything in here exists. And now we can use the same names over and over again in different functions. And while name ambiguity was sometimes very difficult thing to work with because some names , or just naturally ambiguous, allows us to use Nate variables like name a common variable name over and over again. Now, that's great. We have the name. What happens if we run alert? Name? I wasn't gonna comment those out and run. Get first name, save, refresh and I get the proper name again, even though the input is Caleb Smith and turned out to be Caleb telling, and that's because it is now running a function inside of a function. Now that's pretty cool, but we only want the first name. So how do we break a string apart into different bits and pieces? Well, we can use split, which will essentially, if we tell it to break the word based on all thes spaces in the string. So variable first name is equal to name, not split. And that's all we're going to do now, instead of alerting that this'll is going to show up better if I console log this save refresh. And this is an array we can tell because the proto is an array and there are two pieces to it came up and totally in, but we only want the first name. Now we know with the array data type, which we learned quite a while ago, that the 1st 1 always starts with the index number zero. So what I can do is return first name zero, and that's the first name now again because I'm returning it. We're not actually getting any information that could be useful. It's being returned great, but were not able to access it yet. So again, we create another variable and do not be afraid to use variables. Variables take a very little memory. It's not a problem. Use as many variables as you need. We're gonna say variable first name is equal to get first name. Get first name is going to run, Get name, whatever that returns. So this name is now the new name. We're going to take that name and we're going to split it. We're gonna throw it into a variable called first name and we're going to only ever return the first part of that name. So this seems like a lot. And really, it is just one step at a time. That's all it is. So save, refresh. Nothing happens. That's because it's in this variable. But we haven't done anything that is variable yet. So clouds Council log, First name, save. Refresh. There we go. First name. What happens if I change this to anything else? Save your fresh. He gives us anything else. What happens if we have a lot different words in here? Crazy middle name. Anything else? A lot of different words in here. Smith. That's the name that's currently in there, and it's still only returning that first word. So now you can see that functions are actually quite valuable because it allows us to write this code very easily. We don't have to write it over and over again. So to summarize how a function works or how our functions are currently working is we have a variable. We declared it as first name is equal to get first named function, and that's going to be the value of whatever is returned. So we have. Step one is going to look for Step two, but in actually, Step two would technically be it here now, while stepped, Who is running? It's going to try to get this one. So this is step 2.1. Let's marry that up 2.1, and it's going to return Whatever is in here. So 2.2. Now this changes to 2.2 because the name is whatever is returned in here, it's going to execute all this code, for he's gonna return what's in here. Throw it into this variable called name. We split it, we to return the first value. And now we have two functions that are operating together. And we don't ever have to write this code ever again. Now, if we really wanted to customize this based on any type of input field, we could add a parameter to get name called Really anything you want, Teoh. But here was gonna call it class selector. And your parameter name should always be clear. Give them nice, clear names. Even if they're a little bit longer, Clearer is better. And in here we're going to simply add class selector. But now if we run this, it doesn't work. Why? Because get name is looking for the class selector. Parameter doesn't exist. So we add the string in here which essentially we just moved it from here to here. That's all we did. If I save this refresh the page, it still works. But if I select a class that has nothing in it, what's going to happen? Cannery Property value of No. So essentially, what it's saying is the query selector that selecting the name does not exist class somewhere underpaid, which obviously is not anywhere in here returned an empty HTML element. There's nothing in there, so it couldn't perform what it needed to perform. So just be careful with that. So that's essentially how functions can work. If you're still not completely clear on functions, don't get too hung up on him. They are a little bit different to think about. It's a different way of thinking, Um, but over time you'll get more used to them and one of these days, or or maybe in just a few minutes your brain's gonna click and it's gonna go. Oh, I know exactly how these work, but just keep at it. It's one of these things that doesn't make sense because we don't really use this, uh, in normal human behavior. But as soon as you turn that logical part of your brain on, it gets a lot easier. So that wraps up this lesson. I hope this makes a lot more sense to you. I know we're sort of rushing through functions a little bit. That's mostly because functions are so common there's no way around them. And so, as a programmer, as a Web developer, you're going to become very, very familiar with these, whether you like it or not? Ah, and it's a very good thing. Very good thing to be aware of how functions work. So that wraps up this lesson. What I'm going to do is I'm gonna add a few comments to this file on. You can download this file as well and test it out. I'm gonna clean it up. Um, and make sure that, you know, it's a little easier to understand for for you when you're actually reading through this code. 21. HTML Events: hello and welcome back in this lesson we're going to be talking about. Do you do events? Events are how you make things happen in your code. Now we have been making things happen in our code using functions and if else statements. But there's nothing really triggering those. We have to manually go and process whatever function we want to run. And, well, that's just no way to live your life. And that's a terrible user experience. We don't want the user to have to go in and and trigger their own events. So in this lesson, we're going to learn how you can trigger events using just basically plain HTML and JavaScript functions. So the first thing I'm going to do here is I'm actually going to remove the input that's no longer needed. And Main is just going to say, uh, main body content. We're linking to JavaScript at Js, which is over here. And if we load this page up in our browser and refresh, it's a basic page, super simple. Now we're going to create event based on a button that's outside of a form, so it doesn't really do anything ever unless you explicitly tell it to do something. I'm gonna go ahead, create a button. Just a basic button type is going to be against basic button and is going to say Click me now I want to add an HTML event on. And as you can see, sublime has automatically filled in our suggested rather some different events. But what if we just did on click and in this on click we want to give it a JavaScript function. Now we haven't created function. We don't know this function gonna be yet, so let's pull one out of a hat. Change main html Now this is Raj JavaScript. This is JavaScript inside of your HTML. So now we're creating something a little more dynamic. Save that and head over to you JavaScript at Js and create a new function change main html that matches here as you can see exact same name. And so what we're going to do here is we want to select this content and change it. So we need to use our query selector to grab this. So variable main is equal to document clearly selector, main and let's just start basic may not interest. HTML is equal to. I've been changed and that's it. So we go back to our page refresh. And what happens when I click this? The content changed, so now the user is in control of some of the functionality here. If they cook it again, nothing happens because it's already been changed. But if a refresh and click again, it changes back now. Technically, when I click this over and over and over again, it is technically changing and you can tell, because every time it click this when I go to inspect the page, you can see that in here it's actually changing and just a double check. I'm gonna edit this. We can see that is, it's obviously been edited. Click it again and it goes back to I've been changed. So now we have some way of interacting with the page, and that's just one click event. What if we wanted to toggle the content photographer content? Let's add two different sentences that we're going to switch back and forth. So variable sentenced one Hello. Thank you for changing me and very little sentenced to Oh, hello. I'm a different sentence lots of exclamations and there is very exciting stuff. So now we can say if main done, inter html is equal to sentence one main doctor Inter html is equal to sentence too. So if it matches the first sentence, turn it into sentence to now. Let's do it, L Stephen, which basically means if the inner HTML does not match sentence one probably sentenced to or anything else because we're not being very specific here. Then we want to change it to sentence one. We go remains dot inter html is equal to sentence one save Go back, refresh the page. Look at that Ta go Just like that Nice and easy now it doesn't have to be is a simple is just changing the text You can change the styling as well What we can dio we can say if we're changing this descendants to add some additional padding So main dot style that padding is equal to I don't know, 50 pixels but if it's changing back to sentence one maybe let's remove the padding style dot Padding is equal to zero pixels save And I'm just gonna go refresh this page How? Look at that. So Oh, hello. I'm a different sentence Has a lot more padding in there. Oh, hello, mid sentence, which is sentenced to sentenced to, has 50 pixel padding. Just like that, Just like we said, No. If we toggle it, it's going to remove it because it's gonna go back to sentence. One is going to remove the patty just like that. So there are a plethora of HTML events. It's not just click. It's on form. Submit on most over on most out, what else do we have here? We have one click on double click on most down on most move. So when you're most is over an element and it moves around a little bit inside that element , trigger that function over and over over again. Careful that one. It will trigger the function every time. Your most moves of one pixel on my so on, most over on most up on wheel. So if you have a most well and you're you're scrolling through, that's a trigger. That's an HTML five. When I believe in HTML five, we have ah, lunch of different events. We've got the on drag on drink and Andre enter on drug leave. Drag over drinks. Start drop scroll. We have a ton of these. So what I'm actually gonna do is I'm gonna create a giant list of different events that you can use. Ah, and I'm gonna throw them in the additional content for you. I'm gonna put it in the JavaScript at Js file. Just commented that you can see all the different ones. I might not even get all of them, to be honest, but I'll try to put in the most common ones that you're most likely to use on a day to day basis as a front end Web developer. And then the only thing you have to do to really change that event is instead of on click, you could be on double click or on most down, which means you're clicking down. But your most has not moved up yet or on most over, which means you're just moving your most over the button and it's gonna toggle. In fact, let's take a look at that one. My page refresh. And I'm not clicking. You can hear that. I'm not clicking. I'm just moving my mouse over it. So now the user has some sort of way to interact with the patient. This is a super, super basic interaction, but this is where the fun really starts. Now that you know what functions and variables and FL statements are, you know how to toggle content. You know how to change the inner HTML. You know how to change styling With JavaScript, you essentially have most of the agreed ingredients that you need to create a super dynamic , super interactive webpage. I'll be it is very basic. But, hey, you got to start somewhere, right? So is this lesson. What I want you to do is, I want you to create a new function, and I want you to attach that to an event trigger in your HTML. It could be any event that you like, and I just want you to make some difference, whether it's changing the background color or the text color or the font size. You know, whatever is you want to dio, go ahead and do it. If you get stuck referred to this coat, I'm giving you this coat as additional content. So feel free to download that and take a look. And if you have some extra time, play around with the different HTML events, it doesn't just have to be an on click event. It could be any other event. And while you're at it, go in Google all the events as well as a developer. I'm telling you right now, who is your best friend? There's no way you're going to remember every single event out there while you're learning . Html CSS JavaScript PHP python node. Whatever it is, it's just too much to learn and you have tons of references of there. You don't need to remember all of it, but feel free to hop on the old Google machine on Google, a few a few different ones. 22. Calculator Project: Hello. Welcome to your first project. So this project is going to be a very basic calculator. Don't get fancy worth this. Don't waste your time on CSS and HTML and making this calculator look beautiful. I mean, if you want to go for it, but that's not the goal of this exercise. So you should have your first number here, your second number here, and whatever you want to do in here, you click the checks late button and a number shows up underneath. Now, I've given you the base layout of this already, so it's just a basic form. You have your submit button, you have number one number two. And actually, those were incorrect. I I d hope Number one and number two. And then you have whatever selection you haven't. You know, I've left some things purposely blink. Like which events are you going to use? We don't know yet. So you might have to do a little bit of googling for that. Or you can refer to ah, previous lesson a previous project that you've done really? Anything else that you can help speed this up. This should not take you very long at all. But, you know, if you do get stuck, that's totally fine, too. If you do get stuck, I I will be providing an answer. Um, I'm actually I'm just going to record how I build this out, using everything that we've learned up until this point in the next lesson. So if you get stuck, you can just watch me, me build it where you can ask questions. Facebook group or ah, leave a comment or a question down below. But in order to get this working, all you need is everything we have used. Up until this point, there's gonna be a bunch of stuff you don't need as well. So just give this your best shot. Give your best effort. Nothing. And you're gonna be too complicated. And remember keeping it simple is your friend. Don't over complicate this 23. Calculator Project Solution: Hey there. I hope you did relatively well with the calculator project from that last lesson if you got stuck, or if you're just curious as to how I would do this. Yeah. This is a video for you, because I'm just gonna I'm going to do this thing. I don't I don't have a plan. I don't know how this is supposed to look. We can use everything that we have learned already, and that's all we're going to use. I don't wanna let you know that in JavaScript there are better ways to do things and what we have currently learned. But with that said, those air also more complicated ways. And this is a JavaScript essential scores, not a complete JavaScript Web development course. So this is really just to get you going as a as a junior to intermediate JavaScript developer. So I have my index dot html file open here. I'm also going to open the JavaScript file, and I probably won't need the style file at all. Although I might maybe get into that. I don't, um don't hold your breath for that one, though. The first thing I want to do is think what happens when this form is submitted? Well, as of right now, nothing happened. So we go on submit is equal to, uh let's just call this calculate tour groups Coke, you late whore with parentheses. And so as soon as this is this whole forms submitted, it's supposed to run this function. Well, this function doesn't exist yet, so let's create it. So we know this function calculator has a spit out One answer. And so here is our current page. Now, if we look at the code, our answers below the form So somewhere in this area where my most is swinging around, that's where the answer is going to show up. And in order to change the content in there, we know we need to select the answer. We also know that in order to do any math, we need to select number one and number two in order to either add minus divide or multiply the numbers together. So the first thing we need to do is we need to create selectors. Now. We don't know too much about scope, but we do know that variable inside of a function stays inside of a function. We're gonna talk about this at a later date. We're in a later lesson, but any variables that are declared above and before a function are also capable of being used inside the function. So it's the reverse mentality of what you have learned already. We're not going to get into that because that adds a layer of complex complexity. But let's put that in your back pocket for now. We're gonna use that a little bit later. For now, let's just create a selector. So let's call this the answer selector document thought query selector answer. So what we're selecting here, let's just make that look bigger is we are selecting this development. We also need to select number one and number two. So variable someone document that query selector number one. I believe it was an idea, right? I d and I wanted them to someone to copy that over. And let's just change with instances. They're just changed Botham. At the same time, if you've got a nice editor like Sublime or Adam, you can select numerous of the exact same value and you can change the whole thing in here at the same time. Ah, in multiple places. It's really nice. That's all. I did nothing fancy there. It's just a nice editor trick, and I also need to select the select. Now, I'm gonna leave the select out for now because we don't know which one is selected. So what we want to dio So we just want to make sure that these numbers are actually selecting the right selectors. Let's do this console log Answer isn't gonna do anything cause there's nothing in there. We just want to see someone. Them too. Save that. Refresh your page. I'm gonna open up our consul. It's movements over so we can see more page 12 and nothing happened. Well, nothing happened because the page actually refreshed. And that's just because HTML when you when you submit a form, it's going to try to do whatever it is the form is supposed to do. It's going to use its get mess that our post method, whatever you tell her to do, it's gonna go to whatever action file you tell it to do. We have specified none of that. So instead of doing on submit because we don't want the page to refresh, let's move that to the button and change a button type to a regular. But because it doesn't technically need to submit the form and we can say instead of on submit on click, it's now This button is just a regular, but it's not submitting any form. Technically, that renders this form useless. And that's, Ah, lot of the power behind JavaScript. You can break out of traditional HTML hierarchy like that. It's now is going to run this calculator function and is going to grab them one and two and log them. Refresh the page 12 document creates Select is not a function. Obviously, it's because it is Query selector. Refresh Face tried again. 12 There we go. That's liking Number one is striking number two Cool as a shortcut. Let's just do this. It's at the value save Refresh tried again. There we go. We've wanted to do so. All we did there was We change this actually technically not training because we didn't use any methods functions. All we did was say a document finds numb to and then get the value of it and store that in a variable called numb to what all it is so now to make sure that answer is working, let's say answer dot inter hte email is equal to number one plus numb to I don't know what this is going to do because the values are supposed to be strings. But JavaScript also recognizes what numbers are just numbers inside of a string. Regardless, at this point, it doesn't matter because all I'm doing is testing to see if anything shows up in there. There we go. And so all this is doing is it's a pending them because JavaScript currently thinks that these air strings, not numbers. So let's turn number one and them to into actual numbers. Fresh one and let's go 54. Now we have 55 so at least it's adding, so we know that works. But why is that working? We haven't told it to do anything in particular. Now, remember what I told you. There was one hard part about this. I left something out. The thing that I left that was how do you figure out which one of these is currently selected? Well, the first thing we have to do is we have to get the soccer. So, uh, it's called the select is equal to document query selector, and it's the only select on the page. So we're going to select that as the entire element because that's all we need. Now. How do we tell which one is currently selected? Well, let's try this select dot options and this is where a little bit of Google and came in. This is not unknown territory for you. This is just a little bit new. It is just pushing your boundaries just a little bit. Can we say in the array? Slack dot selected index? Say that. Refresh the page and, well, that's giving us something is giving us an option. Elements. Cool. Okay, we could work with that. Is it value that we want? Yes. Look at that. We were gonna be selecting the auction and the value. So let's go back. There we go. It's adding doing to minus. It's going to divide. Cool. So now we have some way of working with that. Let's put that back into variable. We will call that operator now. We have everything we need to calculate our basic formula. We have the answer. Section number one, number two, Thesis Elect Box. So What is that going to be add minus divide or multiply? And then all we have to do is perform the calculations. So what we're going to do here is we're going to return in multiple areas, and this is a little bit different, but it is totally loud. So we say, if operator is equal to add, so the operator is getting the auctions, the selected index and then the value, select the option and what it Whichever one is selected and is going to match one of these values, let's say it's going to add What do we do if it's going to add? Well, we can say return number one plus, numb to now it's adding these numbers together else Operator is equal to minus, and we can basically do the same thing. But the only difference is we change the operator because this is a minus. Now there's another way to do this, and this is a terrible way. But I'm gonna let you know right now, because it's important not to do this. There is a function in most languages. It's usually called evil, which you can put raw javascript in here. The user can put raw JavaScript in here and you will execute it. The reason that's bad is because you were giving the user complete control over your JavaScript, and that's not what a program is. A program is a defined box with certain rules in it that states you can and cannot do certain things. And within those bounds you have complete freedom. But outside of that you're not allowed. You're not allowed to be outside of that box now. The reason I'm telling you that is because evil is used by a lot of newer developers because it is. It's easier. It's simple, it just works. And it makes writing this kind of code, if else if else if else if else which is what we're going to be doing, it makes that obsolete does. You don't require did it anymore. But that's bad development, and we're not going to be doing that. And if we were in a physical classroom right now, I'll yet all of you to look me in the eye and say that you will not be running evil 24. Calculator Project Solution Part 2: All right, Moving on. So now we have essentially the layout for the next two. I mean, a copy of these two down. And let's change minus to divide and multiply. This is going to be a division. This is going to be a multiplication. Ah, quick warning about copy and paste. When you copy and paste, chances are you're going to forget stuff happens to every single developer on this planet. So whenever you copy and paste something and then all of a sudden you're code doesn't work well, maybe it's because you forgot to change one little, maybe an operator or one little number in a variable or chain. You didn't change something that was supposed to be changed. So careful, copy and paste, to be very dangerous can also be very fast for obviously not having to write this four times there three times. And let's do and else so the else is only there, because if the user select something that is not add minus divide or multiply, we're going to say I can't do that. And the reason we do that is because the user can go in here and just change one of these to anything else and all of a sudden, even though it says plus, in here, anything else is the value that we're going to be using and that doesn't work. So now when we run this code actually aware that when we run the code, refresh the page 12 what do you think is gonna happen if you said nothing is going to happen? You're absolutely correct. And here's why. Look, nothing happened, and that's because of the returning information. Now this is allowed. If we wanted to return this into an answer somewhere, say answer is equal to calculator, the answer will show up. Whatever. If the user said, add, the answer is going to be in addition, Minus is going to be a subtraction, but we're not returning anything, and that's because this function does not need to return anything. So this sort of a little bit breaks what we have learned. Ah, a couple lessons ago, both functions, but at same time it doesn't because it is allowed. Nobody explicitly said that you have to return anything at any given point in time, so instead what we're going to do is we're gonna store these in a variable. Call it. The calculated answer is equal to well, we put anything or we could just keep it as undefined. Now I'm gonna change these returns to, you know, if someone's adding stored in here or if they're multiplying stored in the same variable. Remember, if one of thes matches one of these if statements matches, it doesn't matter what the other else if statements or else statements are saying they're not going to run. This is a whichever one fits First used that one. Now we're going to see a return false here because if there's an alert, don't show any answer. Actually, scratch that. I have a better idea. Let's say the calculated answer is equal to invalid operator. In fact, I'm just gonna comment that out. And now we can say answer. Thought Intern. HTML is equal to the calculated answer. Save that. Go to our page. Refresh. One plus two is three one minus two is minus one one, divided by 20.5 and one multiplied. Will to do something a bit different. Stereo. Five. What happens if we make this afloat? 5.24 1.48 Multiply these together, there's your answer. So now you have a basic calculator. But let's see what happens if we get a malicious user. Some guy who thinks he's smarter than you comes in and says, You know what happens If I change, add to anything else. Let's change it and see what happens. Invalid operator. Why is that? Because anything else is not allowed were allowed. Add minus divide or multiply. Anything else gives you invalid operator. So there you have it. With one function in how many lines that we have here in 23 lines of code. You have written yourself calculator in your browser, and in fact, you no longer actually need the form at all, although it's probably a good idea to keep it in there. But if you're using something JavaScript based anyways, um, using form to submit something to your server and have it come back sort of useless, so the form is technically unnecessary. And just to prove that, but something else in there There we go. It works without the form. No me to spend a couple minutes at styling these inputs and the select and the B button and the answer and stuff. If you want to stick around for that, that's cool, too. All right, so to style this, let's go ahead. And, uh, I'm gonna make some room. Answer can go at the bottom. Doesn't really matter where it goes. What am I looking at here? I want to change all the inputs. One PX solid. See, uh, padding who? As way too much. 55 pixels. Let's see what started. Look at here. Looks a little nicer. Let's go outline zero No outline when I click into it. Ah, what that's supposed to do this with? Select. There we go. No, but things were looking OK. Change of background color. Background color is equal to wait. It's going here and at a place holder changed that. But hover background color. Si, si, si, uh, Through with that, let's do something a little more interesting. That's go 81 515 Les shade of red on. Let's change the color too white. And let's also say that this button has a transition transition. The background color 250 milliseconds. Linear is also going to transition the color to take 2 50 milliseconds. Do the same thing, and it's also going to be linear. Let's say that fresh. There we go. Nice button. Uh, but if you got one thing cursor pointer eso let's change the ah border. One picks of solid. I didn't see what I did. See one tribal, five match the other colors. That's like a little bit better. Now we're calculate, Button actually sticks out. And what happens if we do this? Zero does it. Nothing there. Five. Do we want to change that answer? Yeah, sure. Why not? Text align. Center padding, 50 pixels. Background color. Didn't see 155 color f f f on size 54 And I'm not a fan of Ah, Sarah Funt. So let's say everything from family. Ah, hell Vodicka, if your computer has it, If you're on a Mac, you probably have Helvetica otherwise use area. Otherwise use Sands. Sarah. Cool. So this is where answer is going to be? Doesn't look fantastic, does it? I don't think so either. So maybe let's give it a padding. There we go. That's better. So there we have a very basic calculator and that's it. So thanks for sticking with me through this entire video. I've probably talked your ear off by now. If I haven't awesome. If I have now would be a good time to go. Take a take a break. Grab some food, gas, water, maybe go for a walk. It's good to get out and refresh your brain. Step away from the code for a little bit. I know it sounds counterintuitive, but stepping away from code actually helps your brain process a little bit better on there . When you come back, feel free to keep practicing or hit, continue and go to the next lesson. 25. Anonymous Functions: hello And this lesson, we're going to be talking about anonymous functions. If that sounds scary to you, it's because they are. Actually, they're not. They're not scary at all. They're just like functions, except they basically live inside of a variable. So to give you an idea of what we're talking about here, we know that a function starts with function and then you have your name, parentheses and brackets. Then it returned something, and essentially, that's a function in a nutshell. But an anonymous function is a function that does not have a specific name. So an example would be variable X is equal to function. And then you could say alert, ABC 123 Now I'm just gonna open this up, actually gonna get rid of this stuff, too, because it's no longer needed for this lesson. That was from last lesson, and I just open this file up in my browser. I hit F 12 to open the inspector. Nothing shows up. Cool. Okay, so how do I execute an anonymous function? Because it's a variable, right? It's not a function, but it's a it's a function inside of a variable. Well, it's really easy you execute it just like you would in normal function, only you can name the name is what the variable name is. So you have X. You put your parentheses at the end of it, just like you're calling a function back to your page. Refresh it and you have a B C. 123 That's your anonymous function. Now you're anonymous. Function can also take arguments. Remember the first time that we ever added numbers together in a function we used Number one and number two? Well, this is going to be the same thing. It's just console log, numb one plus numb to It's just simply going to return that in the console log. So save refresh. I get not number because it's missing parameter one and two. So let's go 45 54. Refresh. There we go. We get 99. So an anonymous function is not. It's not too much different from irregular function. The biggest difference that you need to know right now is that anonymous function is just a function that's held inside of a variable. Now, the second thing you need to know about anonymous functions are they are not global a regular function. When you type function some name like this that's global, so you can use that function in other function names in other objects in different in different sections of your code. And that's perfectly fine. But you remember when we wrote Var and Var was scope to a function, which means if we had function, ABC of our name is equal to test. That means that this variable is whole. Lying here is only accessible inside of the ABC function. Well, this is no different. So if we're running some sort of function, we'll call it anything it doesn't really matter. Add inventing here. So now I've got a function inside of a function now. The reason I might want to declare an anonymous function inside of a function is because this console log numb one plus numb to might not need to run anywhere else except inside of the anything function. So if I wanted to run this more than once, we 12 x 34 x 56 and I wanted to run this function anything. So what I'm saying is, hey, browser, trigger the function called anything it does that it creates another function in here. It's anonymous function and it's only ever gonna run in here. Let's check that out. There we go. 37 and 11. It added. All those numbers together for us. What happens if I do this? X 123 and 456 X is not defined now. That's because X was defined using the VAR keyword inside of a function, and that means it is stuck inside of that function. We cannot get it out now again. Why is that useful? Killed? Why would I ever want to have a function inside of a function that I can't get out? Well, because sometimes you have information inside of one of your functions that needs to be manipulated a certain way or a good example before bed, and you want to format your text a certain way. But that formatting Onley ever applies this one function well. Why declare a global function when it only applies to your one function? That's a lot of functions, but essentially the point is, why clutter up your global name space? Basically, why have so many functions out in the open, where they can be used anywhere when they don't need to be. You know, essentially, that is all an anonymous function is its function inside of a variable, But it has different scoping rules to it. And, uh, scoping is something we're gonna talk a little bit more about in the future. So don't worry too much about that. If you're very curious, you can hop on your Google machine type in JavaScript scopes other than that would've would like you to do for this lesson. Is creating anonymous function, not this kind. Create this kind of anonymous function and it doesn't have to be complex. I just want you to write one so you can get the feel of it and then have it execute. That's all. Shouldn't take you more than about 60 seconds. 26. Self Invoking Functions: already. We've learned a lot of what functions and anonymous functions. But what if we want to function toe load as soon as the page is done? Loading like when the script is done, just automatically executed? We don't want to give it a particular command. We just want it to execute as soon as possible. Now these air called self invoking functions. It's a function that is written, and as soon as it's done loading, it starts executing. Now these look a little bit different, and the syntax for this I'm not gonna lie. It's a little bit strange to look at it first, but this is a very common type of, ah, syntax it for JavaScript Javascript, one of these languages that sort of loosely written Teoh better itself, in a sense, so it looks a lot like this. You have function. And so some of this were familiar with this part. That's just a normal function. But then, when we wrap it in parentheses, you're starting parentheses here, and you're closing parentheses here, and then you call it just like a normal function, so anything in here will automatically run when the page action out with the page loads when this function loads because you can't technically have this in different parts of the page that are not running immediately there. So if we said alert floated and we go to a browser, we refresh your page just like that Now in her HTML, If we look at that, there's nothing in there that's calling this function. What makes us function self invoked is those two parentheses. At the very end, if we remove those, go back, refresh the page. Nothing happens. That's because this is just a section of code. And those parentheses say, Oh, you have to go and run that just like a normal function Just like an anonymous function. This self invoking function says, OK, well, this is loaded when it's done loading while these Prentice and say I have to go and do my job so it does goes and does its job. So why would you ever use this? Well, let's see what you want to do with some dine on some dynamic content just off the top of my head here. What if we wanted to win the page? Loads have the background color change so we would select our body. It's a variable body document, query, selector, body in a string, and that's going to select this. And then we say, Body that style background color, camel cased is equal to si won five. See you 1515 and because the text gonna be hard to see was really changing color as well, too. That and then let's also change the Inter html Welcome to my page. So if we look at the regular Ishmael, there's nothing on there. We go back to the page again. There's nothing on there. I'm going to hit at five. And as soon as this JavaScript is done loading, it's going to change the page completely. Just like that. Now we've written no CSS. We've written no, HTML. This is purely JavaScript. Now, that's what a self invoking function is. Should you use them all the time? No. Are there times when you want to use them? Absolutely. Yeah, Like, for example, if you're loading a parallax library, you know how you scroll down the page and some items scroll at a different pace in the rest of the page that's called Parallax, and in javascript, you might want to load that immediately. As soon as the page I This starts loading your JavaScript. You want that, too, whom start loading? Because it looks best that way. But there are other times where you might not want to like our calculator that we made. Why would that have to be a self invoking function? It doesn't. That's an event that is, when a button is collector. When the form is submitted, then that function triggers. So there's a place in time for self invoking functions. There's a place in time for regular or anonymous functions as well. So what I would like you to do for this lesson just create a self invoking function. Just go ahead and write it. You have access to all the code that we've been writing throughout this course. However, if you have the time, I would prefer if you could write this out by hand just so you can sort of get a feel for it. I know sometimes when you're writing in language, your fingers sort of there a little bit resistant as to like, Why would I put in parentheses here? And then why wouldn't I put put in parentheses here? Curly brackets it's good for your muscle memory. It's good for learning the type faster to be a little bit more productive. Um, and overall, it's just good practice. So if you have the time, I would prefer if you could write this out. But if you're a little bit short on time, feel free to just open up JavaScript at Js. Just toy around with this code, even if it's as simple as changing the A C 1515 to just black 000 I just want you to get some hands on experience with this before we start our next project. 27. The `this` Keyword: all right, so we have talked about functions, anonymous functions, self invoking functions. And now let's look at some of the properties inside of the this keyword the word this you can't see it, but I'm doing air quotes. The this keyword is a special, reserved word used for object orientated programming. So let's take a look at how this relates to a function. We have function where he's going to call it anything, and in here we use this dot variable name, whatever that variable name might be. But at this moment, that doesn't exist. Now this this keyword is used for grabbing any other information associated with anything with a function called anything. So if we do a consul adult log on the keyword this and let's just run this function can go to my page and I just refreshed. It gives me a lot. It gives me everything I can do with this. This is a very powerful word now we've seen lists before, but we have never seen quite an extensive list of what we can and cannot do. This is a very powerful thing, but in there is also the ability to add your own variables. Now, these variables that are connected to the this keyword are called properties. So any sort of variable inside of a class which is more advanced. JavaScript those air, called properties and functions inside of a class are called methods. Don't need to remember that for now. Maybe just put that in your back pocket for a bit. So what happens when we say this start number? It's gonna consulate? It's undefined. Okay, well, now that we know that it's undefined, we can say if this stock number and I'm just making up number, that could be really anything else you want to name. It is equal to strict comparison. Undefined. Then let's set this to something that's going to be zero. So this first Consul log should be undefined. But now we've defined it as zero. Now, if we console, log this again, here's what we're going to get. Zero under financier, just as expected, because computers, for the most part, run from top to bottom. Well, this didn't exist yet, but now it does. Now, this is no different than assigning a normal variable inside of a function. So why even use the this keyword? Well, first of all, it's a great introduction into object orientated programming that dot notation this dot that we see in all sorts of places, when we're talking about strings and we get the length, this is what we're doing. So now what happens if we wanted? Teoh invoked this function more than ones we could say. Every time this function is invoked, we do this dot number plus plus just increment the number by one. Give it to this. Get rid of this and console log this start number. So this is going to presumably showed the number one because it's not defined. Defined it as zero and either way, increment by one So lowest number this could be is one refresh your page. There we go. Number is one. But what happens if I copy this function like 10 ish times? It was actually born in tennis times. Look at that. We now see that this stock number has increment ID. How many times from 1 to 12. So now we're storing information inside of a function that's not being over written Every time we use it. Every other function that we've used every other anonymous funding herself, invoking function that we've written all the variables overwrite each other every single time. It's like a fresh slate every time you call it. But sometimes you don't want that. Sometimes you want to preserve some of that information. So now essentially you can save information inside of your function that is never over written, unless you want to explicitly overwrite it. Now the this keyword comes into play when it when you start getting into object orientated programming, which means you have classes, not just functions. Class is essentially a group of functions that work together for a common purpose. And when you start getting into that, the this keyword becomes very important because this refers to the entire object. So function anything this. Actually, it's not dumped out that this refers to your function. This that's what is talking about. So there's no assignment for this. This lesson I just wanted toe let you know that the this keyword exists. I don't have to do anything with it. Just know that in the future you're going to run into that, especially when you start learning things like Jaqui uses the this keyword ah lot and the this word at the this keyword is referring to be function in which it lives in. No, if you wrap a function inside of a function. So if you had another function, this keyword refers to this one. And if you ever wanted to use this keyword, referring to the anything function you would say variable and you call this anything but a common practices like underscore Tear underscored. This is equal to this and now inside of this function. What you can do is this dot name is equal to whatever. So again, you don't have to do anything with that just tucked away in your back pocket for now, because eventually we're going to run into that as JavaScript developers. And it's a very common thing. So when you see that don't freak out, all its referring to is its parent function. 28. Hoisting: all right. In this lesson, we're going to be talking about hoisting. So what is hoisting? Well, JavaScript has this unique little feature that allows you to use variables before they're even declared in many other programming languages. That is a big no no. Put in JavaScript, you can get away with declaring a variable later. It doesn't mean that you should. So if we just create little Devyn Rh email called Test Head over to a JavaScript at Js and we right variable A is equal to something parable be else we can then say document dot queary selector test dot inter html is equal to a plus. B, in fact, actually is at a space in there. A plus b save refresh, and it shows up. That's nothing new to us. That's because we declared a variable here, and then we assigned it a value. What happens? We get rid of that and declare the variable here variable a variable B. I hit refresh, and it's still loads. Now what we're observing here is called hoisting and JavaScript. That means you're variable whenever it's declared, is going to go to the top of its scope again. There's that we're that we're not quite familiar with scope. What is that? We're going to get into that very shortly. It's common. I promise you. Now what happens if we do this? You say this. This is something undefined. Now why is a variable be undefined? That's because the query selector is trying to use a variable a something and variable B. No, it's not that be doesn't exist. It's just that it doesn't exist yet. So it was declared because it was at the bottom. Here, variable be. JavaScript sees this as this. So while B has been declared, it doesn't have a value yet, and thus it's undefined. Whereas if we gave it a different variable that does not exist, see and refresh the page, we actually get open up. Our consul C is not defined. We get a legitimate error. So I go ahead and I undo that on the move this back up and everything works so essentially , what JavaScript will do is anytime you see far, it's gonna move to the top. Now let's wrap this in a function change text. Now we're wrapping this in a function. It's gonna work the same way it's gonna work perfectly as expected. What if we move far A and B again below the query selector? Well, it still shows up perfectly fine now. The reason for that is because far again moved to the top. Okay, so I've really beaten down this concept of moving to the top doing air quotes again. But what you don't know is that of our A and B does not break out of its function. Its scope is the curly brackets so far and be we'll only move up here. Which means of R and B. Outside of this function is not accessible now that goes with anonymous functions. It goes with self infocomm functions. Regular functions goes with any sort of sculpt in JavaScript on again. We're getting to scope my promise we're going to get there. But for the time being, it's good to know that when you declare a variable, it's not the same thing as a signing of value. To declare a variable simply means to create the variable name is like registering it. It doesn't mean that there's any value associated with it, yet it just means that it it's simply exists, but you don't know what's inside of it until you assign it something that could be a string inter float, undefined know whatever you name it. So that's the concept behind hoisting. Now when you're writing other languages like python PHP. Hoisting is not very common, but as a JavaScript developer, it's good to know that hoisting will do this Now. There's a best practice here whenever you're declaring a variable declared at the top of the scope, even if you're not using it yet. So if you have a bunch of code in here, whatever that might be. Even if Variable A and B do not have any sort of assignment to him, they don't have any values. Declare them anyways. Now there's two reasons for that. Hoisting can sometimes lead to bugs. A lot of developers aren't aware that hoisting is a thing, and two, it tells other developers that hey, in this scope were using the's variables. They might not have values yet, but we are using them, and so that just gives other developers a heads up so they know what's going on a little bit sooner, so they don't have to read, you know, 2050 or 200 lines of code having all of a sudden think to themselves. Hey, where the heck is that variable like Why? Why is it here? Why is it not declared somewhere else? When they get into this functions, they know exactly what they're getting into. So that's your quick introductory lesson into what hoisting is. There's no homework. There's no assignment with this again. This is just one of those concepts that I want you to put in your back pocket. For now, it is very useful when we start learning about scoping how scope actually works and what it does on when we start talking about closures and what not? But if there's two things to take away from this, it's one. Declaring a variable is not the same thing as assigning a variable, and the declaration of variable always moves to the top of its scope. And to is that you want to declare your variables at the top of the scope or as early as possible, Even if you're not assigning it a value, just declare it 29. Try Catch Throw and Finally: Hello. Welcome back today in this lesson we're talking about Try, catch and throw. Now, in the simplest terms, try and catch is sort of like an if else statement. The only difference is is in a try Catch. It's not looking for a specific, if else is looking for any errors. And as a developer, you're going to run into a plethora of Eris, and sometimes you don't know what to do with them. Now a good developer will take that information, the error, and they will handle it. They will process it, and they will make sure that the user as a great experience even though there is an error, the lazy developer will just kill the script. And we see this a lot with PHP developers. And it's a terrible Howard that a lot of developers get into. But if you run into an air, you should be handling it. No, a try catch block looks a lot like this. You have try code in here and you have catch with your error in here. Now, what does this do? Well, before we get into that, I want to tell you a best practice. Do not nest your try catch blocks. That means do not put another try in your with another catch error that gets really messy. And that sort of negates the point of try and catch Instead, you want to write small try catch airs. If you're not sure that something's going toe, I give you the proper response then and only then will you write a try. Catcher. They're not as frequently written as if else statements, but they are incredibly important. And they come with pretty much every programming language these days. So let's give this a shot. Let's see what happens here. We're going Teoh, Try to execute a function that did not exist. I just saved that Refresh my page. I get nothing looking at my console. There's nothing in there. OK, but is there an error? So let's try this alert error dot message. This was what was returned to us. Does not exist, is not defined From here on out. We want to sort of stay away from Ares unless we're doing some seriously bugging, In which case that's fine. But a better practices either console log or just log a straight straight to the page. So in her index of HTML. We still have this test development, so let's go ahead and quit. Document clearly. Selector test done in her html ZX two error dot message Now when there is an error, it comes in the form of an object. And this object is where you get this dot notation. Now remember, back with data types. This was like 100 years ago. At the beginning of this course, we were able to access objects of data using a period that's unique toe objects. We can't do that with a raise. Arrays are the square hard brackets. Functions are the rounded rackets, the parentheses. And so whenever you see a dot, that's an object, we save us, go to our page said. OK, I just refreshed. And now in our test element, it says does not exist is not defined. But what other information do we get while we into a console log on the entire error object ? Refresh the page and the error that comes back is right here. You know, if you just want to console, log the air, you can do that to console log error and ever dot message. Show you what this returns. I just refresh the page and the error was a reference error. The error message itself is, Does not exist, is not defined now. What if we want to customize this? What if we said If one is equal to one, that's always true? One is always equal to one else. Physics is lying. Physics is a lie. If this is true, as our if the one does not equal one now in here, what we can do is we can throw an error, save that reload a page when we get a sample air undefined, cool. So we now know. But the error itself is a sample air. We know this because it logging the ever So now we have some sort of direction, weaken fully customizes and say instead of sentence for an air, we can say unknown user. And in here we say if error is equal to unknown user, do something in here, otherwise it's a different air. Now what we can do here is instead of returning unknown user back to the page. Users don't want to see air messages like that. Ah, and most users don't even know what things like that. Actually are they just think, Oh, that's That's weird. That's probably not supposed to happen. And it's kind of freaky for them. But for us, as developers, we know exactly what to do. We give them a custom error message. We say. Sorry, you're no longer signed in just like that. Now go back, refresh your page and it says, Sorry, you're no longer signed in. And the error message is unknown. User, that is data flow. Now we have something to work with. Now, to make this a little bit better. Let's do this name. Uh, yeah. What's your name? Variable name is equal to prompt. What's your name? And if name does not equal to some secret name, Let's but secret. We're going to throw in air. Otherwise, do something good. Will just say you are allowed in here just like that. Save. Refresh. What's your name? Well, we're looking for the name Secret says you are allowed in here. Awesome. Okay, so let's refresh again. What's your name? My name is Caleb, and it should throw me an unknown user error. And it did on known user. And because we knew what that error was, we were able to customize that and tell the years of them no longer signed in or that I'm a guest or that I'm not allowed or something along those lines, and that makes the user experience just a little bit smoother. We've commented here, throw a new air. Now we have one more in here, and that's finally finally goes along with try and catch. And what that means is, regardless of what happens in here, regardless of what happens in here, always run this next section. That's what we can do is we can copy this line and we can append to it and say, Let's add some HTML just ah, basic line break and right try Catch finally was run just like that Refreshing page. What's your name? Let's go. No, we don't want secret. We want something to show up. Caleb, sorry. You no longer side and try. Catch finally was run. Now we can redirect people. We can move them to another page. We can force him to sign out. It's now you see, we have a try, catch and finally, but we haven't if statement in there and that's totally allowed, you have as many FL statements as you want in there. The only thing you shouldn't do is put a try catch inside of a try catch. That's sort of a no, no, it's allowed. But it's a bad practice now for your assignment. But I would like you to do is create another try. Catch. Finally block. Just like what you see here, I want you to throw your own error. I don't really care how you get that air. You don't even necessarily need to prompt for any sort of information. You can just throw the error if you like. I know you're familiar with prompt. Already. I would like you to throw an error and then in your catch block, I would like you to control the data flow of that air. What is going on with us? How are you going to handle this situation? And then when the try and capture done running, you add your finally block and that can really be anything any sort of signal that states Oh, hey, the try and the catch are done. It could be on alert. You could be a council log. You could do some inter html change if you like. Whatever it is. Just get a little bit of experience with Try, catch. And finally, this is one of those things that separates a mediocre developer from a great developer. And it's also one of those fundamental programming concepts that you can take with you to other languages as well. The PHP, for example, a very, very common language, uses a very similar syntax to this, and the way that you flow your data is the exact same in almost every language. It's just you need to know how to write that language, that's all. But once you know how a try catch finally works JavaScript, you figure it out in PHP even faster. You'll figure it out in Python even faster than that. So go ahead, get a try catch finally set up in working. Don't forget. You can refer to these project files at any time. I give you the exact code that you see on the screen at the end of every lesson. And remember, if you have questions, feel free to ask down below, or you can hop on the Facebook page and ask us there, too. There's a lot of support, a lot of developers, and there were all willing to help you 30. Scope: all right. It is about time we formally learned about scope. Scope. In its simplest form is the variables that you currently have access to. That's all it is, so by variables. In this sense, what I mean is variables, functions, objects, a raise. Really, anything that you have access to is within your scope. And with JavaScript, your functions have scope to which means when you declare a variable inside of a function, it's considered a local variable. Now there is a big if statement around that, and that if statement really is how you declare the variable. Now we have two types of variables that we typically deal with. We have local variables and global variables. So when we say local variable we're talking about inside of a function and global variable , it means a variable that's accessible outside of the function on that can move inside of the function so that serve the global global variable is equal to We'll just put the Year 2017 and function test console dot log global variable, and we run that function an inner browser. Here we see 2017 so this is a global variable because this variable was declared outside of this function. Now what happens if we say variable local variable is equal to, let's say, next year, 2018? No, that's not far enough in the future, let's say 2028 and outside of the function we write council dot log local variable save, we get a reference error. Local variable is not defined. What does that mean? That means local variable is only accessible inside of test. Now that's because we use the var declaration when we use far that that is giving a local scope. Now, why is this global? Because currently, this entire page is the local scope and inside of this local scoped page is a local scoped function, and inside of that could be an anonymous function. Have you ever seen the movie inception? It's like that. How far down does the rabbit hole go? Well, technically, not that far, Really. Now what happens if we get rid of far and we just declare this as a global variable? Because without far this is global. Same thing happens now. Where you want to prevent is too many global variables. Variables are best off actually scoped. And I know this might sound a little counterintuitive when you can control the variable where they are, you're talking about a more secure, often aim or efficient application. So just because you can make everything global does not mean that you should make everything global. And in fact, in here I'm going to go ahead and put that far back in there. When a variable is considered local doing air quotes here local the local variable, let's say inside of a function it only ever lives for as long as that function is running. So when I call tests online, 10 from here to here is where local variable exists. Once this function is done running, it no longer exists. Now that's what a local variable is. What makes this a global variable? It's just that it's local again. Air quotes. Local scope is larger than the function and so that this variable is going to live for as long as JavaScript is running on the page. No, when we talk about parameters or arguments inside of a function, remember, we had, you know, someone to numb for when we were building a calculator. Things like that, these are automatically local. So this is the same thing as saying var numb three and these will only ever live inside of the function for as long as the function is running. Once the function is not running, the's no longer are declared or assigned anything and it starts over. So when you run this function again, it automatically starts over. Now we knew how to break over that because of the this keyword. And you can sort the this keyword with additional properties to a function now jumping back to global variables. When we have a variable out here like this, this belongs to the window object. This is the same as saying window dot global variable is equal to Because javascript binds to your page and your window, you are now creating a global variable. So this is technically the most global variable that you can create. So let's create an example of a global variable. So we have global counter is equal to zero function ad and all we're going to do is global counter plus plus and when we type ad over and over and over again and at the end we counsel log global counter Well, this is going to increment by one and and starting at zero. So this will be 1234 by so one going back to it could refresh the page. We get the number seven. So why is that? We can use a global variable inside of a function, but we can't use a local variable outside of a function. Well, ladies and gentlemen in javascript that is called closure. Now, what makes closure a very beautiful thing is that you don't have to pass all your variables through your functions. Now, if you write any python or PHP to the exception of global variables, usually that comes in the form of request or or like when a form is submitted, the post object. But any variables that you write typically are not global, but in javascript they can be now with great power comes great responsibility. Make sure you don't overdo it. But what makes us really nice is with global counter. We don't have to add global counter to our parameters. We don't have to add this start global counter plus plus like we did in previous examples. We don't have to do any of that. It does it for us now. Additionally, we can also create another variable inside of this function called local counter and we can do whatever we want with this. Remember, this is hoisted. So this is essentially moving to the top anyway, so declared at the top best practice and we can do whatever we want with local counter. Now local counter will only live for as long as this function runs and it will live several times. It will live and die with add It will live and die with this ad. It would live and die with this that it will live and die with this and so on and so on. This whole process is called closure and closure is allowing globally scooped variables inside of essentially functions or anything else that has a smaller scope. So now we're their scope. We have global scope, we have local scope and we have closure. Now, if all of that was a teeny bit confusing, I'm going to create just one more example One super quick one and it's not even going to be really coating is going to be pseudo code, right? So we have variable one and this baby is global. Then we have a function and anything that we start with. Fire in here is local. Now, variable. One can automatically get passed into make a little arrow here. Awesome. If I could just like that. So variable one is automatically passed into the name function so we can access this inside of here. But we cannot access any local variables. Variables to start with, far from inside. The function outside of the function just doesn't work. So that gives functions a little bit extra privacy while giving them the advantage to reach out beyond their own world and grab anything that was assigned before them. Now, your assignment. I hope you're ready for this one because this one's gonna be a doozy. Your assignment for this course is to do absolutely nothing. All I want you to do is observe what has happened here. And next time you're looking at some sort of JavaScript, I want you to think to yourself. Is this variable local? Where is this global? Why is it global? Why is it local? Just that's all you have to do. Just think to yourself. Half of the battle with programming and Web development is really just thinking and debating and figuring out how it works inside of our heads. So that is scope. If it didn't make sense, you know? Don't sweat it too much. You will get a hang of it. I know you will. 31. Project: Making a Modal: hello and welcome to your second project in this project. As you can see from my screen, I want you to do something that frameworks are doing for you. A lot of people rely on frameworks like boot strap Foundation. You like it. And I'm here to tell you that honestly, they're unnecessary. If you know your JavaScript in your CSS, you don't need a framework ever. And so my goal as a teacher is to make sure that by the end of this course, you don't look at bootstrap as the be all and end all solution because, frankly, it's not. It's good, Don't get me wrong, and it comes with a lot of nice things that are really fast. But as a developer, you should also be aware that these air also very bloated. And even though you can customize them, you can also write your own framers from scratch. It does a little more time, but then you also own your project completely. So let's take a look at a motel. According to bootstrap, motels are streamlined but flexible. Dialogue prompts with a minimum required functionality and smart defaults. We're gonna build about half of this technically eso. Here's an example. Here's a live example. Okay, launch demo Moto and it's just this, like this little box that shows up in your page. It's like a pop up inside of your page. You've seen it a 1,000,000 times, they're all over the place, and it's usually you're on some sort of Web site, and it's like, Oh, hey, you subscribe to our newsletter and this motile pops up in your face. Here we have some basic functionality. We have a title. We have our content, are text, whatever that's going to be. That should be HTML. We've got to close and a save changes button. But that same save changes. Button really is just another close button that runs another function. We're not talking about call backs, so all you need for this Moto is a title, a close button, a content area and a close link or a close button at the bottom. Don't worry about the save changes now, unlike our first project, I'm not going to help you too much with this one. If you get stuck, you get stuck, he asked questions in a Facebook group, or or down below. And that's perfectly fine. Remember, Google is your friend Stack. Overflow is your best friend. Ah, And try to only use what you have learned. If you know more JavaScript beyond what you've already learned to the scores. Awesome. Use that. But to create a motel, you don't need anything else. Um, and I just want to clarify on the simplicity of this model that you should be creating. It doesn't need to have animations. It doesn't need to have a fate. It doesn't even need to have this nice, dark ish background. It just needs to be a little box that pops up on your page. That's all we're going for. The rest of it really is styling on. We're not looking for styling. We're looking for functionality. I can tell you right now you're going to need at least a couple functions that are going to take a couple different parameters. You're going to need a close function because you need to close the model. Somehow you're gonna need an open function that triggers the ability to open this motile, and you're gonna need to be able to customize the content that is inside of it. So the title and the content on that should be HTML enabled. So why this might sound like a big project? It's not that big. It's just a little. It's different now. If you're wondering. Well, Caleb, why would I code this when this is accessible to me? Right now, here's the answer is because a great developer we're not talking about good developers. We're not talking about junior developers were terrible, great developers. That's what I want you to be. I want you to be a great developer. And great developers do not rely on frameworks. Frameworks are nice, their tools, they're handy. They help speed up production or development. But at no point in your development career should you solely rely on a framework. And so the idea is by building this, you will understand a little bit more about how motile actually works. And you'll also sort of wean yourself off of the essentially. It's going to be, um, you in the future, thinking that you should just stick with Bootstrap Now as a caveat, it is good to know Boot Strap Foundation. You get all these other frameworks. Those are fantastic. But again, as a great developer, don't need to rely on these. And so this project does two things. One, it teaches you how to make a motile very important. And to it teaches you you don't have to rely on other people's coat and that you are in fact good enough to write your own code to make this happen. Now, I know that you can do this, so go ahead. Guess are with us. Don't feel pressure to to make it perfect. Nobody's judging you on this. I'm not scoring you on it. I just want you to build something really cool. So go ahead, get started. Don't forget questions down below or preferably and Facebook Group, and I'm gonna go ahead and create a quick little motile. It's not going to be awesome because, well, this is not supposed to be an awesome motive was just supposed to work on. I'm going to record myself making it so you guys can see how I ended up doing it 32. Project: Making A Modal Solution : Hey there. So this is going to be the solution to making a motile now, just like the project before, I didn't plan this 10 I don't know exactly how I'm going to do this. Uh, I'm honestly just going to wing it. Chances are kind of like a ton of mistakes. Thing is not gonna work to make a bunch typos. And it's sort of good, because then you can see how another developer works and that, uh, other developers with tons and tons, years and years of experience still make silly mistakes. We all dio um so without further ado, I guess I should just get cracking on this. So feel free to observe spectate. We have some comments, if you like. You're not gonna hurt my feelings. If you tell me I did something wrong or I spelled something wrong or, uh, you know, anything like that. So anyways, let's get at it. So we're building a model. First thing we need to do is we need a motile container. Now, we have two ways to do this. We can let Javascript create a new model every single time you want to open a motel and we have the second way, which is use one mortal and you re use the code that's on your page. We're going to go with option number two Greatest option. But for what we're doing again, this doesn't have to be elegant code or anything. It just needs toe work. So let's start with mortal. I do everything with classes. I tend to try not to use ideas unless I'm teaching. So we have our full motile here and here. I know we have motile title. I expect that run and I was in place that in there and here I know we have a moral content se content there, and we also have motile footer, which is where the buttons were se flutter. Actually, I'm not gonna do that one. I'm gonna say motile button and I'm also going to call that motile close close model. So now we have a section for our title for a content and for a close button that we also need to be able to open this mortal. So let's create a button button type. Just a regular button will do open motile now, using only what we know to say on click open motile its function that we have not created yet. Okay, so I opened my page and this is what I have. That's not right. So unfortunately, can't get away without some extra styling. So here's what we're going to do. Motile What is in the motor? Well, it's a fixed position, right? The talk is gonna be 25% left is going to be 50%. Um, do you want any sort of transition? No. Let's do translate, though. Uh, no transform, Translate. X goes left and right. Why goes talking bottom minus 25%. Let's make a border one picks of solid C C C. Background color Also black. And just so we know all the Texas motor is going to be black. Cool. Let's look at this. There it is. I didn't give it a width. What happens of any 100% here? Okay. Ah, and actually, what that's supposed to be is I believe that's 50%. It's been a while since I've made one of these, uh, with 50% again. There we go. Dead center. Now your title content. Motile Ah motile title font size 19 pixels. Border bottom one picks of solid. See, See See if you don't want to watch me do the CSS, that's totally fine. You can skip ahead at this point time. I just sort of assumed that, you know, CSS um here, we're going to do padding 20 pixels and total footer. That's not how you spell footer Order. Tough one pixel solid zzz. Now see what this looks like? Yeah. All right. Good. Let's add a little padding to the title and the better radio. And there it is. Cool. Okay, so now you need to be hidden. Explain un refresh. Their ago open model didn't do nothing because open water is not to find. But we know why it's not to find function open Motile Now the only thing we want to do here is we want to select our model and we want to make it visible. That's step number one. So we said variable model is equal. Teoh document dot query selector motile and then motile dot style display is equal to block . What would happen? There is our moto. So now we have something that's going to show up on top of our page now. We can't see it yet. and actually what that is that index of 10 and to our body just so that we can see that there are different layers. The background color is going to be read ready brown on the color is going to be white. There we go. Look at that. But now we can use closure and scopes to our benefit, because why declare this over and over again if we only ever need to declared once because there's only that one element on the page. So let's try this refresh. There it is. So if we wanted to make us talk gullible, ka global not really sure to say that, we would say if the motile style dot display is equal to block, then change it to none, or if it is none changing the block. We're not going to do that right now, though instead, what we need is to add the title, the content and a close button. That's are the close button, because that's probably easiest close model, and all we do is motile dot style dot display is equal to none. All that does is hide it again, and in here we can create a button close motile and the class, not the class. The own click event is going to be close. Motile refresh Veg opener Motile Closer Motile opener Motile Closer Motile Awesome! That's working now We're almost there now A title and content. How do we a title and content in there? Well, if we're opening our motile, there should be a title and content in there, Right? So it's sad Little title. Little content. Now what this is going to do is change the title and the actual content inside of the motel . So here we're going to create motile title. Don't Inter html is equal to mortal title. Now we need to go into clear this again. Um, it's actually cover this over because why type it all over and over again? Total title and is the same thing for the content. Little content just like that. I'm here. Do you mortal content and what happens when we click this? Well, look at that. That should not be surprising to us. These are undefined because thes are currently not defined. Let's go back to our HTML and open motile title here. Content here. Refresh your page. Look at that title here title here. That's not good. Why is that? Remember a couple lessons ago when I told you to be careful about copy and paste. This is why this happens to all of us. I copied and pasted the guy too far ahead of myself And it should have been mortal content , not mortal title. Refresh the page. Try that again. There we go. We got title. Who got content? We got our clothes motile But now let's say we want that little extra little times symbol in all over motels. Well, we could put it, uh, in an element somewhere and change a bunch of her JavaScript or we could just depended to our title. Uh, not class. I want to click as Exoo Close motile Uh, why would I want spend? Why not button expanded work? Fine, but a button has a little extra styling that we can leverage there you pre fresher page open motile Look at that works just the way we had expected And there we go in just a few minutes We have a motile off and running 33. Project: Making A Modal Solution Part 2: Now again, this is not a beautiful motile by any means, but it does the job. So let's go ahead. And just because this was so quick uh, let's make it talk gullible. If mortal of that style that display is equal to block then pipe motile else show model. So that's the show. And this is the hide option. Now we could hide the mortal by hiding here. But what about that rule? D r y don't repeat yourself. Look at that. Two pieces of the exact same code fly Run that at all. Close motile, refresh the page. Look at this. This talk goes now is that beautiful? Now the benefit to using functions and we can see this clearly here is if every time we close the model, not only did we want to change the display to none, but what if we wanted to reset the inner html off the content and the title? So I'm going to take this copy this over and I'm going to reset these So the motile title and the metal content are now going to be blank as soon as it closes. So let's take a look. Our code Look at this. Our models display is block. We have a title. We have our content in there. What happens when it closed us? Well, the title is supposed to disappear. The content is supposed to disappear. Look at that. There's nothing in there now. That was a fresh motile for whatever comes next. And we leveraged scopes and closure. In fact, we don't have any local variables. Now the benefit to this is Check this up. We have one function here that grabs theme. Auteuil. It's used here, uh, where it's used three times in two different functions. We only ever declared at once. That's closure for you. Now we have some reason to believe enclosure. What about Little title? Same thing that's only used twice. But once in two functions and content. Ditto. Same thing. Now what if we wanted to count how many times and motile has been open? Well, let's do this question, uh, display account and all this is going to do is we're going to create a new element in here span mortal count, and it's going to change. It's gonna select first like, uh, the motile count span and change its inner HTML to a number. Now, this is one of those times where again I was getting to head of myself and ah, putting this in a function is actually unnecessary. That's just going to create more bloat. So any time the motel is going to be shown, we're going to increase this number. Now what we can do, we can use this. I'm doing air quotes here this and say if this dot mortal counter does not equal groups is equal to undefined thought. Motile counter is equal to zero now, every time that the model is shown, we can increase this by one, and we can change the energy she male to be whatever the counter is. Now, let's go back to a page refresh checker council. No errors opened ones toggle close, open twice toggle close, open three times. And this is just going to happen over and over and over for as long as this page exists. So there you have it. You have your own working motile. It lays on top of other content. And actually, uh, before we do anything, why don't Why don't we little paragraph and I'm just gonna place a ton of these on the page . It just Lauren have some text. You're not missing out on anything. And when I open up my page and refresh Look, I have all this text in here and what happens when I open my model? Look at that. Stays right on the page with us as we scroll until we decide to close it and we still have that counter. So there we haven't we have if full working motile it doesn't take callbacks. And the only way you can really pass parameters to it is in the HTML, which technically is limiting. But there are javascript ways around that. We've used closures. We've used just two functions. We have written this entire thing in 32 lines of code, and it has taken us not very long at all. So you see, my point was, when you're using a framework like bootstrap, don't get me wrong. Bruce Trump is amazing. And there are incredibly talented and smart people working on frameworks like Bootstrap. But U s A developer do not necessarily need to rely on them. In just a few minutes, you made your own motile, and that means you have full control over it. to modify it, to break it, to fully customize it not just the styling, but how it acts when it acts. If it should automatically close, you can now control all of it. You control every aspect of that, and that is very powerful. And that's where the power of being a developer really comes in handy. Because, frankly, anyone can learn how to use bootstrap. But not anyone can learn how to write their own motile. So there we have it. We have our first moto. Feel free to dissect this coat. If you want to actually even try to make this nice or make it better looking, give it more functionality. If you're familiar with callbacks, give it a callback. Uh, see what you can do with it. Um, if you're afraid of breaking code, don't be because you can always read Download this. It's totally fine. And more than anything, what I really want you to gain from this particular project. Aside from practice, writing more code is the ability to look at yourself as an actual developer. And in the next lesson, I'm going to talk a little bit about imposter syndrome and what it essentially is, um I'm not sure I have a solution for it, but I'm gonna tell you my views on it. It has nothing to do with writing JavaScript. It just has to do with being a developer. But as a developer who's learning JavaScript, you have a very high probability of running into imposter syndrome. It can affect your performance as a developer. I can hold you back and lay from taking on opportunities that would otherwise be extremely exciting for you on. And I don't want that for you. I want you to be able to take what you have learned and apply it and be the best damn developer you can be. 34. Imposter Syndrome: Hey there. I want to take this opportunity to get a little personal. Uh, with you, I have seen hundreds if not thousands of developers go through this thing called Imposter syndrome. Now Imposture syndrome is essentially just a mental hurdle. That's when you say it a mental hurdle that makes you think to yourself I'm no good. I'm not as good as other people. What if someone discovers that I'm actually not as good as they should think that I am or it's really just a lot of doubt, Um, and it's not something that you I need to pay any attention, to be completely honest. And here's why. If you're junior developer, well, everyone started off his junior. Nobody started off as an expert. If you're an intermediate developer, that's usually where I see a lot more on pasta syndrome come into play as people who have had a little more experience with JavaScript and python or ruby or go or PHP or whatever languages there, they're learning. And ah, they think that other people are gonna find out that they're not as good as they actually are. And Senior Debs, the ones that managed to stick around for a long period of time. Um, tend to break through imposter syndrome. However, they, uh, they don't all succeed, and a lot of them tend to toe bury it very, very deep. Um, and they just sort of live with that soul crushing thought in the back of the head that I'm actually not as good as what people think I can do. Like just I'm not as good as I should be. So no matter where you are in your development journey, you might. You might not face imposter syndrome. But if you dio my advice to you is to shut it down. Just ignore it. There's there's not really any way that you can get around it, except to really start believing in yourself. And the only way you can believe in yourself is to write more code on. The only way to get better at writing code is to write more mistakes on. The only reason that Senior Debs, our senior Debs, is because we have written a lot more mistakes than you have. And to be completely onus, it's human nature. When, when you're learning something new, you're going to make a lot of mistakes And you have Teoh because humans only learn one way . That's by making the six humanity for as long as we've been around. It's always been trialling there. We try something, it doesn't work. Oh, shit. We go back, we fix it, we try again and we make the small little increments to eventually one day we get really, really good at whatever it is we're doing. So whether you are a good developer, you are not a good developer. At this point in your career, if you're taking this course, you should not be concerned with that. What you should be concerned with is getting a lot more coding experience under your belt. Make mistakes, make him fast. Don't take it personally, move on it, a rate get better. And that's all you can dio. So whenever you have that thought in your mind that says, I can't do this, I'm not good enough. Someone's gonna discover they're not actually a developer. All I can say to you is this. Ignore it, try to ignore it. Don't take it personally. But I've seen a lot of developers do, and this has been quite helpful to them. It is instead of letting that hold you back. They take new opportunities. So when a when a company or when an employer caused them back and says, Hey, we got a job for you is a front and JavaScript developer. But they're still jr Are they scared? Yeah. Heck yeah, there. They don't know what they don't know, and that is extremely scary in tow. All humans, that's very scary. But they did the right thing by taking the opportunity. Because as soon as you start working with other developers, as soon as you step foot in another circle of developers, whether you're employed with a company or not, you're expanding your regions. You are expanding your skills, your expanding everything you're learning. You're going to start learning very, very fast, and that only increases how much you're worth, and that only increases how much you are worth. So I suppose what I'm really getting at here is imposter syndrome is a very common hurdle. That's what I called earlier. It's a very common hurdle, and the developers who get through it those are the ones who change the world. Those are the ones that work at Google Facebook. Those are the ones who get employed. Those are the ones who they have a lot of confidence. They know how to code those air. Also the same developers who are going to tell you that there's no way you can remember everything you can't remember. Old of JavaScript, all of python, all of PHP raw Ajax, Jason, my SQL Post grass databases. All of CIA's CSS three html um, frameworks like Django Flask, Larry Bell Symphony, A boot strap foundation. You I kid, you just can't remember all of it. And that's OK, because what a lot of developers, the good developers, the great developers, the intermediate to senior ones who have faced things like this. They will tell you straight up that being a developer, being a great developer doesn't mean that you remember every little bit about programs. You understand higher concepts and the smaller things you tend to forget over time. And that's fine. It's just like learning a language. If you don't use it, you lose it. But getting it back is as simple as hopping on Google and typing in JavaScript, hoisting. Someone's talking about hoisting and you don't remember what that is. That's fine or javascript anonymous functions, someone talking about anonymous function and you're like, Oh, I don't remember what that is. You hop on the Google machine. You type in Chapa Script Anonymous of functions. You take 30 seconds to refresh your brain, but what they are and all of a sudden you'll go, No, I know what that is and you're back to where you were. But here's the kicker is to be a great developer is to not memorize everything. It's not to be an asshole to other developers. It's not to tell people they're wrong. It's not to even teach other developers how to write JavaScript to be a great developer. I'm not even kidding you is you need to know how to ask questions. You need to know when you're wrong. In which case, when you're wrong, you go back and ask questions. And the third point is you have to know how to Google that that is the secret. Not even kidding you. If any developer says that they don't Google anything, I can tell you right now that they're lying and you want to stay away from them because they're a bad influence on you now. I'm not saying I don't know how a lot of boat programming I know a ton about programming. I've been at this for almost 20 years now, and I can do a lot of really cool things in a very short period of time. But does that mean I don't ever google anything? No, of course not. And my better at certain languages than other languages. Yeah, absolutely. Are there other developers other that are better than me? Yeah. You bet your ass there. Are there developers out there that make me look like an absolute rookie? And that's OK. I'm very well rounded in a lot of different languages. And the people who can outdo me are usually experts in one particular language. And that's fine. That's how life works. You would rather have a surgeon operate on you to remove your kidney or something, then to have just a general doctor look at you and take out your kidney right? It's the same thing. Same life concepts apply to programming. So whenever you're you're facing imposter syndrome, if you dio, not everybody does. But if you do start basing poster syndrome and you start thinking that you're not good enough, feel free to post in our Facebook group. Maybe just say that you're having a bad day or something. Maybe show off some work that you're doing on. Ask for some feedback, but don't ever let it hold you back. If you let it hold you back, you are letting yourself hold yourself back. And the honest truth about today's world is there are not enough great developers. There are a ton of bad developers there ton of people out there who are good developers, but they're impossible to work with. And there are not enough great developers out there who, when they're wrong, can take a step back and say, Oh, I'm wrong. How do I do this the right way? And, you know, put their egos. I'd actually learn from something. So, in essence, to be a great developer, you don't need to know everything under the sun. You just need to know where to find the answers. And whenever you're having a bad day, just ignore the thoughts. Talk to someone about it. Being a developer, sometimes get a little bit lonely. Um, and that's universal. That's universal. And you just want to make sure that you can get through it because sometimes you're gonna have really bad days, and other times you're gonna have fantastic days. Sometimes it's an emotional roller coaster of code. Um, and sometimes it's hard to balance that out, so you need to find that balance. So whether it's a support group like our Facebook group, or whether that's friends or a meet up in your city, um, or maybe that's just stepping away from your code for for a day and just, you know, letting your brain cool off. Whatever it is, find out what works best for you on. Just keep on keeping on. So, yeah, imposter syndrome. If you ever notice it lurking around in your mind, pay no attention to it, just keep on keeping on. 35. Arrays: Alrighty. Welcome back to Javascript. Essentials. In this last, we're gonna learn about a raise. We sort of have learned about them already. But I want to get you a little more familiar with loops because loops that if you don't come from a programming background Ah, loop is basically a a set of code or a few lines of code that keeps running until it doesn't. I know how vague that sounds, but it'll make sense when you start learning about loops. But before we do that, let's go out for the joke. Why did the programmer quit his job? Because he wanted a raise. Anyway, Sorry I couldn't resist. I love that joke. Okay, so an array, as we know, is basically just a list. Right? So we have, uh 12 three, the area we haven't already. And when we counsel dot log A R, I open this up in the browser, I hit f 12 here. We have the array. One quick thing to know from our last code lesson to this one. I just commented out the motile and I put the moral code into motile dot Js eso that's there for you. Whenever you want that? Um, I figured that it's probably a good idea to keep that in the long run just so that, you know, if you ever wanted to expand on it or just play with it or, uh, you know, we get your your hands little dirty with, you know, some raw JavaScript. Yeah, that's that's a pretty good place to start. So I just commented that code out, and I kept the CSS the same. So that's why we have this background color on the find is going to be white anyway, moving on. So I console log the array, and I have 123 and the keys are The indexes are 01 and two. Remember, computer, start counting at zero. So why is this important? But because we didn't formally learn about a raise yet, we know that array or air are zero is going to be the 1st 1 because this one is zero, and this one is one. And this one is too. We know that because when we console log, the browser tells us exactly what it knows. Okay, Great. So when I console log one. What is that going to show up with. If you said to, then yeah, you're correct. Now why are raised important? Well, because holding lists of information can make programming life a lot easier. And as an example, let's look at a very basic loop before loop. So we say four variable I in a r r and what I usually means Whenever you see I it means index. And this is just saying for whatever index is inside of array and gives us these values. So just like a function we can use index inside of here. So what happens when we console log Index? Well, now we have that 01 and two, which match with that. Actually, with this 012012 Now we have those those accessible to us. But what if we console log A. Are are from this four loop. It's just printing out the same thing three times. That's useless to us. Where it becomes valuable to us is when we Consul Log Ahrar and we put index into the array brackets. So now this is going to look through each one of these that is going to ask for a RR zero ahrar one air are too. Let's go back, Refresh. There we go. 123 Now we have these values. So now we can work with this information. I'm gonna go back in here and create another element called test and variable. Test is no text test is equal to document Dart query selector. I de test and test aren't inter. HTML is equal to whatever currently is. Plus, that's, um uh, html in there and then Ahrar Index just like that. So, no, What's pages going to think it's doing is it's looping through each one of these and for each one is going to add a new line for whatever the index is. So is going to start with a new line because this is the very 1st 1 He's going to say one thing on the new line to that on new Line three. Let's check it out. Refresh. Just as expected. 12 and three. So now what happens if we put an array inside of an array? Well, let's take a look at that. Let's do far. Array two is equal to one, but instead of two, let's put another Ray in there. We have two points. You know that's actually taking numbers. It's gonna look better. 2.1 2.2 to going three. And then let's continue with just a regular array value. Oh, council dot log air are, too, and that we have our first value is one or second value is an array, which has three values and 2.12 point to 2.3, and we have our third value, which is just three. So now if we wanted to get the value of 2.2, all we have to do is look at this and say OK, well, I know that I have to get air are one because that's what this array is, right? Sorry. Air or two? Um, in fact, let's rename that Clinton knew or a so we know it's not going to be zero. We know that this whole section here is one, and the section here is to, but in here is also 01 and two. I was gonna comment that open keep it in here because it's quite relevant. So if we wanted to get let's say 2.2, we would say council don't log new array. Well, which one? We're looking for? We're looking for zero. No, we want one. And then next to that one, which one do we want to? We want 2.1 is zero is the 1st 1 to point to just ignore this part, which is number one or 2.3, which is number two. Well, if we want the middle one, we go with one. No, common that out and show you that it works. We got 2.2 just as expected. Now you can put as many arrays inside of any amount of raises who want Just know that it gets more and more complicated. It gets harder for your brain to, uh, organized what's going on? And oftentimes you're going to have loops inside of loops. And if you wanted to print all of these values out, that's exactly what you do. Because what happens when we go back to our page? We get 123 that's for the wrong race. So let's do new right here. And where we changed it here. We also have to change it here. Savoury fresh and now with the page has done has printed each value on a new line But because this is an array, JavaScript immediately thinks, Oh, you probably want a comma between each one, which is not technically true. Now, how do we know if this is an array or a string or anything like that? What weaken Dio is console log New Array Index constructor, say that. Go back to our page and, well, look at that. We have string array in a string. So what happens if we only wanted an array inside of an array? We said, If new radar constructor is equal to array, remember, this is case sensitive council don't log New Array index Now, this should ideally, Phil throat everything that's not in array inside of this. So it's gonna it's going to ignore one and three, and it's only going to show 2.12 point two and 2.3. There we have a 2.12 point to 2.3. The other two are, unfortunately, artifacts of what we're just working on. So to make that clearer, there we go. Now. If you wanted to see if it was a string, well, what we saw before instead of array is strength, and this will filter out the arrays. Now we only have one and three. Now, that's a quick example of how to use an array in a very basic for loop. We're gonna talk more about loops exclusively just because they definitely deserve their own lesson. But the array here is is very important to know that a raise our lists and inside of these lists, you can have more lists. So I'm just gonna leave this code here so that you can take a look at it, mess around with it, explore its do it every like with it. And in the next lesson, we're going to learn a little bit more about objects, and then we're going to get into loops. 36. Objects: already Welcome back and last lesson we learned about rays, which are basically just lists. And today, Or I guess, in this lesson we're going to learn about objects. Now we know that JavaScript is an object orientated programming language. But do we really know what that means? In a sense, yes. Well, we have been using, um have not really been objects we have you is a little bit of object orientated notation when it comes to functions and using the doing air quotes here, the this keyword there are classes. There are functions and in their object variables or object data types on these air, all technically called objects. And that's because javascript is a very large, dynamic language that I let that lets you really control every aspect of it. So what we're learning here is a data type called object. So, as an example, variable object. An object is not a reserve keyword, at least not with a lower case. Oh, anyways, and remember, it does the whole curly braces thing, and we have a key here. So in fact, let's not call it objects called person. And let's create a person because objects have these things called properties. So a person's name and we declared by adding the name. It doesn't need tohave quotations around it, although if you do put quotations around, it's not going to hurt either. And then instead of an equal sign, you put a colon. Now your value has to have quotations around it, or unless it's like a number, in which case it doesn't. But for this case as a name, it does. So what is the name going to be, Let's say, even musk And what is his age? I have absolutely no idea how old is. I don't know. 45 maybe beats me. Technology was he invented? Well, he's invented more than one thing. He's working more than one project. Uh, so a string just isn't gonna cut it unless we wanted to create a comma separated list. Basically like test test to test three, right, um, and then explode or split that list by comma and space, which my opinion is a bad idea. We might as well create ah list. So here's a fun fact. Objects can hold lists in their properties. So tech do you work on PayPal, which was technically called X dot com. He's working on Space X. He has worked on the Hyperloop. He's worked on Tesla. Those were just four of the biggest successes of his life, probably, but there are probably a lot more, as you tell him, A fan of this guy. So what happens when I console log person? Yet? Object name is equally Elon Musk, ages 45 tech as an array of four different names. So here's something interesting. Remember the last lesson when we had an array and everything was kept in order? Well, fun fact objects don't preserve your order. Eso don't ever rely on that. In fact, objects aren't meant to preserve the order. Objects are meant to be key value pairs. So where we see tech, we have PayPal, Space six, Hyperloop Intesa and our code is going to be in that order to we have, I mean to get back to it here about Space six Hyperloop and Tesla in that order. But our object has age come before name. That's not right. And it looks like it's just being in alphabetical order right now, but the browser can interpret that in any way they want on. We don't have control over that. So don't assume that any object is going to preserve its necessary order. Nor is it a good idea to do that anyways. Now, if we wanted to get just the name of somebody, all we have to do is type, not their person, dot name, and we get the name. So as an example, we can say document dot query, selector test that Inter HTML is equal to and we have the test here because we wrote this in our last lesson. I just moved the file over to be in this this lesson. So Index study. She feels the same. Refresh fish. There we go. We have Elon Musk now What if we wanted to say person is how many years old? I don't know person dot age Let's put that on a new line. It's getting a little crowded there. Here's old and it has started. And what if we did person dot tech dots? Join Comus face. Save that and let's move over to the page. You lot of muskets 45 years old has started. Got a space there but says papal space X Hyperloop Intesa nuts. It started very of space done. Now we've made a sentence by contaminating different parts of this object. Now it doesn't stop there. Objects can also hold functions. We know about anonymous function. So why can't we run anonymous function inside of an object? So what if we wanted to change that person's name? We could create a function in here called I don't know, change name and that is a function and whatever the name is going to be, let's call it a new name and we changed this dot name is equal to new name now. You don't have to return anything in this function. I generally return this because returning this allows you to typically in most languages change or functions together. So we know that if we have a run person dot name, we're going to get along West. But what if we change that name? And we said person got changed name, too? John John Man, because I'm not feeling created. This famous right now apparently refresh the page. John John Mann is 45 years old. So now we have a function attached to an object. We ran this function. What if we wanted to change his age change age function. New Age should be an integer, preferably this age is equal. Teoh. New Age Return this And what if I did change age and 12? Look at that. John John Mann is 12 years old and started papal space X, Hyperloop and Tessa. Wherever this John John Mann is, he's very impressive. You can see that we started off with default information here. Elon Musk was the name. 45 was his age. We changed his name. We changed his age before we spit it out to the page using inter html. And when we did that, we change the value here. So, as an example, let's console log person. So I just want to show you what it looks like before and after. So I come back and I refresh my patient here. I don't even have to expand it and just show you that the name of the Want mosque has ages 45 but the second time around, it's not. It's changed, and that's the power of an object. So objects that not only hold information but they can change. They can hold ways to change that information. Now, with an object like this. We can also go ahead and we can change the value manually. Person dot h is equal to 156. Save, Refresh. And here we go. So it was 45. It was 12. We changed it. 256. And the page says 156. What if we What if we wanted to add something new? Okay, person dot Children. How many Children does this person have? Six. Maybe. Let's go ahead and console. Log this whole person again for 1/3 time so we can see the change We have Elon Musk, 45. We have John joined and he's 12. John John Mann is now 156. And look at that. He has six Children. So now we have added to this object. We've added what is called a property now, unlike an array, I'm just gonna get rid of this because it's been necessary, actually. Wanna keep that one in there? I want to go to this reopen. Now, Unlike an array, we only ever use dot notation for objects. Why? Because a raise come in a list, but objects do not. So what if we said Person name. What happens when we do this? We just long that well, look, that still works awesome. But what if we wanted Tech and whatever the third option was? Remember number two in programming it 012 So if you count that it with your fingers, that's number three. That's 1/3 option. Gives us the third option Paper space X Hyperloop that Rio 1/3 option. So that works as well. And if we wanted to add more, we could add more that way as well, because javascript it's fairly lenient in some regards. Let's put married is equal to true. Now this is a data type that we have not really explored too much. And this is called a Boolean. This data type here can only ever be true or false. So let's say married is equal to true. And, uh, I want to see the entire person. I want to see if this also works on an object. Look at that. Married is true. So now we know that objects somewhat work like a raise, but sort of also don't 37. Objects Part 2: Now, what happens if we throw this all into a very simple loop for variable index in person? Counseled out Log Index. What happens? What do you think is gonna happen anyways? Before hit Refresh. Just take two seconds and Ah, thank yourself. What should happen? Based on what? You know what is going to happen here we have it. We have a list of all the keys in the object. Technically, this is not called Index. These are technically keys. And now we have the different keys. What if we want to find out which key is what? Exactly how we could do person. Now we can't do dot key because that doesn't work. Not with an object anyways at so we can't do key because that doesn't exist either. But what we can do is use key as Thean decks, which were familiar with with a raise and co instructor to figure out what exactly it is. So we know that name is a string. Age is a number. Tech isn't array change. Name is a function change. Ages of function and married is a boolean. So now if we only ever wanted to get just the strings from an object we could say if person key, I thought Con struck door is equal to but as well do a very precise, very strict comparison here is equal to string. We'll just move that in their indented and there we have it, the only piece of information in that object that is currently a string. But what happens if I said that I wanted to change the age from a number to restaurant because there's no restriction here? Technically, I can changes to anything I want. Person got change age and I'm gonna put ah, super old because why not? Look at that age is now with string as well. Do we know what that is? No. But we can find out because all we have to do to get that value is Take that. Look at that. We know that name is ah, string and that his name is John John Man, age is also a string and we know it's Super Bowl. So now not only did we add extra data, we added function did all this in objects and we sort of broke the idea that any of our information could really be any data type. And this is where it comes down to validate validation. This should actually be number or parse into if you want. If you want to Google that one, I'm not gonna go over that right now, but it's dysfunction Parsons. And now we have all this extra information in here, and that is essentially all there is the objects. Objects are essentially a way to hold all of the information that you have learned so far into one tidy area. Now, why would we ever do this? Well, because person holds all the information associate ID with this person. But if we wanted to add another one, we could do that. We could write a function that creates this object for us and spits out another person so we can start cloning people and with each clone weaken, tweak each little of each little property each little adjustment. So now all of a sudden, instead of just having one person, we can have an army of people. They should all be very similar, or we can change them completely. Now, if you're trying to figure out where this is applicable Ah, great way to think about this is video games. If you've ever played a video game where there are more than one bad guys like fallout, for example, or any zombie movie not moving and he's on video game, they sort of just come out of nowhere, right? They're all pretty similar. They have a few different attributes, but they're all pretty similar for the most part, and all they did essentially was created function called clone and Return person. So now we have variable Clone one is equal to clone. Terrible Clone two is equal to another clone. And if we console log closed one and console log close to and then at the end of this console log, you know all the other information here. We're going to get a ton of information, right? So now we have to Elon's and all we have to do is clone one change name, definitely not a clone. And what happens? Look, we have definitely not a clone. Now there is one. A little problem with what we have done and this'll is a problem with closure. Closure Reminder takes this variable, allows you to use it inside of a function and spits it back out. So if we change anything in here. It's going to be changed for every single clone. Now this is like changing the secret formula for Coca Cola. If we change it at the source, it's going to change across the entire world. As soon as they distribute, it's going to be changed. How do we get away from this? Well, we take this and we make it a local variable. And just to make sure CO doesn't break, person is also equal to clone. And that's changed clone to, uh, let's change his name to something funny like George Cloney. Ah, I know. Lame. Anyway, uh, refresh the page cannot get property of change name. Why is that? Because, well, nothing has been returned. Return on object. Return person. There we go. We have definitely not a clone. We have George Clooney and we have John John men. So we just learned about a raise. We just learned about objects. And now what I want you to do and this is this one's gonna take little while. This assignment is not going to be super easy. It's not quite a project, but it's not easy either. I want you to create an object just give it a few attributes. Their key value. Paris. You've got a key here. You got a value here, but a key here. You've got a value here. Then I want you to add a function to it. Now, these functions are basically anonymous functions. The only difference is it's not declared as variable. It declared as a key inside of an object. And then I want you to go ahead and run that function. I don't really care what the function does. All I want you to do is make sure that function returns something, even if you want to, just to say alert. Hello, world. Go ahead. Do that. As long as it works. As want you to get a feel for how objects work. Then I want you to change one of the values. It doesn't have to be in a function, but if you change one of the values, try doing it directly. So person dot Where do we have it? Here? Uh, aerial. That's that example. Person dot age is equal to 12. Right? That would change it without using a function. And then I want you to add a property like this one So we just added one that didn't come by default so this person would ever clone. This is he's married. The other ones are not. They don't even have that attributes means they're not even able Teoh. And then, if you feel like a little bit more, feel free to loop through these. Um, if you don't want to, that's fine. We're going to be learning but Loops next. 38. For Loops: alrighty. In this lesson, we're going to be talking about loops, specifically, four loops now, in most programming languages, there are two types of loops or two categories. Rather, there are four loops spelled like the word four. And then there are wild loops. Spell like the word. While this lesson. We're just covering four loops. So we've already experienced four loops. When we looped through an array and just Teoh to give you a little bit of a refresher, let's write any ray 12 three. That's all right and toe loop through it. We say four variable index in a are are now. The reason we do the VAR index is because, well, this annex is going to be 012 But that bar means that the index is going to stay local to our four loop. So now when we write Consul, don't Log Index, and that's also log theory a index right with the index. Rather, say that and refresh our page. We get 012123 So that's a basic four live. That's how you loop through an array. You can live through objects as well. You cannot loop through strings or numbers, but you can split them and then loop through whatever pieces are in that array. So what I want to talk about today is the different type of four loop, not the one that loops through a raise or objects, but the one that loops based on whatever you tell it. Toe loop through as an example, it looks like this for variable. I is equal to zero. So you set your variable. This is your local variable. That's only going to apply inside of the curly brackets for your for loop semicolon eyes less than or equal to 10 for example. So this is your comparison semicolon. And then after each loop, just increment variable I by one. Now we can change all of these. I doesn't have to equal zero. I can run until this is, you know, 1000. If you wanted it to really, uh, for this purpose, that's a little overkill. Aan den. If you wanted to increments by 10 or five or 4.2, you could do that. So now when we cancel log I or Index save that we refresh your page. There we have 0 to 10. So essentially at the end of every one of these loops. What it's saying is, I plus plus that matches this right here the same thing as that Horrible. I is equal to zero and whatever is in here, let's make that highlight herbal. So whatever is in this section is going to run over and over and over again until this little I reaches the number 10 well, technically, until it reaches number 11 because it's going to run as long as this number is less than or equal to the number 10. So that is a basic for loop. No, you might be thinking When the heck am I going to use that? Well, let's write an example. Variable sentence is equal to be quick around. Fox jumps over the lazy dog. Now what if we want to break this part? Well, we know that we can use sentence, don't split. And if we if we specify, get in there and we specify that the split has to split each word, we just use a space right. That's not what we want to dio. We could do that. We could iterated we could loop over each word, but that's not what we want to do. Instead, let's do this for variable. I is equal to zero because computer start counting it. Zero I is less than or equal to sentence don't length because we know how long the string is going to be. Well, I mean, we don't physically know it, but JavaScript knows it. And then after each generation, I plus plus, let's see what happens when we try this consulate log sentence. And in our array brackets, we put the index number say that refresh. Would you look at that So our string can be accessed as an array? Isn't that weird? And so for every letter, including spaces, every anything in there, what is going to do is it's going to iterating over and over and over again, and it's going to die at the end. It's going to Yeah, I might be a little bit of a brutal word, but it's going to stop running, so essentially loops run until they don't. And what if we only wanted to get every second or third letter? Well, we can apply some logic in your If I lodge Elice two is equal to zero. Let's see what this does then console log sentence with the index now. It doesn't really make a whole lot of sense. And that's because we're filtering out now. Were saying that if the module lists of I, the remainder is ever equal to zero, then only show us what that letter is going to be. Now let's go ahead and change the sentence because I want to count all of the letters in a particular sentence. Rather, I want to count all of the particular letters in a particular sentence. So hello, world. My name is auto. I guess I swim in a pool, so we know there are a lot of letter goes in here, but we want to know just how many there are now. If this was user input, we wouldn't know what they're in putting. So how do we go ahead and count? How many letters are in there? How many of the letter O is in there? Rather so our loop still holds. We're going to loop through every letter in here and we can say this variable letter is equal to sentence. I little bit redundant this point because sentence I was not really complex. However, it does add a level of clarity. It's gonna get rid of that. And you know what? And back. Let's do this to lower case. This makes our, if statement a little bit easier, and you'll see why in a sec if letter is equal to, I hope that 00 and we're going to se number plus. Plus, that's not the find yet. And we're going to say in here of our number is equal to zero now. Number is the number of those in a sentence. So now we're getting a little more complex with their loop. It's now we have variable outside of our for loop, which is also implementing, but Onley increments whenever they find whenever it finds the letter O, even if it's a capital O is going to change it to a lower case. Oh, and try to match that now. The reason we didn't declare number inside of our loop is because if we declare number is equal to zero right in here, well, every time we iterated over this loop, it's going to reset that number back to zero. And that number is never going to get anywhere the furthest they could possibly get is toe one and then the loop ends. And that's only if the last letter ends in an O. No, that's definitely not what we want. So let's do this. And outside of our loop console log number cannot read property to lower case now, why can't you do that? What happens if we just for move it, see what happens that works to lower? Case is not working through the air, says I cannot read property to lower case of undefined, so there's obviously an undefined character in there. What we want to do is we want to wrap all of this in another. If statement. If sentence I is equal to flips other way around is not equal to undefined. Then try to run this. What happens? There we go. So it is now saying that we have six letter rose and we can go on manually. Counties. We have one to two more there. That's four 56 So they're really now we're counting all of the same, the exact same letter, but there's capitalized or not, but what if you ever wanted to limit this? What if we said we should Onley loop through this until we find at least three. We only want to find three letter owes on. Then once there is three, just stop looping. Well, what we could do is putting and operator in here and say and number is less than or equal to three or just less than three whatever you want it to be. But there's another way to do it because even though let me rewrite that even though it says to only run this code if number is less than three. If this sentence is 2000 characters long, well, I should say, If this string is 2000 characters on, that's one long run on sentence. It's still going to run this every single time, and we don't want that happen once it reaches what we tell it to reach its maximum capacity , its maximum load, whatever. We set that limit as it needs to stop. So how do we do that? Bacri. Another if statement, if number is equal to three and we use this beautiful word called break and that breaks out of a loop. So now I say this and when I go to the page, refresh the page, it's going to say when we console log the number Well, the number can only get to the number three. That's as high as it can get. Because once we break, it stops the loop. And there we go. Refresh a patient. We only ever get three. Now what if What if we wanted to do this with the sentence and we could we could break at any point in time for any reason. Any time we say break, the loop stops. So not if number If I is equal to I know somewhere in here maybe what would that be? 18 ish break. Otherwise, do something in here so we could say council dot log sentence I if Hello l shows up twice our consulate smart enough to say, Oh, there's two of them here Hello world my nad to So it stops at n A stops right there because that's the 18th letter. But now that's like a one more example, And we're going to hear one more thing about loops here, and this is very important regards going to ST Loup. And just as an example, see how it says loop on every single iteration. What if we don't want that. So you know, in a function when you use the keyword return that none of the code below it is executed and likewise in a try catch block. When you when you thrown exception none of the code below. Where you thrown that exception is executed. So in a loop, we don't return instead in a loop. What we do is we continue, which means don't execute any of the code After that, that keyword continue. However, if there is more loop to loop through, keep going through it. And so essentially this renders everything else here useless. So we say that we go back and we should never see the word loop. Perfect. So here's an example. If the letter is an oh, we're going to increment that number so we know how many O's there are, but we don't want to display it. We want to display every other letter so we can do it. Ellison. Hear any weekend Consul lager? Three. The letter. And now we've removed all the O's from sentence and on every iteration we have our own letter. So there we have it. That is a for loop. You've now been introduced to break and continue as well, and the next last we're going to learn about while loops, there's, Ah, there's two primary wild loops until then, but I would like you to do is create your own four loop, and I want you to practice breaking out of your for loop using the keyword break. And whenever you get the chance, try using the word continuous well and see what happens. Play around with it. Feel free. Use this coat. Do whatever you need to do to learn this best. If you get stuck, feel free to ask questions or use the code is reference. 39. While Loops: Hey, hello again last night when we spoke about four bloops, and how we can utilize them to basically count letters doesn't sound super useful. But I can promise you in the future, for Loops are incredibly useful. But there's another type of loop and the wild loop. Now this while Loop has two different types, just like the four. Luke does well for what we're going to cover anyways, and the 1st 1 is just a basic while loop. And the 2nd 1 is a do while loop, and that's a little bit different. Do Wild Loop is not super common, so we're not going to go over it very often, but it does definitely have its uses. So if you remember in a four loop whenever we created variable, so it's like four bar, I actually let me take this outpour of our I is equal to zero. It is less than 10 for example, I plus plus, and then we have our code in here. Awesome basic for loop A while, loop gives us a little bit more control and a little less automation. So while loop is, we could say while I is less than 10 do a bunch of coat. Now you have to be careful with this because a while loop does not illiterate this this index value for you or this letter. I it does not increment that for you. Let me be clear. It does not increment that for you. The reason I'm specifying this so much is because this will run forever. And if you do not break from your loop, if you do not increment whatever your counter is supposed to be or decker mints however you write, your loop de loop will run forever. And it will eventually crashed your computer. Unless you can close your your browser, your tab in time, or stop the script. But, General Yeah, this will run forever annual crash your computer and will crash other users computers to which, if you want to be a little bit malicious, if you want to be a little bit of an A hole, by all means. Yeah, go ahead and do that. But I can promise you that you're not gonna win any awards for being that kind of developer . So go for their do still eat that stuff. Let's make this just a wee bit figure. It's the first thing we have to do. We have to specify variable. So far, I is equal to you. Know what? Let's start this at three. Because it doesn't have to start at zero now, in here do some code. But before I write any code as my personal best practice and what I've seen a lot of other developers to over the years is they automatically add their incremental. Essentially, this is the long way of saying four of our eyes equal to three. I is less than or equal to 10 I plus plus. So this and this those are the same, believe it or not. Now why would we ever want to use this? Well, because sometimes we don't know what what this is going to be. Sometimes we want a little bit more control. Sometimes we just want to do a loop. We want to create a loop that just goes on for a very long time. Sometimes we want to reset I in the middle of its its own loop. Sometimes we don't want to increment by one. Sometimes you want to increment by one. Maybe, sometimes you want increment by two. Sometimes you know, if someone has a particular score or answers a question, the right or wrong way, we set them back five points and the loop continues until they eventually reach the goal of 10. So let's go ahead, council log. I theoretically, this would start at number three and go 456789 all the way to 10. And once it gets larger than 10 which is right here, it's gonna go back and say, Oh, I is larger than 10. Don't execute this goat anymore and continue with whatever else is below your loop. So to say that go to my page giving a refresh their we got We have 3 to 10 just as expected . Now, just like our four loop example, we could have variable sentence something in here. I'm not gonna be created with that sentence. And we could say four of our eyes less than sentence don't length. And this will run from three to, however, along the sentences. Is that what we want? E. I don't know. Maybe, maybe not really depends on your application now, doesn't it? In this particular example, we're not going to do that because I think we have made this pretty clear about how those work? No, I'm just gonna common that out, and we're going to do a do while loop. And here is the difference. Do some coding here while something in there. So here's the difference. The do wild loop will always execute the code once and then check to see if it's valid. So if you end anytime you want a loop to run at least once used to do while now we don't see that often because I don't think enough developers understand what I do while actually is where, as just a regular wild loop, is going to check that condition first and if that condition is not met, is not going to run. So the difference is a do while will run one plus times. Where is a while can run zero plus times. And what I mean by zero plus is it might not run at all if I is. If we change this to 13 this loop should not be executing at all because I is greater than 10. So why executed it'll whereas in a do while loop it will execute. Let's go ahead and get us shot we have of our A is equal to No, let's be like math teacher guy here. Far X is equal to 10. So for every time this runs, what are we going to do? Well, we need to increment it so that our loop doesn't run forever. That would be terrible. And we can console log. Uh huh, X just like that. And then in our wild loop, we can say while X is less than or equal to 20 and those I'm gonna save Go back, refresh my page. And there we go. We have 10 all the way down to 20. Cool. That's pretty much irregular. Wild loop. What if we said X has to be less than or equal to eight? Well, X is currently 10. So what this is asking for his 10 has to be less than or equal to eight, which is always fall. So it should technically never run. However, because the code is running once and then it's checking the conditional statement. It's always going to run at least once, and I'll prove it. Constant log. Okay, I am running. Save refresh gives us 10. I am running and stops. So why would we ever use this? Well, because there were times where you're going to create an if statement. It's like, uh if a is equal to be, you know, do some do some code stuff that's the same as a while loop below. And then they have a regular while loop and does the same code as above if condition is met , if C is equal to d seizing something like that. So essentially the code up here is pretty much if not the exact same as the code that's in the wild statement. The only difference is the wild statement has another condition. Or or the wild statement does not have, uh, the condition that's being met. What I did here, making a mess, You can't Come on. There we go. So the wild statement is not that the condition in the wild salmon is not being met. So, for example, we have variable. We don't right bar in here. I is greater than three. Well, that doesn't match this I of here or alternatively, we could do the same thing with X. We say if X is greater than 10. Well, sometimes we just want that to run one. So what people will do is they will change the value of X and if they only ever wanted to run once, let's say X is equal equal to 11. And we're gonna do an inverse, uh, while loop here and say X minus minus. So while X is greater than 10 basically saying this 11 is greater than 10. Run your code decreased by one and check to see if you can run again. So what's the point of doing all that when every time you want to run at least once? Now this is not, unfortunately uncommon. It's becoming a little less common. Uh, but I mean, I still see that from time to time, and that's that's just not useful. This is the reason that do while was created. It always executes your code at least once. So there you have it. You have the difference between a wild loop and a do wild loop. I'm gonna go ahead and add some comments of this s O that you can check out the code and read threat. But in the meantime, if you could go ahead and create a wild and a do wild loop. That'd be great. And please, please don't forget that you have to add your incremental er or detriments whatever it is so that your loop does not run forever. 40. Intro To Classes: Hello. Hello. Hello. In this lesson, we're going to learn about classes. Now, this is something that I know a lot of javascript developers do not know about. And this is one of those things that makes JavaScript extremely extremely powerful. And this is true object orientated programming. Now, once you get your head around, how object orientated programming really works in the power behind it and why you should do it versus why you should. I do method or function based views. Instead of writing entire classes, you'll start to realize that library is like react angular, Jake Weary are not really all that difficult. It's just a lot of logic. Well, that and a lot of spinning pieces. So, you know, it takes a lot of people toe build these things. I'm not trying to downplay, react or or angular Jake weary or anything like that. I just want to let you know that when you learn about classes and it starts to come together for you that as a JavaScript developer, your world all of a sudden goes from being way too big to being just the right size, and now all of a sudden you'll be able to contribute to a larger projects. You'll be able to contribute to reactor angular, any open source projects, or write your own code and do some really amazing things. But before we can do that, we need to see what a class looks like. So So let's go ahead and declare first class, class animal And it looks like this. There are no parentheses. There's no colon. It does break some of the rules that we have learned before, but it's also in the name of containment. We want to contain similar pieces of data and functionality into one class. As an example, let's say constructor name. So now we have a class and we have a constructor. What is the constructor dio? As of right now, you don't know that it does anything. So let's put this into perspective to create a class. It's just that that's all it is to what's called in Stan, she eight or in it to initialize or toe create. Or you can use whatever word you want, but to basically get this class up and running because just like a function, Javascript realizes that Hey, I do have code here, but I'm not gonna run it yet. You have to what's called in Stan sheeted or initialize it. So I'm gonna create new ah, new variable. And I'm going to call this the dog how we do this by writing new animal. Now we can do this with functions to, and we can make functions basically turned into entire classes, which is great. And that's how we got to use the this keyword. I'm doing air quotes here. This keyword, however, the this keyword is actually more applicable to an entire class than it is to just one particular function. Now the reason for that is because of class is basically a container for all similar functions. Any function that has to do with this animal, whatever that animal might be is going to go in there. So now we have functions in inside of a container with variables inside of this container, and they can all work together. So it's a way for you to compartmentalize a large piece of your coat into a smaller, more manageable section. So here we have dog is equal to new animal, and as soon as the class is run is going to run this construct er function. Now. This function does not start with the word function. And you can see that my my editor here sublime did not highlight the word function as it usually does. For example, function usually looks like this doesn't so get rid of that. You can put your parameters and put as many parameters arguments, whatever you want to call them. You put them in there. We're just gonna go with dog. So I have a new dog and his name is Joey. Now what happens when I console Log dog save So hit refresh. And here we go. We have an animal and that's about it. Now, why is the name not in there? Well, because even though we specified a name and it's being run in here, I can show you that is being run in your consul. Don't log name. Refresh the page. We get joy, but it's not in our object. Remember, that's an object oriented programming language. That means that our class is also an object and there's no name in here. So when we're dealing with classes, what we want to do is we take this. Remember the this keyword again doing air quotes here. This name is equal to name and at this point, we can't filters. We can lower case, weaken upper case. We do whatever we want to this name Now when I save and refresh here we go. We have name is in there now. It doesn't just have to take a parameter that you gave it that you passed through in the constructor. You could also say this dot height, for example, is let's say 32 we're just assuming inches here. Right? Refresh the page. Here we go. We have height and we have name. So that was an example that height was not passed through here. It was just an automatic assignment. So great. OK, so what can we do with this? Because although we have a construction, we can pass information to it. Honestly, this is not useful in any application. This is just a very well holding a bunch of information that we cannot access yet remember , variable that we can access is inside. The scope of variable that we cannot access is outside of our scope. Well, unfortunately, these are inside of our animal scope, which is in here, but we still don't have access to it. Really? In here? No. Yet to do that, we can simply type council. Don't log, dog dot name. And there we have Joey. I could do the same thing with the height. Now, if you're thinking OK, this looks a lot like a regular object. Why? Why on earth wouldn't I just use a regular object and a regular object Just as a refresher being something along these lines, where you have name is equal to something and how it is equal to 32. Right? We could grab the same thing. Object? Don't name, Actually, because you object is the same as dog dot height. Right, So we've got this object. Heighten is equal to dog. While this is actually supposed to be down here. Technically for that work, uh, dog, which has all of this code in year in one single line. Something to go ahead and remove that. So if you're asking me Caleb, why am I not just using a regular object data type versus using a class? Well, there are several answers for that one. JavaScript is a relatively new language. It's only 20 ish years old, too, because of that. It has gone through a lot of evolution and is trying to catch up. But a better answer for why you would use a class and seven object is because your class can have tons of objects inside of objects. Now you're objects can also have that. Your object, it said, can have objects inside of objects that have listed it can have all that stuff. They didn't even have functions in there. And we know that it can manipulate a lot of its own data using the this keyword. So why use a class? Will the benefit to a class again is containment. So you have one big file, doesn't it? Might not actually be big, but you can have one file and it could just be called animal dot Js and that contains all the code for an animal. Now, instead of having one massive JavaScript violence hundreds of kilobytes long, I mean, that's a pretty pig JavaScript file. You can have one that's maybe two kilobytes and only contains this information. Now, by separating that code by making a little more modular, you're able to maintain it easier now. If that wasn't a selling point, for you. And I remember being in new Devon Been thinking that's not a selling point for me. Like I don't care. I'll just use objects like object data types to learn about classes, Onda functions and properties methods don't itself. Inside of him is again a transferrable skill. So even if you only use data types of the object data type in JavaScript, that's great. You can transfer that to a lot of other languages, but classes pretty much directly transferred to PHP, to python to whatever other a low P language you can think of. So by getting a grip on this and JavaScript, you are actually learning the fundamental concept of object orientated programming in other languages. So when you go to pick up python in the future, which I highly advise, you are already familiar with what they call class based views or just classes in general and how they inherit each other. And so that brings me to my next point. An object cannot inherit another object, but classes can hair classes, and we're gonna get to that. It might be in one or two more videos, depending on how long this one goes. I don't want this one to go for too long because class is very, very, very big subject. Thankfully, you know everything that needs to go into it already. So let's continue. Caleb, you're talking far too much and not typing enough. So this is a function inside of a class. We don't call this a function. No, sir. Inside of a class. We call this a method. Why? Well, does it say function in front of it? Nope. And now the reason for that is because we can actually call this. I'm going to demonstrate that a little bit, but we can call it off of dog or whatever we name that variable. This is a variable. However, because it's inside of a class. It's not a variable. Technically an object orientated programming is called a property. Now, why is that? But because the property doesn't leave the class, technically, you can access it by in San Sheeting, the class. But you cannot actually access it from outside. So if I wanted to, I couldn't just type animal dot name because the name has not been set yet. So this dot name does not exist, so I'm just leave a note. Here This is called a method, and this is called a property. And I was negative interest because that's really unemployed. Unimportant to this lesson. So now we have a construct, and all this does is set us up with the name Joey. What is an animal do? It makes a sound. Okay, so let's make Patna remember no function. That's just a bad habit. Let's call this function speak and by default, what is this going to dio All that's going to do this console dot log wolf. In fact, actual. Let's make this a tad bit more complicated. This God species is dog, but instead let's make that dynamic instead of having it dog what's called species to lower case dog. And it was gonna have that back in here dog. And his name is Joey, and his height is automatically set and by default. When he speaks, he makes a wolf. So to call this function type dog don't speak just like how we did dog dot name and this console log back to us, Joey, because that's what we name him. This is going to say run to function or run the method inside of this class and console log wolf. So when we save and refresh well, there we go. And every time I refresh it says wolf. Cool. So now we're running functions with just one line of code. And now that function is exclusive to this animal and because of that is no longer called a function. Its exclusivity makes it a method. Now what if we wanted to change the name? Let's there. We went and adopted an animal from, Ah, one of those pet shelters. It had a terrible name or maybe didn't have a name and we wanted to rename him. We could create another method called Rename Animal. And what do we want to rename it? Whatever the name is. And in here, all we do is say this dot name is equal to name. Now to explain the of this. What this means is this notice how I only selected the class. I didn't select anything outside of it. I only selected his class so you could think of it. If you're a little more familiar with scopes now, you know we have of our name we have of our height. Our species. These are the three variables, right? We have species name, height there we are not in the right order, but the word it doesn't matter. But the difference is we don't declare them in here. We don't have variables just running around up in the out in the open, we have variables that are contained using the this keyword. And what this does is instead of using the word this outside of it outside of this class, this becomes dog or whatever you name your variable. So this dot name would be essentially the same thing as dog dot name. Let's go ahead and dog got renamed Animal, and we don't want him to be named Joey anymore. Let's say let's name him, Ross. And just to prove how this is working console log the entire dog object. Refresh your page. Unexpected. Identify airline three. It's because I forgot to get rid of these. Remember, valuables were not allowed to run around wildly inside of a class Refresh. He wolfs. The species is dog. The name is Ross, and his height is 32. And just like before, when we were doing this with functions, his name was originally Joey, and now you can see, those name is Ross. So this is a basic introduction into JavaScript classes and object oriented programming. Real deep object orientated programming. 41. Returning Values From Methods: Hello. Welcome back. In the last lesson, we learned how to create a class A construct, er, class that gets automatically run every time you in. Stan, she ate the class. Ah, and a couple of methods inside of it. And how to, um, ad properties and how to override the properties. In this lesson, we're going to learn how to return some of that information into a variable so we can use it outside of a class, leaving off exactly where we were in the last lesson. What if we just wanted to get the name? We could create a method called get name, and it doesn't have to be called getting it could be called anything you want. Really? We're gonna call it get name, because that's all it's going to do is going to get the name and just like a regular function, we're just going to return this dot name now if you return just name well, name doesn't exist. This would be referring to a variable inside here, so that would work. But if you want to get the name for the entire class, whatever the sem ing global variable, that's local to this class LOL. What then you would use this dot name? All this is going to do is return the name. There's two ways to get this name. We could say Don't not name. We know that that works. Or we could say variable name is equal to dog. Don't get name now. This is a terrible example. Why? Because well, name is already publicly accessible to us through the name property. However, what if we wanted to do something that we don't initially have? Right. Run a formula, runs a math, figure something out, add some sort of additional logic. What if we wanted to convert the animals height, Which let's just say it's in inches to centimeters. We don't have this height in centimeters. We could We could start at this point in the constructor and say in heightened centimeters is equal to 32 times 2.5 or whatever it is, or instead of holding that information because that we might not always need it. And if we don't always need it, why run that kind of math every single time? Now you don't have to worry about like laptops crashing by doing some simple math every time you stand, she ate a class. But the point is, why run it if you don't need it? And so this is an efficiency mindset. If every time you opened a door to get into your bedroom or into your bathroom, how would you feel if you had to do some trigonometry to figure out the angle that the door is currently sitting at and where it's going to go? It would be such a pain in the butt, wouldn't it? So if you wouldn't do it every single time, why make the computer do it every single time? It's just additional work. It's It's useless work for the computer, and it really is a waste of your time unless you actually need it. Let's go ahead and create another method called height. Two centimeters. Now, this is not going to take any sort of parameter because we already have access to everything every single variable or rather not variable. We have access to every single property inside of all of these methods. They're already available to us, so we would say something along the lines of return this dot height times 2.5 uh, oops. Return centimeters just like that. Now, this is a reason that you would use another method and and we could return this information . I'm just gonna go ahead and give it to this. Gonna rename you too, Ross. Because why not on? And if we want to say where centimeters is equal to dog don height, centimeters well inside of dog inside of this class, we don't have a centimeters property. It just doesn't exist. So what if we want access to it outside of this cost? Well, to do that, we just assigned at this and we returned like a normal function, were already familiar with all this, right? So now we're just putting all of the pieces together. And if I cancelled out, log centimeters back to my page and refresh, we get 80. So it did 32 times. 2.5 is equal to 80 now. What if we tried returning an assignment this dot Centimeters is equal to this, not height. Well, let's say that give that a shot still works. Cool. Cool. Cool. So we know that this variable works. Uh, what happens when we now do dog dot centimeters? Now we have access to it. So now we've not only returned what the actual value is, but we've also assigned a new property at the exact same time. So now at any point in the future after this method is run, we have access to this dot CNs for this dot centimeters rather. And so that's how we can return a property inside of a class that does not yet exist and assign it at the exact same time. So now we're getting really, really creative. Now we're getting extremely powerful. What we can do now. Functions should be able to do the exact same thing because all this is a function inside of a container. 42. Subclasses: Hey there. And the last lesson we talked about returning values from methods inside of classes today. Or I guess, in this lesson, rather, we're gonna talk about sub classing. And this is where JavaScript goes from a scripting language into a full programming language. This is really what? Step it up from that. That lower class, interactive browser only language to wow, Holy crab. This is a legitimate language, and we can do all sorts of amazing things with us. So leaving off where we were, what I'm going to dio is I'm gonna clean up some of this code, and I just wanted you to watch me clean up some of this code so that you know where I'm leaving off, how I got to where I got to. So I'm getting rid of all of that to get rid of all of that. That's unnecessary. And I mean, at this don't sound is equal to Wolf. And when the animal speaks, it's going to say this, not send whatever that might be Now, Really, Realistically, this doesn't make sense, because the species we could say the species is a cat and it's going to wolf, but let's just ignore that error. For now, The point that I want to get to is subclass enough. Subclass ing is the ability to extend code because you should never have to write code more than once. Now that's ideal. And if you're going to do the whole, don't repeat yourself methodology, that's great. Just remember, don't take it to the extreme they hold D R Y that don't repeat yourself. Methodology, if you take it to the extreme, actually starts working against the self in your code becomes very, very complicated. However, subclass ing lets us overwrite methods and properties from other classes. So what if we have another class and this class is going to legitimately be a dog class and it's just going to extend animal now? We use the keyword extends because this class dog, the one we're currently working on is going to inherit everything in here. It takes on everything. It's like completely cloning the entire object. It's amazing. Now, why is that amazing? Because now we don't have to write this not species that's not named this height. This that sound. We don't have to rewrite functions or methods like speak or the con instructor. It automatically takes everything from its parent. So it is essentially like clothing yourself. If you close yourself, you would have to of you with the exact same properties, right? Don't think too much about that. Cloning actually doesn't work that way anyways. So in here in our dog class, we already have a construct. Er the constructor was inherited from animal, so we don't need to write, construct ER and put our code in their unnecessary. What we can do, however, was weak and overwrite speak because dogs only ever make one sound. So let's right our method in here Council thought log new sound and what? Okay, so here we have dark extends animals and we have speak here, and we have speak here now by default if we create a new animal object, whatever this is. So if we look up here, it matches this animal. And if we run the dog dot speak method, it's going to run this dot sound, which refers to yes, that's out, which is wolf. Now that's all good and what not and it's starting to sound a little bit complex. I know because there's a lot of reference points were referencing back and forth. But through these references is how we get extremely efficient coat. Instead of declaring dog it as a new animal, we say variable dog is equal to new dog. We know that this class extends the animal glass, and so it also has three construct er method in there. So when we create a new dog object so we can go straight up to its its parent class. And by the way, when you extend another class, it's called sub classing. And so in here we could just right. Well, what is the species? Well, it's dog, but technically that doesn't matter because this is going to be a dog. Ah, and the name could be, well, what we want to name the dog. Let's name this dog gentler now, because this species is irrelevant because we now have subclass that does exactly what we need it to be. It does exactly what we needed to do. What happens? Pulled on. Let's backs up. I'm getting ahead of myself here. Consul Dialogue Dog arrived unintentional. Let's take a look at the page. And now we have Doug the height, its name, the sound that it makes added species. But if we look at the seven makes it still wolf in the sound is supposed to Is this one now ? The difference here is this is a property, and this is a method. So if we did, Consul, don't log the dog, not speak. Is it going to say wolf, or is it going to say new sound? Wolf, That's I didn't have the parentheses so returned the entire method. There were going to sound wolf undefined. And that's because that's all this is looking for. There we have it. In fact, actually, I did that a little bit funny because in my head classes, methods rather always return a value. In this case, it doesn't require value goes straight to the console, so it's trying to counsel on content log. There's no use doing that. We just do not speak and semicolon colon And there we go. That's why we got the undefined air before is trying to console log consul log. So now if we wanted to get rid of species, we don't know what the species is, so we're gonna call this unknown and con instructor species. What happens when we do this what happens when we overwrite our species? Well, that's no other species are construct. Er this dot species is equal to species. That's all I wanted to go. And so now this should say, dog, we're going Teoh, do this the right way this time in consular dog and the species should be species. But does it also keep its name? Find out says this is not defined Well, why Why is this no longer defined? JavaScript Line 19. What is that saying Here. Look at that. This starts. Feces does not exist now. Why is that? Well, species does exist here, but because we're overriding the entire construct, er, none of this other stuff exists at all. So what happens? It would comment out. Go back to our council. Refresh. We still get this is not defined online. 18. It's trying to, and it's trying to override the contractor, which seemingly it does not like. So how do we get the species in here? How do we change with the species? Is well, we can. We can give dog its own method that changes its species. So, uh, not changed. It's not changing. Species were setting the species and say species. This species is equal to species. It's not a species. No, you say a word so many times it starts to lose this meeting. That's the word species for me right now. So now we have just set up the animal object with the name. That's all it requires that we have dog. And in orderto set species do said species and it could be a dog. Now we can't along dog. The species should be ideally exactly what we told it to be. And there we have it. Look at that species is dog. Now what happens? We don't set this refresh species is unknown. So now we're over writing what a property is from a subclass because species is automatically inherited. And so the dog species is automatically I'm doing air quotes here unknown, and that's because this line essentially is copied down into this class. Now, that's what subclass ing is Now, why would you ever use up classing? That's a great question. Because instead of writing his name over and over and over again or having to write another method, uh, set name? We have a name in here. Uh, oops. Inventing is not my friend today, This stunt named is equal to name. Why write this over and over again when not only we would have to write this for dog, but for cat and for fish and for all the other animals. Or Or we can simply add the method to its parent class and we can use set name anywhere. So let's do that. Dog got set name and his name is no longer Chandler. His name is now Monica, and when we cancel log dog, we'll see that the name is being set and it's overriding this one. I refresh the page and there we go. The name again is Monica. So now we don't have to write the same functions over and over again. Now, if you're asking me, Caleb, why on earth would I do it this way when I could just write one global function called change name and change the name? Then I would say, Well, why even write that at all when you could just right? Variable name is equal to Caleb and then do a kind of code down here and then change the name again. And so, by that argument, we now have one name one variable that is, Onley ever applicable to the entire page or the entire scope that it's living in? And why is that a bad thing? Because when we're dealing with groups of data, a dog, for example, has a name. My dog has a name your dog might have name. Your neighbor's dog might have a different name. They all have different names. What about their species? While their species are all dogs, that's fine. But we know this because the dog class extends from animal. So all animals have some of the same characteristics, for example, for most animals. How for? But if we wrote another class SE class bird extends animal. We would change its for or its Ah, I guess I know how. How would I describe it? It's type of hair or its skin or whatever we would change it from for or hair to feathers. But every animal could make a sound. So when it speaks, what's a sound going to be? Every animal has a set of eyes, right? So if you're making a video game, you have a function in here or method in your rather that says look and is going toe. I don't know. Look around the room, look for objects or something. Or if you wanted to, for example, the dog class could have a method jump where the dog jumps, whereas the fish class, the fish subclass, might not have that ability to jump because why it's official doesn't need to jump. It just swims. So now you can add more to it. And this is the power of sub classing. And with all of us, you're keeping all your information together in one group area in a weight that makes sense , because again, your dog can jump. But if you have a fish, does that m