Imprint
Copyright 2012 Smashing Media GmbH, Freiburg, Germany
Version: October 2012 (First published in November 2011)
ISBN: 9783943075212
Cover Design: Ricardo Gimenes
PR & Press: Stephan Poppe
eBook Strategy: Andrew Rogerson & Talita Telma Stckle
Technical Editing: Andrew Rogerson
Proofreading: Andrew Lobo, Iris Ljesnjanin
Idea & Concept: Smashing Media GmbH
About Smashing Magazine
Smashing Magazine is an online magazine dedicated to Web designers and developers worldwide. Its rigorous quality control and thorough editorial work has gathered a devoted community exceeding half a million subscribers, followers and fans. Each and every published article is carefully prepared, edited, reviewed and curated according to the high quality standards set in Smashing Magazine's own publishing policy. Smashing Magazine publishes articles on a daily basis with topics ranging from business, visual design, typography, front-end as well as back-end development, all the way to usability and user experience design. The magazine is and always has been a professional and independent online publication neither controlled nor influenced by any third parties, delivering content in the best interest of its readers. These guidelines are continually revised and updated to assure that the quality of the published content is never compromised.
About Smashing Media GmbH
Smashing Media GmbH is one of the world's leading online publishing companies in the field of Web design. Founded in 2009 by Sven Lennartz and Vitaly Friedman, the company's headquarters is situated in southern Germany, in the sunny city of Freiburg im Breisgau. Smashing Media's lead publication, Smashing Magazine, has gained worldwide attention since its emergence back in 2006, and is supported by the vast, global Smashing community and readership. Smashing Magazine had proven to be a trustworthy online source containing high quality articles on progressive design and coding techniques as well as recent developments in the Web design industry.
About this eBook
It is not always easy for Web developers and designers to make the right decisions when having to choose the right solution. Either while building a complex Web application or even by improving a website, there are countless pre-built solutions available and picking one of them can surely be a burden sometimes. In this eBook we enlighten the most important issues you should pay attention to by all means when selecting a solution, i.e. how stable, easy to customize, usable and accessible it is, whether it can be maintained in the future, what exactly is supported and how you can extend the functionalities on your own.
One of the many important issues considered in this Smashing eBook #13: JavaScript Essentials is the importance of reviewing your code and what to avoid when you are implementing in JavaScript. Maintaining strong coding standards and withdrawing your programming away from common errors should be the basic requests for the general quality of your solutions, and the articles we have selected will explain exactly how you can achieve this. One of the sections also advises to have your code reviewed by experts and check whether they may provide other solutions to the problems you're experiencing.
Last but not least, you'll get to know the golden rules of JavaScript basic animations better, as well as JSON as a data format along with the native JavaScript functions (Math, Array, String), shortcut notations, and much more. Of course, we couldn't leave out JS events that will make your webApps work, implementation of anonymous functions, module patterns, configurations, interaction with the back end and usage of libraries to specify codes. And for those of you who are rather interested in AJAX, you'll get the information you need in case you've been wanting to turn yo ur content dynamic and searchable.
Andrew Rogerson, Smashing eBook Editor
Authors
Addy Osmani
Addy Osmani is a JavaScript blogger & UI Developer for AOL based in London, England. He is also a member of the jQuery [Bug Triage/Docs/Front-end] teams where he assists with bugs, documentation and community updates. Most recently he's been nominated for the .net 'Brilliant Newcomer' award .
Andy Croxall
Andy Croxall is a Web developer from Wandsworth, London, England. He is a Javascript specialist and is an active member of the jQuery community, posting plugins and extensions. He has worked for clients ranging from the London Stock Exchange to Durex. You can keep up with him and his projects and creations on his
Christian Heilmann
An international Developer Evangelist working for Mozilla in the lovely town of London, England.
Zack Grossbart
Zack Grossbart is an engineer , designer, and author . He's a founding member of the Spiffy UI project, the architect of the WordPress Editorial Calendar , and a Consulting Engineer with NetIQ . Zack began loading DOS from a floppy disk when he was five years old. He first worked professionally with computers when he was 15 and started his first software company when he was 16. Zack lives in Cambridge, Massachusetts with his wife and daughter.
Table of Contents
Seven JavaScript Things I Wish I Knew Much Earlier In My Career
Christian Heilmann
Ive been writing JavaScript code for much longer than I care to remember. I am very excited about the languages recent success; its good to be a part of that success story. Ive written dozens of articles, book chapters and one full book on the matter, and yet I keep finding new things. Here are some of the aha! moments Ive had in the past, which you can try out rather than waiting for them to come to you by chance.
Shortcut Notations
One of the things I love most about JavaScript now is shortcut notations to generate objects and arrays. So, in the past when we wanted to create an object, we wrote:
var car = new Object();
car.colour = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;
The same can be achieved with:
var car = {
colour:'red',
wheels:4,
hubcaps:'spinning',
age:4
}
Much shorter, and you dont need to repeat the name of the object. Right now, car is fine, but what happens when you use invalidUserInSession ? The main gotcha in this notation is IE. Never ever leave a trailing comma before the closing curly brace or youll be in trouble.
The other handy shortcut notation is for arrays. The old school way of defining arrays was this:
var moviesThatNeedBetterWriters = new Array(
'Transformers','Transformers2','Avatar','Indiana Jones 4'
);
The shorter version of this is:
var moviesThatNeedBetterWriters = [
'Transformers','Transformers2','Avatar','Indiana Jones 4'
];
The other thing about arrays is that there is no such thing as an associative array. You will find a lot of code examples that define the above car example like so:
var car = new Array();
car['colour'] = 'red';
car['wheels'] = 4;
car['hubcaps'] = 'spinning';
car['age'] = 4;
This is not Sparta; this is madnessdont bother with this. Associative arrays is a confusing name for objects.
Another very cool shortcut notation is the ternary notation for conditions. So, instead of the following
var direction;
if(x < 200){
direction = 1;
} else {
direction = -1;
} You could write a shorter version using the ternary notation:
var direction = x < 200 ? 1 : -1;
The true case of the condition is after the question mark, and the other case follows the colon.