The upgrade enabled right now, but it gets forced out on October 1st. These two posts should give you all you need to know to get your site ready for Facebook’s upgrade:

Part 1: JavaScript - JavaScript changes for Facebook’s OAuth 2.0 upgrade

Part 2: PHP / Backend – Server Side changes for Facebook’s OAuth 2.0 upgrade

Also worth noting, there’s a lot of good information on Facebook’s Developer Blog.

If you are an individual Web Designer or Web Developer interested in work, please post a comment below.

What to post:

• Your name and website in the appropriate fields. I disabled WordPress’s rel="nofollow" just for you.
  • If you don’t have a website, get one! Sign up for a Dreamhost account and buy a template from Theme Forest and you’ll have a solid website in no time.
• Your basic skillset. For me, it might be “Strong Javascript / Ajax, PHP, HTML, and CSS; basic Photoshop, ActionScript and Java”
• A short bit about yourself and your experience.
• Where you’re located, and if you would consider relocating for work.
• What type of work you’re interested in: freelance / short-term contract (3-6 months or less), long-term contract, employment, startup, etc.

Tips:

• This is your first impression to potential clients: Copy-paste it into Word and read it out loud once or twice. Get it right the first time because you can’t edit comments after you’ve posted them.
• Contact information: any phone number or email address posted here will be picked up by spammers.
  • A basic solution is to just post a .jpg on your website with your phone number and email.
  • A better solution could be a contact form like this one: How to build a spam-free contact form without captchas
• One or two links to your GitHub, LinkedIn, or recent work is fine, but be warned that my WordPress marks anything with more than 3 links as spam, and it’s hidden until I get around to checking the spam filter.
• Lastly, this is my website, and I may choose to edit or delete comments. For example, if you claim 10+ years experience with jQuery, your comment will be deleted. (JQuery was released in 2006)

Thanks and best wishes with your future work!

What Facebook Does

Facebook is in a unique position compared to many developers looking to set cross domain cookies: The user visits both facebook.com and the other website.

Facebook never actually sets cookies cross-domain, they only read cookies cross-domain. They set cookies on facebook.com when the user visits facebook.com and they set cookies on the other example.com (or any other website) when the user visits example.com.¹

Doing things this way avoids all of the browser security issues because cookies that were already set when the user visited facebook.com can still be read when example.com loads facebook.com in an iframe. This is worth repeating: Cookies can be read in an iframe if they were set outside of the iframe.²

What about when the user is not logged into Facebook?

(This is how you can do it!)

If the user is not logged into Facebook when trying to use Facebook on example.com, then Facebook opens a popup window – not an iframe – to let the user log in.

A popup window has none of the cookie restrictions that iframes get; it can read and set cookies normally.

What about popup blockers?

Most popup blockers make a special exception for “intentional” popups – ones that occur as a direct result of a user’s click. When the user clicks the login button, the blocker allows the popup because the click indicates that the user wanted that popup.

An alternate method for of cross-domain cookies: flash

If you’re looking for a flash-based method of setting cross-domain cookies, or would otherwise like to avoid popups, you may want to check out my previous article, which includes source code: .swf for JavaScript cross-domain flash cookies

Notes

1. Cookies are only set on example.com when using the using Facebook’s JavaScript SDK. When embedding Social plugins directly as an iframe, only facebook.com cookies are used.
2. Safari sometimes prevents JavaScript from reading cookies in an iframe even if GET and POST requests to the server have full access to the cookies. Safari has several quirks like this, but generally behaves better with iframes if the user interacts with it.

Need a more advanced integration than what Facebook Social Plugins provide?

At Sociable Labs, our Intelligent Social Plugins^TM increase social sharing by 15x and have shown a ~1% increase in sales. And the best part is that we do all of the hard work for you!

However, I was surprisingly unable to find any complete library or how-to guide for connecting flash cookies to javascript. So I dusted off my flash skills and built one, and and now you get to enjoy the fruit of my labor:

Download the .swf, .js, and source code from github

