Hi, everybody. Today we're going to learn about JavaScript variables. An important part of programming is learning how you can save data. Because by saving data, you can reuse it and give you program that's impression that's kind of intelligent and knows the user very well. In JavaScript, data is stored in what we call variables, and it's very easy to use variables in your programming. The only important part is that you need to tell the computer very specifically, hey, I need you to save something for me. And this is how we do it. We start by using the keyword var, V-A-R. When we're using the editor, hopefully this will show up in some special color that indicates, ooh, this is a special word to the computer. Next, you need to give your variable a name. Now, I chose the name name here, but you can imagine it being age, first name, last name, dob for date of birth. The important thing is that it should be special to you, but not special to the computer. How does this work? When you declare a variable, you're basically telling the computer, let's stop talking in human talk and let's talk computer talk. So here, once you said var name, it reserved a space in memory. It said oh, okay. I know that I'm talking about position 11011, blah, blah, blah, blah, blah. But Colleen doesn't want to talk about those numbers, she wants to use the actual variable name. So whenever she talks about name, I know she actually wants me to use the value Christopher. There might be some variables that you've declared, such as age, that you haven't put anything in there yet. The important thing to know is that computers aren't smart. Computers are just trying to give you a way to avoid remembering big long numbers and instead using English words. So, when you come up with your variable name, there's a few rules that you need to follow. Every variable name can have letters, digits, underscores, and dollar signs in it. Now to be honest, I don't put dollar signs in my JavaScript variable names because it can be very confusing, particular for those people who know multiple programming language. So I tend to stick to really just letters, and sometimes digits and underscores. When you do come up with a variable name, even though numbers are allowed, your variable can't start with a number. That number has to be somewhere else in the middle or the end. Also, variables are case-sensitive. What that means is that lower case name is not the same thing as name with a capital N or name with a capital M or name on all capitals. To the computer these are all different variables. So just be careful when you're programming and be consistent. Also, this last one isn't a rule so much as a suggestion that I want to convey to you. Make your variable names meaningful or mnemonic as the computer science term we use. That means, if the variable is storing someone's name, call it name. If it's storing age, call it age. You could get away with calling it 'yyy' or 'bbb', just don't do it. Okay? Taking a little bit of time to give meaningful names will save you a lot of heart ache later. So to be honest, if you're going to go to the trouble of declaring a variable and telling the computer to save a spot in memory for it, it's pretty silly if you don't then use your variable. And what I mean by use it, is you should assign some sort of value to it. When we assign things in computer science, we use what we call the equal, or assignment operator. So it looks like an equal sign, but we call it assignment, because what we're doing is we're not saying hey are these two things the same, we're saying take the value and store it into the variable. So here I have var name, and instead of just leaving it at that, I go ahead and say, hey, I want you to store the name Colleen in there, all right. So this is where when we start talking about assignment statements, I refer to LHS and RHS. I mean left-hand side and right-hand side of statements. The left hand side should always be the variable, alright so this is going to be in our case name or some sort of element, something that we want to change. The right hand side is going to be that new value that will be stored in the variable. Sometimes, the right hand side can be pretty long and complex. So right here would be an example where I'm just having, I declare my variable, and then later I want to update it. So I say, name equals Colleen. This works really well. What I need people to avoid is doing something along this line, where they switch the left-hand side and the right-hand side. Mathematically, if you're a math major, this makes perfect sense and it's the same thing, but it's not okay in programming. Always put the variable on the left-hand side. All right, so let's go ahead and I'm going to show you a few examples of how you might use a variable. So, if you remember when we talked about output, one way that we were able to produce output also was a way to generate input, and that was the prompt. So when you use the prompt, it's waiting for you to type something in and when you type it in, it's going to store that in the name. Now can we use that whenever we want to? We can say document dot write name and we'll promote to the screen. Next, we can use another variable and say hey, I want you to use this JavaScript function called date. And date is going to return what the current date and time is, right now when you're looking at the page. Then you can write that information out. You can even use more from the API saying, you know what? I want to know where this window is. What's the location of this window? And you can write that out as well. So, let's look at a quick example of how we can use that. So, let's start with the simple code we used before when we were learning about prompts. Only now, I want to combine it with a variable, so I am going to go in here and do var, and I'm actually just going to call it nm. The reason I'm doing that instead of name is because I really want to make people realize that the name you give your variable. Doesn't really matter, it can be anything you want. Just because I call it name, doesn't mean you have to. And as soon as I did this, the prompt statement showed up, and I put in Colleen. Great, it worked, but we didn't do anything with it. So, let's go ahead and add a little bit more code. Now I am going to comment out this line. You can see why, because otherwise it'll keep asking us to prompt things. We'll comment that out when we're done. All right. So I have this variable called name, now I can go ahead and do something like document.write nm. I can also do Console.log(nm). If you wanted to you could even put in alert(nm). So let's go ahead and put this back in. Might want to edit all my typing out. What is your name? Well, it is Colleen. All right, so the alert popped up, but why didn't the document.write work? So this is a good question, and this is actually an example where I can go in, that's what was going on. It was actually waiting for me to hit okay. When it was all done, it went in and it printed out my name. So this is a really simple, quick example. Let's do one that has a little bit more going on with it. Let's hit cancel right here. Stupid alerts keep popping up. That's why we want to get rid of them as soon as possible, and switch the document outright. All right, so in this case we're going to talk a little bit more about how you can add different things together, and how you can assign your variables using more than just prompts. So in this case, I went in, I declared a variable. We're going to go ahead and ask for the name. I write out the name. I write out the name twice actually. Once with my name and then another time with an H1 heading. And then I just wanted to show you that you could also grab other information from the document, itself, such as the URL and the title. So, first thing I'm going to show you is, it says null and null. And that's kind of weird, and it might happen to you and it might not. So the first thing I wanted to print out was my name, but I didn't type anything in the prompt. So when the JavaScript doesn't know what to do, when it doesn't know what value should have been in there, it's going to assign it a value of null. So let's run this one more time. I'm going to put in the name Christopher just in case someone else named Christopher is watching this and they can feel special. But now you can see it printed out Christopher. Christopher it printed out, printed out the URL, and it also printed out the title of my page. Variables are a key component of really doing any type of programming language at all. We're going to be using them throughout this entire course, so I need you to practice them and feel comfortable using them. Go into the code that I have on CodePen or online and change it, and see if what you do does what you expect it to do. You might create some errors and that's okay. That's a great practice using things that just consult that log. The most important thing is I want you to understand how variables work, so that you can use them throughout the rest of the course. Good luck.
