Suggestion: Read Sitepoint’s “The Javascript Anthology, 101 essential tips, tricks & hacks” by James Edwards and Cameron Adams. I think it will help you lots.
Ideally, no code should be there at all. To be able to use a site and include javascript behaviour you should use Event listeners. But this is advanced Javascript. So first, make it work, then get rid of it in the page.
NOTE: JQuery and Prototype are two of the thousands javascript libraries that exit around the world.
The huge problem about javascript is not javascript itself, but the Document Object Model or DOM. The Document Object Model is a group of objects that the browser manunfacturer allows you to manipulate so that you can add functionality to your site with a programming language (that is, the browser holds all the information about the page rendered and the elements in it, as well as information about the screen size, color depth or some other data that may be of interest).
You can move and change your page on the fly because this manunfacturer allowed you to by giving you a way to access to that info (again, this is the DOM).
Different browsers are created by different manunfactures therefore they have different DOMs. Some browsers keeps the information under the Window object, other under the document object (do you remember your “document.getElementById”?)… To create a program that works in all browsers is what we call a cross-browser. It manages all the differences among browsers (not an easy task)
These javascript libraries are so popular because they handle this situation. They are cross-browser libraries.
As an example, thickbox is based on JQuery library. This means that it uses JQuery set of functions, instead of using javascript directly.
NOTE2: I think that I like minishowcase better
Exactly, what do you mean by this?
Thanks for your comments…
What I mean with the prototype stuff is that if I try to replace the show command (that uses javascript : ElementByIndex) with the prototype command $(field).show() it does not work!!! It works well if I only replace the first command!!!
<area href="javascript:void(0)" onclick = "hide('fp');show('photos');show('fadePhotos')" alt="Fotos jazz: amenización, cocteles, fiesta empresa, conc;ierto" shape="poly" coords="279, 19, 285, 38, 276, 56, 298, 60, 296, 78, 253, 79, 254, 60, 266, 53, 267, 39">
I am trying to get rid of the js stuff…
The reason is that you can only have one fucntion per element and event.
SO, what can I do? I really would like to get ride of the getElementByIf stuff… but I have three commands per event!!! Could I replace the trhee commands by one js function calling the 3 prototype commands… but once again I am using JS!!!
If everything works as expected, and only then, you have to use event listeners to get the code out of the way and place it in an external .js file.
Regarding the use of JS, you are always using JS… even if you are using a JS library.
Here is a good article about it, explaining the two methods used to do this (Microsoft has its own way to do things and uses attachEvent instead of addEventListener)
http://www.quirksmode.org/js/events_advanced.html
This other article, while brief, does give a good hint about why using event listeners
http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html
Thanks a lot… I will look into those links!