• Choose a category
• All
• Classic-Fiction

By Root 658 0

differently (e.g., setting the innerHTML property of an object only allows text and will remove all childNodes of the element it’s called on) or don’t work at all (e.g., you can’t access the document.form property directly). There are a number of very useful functions for setting and manipulating the style of objects, as well as handling events, working with Ajax, and displaying dialog boxes.

This chapter focuses on the most common FBJS-related objects you’ll want to complete, but it’s worth noting that the full scope of using JavaScript in Facebook applications could fill a few books on its own. We cover the basics in the rest of this chapter, including some handy recipes for stuff you’ll want to do frequently.

NOTE

If your JavaScript skills are a little rusty and you want to brush up before jumping into FBJS, check out David Flanagan’s JavaScript: The Definitive Guide or Shelley Powers’s Learning JavaScript, both from O’Reilly.

Dealing with Sandbox Renaming

Problem

The Facebook Sandbox keeps renaming my objects and functions.

Solution

Don’t sweat it! That’s what the Sandbox is there for. The good news is that it should be renaming them consistently throughout your application (in your HTML and in your JavaScript), so that your DOM manipulation still works properly.

Discussion

As mentioned in the introduction to this chapter, the Sandbox is really there to protect Facebook’s users from the nasty things you might (advertently or inadvertently) do to them. Let’s say, for example, that you gave a div in your HTML the very common id of content. That would clash with the id of the Canvas area of the Facebook page, which is a problem because no two HTML elements on the same page can share the same id. Ever spent time around one or more people who share your name? It gets confusing pretty quickly, especially when someone is trying to manipulate your style object. This isn’t as big of a deal when you’re applying CSS based on id (e.g.,#content{font-weight: bold;} would just be applied to both), but it is when you try to grab one of them through JavaScript (e.g., what gets returned by document.getElementById('content')?).

The solution is the same for JavaScript as it is for HTML. As we saw in Chapter 6 for FBML, the FBJS Sandbox rewrites your code to prepend your application ID to things such as object, function, and variable names. Let’s take a look at a quick example that should allay your fears.

If your carefully constructed Canvas page contained this HTML and JavaScript:

Facebook would rewrite it to something like:

Here are a few important things to note:

The id of the div changed from it to app12345_it, as we saw in Chapter 6.

The name of the function changed from checkIt to a12345_checkIt. Sandbox renaming