Now to get into the cool stuff that JavaScript has to offer. First, we'll talk about some built-in functions. You've seen most of the ones we're going to talk about spread about the earlier lessons, but I'm going to explain 'em better now. They are:
alert("stuff!");
variable = prompt("Question","Default Answer");
document.writeln("Text" + variable + "text");
setTimeout(1000,alert("setTimeout activated 1 second ago!");
This stuff is fairly simple. The alert("stuff!") function makes a little popup window that "alerts" the user. It puts whatever is in the quotes in the text box. Click here to see an alert in action.
The prompt function you've seen before. It makes a popup window that takes in user input. Thus, you must set it equal to a variable in order to store that input. Using the example above, the "Question" part is what the popup box will "ask" you. The "Default Answer" part actually fills up the text box with whatever text is in it. So a prompt that looks like this: prompt("What's your name?","Anonymous") would look like this. This particular prompt isn't set equal to anything, and that's completely legal. It still makes the prompt window and stuff.
Now document.writeln(). Why is that document there? Next lesson, grasshopper. All you need to know here is to put it there. This goes in the actual JavaScript <script>; tags, and you can't dynamically do it after the page has loaded - it has to be done as the page loads. But it is still invaluable, if only as a space saving device. When you use it, keep in mind that the browser looks at it as if it were just another line of HTML code. The browser looks at everything IN THE QUOTES as if it were just another line of HTML, so you can toss any HTML tags that strike your fancy in there. But as you can see above, you can input variables in there too. Just add everything together. Text that isn't in quotes is assumed to be a variable. If the variable doesn't exist yet, it won't even print the line (or any line after it, for that matter). If it is exists but has no value yet, it will put "undefined" where the variable appears in the text.
Finally, we have setTimeout(). This gives you the power to annoy the bloody hell out of people, or do some pretty spiffy stuff. What it does is wait x milliseconds and then performs the given code. In the above example, it waits 500 milliseconds and then gives you an alert. Just so you know, 1,000 milliseconds = 1 second. One very cool thing you can do is make a function that calls setTimeout() and then have setTimeout call that function. That way you'll have a function that is called every so many milliseconds for the whole time the page is open. I'll bet with that you can see how it can be used maliciously. But you don't know the half of it. And I'm not going to tell you the half you don't know - but I will give you all of the individual pieces. God help us all if you figure it out and decide to use it...
Now lets get into some link events. There are a bunch of them that I know of, but for now, just these two. onClick and onMouseover. You've already seen the onClick event in action - it is in the links that showed you the prompt and the alert. onMouseover does the same thing. Except it does it on mouse over. So it's used like this: You make your link, and in the href part you simply put # - this makes the page stay on the current page. Then you use onClick or onMouseover as any other modifier, except this modifier's value is JavaScript code. For example, onClick="alert('You clicked on me!');return false;". You enter the code exactly like you would in the javascript tags, except without the line breaks. And at the end of it all, put "return false;". This stops the page from reloading. If there are quotes in the code, you have to use ' rather than ", as you can see in that example.
And here is onMouseover. onMouseover="alert('Don't hover over me!');" does this: Hover here. To make the page not reload when you CLICK the link, just put in onClick="return false;" into the tag as well. Also notice that the apostrophe in "Don't" has a \ before it. That tells the script to display it; not treat it as part of the code. This works with many symbols that are normally treated as code in JavaScript.
With both of these events, you can put a ton of code in the actual event itself, or you could make a function and just call that function from the event. That is much cleaner and much easier to debug. Just declare the function in the header and call away! Another neat trick is to make your anchor tag have no href. This makes the text completely normal. For example, click here to see a hidden link with no href in action. It also works the same way with onMouseover. With this, you don't need that "return false;" because there is no href to try to reload the page. To set the link apart, just use the font tag to format it differently. Make it a header, or hide it to surprise the unsuspecting web surfer. Anything goes!