[MUSIC] Welcome back. In our last lesson, we looked at expanding our on board example so we could add additional functionality for gathering user input and modifying the array HTML. In this lesson, we're going to talk about the importance of testing our JavaScript. First, almost all programs have problems and errors and frequently don't work the way we plan them to, at least not at first. One of the truths of programming is that we rarely ever find and see all of our own mistakes. This is usually because we've looked at the code so long, and worked on it so much that we've become blind to certain aspects, so when possible you should ask a friend or a coworker to try to test your program and your code. Usually someone who didn't work on the code themselves can find problems much more easily. In professional and commercial development groups, there's usually a team member, sometimes many team members, that will do this task of testing and give feedback to developers so they can more easily fix the problems that are found in the code. Just because someone else should be testing our code for us at times to give us more perspective. It's also important for us to test our own code, because often times we can find at least some of the problems, maybe many of the problems before our users have to encounter them, so let's talk a little bit about that with this test program. I've program in my editor right now called the JavaScript testing.html. And I have a button below on line 29 with an on click event and it's aimed at a function called doMath. Which is just a test function we'll work with and the button is called doMath. And notice that I've given myself on line 31 a paragraph tag with an idea of output and I've decided to give it some style like we've seen in previous videos. This one is color green and large font size. It's when I use this to output information about what's going on with my program. So the doMath program has a few variables, and I've simply called them x, y, and z. And you can see their values here. And then finally on my 12 I have another variable called answer. And answer is the value x * y / z. And then I'm going to output my answer here. So if you look at this you may decide that there's a problem. So take a moment to look at it and see if you can think of what might happen when I do this. So my work is already saved and I am going to return, here's the page and refresh it to make sure my changes are captured in the browser. I'm going to click the Do Math button and noticed I get enlarge 200% size green font result is infinity. Now most of the time this is not the result I would be after. But the problem here is that on line 11, my z is 0. So I have 2 times 10, which is going to be 20, divided by 0. And any number divided by 0 is going to result is an infinity answer. So, this is not really a number we can usually use or express. But now, we know there's a problem with our calculation. And we can try to modify it. So let's instead change z to 4 and we'll save this. Go back to our browser and refresh it. And this time we're going to get result is 5 which is predictable since 20 divided by 4 is 5. But let's say we've been working with this code a bit. And we moved to few things around trying to make sure everything was in order and our calculations were working the way we wanted them to, and we have our variable answer now on line 12. We have x, y, and then answer, and then of course, our z as we did a moment ago. And we'll save that, and turn here and refresh the page, and try Do Math. And this time we get result is NaN and this is JavaScript's way of telling us not a number. That's this acronym here NaN, not a number. And the reason is if we go back, because at this point on line 12 where we do the calculation, z has not been given a value. See you got a value on line 14 and we calculated answer on line 12. So by manipulating the lines, we inadvertently caused a problem. So, when you're trying to get the details of your testing worked out. It's often a good idea to give yourself someplace for the output, so you can inspect the results. Here on line 34, an alternative to this would be using an alert. Now, we looked at alerts a few other times in previous lessons, and you could output answer as part of the text of the alert. Which would pop up and give you that information. And you can decide whether you would rather have the alerts in your test or you would rather have something like this on line 34. So, probably what's on line 34 is a better approach. But the alerts are faster to do and don't require any of the setup. So finally, I want to review one other possibility here. We can very easily do something like this. Now, notice I have modified answer right here, I've made it a capital A. What do you think might happen when I run the program in this way? So first we'll take it back one step. Back to answer. And we'll get this working again by putting the z above, So now when this runs we'll have x, y, and z all well defined before we calculate an answer. We'll save this. Refresh and, as we did before, we'd get the result as 5. But now if we go back and try a little experiment. And change this to answer. And refresh your page and Do Math. Notice we're getting nothing. And you might have guessed that was going to happen, but here's the reason. JavaScript let's us establish variables whenever we want to. And it allows us to set answer here, except that this answer is lowercase and this is uppercase. So, we might wonder for awhile why this isn't working, so it's important to keep an eye on case sensitivity. One small change in a variable and we will have this kind of problem so keep an eye on this when you're doing your own programs particularly with longer variable names where it's harder to see what exactly might be the slight difference. Now in my editor I can click like this and select. And it will show me things that match. These don't match exactly, but it will help give me a clue what they are varying by. So in our next lesson, we'll be moving on to looking at additional details of HTML. And using forms in our applications.
