Quick guide to somewhat advanced JavaScript

If you are a web developer and come from the same place I do, you have probably used quite a bit of Javascript in your web pages, mostly as UI glue.

Until recently, I knew that Javascript had more OO capabilities than I was employing, but I did not feel like I needed to use it. As the browsers started to support a more standardized featureset of Javascript and the DOM, it became viable to write more complex and functional code to run on the client. That helped giving birth to the AJAX phenomena.

As we all start to learn what it takes to write our cool, AJAXy applications, we begin to notice that the Javascript we used to know was really just the tip of the iceberg. We now see Javascript being used beyond simple UI chores like input validation and frivolous tasks. The client code now is far more advanced and layered, much like a real desktop application or a client-server thick client. We see class libraries, object models, hierarchies, patterns, and many other things we got used to seeing only in our server side code.

In many ways we can say that suddenly the bar was put much higher than before. It takes a heck lot more proficiency to write applications for the new Web and we need to improve our Javascript skills to get there. If you try to use many of the existing javascript libraries out there, like Prototype.js, Scriptaculous, moo.fx, Behaviour, YUI, etc you’ll eventually find yourself reading the JS code. Maybe because you want to learn how they do it, or because you’re curious, or more often because that’s the only way to figure out how to use it, since documentation does not seem to be highly regarded with most of these libraries. Whatever the case may be, you’ll face some kung-fu techniques that will be foreign and scary if you haven’t seen anything like that before.

The purpose of this article is precisely explaining the types of constructs that many of us are not familiar with yet.

We are X3 Studios / Show All

Interactive Experiences: Microsites, visual experiences, games, advert games, portals, web standard compliant websites, web 2.0 sites, online & desktop application interfaces, e-learning modules, multimedia CDs, multimedia presentations, DVD menus, interactive kiosks

Architectural Vizualizations: Virtual tours, floorplan vizualizations, photorealistic interior and exterior renderings, virtual ambiental design, tradeshow digital materials, interactive 3D architectural applications

Branding & Print: Naming, logos & logotypes, brand manual development, corporate ID packages, collateral sales materials, posters, packaging, CD/DVD covers and booklets

45+ Fresh Out of the oven jQuery Plugins | Noupe

Coda-Slider 1.1.1

Easiest Tooltip and Image Preview Using jQuery | Css Globe

What this script does is adds an element to the body when you roll over a certain object. That element’s appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.

jQuery Flash Plugin

Simple, but powerful.

Specify what you need, and nothing more — sensible defaults take care of the rest.

$(’#hello’).flash({
src: ‘hello.swf’,
width: 320,
height: 240
});

Perform sophisticated replacements by passing a custom callback.

$(’.custom’).flash(null, null, function(htmlOptions){
// do stuff
});

Overwrite the defaults to always to meet your needs.

$.fn.flash.replace = function(htmlOptions) {
// always do stuff
};

Javascript Minifier tool - Digital Overload

Simply browse for the Javascript file you want to minify and then hit the “Minify my Javascript” button. Your minified file will be returned with “-minified” appended to the filename. You can also choose whether to output as a file download or in to a textarea on the page.

Panic - Coda - One-Window Web Development for Mac OS X

So, we code web sites by hand. And one day, it hit us: our web workflow was wonky. We’d have our text editor open, with Transmit open to save files to the server. We’d be previewing in Safari, running queries in Terminal, using a CSS editor, and reading references on the web. “This could be easier,” we realized. “And much cooler.”

flot - Google Code

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.

The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming.

Although Flot is easy to use, it is also advanced enough to be suitable for Web 2.0 data mining/business intelligence purposes which is its original application.

The plugin is targeting all newer browsers. If you find a problem, please report it. Drawing is done with the tag introduced by Safari and now available on all major browsers, except Internet Explorer where the excanvas Javascript emulation helper is used.

DHTML Slider

DHTML Slider
The CARPE Slider 1.5
BY TOM HERMANSSON SNICKARS
This cross-browser slider is easy to incorporate in your web site. It’s designed with a combination of (X)HTML, Cascading Style Sheets (CSS) and JavaScript. They are fast and compact. They do not contain any image elements or applets. This minimizes the number of server requests and keeps the page size to a minimum. The sliders below uses the default stylesheet, except for the colors. They differ a little in funtionality though. The slider is a good alternative to the text input tag in (X)HTML, when the expected value is limited to a certain interval and/or when only a limited number of values in the interval are allowed. Adding a slider is as easy as adding an HTML element. Settings are easy to modify with a few attributes of the slider element. No javascript is needed within the document body. The slider can be styled with Cascading Style Sheets CSS (inline, in the document head or in a separate file).