geek.de.nz

Having learned JavaScript mainly by doing, it was quite late that I figured out some important details. Please comment if you think or know that I’m wrong.

The arguments array as well as the caller instance are universal variables inside every JavaScript function. The names are self-explanatory.
An anonymous function inside another function keeps the variables in scope as in:

var somefunction = function(arg1) {
  var avar1 = 10;  
  object.onclick = function() {
    alert('arg1=' + arg1 + ' avar1=' + avar1);
  }
}
somefunction('Foo');
// "arg1=Foo avar1=10" when object is clicked on

So this means that the scope of the function defines what variables can be accessed within it, even after the function call has finished.

Another part I always found confusing in JavaScript is the “this”-keyword, but that might have to be the topic of another post.

Just playing around with GeoExt and OpenLayers, I figured out how to easily change the control to a zoom rectangle with minimal changes:

First create the normal and the custom control with:

var inZoom = false;
var navigation = new OpenLayers.Control.Navigation();
var ZoomBoxNav = OpenLayers.Class(OpenLayers.Control.Navigation, {
 zoomBoxKeyMask: null // this ensures that a box is always drawn
});
var zoomBox = new ZoomBoxNav();

Then all you need is a button or better Action object, which adds the appropriate control to the map:

var toggleRectZoom = function() {
  if (inZoom) {
    map.addControl(navigation);
    map.removeControl(zoomBox);
    inZoom = false;
  } else {
    map.addControl(zoomBox);
    map.removeControl(navigation);
    inZoom = true;
  }
}
 
zoomButton = new GeoExt.Action({
  text: 'Zoom Mode',
  handler: function() {
    if (inZoom) {
      zoomButton.setText('Zoom Mode');
    } else {
      zoomButton.setText('Pan Mode');
    }
    toggleRectZoom();
  }
});
 
toolBar = new Ext.Toolbar({
  items: [ zoomButton ]
});
mapPanel = new GeoExt.MapPanel({
  border: true,
  region: "center",
  // we do not want all overlays, to try the OverlayLayerContainer
  map: map,
  center: [172.1569825, -42.6109735],
  zoom: 6,
  layers: myLayers,
  tbar: toolBar
});

I think JavaScript compilers sort of defeat the purpose of a programming language. I can understand that you would want to compress JavaScript to save download time on the client side. However, it seems strange to me that another programming language writes code in another, higher level language. If the JavaScript you write is good and not highly redundant, another PL wont be able to generate it. The only place where it seems useful to me is when creating variables’ values like a count or an array of file names or similar. However, generating JavaScript from PHP or any other server side language seems to defeat the purpose of reusable code. You can in fact write highly re-usable code in JavaScript, it supports inheritance etc and libraries like jQuery make it highly compact. When it comes to deployment though, it is beneficial to have a script running that compresses the JavaScript.

Anyway, let me know your thoughts in a comment.