So, one of the first things I always like to do when I am programming is how to get a debug statement. Okay? And the alert() takes as a parameter, a single string, and it prints it out. So here's a very simple bit of JavaScript. The browser sort of runs this and it stops. And depending on your browser, it may actually stop when in the middle while the page is still displaying. So let's take a look at this particular one. Let me clear this and go and run this one. Here's the sample code. Run this first one where you saw that one, make this just a little bigger here. And you see this little thing is still spinning. Right over here, it's still spinning. And that's because it's sort of still processing the page, and the alert has actually completely stopped the JavaScript. So the thing is going to happen right after the alert, won't happen until I press OK and then it finishes. Okay? So the alert stops right now, and it's really stopping the interpretation of this page. So alert doesn't just print out output, but it stops JavaScript processing. So it's a pretty strong form of debugging, if that makes any sense. So alert is just an executable statement. There are three ways that you can put JavaScript into a document. One is inline within the document using a script tag. You can also put it on things like onclick methods on things like hrefs, et cetera, or you can include a whole file. See all of these examples. So this is some code that we've sort of been playing with all along, but now it is time to sort of understand what's going on here. So this is an anchor tag that is this tag right here, and we have an onclick method. So this is within the anchor tag creates, and it says when someone clicks on this anchor tag, I want to run this JavaScript right here. So the bit in between double quotes is JavaScript. And JavaScript can use single quotes or double quotes of strings. So we tend to reserve the double quotes for HTML. So onclick="something" That's HTML. And then 'Hi', single quotes, in this case, is some JavaScript, and we're calling alert. Now, return false has to do with, normally, if you were to click on an href, it would actually follow that link. Okay? But if you say return false, it won't follow link. Just run this code and not follow the link. Okay? So, let's take a look at that one. So if I click, it's going to actually run the JavaScript rather than doing what it normally would do. And if you recall, it would go to js-01.htm, but it's not going to because we did the return false. Okay? So return false is the way to indicate that we don't actually want to do what normally would have happened if the click happened. So you can do both the onclick method and then let the tag do what it normally would do, or you can say, "I'm taking over and doing that." So this is just one form. We're putting JavaScript right on a tag. So here's another way to do it. And so this, when we show before, where we just did a script tag and an end script tag and then had document right. You might see something like this on HTML5. We tend not to do this, but this is validation to make sure that the JavaScript passes a strict HTML 4.0 validation. But that's less important as we're moving to HTML5. So we talked about this one. And then the third way to do this is to actually use the same script tag and say, "I would like to load this file." And this then script.js has to be a file that has some content in it. And in this case, we just have one line of JavaScript. We don't have a script tag. It's just JavaScript itself. It knows that it's JavaScript by the fact that we're inlining it. And so that's as if we typed all that stuff here. Now, this is kind of a silly little example. It actually just moves that document right into the file, but that's another form of including JavaScript that you will commonly see. So syntax errors in JavaScript are a little bit different. I mean, we can make mistakes, it's a programming language, but the problem is that most of the time you're using a JavaScript page that you did not write, and you're just using Twitter. And if there's a JavaScript error in a Twitter page, you, as the Twitter user, it doesn't do much good for you to be told that there's a JavaScript error because you can't fix it. Syntax error, missing semi-colon, who knows what it's going to be? So the browsers tend to be very, very silent about any kind of a JavaScript error, but the code dies. Sometimes, there's a little red icon that shows up in the lower left hand corner. So here's just an example of a bit of bad JavaScript where we're just going to have a double quote that starts and ends in a single quote. So that's a syntax error. And what we will see is that this will run, it will die here, so this code doesn't finish, but then it actually gives up on that script block and then continues, and you'll see that this one will run later. Okay? So let's go ahead and show this, js-05. So it did not tell us anything about that first syntax error, but it didn't run that second alert. And then it actually finishes. Okay? So like I said, the end user is really not supposed to see the error, but we, as a developer, need to look for errors. And so as we're writing JavaScript, you instinctively, something won't work, you make a change and it won't work and your brain's got to go like, "Oh wait, wait, wait, I made an error. I've got to actually explicitly look for it." And so there are developer modes in all of these browsers. I'll play with the Chrome one here. So let's take a look at how you turn on developer mode. Sometimes you have to enable this little message to just show up. But at the end of the day, I can like to view JavaScript console, and I'm going to hit refresh, and you will sort of see what's going on here. It runs, but I see the error, and I can even click right here, and I can see the exact place that the error happens. So increasingly, these browsers all have nice debugger modes in them, and I just popped up a debugger, and it's got this little thing, and I can look at the console. I can look at the code and go back and forth. And so this is a useful thing, and you, as a developer, you'll tend to often just leave this sitting down here at the bottom when you're working on code all the time, where it's like, "I just leave this on all the time." You'd kind of do it with console, and you run it, and you see something like, "Oh wait, wait, wait, wait." And then you know how to go look for that error. Okay? So that's very important because there's no good way to see these things, unless you've got this console turned on. Sometimes your browser will say go look up JavaScript errors, but it really wants to hide these from end users. You, as the developer, the website have to get the stuff right. So alert is kind of a blunt instrument, in that, it stops running the code, and sometimes you have a loop or something, you want to put some debugging in it. And so these debuggers have added a console.log method, and you can pass in a string, and you can console.log all kinds of stuff. And so basically, what you can do with a debugger turned on is, you say console.log and it'll come out in the log. And so this same console.log that we were seeing allows you to see things, and it just runs. So that console.log is a very useful thing, and it allows you to even inside of a loop or inside of an event or an onclick method to be logging stuff without stopping. If you do an alert, it stops. But if you do a console.log, it just streams by in the debugger window. And if you don't, the end user doesn't see this, only developers might see it. So I tend in some of my sites, you can go look at them, and you'll see the consoles talking. And you can see a play by play of what's going on inside of one of my sites. Now, depending on the browser, the console object may or may not always be there. Sometimes it's there when the debugger is on. Sometimes it's not there when the debugger is off. So my favorite thing to do is, whenever I'm going to do a console.log, I say window.console which won't cause an error, &&. So that means that if a console exists, then I will call console.log. This is just a real succinct way of saying that window.console and console.log. Another way to do it, you can look up all kinds of ways to deal with console.log. This is my preferred way to do it, but if the console function doesn't exist, console variable doesn't exist, it sort of sets that up and sets a log function. But this is my favorite way to do that. So the debugger, as we mentioned, is a great tool for debugging JavaScript. You can pause the debugger. So let me show you how to do that. Let me go back. You can pause code. Sorry, got to clear that. Pause code. So here's js-01, right? And I can look at the source, and I can put a breakpoint here by clicking right there. So I now have a breakpoint at that point. Now, the page is already run. So once I set the breakpoint, I've got to hit refresh once to load the page. Now that knows where the breakpoint is supposed to be, it'll run up and stop at the breakpoint. Okay? And so now, it is paused in the debugger. You can see this pause in the debugger. You see this little spinny guy, meaning the page isn't done loading yet because we've stopped it and we can look at variables and global variables. There's all kinds of stuff that we can look at, Document Object Model, all kinds of things. And I just click right here to continue the debugger. And so the page completes. Now that's a very, very, very simple introduction to using the JavaScript debugger, but it is very, very valuable and you'll get used to how this all works after awhile.
