Post your personal gripes with Javascript here

[mainegreen]

I have to fume. Sometimes javascript is nice. It seems to work. Sometimes it even (gasp) makes sense! True, sometimes it does! But then, BAM! Chaos! Disorder! Insanity! Pleas of 'why god, why?'

Here's my personal gripe: It involves event handling and prototype.
Say I've created a class, and in the class I have 2 functions. One to initialize some internal variable and watch an event, like so:

initialize: function(element) {
    this.div_id=element.id;
    Event.observe($(this.div_id + '_resize'),'mousedown',this.resize_start);
}

Elsewhere in the class is 'resize_start', which catches the function, sorta like so:

resize_start: function(event) {
    alert(this.div_id);
}

You might think 'geee, since resize_start is in the same class, 'this.' points to the class like it does in any other function in the class'. You might think so, but you'd be wrong-o!
Noooo. It has to be different. It has to point to the friggen element calling the event in mozilla. Why? Who knows. It just overrides the this pointer temporarily in the class. And forget IE. 'this.' doesn't even exist in IE! It just goes away for a little while! Why?! WHY!? :wtf:!

So I now have to go off binding event listeners to functions, and then binding them to observers.

Argggg! :argh:

Anyone else out there hate javascript sometimes?

What do you hate most about javascript?

[charlie]

1. To me, it makes sense

When you bind an event to an element, it creates a new instance of the handler, so it makes sense that the it becomes the "owner" and "this" refers to the element. If it didn't work that way, you'd have to include code in the handlers to examine the event and discern who triggered it, which would make most event-driven scripting cumbersome.

(IE's situation is a whole 'nuther level of stupidity, however. If you bind events using old-school notation -- element.onmousedown=f or element['onmousedown']=f -- scope context is the same as other browsers, "this" refers to the element. If you use the MS-approved attachEvent method though, "this" refers to the window.event object, not the element. That's probably what's causing the wonky results in your Event.observe() method.)

If you want to force all elements to make a call to the original resize_start(), it's not hard to do. Just bind the event to an anonymous function that makes the call. For example, if initialize() and resize_start() are nested within a function called doSomething()

Event.observe($(this.div_id + '_resize'),'mousedown',function(e){doSomething.resize_start(e)});

should do it. Then when resize_start pops the this.div_id alert, it'll display doSomething's div_id variable.

I'm not sure what you're looking for from the popped alert, but if you limit the scope to the original resize_start() you won't get anything other than the last element initialized. In other words, if you run el1, el2, el3 through initialize(), this.div_id will always return "el3" no matter which element you click on.

One thing Javascript's good at is preserving state during instantiation. So if you want, you can still keep the scope to the original and yet retain unique data within each call, by passing variables to the handler during binding

initialize: function(element) {
    var i=this.div_id=element.id;
    Event.observe($(this.div_id + '_resize'),'mousedown',function(e,i){doSomething.resize_start(e,i)});
}

and then in resize_start()

resize_start: function(e,i) {
    alert(i);
}

This'll ensure that clicking on "el1_resize" will return "el1" and not the last element initialized.

(The "e" argument is for the W3C event object. If you don't need to examine the object, omit it. Avoid using "event" as an argument, it's a global keyword in MS JScript).

[mainegreen]

2. Interesting

I never thought of the function(e,i){doSomething.resize_start(e,i)} syntax. Clever.
Sometimes you hit a wall and :banghead: !

I ended up resolving the 'this.' reference issue like so:

initialize: function(element,min_title) {
    this.eventResizeMouseDown = this.resize_start.bindAsEventListener(this);
    Event.observe($(this.div_id + '_resize'),'mousedown',this.eventResizeMouseDown);
}

where resize_start is a function in the class. It actually works quite well.

Not that I'm complaining to much though. Prototype has made my life a lot easier. Currently working on a resizable/draggable/min-max-able/with dhtml scrollbars div/window emulator that I'm driving via a javascript class.

Look ma! No embeded Javascript!