[MUSIC] Welcome to the next lesson. You will recall last time, we started our discussion of JavaScript syntax. It's a big topic, and there's a lot to learn. Fortunately, we can learn a little by little. You don't have to know all the syntax to make your programs work. So this time, I'd like to discuss a few new elements of JavaScript syntax. Here, we have something called a comment. Now, notice here in my editor on line 9, I have slash slash and then this comment, Function will display of blue version of input. The // causes this to be ignored by JavaScript when a program runs. So I can put anything on this line that I want. It helps me understand or remember or maybe helps the next programmer work on this same function. If I remove this and use this now without the slash slash attempt to see this line as code and use it, now this is not real code, so it would cause our program to break. So when we use the comment is by putting a slash, slash in front of it. Now, there are other ways to make comments in JavaScript but this is convenient and it would be enough for now. So, the next element I'd like to talk about are variables. Notice here on line 11, I have the keyword var and that's how we declare a variable in JavaScript. And I've named my variable here test input. You may wonder why we need a variable. But we've seen before this built in function document.getElementById will get something from the element with the ID name. If we scroll down to our HTML on line 30. This is an input tag as we have seen before with the ID name and what this will do is get whatever the user has given as his input. And so document.getElementByID or the ID is name.value, this will give us whatever the user has typed. And notice, as we discussed last time, it's terminated with a semicolon. So now we have the user's input. We want to have someplace to put it. And it's convenient to put in a variable that I happen to be be called testInput. So I can use testInput somewhere else in my program, as you can see I have done when I highlight it. Now, once I have this variable, I'd like to work with a little bit. So let's save this, I'd made a few small changes as we've gone through this, and I'm going to run it, and so what this will do is, Or you put this and this is a test and I'm going to click the button I've called Color It and we see the input shown here but now it's blue. Let's go back to the code. So I've got the input from the user which happened to be this is a test. I put in my variable and we can see that's coming out of its paragraph where I made the color blue. But how could you do that exactly? So what I wanted to accomplish here was a special sort of test where if the user gives us no value and just clicks color it by itself, there was just, hey you didn't type anything. And we accomplish that by using an if here on line 13. Then this how JavaScript and many other languages make a test. So we want to test to see whether the input was really there. And so our variable test input has a property called length. So all strings in JavaScript have this linked property and we're checking here, testInput.length and then a == sign and a 0. So this == sign is called the equality operator and it's how we test if something is equal to something. And so why you don't have to completely understand how this works. The general idea at the moment is that if the length of the testInput is equal to 0, this if is going to do something. And what it does in this case is use this, getElementById for paragraph and assign it this value. Hey, you didn't type anything to the inner HTML, using this assignment operator that we talked about last time. So if it has a length equal to 0 it says, hey, you didn't type anything. And then another part of an if is an else. So if this is true, meaning if this is true that it was 0, we'll see this first element and on line 17, we'll see what happens if this was false. In other words the width wasn't zero. And if the length wasn't 0, then we're going to use the test input rather than this message that we used here. So, this gives us some new insight into JavaScript syntax and features. It's very important that you practice. Now, I want to highlight that when people are learning this for the first time, they often will have trouble. They'll forget the semicolons, they'll misspell getElementByID or innerHTML, they'll use one equals sign here, which will be an error, or a variety of other things. So when we're doing that, we often don't know that we're making that mistake. We don't realize that this is going wrong is our first try and then when the program doesn't work you'll get frustrated. So, first I want you to be aware that, that's probably going to happen, we're going to feel some frustration. You and everyone else in the class has that same feeling and ask questions, get help post in forums, try again, it really requires a lot of perseverance to get good at this, and work through this small errors that occur first. But let me show you something that can help, so I'm going to save this. And I wondered what would happen what do you think what happen if I would to delete this. Brace right here online 19 and notice that this brace and then this brace are holding everything in the function. Everything in the function is between these two braces. The one on line 10 and the one on line 19. So if I were to delete this, or let's say I didn't, I just forgot to type it and I'll save this. Just say I forgot to type it and we'll go here. I've made a change, so I'm going to refresh this. And now when I try this, if it's empty, I would expect to see my hey you didn't type anything line. But notice that I'm clicking it and nothing is happening and if type here this test as I did before, and still nothing is happening. At this point I could feel very frustrated, but let me show you something you can do. Now I'm using Chrome. You could do something very similar to this with other browsers besides Chrome, but I'll go down to More tools > Developer tools. Now, you don't have to remember exactly where this is you can look it up. You can also get here by typing Ctrl+Shift+I, or it'll vary by browsers. So you'll want to look up how you get to your developer tools or your console source or code, console. Now notice here that what I'm seeing in Chrome is the JavaScript that we had earlier. And this is the same JavaScript we have here, right? Same thing, and Chrome is showing it to us now. And notice that when I scroll down, I've got a little red X right here. And if I mouse over it, Chrome is telling me display input is not defined. Now, we'll recall that my function is called displayInput. Remember, displayInput right here. But it's telling me it's not defined. Well, I feel like I just wrote it so it must be defined. So now I go back and I look at it and I check my braces and I realized, I forgot to type my last brace. So I put that back and I'll save it, I'll refresh my page. And I notice that the error went away and I could try and program again and it works. So many times you won't realize you've made a mistake but by looking at the console, like I did here, you can sometimes get a good clue about what is the issue you need to fix. So next time, we'll talk about using some of JavaScript's built in features like the alert and prompt.
