My Javascript Mistakes

When I started using Javascript I had read a few tutorials, but I discovered there were many things they had not covered. There is a lot of information on the web but it helps if you search for a particular feature. Here are some of the problems I had.

• I wanted to call a function after a pause using the function 'setTimeout(command, pauseTime)' and pass an object as a parameter. It seemed as if I would have to convert the object's properties to strings and pass a big command string to setTimeout(). Then I remembered an old Netscape Javascript guide saying you could put parameters at the end of the setTimeout() call. This worked on my Konqueror browser but not with Internet Explorer. So I gave up and put the object parameter in a global. I later learnt that one solution is to make setTimeout() call an inner function which calls the target function. The inner function acts as a 'closure' and holds onto the variables in the enclosing function.
• I was worried that when a player pressed a button, the action would overwrite global variables being used by the main program thread that loops around. So I wrote my own locking code. Afterwards I learnt that Javascript acts as though it is single threaded, so no locking is needed!
• In Javascript I put a CSS class name in the 'class' property of an HTML element and it had no effect. You actually set the 'className' property. Likewise, when I used the 'for' property of a HTML label element, I got a syntax error. You use the 'htmlFor' property. I suppose Javascript thinks 'for' starts a 'for' loop.
• When I looked at the string value of a sparse numeric array, Javascript seemed to reserve space for elements that were not set. So I converted the array indexes to strings by adding 'x' to them, to make the array associative. I later found out that this is not necessary as ALL Javascript arrays are associative as they are stored as hashes.
• I wanted to do inheritance, so I used the 'superclass' property I had seen in a tutorial. I now know that Javascript uses the idea of 'prototypes' instead.
• My code that moved around HTML elements using 'nextSibling' or 'previousSibling' failed because I forgot about text elements created for the whitespace of my neatly indented HTML.
• I used the same global variables many times within a function. It is faster to make local copies and use them.
• I used '==' and '!=' until I had a subtle type conversion bug. I now use '===' and '!=='.
• I worried about my variable and function names being too long and slow. I even worried about whether '//' or '/* */' comments were faster. This was a waste of time as I later wrote a 'minimising' script that shortens names and removes all comments!
• I incorrectly commented out CSS rules with Javascript '//' comments. My browser does not report an error but sometimes seems to ignore a few rules afterwards.
• My Javascript 'minimising' script shortened some HTML element id's to names beginning with an underscore. But Internet Explorer then ignores them in CSS rules. The CSS Technical Recommendation does not allow underscores here either.
• I used 'this' in an inner function but it is not defined there. Now I set a variable 'that' to 'this' in the enclosing function and use 'that'.
• I tried to stop outlines appearing around, for example, links and input elements. But the outlines tend to reappear when the user navigates with keys such as 'tab'. I later read it is an accessibility feature that you should leave in.
• I wrote a lot of code that declared a variable in a 'for' loop, like 'for (var i = 0; i < 3; i++)'. This is a bit silly as the variable is available to the enclosing block. The same thing happens to variables declared within 'if' and 'while' blocks.
• I added my own functions to the built-in 'Array' object. But when I listed the elements of associative arrays with 'for in', I got my functions as well. One way to filter them out is to use the 'hasOwnProperty()' function.
• I used 'new Array()' as I read in an old Javascript guide that it was slightly different to using '[]'. But they are the same now. I have since read that it is faster to avoid using 'new Array()', 'new Object()' and 'new Function()' and instead use '[]', '{}' and 'function() {}'.
• I forget to allow for the user scrolling the page when positioning a message box near a button. I now add 'document.body.scrollTop' to the button's 'offsetTop'.
• I added some progress messages while the game started up, but they appeared all at once at the end. I had to add small pauses with 'setTimout()' to let the browser update the screen.
• I kept on checking how the browser returns the source element of a mouse event (i.e. 'event.target' or 'event.srcElement'). I now check the first time and remember the result.
• I used HTML text input elements for the game's settings screen. But when I reloaded the page, my browser asked if I wanted to commit the changes. To stop this I now create the text input elements dynamically.
• I highlighted the setting the mouse is over with 'onmouseover' and 'onmouseout' events. But if the user moves the mouse very quickly, the highlight is left on as the 'onmouseout' event does not fire. I put a 'onmousemove' event on the document body which checks to see if the highlight is on and whether the mouse is now outside the setting. However, this fires every time the mouse is moved and is slow.
• I often coded something like: 'var m = s [newline] + t;', rather than: 'var m = s + [newline] t;'. But the second may be quicker to parse as Javascript lets newlines end statements.
• I ended up with over a thousand global variables! I wish I had grouped them into several objects.
• I tried to optimise my script by coding loops with the test and decrement together like 'while(i--) {}'. But I found that thinking about this took too much and time and interrupted my flow of coding.
• I did not realise that the function 'parseInt()' really takes a second parameter - the 'radix' or number base, e.g. 10 or 16. Otherwise the function will accept numbers in a variety of bases. One example is '0xff' for 255.
• At first I was a bit scared of dynamic HTML, but it is not as difficult as it looks. For example, I would add a bit of text to an element by appending the text to the element's 'innerHTML' property. But is more precise and maybe quicker to use 'document.createTextNode()' and then add it with 'element.appendChild()'.
• I would set several style attributes of an element by individually setting them on the element's style object. But it is neater and maybe quicker to put the style attributes in a class and give the element that class.
• It was quite a long time before I tested the game on Internet Explorer (IE) and when I did it would not even compile! I now do this regularly and check any clever features on IE before going ahead. Where there are differences between browsers, I have found that often IE is correct according to the W3C Technical Recommendations.
• I coded error messages as alerts in each function. This made it difficult to change the format later. I wish I had used a common function.

I like Javascript. You just need a browser. No one person or company controls the language. It is small like 'C' with a 'library' of ever improving dynamic HTML functions. There are some clever bits like prototypes, rather like 'C' has pointers.