This is an .swf file that communicates with JavaScript via flash’s ExternalInerface to read and write to a Local SharedObject (LSO). Essentially, it’s cross-domain cookies for javascript.

It also includes an (optional) javascript library that handles embedding, communication, error checking, and logging.

The project is hosted at github: http://github.com/nfriedly/Javascript-Flash-Cookies

You might also be interested in How Facebook Sets and uses cross-Domain cookies

Working Example

See https://nfriedly.com/stuff/swfstore-example/ and http://nfriedly.github.com/Javascript-Flash-Cookies/ for a working example.

Quick start guide

To use the library, upload the storage.swf & swfstore.js files to your web server and put this HTML and JavaScript into your web page(s):

The HTML

<!-- This example uses jquery, but SwfStore does not require jquery to work. -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script src="/PATH/TO/swfstore.js"></script>

<input id="dataInput" /> <input id="saveBtn" type="submit" value="Save" />

<div id="status"></div>

And The JavaScript

// wait until the page has finished loading before starting
$(function(){

	// first disable things while the swfStore is initializing
	$('input').attr("disabled","disabled");
	$('#status').text('Loading...');

	var mySwfStore = new SwfStore({

		// Optional but recommended. Try to choose something unique.
		namespace: 'myExample', 

		// To work cross-domain, only one of your sites should have the
		// .swf, all other sites should load it from the first one
		swf_url: 'http://site.com/PATH/TO/storage.swf', 

		// Logs messages to the console if available, a div at the
		// bottom of the page otherwise.
		debug: true,

		onready: function(){
			// Now that the swfStore was loaded successfully, re-enable
			$('input').removeAttr("disabled");

			// Read the existing value (if any)
			$('#dataInput').val(mySwfStore.get('myKey'));

			// Set up an onclick handler to save the text to the
			// swfStore whenever the Save button is clicked
			$('#saveBtn').click(function(){
				mySwfStore.set('myKey', $('#dataInput').val() );
				$('#status').text('Saved!')
			});

			$('#status').text('Loaded');
		},

		onerror: function(){
			// In case we had an error. (The most common cause is that
			// the user disabled flash cookies.)
			$('#status').text('Error');
		}
	});
});

Cross-domain usage

A copy of storage.swf located on one domain may be embedded on pages from one or more other domains, allowing cross-domain cookie access.

Troubleshooting

• Be sure the urls to the .swf file and .js file are both correct.
• If the .swf file is unable to communicate with the JavaScript, it will display log messages on the flash object. If debug is enabled, this this should be visible on the page.
• To hide the flash object and disable the log messages appending to the bottom of the page, set debug to false. (Log messages are added to a div if no console is found).
• If the user does not have flash installed, the onerror function will be called after a (configurable) 10 second timeout. You may want to use a library such as Flash Detect to check for this more quickly. Flash Player 9.0.31.0 or newer is required.
• If you pass a non-string data as the key or value, things may break. Your best bet is to use strings and/or use JSON to encode objects as strings.
• If you see the error “uncaught exception: Error in Actionscript. Use a try/catch block to find error.”, try using “//” in the .swf URL rather than “https://”. See https://github.com/nfriedly/Javascript-Flash-Cookies/issues/14 for more information.
• Do not set display:none on the swf or any of it’s parent elements, this will cause the file to not render and the timeout will be fired. Disable debug and it will be rendered off screen.
• The error this.swf.set is not a function has been known to occur when the FlashFirebug plugin is enabled in Firefox / Firebug..

Patches

Although my JS is solid, my Flash / ActionScript skills leave something to be desired. Patches to either are more than welcome at github (preferred), or just leave a comment here if you’re not sure how to use github. (This comment has a short walk through to using github.)

Production Use

If you’re using SwfStore in a production site, feel free to leave a comment here with a link to the site. I turned off WP’s default rel=”nofollow”, so enjoy the link juice Reciprocal links are not required, but are always appreciated.

This article looks at how to use some simple HTML, CSS, & Javascript to protect your private information without making your guests jump through hoops.

Download a working copy of the contact form discussed here.

The Goal

I want users to be able to contact me simple and easy, no captchas, no math problems, just a regular contact form, clickable email address, and everything copy-paste-able.

