Javascript - client side magic for forms, navigation, validation and now the booming 'new technology', asynchronous javaScript + XML or AJAX (AKA remote scripting, XMLHttpRequest Object).
A quick reference page for the [prototype] library to help ease the learning curve for a lot of developers out there...
One of the more useful links for people who are using the prototype.js library. I find that I either refer to the code, or to this page, depending on the level of caffeine in my system!
Here's a cool implementation of a slider widget used to resize images (this example uses the script.aculo.us library slider). This would be interesting for a photo uploading widget, where the user could upload a temporary file, resize to their liking, and then commit the image to that size using PHP+GD, for example.
A nice little tip for setting default values in Javascript. Be sure to read thru the ensuing discussion.
This article is actually an excerpt from SitePoint's new title, The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks.
Well, if it is anything like CSS: 101 essential tips, tricks and hacks, this book should be a winner for people looking for good, quick, pointed solutions to common JS necessities, and if you have hacked your way thru JavaScript this may be a worthy read to get on the right track.
This 8 page article starts from the very basics and moves into meatier things by the end, including event bubbling and event handlers among other stuff.
Please note that the links in this post are affiliate links.
I wish this was around when I was first learning Javascript! A great article on JS closures: For some reason closures seem really hard to understand when you read about them, but when you see some examples you can click to how they work (it took me a while).
An interesting solution for dealing with JavaScript events applied to a large number of elements and/or dynamically loaded elements, Event Delegation
handles a click by delegating (firing) an event depending on the case.
More JavaScript widgets, this being a library of functions for various tool tip options. While not unobtrusive (consists of inline JS), either a good place to start porting or a good place for inspiration. Covered by the artistic license.
There is a lot that can be accomplished with the likes of prototype and Script.aculo.us, and really, the more you read the more you get inspired, I think. Here's a post covering some unobtrusive and persistent JavaScript and it even gets into the CSS used in affected parts of the site.
Robert Nyman helps us to get the rendered style of a CSS element with Javascript; put another way, it allows us to use javascript to retreive the style applied to an element by an external CSS file. Be sure and read through the comments.
A "ten minute" overview of JavaScript, particularly useful for people who already know another programming language. It has an "Example Code" section at the bottom that can be printed and used as a reference sheet.
If you are doing any work with Prototype and would like something that puts it all on one space for you, Johnathan Snook has come through with this excellent set of charts that detail every method and property that is available.
Easy bookmarkets: enter your javascript code in the text area, click crunch and the code will be turned into a link, which can be used as a bookmarklet.
An excellent, comprehensive 6 page resource that will discuss and see how we can use Javascript, but still maintain accessibility
. No inline javascript here, this article focussus on the the node tree, keeping javascript separate and just doing things right.
Simon Willison gives a short explanation about closures in Javascript, and outlines a nice example of how this can be used for executing multiple onload functions using his addLoadEvent() function. Very cool.
From the project page: Sarissa is a cross-browser ECMAScript library for client side XML manipulation, including loading XML from URLs or strings, performing XSLT transformations, XPath queries and more. Supported: Gecko (Mozilla, Firefox etc), IE, KHTML (Konqueror, Safari).
An interesting unobtrusive implementation of the common JavaScript expand/collapse function. The twist?
To identify a trigger element, you add the class "trigger" to it as an attribute. This will automatically collapse the next following element in the document tree.
Well written code will help to minimise the performance impact of User JavaScripts
. With that statement, this article gets into speeding up loops, referencing elements, string matching and talks about eval, among other things. Deals with some common principles that many will have seen before, but it's worth a read.