|
||
|
Vol. 1, No. 9 Hey there! Here we are with another edition of "Handcrafted," happily brought to you by Tripod and Webmonkey. We've covered some great topics so far and today's issue is going to be no exception. Before we move onto this issue's scintillating topic, you should give a careful read to the previous two newsletters to make sure you're up to speed: Okay, ready? In this edition, we'll finish up our introduction to JavaScript by showing how you can improve your page by appreciatively borrowing the work of others. Don't worry — these are completely ethical thefts. The Internet is all about the free and open exchange of ideas (and code) and, in most circumstances, there are ways to incorporate someone else's work in an acceptable manner. After all, imitation is the most sincere form of flattery. Once again, in order for today's lesson to make much sense, you need to have read the last two issues of "Handcrafted." Please do that before you move on. Alright, now that we're all on the same page, let's start this lesson. While plain HTML-and-graphics sites are all well and good, many builders like to spruce things up a bit with additional functionality. A lot of people like to include guestbooks on their sites. This guestbook requires a form. Let's say that you want to make sure that everyone who uses the form fills out every field that you provide. Now that you've recognized this need, you're ready to go looking for some JavaScript code that'll do your bidding. In this case, run on over to the Webmonkey Code Library. There you can grab the "IsFormComplete()" function. Since you already know how functions work (right?), you can incorporate this into your page in no time at all. It will go something like this: Let's say you have the following HTML page that features a simple form.
<body> All you have to do is paste the function into the heading of the page, then add an "onClick" event handler to the "Submit" button. When the code is all put together, it should look like this:
<head>
// -----------------------------------------------------------------
function IsFormComplete(FormName)
while ((x < document.forms[FormName].elements.length) && (FormOk)) // --> </script> </head>
<body> </body> Think the code looks a bit complex? Don't worry, it works! Don't believe us? Go ahead and try it. Before we go any further, however, we need to discuss one very important thing. Notice how we left the author's name, etc. in the commented-out section of the code? This gives proper credit to the function's author and the Webmonkey Code Library. By giving credit where credit's due, you're going to be just like Robin Hood: A well-mannered thief. Plain ol' thiefs, on the other hand, are severely frowned upon in the Web community. Even if they're not found out, they still generate all kinds of wicked-bad karma. So, don't keep those comments to yourself — share them with the world. With JavaScript, you can do a lot more than check for empty form fields. You can also make use of the "IsEmailValid()" function, also available in the Webmonkey Code Library. This code will make sure that people enter an address that includes an @ symbol. You can also find the perfect code for the ever-popular Image Swap. Though we love Webmonkey through and through, we'd be negligent in our Handcrafting duties if we didn't point out some non-Webmonkey JavaScript resources. Both jsworld.com and javascripts.com have pretty extensive libraries of JavaScript functions that you can see in action, and then easily toss onto your Web pages. Also, Patrick, a good friend of Webmonkey, has some specialized scripts that you might want to take a look at This is just the beginning. Try doing a search for "JavaScript Code Library" on HotBot, and you'll find links to dozens and dozens of code libraries that will allow you to accomplish just about everything imaginable! But before we close out, let's take a look at a concept that you might not even know exists. Perhaps you think that HTML is the only layout language available to many browsers. A couple of years back, a spec called Cascading Style Sheets (CSS) was created. This language is much more robust than HTML. It allows for the layering of content and very complex layouts. If you're interested (and you and your audience are using a 4.0+ browser), check out Webmonkey's excellent CSS tutorial. There's a pretty good reason you may not have heard of CSS. It was implemented in the 4.0 version of both Netscape and Internet Explorer, but both companies did a pretty poor job of it. Even worse, their implementations were radically different. Developers who wanted to make use of CSS ended up having to create different versions of their code for each browser, and then provide a third version for browsers that didn't support CSS (all browsers below 4.0). One of the promising things about CSS was that it could be combined with JavaScript to create some stunning effects. The combination of these two elements is known as dynamic HTML, "dHTML" for short. You won't see too much dHTML being used out there on the 'Net, but it is still something you can add to your pages. For an example of its use, head over to Webmonkey and take a look at the front door. If you're using a 4.0 browser, you'll see that the navigation for the site slides out from the left and covers the text underneath it. Notice the layering effect, something that can't be done using regular HTML. We won't go into the details of how or why this works, but you're welcome to steal it if you like. You can find the stripped code right here. But beware, if you're going to make use of these kinds of features, make sure you test it on every browser you can think of. Well, that about does it. You now know what it takes to create the kind of whiz-bang sites to strain browsers with the best of them. Enjoy! HINTS, POINTERS, and TIPS o' the TRADE Surf, surf, surf. Take a look at the sites that you admire, then view source. See what other folks are doing and how you can incorporate their techniques into your Web pages. If you see a piece of code that you like on someone's site, but it's not being offered (i.e., nowhere does it say "Use my code, please!"), send an e-mail to the Webmaster. Ask if you can use the code and offer to credit them in the source file. Most people will be thrilled to help you out. Cut down on salty mid-day snacks like potato chips. Carrots and celery are healthy and delicious, even without ranch dressing and caviar. Plus, they won't grease up your keyboard. RESOURCES: First of all, every site on the Web is a potential source of information. View source, view source, view source! (Is that clear yet?) If you see a function or a command that you can't quite figure out, you may want to look at the index of Webmonkey's JavaScript tutorials. If it can be done in JavaScript, you can read about it there. The ins-and-outs of Cascading Stylesheets can be learned in Mulder's Stylesheets tutorial.
If you'd like to read a bit more about dHTML, check out Taylor's
Tutorial.
|
||
|
Subscribe/Unsubscribe
Handcrafted Archive |