The Problem

Spammers love captcha-free forms and clickable email addresses. (And lately, copy-paste-able phone numbers.) I do not want to receive a ton of spam!

The Solution

With a little bit of CSS and JavaScript wizardry, we can make a simple, easy-to-use contact page that will block almost all automated contact form spam.

Part 1: The Contact Form

We are going to make a standard contact form with one extra feature: an input named “url” and a note beside it that says “Don’t type anything here!”

The HTML:

<form method="post" action="/submit.php">
<p>Your name:
<br /><input name="name" /></p>

<p>Your email:
<br /><input name="email" /></p>

<p class="antispam">Leave this empty:
<br /><input name="url" /></p>

<textarea name="message"></textarea>

<input type="submit" value="Send" />
</form>

Then we use CSS to hide the input and the note.

The CSS:

.antispam { display:none;} 

Then we make a rule in the server that says ‘if the user typed anything in the “url” box, then throw it out.’

The PHP:

<?php

// if the url field is empty
if(isset($_POST['url']) && $_POST['url'] == ''){

	// then send the form to your email
	mail( 'you@yoursite.com', 'Contact Form', print_r($_POST,true) );
}

// otherwise, let the spammer think that they got their message through

?>

<h1>Thanks</h1>
<p>We'll get back to you as soon as possible</p>

A regular person won’t even see the box normally, and will therefore leave it blank without even thinking about it. If the CSS fails to load, they get a note explaining what to do.

However, when a spam bot looks at this, it sees a good spot to stick whatever spammy url they’re trying to advertise.

Now the php script on the server can tell who is a spammer and who isn’t. The regular people get sent to your email, the spammers get ignored!

Part 2:  Click-able Email Address

Spammers steal your email address by scanning through the source code of the site and grabbing anything that looks like an email address. So we’re going to make sure that there is no email address in the source code and instead generate it by JavaScript.

The Javascript:

var first = "yourname";
var last = "yoursite.com";

The HTML:

<p>My e-mail address:
<script type="text/javascript">
document.write('<a href="mailto:'+first + '@' + last+'">'+first + '@' + last+'<\/a>');
</script>
<noscript>
Please enable javascript or use my <a href="/contact.php">contact form</a>
</noscript>
</p>

A regular user will see a regular email address and things just work. A user who happens to have javascript disabled will see an explanation and an alternative solution. And a spammer won’t see a thing!

This method can easily be extended to phone numbers and other personal information.

Advanced version: Prettier message body and a proper From: field

These were the most commonly requested features, so I added an advanced version that changes the From: field of the email to whatever the user typed in the box, and removes all of the Array brackets from the body of the message:

<?php

// if the url field is empty
if(isset($_POST['url']) && $_POST['url'] == ''){

	// put your email address here
	$youremail = 'you@yoursite.com';

	// prepare a "pretty" version of the message
	$body = "This is the form that was just submitted:
	Name:  $_POST[name]
	E-Mail: $_POST[email]
	Message: $_POST[message]";

	// Use the submitters email if they supplied one
	// (and it isn't trying to hack your form).
	// Otherwise send from your email address.
	if( $_POST['email'] && !preg_match( "/[\r\n]/", $_POST['email']) ) {
	  $headers = "From: $_POST[email]";
	} else {
	  $headers = "From: $youremail";
	}

	// finally, send the message
	mail($youremail, 'Contact Form', $body, $headers );

}

// otherwise, let the spammer think that they got their message through

?>

The preg_match() is there to make sure spammers can’t abuse your server by injecting extra fields (such as CC and BCC) into the header. Take a look at http://www.thesitewizard.com/php/protect-script-from-email-injection.shtml for more info.

Be sure to check the comments below for several other variations.

Complete Examples

A complete working copy of everything mentioned in this article, including both the simple and advanced versions, is available for download here: http://nfriedly.com/stuff/spam-free-contact.zip

For a live demo of all of this and more, see my contact page.

WordPress version

