| Lycos.com | Angelfire.com | WhoWhere.com | MailCity.com | Hotwired.com | HotBot.com | All Sites... |
|
|
|||
 |
Handcrafted Tripod's Better Builders Newsletter Vol. 1, No. 7 So far, we've covered some pretty neat things in these newsletters. If you've been reading faithfully, you now know how to make a basic page, throw in some tables, create images, and place those images creatively on your page. If you've missed any of this, you can get up to speed in the "Handcrafted" Archives. Now the fun really begins, as we leave the familiar domain of HTML, and make our first foray into the world of programming. Fasten your seatbelts! |
|
||
|
TODAY'S LESSON: An Introduction to JavaScript You already know a bunch of HTML by now. In fact, you know how to build a Web page that looks pretty darn good. There are probably some things that you've seen on other sites that can't be accomplished with HTML. For instance, no amount of HTML can prompt the little Tripod pop-up window to appear every time you visit a member page. You also need something extra to create those fancy graphics you may have noticed in the Tripod Build section — the ones that change when your mouse rolls over them. These bells and whistles — and a whole lot more — are created by using the Web programming language known as JavaScript. Now, some of you may be tempted to get up and run screaming from the room at the very mention of programming. You've heard that programming is something only for the socially-inept engineers and other brainy folks whose lives consist of little more than writing code and finding creative ways to spend the gazillions of dollars they make. The truth of the matter is, the kind of programming you use to make Web pages isn't all that difficult. Yeah, it might seem a bit intimidating, and at times it can be really frustrating. But really, JavaScript is not that hard. One of the coolest things about JavaScript is that you'll rarely, if ever, have to write your own code. There are a bunch of code libraries scattered all over the Web where you can pick up a pre-written script for just about anything you'd need. Before you run off to the Webmonkey JavaScript code library, there are few things you need to know. In the next couple newsletters, we'll be doing our best to teach you enough JavaScript to get by. You may not be a world-class coder in a month, but you'll be able to find code with the best of them. More importantly, you'll know how to make that code do what you want. By the end of this lesson, you'll even know how to create a fine trick known as an image swap — when users roll their mouse over your image, it will change to another one. Before we get to that, we should discuss two concepts common to every programming language you're likely to run into: Events and objects. Events are easy to understand. As a savvy computer user, you may not know them by name but you have experienced their magic. You know that when you click on the "Send" button in your e-mail program, something happens — your mail is shipped out. Or, if you double-click on the Netscape icon on your desktop, the computer jumps into action — it launches a Netscape browser. These are two classic examples of events. Some programmer somewhere has written code that says, "Hey computer, if that Send button is hit, send the mail over the Internet, then close the letter and put it in the Out box." None of this will happen until the event (the actual click or rollover) occurs. As you've probably guessed, JavaScript also has events. You can use them to specify the action or actions that will be put in motion when something is clicked or double-clicked. You can also tell your browser that some process is to be launched when the mouse rolls over a specific portion of a page. You can even make something happen when the mouse is moved off of a portion of a page. Pretty cool, eh? We will use these events a bit later on when we create an image swap. First, we need to cover a concept that can be a bit trickier. We need to talk about objects. Let's start with the obvious question: What is an object? When we're talking about Web-site building, we're concerned with one object — the Web page. The Web page as a whole has been given a specific object name — the document. A Web page is referred to as the document object. No problem. Right? Now let's step it up a bit. We know that Web pages have lots of stuff inside of them. There are all kinds of HTML tags, text, and images. For now, let's concentrate on graphics. Each graphic on your page is also an object. It is an object within the document object. Check out the following code for a Web page:
<BODY> There are two objects to worry about here: One is the document (the entire body); the second is the image within that document ("your_image.gif"). Now that you know a little about events and objects, we're ready to move out of the realm of theory and put some of this knowledge into practice. Let's start by creating a very simple page with one image. (Notice the name of the image.) Use the following HTML:
<BODY> (See this code in action.) Now the image object is named "the_image" inside of the document object. If you would like the source of that object ("sky.gif") to change (i.e., the image to change) when you roll the mouse over it, you can use this code:
<BODY> (See this code in action.) The image will change from "sky.gif" to "sun.gif" when your mouse rolls over the image. You have to put the JavaScript in an A HREF tag (a link tag) around the image tag in order for the code to work when someone rolls the image. There you go! Nice, short, and simple. To make sure you know what's going on here, let's break it down. We start the JavaScript in the A HREF tag which wraps around the image. The first part of the code specifies the event, in this case onMouseOver. The code after the first "=" indicates the object we are working with. In this case, it's an object named "the_image" in a document. The code after the second "=" is what the image (that you'll put in the following IMG SRC tag) will change to and remain. The statement finishes up with the initial image that will change. In this code the image will change from "sky.gif" to "sun.gif." If you want to use this code, just replace the two images with some of your own! Wanna add one more feature to make this even slicker? See if you can guess what this code does:
<BODY> (See this code in action.) If you move your mouse over the image, it will change to from "sky.gif" to "sun.gif." If you move off the image, it will switch back to "sky.gif." You know this stuff backwards and forwards, don't you? Cool. We'll be back in two weeks to tell you about some more groovy JavaScript tricks that'll really wow your visitors! HINTS, POINTERS, and TIPS o' the TRADE My first tip is simply this: Be patient. Writing code can be a lot of fun, and when things start working you'll get a wonderful feeling of satisfaction. There will also be times of unbelievable frustration. You'll want to throw your computer out the window. Don't. Remember, this is going to take time. Second, I'd like to implore each and every one of you to avoid wearing white socks with black, grey, or tan shoes. It just looks weird. RESOURCES: Try Thau's incredible JavaScript tutorial. Check out Webmonkey's JavaScript Code Library. See another take on the Image Rollover. Find out more about the Document Object Model. |
||||
|
||||
|
Get Tripod in:
United Kingdom -
Italy -
Germany -
France -
Spain -
Netherlands Korea - Peru - Americas - Mexico - Venezuela - Chile - Brasil |
||
|
All rights reserved. |
||
