Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now, when you do this it's going to complain about a lot. JSLint will point out every little thing you do that isn't perfect, from the amount of whitespace you use between your operators, to how many characters you indent your code, to whether you declare all your variables using var, whether you are declaring your functions before you use them, and a thousand other things. I can see that just with this little amount of code I have got a whole bunch of problems here. Now these errors have nothing to do with whether or not your code actually works.
It might work just fine and JSLint will still complain about a hundred different things in 10 lines of code. This is quite similar that if you take a web page that you know works perfectly well and run it through a formal HTML and CSS validator, you're typically going to find a bunch of things that technically aren't valid. It's kind of the same thing here. And as with HTML and CSS validation, if you take the time and fix all those little things, it will make your code better, but there are a couple of features to be aware of, so to not get frustrated.
Now I could do this in a couple of ways. If I actually added inside my functions just a line, say here, that was "use strict" inside double quotes, and just ended with a semicolon. It looks little strange here because we are just putting in a string, and that's intentional, because ECMAScript 3 doesn't really understand this, and all it's going to see here is a string literal and just ignore it. But the very up-to-date browsers actually do recognize this as trying to enforce Strict mode.
However, if I click JSLint, what I will see is okay, our first error is gone, but if I go down a little bit, I'll probably find it somewhere else. There we go, Missing 'use strict' statement, if I didn't add that to all my functions. Well, if I know what it's complaining about, what I can do is come down towards the bottom of JSLint and here I find a whole bunch of options that I can check to allow JSLint to tolerate certain things. And one of them is the Tolerate missing 'use strict' pragma that use strict instruction.
So back down to the Options, and I'm checking the one on the left here that says Assume a browser. We run JSLint again. We've gotten passed that issue, but we still got problems. This next one here, Expected 'intervalHandle' at column 5, not column 1. Well, what does that mean? Here it's literally just complaining about the correct level of indentation. If you see that this line beginning intervalHandle equals is inside our function, but it's not indented the same way that the rest are. It should be indented with four spaces.
That's what JSLint likes. So if I do that, we run JSLint again, and we go on. Now quite similar to that, what you'll see is there is a lot of complaints here, missing space between comma and number. It likes us to leave a space after the comma between parameters. Again, we don't have to. This is not going to change how the code works, but it's got its own set of presentational rules. Missing space between current position and the plus equal sign. What it's complaining about there are, for example, things like this line here, where it lacks a single space around the operators.
Now what you'll often find is that JSLint will complain about a lot of this, so one of the other options I could do, if I don't want to fix everything right now, is I could allow it to tolerate messy whitespace. So I am going to go back and run it again. Well, we are getting smaller here. Problem at line 13 character 34, animate box was used before it was defined. What does that mean? Well, we are calling this setInterval function passing in animateBox. The issue is is the function animateBox isn't defined to later on in the code.
Again, while this will work, best practices say that our function should be defined before we write code that use them. So this function animateBox should be defined before I use it in an argument. So what I am going to do is cut the entire function, and I just take it up and paste it in here, and then we run JSLint again, and we're getting okay there, we are getting down. Next one, it's saying, Type confusion, number and string, and the line it's complaining about is this, where we are actually concatenating a number, which is current position, and the string px.
Well, in fact, I know this is okay. This is what I want to do. I am actually trying to create a string that says 200 PX or 300 PX, so I am absolutely fine that that happens. So I need to also go and tell it down here to tolerate type confusion. JSLint. I could just ignore that as well. And now finally, we have something here Problem at line 21, character 9: something was used before it was defined, and this I just added so we could actually see a problem here.
And the problem is that I just start using a variable, something = something +1. Well, this should really have been defined somewhere else with the term var, but it hasn't been defined probably. So I could either delete the line that says something = something + 1, or I could go and define the variable up towards the top, so it's accessible there, or even somewhere else in the function. And then we have no errors. But as you can see, JSLint will always complain about your code, so try not to be too upset when it complains about every single line that you've written.
Get unlimited access to all courses for just $25/month.Become a member