Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.1 Variables and Functions

Variables and functions are two important pieces not just for JavaScript, but for every programming language. You'll get a crash course on these two topics in this lesson.

5.1 Variables and Functions

Starting in this lesson, we are going to spend time with just JavaScript. And as such, I'm going to switch from brackets to Visual Studio code. So go ahead and open it up. Now over on the left hand side, there's what they call the activity bar. If it's not displaying for you, you can go to View > Appearance, and then Show Activity Bar. But we want to go to the extensions here because we want to install the live servers. So just do a search for live server. The first hit is probably what you want. It does show you how many times it was downloaded. So if there's millions of downloads, then it's basically a good extension. What this is going to do is give us an HTTP server so that we can load all of our stuff over HTTP, which is very important when you start doing Ajax and things like that. So click on the Install button to install live server. And once that's done, we're good. We can go back to the Explorer and we are going to create two files. I'm gonna pull up the command palette here. For me on Windows, tThat is Ctrl +Shift + P, on Mac its Command P, I believe. You will see the commands that you have at your disposal here. Show All Commands pulls up the command palette and we are going to create a new file called index.html. We'll do the same thing except that we'll call the file index.js. And inside of the HTML file, we can have an exclamation point, hit Tab after it, and then we have our HTML document. I'm gonna change the title to JavaScript, and I'm going to add the reference to that newly created index.js file. And once that's done, we don't need the HTML anymore. Down in the bottom right hand corner is this Go Live. If you click on that, that's going to start up that server that we just installed, and there we go. I'm going to organize my windows so that these are side by side. All right, so the first things that we're going to talk about are functions and variables, and we'll start with the alert function. Now, as its name implies, it is a function. It does something, it has a purpose. And in this case, the purpose of the alert function is to show a message in a dialog box in the browser. Now by itself, the function name isn't going to really do anything. What we want to do is execute a function and we do that with a pair of parentheses after the name of the function. So, if we save this file on the right hand side, we see this dialog box come up, but there's nothing there. You know as I mentioned, we are supposed to see a message here. And that's because we didn't supply a message. The alert function needs some data to work with, and most functions do, and the way that we get data into a function is we pass data to it. That is the term that we use, we are going to take data and pass it to the function and we do so by passing it inside of the parentheses. So in our case, we want a message, and we can just say hello world. But this isn't what we want to do. All right, it looks like we're passing text but really we're passing two individual things, one's called hello the other is called the world. So inside of JavaScript, whenever we want to work with data that is text, we call that a string. And a string begins with quote and ends with a quote. And everything inside of that quote is part of that string. So you can think of it as a string of characters or a bunch of characters are strung together, but it's just text. So whenever we save this now on the right hand side, we see our message, hello world. So we have a function called alert. We are passing a string to that function. The string contains the text hello world and we see the result in the browser. Now there are a lot of times that we want to store data so that we can reference it whenever we want. Because as it is right now, we have this hello world. But if we wanted to use that same string in another function, we would have type out hello world. And while we can simply copy and paste that like I have done, a lot of time we would type that out, and you can just see that immediately I start typing incorrectly. That is obviously not an efficient way of referring to the same information. In our case, the information is the string of hello world. So what we can do then is store it inside of a variable. You can think of it like a box. We have this box that we can just put stuff in. And anytime that we want to take something out of the box, we just take it out of the box. So we create our variable starting with the let keyword. And you can see that Visual Studio code as saying that this is something special just based upon the color of the word. Let is a special word in JavaScript. It allows us to create a variable and we will call that variable message. Now what we've just done is right what's called a variable declaration. We have declared the message variable, but it doesn't really contain anything useful, and we want it to contain the message hello world. So what we can do then is now that we have declared that variable, we can assign it a value. So on the left hand side we have our variable name, followed by an equal sign, and then the value that we want to store inside of that variable. This is what we call an assignment statement, because we are assigning a value to it. And once it has a value, we can use that variable wherever we want. So now we can use it by passing that variable to the alert function. And whenever that is loaded into the browser we see the same results that we got before. And the great thing about a variable is that we can change it's value if we need to. So if after we display the initial message of hello world, we decide that it needs to contain hi world. Well, we can do just that. We assign it new value, and then whenever we use that variable again, we will see hi world in the second alert box. Now there are a lot of times we know what a variable is going to contain whenever we create that variable. Sometimes we don't, but a lot of times we do, in which case we can declare and assign a value in one line of code. So all we have to do is first of all, let and then our variable name, equals, and then our value. And whenever we save this, we're going to see the same result. Our first alert box says hello, world, the second says hi world. Now one last thing for this lesson. You'll notice that these first two lines of code have these slashes in them. Those are comments. Any code that comes after a pair of slashes is what's called a comment, it's just text. It's there primarily for our benefit, so that if we need to explain anything, like for example if we wanted to say that this creates the message variable, then we can do that. However, in this particular case, we don't really need to do that because the code needs to be self explanatory. So comments can be useful, they can also be completely pointless. But in this particular case, I'm using comments to denote the type of statement that we have, because every line of code that we have here is called a statement and this is a variable initialization statement. So there we go, and this is just a brief little tutorial on functions and variables. You know that a function does something, it serves some kind of purpose. And a lot of functions rely upon data in order to perform their purpose. So we pass data to those functions. We can store data inside of a variable so that we can reuse that variable whenever we need to and we can always re-assign a value to those variables. Now in the next lesson, we are going to continue looking at functions because functions are a very important part of JavaScript. Learn how to write your own functions.

Back to the top