Five things I learnt about Javascript this month
In the past month at Ephox, we have been doing some heavy JavaScript (in this article JavaScript == ECMAScript 3.0) work, the effects of which will be seen in the next release of EditLive! I’ve learnt a bunch of new things, and thanks to a nice internal Continuous Learning seminar by AJ, much of the background theory has gelled for me.
1. this is the current object at execution time (think python and self).
An almost obvious statement which doesn’t really suprise initially. Java guys will look at that and be thinking, so what. It gets more fun when you think about the dynamic nature of java script and that you can assign functions as variables and pass them around as a reference. Assigning variables to objects is possible, and allows the dyanmic definition of behaviour.
This all becomes important when you are assigning functions to variables for reuse. For example if you are to override a funtion, and keep the original for later use, you need to be careful not to loose the context.
So if you override the onsubmit handler of a form, but want to keep the original onsubmit handler around you might want to do seomthing like this:
form.originalOnSubmit=form.onSubmit;
form.onSubmit=newSubmissionFunctionThatCallsOriginalSubmissionFunction;
2. Function is a way of creating a function object—pass in a string, get a function out.
Pretty much as expected:
myFunction = new Function(“arg1", "arg2" "{alert(arg1 +arg2);}”);
That will create a function with arguments arg1 and arg2, and will raise an alert with arg1+arg2.
For more details see here.
3. eval evaluates a string as javascript
yep it does
4. prototype is the way that Objects are created in javascript.
JavaScript is a prototype based language. A prototype function is specified by the following syntax:
MyObject.proptoype.myFunction = function(arg){
//javascript function
}
see here for more info.
5. innerHTML rationalises the content being set
Browsers will parse the contents of the text being set via innerHTML, which will cause the contents to be changed in various minor ways. For example comments in the middle of attributes will be escaped.
There is much to learn about Javascript, and the above are a couple of the bits that I have learnt recently.
Update:
As Tom has pointed out in the comments, be careful with the Python/JavaScript analogy. Python binds the self early, so the analogy falls in a heap early on.
April 24th, 2007 at 12:42 am
Actually, Python and JavaScript are different in how they handle self/this. Python curries/binds the this, and JavaScript forgets it.
April 24th, 2007 at 12:43 am
Function is an expensive way of creating functions at runtime, and really only makes sense if there are no alternatives (which there usually are). Use the lowercase function (and no new) to more cheaply, e.g. myFunction = function(arg1, arg2){alert(arg1 + arg2);};
April 24th, 2007 at 1:50 am
Tom — OK it does help when thinking about things in some way. Perhaps I am getting the words wrong, but JavaScript does use the this. I’m not the greatest functional programmer, and don’t know the theory/jargon as well as some, so the first thing that pops to mind when I hear the word “curry” is a good Indian meal.
For me thinking in terms of pythons self, where the self reference gets automagically passed by the interpreter helped my understanding. The thing with python is that the self parameter is explicate in methods, in JavaScript it isn’t so in thinking through the idea of how this works, the concept of self helps to understand, while of course it won’t be exactly the same.
Adam — You are right of course. I didn’t mean to give the impression that new Function is a good approach. Some of the examples that I have seen of it are much better served by the lowercase function approach (which I mentioned above in the prototype example).
April 24th, 2007 at 2:37 am
Sorry. I was in a rush. Here are examples. Python:
onSubmit = form.onSubmit
onSubmit() # Passes in the correct ’self’.
unboundOnSubmit = Form.onSubmit
unboundOnSubmit(form) # Requires explicit ’self’ parameter.
JavaScript:
form.onSubmit(); // Passes in the correct ‘this’.
var onSubmit = form.onSubmit;
onSubmit(); // Leaves ‘this’ undefined.
onSubmit.apply(form); // Requires explicit ‘this’ when called this way.
April 26th, 2007 at 2:07 am
Thanks for the info Tom. I’ve made an update to warn people not to take the python/javascript analogy too far.