JavaScript Tutorials

  • SnackJS: A Tiny-But-Tasty JavaScript Framework

    moo4q creator Ryan Florence and I generally agree on most JavaScript-related topics, one of which is that most JavaScript frameworks, jQuery, MooTools, and Dojo included, are much more feature-rich (and thus larger) than most websites need.  You wouldn't build a corporate or enterprise-level website without an expansive JavaScript framework, but many smaller scale websites simply don't need the heft.  Enter Florence's new JavaScript framework, SnackJS — a JavaScript framework that provides only the functionality that most smaller websites need — and in only 3KB! (minified and gzipped)

  • MooTools History Plugin

    One of the reasons I love AJAX technology so much is because it allows us to avoid unnecessary page loads.  Why download the header, footer, and other static data multiple times if that specific data never changes?  It's a waste of time, processing, and bandwidth.  Unfortunately, at this point in the web, constant refreshes are the norm — but they don't have to be.  Christoph Pojer, a MooTools Core Developer, has added History to his PojerTools PowerTools library.  History replaces traditional same-site URL loading by providing a method to catch link clicks, load page content via AJAX (Mootools' Request.HTML class), modify the document's location object to keep "history" records, and re-evaluate content links to allow developers to create a fast, efficient one-page website.

  • Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My mobile app connects to numerous social network APIs, some of which only provide an XML response.  My mini "framework" uses JSON to dynamically create widgets so I've needed a way to turn XML into JSON.  I found many solutions but none of them worked.  After tweaking an existing function, I've found a solution that works great.

  • Hide the Address Bar within Mobile Web Applications

    With both iOS and Android-driven devices using WebKit as their browser's rendering engine, web developers have many advantages:

  • Validate Credit Cards with JavaScript

    We all know that JavaScript shouldn't be a web form's only method of validation but client side validation does prevent unnecessary server side processing when user input is obviously invalid.  I'd also consider client side form validation a usability booster (...or nightmare when done poorly.)  I often hear developers complain about how difficult validating credit cards can be, especially when only supporting specific credit cards.  Luckily the Dojo Toolkit includes dojox.validate.creditCard, a resource capable of efficiently validating a credit card.  Better yet, you can easily take its logic and create you own validator.

  • Event Delegation with MooTools, Dojo, and jQuery

    I've covered the ins and outs of event delegation within JavaScript a few weeks ago but most developers utilize JavaScript frameworks so I thought I'd take a few moments to show you how to implement this wonderful event strategy with the MooTools, Dojo, and jQuery JavaScript frameworks.

  • How JavaScript Event Delegation Works

    One of the hot methodologies in the JavaScript world is event delegation, and for good reason.  Event delegation allows you to avoid adding event listeners to specific nodes;  instead, the event listener is added to one parent.  That event listener analyzes bubbled events to find a match on child elements.  The base concept is fairly simple but many people don't understand just how event delegation works.  Let me explain the how event delegation works and provide pure JavaScript example of basic event delegation.

  • Android Detection with JavaScript or PHP

    I've noticed that two of my blog posts continue to get more popular each week:  iPad Detection with JavaScript or PHP and iPhone and iPad detection with JavaScript or PHP. What's obvious is that Android development is a hot topic that will only grow.  Here are a few methods by which you can detect iOS' main competitor:  Android.

  • Translate Content with the Google Translate API and JavaScript

    Note:  For this tutorial, I'm using version1 of the Google Translate API.  A newer REST-based version is available.

  • window.postMessage Tip: Child-To-Parent Communication

    I wrote a super epic post a few months back about the window.postMessage API that's sweeping the nation.  window.postMessage allows you to send messages not only across frames (regular frame or iframe) but also across domains.  My post showed interaction from parent to child and back to the parent, but didn't detail passing messages from a child to a parent without the parent initializing the conversation.  Let me show you how you can initialize that conversation from child to parent