JavaScript

Covers JavaScript, the most popular browser scripting language, and some clever tips & tricks.

Make a Rotatable 3D Product Boxshot with Three.js

14 November 2019 / 9 Comments

[This article was originally published on 12 August 2011. It was updated on 14 November 2019 to cover the latest version of Three.js and add mobile support.]

To say that JavaScript has come a long way in recent years is a bit of an understatement. At the turn of the century we were using it mainly for validating forms and opening annoying pop-up windows. These days, JavaScript can play HTML5 video and audio; generate richly-detailed graphics on the fly; query a mobile device to display its location; and even make a web server.

One area where JavaScript has improved in leaps and bounds is 3D graphics. Ten years ago, the idea of smooth, real-time, realistic 3D graphics running inside a web browser seemed out of this world. Nowadays it’s becoming commonplace, thanks to modern browsers supporting both the canvas element and WebGL, a library that adds hardware-accelerated, OpenGL-like 3D graphics capabilities to the browser.

Building on top of these layers, some enterprising folks have built JavaScript libraries that make it easy for the average coder — that is, someone without a degree in computer graphics — to create realistic, animated 3D scenes, right in the browser. This is opening up a world of possibilities for online games, interactive videos, web apps, and much more.

Once such library that’s gained a lot of traction is Mr. doob’s Three.js. This library gives you all you need to create complex 3D scenes in the browser, using nothing but JavaScript.

While Three.js is relatively easy to use, it can still be daunting if you’re not familiar with the concepts involved in computer-generated imagery. In this tutorial, you’ll get a gentle introduction to Three.js’s basic features, and learn how to put them to practical use by creating a rotatable 3D boxshot scene.

jQuery Mobile 1.4: Cleaner, Faster and More Powerful

13 January 2014 / 2 Comments

jQuery Mobile is a great JavaScript framework that’s designed to help you build mobile web apps and mobile-friendly websites quickly and easily. The latest version, 1.4, came out last month, and it represents a big step forward for the framework.

In this article you’ll get an overview of the changes and improvements in 1.4, and learn how to apply some of these techniques to your own websites and web apps. You’ll look at:

The performance improvements in 1.4 that result in a smoother, faster experience for users
The new, simpler theming system
The new default theme and simplified swatches
1.4’s brand-new SVG-based icon set
The new flipswitch widget for smoother, more flexible flip switches
The filterable widget that lets you filter anything from listviews to tables and paragraphs of text
A new tabs widget for separating your page content into tabbed sections, and
A brief summary of the API changes and deprecations that are new to 1.4.

Let’s start with a quick look at how the jQuery Mobile team has improved performance in 1.4.

jQuery Mobile 1.3: What’s New?

1 March 2013 / Leave a Comment

jQuery Mobile is a handy JavaScript framework that makes it easy for you to build mobile web apps and mobile-friendly websites. jQuery Mobile 1.3 came out last week, and it has all sorts of lovely new features and improvements over 1.2. In this article you’ll get an overview of these changes, and see how to use jQuery Mobile 1.3 to enhance your websites and web apps even further.

You’ll look at:

Responsive web design improvements
Responsive grids
Two types of responsive tables for displaying data
A new panel widget
Improvements to range sliders and other form fields
A new navigate method and event for easy history manipulation
A new easy way to build autocomplete listviews
New options for dialogs and popups
Two new icons, as well as other icon improvements, and
A few miscellaneous enhancements to the framework and documentation.

We’ll start by taking a look at the concept of responsive web design, and see how jQuery Mobile 1.3 makes it easier than ever to build responsive webpages.

Knockout Tutorial: Build Dynamic, Interactive Web Pages Easily

25 June 2012 / 6 Comments

View Demo »

Download Code

JavaScript is a great language, but building complex user interfaces for websites and web apps using JavaScript alone can get tedious and fiddly. You have to deal with cross-browser issues, as well as write long-winded functions to manipulate the DOM (document object model), handle events, and more.

