It’s. So. Good.
OK. Enough about Jeffrey. I don’t get paid to talk about Tuts+. But maybe I should… Hit me up Jeff.
He did something in a recent episode that made me go. “WAIT! WHAT!?! You can do that?”. Touch slider to rewind on iPad. Touch slider…touch slider….Finally - rewind and watch again. Why is it so hard to grab the video scrubber on iOS sometimes?
Let’s look at a simple demo. In this example I have created an object called Lassie. Lassie has some methods that she can execute. Instead of just logging an event, I used pictures I stole off the internet. Because it’s more fun.
In this rather bad example, I have two buttons. Each time a button is clicked, I can fire a method on the lassie object. Try it out.
That works, but we have 4 methods and we would need a button for each method. It would be better to have a drop down of available actions and then execute the right method based on the selection.
You can call this…
Did you catch that? All you need is the string representation of the method name. We could now refactor the above example to use a drop down list instead and then just use the value of the selected option to execute the right method. Dynamically.
A Real World Example
Lets look at another less ridiculous example of array notation.
I’ve been working on an HTML5 application called HTML5 Camera. This site uses bleeding edge WebRTC to capture video from your webcam and play it back through an HTML5 video tag. It then captures the video output to a canvas element. Once the image is on the canvas, I can manipulate the pixels to apply effects to the image.
In my version, each time I call the vintage() method on an image, I have to pass in an object which contains configuration values. For instance, the standard vintage object looks like this…
I need to call the vintage() method on the image and pass in the object containing the presets. Normally, if I knew what preset to pass, I would just pass it.
What I needed to do was have a drop down list that would display each of the effects dynamically as I add them and put them in a drop down list. I could do that easy enough with a for loop and hasOwnProperty.
Then I can apply the effect by selecting the image, calling the .vintage() method (which is part of the VintageJS jQuery plugin) and passing in an effects object based on the value of the drop down list.
What follows is a working example. You can set the effect on the image of me “raising the roof” by changing the drop down value. There is no list of effects anywhere. This drop down is populated directly off of the effects object and then the effect is applied using JavaScrpt array notation passing in the string value of the selected drop down list item.
And this is the code that both populates the drop down and executes retrieves the appropriate object for based on the user’s selection in the drop down.
So in this last example, I wasn’t calling a method - but rather retrieving an object based on it’s “string” representation.
If you have worked with static languages before, you know that in order to do something like this (pre-dynamics in .NET 4.0 and things like that), you had to use Reflection. And it was not fun. Kind of like the flu is not fun.