Once you realize that computers store all of the information using variables, the next step is to start to learn about the different data types used in the JavaScript programming language. So if you look here in this example, you can see that I've got variable name equals prompt, what is your name. So it's expecting me to type in probably something like Colleen or Chris or Becca, something along that line. In the next example, we have variable name equals Date. So this is not a string, this is something that actually can be quite a bit longer and is very complex. You might also have variable name equals window.location. If I wanted to in JavaScript I could even say name equals 12. Doesn't make any sense but there's nothing stopping me from doing it. In each of these examples name would have what we call a different type. Things that are stored in the computer are completely different. So in computer programming languages, computers tend to have a single type. In JavaScript, that's fine, a variable can only be one type, but throughout the course of the program, it can switch from being a program to characters, back to a number to something else that's completely complex. So let's talk about what these types are in JavaScript and how we can represent them. So first, the first type we're gonna talk about is number, and it's pretty straightforward, it's simply any type of numerical value that you want to store. This can be with or without decimals. JavaScript doesn't care if it's 2 or 2.0 or 2.6785, it's all the same. In this example, I went in and I said you know what, I have this variable called width and I'm going to set it using window.innerWidth. This is pretty cool actually if you're trying to do something interesting in CSS because you can find out how wide the window is and then use that information to update other things. My next example is I have var pi, which is equal to 3.14. In this case, I hard coded it to something. In both cases, it's storing a number, but in the different cases or one, it's gonna be, normally would be an integer or a whole number, and the next time it has decimals. The next type is called String. String is simply a collection of characters such as letters, numbers, punctuation, spaces, basically anything you can type into the keyboard. To create a string you have to put the value in quotes. Now, these can be single quotes or double quotes. And I want to be very clear here that in PowerPoint it's drawn the quotes as kind of forward and forward. Make sure you don't copy and paste and instead you do the quotes directly from your keyboard because the slant does matter. So in this case, I've done var location = window.location. Cuz it happens to be that that attribute is a string or in my second example once again I've just hardcoded it to something you might expect. The third data type is Boolean. In programing, a boolean value is something that is either true or false. It doesn't have numbers to it or strings, it's very straightforward. So in this case, I might have my variable status equals false, this is again called hard coding it, or in my program if I wanna do something based on whether or not the window is open or closed. I can set it dynamically right here. The important thing to know is that status and window status can only be true or false. Those are the only two options. Later, we're going to learn how to write our own boolean expressions to check to see if things are true or false. And that can add really a lot of power to your page. The next data type is called object. Because sometimes the variables or the nodes are more complex than just a number or couple characters. So, a node in the DOM would be a really good example. If you think about a paragraph element to it, paragraphs are not just a number or a string, there are a lot of different things that go into it. So here I might have var topic = document.getElementById('myId'). So if I wanted to print out what topic is now, something like document.RightTopic. I would get something that pretty much looks like junk because it's an object, and objects can only read illegibly using things like attributes. So, using those attributes, we can go in and we might be able to say something along the lines of write out topic.style, topic.innerHTML. Different things like that can show us really the attributes or the string's numbers that make up objects. Finally, the last type we're gonna talk about is array, because in some cases a function might want to return more than one value. We've seen how the API can return something complex, like an object that could be a paragraph, or a div, something along that line. What if it needs to return multiple things? So here I have var links = document.getElements. Not element, but elements, ByTagName('a'). So, we're going to go in, it's going to search the entire document, and find all the hyperlinks in the page. Well, that's certainly not going to return just a single number, or a bunch of strings, or even a single object. Instead, it needs to return a whole collection. So arrays store these multiple values using a variable name, just like the ones we've done, but it also includes what we call an index for each element in the array. This is the same example where I say hey, go out and grab all the links. Now if I wanted to write some sort of element out I could say document.write(links[0]), and it would say return the very first link I saw. If I had links three, it would actually return the fourth one because computers love to talk starting from zero and up. Now we're going to have an entire lecture or more on arrays later in this course. But for now, I just want you to realize that it's one of the data types that can be returned. So let's look at a quick example that uses some of the different types. So let's see what happens when I type in a string to this sample code. I'm gonna go ahead and put in for what is your name, I'll put in Coleen. So now, if we look at the code, what I was doing here is I was just prompting for the name and then I want to write out the name. Boom, there's Colleen. And then I want to say, hey, what happens if I add H1 elements on each side. You haven't seen this plus before, and we're gonna be talking about it soon, but what we're doing right now is we're doing what's called concatenating. We're saying take the name and add H1 on either side. So boom, I get it bigger now. I also want to print out the title. That's a string. I also want to print out right here document.getElementsByTagName('p'). So this is where we're using an array, and I just want to show you this because there's a really good chance this message might pop up for you and I don't want you to get freaked out about it. So after I grab all the paragraph elements, if I try to print them out, it prints out object HTMLCollection 0. It says, oh, you didn't actually have any paragraphs in this page. If I go back, and I add a few, they can even be empty. Gotta love when it keeps popping up on you. I don't know how many I added but we're gonna do it. I can try running this again. And when I type in Colleen, you can see that now it knows that I have five paragraph elements in there. Luckily in JavaScript, there's a ton of flexibility with the different types of data you can use. In other programming languages they're very strict, but here with JavaScript they want you to have the power to try different things. For now, I want you to focus on learning what types of data are returned from those common APIs. If you do getElementByID, does that return a number, a string, an object, or an array? If you do something along the lines of getTitle or getLinks, what types of things are those returning? If you can play with that and start to feel comfortable knowing what the types are, even if you don't know how they work, you're really gonna be on your way to doing some cool programming. So good luck.