For this reason, a large number of useful JavaScript libraries have emerged in recent years to make your job as a JavaScript coder easier and more fun.

One recent library that’s growing in popularity is Knockout. It’s small, easy to use, and plays nicely with other JavaScript libraries such as jQuery. Using Knockout, you can build complex user interfaces in a fraction of the time that it would take you to code everything by hand.

In this tutorial, you learn Knockout from the ground up. You explore the key concepts behind Knockout, and learn how to create interactive web pages quickly and easily. At the end of the tutorial, you work through a complete “product selection” example that shows how to use Knockout in practice.

jQuery Mobile 1.1: Smoother, Faster, Nicer

16 April 2012 / Leave a Comment

The latest version of jQuery Mobile, 1.1, has just hit the streets, and it has some great new features and improvements over 1.0. In this article you’ll get a quick run-down of jQuery Mobile 1.1, and all that it has to offer you as a mobile web developer.

You’ll look at:

Improved fixed header and footer toolbars
Enhancements to page transitions, and two new transition effects
Loading spinner and text improvements
Cute mini form elements
Nicer-looking flip switches
Improved sliders
Disabling markup enhancements and Ajax handling for entire containers, and
A few other minor improvements in version 1.1.

At the end of the article, you’ll also get a brief taste of the new features and widgets that are slated for the upcoming jQuery Mobile 1.2 release.

Let’s start with one of jQuery Mobile 1.1’s headline features: its vastly improved fixed header and footer toolbars.

Ajax with jQuery: A Beginner’s Guide

6 March 2012 / 4 Comments

Many modern websites — and practically all web apps — use a technique called Ajax to provide a smooth, fast experience for the user. From apps like Gmail and Google Maps through to JavaScript frameworks like jQuery Mobile, Ajax is a popular way to fetch data from a server in the background and update the page dynamically.

Writing Ajax JavaScript code from the ground up can be fiddly. However, many JavaScript libraries, including jQuery, have excellent high-level support for Ajax, making it easy for you to build Ajax-driven websites and apps with minimal hassle.

In this tutorial, you’ll learn the basics of making Ajax requests using jQuery. You’ll look at:

Exactly what Ajax is, how it works, and why it’s a good thing
How to make various types of Ajax requests using jQuery
Sending data to the server along with an Ajax request
Handling the Ajax response from the server, and capturing any data returned in the response
How to customize jQuery’s Ajax handling and change default settings, and
A few links to some more advanced Ajax-related info and tips.

To keep things simple, this tutorial concentrates on the JavaScript side of things, rather than delving into server-side coding. However, it’s pretty easy to write server-side scripts that work with Ajax. If you want to learn a server-side language, check out my PHP tutorials.

Ready to learn Ajax? Let’s get started!

jQuery Mobile Masterclass: Build a Simple, Attractive Twitter App for iPhone

31 October 2011 / 2 Comments

View Demo »

Download Code

(Open on your iPhone or iPad!)

jQuery Mobile is a great framework for building mobile web apps, and as the 1.0 release gets nearer it’s really starting to mature into a stable platform.

In my previous jQuery Mobile article, I gave a quick overview of jQuery Mobile’s headline features. In this tutorial you’ll delve deeper into jQuery Mobile. You’ll build a simple, nice-looking, easy-to-use iPhone Twitter app called “CloseFriends” that displays your closest Twitter friends’ latest tweets.

You’ll explore the following topics as you work through the tutorial:

How to build a web app using just HTML, CSS and JavaScript (no server-side code).
Making an app that can be installed and launched from the iPhone home screen.
Creating rich mobile interfaces using jQuery Mobile, including page transitions, list views, buttons and dialogs.
Using Scott Jehl’s excellent pagination plugin to create a sequence of draggable “latest tweet” pages, much like the native iOS Weather app.
Tweaking the pagination plugin to create a nicer swipe experience.
Working with the Twitter API using JavaScript.
How to use HTML5 local storage to store data persistently in the browser.
Creating your own jQuery Mobile swatches to theme your app.
Working with jQuery Mobile events.
Adapting to different device screen sizes and orientations.
…and lots more!

