Prototype for the Proto-programmer
Posted by Tim Freund Tue, 06 Jun 2006 04:05:00 GMT
So you’re a web designer afraid of a little code? Or maybe you really are a developer, but there are some static pages that need a little dynamic boost. The Prototype JavaScript library enables dynamic behavior in pages created by those of you who don’t think you can code as well as those of you who aren’t allowed to code. Perhaps a case study is in order:
Zack runs a website for a shelter that finds homes for older dogs dogs. Dogs whose owners are "moving", or who ran away from home, and even the seldom seen blind seeing eye dog. Don’t worry, the blind seeing eye dogs are obviously retired. It is tough to place these animals in a caring home since so many people would prefer to spend hundreds of dollars on a pedigreed animal, complete with a lifetime of bad hips and an increased likelihood of tumors, but Zack and the crew at Red Rover Rescue carry on. At least once a week they take an assortment of animals out to local events and pet stores, hoping that some kind soul will take Miss Growlypants home. It is very helpful to have a calendar of events on their home page so that volunteers and potential adopters alike know when and where the dogs will be out.
Zack knows HTML, CSS, and a little bit of JavaScript. He has access to pre-installed calendar programs, but he doesn’t know how to marry his dynamic calendar with his oh so static shelter web page.
Can we help Zack? Of course we can, otherwise this would be the lamest tutorial in the world. There is a popular JavaScript library called Prototype. Prototype wraps up a lot of inconsistencies among different web browsers and makes accomplishing some rather dynamic stuff with JavaScript quite simple. Among it’s many tricks, Prototype can load files and call programs on the server into the current page. That’s just what Zack needs. Zack does the following to make things work:
- Downloads the Prototype library and puts the prototype.js file in his javascripts directory
- Inserts the following line into the HEAD section of his HTML file to load the library:
<script src="./javascripts/prototype.js" type="text/javascript"></script>
The Prototype is nice, but it isn’t quite magic. Zach still needs to write a little bit of JavaScript to glue everything together. He wants the calendar loaded when the page loads, so he writes the following function:
// the first argument is the name of the div where the results of the remote call will end up
// the second argument is the url to retrieve
// we'll talk about the third argument in a later lesson
function loadFirstTarget(){
new Ajax.Updater('firsttarget', './lesson01-calendar.html', {asyhnchronous:true, method:"GET"});
}
Noting that the Ajax.Updater will look for a div with the id ‘firsttarget’, Zack adds one to his page where he wants the calendar to appear:
<div class="target" id="firsttarget"></div>
Zack then changes the body element of his page to have an onload attribute:
<body onload="loadFirstTarget();">
There’s one other thing—Zack wants people to be able to click a button to see the dog of the month. He adds another function to the page:
function loadSecondTarget(){
new Ajax.Updater('secondtarget', '/lesson01-dotm.html', {asyncrhronous:true, method:"GET"});
}
And then he creates a form with a single button that fires loadSecondTarget() as well as the ‘secondtarget’ div:
<form> <input type="button" value="See the Dog of the Month!" onclick="loadSecondTarget();"> </form> <div class="target" id="secondtarget"></div>
At this point, you probably want to see the whole thing in action.
To recap, let’s put you in Zack’s shoes. If the following fits your situation then you just learned a new trick that you can apply to your site today:
- You have a pretty static website.
- You have some dynamic web applications like a calendar or some forums.
- You’d like to take some of the content from the dynamic bits and put them in the static bits, but you don’t want to turn the static bits dynamic with a bunch of programming.
- JavaScript doesn’t scare you.
If that’s the case, you should roll up your sleeves and implement the technique outlined in this tutorial, if you haven’t done so already.
So what do you think? Leave a comment to let me know how it works out for you. You can also contact me directly if you’d like to talk about work that needs to be done on your own site that you’d rather not do yourself.
