|
||
|
Vol. 1, No. 8 Hello, and welcome back to the wild world of JavaScript! It's good to see that you're not the type to scare easily! You know that with a little work and learning, you'll be one humdinger of a page builder. Today, we're going to cover a couple of topics related to the JavaScript programming language. As most of you know, JavaScript is the language used within Web pages. If you aren't aware of this, or if you missed the last issue of "Handcrafted," you should read it before you get started. If you want to catch up on any of the previous issues of "Handcrafted," check out the Archive. Before you can effectively use JavaScript in your Web page building, you need to understand a couple of key related terms. As we go over them, you'll learn how to do a couple of cool things. Let's start by clearing up one common point of confusion: The difference between Java and JavaScript. Web browsers can recognize both of these languages, but they are really quite different. In fact, they are used for completely different things. Java, a programming language developed by Sun Microsystems, is designed to work on many types of computers (Macs, PCs, and just about anything else you can imagine). Using this language, a programmer can create a complex program, such as a word processor or a sophisticated game, and run it with the help of a browser. Java is a very complex and large language, used mostly by professional programmers in large businesses. You will occasionally see people use a small Java program (called an applet) for animation or site navigation on their Web page. This is pretty uncommon, and is not recommended by Webmonkeys. Starting up a Java program will crash quite a few Web browsers, so beware. Now on to JavaScript, a modest language with modest goals. JavaScript is used simply to manipulate browser windows and the items within a browser. You won't be able to program the next version of Doom — or anything else that would exist outside of the browser — in JavaScript. As you have probably guessed, this makes the language a lot easier to learn. This isn't to say that JavaScript is a walk in the park. It presents a couple of steep challenges, the most important being the infuriating amount of differences among the various browsers. When you think about it, there are a lot of browsers out there. Netscape has versions 3.0, 4.0, and 4.5 (plus a few others) for both the Mac and PC. Microsoft has 3.0, 4.0 for the Mac and PC, and now version 5.0 for PCs. Do some quick math and you'll see that there are more than ten different browsers that are currently being used with some degree of frequency. This is where the trouble starts. Each of these browsers comes with quirks and limitations for which the Web developer will need to account. Sites like Webmonkey, which use a lot of JavaScript and need to be accessible to the widest possible audience, spend a LOT of time tweaking code so that everything works in every browser. To give you an idea of what this means, let's go back to last week's example. Say you want an image to change when you move your mouse over it. You'd simply write this code, right?
<BODY> Well, not really. This code will work fine if you're using IE 4.0 or higher. But in Netscape, nothing will happen. Why, you ask? The only answer is that Netscape can't handle events (here, onMouseOver) in the <img> tag, but IE can. This is important stuff. You should always keep this in mind when you're designing your Web pages or coding JavaScript. But enough of the warnings, let's move on and talk a bit about functions. This is where the cool stuff happens. When you view the source code of almost any Web page using JavaScript, you'll notice that most of the code lives at the top of the page. If you open a Tripod member page, you'll see it — a huge hunk of code right at the very beginning. There's a very good reason for that, which we're going to explore by working through an example. Let's say you want a little alert box to pop up when the user clicks on a link. You could simply use this code:
<body> This will work just fine. The box pops up with the message you want. What happens, though, if you want something to occur after the alert box? Maybe you want to open another browser window with another URL, or maybe you want to change the way the page looks with an image swap. If you had to put that hunk of code in the middle of your page, your page would start getting mighty sloppy. If you wanted a different message for a dozen separate links, you'd have a serious mess of a page on your hands. You'd also end up writing a lot of repetitive code. That's why we use functions. Take a look at the code below. It should give you an idea of how functions work.
<head>
<body> Take a minute and actually try using the code by plugging it into an HTML document and loading it through your browser. See this code in action! Notice that when you click on one of these links, you call the "giveAlert" function. When you call this function, you pass the text within the single quotes (e.g., 'You Do Not Want to Click Here') to the function. That text is then given the variable name "thetext," which the alert box can then use. It's pretty simple stuff. If you're having trouble with it, just take a break and look more closely at the code. Now let's make things a little more complex. Let's say we want to call a different URL with a different link. No problem. Take a look at the JavaScript below:
<head>
<body> See what we've done here? We put a second value into the function, which we called "theURL." That variable is then passed to the "window.open" command. Pretty cool stuff, isn't it? Now that you know the basics of functions, most of what you'll see in the Webmonkey Code Library should make a lot more sense because everything there is in the form of a function. You can take any function you like and paste it into the top of your document. Then, all that's left to do is provide the event (such as onClick) and the values to be put into the function — you'll be able to make all kinds of JavaScript magic. HINTS, POINTERS, and TIPS o' the TRADE This first piece of advice is something you'll hear a lot from Webmonkeys: Examine the code. You'll be surprised what you can learn by simply studying a few lines of someone else's JavaScript. Remember, if you see something really cool on a Web page, you can always see how they did it. Just view source. If you're having problems and your code just won't work even though you're sure it should, do whatever is necessary to relieve the tension. Try going to a local park and screaming at the jungle gym, or whip your neighbor's mailbox with a garden hose. If Neighbor Ted questions you, just say these two simple words (quietly through your teeth): JavaScript error — he'll understand. Then come back and troubleshoot. RESOURCES: Thau's JavaScript tutorial can answer any and all JavaScript questions. Check out Webmonkey's JavaScript Code Library.
Try Thau's Advanced Tutorial,
and become a JavaScript master.
|
||
|
Subscribe/Unsubscribe
Handcrafted Archive |