You can try out the finished app on your iOS device by tapping the View Demo button above, and download the complete code and image files by clicking the Download Code button.

To get the most from this tutorial, it helps to have some familiarity with JavaScript, jQuery and jQuery Mobile. A great way to get up to speed quickly with jQuery Mobile is to read my comprehensive eBook, Master Mobile Web Apps with jQuery Mobile.

Ready to build the CloseFriends app? Let’s go!

5 JavaScript Libraries You’ll Love

9 September 2011 / Leave a Comment

When JavaScript first appeared on the scene way back in 1995, people were using it for fairly simple tasks such as form validation. These days, JavaScript has matured into a powerful language that, when coupled with HTML5 APIs like native video playback, drag-and-drop and the canvas element, allows you to build detailed, interactive user interfaces for your websites.

However, as you start to use JavaScript to build larger and larger web apps with complex data structures and rich user interfaces, it becomes clear that the JavaScript language alone is not really up to the task. Interacting directly with the DOM starts to get messy and tedious; JavaScript doesn’t have much in the way of data manipulation functions; its object model can cause headaches; and its syntax can get overly fussy.

Fortunately, some great JavaScript libraries have sprung up in recent years to make your life as a web developer much easier. In this article I’m going to focus on five fairly recent libraries and technologies that are starting to gain traction:

Backbone, for adding structure to large JavaScript-based web apps.
Underscore, a utility-belt library that adds functional programming features to JavaScript.
Knockout, a great way to simplify your user interfaces.
Sugar, which extends the JavaScript language with a wealth of useful methods.
CoffeeScript, a language that compiles down to JavaScript and is really nice to work with.

With each library, you’ll get an overview of what it does and how it works, and I’ve also included some useful links for finding out more information.

Ready? Let’s go!

Cover Flow Remade with CSS and jQuery

6 May 2011 / 10 Comments

View Demo »

Download Code

(Requires Safari)

If you’ve used a Mac or iTunes at all, you’ve probably come across the Cover Flow view. This shows you a series of album covers, photos, or other documents in 3D, allowing you to flip between them by clicking them, dragging a scrollbar, or using the arrow keys.

It’s a nice effect, but it requires a fair bit of processing power to accomplish. I thought it’d be a fun challenge to recreate it as closely as possible in a browser using CSS and JavaScript. At the start I had no idea if this was even possible, but I’m pretty happy with the result!

How to Make a Slick Ajax Contact Form with jQuery and PHP

1 April 2011 / 299 Comments

View Demo »

Download Code

Contact forms can be useful way for visitors to contact the owner of a site. They’re easy to use, and since they don’t expose the site owner’s email address in the page, they cut down on spam too.

However, contact forms can also be cumbersome, especially as they’re usually on a separate page. The visitor has to visit the contact form page, fill in the details, view yet another response page, and then try to make their way back to the page they were originally reading.

Fortunately, Ajax gives us a way round this problem. By embedding the form in the page, and submitting the form data via Ajax, the user never has to leave the current page. It also provides a smoother experience for the user.

In this tutorial we’ll build a nice-looking, embedded Ajax contact form that the user can summon up by clicking a link in the page. Along the way, we’ll explore various topics, including:

HTML5 form fields
How to use fallback techniques to make the form function even if the browser has JavaScript turned off
Using CSS techniques to create attractive forms
Writing a secure form mailer using PHP
Animating page elements with jQuery, and, of course…
Using jQuery to make Ajax requests

Before you begin, check out the finished product by clicking the View Demo button above. This opens a new page with some dummy content, and a couple of “Send us an email” links. Click one of these links to display the form.

The demo doesn’t actually send an email anywhere, but the finished code in the download is fully functional. To get the code, click the Download Code button above.

Ready? Let’s get started!

JavaScript

Footer

Contact Matt

Follow Matt