I found that there is an anti-spam plugin for WordPress that uses similar methods to the ones I describe here: http://wordpress.org/extend/plugins/nospamnx/ – I installed it on this blog and it’s stopped nearly 30,000 spam comments so far.

Does your website need help?

I am an Experienced Web Developer with a sharp eye for security. I can make your site easier to use while at the same time cutting down on level of spam you receive through it.  Contact me for more information and a free quote.

Logical Operators are a core part of the language. We’re going to look at what logical operators are, what “truthy” and “falsy” mean, and how to use this to write cleaner, faster and more optimized javascript.

Javascript Logical Operators

In traditional programming, operators such as && and || returned a boolean value (true or false). This is not the case in javascript. Here it returns the actual object, not a true / false.  To really explain this, I first have to explain what is truthy and what is falsy.

Truthy or Falsy

When javascript is expecting a boolean and it’s given something else, it decides whether the something else is “truthy” or “falsy”.

An empty string (''), the number 0, null, NaN, a boolean FALSE, and undefined variables are all “falsy”. Everything else is “truthy”.

var emptyString = ""; // falsy

var nonEmptyString = "this is text"; // truthy

var numberZero = 0; // falsy

var numberOne = 1; // truthy

var emptyArray = []; // truthy, BUT []==false is true. More below.

var emptyObject = {}; // truthy

var notANumber = 5 / "tree"; // falsy
// NaN is a special javascript object for "Not a Number".

function exampleFunction(){
	alert("Test");
}
// examleFunction is truthy
// BUT exampleFunction() is falsy because it has no return (undefined)

Gotchas to watch out for: the strings “0″ and “false” are both considered truthy.  You can convert a string to a number with the parseInt() and parseFloat() functions, or by just multiplying it by 1.

var test = "0"; // this is a string, not a number

(test == false); // returns false, meaning that test is truthy

(test * 1 == false); // returns true, meaning that `test * 1` is falsy

As one commenter mentioned, arrays are particularly weird. If you just test it for truthyness, an empty array is truthy. HOWEVER, if you compare an empty array to a boolean, it becomes falsy:

  if([] == false){
    // this code runs
  }

  if( [] ) {
    // this code also runs
  }

  if([] == true){
    // this code doesn't run
  }

  if( ![] ) {
    // this code also doesn't run
  }

Another commenter pointed out an additional gotcha to watch out for: while javascript evaluates empty arrays as true, PHP evaluates them as false.

PHP also evaluates “0″ as falsy. (However the string “false” is evaluated as truthy by both PHP and javascript.)

<?php

$emptyArray = array(); // falsy in PHP

$stringZero = "0"; // falsy in PHP

?>

How Logical Operators Work

Logical OR, ||

The logical OR operator, ||,  is very simple after you understand what it is doing. If the first object is truthy, that gets returned. Otherwise, the second object gets returned.

("test one" || "test two"); // returns "test one"

("test one" || ""); // returns "test one"

(0 || "test two"); // returns "Test two"

(0 || false); // returns false

Where would you ever use this? The OR operator allows you to easily specify default variables in a function.

function sayHi(name){

	var name = name || "Dave";

	alert("Hi " + name);

}

sayHi("Nathan"); // alerts "Hi Nathan";

sayHi(); // alerts "Hi Dave",
// name is set to null when the function is started

Logical AND, &&

The logical AND operator, &&,  works similarly.  If the first object is falsy, it returns that object. If it is truthy, it returns the second object.

("test one" && "test two"); // returns "test two"

("test one" && ""); // returns ""

(0 && "test two") // returns 0

The logical AND allows you to make one variable dependent on another.

var checkbox = document.getElementById("agreeToTerms");

var name = checkbox.checked && prompt("What is your name");

// name is either their name, or false if they haven't checked the AgreeToTerms checkbox

// IMPORTANT NOTE: Internet Explorer 8 breaks the prompt function.

Logical NOT, !

Unlike && and ||, the ! operator DOES turn the value it receives into a boolean. If it receives a truthy value, it returns false, and if it receives a falsy value, it returns true.

(!"test one" || "test two"); // returns "test two"
// ("test one" gets converted to false and skipped)

