Professional JavaScript for Web Developers

When starting for Fubra back in 2006 I would have probably described my knowledge of JavaScript as basic to say the least. Knowing how to alert a bit of text and pop up a confirmation box was sadly pretty much the upper range of my ability at that point in time.

Since then I have found myself purchasing and reading a number of web development related books, whether they be JavaScript, PHP, MySQL or CSS. Each one highlighted something that I either didn’t know or simplified something I may have known already.

The majority of my collection is made up of books from the O’Reilly collection, but I also own a number of the Wrox publications. My current favourite – or should I say most referred to – is the Wrox edition of Professional JavaScript for Web Developers by Nicholas C. Zakas.

One of the most useful features it offers are the comparisons between IE and the DOM, highlighting what is and is not available to you across them both. The many examples provided throughout the book cover numerous situations across all the major browsers and provide a deeper understanding of the differences and how to work around them.

Recommending this book to anyone with an intermediate knowledge of JavaScript is something I would do without hesitation. Having recently lent it to a friend of mine, I have however discovered that it may not be so suitable to those just beginning JS or anyone having little development experience.

The synopsis does explain that the book:

Quickly covers JavaScript basics and then moves on to more advanced topics such as object-oriented programming, XML, Web services, and remote scripting

I am always on the lookout for books of similar nature to this on the subject of JavaScript in order to expand my collection and knowledge, therefore any suggestions or recommendations that you may have are welcomed.

JS submit is not a function

Today I was asked by a colleague to aid them with adding functionality to a form that would allow it to be submitted by pressing ‘ctr + s’ keys.

As a group of web developers this key combination is something that comes almost naturally to us when editing and constantly saving code, so should prove a useful addition to the form that is not too difficult to implement.

I began by setting up the event observers to watch for the two required keys to be pressed.

Once the required key codes ( 17 and 83 ) were captured it should have been a case of simply referencing the form and applying the submit method.

document.forms['form_id'].submit();

To see if what was written so far would actually perform the desired action we tested the page using our default browser Firefox, only to discover we were receiving the following error:

document.forms.form_id.submit is not a function

This was all very puzzling but eventually resorting to a search on Google provided a number of answers.

It turns out that all our problems came back to the fact that the submit button on the form had been given the name of ‘submit’ – which is a JavaScript reserved word – resulting in ambiguity in the browser and therefore no longer referencing the method.

The solution to this is a very simple one – renaming the submit button to anything other than ‘submit’ or any of the reserved words in JavaScript.

JS String Splitting in Internet Explorer

Over the past few days I have been working on a JavaScript based syntax highlighted code editor to add to my JS Library (known to some as the Juice Library).

I wanted to split the lines of code displayed into a series of words with any spacing preserved, so started off by splitting each line on any none word “W”.

var words = line.split(/W/g);

This worked fine in Firefox, but when it came to IE the results were not quite what I was expecting. All the words were matched but all white space had been completely ignored, so instead I turned to using “b” as the delimiter.

var words = line.split(/b/g);

This took me a step closer to what was required but it was still not the desired result as I didn’t want any non-word characters to be grouped with alpha-numeric values, such as “123”.

I spent a little – in fact too much -time browsing the web for some pointers and came across an article posted on the SitePoint blog outlining the inconstancies of the String.prototype.split method across different browsers, which seemed explained the problem I was getting earlier but unfortunately offered no resolution.

Now to try and find a solution to all this.

Because splitting on “W” was almost correct I reverted back to using that and now knowing what I had read over at SitePoint I somehow needed to prevent any non-word character sets from being ignored but without affecting the output in any way.

One possibility that arose was to wrap use the special character of null “” around each section and then split on that value. I tried a long winded version of the following to see if it would take me any closer to the desired result and simplified it afterwords.

var words = line.replace(/(W)/g, '$1').split('');

The output form this was pretty much almost what was required in both FF and IE, however it does not ease my frustration in the time wasted coming up and researching into this solution.

I can now continue on with my syntax highlighter in peace, or at least until the next major cross browser issue arises.