Understanding Nothing

After my recent playings with JavaScript, it’s nice to see that Jon Udell has also been discovering that JavaScript can be written quite neatly also: I always thought Perl had a role to play on the desktop. And now that it has transfused its genes into JavaScript, it does.

I can see lots of similarities between JavaScript and Perl. Both are languages that are often written by people with no real programming experience, just to get a job done – usually involving web sites. A lot of the code in each isn’t written from scratch, but starts by taking some other code that almost does what you want, and hacking it around until it does do what you want. And, as a result, a lot of the code that exists in both languages is really ugly, clumsy, and contains lots of special case code and lots of subtle bugs. Which the next person to adapt the script hacks around until it does what they want. And so on.

But beneath it all, both are actually very powerful languages, which can be well written, clean, expressive, and well factored.

And whilst I’m perfectly at home writing Perl like that, my JavaScript skills are still rather lacking.

So, I was playing around with Object Oriented JavaScript over the holidays. I found a good example at ChunkySoup, but I still wasn’t entirely happy with the results.

The code for the test page is still a little uglier, and more repetitive than I’d like. In particular, each link on the page still needs to explicitly set up its
own handling code for the image rollovers etc.:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div id="link1"><a href="DSCB1428.jpg"
onmouseover="elements[0].handleMouseOver()"
onmouseout="elements[0].handleMouseOut()" onclick="return
elements[0].handleClick()">1</a></div>
<div id="link2"><a href="DSCN4337.jpg"
onmouseover="elements[1].handleMouseOver()"
onmouseout="elements[1].handleMouseOut()" onclick="return
elements[1].handleClick()">2</a></div>
 
<div id="link3"><a href="DSCN4358.jpg"
onmouseover="elements[2].handleMouseOver()"
onmouseout="elements[2].handleMouseOut()" onclick="return
elements[2].handleClick()">3</a></div>
<div id="link4"><a href="DSCN4373.jpg"
onmouseover="elements[3].handleMouseOver()"
onmouseout="elements[3].handleMouseOut()" onclick="return
elements[3].handleClick()">4</a></div>
<div id="link5"><a href="DSCN1509.jpg"
onmouseover="elements[4].handleMouseOver()"
onmouseout="elements[4].handleMouseOut()" onclick="return
elements[4].handleClick()">5</a></div>

And setting up the JavaScript that gets called onLoad is a little repititive too:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var elements = new Array();
var thumbnailID = "thumbnail"; // this is universal for the page
var emptyimg = "blank.gif"; // this is universal for the page
var photoID = "bigimage"; // this is universal for the page
 
function initpage() {
  elements[0] = new csnPhotoNavObject(new
csnPhotoObject(thumbnailID,emptyimg,"DSCN1428tn.jpg",photoID,"DSCN1428.jpg"));
  elements[1] = new csnPhotoNavObject(new
csnPhotoObject(thumbnailID,emptyimg,"DSCN4337tn.jpg",photoID,"DSCN4337.jpg"));
  elements[2] = new csnPhotoNavObject(new
csnPhotoObject(thumbnailID,emptyimg,"DSCN4358tn.jpg",photoID,"DSCN4358.jpg"));
  elements[3] = new csnPhotoNavObject(new
csnPhotoObject(thumbnailID,emptyimg,"DSCN4373tn.jpg",photoID,"DSCN4373.jpg"));
  elements[4] = new csnPhotoNavObject(new
csnPhotoObject(thumbnailID,emptyimg,"DSCN1509tn.jpg",photoID,"DSCN1509.jpg"));
}

So, I figured it should be possible to abstract some of that away further too. The JavaScript should be able to dynamically alter the DOM and set up all the event handles. Then the links could just be set up as:

1
2
3
4
5

<a id="link1" href="DSCN1428.jpg">1</a>
<a id="link2" href="DSCN4337.jpg">2</a>
<a id="link3" href="DSCN4358.jpg">3</a>
<a id="link4" href="DSCN4373.jpg">4</a>
<a id="link5" href="DSCN1509.jpg">5</a>

And at the start of the page, I’d just want to associate images with each link:

1
2
3
4
5
6
7

function initpage() {
  addImage("link1", "DSCN1428.jpg", "DSCN1428tn.jpg");
  addImage("link2", "DSCN4337.jpg", "DSCN4337tn.jpg");
  addImage("link3", "DSCN4358.jpg", "DSCN4358tn.jpg");
  addImage("link4", "DSCN4373.jpg", "DSCN4373tn.jpg");
  addImage("link5", "DSCN1509.jpg", "DSCN1509tn.jpg");
}

The addImage JavaScript would then find the image element with the id of the first parameter, associate an onclick() with the second element, and a rollover() with the third.

After a lot of playing around I ended up with a nice abstract JavaScript addImage function that does just this:

1
2
3
4
5
6
7

function addImage(id, img, thumb) {
  var pno = new csnPhotoNavObject(new csnPhotoObject("thumbnail","blank.gif",thumb,"bigimage",img));
  var img = document.getElementById(id);
  img.onmouseover = function() { pno.handleMouseOver(); };
  img.onmouseout  = function() { pno.handleMouseOut(); };
  img.onclick     = function() { return pno.handleClick(); };
}

What I don’t like about this though, is the need to set up the anonymous closures. (Of course, before this I didn’t even know I could actually do that in JavaScript!). I can’t see why I can’t just say:

4
5

  img.onmouseover = pno.handleMouseOver;
  img.onmouseout  = pno.handleMouseOut;

The onmouseover and onmouseout need to be assigned a function. But if I give them the foreign object function directly, then something later gets confused. Whereas if I give it an anonymous function that just calls that other function, everything works just fine.

I don’t know if I’m doing something wrong. Or if there’s some strange JavaScript language issues I don’t know about yet. Or what.

Anyone any suggestions?

Day 13 of Mark’s Accessibility Tips is “Include Real Links”.

This is a personal bugbear, but not for any of the reasons Mark lists. Me, I hate javascript links because I use Mozilla with my middle mouse button bound to “open link in new tab”. Which, of course, only works with real links. JavaScript links don’t want to open in a new tab for me, they usually want to spawn a pop-up window. But I don’t want lots of windows. That’s why I switched to Mozilla. Now I can still have lots of pages open at once without my windows explorer bar being completely unreadable.

Unless you decide that what I really want is popups.

Scott Andrew has a nice drag and drop window demonstration. Unfortunately there’s a nasty bug where Mozilla can’t drop the box, but the concept is good. There’s lots of little loose ends that he’s tossing out for other people to fill in, which is good too. This is already very neat, but it could be exceptional when it gets fleshed out a bit more.

It seems that each of the various drag and drop event handlers only know about either the object being dragged, or the area into which it’s being dropped. Not both. This means that when dropping an object its receiver can’t know what’s arriving.

There is a dataTransfer object that can be seen by both ends, which acts as a clipboard onto which you can paste relevant information: but seemingly only either text or a URL (presumably for dragging text or images respectively) – not the object itself.

This means I’ve had to resort to the terrible hack:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 
  function makeMovable() {
    event.dataTransfer.setData("Text", event.srcElement.id);
    event.dataTransfer.setData("URL",  "http://ok/");
  }
 
  function dropItem() {
    if (! isMovable()) return;
    ...
  }
 
  function isMovable() {
    return ((event.dataTransfer.getData("URL") == "http://ok/")
      && event.dataTransfer.getData("Text"));
  }

[I tried just setting both and making sure both were set, but text dragged from an href has both set already :( ]

This can’t be the best way to do this.

Spend a few hours this afternoon playing with drag and drop in IE.

There seems to be two main approaches. At JavaScriptKit they use onmousedown and onemouseup to grab elements with class=draggable and then dynamically change their x/y position.

This creates a better visual effect than the official Microsoft approach, which uses a variety of new eventhandlers. But the Microsoft way allows for more powerful scripting, as you get to call functions not just when you grab/drag/drop, but also as enter or leave a ‘drop-zone’.

I can’t decide yet which I prefer. I should probably look at ways to combine both.