(!"test one" && "test two"); // returns false
// ("test one" gets converted to false and returned)

(!0 || !"test two"); // returns true
// (0 gets converted to true and returned)

Another useful way to use the ! operator is to use two of them – this way you always get a true or a false no matter what was given to it.

(!!"test"); // returns true
//  "test" is converted to false, then that is converted to true

(!!""); // returns false
// "" is converted to true, and then that true is converted to false

(!!variableThatDoesntExist); // returns false even though you're checking an undefined variable.

Javascript Optimization

Need any help optimizing the Javascript and AJAX on your website? Get in touch with your friendly neighborhood javascript expert for ideas on how to optimize your site and a free quote.

Unfortunately, most browsers think they know better and go off and do their own thing on RSS feeds.

We’re going to look at how and which browsers can be brought into line, and how to use XSLT to improve the look of your RSS feed in those browsers.

The RSS problem

In most browsers, XML and XSLT are supported in every single case *except* RSS. By default, Internet Explorer, Firefox, Safari, and Opera all ignore XSLT files and do their own thing with RSS. In fact, Google Chrome is the *only* browser I tested that got it right without tinkering.

To their credit, Microsoft at least gave their users the option to turn off the “feature”. No other browser even gives this option.

During my tests, I have found a way to “trick” Firefox into rendering RSS with XSLT correctly. Currently there seems to be no solution for other browsers except to try and detect them on the server and send the user an HTML file if they’re in a browser that doesn’t work properly.

Internet Explorer

IE requires that the user specifically choose to disable their take-liberties-with-rss “feature”. I would point out that this really isn’t good enough because 99% of users will never get that far, but sadly, it’s the closest thing to getting it right out of any browser on the market! (Aside from Google Chrome.)

Here’s how:

1. Click on the Tools menu,
2. Click on the Internet Options sub-menu,
3. Click on the Content tab,
4. Click on the Settings button of the Feed section to bring up Feed Settings dialog box,
5. Un-check the Turn On Feed Reading View option.
6. Click OK all the way to close all opened dialog boxes.
7. Restart Internet Explorer

Firefox

Firefox can be tricked into working because it decides fairly early on in the rendering process whether to treat the page in a standard way or to fly off the handle with it. In fact, it makes this decision before even completely downloading the RSS file.

Because of the early decision process, we can insert 512 characters of white space in between the <?xml ?> declaration and the opening <rss> tag. Firefox is then “tricked” into doing the right thing and rendering the feed correctly.

Working around it

Although not practical in most cases currently, I’ve included an example of a script that will take any RSS feed and add a style sheet to it.  It includes the hack to work in firefox and instructions for enabling it in Internet Explorer.

http://nfriedly.com/stuff/rss/?url=http://nfriedly.com/techblog/feed/

Code for index.php:

<?php

// grab the url
if(isset($_REQUEST['url'])) $url = $_REQUEST['url'];
else $url = false;

// make sure the url is good (no local files)
if($url && substr($url,0,7) != "http://") exit("Please start urls with 'http://'");

// make the stylesheet link
$xsl_file = 'xsl.php';
if($url) $xsl_file .= '?url='.urlencode($url);
define('XSL_LINK','<?xml-stylesheet href="'.$xsl_file.'" type="text/xsl" ?>');

// if we don't have a url, use the home page
if(!$url) $url = "home.xml";

// download the rss feed
$rss = file_get_contents($url);

// xml header so firefox doesn't decide it's text
header('content-type: text/xml');

//echo out the header right away, if there is one
if(substr($rss,0,6) == '<?xml '){
	$header_end = strpos($rss,'?>') +2;
	echo substr($rss,0,$header_end);
	$rss = substr($rss,$header_end);
}
//otherwise echo a default header:
else echo '<?xml version="1.0" ?'.'>';

// remove any existing stylesheet
$rss = preg_replace('/<\?xml-stylesheet([^?]|\?(?!>))*\?'.'>/','',$rss);  // uses lookahead

// add in our stylesheet
echo "\r\n" . XSL_LINK . "\r\n";

