1. If SEO is a concern, use progressive enhancement. Don’t rely on rumors that content loaded from javascript gets indexed!
2. If Accessiblity is a concern, use progressive enhancement. Just not ready for js in this arena.
3. If lack of javascript is a major concern, use progressive enhancement. Not sure if this should ever be a major concern anymore…
4. If it’s simple content where js will buy you little, just do the traditional web development
5. Otherwise, rely on clean javascript and server-side services, take and OO approach using a js framework and use jquery!

I started to learn to program about two years ago. At the time, I didn’t even know what a variable was, but I always had a sense of wonder about how computers and the internet worked; it all seemed like magic.

For the first year I worked really hard, and I could comfortably program. But then my motivation seemed to drop. The field was still interesting to me, but I found that programming was causing me to spend most of my time alone in a darkened room. I had a lot of tech knowledge, but my life in general had become less interesting.

Perhaps I could restart my programming journey, this time being sure to take more breaks and get out more!

Good luck in San Francisco.

I would add to the penultimate paragraph (about third-party access to your objects) that for same reasons closures are also much more unpleasant to debug without modifying the source code. No-one will ever mess with your internal implementation nor debug your plugin if it has issues.

I can’t reply to your entire comment right now, but to answer the first question about lexical environment:

You’re confusing things a bit by talking about g being ‘copied’ into the other function. Code in f has access to g both times. The first time is because g is in f‘s parent scope. The second time is because g is in f‘s scope.

What happens, when you call g() within f is this: In the first case, the interpreter will look for a definition of g within f. It won’t find it, so it looks in the parent scope, which is where g is defined. Otherwise, it would look to the next containing scope and so on until it reaches the global scope (the top level).

In the second case, the interpreter will find the definition of g within f.

The important thing is though, that g is not ‘copied’ into f. There is only the one g, and the interpreter searches up the scope chain until it is found.

It seems that you have some fundamental misconceptions about the way JavaScript works – I’d recommend you read Eloquent JavaScript. Good luck!

I assumed the value of i would be taken in the first loop as =0 and something like

[a onclick="alert(0)"]

would be inserted into the html right there and then. When the loop repeated, it would insert [a onclick="alert(1)"] etc. …

First, you need to explain what “lexical environment” means. To give you some insight into the newbie mind, I had hastily assumed there is no difference semantically between:

function g() {}         // g defined outside f and called inside f
function f() { g(); }

and

function f() { function g() {}; ... } //g defined inside f

I tended to think that g gets copied into the other function anyway. But based on your examples, I see that is precisely the issue. If a function is defined inside another function, it has access to the variables “above”, but if it’s defined separately, you need to pass the variables to it through parameters from within the outer function, which takes those values “outside” the scope of that function and “remembers” their values by way of separate variables defined inside the external function.

Also, for a long while, I did not understand that the code of the inner function is executed when the main function is called (i.e. when a click event actually occurs, if it’s an event-handling function). I mistakenly interpreted each instance of the loop as separate and static, with the i value retrieved assigned at the time of the execution of each loop.

For example, if I were to bind an event to some <a> element like so:

a_element.attachEvent("click", function () { alert(i); })

I assumed the value of i would be taken in the first loop as =0 and something like <a onclick="alert(0)"> would be inserted into the html right there and then. When the loop repeated, it would insert <a onclick="alert(1)"> etc. So I did not understand why the latest value of i could “intrude” on values of i that were already done with. But I see that the i defined in the loop is dynamic. Its value is retrieved at the time of the function call (or the event), which is after the loop has completed.

The key seems to be that when a function is called and the i variable is accessed from the inner function, the same i is always accessed every time the inner function is called. What you need is to create another variable that can remember each i as it iterates through the loop.

External function is one way. Alternatively, you can nest the functions and pass the “global i” to the inside function through a parameter, which achieves the same result:

var func = function (i_holder) {
      return function() {
         alert(i_holder);
      }
} (i);   // pass outer i as a parameter inside the function

element.addEvent("onclick", func);