JavaScript Tutorial 2019

1. 1 Course Overview & Introduction: was going on, Guys, My name is Bucky Roberts, and welcome to your very first JavaScript Toro. Now, for those of you who have no idea what javascript is, JavaScript is basically a scripting language. Used to make what pages more interactive. So, for example, if you have a webpage and you maybe want to add a calculator to it, or maybe you want to put a quiz on it, Or maybe you just wanna have a navigation bar with some cool rollover buns. Well, in order to do this, you need to use a special language called JavaScript. And that's why I'm gonna be teaching you guys. But before it begin and we start typing job script, you guys need a couple of things first. The first thing you need is a text editor. Now any text editor will work fine, but I'm going to use one call. No pad plus Plus. Now, if you don't have this, you can go ahead Google and download it. It's actually free. And it's actually the one I recommend. It's the best. It's awesome again. No pad plus plus. Go ahead, type that into Google and you'll be good to go another thing that you guys we're going to need is a knowledge of X html, and that's what this is right here. If you guys don't know how to create a basic webpage in X html, then you need to watch that series first. I made excess amount in CSS tutorial Siri's before this. So if you don't know how to create a basic weapons, go ahead and watch that it's on my YouTube channel as well as on my website, the new boston dot com. So anyways, once you have those two things, then welcome to the world of job script. So let's go ahead And for all you guys, let's begin. I take a deep breath and get ready and let's go. So, like I said, JavaScript is something that you add toe Web pages in order to make it more interactive. So just like everything else in X html, you need toe add job script through the use of tags. Now the tag for JavaScript is called it scr I PT script. And now let me mention this. In the Internet, there are a lot of different scripts that you can and a webpages. There's Javascript. Actually, there's like 50 different types of scripting languages. Java script is just one of them. So when our browser comes across this code, we need to tell explicitly that we're going to be working with JavaScript. So in order to tell our browser that we need to give it an attribute called Type and we said this equal to text slash JavaScript, go ahead and in that and go ahead and add an ending Script AG. And in between these tags is where you're gonna be typing all of your job script code. So that is job script code. It's not really, but, you know, that's my example. And in between here, like I said, all of our coating is going to be done. So let's go ahead. And actually that's right. A real simple program right now. Um, go ahead and copy me document dot Right and inside parentheses with a semicolon at the end , at quotation marks in, right, like, Hey, now, brown cow. Now I know you guys don't understand what this document really why we had princes or why we even have a semicolon at the end. But for now, I just want to make sure that JavaScript ISS set up in your browser and you're able to run it. So let's go ahead and save this and go ahead and you can press, run, launching curl lunch and I e watching whatever browser you want. So let me go ahead and move this back and check out what we got. Hey, now, brown cow. So as you can see, javascript is working in my browser. If anything like that pops up in your browser, that means that well, you're probably at school when they try to block YouTube or you know something. So they probably took job script off your browsers, But anyways, um, make sure that you have job script set up. So if you see this, that means your goods go. If you get a air message or don't see this at all, that means that it's not working in your browser and you need to fix that. So with that being said, let me mention one more thing. A lot of the older browsers, like you know, when they first started making the Internet and webpage just a lot of the browsers didn't understand job script. Their main job was just to understand a basic HTML webpage. So whenever they try to read a program like this, it's just going to come across them back. Whoa, What the heck is this? I don't know. So I'm just gonna go ahead and type out what's ever in there, and we want Hey, now brown cow to type out on her webpage. We don't want this whole long string of text right here. So if it's, you know, typing out something weird or something other than hey now, brown cow, that maybe the issue is that you have an older browser and it doesn't understand what JavaScript is, So anyways, if you know that you're going to be making a webpage using JavaScript, and a lot of people with older computers are going to be looking at it, or if you know that your viewers have order browsers, you might want to add a little safety check in order to protect against older browsers from trying to read this job script. Go ahead and put the greater than sign. Or is it the less than sign? I think that's a lesson sign Explanation. Point minus minus, and when you're done with your job script, go ahead and press forwards. Thus four slash minus minus. Greater than sign. Now, Whenever order browsers come across this, it's going to think that this is just a comment and it's just going to ignore it, basically. So go ahead and save this in a refresh and see what we get. You can see that since this is a new browser, it's going to know not to ignore, and it's gonna be smart enough to know that this is indeed jobs group. But if I had Old browser, it wouldn't type anything at all. So that's a nice little safety check that you can use against order browsers. Um, it's gonna work with her without it. But for the sake of this story, since I know that I'm gonna be using a new browser, I'm going to go ahead and delete him, because, I mean, we only have so much space here, and that's just taking up space. But anyways, it's common practice, or it's good practice that include those whenever you're typing job script. So I'm not, but you might want to personal preference. So anyways, well, that's probably all I need. Teach you guys for this story in the next story, we're probably gonna be talking about comments. Invariable. So anyways, go ahead and ah, you know, just get dropped scripts set up. Go ahead and include these tags And make sure that you ah, you know, try to test out this line of code and trust me, I know you guys don't understand what's going on right now, but now that you're set up, you're ready to move on to New Mexico. Auriol sideways. Thank you guys for watching. Don't forget subscribing my videos and I'll see you guys in the next door. 2. 2 Comments and Statements: well is up, guys, it's Bucky. And welcome back to your second JavaScript. Doral and in this is Orel. I want to start out by talking to you guys about something called comments. Now, if you're familiar with excess email, you know that sometimes you can leave comments to yourself. And if you guys don't know what a comment is, a comet is basically a line of text or line of code that your browser ignores completely. So why would you want to leave these comments in your code? And why are they useful? Well, a comment is basically just like a sticky note or a reminder telling you to do something like maybe edit a line of code or add something else to your webpage. It's going to be aligned that your browser just ignores. Just so you know, just so the programmer or whoever that created the webpage can follow along easier. So go ahead. And in order to add a comment in JavaScript, go ahead and press ford slash four slash and then type comment goes here. Now, whenever you go ahead and run your webpage, save it and run it. You see that nothing happens because your browser knows to ignore that, that that it was just the comment, maybe a little reminder that you're just doing something, so just forget about it. It pretends like it isn't even there. So anyways, like I said, it's just like a basically a little sticky note to yourself. But you're saying all right, that's good for a one line of code. But what if you have a longer comment? What if you want to leave a comment? That's like, All right, go ahead, edit this webpage and wash my dog, then got ah, eBay in by some items and then, you know, finish this webpage yada, yada, yada, yada, yada. Well, you need more than a single line comment, and you need something called a multi line comment. So in order to leave a multi line comment, go ahead and write ford slash Asterix. And then after this rite, this is comment yada, yada go by stuff on eBay, yada, yada, yada and then, in order to end it, go ahead and press Asterix four slash now I wrote two lines, but you can have as many lines as you want. So that's the difference between reading a comment on a single line in writing one over multiple lines. It just depends on how long your comment is basically. So go ahead until the all your comments. And now that we're done with that, let me tell you guys the basics behind not only job script but every single computer programming language. Ah, computer program is just at the core is just going to follow instructions. For example, if you want to tell your friend how to make a peanut butter and jelly sandwich, he would say Step number one. Get out Bread step number two. Put peanut butter on a one piece Step number three. Put jelly on one piece. Step number four. Put it in your mouth. So, just like a computer program, it's going to follow instructions step by step. Now each instruction is called a statement. Now every statement is gonna end in a semi colon. So we already saw one of these statements right here, and that's how to print things out on the screen. And that's document dot right now. That's why we ended it with a semi colon and in order to print something on screen, we just add those quotation marks and right, like I love ham. So whenever we saved this, it's going to see that. All right, print something now on the screen. That's my one job. I go ahead and I printed it out on the screen. And if we have another instruction under this, let's just go ahead and print something else out. Copy and paste it. I love ham, and I love Bacon, too. So it's going to say, All right, print out. I love ham. That's instruction number one. Print out. I love Bacon, too. That's Instruction number two and notice that each instruction ends with a semi colon. And again, these air called statements. So let's go ahead and say this. Refresh it and see it said, I love him. And then they told me to do I love Bacon and then bam! Computer programming is over. So that's the basics behind every single computer program. It just starts at the top. It does all your statements and then ends. How simple is that? So? Well, I guess that's all. I want to give you guys for this story because the next subject is kind of a lengthy one, and it's going to take a whole video to learn. But remember, in order to leave a comment you need either to force lashes for a single line or that forced less. Asterix Asterix four slash If you want to leave a comment over multiple lines and all a computer program does is it goes line by line, a statement by statement as long as they end with Semi Colon. And it does this than this until it gets to the end of your script, sir or Saint Ari, do the first thing, do the second thing and then end. So that's basically how a computer program works. So in the next story, I'm gonna be teaching you probably the biggest, most important concept behind computer programming, and that is called variables. So it's gonna be a super important. That's Orel. You definitely want to check it out, and it's definitely going to help you understand Job, script. So much more So thank you guys for watching this one, and I'll see in that video 3. 3 Variables: was up. Guys, welcome to your third JavaScript sorrow and as promised in this store Oh, I want to talk to guys about, ah, huge concept in JavaScript. Probably the most important concept that you guys need learned. And that is the use of variables. So go ahead and try to remember all the way back to like fifth grade algebra class until you first learn about variables. Now, if you can't remember, here's a little refresher in order to use variable or what variable basically is is. You take something like the letter X and you said it equal to something else, like the word ham. And then when your math teacher wrote something like, I love X or X comes from a pig, you understood that this man I love ham and ham comes from a pig, as because X and ham are basically the same thing. So that is pretty much what variable is. It's just a fancy word for a placeholder. A variable is a place. Order holds the place to something else and let me go ahead and delete that first fall. So in JavaScript we use variables, a whole bunch, and we use them kind of in the same way, but a little bit different now, in order to tell Javascript that we're gonna be working with a variable, we need to write the keyword v a r this times JavaScript. All right, You ready for this? We're are about to make a variable. You need to include that. The next thing that you're right is the name of your variable. I'm just going to go ahead and name my variable X. But you know, you can name it, whatever you want. So after this, you go ahead and write the equal sign. Now the equal sign is called the assignment operator. Technically like, if you're learning this cause you have a job, script class and you're trying to refresh on JavaScript And he says, All right, what's the equal sign called in job script? You need to say it's the assignment operator, But other than that in these story ALS, I'm just going to say equal sign because you know, it's a whole lot easier. But anyways, your eight var the name of your variables, the assignment operator or equal sign and then you write what you want your variable equal . So go ahead and just right, Like 23 or something, right? Any value in there And then, of course, like every single statement in JavaScript, we have to end it with a semi colon. So you're saying all right, why is a variable useful? What can I do with variables? While a variable is useful for many reasons, I mean, already, we know how to print something out on the screen. So go ahead and write document dot Right? And then inside your parentheses, instead of putting quotation marks in the line of text that it'll print out, go ahead and delete everything and just go ahead and write your variable and check this out . Go ahead and save this and refresh it and see what we get. 23. Just like that. So as you can see that it pretty much this is what javascript is understanding. All right. You're making a variable called X, and you're setting a equal to 23. So now whenever I come across the term X in my program, I note that to substitute it for 23 service saying, Alright, Bucky, you probably could just throw 23 in here, and it would have printed out just fine. So why go through the trouble of writing X? Well, when you're building computer programs, you don't just have it occur one time you might have 1000 different lines of code that include the term X. So you can either type out the word or excuse me, the number 23 each time. Or you can just go ahead up here, change it one time and on medically gonna change in Oliver code for you. So anyways, it's going to save you a bunch of time. And it's also useful for different reasons that I don't want to talk about right now or it'll just confuse you many ways. That is what variable is, how to make it and how it's useful. Another thing I want to mention is Go ahead and delete. This is I said, You can name your variable anything you want, but I kind of lied just a little bit. The first thing I want to mention is this. Variables are case sensitive, and I mean that in if we go ahead and try to tow a capital X up here and refresh it and see what happens, we get nothing on our screen. That's because, ah, lower case X is different than uppercase sex. The variable named Bucky or excuse me, let me type that the variable named Bucky is different than this b u C k y, even though they're spelled the same. If you try to run it, you're going to get nothing again because it looks at it is two different variables. So make sure that if a variable might be messing up that, and that means that you might have capitalized something that you shouldn't have capitalized. Another thing I want to mention is you just can't, you know, use any symbols and letters you want. You need to start your variable name with a letter or an underscore. So since Bucky starts with the letter, you can also start it with the underscore. That would be valid, but you can't start it with, like, uh, and or percentage sign or anything like that. It needs to start with the underscore or a letter. Another thing is that the other characters in your variable name must be letters, numbers or underscores. For example, you can't have like, um, bucky percent dollars on dollar sign to at sign that's that variable doesn't make sense it all. Basically, just use letters, numbers and underscores, and you'll be fine. And lastly, I want to talk to you guys is that the most difficult thing to remember is that your variables can't start with numbers. For example, if you have variable six, Bucky equals 32 you try to run this program. It's not gonna work out because you're variables. Can't start with numbers. That's probably probably the most for gotten rule. But I needed to tell you guys. So whenever I said that, you could name her variable anything you want, I kind of lied. You just have to remember these simple rules has to begin with the letter earned underscore and on Lee. Use letters, numbers and underscores You can't use dollar signs, spaces, Percent signs at signs can't use any of those. And if you follow those simple rules, you'll be good to go. So now that we understand what a basic variable is and how it's useful in computer programming, we can go on and move to our next tutorial, and in the next door I'm gonna be teaching guys about the different types of variables. And trust me, it's going to be extremely useful. So anyways, thank you guys for watching. Never get subscribing. I'll see the next video. 4. 4 Different Types of Variables: what is up, everyone welcome back to your fourth JavaScript tutorial. And in this store Oh, I'm going to be talking to you guys about all of the different types of variables that we can use. One working with job script. So the first type I want to talk to you guys about is what I showed you guys before. And that's just basic numbers. So go ahead and let's make a variable. I'm going to call my Tuna because I love to know why not and said it equal to your favorite number. Mine is 20 and then go ahead. And this is a statement. So we need and with a semi colon and then on the next line, let's go ahead and print this out. So if you remember that the way that we print out things and JavaScript is document dot right and then inside parentheses, we go ahead and write the variable name, which is tuna, and then go ahead and press semi colon. And now, whenever we see it on our webpage, it prints out that variable so we can see already that you can set numbers equal two variables, but what you didn't know is that you can also set numbers with decimal points equal to variable. So go ahead and add a decimal point to your number, save it and then go ahead and see what happens. So aside with whole real numbers, JavaScript can also work with decimals as well. And if you're wondering this, all right, can Java script also work with negative numbers? Well, let's go ahead and see. Go ahead and type a negative number in there. And yes, it's true, my friends, JavaScript can handle negative numbers perfectly. So basically any number that you would want to work with in computer programming JavaScript can handle. So now that we cover numbers, let's go to the next thing. And that is text Now Text and JavaScript and in all computer programming languages is actually code strings. Why they named it that I don't know. Maybe it's because a string of letters put together who knows? Don't blame me. Blame whoever made job script. But anyways, if you want to set variable equal to a string of text, go ahead and set it equal to quotation marks and then go ahead and type your text in here. Now go ahead and save this and see what happens. It prints out whatever text was in there. So again, if you ever want to set variable equal to, you know, a sentence or a word or just a little bit of text, you need to add those double quotation marks in the reasoning behind that is, if he said it equal to something like tuna equals text and you don't have the quotation marks. JavaScript is gonna think that you have a variable right here, and you're trying to set equal to another variable called text. So that is why you need your quotation marks to say No, this isn't another variable. It's actually a word or a sentence or something like that. So once you do this, it'll work. Fine. Basically, don't forget to include the quotation marks. So now a little problem pops up and that's what If you're, you know, wanna have variable and set it equal to, you know, a saying or something like John said, Boy, do I love Bessie Whoa, whoa, Why stuff turning blue And anyway so let's go ahead and save this and see what we want. It doesn't work at all. And the reasoning behind this is because your entire string of texts and needs to be in between quotation marks. So it's gonna say, Ari, you have tuna. You have a quotation mark here. You have your ending quotation mark here, and this is what I'm going to set equal to. But what the heck is all this stuff if you already gave me two quotation marks? Well, actually, JAVASCRIPT is not smart enough to know that this is a saying and that this is actually part of the variable. So in order to tell Javascript that all right, these quotation marks here are supposed to be inside the variable itself. We need to add something called an escape character. Now what an escape character does is it takes the next character, and it pretty much treats it as a regular piece of text. So this and this are escape characters. Now, javascript knows that this and this are the two quotation marks, and everything in between here is just gonna be basically your variable. So go ahead and save this. And now we get our quotation marks to pop up. John said boy Diala Bessie And he really does by the way Bessie's a cow. Not, you know, a regular cow like a dairy cow. Not making fun of anyone here, but anyways, on with this story also. Anyways, if you ever need to escape something, then that is the You know that's a symbol. Use a backslash. So they're different things that we need escape. But I'll teach you guys those as we come across them. Now, let's go ahead and duly all this and let me talk to you guys about two different types of variable. So we already learned about numbers and we already learned about text A k A strings. So there are two other types of variables that I want to talk to you guys about. And the 1st 1 is called Boolean or Boolean. However you say it and that's the word true and the world in the world I keep saying world like the Earth and the word false. Now, I'm not gonna go over Boolean right now, but just remember that they have special meaning in javascript. So that's why, whenever you you know, you might be looking that program and it sounds true or false. Then that is how you make a Boolean. But again, don't even worry about it right now. I shouldn't have even said anything. But now that I'm gonna confuse that, I might as well mentioned this. The fourth type of variable is called No. And whenever you set something equal to no, it means that it has no value at all in this is different than zero. It's completely different than zero or 0.0. No is pretty much like empty variable in again just withdrew and false you'll be seeing what the's due later on. But for now, I just wanted to cover all the different types of variables, so I had to include it. But anyways, I didn't mean to confuse a Just remember that you can use numbers and if you use letters than go ahead and put him in between quotation marks. So once you understand that we're ready to move on to the next story also anyways, thank you guys for watching. Don't forget to wash next oral, and I'll see you guys later 5. 5 Using Variables with Strings: What is up, guys, welcome back to your fifth job script tutorial. And in this story, I me teaching you guys how to use variables with a string of text in your program. So it's gonna be awesome, and it's actually really hopeful, um, in understanding how these programs work. And trust me, you're going to use this a lot whenever your program in JavaScript. So let's go ahead. And ah, well, enough of me talking, Let's go ahead and get started. So the first thing that we need is to variables. Go ahead and make a variable called name and just set it equal, too. Of course, whatever your name is, Bucky. And go ahead and make another variable called like age or something and set these equal to your age. I'm 24. So of course I'm going to send mine 24. So we already know that we can use document dot right to basically write things on the screen so we can either right name. And if we go ahead and print this out, it says Bucky, or we could have went ahead and printed out age, and it will print out 24. But what if we wanted to include this within a bigger string of text. Whoa. In order to do that, you need to use the addition operator, a k a. The plus sign, and you write the addition in this sticks it to whatever string of text you're trying to type out. So, for example, it says, Bucky, um is my name. So go ahead and it's going to treat this as the word Bucky, and it's gonna add it with this sharing. So let's go ahead and just see it now, says Bucky. Is my name simple enough? So anyways, whenever you want to write a variable inside a string of text, you just can't you know, right Something like this. You just can't go ahead and write. Name is my name. Let's check it out. It's going to say in name is my name. If you want to treat that as the variable, you need to put it outside the quotation marks, and you need to stick it together with that plus sign. And then it works perfectly. And not only can you do this before, but say you want to write something after, like Bucky is my name and my age is plus age. So again, not only can you do this before your text, but you can also do after and check it out. Bucky is my name, and my age is 24 so easy enough that it's how you use variables alongside strings of text whenever you're trying to write out stuff. So let's go ahead and delete all this and let me, um, let's go ahead and make some new variables. Let's go hood and make a very my own name Tuna and said these equal to I am a fish and then go ahead another, make another variable called bacon and set this equal to bacon ator and then go ahead. And one more called I only got, like, two things. Why don't I think a tuna and bacon off time? Any time I make a variable. I made like 1000 store ALS, and I swear only may like two variables tuna, bacon and ham. So, heck, it might as well include ham and set this equal to Hamburglar. Make sure it's motor on or else it won't work. So anyways, we have three variables right now, and we already know that we can stick them on a string of text. But what you didn't know or maybe you did is that you can also stickum alongside one another. So tuna, bacon, plus ham. And whenever we try to print this out, it's going to give us I'm a fish bacon ater hamburglar. So let's go ahead and see that I'm a fish begin ater hamburglar. You know, it doesn't make any sense at all, and I probably should pick something that didn't make sense. But, hey, this is just an example. Who the heck cares? So, anyways, that's what I wanted to you guys in this Orel about that addition sign. And whenever you're working with variables or strings of text, you need to include that addition sign. It's not gonna work. So again, that's all. I wanted you guys for this story and the next story we're gonna be diving a little deeper and a JavaScript and going over some more advanced topics. But trust me, they're going to be easy to follow along with and just stick with me in no time, you'll be a job script. Perot. So nice. Thank you guys for watching. Um, don't forget if you have any questions. Just go in my forum, the new boston dot com slash forum. And if I don't answer for you, someone else will. So think guys, for watching over get subscribing else you guys later. 6. 6 Functions: well is up, guys, welcome to your sixth javascript tutorial. And in this Zorro, I will be talking to you guys about something called Functions. Now, ah, function is basically a mini program. It's a mini program that you can use any time you want throughout your job scripting. For example, if you're making YouTube, they probably have a function to play the video. Whenever you hit the play button, they have a function to pause the video. Whenever you hit the pause button, they have a function of function to add a vote to the thumbs up whenever you click the thumbs up on. So as you can see, a function can be called not only as soon as the Web page loads, but it can be called any time you want. So let's go ahead and make a function right now. In order to make a function, you first type the name. Well, let's give us some space type the name function. This tells Java script. All right, we're about to make a function now. After this, you give a name to your function. I'm going to name mine funky because this function is funky. Now, after this you add to little parentheses. I'm not gonna be talking about these yet, but these air called your parameters, so we'll just ignore these for now until the next tutorial. And then, after these, you had too little curly braces. Now, inside the curly braces is where you're going to be putting all of your javascript code. All of the Cody put in here. All the statements is the code that it's going to run whenever you want to use your function. So if you're making that YouTube page whenever they clicked the play bun, you would play the video now. So anyways, you can see that this is the code that we want to happen whenever they call that function a k A. Whenever the user wants to use that function. So let's go ahead, and Inter function will make it do something really simple. Let's go ahead and make a pop up appear on our screen, so making pop ups is really easy and JavaScript all you need to do is write the name alert , and this mains make pop up on the screen. Now inside the parentheses. For this, you write what you want to appear in the box, so just go ahead and write like ouch or something like that. Now, whenever this function is used, ah, pop of is gonna appear on our screen and it's going to say Ouch. So let's go ahead and well, let's go ahead and use the function right now. So in order to use a function, you go ahead and write the name of your function funky. And then you go ahead and write those parentheses, which we don't know what they do yet, but will be learned that in the next story. And then, since this is a statement, we go ahead and end it with a semi colon. So anyways, are are JavaScript is going to say, Ari, we have a function right here prepared to use it whenever we call it. So right here is when we call it. And by the way, like I said, any time I say, call a function, I mean use the function. Calling a function is just a technical term. So use my function. So it's gonna say, All right, call funky now. So a pop ups going appear. So let's go ahead and save this to see this baby in action. As soon as we load our page is going to call it Bam. Look at that. A pop up appear and it said Ouch. So let's go ahead. And maybe it will be easier to see if I actually add a button on the screen so you guys can see functions don't need to happen as soon as you load your page. But whenever you need to column, so let's go ahead instead of just calling it reiterate right away, like right Then, let's go ahead and add a form on our page because if we add a form, we can go ahead and add buttons. So actually, we need to do that outside the JavaScript. Since it isn't actually part of JavaScript, it's actually part of X html. So go ahead and add a form and your form right here and inside your form. You're only gonna have one element, the input. And by the way, if you have no idea what I'm doing right now, go ahead and watch my ex a shame out story. ALS. I talked all about forms and stuff like that. So the input, the type of this is button, it just gonna piers a button on your screen. The value is what you want to sound, but we'll just write. Touch me and there is another parameter that you can add to your buttons and that's on click and inside or the value for on click. You go ahead and you're right the name of your JavaScript function. And I'm just going to go ahead and write funky because that's the name of the function. So anyways, check this out. If we go ahead and save this in, launch it and chrome, we go ahead and we have a button on the screen that says, Touch Me, that's by default What's loaded on our webpage. But you can see we added attribute to this function or excuse me, this button called on Click Funky. That means whenever we click this month and we want you to use a JavaScript function called funky. So whenever we cook, this button and alert box is gonna pop up. That says ouch. So let's go ahead and click this bun and we see the alert box pops up and it says, Ouch, press okay, and that's it. So there is the beauty of, you know not only how to make buns, but also how you can call a section of JavaScript by using something called Functions. So anyways, by default your web page loaded and loaded this form with a button on it by default, it did nothing. But whenever we clicked, it said, All right, Whenever you click me, I'm gonna call this function called funky. So that means I'm going to go back up here and do whatever you told me to do inside. So, by the way, the line of code inside your curly bracket is called the Declaration. Some people call it in the body, but I just call it whatever codes inside curly bracket in that is the basics of how to create a function. Just go ahead and write the name function the name parentheses, curly brackets and write your rules inside your function and also how to call a function whenever you want using a button. Or you can just call it automatically by writing the name of the function by anyways in the Mexico or oh, I'm gonna show you guys what these parentheses are and why they're useful and why most functions actually use those parentheses san ways. Thank you guys for washing this store. Oh, thank you for learning the basics of a function. If you don't quite understand, just stick with me in the next store. Oh, everything will clear out for you. So now he's thinking as Russian. Difficult, Subscribing. I'll see you guys next video. 7. 7 Using Parameters with Functions: what is up, everyone, welcome to your seventh JavaScript tutorial. And in this tutorial, I'm gonna be talking more about functions and specifically what those parentheses are and why you need them Whenever you create a function. Well, let's go ahead and first create a function. And let's go ahead and name Meatball. Why not? And then go ahead in and of your parentheses. Now, let's go ahead and make the body right now before we start talking about the parentheses, Um, let's just go ahead and make an alert box would just leave empty for now. So now what we need to do is talk about this Parentheses, thes parentheses are called the parameter of our function. Now, sometimes you need additional information in order for your function work. For example, if you made a function convert temperature of Fahrenheit to calculus, you need a temperature in order to know what number to convert. If you made a function in order to, you know, greet someone like Hello, Bucky. Hello, Tina. Hello, Tom. You need their name in order to know how to greet them. So let's go ahead and make a function with a parameter now in order to make a parameter. Just go ahead and type in the name of a variable like X or something like that. And then later on, whenever you're creating the body, you go ahead and you use that X just like you would a normal variable. So, for example, I love and then go ahead and write X. So now, whenever we use this function, we need instead of let me go ahead and just type something like meat ball and then we need to pass in value and let's just say bacon or something like that. So now here is what's gonna happen. Let me run this for you. Maybe that'll be easier. Oh, it's off the screening. Let me. Ah! Run on the screen. Run, chrome. There you go. Right here. I love Bacon. OK, so why did it say I love bacon and what exactly is going on? So I see we called our function and used it right here. But since this function has a perimeter, it says all right. In order to use this function, I need one extra piece of information. So whatever information we gave it right here, it actually took this word. Bacon and it said X now equals bacon. So now in the body of my function, whenever I come across the variable X, I substitute it with whatever you gave me, which is bacon. So let's go ahead and call this again. Ah, with um what else do I love now? We, Portman and, um, the movie good will hunting. So now let's go ahead and save this and run it And maybe this will be easier to see. It says I love Bacon first, and then you press OK. And then it says, I love Natalie Portman press Okay, and then it says, I love good Will hunting press OK, so now you can see that it's the same function. It just has different information being passed into it. And by the way, I keep saying past because the technical term, whenever you give additional information into a function, it's called passing it information into its parameters. So this the parentheses are technically called its parameters, and when we give information into it, it's called passing information. By anyways, you can say substituting variables. It really doesn't matter as long as your program works. So anyways, you could see that Whenever we gave extra information, it said I love and then substituted that information as X. So it says, I love Bacon. I love Natalie Portman. I love good will hunting. So that is how you can use parameters whenever year, you know, want to use additional information for your function. So this is a really simple example using in the work box. Um, yeah, that's pretty much all I have for you for this tutorial. In the next tutorial, I'm going to show you what happens if you're function needs more than just one piece of information. Maybe it needs three names instead of just one. Maybe it needs a couple numbers instead of just one send ways. That's what I'm going to be showing you guys had do. It's called passing multiple parameters into a function, and it can get kind of complex. But as long as you stick with me and you'll be OK, Santa a steak. You guys rushing this story and I'll see you next time 8. 8 Functions with Multiple Parameters: wood is up. Guys, welcome to your eight. I think it's your eighth, at least. Who's counting? Welcome to your job. Script tutorial. And in this store. Oh, I'm Justin right now. Probably should have done that before I started. Then again, I probably should've found out what story I'm doing too. But anyways, welcome to your eight tutorial in JavaScript. And in this story, I'm gonna be talking about how to use multiple parameters with your function. So let's go ahead and make function right now. And I'm gonna name on Apple's because I'm kind of in the mood for some apple sauce right now. And let's go ahead and give it to parameters in order to give it to parameters inside your parentheses. Instead of just writing the name of one variable, you write the name of however many variables you need separated with the comma. So if you have two variables, you separate them with one comma. So I have a variable, have a variable called one, and have a variable called to now inside the body of my function. Let's go ahead and use both of those variables. Um, document right would just go ahead and write something one is better than and actually need some spaces is better than at two. So now you can see that this is where I taught you guys how to add a strings. Two variables. This is one instance where would come in handy and another cool thing that I didn't see you guys yet. But any time you add a string off a HTML tag or X html tag, it actually will treat that not his text, but actually treat that is the tag itself. So whenever it comes across, this right here is actually gonna break a movie to the next line. So that's a neat little trick that you guys might want to remember. So anyways, we have a function called Apple's. So now let's go ahead and actually call or use this function in order to call a function. You just go ahead and type the function name anywhere in your program, and then you write what other information that needs. So this function we already know it needs two pieces of information, so let's give it to pieces of information. Uhm I'm going to give it my name is variable and is the other variable needs. I'm going to give it the name of my cousin Hobart. So let's go ahead and save this and refresh and see what we get. Bucky is better than Hobart. So what it did is it said All right, We have this function that takes two pieces of information. So whenever we're running our program and we said that we want to use this information is going to say All right, what variable are you going to use as number one? OK, Bucky. Got it. Now, what variable are you going to use is the variable too, Hobart. Got it. Check. So Bucky is better than Hobart. Makes sense. You gave us both the pieces of information we need. We're good to go. So we can also call this function multiple times and it, you know, runs the same exact way. So, um, let me think of some bands. Counting crows is better than I don't know, Bieber. And let's go ahead and write like, Ah, strawberry is better than coconut. By the way, guys. Nice little piece of information. I absolutely hate coconuts. I can't stand the smell of it. I can't stand the sight of it. I can't even wash my hair with coconut shampoo and makes me gag. So if I ever see a you know, walking down the street and you have coconuts than, ah, you know, don't be discouraged that I don't talk to you. It's not you, it's coconut. So let's go ahead and save this refreshing and see what we get. Bucky is better than Hobart. Counting crows is better than Bieber should be. Are better. Strawberry is better than coconut, which is true. All of these things are true son ways back to our program. What it did is it substitute the 1st 1 for one and the 2nd 1 for two, and then inside our function, it just substituted those variables forever. We had out here and again. These are called the parameters, and whenever we're giving this information or substituting it, it's called passing information into your parameters. So again, if you're watching these stories because you were taking a job, script classes, school and you couldn't understand your teacher, that's the questions that they're gonna ask on the test. And that's the information that you need to know parameters passing it in. So there you go, but If you're just watching this, then Ah, don't even worry about it. As long as your program works, you good to go. So thank you guys for watching. Don't get subscribe. Don't forget to check out my website. My their videos. And don't forget to check me out If you see Mount ST So Ah, yeah, I guess I'll see you next story. 9. 9 The return Statement: What's going on? Guys, welcome to your ninth JavaScript tutorial. And in this is Oro. I'm gonna be talking to you guys about something called the return statement. So sometimes, like before we made a function and it just did something it either printed text out on the screen or it made a pop up appear or, you know, it just did something. But sometimes you want the function to return of value to you. So this is especially useful whenever you're making a calculation and you pass in two numbers as a parameter, for example, um, 20 and 10. And you say Multiply these together and it multiplies them into returns the value to you or another word. It performs the calculation and returns the answer to you. So sometimes you can see you just need functions, do something like print out something on the screen or pop up a text box, and sometimes you needed to perform a calculation and give you back the value. And whenever you need the value in return, we need to use something called the return statement. So let's go ahead and make the most basic function we can with the most basic return function. So let's go ahead and name function and let's go ahead and name this too easy, because this is gonna be extremely easy, not even going to take any parameters. And let's go ahead and just return any value. Let's return. Um, just some text game time. So now, whenever we call this function too easy and try to run it, nothing happens. Because by default, as you can see, we didn't tell it to do anything. We didn't tell it to print it out and screen. We didn't tell it to, you know, use it in the litter box. We just said, give us this value back in with that value. We didn't even do anything with it. So in order to use that return value, you actually have to use it somehow. So, for example, if you're right document dot right, and then inside here, you call your function to easy. What's going to do is it's going to take this function right here, and it's gonna say, all right for this function, you want me to return the text game time. So whenever you give me the function, I'm going to substitute the return value which is game time. So then I'm gonna print out a document right game time. So it's basically saying, All right, this function is basically equal to the return value. So when I say document right, too easy, it's going to calculate this and figure that the answer is game time. Now, this might be a little difficult to understand. So Well, I decided to do is make a function teaching guys how to add two numbers at one number in another number and give you, you know, basic addition. And I know that I didn't talk to you guys about any of the math operators or how you can use algebra with, you know, javascript. But it's going to be really simple to understand a lot more simple than that example. So let's go ahead and make another function and just call it ad numbers, and it's going to take two parameters. It's gonna take a and be and inside here, let's go ahead and make another variable called C, and this will just be some of a plus B. So now, if you pass it like number three and four C, would it be equal to seven? Because it's gonna add a and B in story in the variable. See. So now what we want to do is we want to return. See? So now, later on, when we're programming and we go ahead and write, add numbers, let's go ahead and pass it like three and six. Whenever we call this, nothing is gonna happen, because this is just the value of nine. We didn't tell it to print out nine on the screen. We didn't tell it to print out nine and Miller Box. It just is the value of nine and just sitting there in our program, pretty much like a waste of space. So let's go ahead, save this and see what happens. Nothing. So let's go ahead and actually take this and cut it. And now let's go, Henry document dot Right. And inside that paste, let me get rid of that semicolon put at the end pace that function and numbers. And now it says Ari, the function and numbers three and six is basically equal to the value of nine. So what do you want me to do with that 90 you want me to write it out on the screen. Now I see. So we go ahead and save this and refresh. That is why we get the value of nine on the screen. So again, a return value isn't really useful unless you do something with it. And as you can see clearly in this example, we called the value three as a and B s six, and it said three plus six is nine. So that's why I'm going to return nine to you. So anyways, the expression and numbers three and six it basically looks at this and says nine. So that's why I wrote nine now on the screen. So basically, whenever you call a function, it's basically looking at it in trying to figure out what's the return value and then takes that return value and does whatever you want to it. So that is the basics of return value again, I know I didn't even teach you guys that you can add variables, but hey, you can Whenever there number, it adds them together. So there's a little glimpse into the future. But for now, that's all I want to cover. So thank you guys for watching this story in the next store Oprah going to be talking more about functions. But for now, thank you for watching donkeys. Subscribing. I'll see you next story. 10. 10 Calling a Function From Another Function: What is up, guys is Bucky and welcome to your 10th javascript tutorial. And I hope that you guys are ready to have your minds blown because that's what I'm about to do in this story. Because in this story, all I'm gonna teach you guys how to call a function from another function. Interesting. So let's go ahead and start with two functions. Function. Um, I just go ahead and name the 1st 1 do first, and it wont take any parameters. And for the body. Let's just go ahead and, you know, give us something simple Would just print something out on the screen. Um, so right Documents right? And what? Something stupid we can put I am first burrow or bow. Hey, who that cares. And for our second function, go ahead, site function will name this do second. If you're going to guess that and we're just going to write on this document rights and Ray just right, like the bunch of twos or something for a second. I don't know. I'm not really creative tonight, but anyways, so we have two functions do first in new second and these air functions that we're going to call from another function. So let's go ahead and make that function right now. We'll just go ahead and name this function start, since this will be the starting point. So let's go ahead. And this won't take any parameters. Either all this function is going to do is call other functions. So first is going to call do first, and then it's gonna call do second. So now if we go ahead and run this program, nothing is gonna happen because we just have three functions right here, pumped up and ready to go. But we debt. We never even used any of them yet. So go ahead, refresh and check it out. I'm refreshing. Nothing is happening. And that's like I said, we have three functions right here, pumped up, ready to go. But we didn't start off. We didn't call them those functions first. So go ahead in your program and let's start it off by saying start semicolon. So now it's going to say All right, you got a function, you got function, you gotta function. And now the first thing I'm gonna do is call this starting function right now. So I go up to the starting function. What do you want me to dio do? First function? So then I go up to the do first function in per now I am first boat. So this is actually the first thing is gonna print out right here and says, All right, I'm done with the first function. Now what? Ok, you told me to go do the second function, so I'll go appear and print out to do to do to. Okay, So basically print out this and print out this and then I'm done. So let's go ahead and save this and see what we got. I am first bow and 22222 So, basically the only function that ran is the starting function. And then all this one did is it called the 1st 1 and called the 2nd 1 and then it quit. And that's our whole entire program. So anyways, what I want to show you is you can use functions like this starting function to start it off and call other function. And you actually do that a lot of the time. So, for example, if you have a lot of code, you can organize some in the do first, organize some in the do second, and it makes it a lot cleaner than having this huge long list the code. You can break it up into nice little functions. And then later on, when you see all right, something weird is going on with this first function. You know what bit of code is messing up, so anyways, that's why functions come in handy. But now that I have time in that story, it took me a little quicker than I thought. I bet you guys were wondering this. What would you do if you had a function like first and then it called the second, And then that one called the first, which would call the second. And it was just like an endless loop. Well, I'm not sure, but, hey, I never did it before, but let's go ahead and find out. My guess is that my computer is gonna blow up, but you guess Ah, in the comment box. What you think is gonna happen below my computer just might freeze or something. But well, I'll make so Rogan so function do first. And I don't recommend doing this, but let's go ahead and just the document dot Write something on the screen. Ah, just very first, we'll make it simple, And then what we're going to do is call another do second function from here and the do second function function Do second, Let's just go ahead and have this one right out on the screen. Um, just read a second. You know, this has some space is actually first in second. So it isn't all jump together a defect if it actually does pronounce, and then this one is going to call Do first. So basically, what's gonna happen is when every call one these functions is gonna print something out called the other function, print something out called the other function print call, print call, print call, call. I'm just gonna do that for, like, the next three minutes until you get tired on me and go watch another video Vanya ways. It's just going to go back and forth. But if we would run it right now, nothing is gonna happen because we just have to functions waiting there. We didn't call any of them yet, So now let's go ahead and start off and called Do first So the first thing is going to do is call this first function and then from there it's just gonna be a endless circle. So now let's go ahead and save it. And when I refresh ISS, I'm kind of scared to press it. Our I'll do it womb So then it just printed out an endless list of first and second. I wonder if this even stop printing out? Yeah, it finally just gave up. So So that's pretty cool, actually, that Mozilla Firefox is give up after a certain amount of time. So, yeah, that's what I would do to. That's why I had to drop out of college, just gave up after a certain amount of time. Anyways, there you have it. How to make it endless loop of functions again. I wouldn't recommend that in any of your programming. And if we're going to interview for a job, please do not mention this and do not mention my name or my reputation would be ruined. But for now, thank you guys for watching my tutorial. I hope you guys enjoyed it. And I guess I'll see you later 11. 11 Global & Local Variables: what is God's will come to your 11th Actually had to think about that for a second. Welcome to your 11th JavaScript soil. And in this Teodoro, we're gonna be talking about something called Global and local variables. So the concept of a global variable is simple. It's any variable that you make that's outside any function and a local variable is simple . It's any variable that you create inside the body of a function. So I mean, there are only two places you can make him simple enough, But the rules. When you use them, they eat kind of turkey. So let me go ahead and show you guys. Let me first demonstrate what a global variable is and when you're allowed to use it, let's go ahead and make a variable called Girl. And I'll set it equal to the name of my first girlfriend called Kelsey. I'm sure she will appreciate that. So, Kelsey, if you're reading this, what's up? And so, by the way, she wasn't technically my first girlfriend. I had a girlfriend and fourth grade named Nicole, but we really did it. Weren't boyfriend girlfriend. She just let me play with her Giga Pet It was nothing serious, Kelsey. I actually went on my first date with her. We went and saw Ah, What was it? The wedding singer with Adam Sandler. And he had a mullet, and I was extremely nervous the whole time. Hey, I was in fifth grade. Give me a break. Guys. And her mom drove was their inner van, but still his burgo. So anyways, let's go ahead and make a function right now and we'll call this spit. It really doesn't matter what you name it. I'm gonna name it spit, because it's going to spit out this name. So all this function is going to do is document dots right out on screen the name of that variable girl. Now, check the cell. Like I said, you can make variables in 12 places inside the function right here or outside of the function where he made this girl. Since this variable is outside of the function, we are allowed to use it inside the function right here. Now, let's go ahead and let me prove it to you right now. Let's just go ahead and call spit. And when I run that line, Dakota, it's gonna type out, Kelsey. And now let me go ahead and document dot right that variable. And then this is going to pronounce Kelsey. So anyways, the point I'm trying to get across is whenever you have a variable outside of function, you can use it both in the function and anywhere else in the program. So let me go ahead and refreshes. And it says Kelsey Kelsey, just as we predicted, Simple enough. But now let's go ahead and take this variable. Cut it. And there we go. And let's go ahead and make it inside this function right here. So now inside this function, we created a variable called Girl, and we're going to try to run it inside this function and outside the function. So now let's go ahead and refresh and actually had to save that and refresh. And we see we only get one. Kelsey. Well, why is that? We made the variable. It doesn't have any typos. We didn't forget to semi colon or anything. So why is this Kelsey only appearing once? Well, like I said, with global variables, whenever you create variable outside your function, you could use it in any function. You want and also any routes in your program. But whenever you curry of variable that's inside of function, you can Onley use that variable inside that function. If we had another function, we couldn't use it in that if we had another function could use in that, and we're not allowed to use it outside that function. This function is very greedy. It says, Whatever my variables, I create their mind. No one else is getting them, boy. So that's why whenever we called spit, it printed out Kelsey because this was the function. And then when we try to just use it on her own, it wouldn't let us because it said All right, the variable that I khoury it's mine. I get to keep it. So that's why it only printed out once that was the functions call not the one outside. So anyways, the point. I'm trying to get across global variables when they're created outside any function you can use them anywhere inside functions, outside functions, whatever. But whenever you create a variable inside of function, it's called a local variable, and that variable can only be used within the function and wishes, declared a K a created. So that is your basics of global and local variables. And, yes, that is the technical term firm, global and local. So if you have a test, it's okay to write global and local. So thank you guys for watching. I think you guys for putting up with my history of fifth grade girlfriends and I hope you enjoyed in Hey again, Kelsey, if you're watching was a 12. 12 Math Operators: was going on. Guys, it's Bucky and welcome to your 12th 2 Doral. And this, my friends, is the tutorial that I have been waiting for. We're finally going to begin talking about math and math operators and all that good stuff . So a couple tutorials go. I give you guys a quick little taste of variables and math operators, and you saw that not only can you set variables equal to numbers and text, but you can also set them equal to simple equations. For example, four plus six uses the addition operator to set apples equal to 80. So what it does whenever you do this, it knows that you're working with numbers, and it knows to add them together to give you the answer. So then, when you have document right and you try to pronounce apples, it doesn't turn out the text. Four plus 76 actually prints out the value of 80. So in that sense, it knows that you're working with an equation, so that's pretty cool. Another thing that you can do is you can't not only limited to two numbers, you can go ahead, and at three or four, however many you want, so let's go ahead. And the answer to that is 778666 Pretty cool, huh? So let's go ahead and delete all this. And aside from the addition sign, you can also use subtraction. Sign. I don't really need to show you example of that because hopefully you guys know how to subtract. Well, I do want to show you guys. Example of is multiplication. So the multiplication might be a little different than you guys would expect. It's actually go ahead and type like 54 something. It's not X. Don't ever use a lower case. That's exactly the Asterix sign. Just like that. So 54 times three. Let's go ahead and see what that equals. 1 62 Pretty cool. So anyways, when everyone multiply, go ahead and use the Asterix sign. Whenever you want to divide, you can go ahead and you use the Ford Slash just like that. So 54 divide by three is 18. It goes into evenly pretty cool, But what if you have a number like 56 divided by three That doesn't go unevenly? Well, let's go ahead and refreshes and see. We get 18.6666 And finally it cuts you off. This six actually goes on forever. But depending on your browser, it's going to cut you off after a little bit. Just like my friend did. Left in light when I had too much brewskis. But anyways, it's going to cut you off, so that leads me to another point. What if you actually need that remainder as a number itself? For example, you're making a program, he said. 18 Remainder two. Which would the answer to this problem be? Well, any time you want the remainder, you need to add the percentage sign, and this is called. The module is operator. It basically divides one value by another, and it gives you the remainder back. So 56 divided by three, is 18 remainder two. So when you say this is not going to say 18 remainder, two is just going to say to simple enough. Let's give another example. 25 Divide by seven is three remainder four, but it's not going to say three remainder for is just going to say four. Pretty cool, huh? So that's how you use the modules operator in the last thing I actually want to go over. It's not really a math operator at all, but it kind of is. It's called the increment in Decorah Mint operator, and this is how you can quickly add one or subtract one from a single number. So let's go ahead and make a variable called chops short for pork chops and said that you quote a seven. By the way, I'm hungry and let's go ahead. In order to add this, you can add one to this variable and one of two ways you can do chops. Well, I wanted to teach you guys that, but you can do this. Chops equals chops plus one. So that's going to say, All right, this very bold now equals seven plus one so we can go ahead and write Document that right chops. You can actually do this another way, but I'm not going to cover that in this tutorial. So let's go ahead and save this. And did I? This is chopped, actually. Was going plural and singular mixing up can't do that. So let's go ahead and save this burnout, and we see that we do indeed have a first. It was seven. Then we added one to it. We got a pretty cool, huh? But see, whenever you have chopped equal child plus one, it can get kind of confusing. So let me show you guys an easier way to quickly add one to a variable. Any time you want to add one to variable, just go ahead and write the name of the variable, then right plus plus. And that's it. That will take the number. Whatever it ISS say. It's like 67 and it would add one to it, and they will give you a completely new variable. So let's go ahead and save this. And now chops is equal to 68 instead of 67 so that is a way to change a variable by adding one to it. You can also write chop minus minus. This is the Dicker Mint or what's called determent. Whatever not decriminalise, that's Ah, that's something else. So I don't want to talk about that and see it was 67 before, and then we took that variable subtracted one for minutes. So now chop equals 66 we printed it out on the screen. So again, plus plus in minus minus. They aren't really useful right now in these examples. But trust me whenever we learn about loops and we're gonna learn about other stuff and they're gonna come in handy and we're gonna be using them a ton, So that's why I want to cover him now. So when we go over him later on, you won't get confused. So thank you, guys for watching. That's all I have for you guys for this story. A simple tutorial about math and simple equations. Well, I got, like, a piece of flim in my throat. So anyways, thank you guys for watching. Don't get subscribing. I'll see you in my other videos. 13. 13 Assignment Operators: Wood is up, guys, it's Bucky. And welcome to your 13th job script tutorial. And this story is probably going to be a real quick one because I'm only going to be talking about one thing, and that is called assignment operators. So I already touched you guys. What the assignment operator is. So say we had a variable equal to Bucky and let's go ahead and set it equal to 24 because that's my age. And if you go ahead and just documents right out Bucky, it's gonna go ahead and print 24 on screen. No need to show you guys that, but hey, I will anyways, right there. So that is the assignment operator, basically an equal sign. But there are different types of operators to, and they're pretty much like a little short cuts. And there's an ad and a sign operator, which pretty much takes a variable. And in order to use the ad in a sign operator, you put plus equal sign and then to the right of it, you put a number like 54. Now what this is going to do is it's gonna say, Ari, the value of Bucky is 24. So if I add 54 to it, I get the new value off 78. So now Bucky equals 78. So let's go ahead and refresh this. And when it prints out Bucky, it says 78. So it doesn't change Bucky to 54. What it does is it takes Bucky adds 54 to it and assigns at the new value. So aside from, um, what is called the ad in a sign operator, you have the subtract in a sign operator right there. She's 54. Why not? Which gives you negative 30 the multiply in a sign and the divide in a sign, which is I have no idea what this value is. Whoa, Nice. So, aside from the ad in the science of tracking, signed, multiplied, divided and assigned, there is one other one, and that's called The Module is and inside modulates and a sign. And to tell you the truth, what this does is it takes an and an imager remainder or basically the remainder and it You know what? Remember this. Don't ever use the modules and assign I've been programmed for. I don't even know how many years, and I never used the module ascent assign other than just teaching people what the module ascent assign Operator does. So basically, you're never going to use the module. Listen, assign So what? That out of your memory and ah, yeah, I probably should edit that out of that story, but anyways, I won't. So, aside from that, the other thing I wanted to do, you guys before I let you guys go is that you don't have to only use one of these. You can go ahead and assign 67 of that and let me see if you guys can figure this out and go ahead and you know, 32 and then Bucky times equals for And then Bucky, Um, Moz Divide equals five or something like that. So go ahead. The original value Bucky is 24 plus 67 minus 32 times four, divided by five. And I messed that up right there. But I'm gonna wait 10 seconds, and I want you to leave a comment below of what you think this equals and let me see if anyone configure it's out in 10 seconds. Nine. Okay, three to one. And let's see what it was 47.2. So how close were you to that? Let me know in the comments section below because I bet you were way off because I was by anyways, thank you guys for watching. That's all I have for you guys for this story. Just want to talk to you quick about assignment operators. And don't forget, don't ever use the module set aside, Operator. I'll see you next time. 14. 14 if Statement: was going on. Guys, welcome to your 14th JavaScript tutorial. And in this is Toro. I'm going to start off to Jean guys something called an If statement. And then we're gonna learn about something called comparison operators. So basically, an if statement is a really simple way to have your computer make a decision. You're going to give a scenario, and if it's true, it's gonna run a bit of code. For example, if you say if the variable called Bucky is equal to 24 then run this bit of code. If it's not, then don't do anything so really simple. Decision. So let's go ahead and do that right now. Let's go ahead and make two variables, and later on we'll compare him to each other. So make a very bone name apples and sets equal to you know, 20 or 34 whatever and make a another variable called hot dogs and set this equal to like 53 . It doesn't matter what numbers they are, as long as they don't equal each other, so we have two variables. We already know what those do now. Let's go ahead and look at the basic syntax for an If statement. Now the if statement is set up like this all of the time, have the word if right there and then go ahead and write to parentheses after that. Now, inside these parentheses is where you're gonna be making your comparison. You're going to say, all right, if Apple's is equal to hot dogs, if Apple's is greater than hot dogs, if Apple's is less than hot dogs and all that stuff, you're gonna be comparing one thing against another. Now, if that comparison is true, it's going to go ahead and run of the bit of code in between these curly brackets, so go ahead and throw those in. So basically, if statements work like this, it's gonna test something right here. And if that test is true or if they do match each other, it's gonna run this bit of coat. So let's go ahead and give it something really simple to aren't run document dot right? Um, yea, it worked something stupid like that. So let's go ahead and give a simple comparison right now, and you may be thinking right this all right. A simple comparison would make sense like apples equals hot dogs. I mean, make one thing equal to another, and that's a test. That's how I did in math class. That's how it works. But whenever we make a comparison, we have toe follow one simple rule. We can't use a single equal sign ever, because JavaScript already uses single equal sign whenever it sets a variable equal to a value. So whenever you're comparing two values, you need tohave to equal signs, and now you're testing all right. Does the value of apples equal to value of hot dogs? In other words, does 34 equal 53? If 34 does equal 53 it's gonna pronounce. Yea, it worked. If it doesn't equal 53 or if they don't equal each other, nothing is gonna happen. So since they don't equal each other, let's go ahead and refresh and nothing happens. So let's go ahead and change these values to make Apple's equal 53 and hot dogs equal 53. So now apples does indeed equal hot dogs. So this is going to be true, and since this is true, this is going to run. So let's go ahead and save this, refresh it and check it out. Yea, it worked. So now we can see the basics of an if statement. It's basically this again you. You test what is called a condition. Now this condition is going to be true if it's true and it's going to be false, if it's not true, if they equal each other in this case is going to be true. If they don't, it's gonna be false. Any time. It's true. This bit of code is going to run any time. It's false, nothing is gonna happen. So you're basically giving your computer a decision to make. If this is true, run this. If it's not, don't do anything. So, aside from this double equal sign, we know that we can use the double equal sign to tell JavaScript. Compare two things. We can also give it a couple other symbols. We can say explanation. Point equals, and what this means is, if Apple's doesn't equal hot dogs, go ahead and print this out. So check this out. Since they are alike and they do equal each other, then this is going to be false, since let me go ahead and run this and show you guys nothing happens right here. So why is this false? Well, does Apple's not equal hot dogs? No, they do equally each other, so it's false. So this is a way of saying all right, if Apple's is not equal to hot dogs do this. So when exactly with this pronounce say you had 53 99 Whoa, Now they don't equal each other. So this statement is true. And since this is true, I'm going to go ahead and print this out, and it worked. So another thing that we can do is I showed you guys how to make ID equals and how to make it not equals. So you can, of course, use greater than in less. Stan, these are really easy ones. If Apple's is greater than hot dogs, a K If 53 is greater than 99 print this out. So can you guys guess what's gonna happen? It doesn't print it now because 53 is not higher than 99. And again, I don't need to show you this, but I might as well do it anyways. If 53 is the less than 99 which is indeed true since this statement is true, then this is going to burn out just like that. So that is why when I refresh it, it prints out. So those are the four most common. But I also need to ah, include one other thing. You can also have ah greater than or equals two in this say, if it's greater than or if it is equals to like 53 53 would work, and also 56 is greater than or equal to 53. But so just verify that does work. There you go right there, and also you have less than in equals two. So in any scenario where apples is less than or equal to hot dogs, which it would be false in this case because 56 is not less than or equal to hot dogs whenever you save it, it doesn't work, so check it out. So those are the basic ones. There are a couple other ones, but I don't want to confuse the guys for now. So and when you want to compare two values to each other, use double equal signs when you want to make sure that they're not equal to each other use explanation. Point equals sign, and then you have your basics greater than less than greater than or equal to less than or equal to. So that's basics of what if statement is it pretty much test something, and if it's true, it runs a little bit of coat. So now you understand what conditional operators are. Or excuse me, comparison operators and also the if statement. So in the next story, we're gonna be going over kind of a more complex if statement. But it's probably gonna be the one that you're going to be using more often. So it's actually not that difficult to learn. If you can understand this than the next thing is going to be a breeze. So anyways, thank you guys for watching. Never get subscribing I'll see you guys later. 15. 15 if else Statement: All right, guys, it's bucking and welcome to your 15th JavaScript store. Oh, and in this story, like I said, we're going to be going over a kind of mawr complex if statement. So in the last disorder, I showed you guys how to make a basic if statement, and we pretty much gave a test. And if that test was true, Iran a bit of code. But if that test was false, then it didn't do anything. Well, now we're going to be doing is telling it if it's false instead of not doing anything, give it another option. So if it's true, do this. If it's false, do that so before he said. If it's true, do this. If it's false, do nothing and now are saying it's true. Do this. If it's false, do that so pretty simple. We're pretty much making it do something, no matter what. So let's go ahead and make well. Let me show you guys the basic syntax of this in order to make an if else statement, and that's what this is called. If else we go ahead and read a if statement and we're going to give it a test right here. If that test is true, we're going to run this bit of code right here. Let's say we have document. Right. Um, and just right. Like I love hot pockets. Good enough. So now if this test is true, we run this bit of coat just like we did before. This is exactly identical. But now let's stick another piece onto this. We're going to go ahead and write the word else. Now, go ahead and add brackets for this. And instead of doing nothing, have to test this false. It's gonna do this bit of code right here. So document. Right. Um, I love. Now, let's give it something like I love Strawberry. So this is unhealthy, and this is healthy. So, you know, we got kind of a contrast going on there. So now let's go ahead and give it a really simple test. Let's just go ahead and test two Numbers can't be easier than that. So if two equals two and remember, we can't use one equal sign we have to use to because we only use one equal sign whenever setting a variable equal to a value whenever we're just testing to values that make sure the equal each other. We used to equal signs. So right now we're saying, Ari, if two equals to do this, if to doesn't equal to do this. So let's go ahead and save it and refreshing and see what it says. I love hot pockets. So that's why the 1st 1 got executed. But what if they didn't equal each other? Would have seen all right, if two equals 65 well, we know that two does not equal 65. Just doesn't make sense. So it's going to say all right, if two equals 65 do this. Well, it doesn't. So I'm not going to do that. So I guess I have to do this. I love strawberry. So let's go ahead and save this and see what we get. I love strawberries, just as we thought. So, aside from having just two values equal each other, we can have two variables equal each other. For example, if we had, um of our ah Blue equal 43 in Hvar Red Equal 76 then we can go ahead and we contest. If blue is equal to read, which they aren't so it's going to say, I love strawberries right here. Check it out. I love strawberries, but if they are equal to each other 43 in 43 we'll not have 743. Check it out. I love hot pockets. So again, this is more common to compare two variables against each other. You can also take a variable and compared to a number at 43 equals 43. Just like that, I love hot pockets. So aside from this, what you can do is you can use all your other comparison operators to if 43 is not equal to 43 then let's see what happens. It says I love strawberries. So you're saying all right, if 43 is different than 43 do this. Well, I'm not going to do that because they're the same. So if they're the same, go ahead and do this. And that's why it pronoun I love strawberries. Now let's go ahead and, ah, tests are greater than less time in 5 87 and 43. So if Blue is greater than 43 or let's go ahead and type of red right there. So if 587 is greater than read. Go ahead and do this. If 507 587 is not greater than read, go ahead and do this. So since it is greater than red and 587 is more than 43 it's going to go ahead and pronounce. I love hot pockets if I go ahead and save that right there. I love hot pockets. And of course, we can do less than less than or equal to greater than or equal to double equals, not equals in all those good stuff. Anyways, that's the point I'm trying to make. An If else statement is basically this. Let me go ahead and cut this. And if statement pretty much takes a test, and if it's true, it runs a bit of code. If it's not true, it doesn't do anything. What if else statement does? Is it pretty much gives you that second option if it's not true, instead of not doing anything, run this Biff code instead. So either way, your computer is going to get stuck doing something. Whereas before, if it wasn't true, it could escape, take the easy way out and do nothing. So there you have a basic, if else statement and why they're useful in what they dio. So don't forget to go over your comparison operators. Make sure you understand all of those. And make sure you understand the basics of an If else statement, you pretty much are giving your computer a decision. You're either going to do this or do this based on the test. So now that you understand that you're ready to move on to the next topic and that is, things might get confusing. But it's actually nesting so it thinks might get a little rough foot. Trust me, you need to understand the next topic. It's going to be extremely helpful to you. So thank you guys for watching. Don't forget subscribing. I'll see you guys later. 16. 16 Nesting and Fridays!: Friday, Friday going to get down on Friday. Everybody's looking to Ah, crap. Is this thing recording? Ah, man, that's embarrassing. Well, anyways, guys, welcome to your 16 Java script tutorial. And in this tutorial, well, you know what? Before even get started. First of all, I apologize from our voices Civil raspy. But anyways, I'm not sick, but I got like, a bunch of Fleming. My throat won't go into detail, but I'm taking use next the m So anyways, if I cop up Ah, huge looky there in store. Oh, then you know I don't be mad at me. It's destiny. It's bound to happen, so just deal with it. So anyways, let's go ahead and talk about nesting what it is and why it's useful. You know, before when we had an f statement, it's basically said this I'm going to give you a condition, and if it's true, run a bit of code. Well, now what we can do is nesting is the idea that you can have if statement and you can stick another if statement inside it. And then it's going to say, basically, I'm going to give you a condition, and then I'm going to give you another condition. And if they're both true, then run a bit of coat. So it's just saying instead of meeting one, instead of passing one test, you have to pass two tests instead. So let's go ahead and give you guys example before you get extremely confused. So I'm going to go ahead and set my first name equal to Bucky because next Monday name and then go ahead and set my last name equal to rubbers because that's mundane name. And now let's go ahead and build a basic F statement What we learned before, If, um, first name equals two equal signs, Bucky, then go ahead and run this bit of code. And we already know that whatever we're right in here is our statement. Then it's gonna run because we gave a test and it passed it. So now it runs a bit of code, But what nesting is is the idea that instead of just a regular statement like print out, hello bulkier alert box pops up. We can actually go ahead and put another if statement in here with another condition. So let's go ahead and put if last name equals Roberts and make sure I spelled everything right. You see, when Whenever you ah, like have variable or something and you want make sure it matches, Just go ahead and double click it and then you don't have to big f i RST f RST and Amy enemy just double click. It is gonna highlight all the other ones that are spelled the same by anyways back to the store. Oh, so now let's go ahead and add a body to this. And now let's go ahead and write something like, Document that right. Welcome, Bucky. Robert's explanation explanation and excellently hitting open as a there we go just like that. So now let's go ahead and save it and run this baby and see what we get. Ho probably shouldn't minimize that little bit. Okay? Ah, yeah, about this, um I don't want to talk about that. I actually forget. I forgot that that was off there, so yeah, pretty embarrassing. Anyways, as you can see, it says, welcome Bucky. Roberta meant to say Roberts, But who cares? So now you can see the basics of nesting Instead of having one test the past, you now have to pass another test before you can get your coat. And this is not only basic if you can also nest if else and now check it out. Say you're making a script here and you want to make sure the Bucky's or excuse me the users. First name was Bucky, and then you want to make sure their last name was Roberts. So if their first things buggy in their last name is Roberts, it's going to say hello, Bucky Roberts, Just go and JJ. But if their first name is Bucky and their last name is not Roberts, let's go ahead and write something else. Copy Paste. Hello, Bucky. Someone or something like that. So now if you're variable was Bucky Covington or something like that, you go ahead and it says, Welcome, Bucky someone because it passed this first test right here, so we'll got in. His first name was Bucky, but then it says, is your last name. Roberts won't know. So it's so I'm going to go to else. And that says, Welcome Bucky Someone. So again, I just want to give you guys the idea that instead of just writing a statement in here, you can actually nest an entire if statement in here, and then it's just gonna give it more test the past. And actually, I don't want to convince you guys too much. Well, you can actually put another if statement in here, and you can nest it like, 1000 times if you want. So you're saying all right, make sure your names. Bucky, make sure your last name is Roberts. Make sure your favorite color is blue. Make sure you're 24 you can give a bunch of different ifs. But actually, if you guys are thinking about doing that, there is a lot easier away. So mostly people nest. You can probably ness three ifs instead of inside each other in that is, you know, most the deepest that people go. If you want to get deeper than that, then there are better techniques. And I'm going to show you guys those techniques in the upcoming tutorials. But I guess now that cat's out of the bag that I'm going to go back to watching my favorite music video, and I guess I'll see you guys in the next oral 17. 17 Complex Conditions: was going on. Guys, welcome to your 17th tutorial, and I actually just made this store. Oh, but when I got done with it, I accidentally hit delete at the end of it because I'm an idiot. So now I have to make the entire thing again. But, I mean, at least I had practice making it, so all right, let me take a deep breath and let's do the skin. But for you guys would be like the first time. So anyways, what I want to talk about in this tutorial is complex conditions. So in last oral, we saw that if we want to test more than one condition than what we had to do is in bed and if within another, if so, basically, if we wanted to test my first name was Bucky, then we go ahead and we made a if statement and then we wanted to test my next. My last name is Roberts. So go ahead. And we stuck if statement inside of that. But actually, I want to let you guys in on little secret. There's an easier way to test the more than one condition and you only have to use one f statement. So let's go ahead and make two variables. I'll go ahead and make first and I'll set this equal to Bucky and I'll go ahead and make another variable. And I was named this last and I'll set this eagle to Roberts. Make sure I spell my last name right, though, Roberts. And now let's go ahead and make it f statement. So before we needed to make to whenever we want test two conditions. But now I told you guys, you contest to conditions using one if statement. So, in order to test two conditions, the first thing you need to do is this. Go ahead and put each condition you want to test inside parentheses. I call him Curly braces sometimes, but, I mean, I'm not lying myself. I know they're parentheses. So the first thing I want to test is that first variable is equal to the name Bucky. And now go ahead and stick the next condition you want to test in parentheses. So now I want test that that last variable is equal to my name. Roberts. So, Roberts, they're saying all right, that's simple enough. You have to conditions in here that you want to test? Simple enough, But you're not done yet. The last thing that you need to add is in between them. Go ahead and above the seven, there's a key called ampersand. Go ahead and hit that toys. What this is going to tell Java script is all right. You want to test this condition and you want to test this condition, and I'm only gonna execute this code. Let's give some code or quick to execute document rights and write something stupid like Hey, good job, buddy. Here's a cookie. Whatever. I spoke every word with the typo, but it doesn't really matter. So anyways, like, are saying whenever you use this special double, Amper seen it means all right, I know with one if statement, you usually use one condition. But in this case scenario, you want to test this condition and this condition right now. And if they're both true, that I'm going to execute this bit of code right now. So let's go ahead and save it and refresh and see what we get. A good job there, buddy. Yad Ei Diatta. So anyways, like I was saying, when you use double Amber sense this needs to be true, and this needs to be true. If one of them is false or both. Home is false. It's not gonna run. So let's go ahead and change his first name to, like, Tommy. Name my cousin and go ahead and refresh it. And it's not gonna work since one of those conditions was false. So that's how you test two or more conditions in a single if statement, interstate. All right, so how would I test three or four? Well, if you want to test more than just go ahead at more amber science and another condition right here, simple enough. So now that I told you guys about that special and let's go ahead and delete this and I want to teach guys about another way that you can text test complex conditions and that's using the or so let's go ahead and make a simple If and let's go ahead and documents. Right? Well, ho. Wrong symbols there. Um was right. Bacon. It really doesn't matter what your right in there and now say you come across this scenario , all right? I want to test two conditions, but only one of them needs to be true for me to execute the bid a code. For example, If your name is Bucky or if your last name is Roberts, the code is going to get executed. Not both conditions have to be true, but one or the other. Well, let's go ahead and I'll show you how to do that. Just like before you go ahead and write your two conditions in here. If first is equal to Bucky and last is equal to Roberts in Anderson. All right, go ahead and put those double and signs. Well, when you're using or you actually use this sign, it's called. I think it's called the Pipe Symbol or something. It's above the anarchy or the return key on your keyboard, and I guarantee you just look there right now, so don't lie. I know you just look there. You can't resist. So anyways, when we use the or sine, let's go ahead and run this and see what happens. It says. Bacon butter sent. All right, Lo. We said it first is equal to Bucky and first is actually equal to Tommy. So why would this run? The reason it ran is because this last name was indeed equal to Roberts. So again on Lee, one thes conditions has to be true in order for this coherent of both whom are false. If the 1st 1 equals Tommy and last one equal Thanks Tom Hanks, then they're not going to be equal to Bucky or Robert. So whenever you try, go and run this, nothing happens. So again with or either this one has to be true or this one has to be true. And if they're both true, Tommy and Hanks, it's going to run. So if they're both true or this one or this one, it's going to run. It's basically saying it is long is one of the conditions is true. I'm gonna go ahead and do the Cody told me to do so anyways, just like before, if you want to ADM. Or just go ahead and add more pipe symbols and MAWR conditions right in here. But that's the basics of this store. Oh, and testing complex conditions. It might save you some time from nesting a bunch of this statements again, if you want, oh, test one or more condition and they all need to be true. Then use the double and sign just like that. If you want to test two or more conditions, and only one of them needs to be true and go ahead and use those or signs or pipes or whatever the heck you calm just like that. So that's the basics. That and don't forget that it's not only two, but you can add an unlimited number of tests just by adding more signs and more break or where they call parentheses. So that's all I have for you guys for this tutorial. Hopefully, whenever I stop this store, I'm actually going to save it this time and not to leave it because, well, I guess if I delete it this time, then you guys would never be hearing this. But anyways, um, thank you guys for watching over get subscribing and I'll see you guys next video 18. 18 switch: All right, guys, welcome back to your 18th tutorial. Sh Close your eyes. Everyone close your eyes and imagine that you're making a computer program. And imagine that you're making a computer program where the user has to enter a name of a girl like Taylor or Natalie or Ashley or Rebecca in depending on what name they answered. It gives them a custom response. Like who you love Natalie or Ashleigh likes you too, or something like that. So let's go ahead and try to make this. Well, the first thing we need is a variable named motors. Name it, girl, and we'll set it equal to um said it. Natalie, since Natalie Portman is my dream girl And now, in order to make this program, you might be thinking this with the tools we have so far. We're just go ahead and write. If girl is equal to Natalie, and then we can go ahead and do our thing and then light later, weaken right. If girl is equal to Emily, if girl is equal with a Hannah, if girl is equal to Reese and we can go ahead and list all the girls that they could enter and do it that way. But a lot of if statements get kind of messy, so there is a easier way to make kind of this same program type instead of using a bunch of if statements, you can use something called a switch statement. Ah, switch statement takes one variable, which is the girl in this case, and it tests them for all the possible scenarios. And it's, you know, it's basically the same is writing a budget s statements, but it's just ah, much more organized way. So let's go ahead and let me show you this syntax for this is actually switch just like that. And right after you write the name of the variable, you only write the name of the variable. Nothing else. You don't say the equal to anything, just that. Now, go ahead and make a body and give you some space. And now, for each case scenario, we're gonna call it a case. Now for the first case, um, you give it the value of what it can be equal to, For example, in the case of Natalie, and go ahead and add a colon, not a semi colon. Just go ahead and add a colon. And now you write something like this. If a girl is equal to Natalie, then go ahead and write whatever you want to do. Documents. Right? Um, you must like Garden State because that's my favorite movie. When Now we Portman, believe it or not. And then after every after you're done executing the coat, you go ahead and write the word break, and I'll tell you why later. So now we already have a case scenario for Natalie, and this is basically the syntax of what we're going to do for all the case scenarios. So let's go ahead and copy there a copy pace. In the case of Actually, since I like Ashley Greene to be, like, who fan of Twilight? A with a question mark. And we keep doing that for each girl. So I'm only gonna do to girls now, But if you did 100 1000 a 1,000,000 is going to be the same syntax. You write your switch in the variable that you want to test and in the body, right case with a Colin, the code with a semicolon and break at the end. Now, I guess I can do this. The reason that you have break is this. Say you have a list of, like, 50 girls. Well, it's going to test this one and then skin test this one, and then it's gonna text the next 48 test them all until it gets to the answer. Whoa. Check this out. Since our girl is equal to Natalie right now, what break means is this? As soon as I get to this and I find an answer or find ah, value that that variable equals, then there is no need to test the rest of these. So I'm just going to break out of it right now and go to right to the end. So if you have, like Natalie Ashley, Brittany, Emily, As soon as it gets to Natalie, it's gonna say, All right, I found my match. I'm gonna break. If you didn't have that break, it's going to go. Continue testing the rest of your stuff, and it's just gonna cause a mess. Why would you want to make your computer test the rest of your answers? When you already found your answer, it doesn't make sense. So that's what that little break. Uh, word means So you're saying all right, let's go ahead and run this by default and see what we like. You must like Garden State. All right, so as predicted, this program work perfectly. But what if we have a name like Emily and we go ahead and save this and run and see what happens while nothing runs? Because we only had a choice for Natalie and Ashley? Well, there are a lot of names that people can enter that probably aren't going to be in this list and probably, you know, names that are one of a kind no one ever heard of. So if you want to give your switch a default statement that says, All right, I'm gonna first go through my list of all my options. And if I can't find a match, then I'm just going to give you a D fall. Answer. So in order to give a default answer, here's what you do D E f au o t. And notice that we don't write anything in here because there is no like answer or value for default. It's the Defoe. It's basically if you got to this and it didn't work in this, it didn't work. And then I'm going to go here to default. So if all of your, uh, pretty much your cases don't match, then this is what you get. So by default, just go ahead and write something like, um, I am definitely copying this default. Right? Something like this is the default. So check it out in another thing. You don't need a break at the end of your default since it's the last choice. So remember, I said, a break is pretty much to save you. Time saying, Ari, once you found your answer than just break out of it and go continue with the next thing. Don't go throughout the rest of the cases. Well, you can add a break the end of default. But it would be worth a sense. What if you get to the default you already at the end and you already ran out of all your cases? So what's the break out of its not skipping over anything. It's not going to help you any to break out of it. Now you're already at the end. So anyways, that's why you don't need one. So let's go ahead and test this variable. Emily. Right now we have the variable. Emily. So what's gonna happen? Is this Josh scripts going to say All right, the Emily equal. Natalie? Nope. Does Emily equal? Ashley? Nope. So I guess I'm just going to give you the default. This is your default statement. So go ahead and save this. And as you can see, this is default. So now let's go ahead and give it, like, actually just like that. And now go ahead and save it, and it's going to say All right, does Natalie equal? Actually, you know does actually equal, actually. Well, indeed it does. So I'm gonna go ahead and print out this just like he told me, and then I'm go. Go ahead. Go, go. Go ahead. And then I'm gonna go ahead and break, so no need to even worry about this is all. So let's go ahead and save it and check it out. Who? Fan of holiday? Actually, green. Not bad. So that's the basics of a switch statement and how you can use a switch statement to save you from writing a whole bunch of ifs. And this is actually a whole lot easier to maintain. And, you know, you can just look through your code and, you know, it's just a whole lot easier whenever we build programs that actually do something other than you know, me talking about the girls I have a crush on, um, that's what it does. So anyway, so thank you guys for watching. Don't forget subscribing. I'll see the next video. Oh, in Natalie Portman, if you're watching coming. 19. 19 for Loop: All right, guys. Welcome to your 19 tutorial and JavaScript. And in this listen, I'm gonna be talking to you guys about something called Loops. Now, a loop is extremely useful in Java script in pretty much every computer program language, because it basically saves time. Any time you need to do something repetitive, a loop comes in handy. For example, if you wanted to write like, um, doc, human dot Right, Um, that's very something. I love Rebecca Black. And if you wanted to write this, like 10 times on screen, then yes, you could go ahead and copy this and pace, pace, pace, pace, pace, pace, pace. But you know what? That's gonna get jumbled. Look how messy it is already. And, you know, it's just not a very efficient way of doing things. So wouldn't it be cool if there is a way where we could take a line of code and right at once and just how javascript do that 10 times? Or do that 20 times, or do a 100 times? Well, it's going to save you a whole of typing. So let me show you guys one way to do that one way to do that is called the Four Loop, and it's F o. R. In the syntax. The basic body has set up this Lupus four and then your right to parentheses. And in your curly braces or curly brackets, What the heck is like the regular the professional educational name for these? Because I always say curly braces and I know they're not parentheses cause these air parentheses. So if someone knows, let me know, send me a message. So anyways, this in tax for this is you have four and inside here, you're going to tell it how many number of times the run. And here you're right. What bit of CO do you want to run? So documents that right? And then just go ahead and write. Um, you know, I love Rebecca Black. And let's go ahead and add a break to that. Actually, that needs to be in here break. And this is just whenever we printed out, move on the next line. So you're saying all right? Simple, No, But you don't go ahead and just write a number like 10 in there, or else whenever you try to run it, it's not gonna work That would just be way too easy. Four syntax or excuse me, the four loop is set up in a very specific way. It takes three different statements inside this little condition. The first thing is you need to make a variable, and you need to give it a starting point. So you actually don't even need the name of our like that. You just need to go ahead and name it because it's gonna be expecting a variable. So go ahead and make a variable name X and set it equal to 00 And one is basically always your starting point. And now you need to give it an ending point. So you don't just say something like X equals 60. You actually need to say X is less than 10 in The reasoning behind this is X is going to start zero, and it's going to keep printing this out until X reaches above 10. It's every state, all right, So is it automatically gonna at one to each time or at three lead each time? Or how do I know how much to increment X by each time? Well, that is actually the last statement We're gonna put the last name is How much do you want that value to go up by? So remember that X Plus Plus Plus Plus was a special sign for adult one to it each time. So you can put something like X plus equals three. And now, if you go ahead and save this, it's going to print it out four times. And it printed this out four times because the first time it said X equals zero. So zero less than Tim Yes, so printed out the next time is three six in nine. So 036 and nine is four times where it's less than 10 the next time. 12. It's greater than 10. So that's why it doesn't run. So that's what you can do. But most people just always put X plus plus, and this means started zero go all the way until you get more than 10. So let's go ahead and say this and check it out. It starts it zero. It goes zero, and I'm talking what the value of X is right now. X equals 0123456789 and then the next one when X is equal to 10 it doesn't pronounce in. The reasoning behind this is is 10 less than 10. No. 10 is equal to 10. So that's why doesn't pronounce So That is how you can get javascript to print out a certain line or a certain bit of code. Ah, certain number of times, you can either do this. And you know, you can start at five and you can go to, you know, 450. If you want by ones. Check it out. Refresh. Oh, yeah. Look, that huge list there. I love Rebecca. Blacks. So anyways, just keep this in mind. If you ever, like, get in trouble in school and as your punishment, you have to type out. I love Rebecca Black, which would be a very good punishment. Ah, 150 times. This is a nice little trick to save you from, actually having to type it out. So, um, that's all I have for you guys for this story. I hope you guys enjoyed and ah, yeah, I guess I will see in the next store 20. 20 while Loop: was going on Guys is bucking and welcome to 20th. I believe JavaScript story in this is Toro I'm gonna be talking about while Lou put before I begin. I just want you guys if my voice squeaks or if I stop talking like if I'm in the middle of sense, I just suddenly stopped talking. That's because, like my voice is given now, like I can be in the middle of sense and my lips will still be moving when nothing's coming out. So I got this, like the mucus Fleming my throat, and it's no predicting what it does. So it's not my microphone. It's not your speakers. It just my annoying, raspy voice. So you guys just got deal that I guess I apologize. But anyways, let's go ahead and learn about this stupid thing called a while loop. Go ahead and, um, well, let me say this first fall. While loop is basically the same is a for loop. All loops are pretty much the same. They do a certain bit of coat over and over and over again until you tell it to stop, so why use a while? Loop in while use a four loop. Well, they're just set up a little bit different. This in Texas, a little bit different. I think a while loop is a little bit easier to understand. Some people like four loops, and they're going to come across different situations where you can only use one or the other. But anyways, that's my little introduction. You know, the history of the wild loop. So let's go ahead. And the first thing that we need is a counter variable to keep track of how many times this loop actually loops. So X equals one well started one, just like you know we did with the four loop. So now the syntax for a while loop is pretty simple. It's a while and then you haven't here. How long do you want to loop the last? So let's go ahead. And but X is less than 10. So this is pretty much gonna loop this bit of code so long as X stays less than 10. So now we can either increment it by like 123456789 10. So now let's just give a go ahead and give it some simple code right out. So document dot Right? And actually, what we can do is we can print out the value of the ah, on on the variable. I guess the counter variable right there so we can actually see it. That might be a little easier to understand. And now let's go ahead and add some text. Like D like them apples. First person who can tell me what movie is that from gets? Ah, gets my respect there. You know, I'm not really giving you anything worth of value. Just my worthless respect. So anyways, so the basics is this We start at one, and we're gonna loop is longs. It's less than 10. But you're saying, Alright, Bucky. Well, our variable is just gonna be stuck. It won the whole time. So this is a gun. Keep repeating forever. Well, if we ran it like this, then yes, it would keep repeating forever. That's why we need to increment x slowly. So let's go ahead and add one x each time by using that shortcut, we learned X plus plus And now let's go ahead and save it. We're on it and see what happens. Actually, let me add a space right there And there we go. So it says, How do you like them apples? Nine different times. So check it out. We started at one. So that's why our loop started at one. If we started at six, it was started six. But we didn't. We started at once, so the first time ex was equal to one. It ran the bit of code. The next time Ex was equal to ran the bit of code. And it did this all the way down until got to nine X equals nine. I'm going to run this bit of code now, the next time after this ex actually changed to 10. So then this while loop took a look at it and says, All right is 10 less than 10? No. 10 is not less than 10. 10 is equal than 10 is equal to 10. So therefore, I'm not going to run this bit of code because you only told me to run it when it's less than 10. So that is why you don't see 10. How do you like them apples? 11 12 13 or anything like that? That's why I stopped at night. So anyways, That's the basics of the while loop again. It's pretty much the same as the four loop in these examples. The only difference is instead of having this and this and this all in the parentheses right here, they're kind of spaced out, and I kind of like it this way. It makes it easier to see keep track of your variables and keep track where you're in commending. So anyways, that's all I have for you guys for this tutorial. Um, yeah. Sorry. I wish I had some more valuable information, but I'm probably going to go take a muse next and cough up. Guys, let me take this for those of you guys who want to be grossed out, listen to the rest of that story. But for those who guys who are just here for Dr A script of education and for the information I'm not going to say any information so you can move on to next. Horrible. So that's your warning. But for you guys, you stuck around. Let me tell you this. Alright. This morning, this morning I was like coffin and coffin, and like nothing was coming out. You know how like the flames just stuck in your throat. And it's annoying that you can't get it out, no matter how hard you cough. So I took amusing XDM because that kind of loose and stuff up and then about 30 minutes later I like, sucked in like and I coughed like it's hard as I can in this huge glob. It was like the size two grapes off it looks. It looks like oatmeal. And I don't know where in my body it came from, but it was the most discussing looking thing Coughed up it. So I mean, I shouldn't have even told you guys What? Hey, I warned you. So anyways. Anyways, thank you guys for watching and listening my story in a I guess I'll see you guys in next video. 21. 21 do while: Oh, alrighty, then welcome back to your 21st tutorial in in this store. Oh, we're gonna be going over a special type of Luke called the Do Loop. Yes, this is what you guys have been waiting for The do loop, so I can't remember what sorrow does. I want to say the last tutorial, but it's been a couple days since I've been at my computer, so I'm not positive. But a couple of stories ago we went over a special kind of loop called The Wild Loop and what this looked basically, that is, it tested a condition, and so long as that condition was true, Iran a bit of code. So you have conditioned test it. And if it's true or on a bed of code over and over until he does stop basically well, what the dual Luke does is basically take this structure and it flips upside down. It's going to run a bit of coat first, and then it's going to test if a condition was true, and if it is true, it's going to run it again until it's false. So it basically, since it runs the code before it tests the condition even at that condition is false. It already ran the code wants. So any time you wanna ensure that you run your coat at least once, this is what you need to do. So that's basically it. Let's go ahead and take a look at an example right here and whoa, easy. Script boxes don't get that close to each other. So let's go ahead and make counter variable. Um, making X. I'm gonna send money equal to five because, you know, starting to zero in one skin old started five because you know why not my tutorial. So now the structure for the duel loop is this. Go ahead and write do D o. And then go ahead and write whatever code you want. And I'm just gonna go ahead and write like the document. All right, um, let's go ahead and write the variable first so we can see So it will be five to begin with , and then go ahead and write super something stupid on the screen, like hello. And then just go ahead and have a line break, because we're gonna be putting this out a bunch of times and we don't want it all on the same line. And when you're done, of course, at your submit, Colin, take a semicolon and now go ahead and increment X because we don't want to stay in the same number of the whole time. Where else this loops going to run forever. So now, after you have your coding syntax now is where you put the while right here. So we have to give it condition to test just right, like while X is less than or equal to 20 and then at your semi colon at the end. So as you can see, it set up a little bit different than the basic Wild Luke first fall. It has a semicolon at the end, and second, you have her condition before your test and also the special do keyword or, you know, special word, whatever you want to call it. So let's go ahead and save this and take a look at it and see what does actually let me go ahead and add some space. There may make it easier to see. He goes 506 a low seven low eight alone on low 10 low. I won't go through a mall So it goes all the way in tow. It says X is less than or equal to 20 and then it stops. So let's go ahead and take a look one more time. Why this happens. Stupid. Wouldn't know. Seven. Shaking the box is putting down shaking him and put him up. But when I'm trying to make a tour, um, like, yeah, this one right here doesn't work like that. So, anyways, what we have here is a variable X that started it. Five. So this code, regardless of book, the condition is it didn't even look at the condition it It's running right now. And then it says, All right, I'm done running the code, and now you want me to run it again is long. Is X is the less than 20 Well, the next time I run since we increment X is going to be six and I'm going to keep doing this. Keep incriminating, exceeds shine 789 all the way to 20. And then once it gets the 21 it says all right is X less than or equal to 20. No, it's greater than 20. So that's when your loops shuts off and quits. So that's why you go five all the way to 20. Because 20 is, in fact, less than or equal to 20 it's equal to 20. So that's the basics of a dual loop. Um, let me show you a case scenario where X could be like 35. See, in this example, the condition isn't true at all. But this loop is going to go ahead and run one time, so just go ahead and run that 35 l o. And that's going to show off immediately after. So whereas if we were stick this in a while loop, it would never run since it tested the condition first. But since we're in a duel loop, what it does is it runs the code at least one time, and then it tested condition. So by the time it sees that it's false, it already ran at least one. So that's why it turned out. So anyways, that's the main difference between the do loop or excuse me a do while loop in the basic while loop is pretty much a wild loop flipped upside down, and you guarantee to run at least one time, so you're going to see when we're programming When this is going to come in Hi Hindi and when a while loop is going to be necessary. But for now, I just want to give you guys the basic. So thank you guys for watching. Um if you have any questions, don't forget. Have a website in the form you can check out. And also don't forget Subscribe. So I will see you guys later. 22. 22 Event Handlers: was going on. Guys, welcome back to your 22nd tutorial. And in this story, we're gonna be beginning to talk about something called event handlers. Now, invent Handler is basically our first step towards creating a more interactive in dynamic webpage. An event handler is basically running a bit of JavaScript code in response to a user action , for example, whenever they roll over a button or whenever they click a mouse. This is when we can set the job script code to run instead of just running everything right as the webpage Alonso, as you can see instead of just making everything happen when the webpage loads, we wait for the users action, and it creates the feel of or ah, like it interaction. So let's go ahead. And enough of me talking. It's a lot easier if you just see what's going on, so let me go ahead and mention a few things 1st 1st of all, when you're working with event handlers, you don't always need to place the JavaScript inside. Those two special scripting Tex event handlers are. It's kind of special you can. It's possible to make it outside the scripting tags in for the first example. That's what I'm going to show you guys. How to do so. Aside from that, I better mention this event. Handlers could be placed in many locations on webpage. They kind of look like just basic X HTML attributes, but instead over like writing, Um, color equals blue and separating of value like blue. This is where you insert the JavaScript, so let's go ahead. And I guess it would be easiest for me to just make one. So one place you can insert event handlers are in form. Elements specifically form buttons, so let's go ahead and make a form, and we'll go ahead and insert some event handlers in here. So go ahead and make your basic form and then go ahead and make a one input. We only need one input, just a basic button on the screen. In case you forgot from extraction, Team out stories had do this. You just go ahead and write inputs, type equals button, and for the value the value is basically what is your button going to say in order? Straight touch me. So let's go ahead and end this right now and we'll see what we got. We got a basic plain old button on the screen doesn't do anything. You just click it a bunch times and nothing happens. Pretty boring, huh? So let's go ahead and use event handlers the spices up a bit Now event handlers are pretty much built in key words that your computer recognizes in knows that it's JavaScript. You don't have to tell it in another function. That's job script. Your browser automatically knows the event handler. So whoever created your browser, they already typed him in there for you. So the only thing you have to remember is these different keywords for event handlers and the most Oh, I don't want to say commonly used because they never did a survey on it. But one of the most commonly used event handlers is called on Click and make sure the sea is capitalized. And this is a key word that says whenever the user clicks this element and in this case, a button right here, then I want to run the bit of JavaScript code in here. So anything you type in between these quotation marks, it has to be JavaScript code, and that's what's gonna be Iran whenever the user clicks spun. So go ahead. And I'm just going to make a basic alert box. So go ahead and type alert in at your parameters, but check this out. You know, however, we make an alert that we usually take some text into it and we put it in double quotation marks like, Hey, now or something like that. Well, sense were working inside x html attribute right now, and we have all these double quotation marks. These quotation marks right here. Tell job script or excuse me, tell your browser that we're working with attributes so we can't use those same quotation marks in here. So instead of double quotation marks, we need the use single quotation marks so we don't confuse it, so it doesn't really have an effect on your program at all. It just differentiates between the double ones for your attributes in the single ones for your JavaScript. So go ahead, put single quotation marks in your parameter and go ahead and write something like, Ah, are right, Something stupid. And now, just like in javascript with every statement, we have to end it with semi colon This Let's our browser know that we're done running the spit of job script go. So go ahead and say that. Refresh it in. Our webpage looks the same right now, but in fact it's not the same because whenever he touched his bun, check it out and alert box pops up. That says, Ah, pretty cool. So let's go ahead and press OK, And that's the basic oven event handler. So as you can see before, whenever we were working with JavaScript are what page loaded and all the drive, a script ran and it did whatever it did, and that was basically it. But now we can wait for the user input. And whenever they do something such as Click Button, then the job script code runs in. It's just the way to make the webpage more interactive and more dynamic. So, aside from that, I guess, have time to mention one more thing. You know how I added one statement in there on the on click attributes and whenever he touched it a bit of job script coder and well, since we added a semi colon, we can add more than one statement in here. So, for example, let's go ahead and add one alert box that says, Ah, and let's go ahead and add another one right after that. So alert. And, of course, remember, use your single quotes right in here and just go ahead and write, like, two times or something different from your first, so you can tell that it is different. So now we have two different statements. Whenever we click it using this on click event handler first, it says alert. Ah, and then it says alert two times pretty stupid. But, hey, it works. So I just click the button and it wasn't even in the screen. So check it out, touch it. Ah, press. Okay. And then says, Oh, I didn't refresh it. There we go. Touch it. Ah, and check it out two times. And you might have this, uh, happening if your code isn't running exactly how you want it in some browsers in order to prevent a bunch of ads from popping up or if you have any, um, like anti a anti add Ah, was a calling antivirus or antispyware billing your computer on Lee? One Poppel pop up, and it's not because your code is wrong. It's because your browser has thinks that you're trying to post a whole bunch of ads, so only pop up one in time. So if that's happening, then that your browser not your code. But anyways, what I want to show you guys here is you're not limited to only one statement. You can add more than one statement. You can add 500 if you want. But you see how I added two statements right in here, whenever you have, like, three or more statements is probably easier just to add a function. And then whenever you make your function, ah, before you can just add all your statements and there. But for now, this is just a quick example. So there you go. So anyways, that's the basics of of an event handler. I showed you on click in this story. But in the next story, we're gonna be going over different types of event handlers and you'll begin to see why they're useful and what we can do them. So that's what you got to look forward to. If you have any questions, check on my website were asked me on my form and I'll be happy to answer for you. So thank you guys for watching. Don't forget subscribing now see next video 23. 23 onMouseOver & onLoad: What is going on? Guys, welcome to your 2030 Taurel and in this store. Oh, I want to talk to you guys a little more about event handlers. So before we learned that you can take a basic event handler such as the on click event handler, and you could place it somewhere, such as in a form button. But now what I want to show you guys is their arm or event handlers than that basic on Click. And also you can place him in different locations. You're not only limited to form buns, you can place him in links and actually some places where you probably never even think of . So let's go ahead and make one type of event handler, and this is called the on mouse over event handler, and this gets called. Whenever you mouse over an element, for example, you don't have to click it. You don't have to, you know, highlight it. As soon is your mouse hovers over. That's when it gets caught. So you know, we could do it with a form button, but we already did that. So let's go ahead and try something new and let's go ahead and make a link and might as well make it to the greatest Web site of all time. The new boston dot com And go ahead and my as well in that. And let's go ahead and write some text like Hover over me explanation point because we really want to emphasize this. So what I like to do is save it. Launch it in chrome and click it. Make sure Link works. All right, we're good to go so far. So now we have a basic link on the screen. So now let's go ahead and add that on mouse over event handler. So just like before, like the on click, we add it kind of his attributes, and that's on Mouse over with em in the O capitalized now as your value weaken set equal to JavaScript code. So let's just go ahead, and I'm just gonna make basic alert box is, um, you can do different things about a. An alert box is just easy. See what's going on with this example. So alerts and then just go ahead and write something stupid like game time because I feel like playing call of duty right now. So Let's go ahead and save this and we're fresh it and check it out. I'm not going to click it and I'm not gonna highlight. I'm just gonna scroll, have my mouse go over it. And as soon as it hovers over it on alert box pops up. That says game time. So that is the beauty of the on mouse over. You don't have to click it as soon as you hover over it. Maybe it should be called on hover over. But it isn't. I don't name him, so that's the basics of that. So now that I mentioned on mouse over, I feel compelled to main mentioned this one on mouse out, and this is a little bit different. It's whenever you're hovering over a link and you don't click it, but you take your mouse away from it, then that's where this is get called. So let's go ahead and put game time. Be like, um, hey, come back. So now let's go ahead and save it and see what happens again. No clicking involved here. So what I'm going to do is I'm gonna take my mouse, hover over it. Nothing happens still, but whenever we take it away. That's when that event handler is going to be called him again. That's on mouse out. Whenever you take your mouse away from an element, so says, Hey, come back, then you go ahead and click. OK, so technically, if you had a webpage and you have, like, 200 links on it, you could add one of these the every link, and then you can create the most annoying what page ever. But who would want to do that? If you do, then go ahead and send me a link and I'll check it out. But anyways, let's go ahead and get rid of that for now. And actually might as well go ahead and get rid of this entire link because I want to talk to you guys about a different subject. Now that we know that you can add event handlers to different elements on a Web page, I'm going to show you guys one place where you probably wouldn't think that you could add event handlers, and that's in the body tag itself. So go ahead and actually, before you get to that, just add some text on screen. Yeah, the idea and save it and check it out. Our Web page loads and we have some basic text on the screen just like that. So we can't just add any event handler to the body like we can't add on click or on mouse over. There are specific event handlers that you can add to your body tags, and one of those is called on load. And this is going to be called if I hit my caps lock. This is going to be called whenever your webpage is done loading. So let's go ahead and just make a basically and make something that says, like your Web page or what say has loaded explanation point dice for everything around this wrong. This right this right this wrong perfect. So let's go ahead and save this running, and I'll show you guys what happens. Our webpage loads, and when it's done loading, it just says your coat website has loaded two D Good enough. Okay, so you might be thinking, I know it looks like everything's happening at same time, but if he had a slow motion camera, you could see that your Web page loads and then the job seeker pops up. So that's why it's a little bit different then saying this. Alright, Bucky, If we're gonna do that, then why wouldn't you just have the job script right here? Well, sometimes you don't want to run JavaScript as soon as your webpage starts loading, you want to run it soon is everything is complete. And right now I'm just making alert boxes, and it's not really useful example. But later on, I'll show you guys why would be useful to load a bit of code after your website has loaded ? So now that I showed you guys the on load alert or excuse me, the unload event handler, Um, you guys are probably thinking All right then, is there on unload? Wow. Definitely have my caps lock. And I definitely typed everything. You're on. So on. Unload. There we go. So now let's go ahead and see what this those but instead of your website has load because that doesn't make sense anymore. Just go ahead and write like goodbye. So the on unload event gets called whenever the user exits a webpage and they can do this by clicking a link, and it takes him to another webpage or even if they try to close out of their browser. This code is going to be is going to run before it lets him go. So let's go ahead. And I already saved this. Refresh it and it says goodbye. So let me go ahead. And the reason said goodbye already is because whenever I refreshed it, I left that webpage. So check it out. So now I have a webpage with that, um, on the road. I can not talk tonight on unload function already in there. So whenever I try to close out of my browser is going to stop me before and it's going to say goodbye. So let's go ahead and close out of this and it says goodbye before lets me leave. So click OK, and now let's go ahead and just watch it and chrome again. See, it loads perfectly like that because we haven't left yet. So again, whenever I try to close out in my browser, it says, all right. Before you go, I just want to say goodbye, miss you farewell. So now you can see the basics of you know, different types of event handler is not only are there different kinds of event handlers like on Click on mouse over on the house out and then you're loads. But you can also begin to see that we can stick him in. Different locations were not only limited to buttons or links, and we're not even limited to the body. But in the upcoming tutorials, I'm going to show you guys all the different types in places and why they're useful. And we're going to be getting more in depth because this is one of the main concepts behind Javascript. And now we can start to see we're beginning to build smarter and more interactive. What pages? But for now, that's all you get. So thank you for watching. Don't forget subscribing. I'll see you guys later. 24. 24 Objects: What is going on, guys is Bucky and welcome to your 24 tutorial and insist or oh, I'm gonna begin talking about object oriented programming while objects are in. I'm also going to be showing you guys some built in objects and job script. So object oriented programming is definitely one of the coolest features on JavaScript, but it's also one of the most easily misunderstood. So if you ever took a javascript class, or maybe you're taking one right now or maybe just someone tried to explain objects to you , it sounded so confusing and it was just totally twisted and you didn't really understand anything. And also, if you ever read any books, then it was like, What the heck are they talking about? So everything up in so now has been pretty easy with computer programming. I mean, we're pretty much could read something or watch the video and understand it by object oriented programming. It kind of throws a twist on computer program and because everything was kind of set out for you before. But now we're gonna be beginning to kind of make our own data types and stuff like that. So before I confuse it any further. Let me just say this. I'm gonna be making it really easy to understand what objects are. So just stick with my videos and trust me, it's gonna be a whole lot more simple for you. So let me just say this. If you don't even know what an object is, I just put it in the most basic terms. An object is pretty much a weird piece of data that has its own properties and methods. For example, I'm not talking about computer programming language here. I'm talking about real life. If I was an object, Bucky Roberts, I would have my own properties and my properties would be like things you could put in. Variables like hair color brown. Um, favorite baseball team Red Sox. Um, I color brown car, blue height, 56 weight. 1 80 Whatever. Even though I'm not 1 80 just saying all right, so now we have an object with all these properties in, aside from properties, I can also have something called methods. Now, methods would be the thing that the object does. So let's listen. Methods for Bucky Roberts, um, drive a car, eat hot pockets, make video tutorials play call of duty. So now you can see that an object test two things properties, which are all the variables and methods, which are all the things that the object does. So now, combining those two things, you have a pretty good blueprint or outline of me of my life of my object. So let's go ahead and take a look at some of the properties and methods that are already built in JavaScript. So let's go ahead and make just a regular variable co tuna and will set this equal to some text like, Hey, I am tuna fish explanation point. We'll check it out. Did you know that this variable tuna is indeed an object with its own properties? So in order to get the properties or get the methods of an object, we need to use something called a dot separator. In order to do this this in Texas, Go ahead, enlist your object, which is in this case, tuna. Then go ahead and and your dot separator. And after this you can go ahead and list all the properties or all the methods that are associated with this object. So, like I said, even though you may not know it, Tuna has a property in it, then this is building the JavaScript already. I'm not making any of this up. It's called the length just like that. And what this does is it counts. How many characters are in the variable, which on on this is probably somewhere close to 18 or something, and it pretty much is listed as a number. It's one of the properties associated with that variable. So if we wanted to write it out on screen just right document, right, and then we just go ahead and write tuna dot length. So let's go ahead and save this refresh and see what we get. 21. I was a little bit off, but anyways, now we can see that this object tuna, which is actually a variable, has a property of it called Length in that length pretty much tells you a little more about this tuna object. So that's basically one of the properties that is built in job script. But for example, one of my properties would be like bucky, um, hair, and that would say brown eyes. That would say brown to, um, wait, that would be like 1 50 So that is basically what property is so like. I said objects have two things. Properties and methods. We already took a look at properties. Now, let's go ahead and take a look at methods. And in order to do this, we don't even have to learn anything new because we've been using something all along and that is document dot right? And then this is how you write something out on the screen like Hey, now, brown cow. So I know I didn't talk about this really before because I didn't want to talk about object oriented program. But now it is time to understand what this all means. Well, believe it or not, the document is actually an object itself. If you're looking at your Web browser right here, you see a bunch of little pieces. The toolbar, the ah, you know, your favorites, the ex maximize minimize. And this big white box start here. That's pretty much the body of your webpage. It's a big white square in JavaScript language. This is called the documents of your webpage. So that's where the object the document gets its name from its pretty much a document. So all these pieces, those air called different things. But this is the document object. If it had properties, it would be white rectangle, four sides. Maybe it could be maybe could calculates perimeter or area or anything, but those would be all the properties associated with it. Now the methods with the document it can do basically one thing we learned so far and that's right, text on the screen. So now you can see that just like before you write your object name to the left hand side, which is document into the right hand side. You're right. The method and this method is called right. So that's why you can use objects and methods to actually do something. So, for example, if you're writing something with my object, you would write Bucky right here. You know, right? Eat hot pockets are here, or you might rate bucky make tutorials right there. But now the object is document and one of the methods is right. And of course I don't have to tell you guys what this means. It just means right text that on the screen. So all I want to get three guys in this story is there are some objects that are already built in JavaScript, and in order to use them, you go ahead and write the object name with the DOT separator. And you can either right the variables or properties right here or the functions and methods right there. So that is what dot separator is and that's the basics of objects is pretty much pretty much is something with its own properties and methods. Simple enough scenarios saying All right, it was interesting. And now so now what do you want me do like, go ahead and memorize every single object that's built in JavaScript? Well, you can do that, but it would be kind of a waste of time. The reason I'm showing you guys, this is because in the next tutorial I'm going to teach you guys how to create objects of your own. And like I said, I give you guys an example like Bucky eat hot pockets and stuff. But we're gonna be making objects in having them do computer related stuff like pop up alert boxes in open windows and maybe make some calculations or something. So now they understand the basics of an object and how you can separate things. Using a dot separator, we can begin making our very own objects. So I know this is a little confusing and different than what we've been learning before. But trust me, once you learn this, ah, whole new world is gonna be open up to you and your life You're gonna fill fulfilled. So if you have any empty feeling in your heart before or maybe you were depressed trust me , this is the best. This is the best medicine object oriented program. So that's all I have for you guys. That's my inspirational speech for this video. So thank you guys for watching in next video. We're going to be creating our very own objects. So see you then. 25. 25 Creating Our Own Objects: All right, guys. Welcome Actor, 25th job, script, Sorrow And in this store Oh, I'm going to teach the ice how to create your own objects. So, like I said before, an object is pretty much a special type of data that has its own properties and its own methods. And today we're going to be creating object that has a couple properties. With that, we won't be talking about methods now, But maybe in the future tutorial or definitely in future tutorial, we will. So basically, there are a couple of different ways that we can make our own objects. One of the ways and probably the easiest way is to use something called a constructor function. And like I said before, an object is brilliant pretty much a blueprint. So that's where we're gonna be doing in this story. So, in order to make our own object, what people typically do is whenever they're making this blueprint, they go ahead and take the script and they stick it in the head. So let's go ahead and do that. But your script tags in the head, and whenever printing stuff out, we try to do that in the body. So for now, since we're not printing anything out, let's just go ahead and stick this in the head. So in order to create this special thing called a constructor function, it looks basically just like any other function. Go ahead and take the name function just like that, and we're going to be making a blueprint or a object for people. So go ahead and name it like person or people or whatever you want. So we have an object called person. Now, let's go ahead and listen. Properties that are going to be associated with every person we can't say like, um something very specific. We have to the list properties that are associated with every person. So every person in the world has a name and they have age. You can't looks like, um, favorite computer because something we don't even have computers. So don't was something like that. Make it general like name and age. So now in your body, here is what we do. Now, this is kind of weird, but this is how they set it up. Whenever we want to take a value and assign it to a person, we need to use a special key word called this in later on. What we're going to be doing is we're gonna be calling this method and being like Bucky Roberts, 24 Taylor Swift, 20 Bucky's mom, 38. So we're gonna be passing it in information and assigning it to the object. So in order to say all right, we want to work with this current object. You need to give a special keyword code of this. I know what's weird, but this is what you have to do. And this basically means is we're working with the current object. Why it would ever work with a number. Another object, I don't know. But trust me, it's stupid, I understand, but it's what you have to do. So this current objects name is whatever name we pass in there. So it's going to take like Bucky Roberts and it's gonna assign it to the objects name. This is pretty much saying this. Whatever information we pass in and whatever information we want assigned to the object, that's all it does, really. So now we have to do with age this objects. Age is going to be equal to whatever the age we tell it to pass in. Simple enough, sir, are saying all right, this is basically called a constructor function, and it's basically a blueprint for a function. So now we have the blueprints right here, but really don't have an object they always have is the instructions telling us how to make one. So let's go ahead and make a couple objects right now in order to make a new object. And by the way, let me just tell you guys this. I say make a new object. But if you're taking a test for college or something, it's actually called creating a new instance of an object. So I say it like you know, the straight up way. But the technical term Put on your quiz. Create a new instance of an object. So, you know, say that in your teacher will probably you know, I don't want to say get a hard on or some. So, in order to create a new object, it's just like creating a new variable variable, and then you list the name of your object. I'm going to create a bucky object. So in order to do that, go ahead and set it equal to this. Whenever you create a new instance a k A. Whenever you create an object, you have to use the keyword new. This is telling job script were about to create a new object. So after this, we write, What blueprint do we want to use? Whoa, since we're gonna be creating a new Bucky object and we only have one blooper, obviously it's going to be the person blueprint. So it says, All right, since you're using that person blueprint, it takes two pieces of information. The first thing that I need is the name, and the second thing I need is the age. Okay, let's go ahead and give that to you. Name Bucky Roberts, age 24. And make sure remember any strings have to be in quotation marks in any numbers. Don't have to be. So that is basically how you create new object your objects name what blueprint you want to use in any information it needs. So let's go ahead and create another one real quick. Um, var. Let's make one for Taylor Street, since she is cute. Uh, new. Of course she's a person too. But her name Whoa! Taylor Swift and I don't know her age, but I'm gonna gets, like, 20 or something. I don't know who knows? Either she was 20 or she is going to be 20 at one point. So good enough. So now we have two objects. Ah Buckey object and the tailor object. Bucky Object now has to prep Aries. Its name is Bucky Roberts, and it's age is 24. Well, I got, like, kennel cough or something. And then we have a tailor object. The tailor objects name. It's Taylor Swift. And the tailor objects. Age is 20. So that's pretty cool. We have a blueprint right here, and we actually created the objects down here. But why is this useful? Well, can we print it out or something? Oh, yes, we can remember. Like I said, any time you want to print something out, you should do so in the body. So let's go ahead and print out this stuff right now. Document. Right. So any time, just like before in the last adoro. I told you guys you want to use an objects properties, you need to list the name of the object and let's go ahead. We have to objects of juice from Bucky and Taylor. Let's go ahead and print out my name first. So lets the name of your object, Bucky and then using a dot separator. You list the name of its property or variables, so Bucky's name should print out Bucky Roberts. Pretty cool. So let's go ahead and see another example if we wanted print out, um, Taylor Swift age. Reiterate the object Taylor and the property wall on access is age. So let's go ahead and save this, and it should turn out 20 just like that. So, like I said, this is just a better way of organizing data instead of going, you know, calling a function or anything like that to access to other sports age. The only thing we need to do now is this. The name of the object and what property we want access. So Bucky's name Bucky's age. Taylor Swift's name toast was age. It's a whole lot easier than creating ah bunch of functions to display all that information . So again, to recap one last time, in order to create the blueprint for an object, you pretty much do something called Create a constructor function and that is the technical name. In order to do that, you're right. What type of object do you want to be making and then list the information that it needs and then say all right, with that information that we're going to pass in, we want to sign it to that object. So Bucky's name is gonna be Bucky Roberts. Taylor's age is gonna be 20. And then now that we have a blueprint, we can go ahead and make is many objects is we want I may to in this example. But we can either make 5 10 5000 if we want. It doesn't matter. And after that, whenever you want to use any information from the object, you go ahead and write the objects name and the variable or the properties associated with it. And again, don't forget if you're watching this tomorrow because your teacher confused you in job script class or something like that. Whenever you're creating objects, I say creating objects. But the technical term is creating an instance of an object in the technical term, for this is called a constructor function. So there you go. There's your answers for your tests. and ah, that's the basics of how to create our very own objects. So this is one way we can create objects another way. I'm gonna be teaching you that. And maybe a couple stories made the next store. Oh, I haven't decided yet, but for now, that's all you get. So thank you guys for watching. Don't forget, subscribe. Don't forget to check out my website and I will see you guys later. 26. 26 Object Initializers: What is going on, guys, it's Bucky. And welcome back to your 26th JavaScript tutorial now in one of the Zorro's. Before I told you guys that there are a couple of different ways to create objects. One way is to use something called a constructor function well in this store. Oh, I'm going to be talking to you guys about the different type of way or another way to create objects, and this is called object initialize. Er's an object. Initialize ER is a lot faster than a constructor function because it's only one line of code as opposed to a whole function and then creating the object. It pretty much takes everything and squishes it together in one line. And why would you use this and when would you use a constructor function? You would use this whenever you're creating basically only one or two objects of the same type. For example, if you had, if you're creating like 500 person objects, then you probably want to use a constructor function by. If you're just creating one bucky object or a bookie and the tailor object, then this is fine. So, for this example, is probably a little more easier. And this is probably what you want to do when you're just starting out making objects. So let's go ahead and in our head, since we're just gonna be creating our objects now, I'm not typing anything out. Let's go ahead and create our objects right now So you don't use the keyword var and you don't use keyword. Knew the only thing you need to do when making object Initialize er's is type the name of whatever you want your object to be named in. I want my object to be named Bucky and go ahead and set that equal to all the properties you want to set equal to whatever it is so like. Before we made a constructor function that had a name in an age won't. Now let's go ahead and do the same thing. So in order to do that, go ahead and write the name of the property, which is name then at a colon. Now, after this year at the value what you wanted to equal. So I want the name of Bucky to be Bucky Roberts and now you say, all right, we want another property now, so In order to do that, just go ahead and separate it with a comma and then go ahead and type of the name of the property, which is age and set this equal to whatever value want to be equal to 24. So as you can see, instead of writing each property on a separate line with the constructor function, all you do now is separate your properties with a comma and go ahead, enlist the property colon value property, colon value and have two properties in here. But you can have 1000 if you want. The only thing you have to remember is separate them all with a comma. Pretty cool. So now let's go ahead and make another object. So So So So what the heck with my Chinese just so we can see more clearly what's going on. So I'll go ahead and make the other Taylor object just like before. And sorry if I offended in any Oriental people there. But ah, one of the properties is name and I would want this to be equal to Taylor Swift And another property is age. So go ahead and my comma property age and for the value is 20. So now we have two objects. Bucky's name is Bucky Roberts. Taylor's name is Taylor Swift. Bucky's Ages 24. Taylor's Ages 20. Easy enough. So now, just like before, the body can be the exact same. Any time you want to use your object, it's no different than before. Just go ahead and write Object name like Bucky and then go ahead and write whatever property you want to use. Like age name, whatever. So let's go ahead and take a look at a quick example. Document dot right and go ahead and write like Bucky Name loves Taylor name because she is Taylor age. Now let's see if I mixed anything up or messed it up. Whatever. Bucky Roberts loves Taylor Swift because she is 20. Pretty cool. So, like before we can see that whenever we want to use one of these properties, just go ahead and write the object property, object, property, object property, simple nothing. So now we see that we have two different ways we can make objects using object initialize er's, which are these or using constructor functions. And like I said, if we had more than two people like Bucky Taylor, John Steven, Tony, Mikey, Mattie we would have toe. I mean, we won't have to, but it's probably better to use a constructor function. But now that we only have one or two objects using a knob decked initialize er is fine. So that's when you would use object initialize er's as opposed to constructor functions. So for now, that's all I have for you. Um, in the next story, I don't know what I'm gonna be talking about, but trust me, it's going to be awesome. So thank you guys for watching them because I subscribe. Don't forget, check my website Yadi, Yadi yada, and I'll see you later. 27. 27 Adding Methods to Our Objects: What is going on? Guys, welcome to the 27th job script. It's Orel. And in this store Oh, I'm gonna be teaching you guys how to add methods to your objects. So let's go ahead. And the first thing that we need is a constructor function. So function. Go ahead and name and just people or something. And just like before, we'll give it a name in an age. So all these people will have to properties a name in an age, and you make sure of that by setting their objects, name, toe, whatever we pass in for name and the objects age to whatever we pass in for age. Simple enough. So we have a constructor function now. We can begin actually making objects so far. Um, let's go ahead and make object called Natalie and said equal to doing that. Yet a new object from the people blueprint basically, in the name it takes two parameters. First name. Now the Portman and her age. She's probably like 28 I'm guessing. I don't know who knows. So anyways, we already know that we can access. You know, Natalie's name now. His age would go ahead and print that out yada. We learned that before, but what we're learning in this tutorial is how toe add methods to this object in, By the way, a method. It's pretty much just a function that uses some of these properties. So you know how a function might calculate the temperature converted to Fahrenheit. To Kelvin. Well, methods take properties like this like it would take her age and calculate how many years until retirement or calculate when she's gonna die or coagulate when she was born, or something like that. So it takes some of these properties from this object, and it makes calculation with. So let's go ahead and calculate how many years until Natalie Portman can retire. She could probably retire right now because she's extremely wealthy, But let's go ahead and say that the retirement age is 65. So in order to create ah method, here's what we do. Just like any other function, go ahead and give it a name. Years left looks good, won't take any parameters, and the first thing that we knew need to do is calculate or, in other words, give a variable that we can return. So let's go ahead and make a variable name numb years. And this is going to store the number of years until she turned 65. Because it's 65 she can you retire? So let's go ahead and just right. 65 minus her age. And in order to use this objects age, you use this not age and whatever object you pass in for there, it's going to take their age and it's gonna subtracted 65 from 65. Excuse me. So I'm 24. So if it was calculate for me, it would be 41. If someone was 20 it would be 45. If someone was 65 it would be zero. So anyways, how many years until you turn 65? That's what's gonna be stored right in here and now. Remember, whenever we wanted to make it calculation and give us the answer. Beck. We need to return it whenever we returned something. It takes that calculation and returns it to you. So then you can print out the value of it in court, stuff like that. So numb years. So what I like to do is just go ahead and highlight that to make sure they're both the same . And now that they're about the same, we're good to go. So this function is basically gonna work like this. Whenever you call this function, it's going to say, All right, while object did you give me? I'm going to take their age. I'm gonna subtracted from 65 and I'm going to give you the answer back. Simple enough for ST. All right, Here is the blueprint for the object. So how does this object? No, to use that function. Well, it doesn't just yet. So that's what we have to do in this next line of code. In order to tell this object that basically, we want to use this function or in order to sell it, that this function is just not random function. We actually want to associate it with this object. Here's what we need to do. Just like every other thing. Every other object property. You go ahead and assign this dot and then you write whatever you want your property to be named and just go ahead and put um, years until retire or something like that. I spoke with offering everything right. Looks good enough. So then What you do is you have three properties for your object. Every person in the world has a name, has an age and has a certain amount of years until they can entire their name is whatever we give it, their ages, whatever you give it. And the years until I retire, it has to make it calculation. What is that calculation gonna be based off? It's going to be based on this function right here. So we don't set equal to a number like 65 or anything like that. We set it equal to the name of this function. So if we go ahead and copy that and paste it and here's the one thing that can confuse you guys, you don't add parentheses at the end of this. I know it's weird, but they made it this way. So your object knows that this method is associated with this object. So this makes sense. We pass it in the name, we pass it in age. But for this, the last one, we make it just like any other object property just like this one or this one. But instead of a value that we pass in, we set equal to a name of a function without the parameters. And the reason we don't add parameters for that is because it's going to take all its parameters already from the object. Pretty cool, huh? So now, with that being said, let's go ahead and use this. So now we can do something like documents. Right again. We already have an object. Natalie. Her name's Natalie Portman, and her age is 28. So now any time you want to calculate her years until your tire, here's what we do. Just go ahead and write the name of the object, Natalie, and then just go ahead and write years. Check it out. She has three properties. We can either print out her name, her age or years, years into a retired. So just go ahead and copy that. Paste that. And here is where you need parameters just like that. Simple enough. So let's go ahead and print it out. See how it works. 37 years until Natalie Portman can retire. So let's go ahead and make another object real quick. One for me? Why not? Um, I'll make object, Bucky. My name is, of course, lucky Roberts and my age is 24. So now let's go ahead and put Bucky years and so retire. Save it and see what you get. 41 41 years until I can retire. So, basically to sum it up one last time this is what you do when everyone and methods to your object. You already have constructor function with properties, Have a name. I haven't age. We know all that. So whenever you want to assign a function to your object, you take the name of the function and you sign it. And just like you would any other object property Simple enough. And don't forget whenever you make your function, the only thing you have to do to get the extra information is put this objects age. If we wanted to print out my name, you would write, like document, write this name easy enough. So then whenever you want to actually use that function or excuse me, the method Now you just read the name your object and then ray there, check it out. Not the function name, but the object property name. Simple enough. So, um, there just a couple neat little tricks. They have to watch out for the 1st 1 is don't include your parentheses right here. That's your way of telling Dr Script that this method is actually a part of this object because it has no parentheses. And the last thing is, whenever you actually use it, ad your parentheses. After this, it's a little confusing, but trust me, if you make like if you do like three times, you'll get the hang of it in an old bay breeze. So that is how you add methods to objects. So now we basically learn everything about object. How to create ah constructor function had add basic properties and how toe add methods so simple enough. Thank you guys for watching. And next Turo probably gonna be talking about objects a little more so if you're confused, it all just move on the next one that oh, got some Fleming my throat and you'll be fine. So again, thanks for watching over. Get subscribing! I'll see you next door up 28. 28 Arrays: was going on guys is Bucky and welcome to your 28th job script saurel. Now, before we continue talking about objects, I need to talk to you guys about something called an array. And the reason I need to do this is because objects used very often this thing called in array. So before I start talking to you about how to use an array with your objects, I didn't actually teach you guys what an array is why it's useful, how to create, um, and all that fun stuff. So basically, I'm gonna put it a simple as possible. An array is basically a way to store multiple values in a single variable or, in other words, a single object. So before we had one variable and one value well, now we can have more than one value in the same variable service saying, Alright, Bucky, that just seems confusing. Complex. Why on earth? Which one do that? Well, believe it or not, whenever you're working with long lists of like people's names or ages or maybe a long list of Social Security numbers, it's a lot easier and faster to create an array, and it's a lot more easier to manage whenever you're working with a long list. There you go. So let me show you guys a quick example of something you would need to create an array with . So, for example, if you had the list like a bunch of people's names, you might do this far. Person one equals Bucky Far person to equals Tommy, and you do this 800 times. Well, that's gonna take 800 lines of code. And then, if you had print Amal out, we'll take another 800 lines of code, and it just gets all jumbled, So an easier way we can do this is to create something called an array. And then whenever he had to list them all in print amount and my only take 10 lines of code . So now you can begin seeing the advantages. So let's go ahead and learn how to first create an array. Creating an array is similar to creating a new object in. By that, I mean, you go ahead and type of variable and then you type the name of your eight, so let's go ahead and make an array with a bunch of people's names, so I'm gonna name Ira. People make sense. So now will you have to do just like when you're creating a new instance and new. But instead of your object name, you go ahead and write the name over Ray. And this is Bill in. This is always gonna be named Array. And this stuff javascript were about to create a new array, plain and simple. Now, as your parameters, you go ahead and type all of the values you want to store in that people are a So the first value I want to store is Bucky. The 2nd 1 is Tommy. The 3rd 1 is Sarah. Um, the 4th 1 is Hannah with one end. Who cares? And 5th 1 is, um, Mikey, Mikey T. Who had cares. So now you can see instead of creating five different lines with five different variables and five different values, we made this all on one mind. How easy and compact is that certain? Anderson. All right, that kind of makes sense. So you have five different values in one variable. Looks like. So whenever I'm trying to use this later on, like document if I spell ary documents, dots, right. Okay, Bucky wanted. How am I supposed to turn out like the name Bucky or something? Well, if I go ahead and type people I know that's the name of the Array, but hasn't know what I'm supposed to be talking about right here. Well, we have an array created right here. And whenever we want to access one of the values of it, we have the add something called an array index. Now, an array index is basically this. Each of these values in here is numbered. And remember, whenever you teach a kid to count, you probably tell him to start at 112345 But with computers, computers talk in all zeros and ones. And just remember anytime you're working with computers, computers learn to start counting is zero. People learned to start counting on one. So this computer is going to say 01234 So whenever you want to access this one, it wouldn't be three. It would be 012 Ari. So now we know that each of these values is labeled with a number called in index zero 1234 So how do we access that Whoa. You go ahead and you write the name of your Ray, and then in between square brackets, you write the number of that index, so Bucky would be zero. So now, for you go ahead and save this and put it out. Check it out, Bucky. Right there. So now let's go ahead and access like something like Hannah 0123 So, people three should be Hannah. Say that and printed out. Hannah. Simple enough. So the only thing that you have to remember is this in order to create an array, just go ahead and write the name your Ray, and then go ahead and write new array and then right as many values as you want inside your A And any time you want to access it, you just write the name of your A and in between square brackets. Go ahead and write that index. And remember, unlike whenever people count, computers don't start with one. They start with zero. So 01234 So you can access any of these elements by using the index zero through four. And look what happens whenever you try to access something outside like five it's going to give you something called undefined because your computer is not going to know where you're talking about. So go ahead and save this and refresh, and it says undefined. This is pretty much Java scripts way of saying you gotta air. You did something wrong. Go fix it. So basically, that's how you create an array. And in the featured store ALS, I'm gonna be showing you why these air useful and why it's a lot easier than creating just multiple variables. But for now, that's all I got for you guys. So think ice Russian. Don't forget. Subscribe. Don't forget check on my website and I will see you next Video. 29. 29 Other Ways to Create Arrays: What is going on? Guys, welcome to your 29th story. And in this store Oh, I'm going to show you guys some different ways to create an array. The first way I'm going to show you guys is how to current array by. You basically tell it how many things you're gonna store in it And then you started things in it. So unlike before where you do everything at once, this is just a different way we can create area. So the first thing that we need do is create the array and tell it how maney items we're gonna store in it. So I'm going to make in are a couple things. And of course, you said equal to new array. And instead of listing all your items in there, what you need to do is just list a number, so I'm gonna say three. This tells our array that we're gonna store three items in it. So now what we need to do is we need to treat each index like a variable in a sign of value . But remember, we don't start at one, then go to 2 to 3. Since restoring three things in that we start with zero and then we go toe one and then we go to two. So even though we said we're gonna store three things in you we actually never used the index of 3 to 01 and two in 01 and two. That's three things. So in order to sign values to these variables, things zero. And then you just assign value to this. Like I don't know what's one thing. Jersey Shore looks good. So now what we need to do is we need to do this two more times. So just go ahead and copy this. And just like that, Easy. There we go. So thing 01 into so we can Let's Jersey Shore and album. But let's go ahead and list Jersey Shore. Um, Brian Regan. That's one my favorite comedians and also as 1/3 1 The New Boston. So now what we did is this. We created the show of the Array by basically saying, All right, we're creating an empty ray called things, but we're gonna be storing three things in. So what this does is jobs group says Ari Computer set aside some space, so when he enters the three things, you can do it just fine. So believe it or not, you can actually makes him code right here and then do it later on. It doesn't have to be right after it, but I just did it right after because, I mean, I really don't have anything else the code. So just like before, whenever we want to access one of our items in our A, let's just go ahead and print it out on screen Document. Right. You do it. Just like normal. Um, took the name of your A and then index just like that. Now, whenever you print it out, check it out. The new Boston. So, unlike before, say, you want to make a ray and then you wanted to write some code and then you wanted assign values through those indexes. This is one alternative way you can do this. And actually, later on, I'm gonna be showing you some programs. Were you need do this way. You don't always have availability to make an array and list all your items in there, right? As you create array, sometimes you have to wait to Ah, I don't know. Maybe the user needs to enter information. Or maybe you need to go grab it from a database so you can't always at all your information in your A as soon as you create it. So that's why I need to show you guys this now, the last, um, different kind of way. I guess I could say of making an array is it's pretty much the same as we did before. But instead of adding a number where it sets aside space, we're not gonna add any number at all. And this is going to create an empty array, an array, that we can add items to dynamically or changes sizes. It goes on. So say we wanted to create an array of, um, things that the user likes. But the thing is, we don't know how many things they're gonna put, so we don't know the size of the Aurora array right now. And we also can't create, array and list all the items right now because, like I said, we don't know how many things they like. We don't know what they like, so we pretty much just need to create the show of an array. So in order to do that. Here's what you do. Go ahead and make a variable and name it like stuff or something like that. I know. Name? You're right. Anything you want. And then, of course, you take new or Ray. But since we don't know how many items are going to be placed in this array or even what the items are, just go ahead and at empty parentheses. Just like that, What this does is saying, all right, I'm gonna curry in array, and I'm going to call it stuff. But I'm just gonna add elements, as you tell me the Adam I'm not going to set aside four spaces and I'm not gonna add anything to it by default. I'm pretty much just creating an array right now. So later on, whenever you want to use this array, it's available to. So you can actually, um, you know, maybe do some ran coating variable X equals nine variable tuna equals, um, 54 or 65 minus 54. And you do all your coating you need to. And then later on, when you say, Hey, I actually need to use that array Goring. Now, here's what you do just go ahead and take whatever index you need a store that value in in store anything you want it like bacon ater, Just like that Looks pretty good. And then you can do this as many times as you want, so you're not limited to, you know, four spots or three spots or whatever. You can go ahead and at your items dynamically as you need them. So stuff one equals, um, old pumpkins just like that. So now you can see this is a kind of a different way of making an array. Like I said, this pretty much just creates an array that you can use later on. And then, of course, whenever you need to actually use those indexes, you can, just like we have always before document that right? And then just go ahead and type the name of your A, which was stuff and type the index, which was one. And this should print out old pumpkins on the screen. Check it out. Old pumpkins. Pretty cool, huh? So that is how you create an array using the method of assigning space beforehand and also creating an empty array. So now, with all of our information. We know how to create an R a three different kinds of ways, and you might think All right, I just use the one Whatever works for me, whatever I think is the best. Well, sometimes you can do this, but other times when you're writing a program, you need to use one over the other. It's a lot better, too. So keep all of these in mind. Just don't remember one of them and think that you can forget about the others, too. So anyways, that's all I have for you right now. So thank you guys for watching. Get, subscribe, and I don't see next video. 30. 30 Array Properties and Methods: was going on. Guys, welcome back to your 30th 2 Toro. And like I said before a raise are indeed objects. And since they are objects and that we know objects have properties and methods, does this mean a race have properties and methods? Well, yes, it does. So let me give you example of both. Ah, the first thing we need to do is obviously creating a race. So let's go ahead and Granary called dudes. And I would just say this equal to new our A and we'll make this the easy way and we'll just go ahead and put like, Bucky, um Dan for Dan Henderson and Randy for Randy Couture. If you know who those people are, then let me know thumbs up. So we go ahead and we made in a race. So let's go ahead and take a look at some of the properties. There are several bill in properties, but probably the most common property that you're going to use when working with the ray is the length. Now, the length property is just a number telling you how many items, Aaron, you're a So document writes, of course, But the name of your A, which is dudes in order to access the property just like anything else when working with objects used the dot separator in the name of the property, which is length now if you want to take a look at all the properties and there's probably website you can go to. But like I said, the length one is it's basically the only one I ever used when programming. And it's the one that you're going to use most commonly. So you see right here it says three, because I have Lucky Dan in Randy There three elements. That's all it does. So we know that array has properties such as the length. But what exactly are the methods associated with this object? I mean, how many different things can we do to an array? Well, in order to use some of the methods you typically need another array in, That is because ah, lot of the methods deal with either combining the Rays or adding one or a two, another one or sorting through and Ray. So let's go ahead and create another array right now so we can go ahead and take a look at the example so we already have. Ah, a recall. Dudes, let's go ahead and make another Rico Chicks and said equal to new easy caps Look new array and set this equal to three girl names. Um, Lisa, Um, Erin and also Hannah. So now we have to erase dude in chicks. So the first method I want to show you is probably the easiest method understand? Is called the Can cat. And I think the short for Canton eight and pretty much does this. It takes to a raise and adds them together, and it creates an entirely new array. So let's go ahead and create a new ray called people, and we're gonna set this equal to It's pretty much going to combine this array with this. Sorry, but you're saying all right, how do I know what order combines meant and how the elements are listed? Well, it's going to take one array and stick it on the end of another array. So what array do you want to be at the beginning? So I want dudes to be at the beginning, and in order to use this method again, use the dot separator, which is can cat and as a parameter. You list, what array do you want to stick on the end of this? And I want chicks to be on the end of this. So what this is going to do is going to take the dues array and stick chicks on the end of it. So now we have a new array called people with six different elements in it. Bucky, Dan, Randy, Lisa, Aaron, Hannah. That's our brand new array stored in people. So we already created that. So let's just go ahead and print out something on the screen, like documents thought right, and that should go ahead and write the last element of people. And that would be the fifth. Because remember, this is Index 012345 So this should, if I'm correct pronoun Hannah and check it out. It did just like that, certainly saying, All right, I get the idea of Can cap. But what if I wanted this array first and this one second? Well, all you have to do let's take that chicks and add due to the end of it or dudes excuse me. And now Randy would be the last element. So Let's go ahead and refresh and check it out. Randy. So that's an example of one method that we can use when we take a look at a race. So now I just want to stress in this tutorial that arrays are indeed objects and every objects or excuse me, every object has properties such as the length, and it also has methods that you can use. And we took a look at one method which is come cat and all Can cat does is it takes to a race, sticks them together and puts it into a brand new array. So pretty cool, huh? So that is what I want to talk to guys in about in this story. In the next story, I'm gonna be talking more about some other array methods, and they're gonna be a lot more useful. And trust me, there is a lot to learn when it comes the rain methods. So you definitely don't want to miss out on it. So thank you guys for watching over Get subscribing. I'll see you guys in next door 31. 31 join and pop: What is going on? Guys, welcome to her 31st job script, Zorro, and and this is Taurel. I'm going to be teaching you about a couple of new methods. The first method I want to talk about is something called the Joint Method. Now what the joint meant that does is it takes an array. It converts it to a string. So this method is really useful whenever you have an array and you want output all the elements to the user. So this is the main method that people use whenever they're converting it to a string. So again, let's go ahead and take a look at it. So let's go ahead and create an array of my favorite movies and just said, Equal to new or a and I'm gonna Go Ahead and Avatar. That was pretty good movie, Even though I'm spelling your own and let's see Good will hunting one of my faves and let's see Vanilla Sky kind of quirky. But hey, I liked it. And, um, let's add one more fight. Wow! Definitely took their fight club just like that. So now let's see how many movies I have. 1234 So I have four elements in the array. So everything alright? What's an easy way where we can convert this to a strength? Well, what we can do is go ahead and make a regular variable and just go ahead and name it String one. So we're gonna make a string variable. So in order to do this, here's what we need to do. Go ahead and write the name of your A movies and then go ahead using a dot separator. We're going to call the method join now it doesn't take any parameters. And what it does is it's gonna take every element in your ray, separated with the comma and convert it to a string. So now that string is stored in the variable string one. So now whenever we want to document right this on the screen, we just have to write String one. And now let's go ahead and save this and see what we get after our good will hunting Vanilla Sky and Fight Club. And as I told you, it doesn't take any parameters. And whenever it doesn't take any parameters by default, it says, separates your list with a comma birth ST Ari. What if I want to separate it with something other than a common like ah, hyphen or something like that? Well, it doesn't take any primers by default, but you can pass in a parameter if you want. It's optional. If you do pass in and parameter, then it's gonna exchange that comma for something else. So, for example, if we use the hyphen instead of nothing, what it does is it changes all those commas toe hyphens, so check it out. Now you can have a custom my string depending on Well, first you need to use that joint method, and it actually depends on what parameter you pass it in. And one thing you may have noticed makes sure you pass your parameters in in between quotation marks because you're passing in is assuring technically so just want to throw that out there. So now we know how to convert an array to a string. Pretty cool, definitely useful. But another method I want teach you guys about is called the pop Method P. O. P. And what this does is it removes the last element from Monterey. So, for example, I have four elements in here in the index zero 12 three. So let's go ahead and just right out like duck humint dot right, Let's go ahead and write the last element just to verify that it is indeed there. And that would be movies in next three. And let's go ahead and add a break, because we're gonna be needing it later on. So now what should appear is Fight Club. It's 1/3 index, which is the fourth element, so zero one to three. So Fight Club, as we just saw on the screen, is the last element in the array. So now, if you call this pop method, and in order to do that, just go ahead and write the name of your A object movies and add pop. Now Pop doesn't take any parameters, but what it does do is it's gonna is pretty much gonna alter your Ray where it's still called movies. But now, instead of having four elements, it only has three. So now you're movies are a consists of avatar good will hunting and vanilla sky. So now ever seen all right, what happens if we try to documents that right? The element out now which is movies three, while movies three doesn't even exist anymore, since his only has 012 So it's going to give you an undefined. So check it out at beginning We Made and you're a con movies. It had four elements. Whenever we put out the last element, it gave us Fight Club appropriate. And then we altered the ray. We said all right for this movie's array called the Method Pop. And what this pop did is it took the last element and it popped it off. So now you are a only have three elements 01 into. So when I returned to print out the fourth element, it said undefined. So that is what the pop method does. It pretty much removes the last element from the array and what we can do here. It's called again, and then it would only have two in it. So again we can call it as many times as we want. Um, you know, it's pretty much simple self explanatory. So now that you saw it, um, you can begin moving onto in my next story. Also remember, joined converts in the Rachel's String and Pop removes the last element from your eight. So as long as you understand those concepts, you're ready to move on to my next story. So thank you guys very much for watching and I dont get subscribing out. See you next video. 32. 32 reverse, push, sort: was going on. Guys, welcome back to your 32nd job. Script is Oro. And in this tutorial, I'm going to be talking about the last array methods. Now, there are a couple more that I didn't cover. But these air, the most basic ones, most well known and also the ones that we're gonna be working with the most often. So if you want to Ah, learn all of them, then I don't know, go on, like theory website for JavaScript, a raise or something. But for now, I think this is all I need to cover. So in this store, I'm gonna be teaching about the reverse push and sort methods. So before you get in that we actually need array, and I'm going to make in a rate of body parts. So I'm just gonna name it BP because, you know, way too easy to type out body parts. So let's go ahead and put like, head shorter's knees and can, yes, toes, shoulders, knees and toes, knees and toes Anyways, So the first thing I'm gonna be judging about is called the reverse method. And what this does is you take your A in your verse it doesn't take any parameters because you're just reversing it. So now our BP array is toes, knees, shoulders and head, as opposed to hedge holes, head, shoulders, knees and toes. So I'm not going to print out because trust me, it reverse that, just believe me. So aside from that, the next method I want to show you guys is something called the Push Method. Now, the push method is kind of the opposite is pot of pop know how pop took the last element and removed it from Endo Yuri. What the push method does is that adds element onto the end of your E, so you can either add one element or multiple elements. So, for example, if you wanted to add one element on the interview rate, you would push one element on like tongue, and this would add tongue to the end of you rate. If you wanted to add another one, you can either call this method again, or you're gonna just separate it with the parameter and add another body part to the interview. Right? So what this would do is at these elements onto the end of your rate, simple enough so the last method I want to talk to you guys about that I'm going to introduce is called the sort method. And all this does is it takes all your elements in your rate and it sorts, um, in alphabetical order. So no matter if you reverse the, um, push, no matter what you did before, this is now going to take all of these elements and sword amount in alphabetical order and replace some in your A. So well, I'm going to do now is I'm going to print this out on the screen. And by the time I'm doing this and by the time I'm done writing this code, I want you guys to see if you can type all these in alphabetical order. So let me see if I can code this, or you can type it faster. So ready, set, go. Sharing one equals BB drawing crap. Crap. I'm going to nervous BP join documents, right? Wow. If you guys don't win, then that is embarrassing. And document. Right? String one. Now, let me go ahead. Safe your fresh and bam. So I'm guessing that since I was incredibly so I think I took like, 20 seconds. That is what you guys should have guessed. So if you can, um, sort this manually faster than I can. That's embarrassing. If I didn't have, like, 8000 typos, then you know, maybe that's thin Chance. But anyways, now that I just raised you guys, let me explain what I just did. What I did is I joined them. And remember what this method does. It takes you Ray, and it converts it to a string separated by a comma. And it's stored that invariable string one. And then all I did is I wrote string one on the screen. So that's how I got this. So basically, we reversed it. We pushed two elements on, and then it sorted it. So basically reversing it did nothing. But anyways, we did it anyways, So we basically added two elements into this array, and we sorted it alphabetically. And as you can see now, this raise in alphabetic order h k l s TT. So that's alphabetical order. There you go. So that's all I have for you guys for different array methods. Um, like I said, there are Maura ray methods, but I'm not gonna be talking about all of them with you guys. So that's all I have for you guys for this store. Oh, and next store. Oh, we're probably gonna be talking more about raise, but I promise we're done with array methods for now. So thank you guys for watching. Never get subscribing. I'll see you next video. 33. 33 Add Array Elements Using a Loop: was going on guys is bulky and welcome to your 33rd javascript tutorial. In this story, we're gonna be going over how to add array elements using a loop. Now, we're gonna be learning this for a couple reasons. First fall, when Every year. Working in what? Designing job script. It's a cool little technique that is definitely gonna come in handy in Aside from that, it kind of takes the things that we learned already and combines them into, Ah, cool little mini program. So before I get into that, I'm gonna be using something called the Prompt. And I can't remember if I tell you guys prompt in this job script Siri's or the Left Job script series. But if it if I already taught this to you guys and you already know one means I apologize. But I just wanna, you know, go over anyway. So basically what a prompt is is it's a lot similar to an alert box. The only difference is the user can enter text in a little text box in with the text that they entered. Say they enter their name Bucky or something. You can take that name and set equal to variable. So it pretty much is easy way to allow the user to create their own variables. So let me show you guys exactly what I'm talking about. Go ahead, make variable. Gonna name I'm pie or whatever and said equal to P r o M p t. This is Bill in job skirt function. So no need to ah, you know, create it yourself later on and prompt takes two parameters. The first parameter is something like enter your name. The first parameter is gonna basically give them a little dialogue. Um, like, if you had a prompt that you want him to enter in your name, you would be like, answer your name. Um, if you want problems, they pick a number. You're right. Pick a number you'll see later on where this appears on the text box. And the second parameter is what appears in the text box by default. Now, we don't want anything to appear in tech stocks by default, so we're just going to leave this blank, but you need to put those empty double quotation marks. So now whatever they enter in this text box or the prompt box that pops up, it's gonna be stored in the variable pie. So now what we can do is we can print out that variable, you know, using how we already know Document. Right. So document dot Right? And we're right, like, hello and then just write the name pie. So let's go ahead and save this and see what the heck I'm talking about. So here is my prompt box right here. Enter your name. Bucky Roberts. OK, and now it says, Hello, Bucky Roberts. Simple enough. So, like I said, it's basically a prompt box that gives the user a dialogue such as enter your name and by default. If you leave the second parameter empty, just double quotation marks. Nothing is going to appear here. But you can put something in there by default. Like enter text here. That's like one of the common techniques. Many ways. I just wanted to show you guys what prompt box was. So you guys aren't lost whenever I teach you guys this new technique. So anyways, the technique I'm gonna teach you guys is how to add elements to an array using a four loop . So let's go ahead and make an array called crap and set it equal to new array. And let's go ahead and give us size of, like, three elements already. So right now our raise empty, we don't have any elements in it. So let's go ahead and make a loop that runs three times. So in order to do that, go ahead and your parameters of this I equals zero. It's going to start a zero and then go I its of less than three. So then whenever we increment by one using I plus Plus, this is going to run +33 times again, you might think 0123 That's four times. But notice that this is I is less than three. So when it gets the three, it doesn't run. It's only gonna run on this zero one in two. So if you count those up its three times. So now we know that I is gonna be equal to zero the first time, one the second time and to the third time. So now we can use that to our advantage because, remember, whenever we're creating an array array indexes started zero. So thou Then again, what am I saying? Then again, Then whenever we create our ray, we can just go ahead and stick I in here and now it's gonna run three times. First is going to say crap zero. The second time it runs is gonna be crap one. And the third time is gonna be crap to those are the three elements that we need to, you know, to fill our right. So let's go ahead. And we can just add elements in here like, Hey, now or, you know, baked beans or whatever we want. But we want the user to enter these elements. So in order to do that, here is where we use that technique we just learned called the Prompt Box just like that. So let's go ahead and give them, you know, something like add something to the are a why hit caps like I don't know, but I'm keeping it, and then we don't want to put anything in there by default because they'll just be dumb. So now what's gonna happen is this prompt box is gonna pop up three times the first time. It's going to say at something to the rate your going to type something in and it's gonna add it to the array index zero The next time you type something, it's gonna add it to array Index one in the last time, it's gonna add something to array Index to. So now we have a populated array and then we can just do something with it, like printed Alan screen, like document dot Right. And just go ahead and write something like crap. Zero plus crap. One plus crap too. So let's go ahead and save this. And I gotta feeling something's gonna happen here. Oh, check it out. It worked perfectly. I thought that this was gonna peer over here off the screen, but game time so says add something to the rate. Now we're gonna add something like, um, baked. Actually, let's add something like beans and then we press okay, and that beans right now is stored in array zero. So now it runs through the loop again. Add something to the rate in at something like candy, so we press OK and now candy is stored in array one. And now this is the last time it's gonna run. It's a says Add something to the ray and we had something like dogs and press OK, and when you press OK, that's going to be stored in crap too. So now we have, um, beans and zero candy and one dogs into So then whenever we printed out 01 into it, printed out are filled array. So that's pretty cool. And I know I could have probably add some spaces. There may be some wind breaks, but again, this is just a quick example showing you how toe have the user population array using a for loop. So if you understood that, then you got the main idea of one y en arrays useful into why loops air useful in There are a lot of different techniques that you can use using in array and loops and not only entering information, but there are only also really useful when printing out information. So again, the most common technique that I want to stress is this. Use the array index as the counter, so that is a very popular technique. So once you get the hang of that, you take your array skills to a whole new level. So for now, thank you guys for watching. Hopefully you understand what prompt is and also how toe loop through a raise using a for loop. So lastly, thank you guys for watching one more time. Don't get subscribing. I'll see you guys later. 34. 34 Cool Technique to Print Array Elements: was going on. Guys, welcome back to your 34th of JavaScript. Sorrel. And this story is probably gonna be pretty quick because I only have one small thing to talk about, but it's a really cool technique and the easiest technique for putting out an array. So you definitely want to pay attention. So let's go ahead and first create an array. Um, I'm just gonna name it stuff. Why the heck not? And new. All right, let's just go ahead and create it right in here and go ahead and type like five random words like apples. Um, payers, Let's see. Bacon, tuna and ham. Simple enough. And actually, that looks like my grocery list. So anyways, we have in array coach stuff in a consists of five elements. The first thing that people like to do before they just go ahead and print it out is you probably want to sort this in some kind of order and might as well just use the sort method and sort of an alphabetical order. So go ahead and take stuff and use the sort method. And now what this does is it sorts the array stuff. So now, in every print out, it's gonna be in a nice, neat, alphabetical order. Every saint I right, Let's just go ahead and proud this array using, you know, the technique we learned before. We go ahead and make a four loop, and then we go ahead. So I equal to zero and then we go ahead and said, I is less than and then we go ahead and count the elements. 12345 So we can go ahead and said I is less than five and this is gonna loop through five times. Simple enough, but a better technique is this. Say later on, you might add an element to your A or taken element out of your A. So the array size might change from five, 24 or Mayko from, like 5 to 7 or something. Well, then we would have to change our four loop in things that might get confusing. So a better technique is this. Whenever you start zero, your second parameter can just be I is less than the length of that array. So now, later on, if you were to change the size of this array, you wouldn't have to change is variable. This variable would unlikely No, to count. However, many items are in your right, so I'll show you guys that later on. But now again, go ahead and increment of my one and we'll be good to go. So now all we have to do is to have and documents dots rights, right? Anything you want on screen. So using that technique, we learned less saurel. If we just go ahead, put our right and use I is the index. It's gonna work perfectly since it's going to start at zero and go all the way to four. And since there are five elements in our A 01234 that's going to give us our five, um, indexes as I and is gonna work perfectly so we can print out like this, but it might appear a little jumbled, So I'm gonna go ahead and add a line break using that right there. So now each item in our ray were appear on a new line whenever he printed out on our webpage. So let's go ahead and save this Launching chrome and check it out are A, which was jumbled before is now sorted in alphabetical order. We also printed out nice and neat on each line. So go ahead and let me show you guys the benefit of this. So now let's go ahead and delete bacon or something. And now we only have four elements in our A. So before where we would have to change this variable, it's going to recount it, and it's automatically going to know that your length of the array has changed. So no need to change variable here. Wow, whenever we save it and refresh it, our programs going to continue to work. Fine. So that technique I wanted you guys in this story was basically instead of a number here, which would be the size of your array, you can just use this length property, and what this does is it automatically counts. However many elements are in your A, so you don't have to worry about what number appears there. It's going to do all the dirty work for you, and this is really useful when you have an array like off 800 elements or something, so I don't have to count him every time. And aside from that, I just want to show you guys how you can use that index in the four loop to plug that in as the array index and loop through an array really easily and simply. So this is definitely combining this technique. I tell you, in this story, in the last technique, we learned basically how to use four loops and a raise to just build programs that work so easily together. So don't forget these techniques because they're definitely going to come in handy later on . So for now, that's all I have for you guys, but ah, yeah. I don't know what I'm gonna be teaching in the next story, but it's gonna be pretty cool. So thank you guys for watching. Don't forget Sub and I will see you next door. 35. 35 Associative Arrays: What's up, guys? Welcome to your 35th job script story all and in this store Oh, I'm gonna teach you guys how to use something called an associative array. Now, it's kind of different than the arrays we've been learning before. For one main reason. Instead of using a rate index numbers to access the elements in our A, we can use strings of characters instead. So basically words instead of numbers. So let's go ahead and let me show you guys, in example, because if I try to explain it, it'll just confuse a factual. You guys an example? It'll make it really easy to see what's going on. So I'm gonna make an array called Bucky, and I'm gonna set this equal to new array. Let's just go ahead and leave it blank for now. Now, Like I said before, we learned that you can make an array using index numbers like this. But what an associative array does is it allows you to use strings of characters such as the word color, and this would set this basically what associative raise and associates a word with another variable instead of a number. So now we can set bucky color equal to Lucky's favorite color, which is blue. It's actually a tie for blue and white, but you know how Use blue. It's shorter, it's type. So aside from that, we can add other elements to the Bucky array. So instead of you know, zero or one or two, we can make Bucky array index food, and this might be equal to my favorite food, which is hot pockets or Mac and cheese. It's a tie, but you know most with through hot pockets in there. So now, as you can see, basically all an associative array is is. Instead of numbers like 012 you can replace it with characters such as color, food, name, hair color and how you access This is the exact same. So now we can go ahead and, like, make documents, writes I and do something stupid like, um, Bucky's favorites. Food is, and then just go ahead and add a plus. And now again, like I said to access and the element in the array, you're right, the name of your Ray. And then you're right, the index, which is either food or color right here. So this is gonna print out. Bucky's favorite food is hot pockets. Hopefully, as long as I didn't mess anything up, so launching and chrome and refresh it. And actually I need a semi colon instead of coal in there and now I get Bucky's favorite food is hot pockets. So let's take a look at one more quick example and just throw color right in there. So now we have an array bucky that has two elements in it. Bucky Color was equal to blue and Bucky food, which is equal to hot pockets. So now it's going to say Bucky's favorite food is blue, which makes absolutely no sense whatsoever. But hey, at least works, So check it out. Bucky's favorite food is blue. Maybe I'm talking about those Cobb Louise, because whenever I was in fifth grade, I these things called Louise there pretty much a job breaker, but they, like, died your mouth blue. What you know, why would you want your mouth? I blue? I don't know about. I was in fifth grade, and I absolutely loved it. So anyways, that is what an associative array is. It's really simple. It's just a little bit different. Then the arrays that we've been learning before. So anyways, 19 of the concept of an associate separate. And by the way, let me mention this whenever you're working with the rays in building programmes later on, like calculators and looking at data and stuff you don't really use associative arrays is as much as you use the other type of array. But they're always nice to know if you ever come across it. So anyways, that's all I have to say. Um, in the next story, ALS, we're gonna be stepping away from a race and going into another topic. So for now, thank you guys watching. Don't forget, subscribe and ah, yeah, I'll see you guys later. 36. 36 Math Objects: Welcome back, guys, to your 35th job script store. Oh, and in this tutorial, actually, I think it's the 36th storro. Anyways, in this story, I'm gonna be going over the math object now, just like the array object we saw in the last few tutorials Theory Object had built in property such as length and also had bill and methods such a sore and push pop. So aside from the array objects, that's one of the bill in objects in JavaScript. He also have something called the math object. So this is really useful whenever you're making, like a calculator or a program that does calculations on any kinds of numbers the math object has built in properties and these properties or most often, mathematical values such as pie. Euler is constant and let's go ahead. And actually, enough me talking, Let's go ahead and take a look at some of those properties right now, like documents, right? And let's go ahead and write one of the properties, such as math pie. Now pi is going to be like 3.1415926535 So, in order to save us the trouble of having to write out that number every time. What we can do is we can just go ahead and save it and check it out. JavaScript already stores the value of pie, so any time you want to use pi, whenever you know calculating the area of a circle or something, you don't have to go Google the value of pie and said equal to variable. Just script already stores. It is property of that math object to give you very easy access to it. So that's one of the beauties of the properties of your math object. Another one is Euler is constant, and you Lear's, of course, begins with the because they decided on the spelling of that, and that is this again. So the properties of the math objects in JavaScript are basically just, um, values that have mathematical meaning. So you're saying all right, that's pretty cool. I don't have to go Google the number every time. But aside from that, the math object is useful for some of its methods as well, such as in order to find the square root of a number. Yeah, we could go ahead and make a function for it. But a lot of these easy, simple mathematical functions are already built in job script, so such is finding the square root of her number. Or whenever doing five to the third power. There's a four. Excuse me. There's a method for that already. And if we wanted to make a function for rounding up or a rounding down, we could use a bill in math method for that as well. So let's go ahead and make a program that calculates that allows the user to enter a number and the calculations square root of that number. So again, like I said, we can go ahead and career own function for finding the square root. But why do that when we can use one of Java's scripts bill in math object methods? So let's go ahead and make variable and said equal to end, and this will be equal to the number that the user enters. And in order to do that, we need to give him a prompt box, a k a space to enter a number, and we'll give him a really simple, prompt like enter a number and by default will set it equal to nothing at all. So now we need another variable to store the answer of that. So the math object is going to calculate it, and we're going to store the answer and variable called answer. So now, in order to to use this math object that square roots and number you do this right? The math object. Use a dot separator in the name of the method is this s Q R T. Now the parameter is what number do you want? A square root? Whoa. They already entered a number. It's gonna be stored in the variable end, So just go ahead and sick. That number in there say they entered 81. What this is going to do is gonna take the square root of 81 which is nine. And it's going to store that nine in the variable answer. So now all we have to do is print out there, answer so we can, you know, document. Write it. But let's go ahead and make a lower box because we already have a prompt box that pops up on the alert box. Would, you know, make the feel of the program a little more natural So now it's just go ahead and write something like, Ah, square root of And now we're just go ahead and write. And since that was the original number, then just go ahead and write like is answer. So now is gonna Roland go ahead and run it and then I'll talk ei story one more time. So it's gonna say Enter number and just go ahead and type in, like 16 Press okay and skin say the square root of 16 is for simple enough. Let's give a harder one to, you know, make sure it's running correctly. And our number 1 44 okay, The square of 1 44 is 12 working perfect. So basically the program works like this. You give a prompt box in. The user enters a number such as 1 44 Now 1 44 is stored in the variable end so it takes that value of 1 44 finds a square root of it using this bill and square root method, and it stores the answer, which is 12 in the variable answer and then less when not lease. It just says the square root of 1 44 is 12. There you go. So as you can see, using this little you know, eight characters of code and whatnot is a lot more simple than having to write our own square root function and then calling our function and then making sure that they, you know, enter the right values and yada, yada, yada. Ah, lot of these functions are already built in the job script. So why am I telling you this? I just want to save you guys the trouble off, you know, having to write your own functions all the time because they were saying, You know what? This is really common function. I bet job script already has his bill in. Chances are, it does. So that is why the math function or excuse me, the math object is useful. No, only when working with math, Constance, but also simple math methods. And if you want a list of the math methods, um, just go ahead and look online. They have a huge list of them. They're probably I want to get, like, 30 or so many ways enough of me talking, that is all. I am going over for the math object. So think guys watching. Don't forget subscribing. I'll see you guys in the next oral 37. 37 Date Objects: What is going on, guys, is Bucky and welcome to your 37 job script store. Oh, and this is our Oh, I want to go over something called the day object. Now, the day object is a really useful built in object whenever you're working with the date and the time. So what it does is whenever you create day object, it goes ahead and it grabs the current date, which is in this case, 3 31 2011 And it also grabs the current time, which is 3 21 PM So let's go ahead. And before I get into the day object even more, I want to show you guys a special function that we're gonna be using. And that's called the set interval function. So what the set interval function does is someone's texted me. Hold on, let me see who it is. Um, some girls mackin on me. Sorry, girl, you're gonna have to wait. I'm doing its Dorial. So, anyways, what the set interval function does is it runs a function. However, however much time you want to incremental by. So for example, you can run a function every second or every five seconds. So this is really hard to explain. So I'm just going to show you guys an example. So function, but its name it, like, do something. And what dysfunction is going to do is just print something out on the screen. So document, right? And just go ahead and write like tuna on the screen or something. Tune Kiai. Who the heck cares? So set interval takes two parameters. The first parameter it takes is what function do you want her own? Well, I'm just going to run that, do something and make sure they're ago. It's the right one. We shouldn't have any typos. And the second parameter is the increment. You want to run in and this is in milliseconds. So if you're right 1000 milliseconds, that means one second. So now what's gonna happen is this You're gonna have your function called Do something in All this says is, print something out on the screen and you're going to say, run this function every one second. So now we could go ahead and launch this and chrome. It's gonna say tuna, tuna, tuna, tuna, tuna every single second. So that's a pretty cool function again. That's called a set interval function. And the reason I want to explain to you guys is because we're going to be using it in the program. We're gonna be boating right now. So anyways, the program I'm gonna be making is this. I'm gonna be making a basic clock in. What this clock is going to do is each second is going to give you what time it is. So is going to say 3 23 3 23 1 second, 3 23 2 seconds, 3 23 3 seconds. So it's not gonna be formatted nicely, and it's not gonna be real pretty because I only have, like, seven more minutes to make it. But I'm just going to try to explain you guys what the date object is and how the day object is useful whenever you create things like clocks. So the first thing that we're gonna be needing is a function that we're gonna be calling every second. So go ahead and make a function, and I'm gonna name in print time because all this is going to do is print the time out on your computers. Oh, I got a hair ball. Print the time out on your computer screen. So go ahead and make a variable cone now. And in order to make a new day object, go ahead. Press new date with empty parentheses. And what this does is it's gonna go ahead and grab the current time of day and also the date and store invariable code. And now so now that variable code now holds the current date and the current time, so it holds a lot of information. But we want access. Certain pieces of information such as the hours, the minutes and the current seconds and where we're going to be doing with this information is just printing it out. So let's go ahead. Make couple variables, variables. Hours is going to be equal to now, which is the day object. And the method to get the hours in that day object is gets hours. So, for example, right now, like I said, it's 3 24 PM, so it's gonna get the number 15 because 15 is the number of hours in military time of three o'clock. The reason it doesn't grab three even those 3 24 PM is because if it just spit out the number three. You want to know if it was 3 a.m. or 3 p.m. So that's why it Ah, whoever made job script decided to get it in military time. So this is gonna have 15 stored in the variable hours, which is equal to three o'clock. So now let's go ahead and make the variable minutes, which is equal to now dot get minutes. And like I said, right now, the current time is 3 25 So now this variable is gonna be equal to 25. Pretty cool, huh? And last but not least, you can probably guess what I'm gonna do now. Variable seconds equals now get seconds. So this is the number that's gonna be changing on our screen every time it's gonna be like 15 16 17 18 is going to print out a new second every time since is every second is gonna be grabbing all the information, and the second is gonna be changing every time we print it out. So basically all these variables are doing our Graham in the current hours, the current minutes and the current seconds. Simple enough. So now all we have to do is print it out on screen so documents dot rights and let me just go ahead and write it in a hours plus plus Colon Plus men's Plus Colin plus seconds and um , after seconds. I'm just going to add a line break because what we could do is make this appear on the same line. But I'm just going to make the new time appear in the new line every time since I don't have that much time to make, you know, pretty looking alarm clock. So I think this is good. So what this is going to do is it's going to print out 15 26 30 15 26 31 15 26 32 so on and so forth. So let's go ahead and check it out. We now have a function that prints out the current time, but now we have to use that sets interval function that we learned before to call this function every one second. So again, like I said, it takes two parameters. The first parameter is print time or in other words, what function do we want to call? And the second parameter is how often do we want to call it 1000 milliseconds a k. We wanna call this function every one second. Let's go ahead and save it and launching chrome. And I got a typo somewhere. So hold on, I'll find it for you. All right, guys, I found my air. I accidentally type get MMA news instead of get minutes. So now that I threw the tea in there, it actually should work now. So let's go ahead and launching Chrome. There we go. 15 29 49 50 51 52 53 54. So every second it calls that function and again, like I said, I could have formatted this nicely. So, you know, and maybe what it said three instead of military time. And maybe I could have put it on the same line of having it instead of having appear on a different line every time. But, hey, I only have, like, 10 minutes to make the story. Also, that's what you get. So basically, what I want to show you guys in this story is we can use the set interval function, which is a bill in function in javascript to call one of our functions in a certain time increment in this case, every second. So in this example, every second it called our function print time and all print time does is used that day object to store the current time of day in the variable now and what we did is there are a bunch of different informations in that object. Three of them are Get ours, get minutes and get seconds. We use those piece of information to make a very simple clock on our website. Um, again, the day object has a lot of different methods that are associated with it. If I went through all the methods, then it would take an awful lot of time. And I don't have that much time in these story ALS. It'll take 20 tutorials to teach guys of all the different methods. But if you want to learn those methods ah, go to the job script, website, whatever the heck it is and you can check him out. But anyways, whenever you're working with dates such as building a calendar or times such as building an alarm clock, this is the object that you need to use and this is how you create area here. So hopefully you guys learned the concepts offset Interval. And also how to use the day object for something in a kind of useful program. So, for now, that's all I have for you guys. So think guys for watching. Don't forget subscribing house. He has next video. 38. 38 Accessing Forms: What is going on guys is Bucky and welcome to your 38th job, script, soil. And in this store Oh, I'm going to begin talking about JavaScript and forms now, one of the reasons why JAVASCRIPT is so popular today in what design is because it has this bill inability toe work perfectly with forms, especially when I talk about verifying data. For example, if you had a forum on your website and you wanted the user to answer email, well, you don't want just them to put in like tuna fish or, you know, a bunch of numbers. You want to actually email with the at sign in the dot for like dot com. So you want to be able to verify this data. And that's where job script comes in handy. So again, sometimes people learn job script Onley four for invalidation, so that shows you how big a part of JavaScript and forms go together. So if you're ever written in JavaScript, Book Day, devote entire chapters to job scripts and forms. So enough of me talking, let me just show you guys a quick example. So in order to start, I basically want to tell you this whenever you add I'm not talking about job script now, just basic x html Whenever you add ah, form to your webpage in javascript, it creates a form object automatically. You don't have to, you know, go through Var X. Um, new form equals you Yadi yada yada JavaScript automatically creates a form object, and all we need to do is learn how to access the information in that form. So what I'm gonna be doing in this story is creating a basic form using X html. And then we're just gonna be, you know, accessing it. And, I don't know, maybe print out property or something. So let's go ahead and make a basic form, an excessive amount. Since this isn't Java script, make sure it's outside your script tags. This is just basic x html, html, whatever you want to call it, so form, form, and let's go ahead and and three elements user name, and this is just an input. And again, if you don't know what I'm doing right here, go and watch my X html tutorials and I'll tell you guys all about it. So anyways, um, I'm just going to make a simple text Bach text box first, and then I'm gonna make you know, To be honest, you don't have to copy my form. Exactly. Just go ahead and make any form you want with some elements in it. I just want something to work with on screen. So make another password box and then go ahead and make a submit. Bun so and put type equals, submit. Value equals submit. So now if we go ahead and print this out, we should have a basic form with your user name, a password and a submit bun. So we have a website with a basic plain old form on it. Easy enough. So in this story, like I said, I just want to show you guys how to access this form in, you know, javascript language. So before I start typing, let me tell you guys, this JavaScript has very unique way of identifying forms on your webpage. It identifies them first fall, it puts them all into a form array. So if you had a website with eight different forms in that it would have eight different elements in the former way, right? And again, like I said, you don't need to create this explicitly. Whenever you have forms on your webpage, JavaScript sees that increase your rate for you automatically so ever since. All right, we know that it automatically created an array object already. I and it created that for Marie. But how do I access this form right here? We'll just like anything else in arrays. Java script numbers each object in your E. So the first form C had, like, three different forms on your webpage. The first forum would be formed zero array, index zero. The second form would be formed one the third form would be formed to. So, as you can see, the more forms you have on your webpage, um, the more elements in the array and that's how you access them. So again, since we only have one form and basically only be working with one form Ah, In these examples, we're gonna access that using forms. Zero since memory zero in arrays are the first element in the array. So let's go ahead. And one of the properties and forms this forms object is length in the length of a form is basically how many items do you have in it. Well, we have one input right here. One input box, another input box right here. And a button right here. So this forum has three elements in it. So if we were to print out the length of this form, it would be three. So let's go ahead and ah, show you guys had do that. Just go ahead and we'll set equal to the variable X. Why not? And in order to access the form, you're right Document dot forms and whatever form you wanna access. And like I said, since this is the one and only form, this is gonna be form zero. If you wanted access the fifth form say had five forms, it would be formed four because 01234 The fourth element in your A or excuse Me forth index would be formed. Five. So easy enough. This is formed zero, since it's the 1st 1 So again, your document, which is basically your webpage, has in array object that's built in already called forms. Now that forms array object has a bill in property code length in that length. Property, like I said, is how many elements are near for one to three. So now we have the variable three stored in X. So now let's just go ahead and print that out to verify it. Document dots. Right, X. So now, whenever freshen load our webpage, we should get that form still, but under, we should have a nice pretty little three right here. And let me go ahead and take one of these elements out. Take this password out and just refresh it. Just show you guys that indeed it changes to two because now there are only two elements the input box in the cement bun, so that as the basics of how you access different forms and job script again, the form is part of the document. The document is basically your webpage body itself. Now that body has an object called forms in its bill informs array. So that's why how we access that using document dot forms. Now this forms has a property that's the length. So that's why we had access that using dot length. So again, what you want to take away from this store? Oh, is this. Whenever you have a lot of different forms on your web page, you need to identify them using your built in array object and that's called forms. And in order to differentiate between different forms, you need to say what form you're looking at. And each form has a built in property called length. And that is, of course, how maney elements are in your form. And then what we did is we discounted the elements and printed out on stream. So now that you know how to identify your forms and again with these stories, we're gonna be working with Forum Zero basically all the time we're never gonna have more than one form and you typically don't. But anyways, I just want to go over that. So anyways, that's all I'm gonna talk to guys about for this story. It's getting kind of lengthy. But thank you guys for watching Norfolk subscribing. I don't see next video 39. 39 Accessing Form Elements: What's up, guys is spooky here. And welcome to your 39th JavaScript Sordell. And in the last tutorial, I tell you guys how to access in, differentiate between different forms on your webpage. But now, in this tutorial, since we already have access to each form, I'm gonna show you how to access each element in those forms. So let's go ahead and create a form. But I didn't want to keep the old one from last time because I want to make it a little bit different. So as we know from our X html tutorials, hopefully you are shows each form can have a property code name. And I'm just going to set this form equal to Bucky's form. Simple enough. So now if you go ahead and end it, we can begin adding our elements. So let's just like before, add ah, user name um, a password and Smith bun. So the user name, all we need to do is just like the last time we just make input box, so input type equals text and let's go ahead and add a name to this do so Name equals users name simple enough. So now, if you just go ahead. And now we won't copy it. So for the password box, it would be input type equals. Might as well make it password. I think I made it texting last oral, but that's definitely not secure. So the name equals, um, password? Simple enough. So let me just go ahead and test this right now. Hello? Didn't wanna look, I got yahoo son of a beach launching chrome. There we go. So now we got a password box in the text box working perfectly, so I might as well add a submit bun. I mean, we're not, um, input type equals submit. Value equals submit. Now, let's go ahead and save it in. Refresh again and check it out. We got a perfectly working for him. Ah, User name, secret password and a submit bond that does nothing at all. Pretty cool home. So, like I said, in order to access our form itself, let's say we want to set equal to variable Would first right documents since the Forms array is an object of the document. So then we were eight forms, and since this is our first form on, our webpage would go ahead and identified by zero since everything in a raise started zero . So after that I told you guys that there is a way to access each element. So, for example, if we want an access the first element right here, the forms array has a property already built in. And that's the elements air A. So Elements zero would give you access to the first element in your form elements one would give you access to this and elements to would give you access to this. You're saying all right, why do I even want access to it in what's the use of it? What am I going to do with it? Well, typically, people want access to Let's say they wanted to verify that the user name Onley consisted of letters and numbers. So when a user logs in your weapons, you don't want them. The inner Bucky dollar sign percentage sign at sign. Semi colon semicolon. You won't like Bucky 65 Bucky 14 92. So this is why you would want access to each element. So for now, since we're not validating any data, all we're going to do with this element is get property of it. And that's the name. And again, your form has a name called Bucky's Form, and each element has a name. This one is user name. This one is password. This one we didn't give a name. So now the name of user name. Since this is the first element, Inform zero is going to be equal to the value user name. X equals user name. So now we just go ahead and document right this. And if we print out X on the screen and save it and lunch and chrome, check it out. It says user name right there. So one more quick example if we go ahead and access the 2nd 1 by typing form zero. Since it's the first form second element and go ahead and save this and then we go ahead and launch this and chrome, it says Password right there. Pretty cool home. So you're saying are simple enough. Whenever I want to access a form, I just write form whatever number it is. And then whenever I want to access an element, I write element whatever number it is in the area. But all these air rays are getting pretty confusing. Bucky Is there something easier that I can do? Yes, there is. Instead of worrying about race, you have a different option of accessing your forms and also your elements. Instead of using the forms array, you can just go ahead and use the name of the form itself. In this, I think I cannot cough. So anyways, let's just go ahead and copy the name of form, which is Bucky's form instead of form zero. We're just gonna go ahead and put Bucky's form and it just like that. So just verify that it's working so far. Let's go ahead and run, launching chrome and check it out. We still get password pretty cool. So now we know that we can use the foreign name instead of using that dumb forms. Ray. Ah, whole lot more simple or whole lot simpler. What is it? I don't know. All that you decide. So now what we can do is we can treat elements the same rate. The same are a ho. I correct myself up the same way. If element has a name, we no longer have to use that Dimon elements are a We just go ahead and use the name of it , which is users name in this case. So let's go ahead and paste this in. And of course, if we're writing code where we wanted to print out the name of an element I mean the names right here. So it's gonna print out user name kind of redundant. But anyway, this is just an example. So let's go ahead and launches and chrome and we see, in fact, we can access that element using the name instead of the You're a Senate ways. Probably printing out the name was in the best example. But hey, I did anyway. So what I want to stress you guys in this story is in order to access each individual element in the forms of Ray, we can either use the element array, simple enough element and then the name of whatever element you want to use or excuse me the number of whatever element you want to use or if it has a name, we can use that as well. For example, we use Bucky's form right there in user name right there in a works. Fine. So with those two things, we now have knowledge of how to access any item in our forms. Any item in any form on our webpage? Pretty cool, huh? So now that we have access to weaken be didn't begin doing things like validating the data , make sure they're filling. Checking whether or not a check box is checked Checking whether a radio boxes checked, you know, simple stuff like that. So that's what I'm probably gonna be covering in the next story. But for now, that's all I have for you guys. So thank you guys for watching. Never get subscribing now. See you guys later. 40. 40 Other features to learn: What's going on, guys, my name is buggy Roberts and welcome to your very first JavaScript tutorial. Now for those of you who have no idea what JavaScript is, JavaScript is basically a scripting language used to make webpages more interactive. So for example, if you have a webpage and you maybe want to add a calculator to it. Or maybe you want to put a quiz on it, or maybe you just want to have a navigation bar with some cool rollover buttons. Well, in order to do this, you need to use a special language called JavaScript. And that's why I'm gonna be teaching guys. But before it begin and we start typing JavaScript, you guys need a couple of things. First, the first thing you need is a text editor. Now any text editor will work fine, but I'm going to use one called Notepad Plus, Plus. Now if you don't have this, you can go ahead and Google and download it. It's free and it's actually the one I recommend. It's the best. It's awesome. Again, Notepad Plus, Plus, go ahead and type that into Google and you'll be good to go. Another thing that you guys are going to need is a knowledge of XHTML and that's what this is right here. If you guys don't know how to create a basic webpage in XHTML, then you need to watch that series First, I made XHTML and CSS Tutorial series before this. So if you don't know how to create a basic webpage, go ahead and watch that. It's on my YouTube channel as well as on my website that new Boston not calm. So anyways, once you have those two things, then welcome to the world of JavaScript. So let's go ahead and for all you guys, let's begin. I take a deep breath and get ready, and let's go. So like I said, JavaScript is something that you add to webpages in order to make it more interactive. So just like everything else in XHTML, you need to add JavaScript through the use of tags. Now the tag for JavaScript is called SCR IPT script. And now let me mention this. In the Internet, there are a lot of different scripts that you can add a webpages. There's JavaScript, actually, there's like 50 different types of scripting languages. Javascript is just one of them. So when our browser comes across this code, we need to tell it explicitly that we're gonna be working with JavaScript. So in order to tell our browser that we need to give it an attribute called type. And we said this equal to text slash JavaScript. Go ahead and save that, and go ahead and add an ending script tag. And in-between, these tags is where you're going to be typing all of your JavaScript code. So that is JavaScript code and it's not really, but you know, that's my example. And in between here, like I said, all of our coding is going to be done. So let's go ahead and actually, let's write a real simple program right now. Go ahead and copy me. Document dot, write, and inside parentheses with a semicolon at the end, at quotation marks and are like, Hey now brown cow. Now, I know you guys don't understand what this document really, why we had parentheses or YOU even have a semicolon at the end. But for now, I just want to make sure that JavaScript is set up in your browser and you're able to run it. So let's go ahead and save this. And go ahead and you can press. Run launch in Chrome, launch an IEEE launch in whatever browser you want. So let me go ahead and move this back and check out what we got. Hey, now, brown cow. So as you can see, JavaScript is working in my browser. If anything like that pops up in your browser, that means that while you're probably at school and they tried to block YouTube or something. So they probably took JavaScript off your browsers. But anyways, make sure that you have JavaScript setup. So if you see this, that means your goods go if you get an error message or don't see this at all. And that means that it's not working in your browser and you need to fix that. So with that being said, let me mention one more thing. A lot of the older browsers, like, you know, when they first started making internet and web pages, a lot of the browsers didn't understand Javascript. Their main job was just to understand a basic HTML webpage. So whenever they try to read a program like this, it's just going to come across them back. Whoa, what the heck is this? I don't know. So I'm just gonna go ahead and type out whatever in there. And we want, hey now brown cow to type out on our webpage. We don't want this whole long string of texts right here. So if it's, you know, typing out something weird or something other than, hey now brown cow, that may be the issue is that you have an older browser and it doesn't understand what JavaScript is. So anyways, you know that you're gonna be making a webpage using JavaScript. And a lot of people with older computers are going to be looking at it. Or if you know that your viewers have older browsers, you might want to add a little safety check in order to protect against older browsers from China. To read this JavaScript, go ahead and put the greater than sign or is at the less than sign. I think that's a lesson sign, explanation point minus, minus. And when you're done with your JavaScript, go ahead and press, for instance, for slash minus minus greater than sign. Now, whenever older browsers come across this, it's going to think that this is just a comment and it's just going to ignore it basically. So go ahead and save this and refresh and see what we get. You can see that since this is a new browser, it's going to know not to ignore and it's going to be smart enough to know that this is indeed JavaScript. But if I had an old browser, it wouldn't type anything at all. So that's a nice little safety check that you can use against older browsers. It's going to work with or without it. But for the sake of this tutorial, since I know that I'm going to be using a new browser, I'm going to go ahead and delete them because, I mean, we only have so much space here and that's just taken up space. But anyways, it's common practice or it's good practice to include those whenever you're typing JavaScript. So I'm not, but you might want to personal preference. So anyways, well, that's probably all I need to you guys for this tutorial. In the next tutorial, we're probably going to be talking about comments and variable. So anyways, go ahead and just get JavaScript setup. Go ahead and include these tags and make sure that you try to test out this line of code. And trust me, I know you guys all understand what's going on right now. But now that you're set up, you're ready to move on to the next soil. So anyways, thank you guys for watching. Don't forget to subscribe to my videos and I'll see you guys in the next door. Was up guys, it's Bucky and welcome back to your second JavaScript tutorial. And I want to start out by talking to you guys about something called comments. Now, if you're familiar with XHTML. That sometimes you can leave comments to yourself. And if you guys don't know what a comma is, a comment is basically a line of text or a line of code that your browser ignores completely. So why would you want to leave these comments in your code and why are they useful? Well, a comment is basically just like a sticky note or a reminder telling you to do something like maybe edit a line of code or add something else to your webpage. It's going to be aligned that your browser just ignores. Just so you know, just so the programmer or whoever they created the webpage can follow along easier. So go ahead and in order to add a comment in JavaScript, go ahead and press forward slash, forward slash, and then type comment goes here. Now whenever you go ahead and run your web page, save it and run it, you see that nothing happens because your browser knows to ignore that. That was just the comment, maybe a little reminder that you're just doing something. So just forget about it. It pretends like it isn't even there. So anyways, like I said, it's just like a basically a little sticky note to yourself. But are saying, Alright, that's good for one line of code. But what if you have a longer comment? What if you want to leave a comment that's like, all right, go ahead and edit this webpage and wash my dog, then go to Ebay and by some items and then finish this webpage, yada, yada, yada, yada, yada, yada. Well, you need more than a single line comment and you need something called a multi-line comment. So in order to leave a multi-line comment, go ahead and write forward slash Asterix. And then after this, right, this is comment yada, yada, go buy stuff on eBay, yada, yada, yada. And then in order to end it, go ahead and press asterix forward slash. Now I wrote two lines, but you can have as many lines as you want. So that's the difference between writing a comment on a single line and writing one over multiple lines. It just depends on how long your comment as basically. So go ahead and delete all your comments. And now that we're done with that, let me tell you guys the basics behind not only JavaScript, but every single computer programming language. A computer program is just at the core. It's just going to follow instructions. For example, if you wanted to tell your friend how to make a peanut butter and jelly sandwich, you would say step number one, get out bread. Step number two, put peanut butter on one piece. Step number three, you put jelly on one-piece. Step number four, put it in your mouth. So just like a computer program, it's going to follow instructions step-by-step. Now, each instruction is called a statement. Now, every statement is going to end in a semicolon. So we already saw one of these statements right here, and that's how to print things on screen, and that's document dot. Right. Now, that's why we ended it with a semicolon. And in order to print something on screen, we just add those quotation marks in, right? Like, I love ham. So whenever we save this, it's going to see that, alright, prints something on the screen. That's my one job. I go ahead and I printed it out on the screen. And if we have another instruction under this, let's just go ahead and print some of the notes out. Copy and paste it. I love ham, and I love bacon too. So it's gonna say RA, print out, i love ham. That's an instruction number one. Print out, I love bacon too. That's an instruction number two. And notice that each instruction ends with a semicolon. And again, these are called statements. So let's go ahead and save this, refresh it, and see. It said, I love Hamm. And then the total Amanda, do, I love bacon? And then bam, computer programming is over. So that's the basics behind every single computer program. It just starts at the top. It does all your statements and then ends. How simple is that? So well, I guess that's all I want to give you a i's for the storage because the next subject is kind of a lengthy one and it's gonna take a whole video to learn. But remember, in order to leave a comment, you need either two forward slashes for a single line or that forest less asterix, asterix Ford slash. If you want to leave a comma over multiple lines and all a computer program does is it goes with line by line, aka a statement by statement, as long as they end with a semicolon. And it does this, then this until it gets to the end of your script server saying, RA, do the first thing, do the second thing, and then end. So that's basically how a computer program works. So in the next tutorial, I'm going to be teaching you probably the biggest, most important concept behind computer programming. And that is called variables. So it's going to be a super important, it's orbital. You definitely want to check it out and it's definitely going to help you understand JavaScript so much more. So thank you guys for Washington, this one, and I'll see you in that video. Was up guys, welcome to your third JavaScript sorrow. And as promised in this tutorial, I want to talk to guys about a huge concept in JavaScript. Probably the most important concept that you guys need to learn, and that is the use of variables. So go ahead and try to remember all the way back to like fifth grade algebra class until you first learn about variables. Now if you can't remember, here's a little refresher. In order to use variable or a variable basically is, is you take something like the letter x and you set it equal to something else like the word Hamm. And then when your math teacher wrote something like, I love x or x comes from a pig. You understood that this meant I love ham. And ham comes from a pig has because x and ham, or basically the same thing. So that is pretty much a variable is, It's just a fancy word for a place holder. A variable is a place holder holds a place or something else. And let me go ahead and delete that first fall. So in JavaScript, we use variables, a whole bunch, and we use them kind of in the same way, but a little bit different. Now, in order to tell JavaScript that we're gonna be working with a variable, we need to write the keyword V a R. This tells JavaScript, alright, you ready for this? We're about to make a variable. You need to include that. The next thing that you're right is the name of your variable. I'm just gonna go ahead and name my variable X. But, you know, you can name it whatever you want. So after this, You go ahead and write the equal sign. Now the equal sign is called the assignment operator. Technically like if you're learned this because you have a JavaScript class and you're trying to refresh on JavaScript. And he says, what's that equal sign called in JavaScript, you need to say it's the assignment operator. But other than that in these soils, I'm just gonna say equals sign because it's a whole lot easier. But anyways, you're a var, the naming your variables, the assignment operator or equal sign, and then you write what you want your variable to equal. So go ahead and just write like 23 or something, right? Any value in there. And then of course, like every single statement in JavaScript, we have to end it with a semicolon. So you're saying RA, y is a variable useful. What can I do with variables? Well, a variable is useful for many reasons. I mean, already we know how to print something out on the screen. So go ahead and write document dot, write. And then inside your parentheses, instead of putting quotation marks in the line of texts that it'll print out. Go ahead and delete everything and just go ahead and write your variable and check the cell. Go ahead and save this and refresh it and see what we get. 23, just like that. So as you can see that it pretty much, this is what JavaScript is understanding. Ra, you're making a variable called x and you're setting it equal to 23. So now whenever I come across the term x in my program, I note that to substitute it for 23 server saying RA Bucky, you probably could just wrote 23 in here and it would have printed out just fine. So why go through the trouble of writing x? Well, when you're building computer programs, you don't just have it occur one time. You might have a 1000 different lines of code that include the term x. So you can either type out the word or excuse me, the number 23 each time or you can just go ahead up here, change it one time, and it's automatically going to change in all of your code for you. So anyways, it's gonna save you a bunch of time. And it's also useful for different reasons that I don't want to talk about right now are through just confuse you. But anyways, that is variable is how to make it and how it's useful. Another thing I want to mention is go ahead and delete this. As I said, you can name your variable anything you want, but I kind of lied just a little bit. The first thing I want to mention is this. Variables are case sensitive. And I mean that, and if we go ahead and try to type a capital X up here and refresh it and see what happens. We get nothing on our screen. That's because a lowercase x, It's different than uppercase X. The variable named Bucky, or excuse me, let me type that. The variable named Bucky is different than this BU CKY. Even though they're spelled the same, if you try to run it, you're going to get nothing again because it looks at it as two different variables. So make sure that if a variable might be messing up, then that means that you might've capitalize something that you shouldn't capitalize. Another thing I want to mention is you just can't use any symbols and letters you want. You need to start your variable name with a letter or an underscore. So sends Bucky starts with the letter. You can also start it with the underscore. That would be valid but you can't start it with like and or percentage sign or anything like that. It needs to start with an underscore or a letter. Another thing is that the other characters in your variable name must be letters, numbers, or underscores. For example, you can't have like Bucky percent dollar sign, dollar sign to at sign. And that's that variable doesn't make sense at all. Basically, just use letters, numbers, and underscores and you'll be fine. And lastly, I want to talk to you guys. Is that the most difficult thing to remember is that your variables can't start with numbers. For example, if you have variable six, Bucky equals 32 and you try to run this program, it's not going to work out because your variables can't start with numbers. That's probably, probably the most forgotten rule, but I needed to tell you guys. So whenever I said that you can name your variable anything you want, I kind of lied. You just have to remember these simple rules. It has to begin with a letter or an underscore and only use letters, numbers, and underscores. You can't use dollar signs, spaces, percent signs at signs, can't use any of those. And if you follow those simple rules, you'll be good to go. Now that we understand what a basic variable is and how it's useful in computer programming. We can go on and move to our next tutorial. And in the next tutorial I'm going to be teaching you guys about the different types of variables. And trust me, it's going to be extremely useful. So anyways, thank you guys for watching. Don't forget, subscribe and I'll see you in next video. Was up everyone, welcome back to your fourth JavaScript tutorial. And I'm going to be talking to you guys about all the different types of variables that we can use when working with JavaScript. So the first type I wanted to talk to you guys about is why I showed you guys before. And that's just basic numbers. So go ahead and let's make a variable. I'm going to call my tuna because I love to know why not, and set it equal to your favorite number. Mine is 20. And then go ahead. And this is a statement, so we need ended with a semicolon. And then on the next line, let's go ahead and print this out. So if you remember that the way that we print out things in JavaScript is document dot write. And then inside parentheses we go ahead and write the variable name, which is tuna, and then go ahead and press semicolon. And now whenever we see it on our webpage, it prints out that variable. So we can see already that you can set numbers equal to variables. But what you didn't know is that you can also set numbers with decimal points equal to variables. So go ahead and add a decimal points, your number, save it, and then go ahead and see what happens. So aside with whole real numbers, JavaScript can also work with decimals as well. And if you're wondering this, RA, can JavaScript also work with negative numbers? Well, let's go ahead and see. Go ahead and type in negative number in there. And yes, it's true my friends, javascript can handle negative numbers perfectly. So basically any number that you would want to work with in computer programming, JavaScript can handle. So now that we cover numbers, let's go to the next thing, and that is text. Now, text in JavaScript in all computer programming languages is actually called strings. Why they named it? That? I don't know. Maybe it's because a string of letters put together, who knows? Don't blame me, blame whoever may JavaScript. But anyways, if you want to set a variable equal to a string of text, go ahead and set it equal to quotation marks, and then go ahead and type your text in here. Now go ahead and save this and see what happens. It prints out whatever text was in there. So again, if you ever want to set a variable equal to, you know, a sentence or word, or just a little bit of text, you need to add those double quotation marks. In the reasoning behind that is, if you set it equal to something like tuna equals text and you don't have the quotation marks. Javascript is going to think that you have a variable right here and you're trying to set equal to another variable called text. So that is why you need or quotation marks to say no, this is an another variable. It's actually a word or a sentence or something like that. So once you do this, it will work fine. Basically, don't forget to include the quotation marks. So now a little problem pops up and that's what I fear. Wanna have variable and set it equal to a saying or something like john said. Boy, do I love Bessie? Well, whoa, why you stuff turning blue? And anyway, so let's go ahead and save this and see what we want. It doesn't work at all in the reasoning behind this is because your entire string of texts and needs to be in between quotation marks. So it's going to say, alright, you have tuna, you have a quotation mark here. You're heavier ending quotation mark here. And this is what I'm going to set equal to. But what the heck is all this stuff if you already gave me two quotation marks? Well, actually, JavaScript's not smart enough to know that this is a saying and that this is actually part of the variable. So in order to tell JavaScript that allright, these quotation marks here are supposed to be inside the variable itself. We need to add something called an escape character. Now what an escape character does is it takes the next character and it pretty much treats it as a regular piece of text. So this and this are escaped characters. Now JavaScript knows that this and this are the two quotation marks and everything in between here is just going to be basically your variable. So go ahead and save this. And now we get our quotation marks. The pop-up. John said, boy, do I love Bessie? And he really does, by the way, by sees a cow, not a regular catalog, a dairy cow, not make fun of anyone here, right anyways, on with this tutorial. So anyways, if you ever need to escape something, then that is the, you know, that's a symbol. You use a backslash. So there are different things that we need to escape. I'll teach you guys those as we come across them. Now let's go ahead and delete all of this and let me talk to you guys about two different types of variable. So we already learned about numbers, and we already learned about text, AKA strings. So there are two other types of variables that I want to talk to you guys about. And the first one is called boolean or Boolean, however you say it, and that's the word True. And the world, and the world. I keep saying world like the Earth and the word false. Now, I'm not going to go over Boolean right now, but just remember that they have special meaning in JavaScript. So that's why whenever you, you might be looking at a program and it says true or false, then that is how you make a boolean. But again, don't even worry about right now. My shouldn't have even said anything. But now that I'm going to confuse, I might as well mentioned this. The fourth type of variable is called null. And whenever you set something equal to null, that means that it has no value at all. And this is different than 0. It's completely different than 0 or 0. No, is pretty much like an empty variable. And again, just with true and false, you'll be seeing what these do later on. But for now, I just wanted to cover all the different types of variables, so I had to include it. But anyways, I didn't mean to confuse you. Just remember that you can use numbers and if you use letters, then go ahead and put them in between quotation marks. So once you understand that we're ready to move on to the next tutorial. So anyways, thank you guys for watching. Don't forget to wash and next tutorial, and I'll see you guys later. What is up, guys, welcome back to your fifth JavaScript tutorial. And in this tutorial, I'm a teaching you guys how to use variables with a string of text in your program. So it's going to be awesome and it's actually really helpful in understanding how these programs work. And trust me, you're going to use this a lot whenever your program in JavaScript. So let's go ahead and enough of me talking and let's go ahead and get started. So the first thing that we need is two variables. Go ahead and make a variable called name and just set it equal to, of course, whatever your name is, Bucky. And go ahead and make another variable called age or something. And set this equal to your age. I'm 24, so of course I'm going to set mine. It's 24. So we already know that we can use document.write to basically write things on the screen so we can either write name and if we go ahead and print this out, it says Bucky. Or we could have went ahead and printed out age and it'll print out 24. But what if we wanted to include this within a bigger string of text? Well, in order to do that, you need to use the addition operator, aka the plus sign. And you write the addition in this, sticks it to whatever string of texts you're trying to type out. So for example, it says, Bucky is my name. So go ahead and it's going to treat this as the word Bucky, and it's going to add it with this shearing. So let's go ahead and just see it. Now it says, Bucky is my name simple enough. So anyways, whenever you want to write a variable inside a string of text, you just can't, you know, I write something like this. You just can't go ahead and write. Name is my name or else check it out. It's gonna say name is my name. If you want to treat that as the variable, you need to put it outside the quotation marks. And you need to stick it together with that plus sign. And then it works perfectly. And not only can you do this before, but say you want to write something after, like Bucky is my name and my age is plus h. So again, not only can you do this before your texts, but you can also do after and check it out. Bucky is my name and my age is 24. So easy enough. That is how you use variables alongside strings of text whenever you're trying to write out stuff. So let's go ahead and delete all this and let me, um, let's go ahead and make some new variables. Let's go ahead and make a very Moyo name tuna and set this equal to I am a fish. And then go ahead and make another variable called bacon and set this equal to bacon nadir. And then go ahead and add one more called hmm. I got like two things. Why do I think a tuna and bacon enough time? Anytime I make a variable, like a 1000 Soros, and I swear he may like to variables tune of bacon and ham. So heck, it might as well include ham and set this equal to am burglar. Make sure it's spelled wrong or else it won't work. So anyways, we have three variables right now, and we already know that we can stick him on a string of text. But what you didn't know, or maybe you did is that you can also stick them alongside one another. So Tuna, bacon plus ham. And whenever we try to print this out, it's gonna give us, I'm a fish bacon Nader hamburger. So let's go ahead and see that. I'm a fish begun Nader hamburger lawyer. You know, it doesn't make any sense at all. And I probably should pick something that didn't make sense. But hey, this is just an example, who the heck cares. So anyways, that's what I wanted to show you guys in this sorrow about the addition sign. And whenever you're working with variables or strings of text, you need to include the addition sign or else it's not going to work. So again, that's all I wanted to teach you guys for this tutorial. In the next tutorial, we're going to be diving a little deeper into JavaScript and going over some more advanced topics. But trust me, they're going to be easy to follow along with. Just stick with me in no time you'll be a JavaScript pero. So anyways, thank you guys for watching. Don't forget if you have any questions. Just go to my forum, the new boston.com slash forum, and if I don't answer them for you, someone else will. So thank you guys for watching and don't forget, subscribe and I'll see you guys later. What is up, guys, welcome to your sixth, a JavaScript tutorial. And in this tutorial, I'm going to be talking to you guys about something, call it functions. Now, a function is basically a mini program. It's a mini program that you can use anytime you want throughout your JavaScripting. For example, if you're making YouTube, they probably have a function to play the video whenever you hit the play button. They have a function to pause the video whenever you hit the pause button, they have a function, a function to add a vote to the thumbs up whenever you click the thumbs up button. So as you can see, a function can be called not only as soon as the webpage loads, but it can be called anytime you want. So let's go ahead and make a function right now. In order to make a function, you first type the name votes, Give us some space. Type the name function. This tells JavaScript, alright, we're about to make a function. Now after this, you give a name to your function. I'm going to name mine funky because this function is funky. Now after this, you add two little parenthesis. I'm not going to be talking about these yet, but these are called your parameters. So we'll just ignore these for now until the next story. And then after these, you add two little curly braces. Now inside the curly braces is where you're gonna be putting all of your JavaScript code, all of the code you put in here, all the statements is the code that it's going to run whenever you want to use your function. So if you're making that YouTube page, whenever they click the play button, you would play the video. Now. So anyways, you can see that this is the code that we want to happen whenever they call that function, aka whenever the user wants to use that function. Let's go ahead and inner function will make it do something really simple. Let's go ahead and make a pop-up appear on our screen. So making pop-ups is really easy and JavaScript, all you need to do is write the name alert. In this means make pop-up on the screen. Now inside the parentheses for this, you write what you want to appear in the box. So just go ahead and write like ouch or something like that. Now whenever this function is used, a pop up is going to appear on our screen. And it's gonna say, Ouch. So let's go ahead and let's go ahead and use the function right now. So in order to use a function, you go ahead and write the name of your function, funky, and then you go ahead and write those parentheses, which we don't know what they do yet, but what we learned that in the next tutorial. And then since this is a statement, we go ahead and end it with a semicolon. So anyways, or our JavaScript is gonna say RA, we have a functionary here prepared to use it whenever we call it. So right here is when we call it. And by the way, like I said, anytime I say call a function, I mean use the function. Calling a function is just the technical term. So use my function. So it's going to say, all right, call Funky now, so a pop-ups going to appear. So let's go ahead and save this to see this baby and action. As soon as we load our page is going to call it bam, look at that, a pop-up appear and it said, ouch. So let's go ahead and maybe it'll be easier to see if I actually add a button on the screen so you guys can see functions don't need to happen as soon as you load your page, but whenever you need to column. So let's go ahead and instead of just calling it re iterate right away, like right then let's go ahead and add a form on our page. Because if we add a form, we can go ahead and add bunds. So actually we need to do that outside the JavaScript. Since it isn't actually part of JavaScript, it's actually part of XHTML. So go ahead and add a form. And your form right here. And inside your form, you're only gonna have one element, the input. And by the way, if you have no idea what I'm doing right now, go ahead and watch my XHTML tutorials. I talked all about forums and stuff like that. So the input, the type of this is button, is just going to appear as a button on your screen. The value is what you want, the sound the button and it will just touch me. And there is another parameter that you can add to your buttons in that's onclick. And inside or the value for onClick, you go ahead and you write the name of your JavaScript function. And I'm just gonna go ahead and write funky because that's the name of the function. So anyways, check this out. If we go ahead and save this and launch it in Chrome, we go ahead and we have a button on the screen that says touch me. That's by default what's loaded on our webpage. But you can see we added an attribute to this function or excuse me, this button called onClick funky. That means whenever we click this button, we want you to use a JavaScript function called Funky. So whenever we cook there's been an alert box is going to pop up that says, Ouch. So let's go ahead and click this button. And we see the alert box pops up and it says, Ouch, press OK, and that's it. So that is the beauty of not only how to make money, but also how you can call a section of JavaScript by using something called functions. So anyways, by default, your web page loaded in it, loaded this form with a button on it. By default it did nothing. But whenever we clicked it said, alright, whenever you click me, I'm going to call this function called Funky. So that means I'm gonna go back up here and do whatever you told me to do inside. So by the way, the line of code inside your curly bracket is called the declaration. Some people call it the body. I just call it whatever code's inside your curly bracket. In. That is the basics of how to create a function. Just go ahead and write the name function, the name parentheses, curly brackets, and write your rules inside your function. And also how to call a function whenever you want using a button. Or you can just call it automatically by writing the name of the function. By anyways and the Mxit oral, I'm going to show you guys what these parentheses are and why they are useful in wide most functions actually use those parenthesis. So anyways, thank you guys rushing this Sorrell, thank you for learning the basics of a function. If you don't quite understand, just stick with me in the next tutorial, everything will clear up for solenoids thinking hats, Washington because subscribe and I'll see you guys next video. What is up, everyone and welcome to your seventh JavaScript tutorial. And in this tutorial, I'm going to be talking more about functions and specifically what those parentheses are and why you need them whenever you create a function. Well, let's go ahead and first, create a function and let's go ahead and name it meatball. Why not? And then go ahead and enter your parentheses. Now let's go ahead and make the body right now before we start talking about the parentheses, let's just go ahead and make an alert box will just leave empty for now. So now what we need to do is. About this parenthesis, these parentheses are called the perimeter of our function. Now, sometimes you need additional information in order for your functional work. For example, if you made a function to convert temperature of Fahrenheit to calculus, you need a temperature in order to know what number to convert. If he made a function in order to greet someone like hello Bucky, hello Tina, Hello Tom. You would need their name in order to know how to greet them. So let's go ahead and make a function with a parameter. Now, in order to make a perimeter, you just go ahead and type in the name of a variable like x or something like that. And then later on, whenever you're creating the body, you go ahead and you use that x, just like you would a normal variable. So for example, I love and then go ahead and write x. So now whenever we use this function, we need, instead of, let me go ahead and just type something like meat ball. And then we need to pass in a value. And let's just say bacon or something like that. So now here is what's going to happen. Let me run this for you. Maybe that'll be easier. Oh, it's off the screen. Let me run it on the screen. Run Chrome. There you are here. I love bacon. Okay. So why did it say I love bacon? And what exactly is going on? Boise, we called our function in use the array here. But since this function has a perimeter, it says, all right, in order to use this function, I need one extra piece of information. So whatever information we gave it right here, it actually took this word bacon in. It said x now equals bacon. So now in the body of my function, whenever I come across the variable x, I substituted with whatever you gave me, which is bacon. So let's go ahead and call this again. With what else do I love? Natalie Portman and the movie, Good Will Hunting. So now let's go ahead and save this and run it. And maybe this will be easier to see. It says, I love bacon first and then you press okay. And then it says, I love Natalie Portman. Press OK. And then he says, I love Goodwill Hunting, press ok. So now you can see that it's the same function. It just has different information being passed into it. And by the way, I keep saying pass because the technical term, whenever you give additional information into a function, it's called passing it information into its parameters. So this, the parentheses are technically called its parameters. And when we give information into it, it's called passing information. By anyways, you can say substituting variables. It really doesn't matter as long as your program works. So anyways, you could see that whenever we gave extra information, it said, I love and then substituted that information as x. It says, I love bacon. I love Natalie Portman. I love Goodwill Hunting. So that is how you can use parameters whenever you're wanna use additional information for your function. So this is a really simple example using an alert box. Yeah, that's pretty much all I have for you for this tutorial. In the next tutorial, I'm going to show you what happens if your function needs more than just one piece of information. Maybe it needs three names instead of just one. Maybe it needs a couple of numbers instead of just one sinewaves. That's why I'm gonna be showing you guys how to do it's called passing a multiple parameters into a function and it can get kind of complex, but as long as you stick with me and you'll be okay. So anyway, stinky ice rushed in this tutorial and I'll see you next time. What is up guys, welcome to your eighth. I think it's your ate the least. Who's count and welcome to your eighth JavaScript tutorial. And in this tutorial, I'm adjusting right now. Probably should have done that before I started. Then again, I probably should have found out what story or I'm doing too. But anyways, welcome to your editoria 41. 41 Simple Form Validation: was going on, guys, his bookie and welcome to your 40th Doro. And in this store Oh, I'm going to show you guys probably the most simple example I've ever showed you. And that is a basic form validation. Now, what this program is going to do is we're gonna have a really simple form. It's probably gonna be one check box, and whenever we cook the submit button, it's going to check whether or not that check box is checked. So you're saying all right, this is how you do validation with check boxes. But I want to do validation with the user name and passwords. Well, once you understand the basics behind for invalidation, you can apply this the l every single element. So you don't have to learn a bunch of different ways. You don't understand this one tutorial, and then you understand the basics of foreign validation. So, like I said, let's go ahead and start out with a basic form, and I'm gonna name mine, um, Bucky's form and let's go ahead and end it right now. And like I said, we can have a bunch of different elements in here. But for the sake of this story. I'm just going to add one check box so and put type equals check box and mines will give it a name will make it easier. Just name it the box. This is the box Dunton. And now we need some kind of submit bun because whenever we're calling our function later on and we needed some way to submit the form, That's basically all I'm saying so inputs type equals button in my eyes will give it a value off something like Press me, That's the text that's going to appear on the button. And now let's go ahead and use our on click attributes and remember whatever code we type in here like validator. This is the JavaScript function that's gonna be called whenever we click our bun. So let's go ahead and save this and run and launching from what we got now. So whenever we click our button, nothing happens because we didn't type any javascript yet. But whenever we create our validator function, we're going to create our value function to check whether or not this check boxes checked. So right now it doesn't do anything, but we're going to change that right now, So I'm gonna go ahead. And since this is just a function, I'm going to go ahead and add it in the head of my website. Why not? I looked at all my functions there. So again, this is named validator. So that's what we need to call our function function. And actually, Miles, we'll just copy that to ensure that we don't have any typos, and it's gonna take no parameters and check it out whenever we call our function. We need to check whether or not our check boxes checked or not. And we can do that with the basic if else statement. So if in the condition we want test is is this check box checked? So first we need access to that check box. In order to do that document dot the name of your form, which is Bucky's form, and let me just double click that Make sure. Whoa, not Bucky's Forum. Bucky's form their Rio. That's why I double click it, make sure they both let up So Bucky's form, and now we need access. The element, the check box, and we gave a name the box so we can easily access it and the property to see if it's checked or not as checked. Now this is gonna be true if it's checked and false. If it's not checked. So let me go ahead and launching Chrome. See, right now, it would be true, since it's checked and right now you re false, since it's not checked. So if it is checked, what bit of code do we want to run? Well, let's just go ahead and make an alert box pop of on screen that says, You know something stupid like Yep, it's checked with explanation, boy. And now if it's not checked, it's gonna be false. So under our else, let's just go ahead and alert. Um, something even dumber like you better check that Haas. No, I don't like that because they both start with why, and that's just right. No, it's not checked Explanation point. So say this in. Let me run this and then I'll talk you guys through it one more time launching chrome. So let's go ahead and check it and press it and it says, Yes, it's checked. Cool enough. Now let's go ahead and uncheck it. Press it again and it says No, it's not checked. OK? Pretty cool. It's working perfectly. So basically, here is what we did. We went ahead and we created a form called Bucky's Form, and we added a check box to it. And whenever we cook the button, we told JavaScript to call this validator function. Well, then we went ahead and we made the validator function. And all this function did is said, all right. When every click this button, I'm going to check if the check box is checked. If it is, I'm going to run this bit of code. It's not. I'm gonna run this bit of code. So that's why, whenever Iran and it was checked, it says yes, it's checked. Whenever it was unchecked, it said, No, it's not checked. Pretty cool, huh? So that is the basics of form validation. Again, we only have one other element besides the button on this form. But what people typically do is they make a function to validate all of their data and again, like you see, we validated one piece of data right here. But then you might have another piece of code that says, Validate another check box or validate a text box or a password field. So with that being said, this is how we use a bunch of different Excuse me. This is the basics of form validation and how to create a function to validate all the data in your form. So that's all I have for you guys in this store again. Pretty clear and simple. The basics of foreign validation. You pretty much make your form use a function to validate the data by accessing each element in the form. Simple enough. So now that I covered that, I don't know what I mean covering in the next story. But trust me is going to be amazing. So thank you guys watching. Don't forget to. I don't know. Don't forget to Ah, brush your teeth. I'll see in the next story.