// toss in 512 bytes of nothing to throw off firefox
echo "                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 ";

//finally, pass along the content
echo $rss;

?>

The xsl.php file is only php to allow for setting the current url in the feed url input box. Ignoring that, you can view it’s source by looking at http://nfriedly.com/stuff/rss/xsl.php. You could simply save that as an .xml file and have a working copy.

You can also view the CSS and Javascript used to make everything look nice.

Hire me for web development

Need an expert web programmer to research and solve some off-the-wall problem like this? I’m available. I’m good solving run-of-the-mill problems too – Javascript and AJAX development is my specialty. Get in touch with me for more information and a free quote.

We’re going to look at how AJAX security works, specifically the Same Origin Policy, how Twitter gets around it, and the type of callback that twitter uses.

Note: the callback that twitter uses is entirely different from callback in the sense of passing a javascript function around as a variable. We’ll look at that in a future article.

AJAX Security

The XMLHTTPRequest Object, which is the javascript object used to make AJAX requests, has a “Same Origin Policy” which basically means that javascript on site1.com cannot use AJAX to directly load data from site2.com. This is a security feature, as it makes XSS (Cross-Site Scripting) attacks more difficult.

Worth noting, if the website is at site1.com, no scripts can communicate with any other site, even if the script was loaded from site2.com.

Work Arounds

There are a number of workarounds including iframes, java applets, and flash, but here’s a couple of the more common methods.

Proxying Requests

The way proxying works is to have a file on your server that grabs the data from a remote server and passes it along. Then for javascript, the data appears to be coming from your server, even though it actually originated at a remote server. This is what the Fancy part of my twitter demo does.

We’ll look at using a proxy to get remote data in a future article.

Remotely hosted javascript files

Scripts stored on other websites can be included on a page. As long as the script doesn’t need to call home after the initial load, everything works great. This is how a basic twitter function works: you load a script from twitter’s website and it communicates with your site via the callback feature. This is what the Simple part of my twitter demo does.

Here is a very basic page that uses Twitter’s callback feature and a remotely loaded javascript file to show my twitter status – remote data – on my website, by interacting with local javascript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">

<head>
<title>Simple Twitter Status</title>

</head>
<body>

<h1>My Twitter Status:</h1>

<div id="twitter_status">Loading...</div>

<!-- Put scripts down here for speed -->

<!-- this must come before we load the twitter script -->
<script type="text/javascript">

function showStatus(json){

	json = json[0]; // we only care about the most recent status;

	var myDiv = document.getElementById('twitter_status');

	myDiv.innerHTML = '<img src="'
		+ json.user.profile_image_url
		+ '" style="float:left; margin:5px 10px 10px 0">'
		+ json.text;
}
</script>

<!-- now load the twitter file -->
<script type="text/javascript"
src="http://twitter.com/statuses/user_timeline/nfriedly.json?count=1&amp;callback=showStatus&amp;random=<?php echo time(); ?>" />
</script>

</body>
</html>

You can see a live copy of this code at http://nfriedly.com/demos/twitter-extra-simple.

Digging into Twitter’s callback method

Below is a trimmed down example of what Twitter’s API sends back when we make the request in the example above.

