Tagged: javascript
Mixed Letters
I've added a new little app called Mixed Letters to the Lab.
It's simple, but it does what it's supposed to.
The program was a good exercise in learning about iPad touch events and css animations and transforms. It was also good practice for event listeners. And I'm eschewing jquery for a change -- great library, but I'm not doing anything that needs it.
My confusion about function references
For some reason, I thought that in yada.addEventListener("event",function) if you wanted to pass arguments you had to do it through an anonymous function So I was doing:
obj.addEventListener("click",function(e){realfunction(e);});
Now I'm doing:
obj.addEventListener("click",realfunction});
where realfunction is defined to take arguments
function realfunction(e)...
I was conflating the reference to a function with its definition (like c++'s function signatures and prototypes iirc). Of course, in javascript, you don't have to define the arguments in the function definition at all, you can use the arguments array within the function.
A better way of thinking about it, which separates the reference/name and the definition with arguments might be (ignoring differences between statements and function expressions):
var realfunction = function(e)...
And I may as well note that the following is completely fine in javascript-- the external reference can be distinct from how the function knows itself; which may be handy if I ever need a 2nd order function to pass back a recursive function:
var realfunction = function anothername(e)...
Event binding in revealing module
Also, I tend to favour the revealing module pattern:
var app=(function(){
...
return {
fn:fn,
fn2:fn2
};
}());
I've sometimes had issues in that some page initialisation done inside the function needs access to the functions that are hidden, so I have to expose them in the return object. Turns out event listeners don't need that, I can within app just addEventListener(event,fn) rather than addEventListener(event,app.fn)
I don't fully understand how scope works, and when closure kicks in.
Function references
I've been writing sniffy code like
switch(fn){
case 'move':
obj.move(x);
break;
case 'turn':
obj.turn(x);
break;
because I'd sort of forgotten that an object can be addressed like an array:
obj[fn](x);
I much prefer being able to say what I mean directly. Conditionals are code smells.
Drag and drop on iPad
Apple's Safari documents are good; they've made it easy to find out how to adjust the viewport, hide the safari elements, and what to do to disable page scrolling and resizing (which is a nuisance when trying to implement drag and drop).
The touch events work much better than the simulated mouse events; the page is much more responsive with them. This means that it doesn't work in a normal browser of course, so I should probably do some sniffing and fix that.
When I was trying to determine the target of my drops, I was stymied until I found (thank you Google)
document.getElementFromPoint(x,y)
This does the trick.
And yet again. I'm trying to use the cache manifest.
Tags: apps, javascript
