Viewers: in countries Watching now:
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions
One of the things you'll often see programmers do is when they are typing, say, if statements, they will actually type the opening and closing parentheses and the opening and closing curly braces before they then go back and start filling the things out, just to make sure that they are not messing it up. Now if I have code and there is a problem with this code here, over in Firebug it's actually saying that I've got a missing colon after property id. Now that message itself might not be very helpful, but when you do see messages that don't appear to make sense, you just need to start looking at your code.
Now, that's the message Firebug would give me. If you're using the Developer tools in any of the different browsers, they will often give you a different message. What I'm missing here is the closing parentheses after myFunction name. I am going to save that, go back in and refresh the page. Now I've got an unterminated string literal, and it is complaining about a particular line. If I even click the line, it would take me straight to that. What it appears to be there is another syntax error. I don't have the closing double quote. I'm going to go back and drop that one in, save that, back over into Firefox, refresh the page, and I actually get the normal log message, which was what I was hoping for.
But even after your syntax is correct and it's understood by the browser, there are still millions of mistakes that can happen. Now let's go through some common ones here. So I'm going to just comment this code out, because we've solved that one, and talk about possibly one of the most common situations here. You create a function called, in this case, myFunction, and you call it, or so you think. If I save this code, I go back into the browser and refresh it saying, myfunction is not defined.
In this case, this wouldn't work. If I save this, refresh this, I'll get a slightly different message: document.getElementByID is not a function. And you might be sitting and thinking, "Of course, it is. I've used it a hundred times." But of course, case sensitivity here, the D at the end of getElementByID should be lowercase. It's giving you a slightly different message here, because this is considered a method of an object rather than a function. Again, depending on what browser you're using, you may even see different messages for that.
The equivalent of that with your own code might be that you say create an array, such as I'm doing here on line 29, and I'm trying to call one of the object methods here called reverse, but I spelled it incorrectly, and we're going to get that equivalent there: myArray.revers is not a function--which is of course true. So comment goes back out and moving on. Now couple of situations we've talked about before. One is if you're creating a variable and calling document.getElementById, but there is any chance that actual part of the page hasn't loaded yet, you'll only have an undefined variable here.
This won't actually cause an error. Your code just won't work the way you expect it to, and that happens more and more as you get better with your code. You're not going to get those very obvious errors about functions not existing; it's just not going to work. Classic situation, of course, being this one. On line 41, I create a variable, a = 10, line 42 var b = 20, and then I have an if statement=, if (a = b), or so I think. Now in this case, I think a should never be equal to b, but I'm doing the assignment instead of equality.
So in my own mind I would never expect this message to come out, but of course this is exactly what's going to happen. Now notice there is no error message in Firebug, because technically the syntax is correct. But I'm getting this console.log, that "Something is wrong with the universe," because we're doing assignment instead of equality. We're setting a = b here, not checking a = b. A mistake that all programmers in C-based languages will run into once in a while. We'll change that, swap back over and I should have the message, "This is what I expect!" which of course it is.
Save that, jump back over into the browser. Now, this is not an error. All that I'm doing is writing out the contents of that variable, which is technically not a number. But I'm not getting any problem in the status bar. It's just an unexpected result, not an error, and those are two very different things. And of course this is because I am allowed to call a function passing in less parameters than it was defined with. What's happening here is that c would be accepted as undefined.
Then the code tries to add three together. If you are try and add an undefined variable together, that doesn't make sense, so the result is not a number. Now, there are of course a million ways your code can fail, but looking out for these basic situations will clear up a lot of those core issues.