showStatus([{"in_reply_to_screen_name":null,"text":" [ Lots of information that I'm omitting because it's not the point. ] "]);

Now, don’t worry about the jazz in the middle, just look at that showStatus(); that’s wrapped around it. First of all, how does Twitter even know that we have a function named show status? Because we said so in the url to the file -see how we added &callback=showStatus? That’s where the magic is.  (Ok, technically we said & not just &, but that was just to pass XHTML validation. )

Cross-domain!

There’s a second important thing going on here – javascript from two different domains are interacting with each other. This is allowed because of how the Same Origin Policy works – everything is restricted to the local domain, but that means that everything can work together on the same plane.

It’s a beautiful thing

I hope this gave you a little bit better understanding of how AJAX security works and how Twitter gets around it and is still able to interact with your site. In the future, I’ll have an article on how “traditional” callbacks work that will use jQuery and more AJAX to dive a bit deeper into the topic.

Javascript Ninja for Hire

I have extensive experience working with AJAX, Twitter, and related technologies. I’m just the man you need to make your next javascript development project shine!

We’re going to see what the differences between objects and arrays are, how to work with some of the common array-like objects, and how to get the most performance out of each.

What Objects Are

A javascript object is a basic data structure:

var basicObj = {}; // an empty object
// {} is a shortcut for "new Object()"

basicObj.suprise= "cake!";

basicObj['suprise']; // returns "cake!"

Using {} instead of new Object(); is know as “Object Literal” syntax.

var fancyObj = {

	favoriteFood: "pizza",

	add: function(a, b){

		return a + b;
	}
};

fancyObj.add(2,3); // returns 5

fancyObj['add'](2,3); // ditto.

As you can see, and probably already knew, properties can be accessed a couple of different ways. However, it’s an important point that we’ll come back to in a minute.

Everything in javascript is an object. Everything. Arrays, functions, even numbers! Because of this, you can do some really interesting things, such as modifying the prototypes of Objects, Arrays, etc.

// an example of something you probably shouldn't do. Ever. Seriously.

Number.prototype.addto = function(x){

	return this + x;

}

(8).addto(9); // returns 17

// other variations:

8.addto(9); 
// gives a syntax error, because the dot is assumed to be a decimal point

8['addto'](9); 
// works but is kind of ugly compared to the first method

var eight = 8;
eight.addto(9);  // works

What Arrays Are

Javascript arrays are a type of object used for storing multiple values in a single variable. Each value gets numeric index and may be any data type.

var arr = [];  // this is a shortcut for new Array();

arr[0] = "cat";
arr[1] = "mouse";

See how that syntax is so similar to the syntax used for setting object properties? In fact, the only difference is that objects use a string while arrays use a number. This is why arrays get confused with objects so often.

Length

Arrays have a length property that tells how many items are in the array and is automatically updated when you add or remove items to the array.

var arr = [];

arr[0] = "cat"; // this adds to the array
arr[1] = "mouse"; // this adds to the array
arr["favoriteFood"] = "pizza"; // this DOES NOT add to the array
// setting a string parameter adds to the underlying object

arr.length; // returns 2, not 3

The length property is only modified when you add an item to the array, not the underlying object.

The length is always 1 higher than the highest index, even if there are actually fewer items in the array.

var arr = [];

arr.length; // returns 0;

arr[100] = "this is the only item in the array";

arr.length;
// returns 101, even though there is only 1 object in the array

This is somewhat counter-intuitive. PHP does more what you would expect:

<?php

arr = array();

arr[100] = "php behaves differently";

sizeof(arr); // returns 1 in PHP

?>

You can manually set the length also. Setting it to 0 is a simple way to empty an array.

In addition to this length property, arrays have lots of nifty built in functions such as push(), pop(), sort(), slice(), splice(), and more. This is what sets them apart from Array-Like Objects.

Array-like Objects

Array-like objects look like arrays. They have various numbered elements and a length property. But that’s where the similarity stops. Array-like objects do not have any of Array’s functions, and for-in loops don’t even work!

You’ll come across these more often than you might expect. A common one is the arguments variable that is present inside of every js function.

Also included in the category are the HTML node sets returned by document.getElementsByTagName(), document.forms, and basically every other DOM method and property that gives a list of items.

document.forms.length; // returns 1;

document.forms[0]; // returns a form element.

document.forms.join(", "); // throws a type error. this is not an array.

typeof document.forms; // returns "object"

Did you know you can send any number of parameters you want to a javascript function? They’re all stored in an array-like object named arguments.

function takesTwoParams(a, b){

	// arguments is an  array-like variable inside of all functions
	// arguments.length works great

	alert ("you gave me "+arguments.length+" parameters");  

	for(i=0; i< arguments.length; i++){

		alert("parameter " + i + " = " + arguments[i]); 

	}
}

takesTwoParams("one","two","three");
// alerts "you gave me 3 parameter",
// then "parameter 0 = one"
// etc. 

This works great. But that’s about as far as you can go with array-like objects. The flowing example does not work:

function takesTwoParams(a, b){

	alert(" your parameters were " + arguments.join(", "));
	// throws a type error because arguments.join doesn't exist
}

So what can you do?

Well you could make your own join() function, but that adds a lot of unnecessary overhead to your code because it has to loop over everything. If only there were a quick way to get an array out of an array like object…

It turns out there is.

The array functions can be called on non-array objects as long as you know where to find the function (usually they’re attached to the array, but this isn’t an array remember

Prototype to the win:

function takesTwoParams(a, b){

	var args = Array.prototype.slice.call(arguments);

	alert(" your parameters were " + args.join(", "));
	// yay, this works!

}

Let’s take a look at that a bit more in-depth:

Array: This object is the original array that all other arrays inherit their properties from.

Array.prototype:This gives us access to all the methods properties that each array inherits

Array.prototype.slice: The original slice method that is given to all arrays via the prototype chain. We can’t call it directly though, because when it runs internally, it looks at the this keyword, and calling it here would make this point to Array, not our arguments variable.

Array.prototype.slice.call(): call() and apply() are prototype methods of the Function object, meaning that they can be called on every function in javascript. These allow you to change what the this variable points to inside a given function.

And finally, you get a regular array back! This works because javascript returns a new object of type Array rather than whatever you gave it. This causes a lot of headaches for a few people who are trying to make subclasses of Array, but it’s very handy in our case!

Gotchas

First, in Internet Explorer, DOM NodeLists are not considered to be javascript objects, so you cannot call Array.prototype.slice on them. If you want an array, you’ll have to loop through it the old fashioned way. Or use a hybrid function that tries it the fast way first, then the slow way if that doesn’t work.

function hybridToArray(nodes){
	try{
		// works in every browser except IE
		var arr = Array.prototype.slice.call(nodes);
		return arr;
	} catch(err){
		// slower, but works in IE
		var arr = [],
		    length = nodes.length;
		for(var i=0; i < length; i++){
			arr.push(nodes[i]);
		}
		return arr;
	}
}

See an example here: http://nfriedly.com/demos/ie-nodelist-to-array.

Second, arrays are objects, so you can do this, but it can get you some serious inconsistencies:

arr = [];

arr[0] = "first element"; // adds item to the array

arr.length; // returns 1

arr.two = "second element"; // adds an item to the underlying object that array is built on top of.

arr.length; // still returns 1 !

// BUT...
for(i in arr){

	// this will hit both 0 and "two"

}

A better solution: wrap arrays in an object if you need both worlds

This is basically a less efficient method of the array subclassing links I mentioned above. While less efficient, it has the advantage of being simple and reliable.

That said, I wouldn’t recommend that you use this in most cases due to issues with speed and extra code requirements. It’s provided here as an example.

// an example of a wrapper for an array.
// not recommended for most situations.

var ArrayContainer = function(arr){

	this.arr = arr || [];

	this.length = this.arr.length;

};

ArrayContainer.prototype.add=  function(item){

	index = this.arr.length;

	this.arr[index] = item;

	this.length = this.arr.length;

	return index;

};

ArrayContainer.prototype.get=  function(index){

	return this.arr[index];

};

ArrayContainer.prototype.forEach=  function(fn){

	if(this.arr.forEach) this.arr.forEach(fn);// use native code if it's there

	else {

		for(i in this.arr){

			fn( i, this.arr[i], this.arr );

		}
	}
};

var mySuperDooperArray = new ArrayContainer();

Now that your array is (somewhat) protected on the inside, you can loop through it’s items with forEach() and know that they will match it’s length. You can also add arbitrary properties to ArrayContainer or mySuperDooperArray and they won’t get pulled into your forEach() loop.

This example could be extended to completely protect the array if the need arose.

An Even Better Solution: Hire a javascript expert.

nFriedly Web Development is a top ranked Javascript and AJAX ninja with an extensive portfolio of proven results. I can bring your project to life and make it run faster than you ever imagined.  Get in touch with me or get a free instant estimate for new projects.