Rise, Lord JavaScript

The time has come. JavaScript will rise again from its hidden trenches.

Jeremy Keith recently held his JavaScript presentation The Behaviour Layer at the @media conference in London, and from what I’ve heard and read, the crowd went Oooh and Aaah when he introduced the concept of the DOM and how to write unobtrusive JavaScript.

I reacted in two ways when I heard about his presentation and the crowd reaction:

  1. It’s very good and about time that this is being focused on.
  2. Even though it seems like it was a good presentation, given the slides, how come the crowd reacted that way? Shouldn’t they already know about this? The way I see it, interface developing consists of three layers, where JavaScript correspond to the behavior/interaction layer. When developing web interfaces, you should be aware of all three and the possibilities and caveats they present.

For a long time, JavaScript has had a bad reputation that I don’t think it has deserved. It’s been based on lack of knowledge and common misconceptions that has spread like a virus. Let me meet some of them:

 

JavaScript doesn’t work in all web browsers

This belief is based on an old era, the so-called browser wars days, when IE 4/5 and Netscape 4 were fighting for domination. And we all know how that went…
Nowadays, if you write proper scripts according to the standardized DOM, also known as DOM scripting, you will target virtually every web browser in the market. For a comparison, you will even get more widespread support than CSS 2 has!

The other day, I was at a seminar by one of the leading CMS manufacturers in Sweden, and one question was if the next version of their product would stop being JavaScript dependant, as opposed to the previous version (this is largely due to using Microsoft.NET and what it generates), or if its scripts would at least work properly cross-browser. The reply:

The problem we had was to get the scripts to work in all web browsers

The way he saw it, the problem was in the web browsers, not in the product, which upset me. At that time, I had to step in to explain that the reason why their scripts didn’t work is because Microsoft.NET’s controls generate JavaScript that is based on the scripting model Microsoft introduced with IE 4, and that’s the reason why they didn’t work in any other web browser.

If Microsoft only had taken the proper time and decision to implement proper DOM scripting, which is supported in any major web browser, as well as from IE 5 and up on PCs, things would’ve been fine. So, let’s kill this misunderstanding once and for all that has flourished for a long time. Correct written scripts will work in any web browser.

 

JavaScript doesn’t rhyme well with accessibility

JavaScript does rime well with accessibility, but some/many things that have been developed with JavaScript haven’t. The reason for this is web developers not being aware of how it should be done correctly. However, believe me, when it comes to writing JavaScripts every serious web developer focus as much on accessibility and standards as those people promoting it. And when JavaScript is used, be it for form validation on the client side to avoid unnecessary roundtrips, for dynamic menus or something else (why not an AJAX application?), a non-JavaScript alternative should always exist to cater for those where JavaScript isn’t a possibility.

 

So, how do you create a page with unobtrusive and accessible JavaScript? Humbly, I think my pictures page of my Rome trip web site is a pretty good example of how to enhance the experience for those where JavaScript is an alternative but still functional for those cases where JavaScript can’t be used.

It has a script that triggers when the page is loaded, only for those web browsers that support the document.getElementById, and this is verified through object detection. It then adds onmouseover and onmouseout events to the small images. When they are hovered, they show a larger version of the current image. What this means is that the HTML isn’t cluttered with tons of event handlers and for those who don’t have JavaScript activated/have a web browser that doesn’t support it, the small images are also linked to the same larger version of it. It also means that the script won’t throw an error in web browsers that dont have the necessary support, thanks to object detection.

 

So now, get out there! Write your DOM-based JavaScripts that will enhance your web sites profusively!
Trust me, it’s a whole new level that will give you a big smile when you realize what you can accomplish! 🙂

 

Related links

24 Comments

  • Jeremy Keith says:

    *cackles and rubs hands gleefully*

    Goooood! Now fulfil your destiny and take CSS's place at my side.

  • Robert Nyman says:

    Jeremy,

    Thanks for visiting! 🙂

    And yes, I think it's about time now for JavaScript to take its proper place.

  • sil says:

    Good article. I agree that .NET stuff generates IE-specific JavaScript, which is a problem, but people were right when they asked if "the next version of their product would stop being JavaScript dependant", because JavaScript is a layer above a non-JS-dependent website. No site should require JS to work; if you can get it to that state then you're almost obliged to write cross-browser code…

  • I only saw the light and moved to the white side about a year ago. Suddenly, after seeing an alternative for _blank with a XHTML doctype and reading unobtrusive Javascript, I realized it's all good. It's simply brilliant, actually.

    With AJAX, the word is getting out (shows what some abbreviation for an old technology can do) and I'll do my best doing so as well. Wouldn't mind learning some more myself either 😉

  • Nooooooooooooooooooooooooo…..!!!

    Sorry, just couldn't resist. ^_^

  • Robert Nyman says:

    sil,

    Thank you, and welcome here!

    No site should require JS to work

    You're absolutely right, the JavaScript layer is an enhancement layer and there should alwaws be alternatives to it.

    Jeroen,

    The light is bright and shiny, isn't it? 🙂

    Walk towards it, walk!

    However…

    Generally speaking, this is not about taking over with JavaScript or replacing anything else, it's about doing that little extra while offering alternatives and not sacrificing accessibility.

    Faruk,

    Ha ha! 🙂

    If you want to be a rock star in web developing, you need to be brilliant at JavaScript too!

  • Well said, although many absolutes in there and only a sith lord would speak in absolutes. 🙂

    However, albeit separated, I don't consider your photo site a good example of how JS can enhance usability. I started clicking the images until I realised that you show them on hover.

    You broke a convention of thumbnail galleries, and that confuses users. It also assumes I can use a mouse and my screen is big enough to show the image, which it isn't, as this screenshot proves.

    I wrote an example of a DOM/CSS gallery some time ago, that does follow the separation principles and does not break conventions.

    More about it here:

    http://www.icant.co.uk/articles/dyngallery/

  • Robert Nyman says:

    Chris,

    Thanks for your comment. Absolutes might be good sometimes. 🙂

    Regarding the image gallery:

    Yes, maybe a text indicating that images are being loaded should've helped before you clicked them. However, my intention was that the initial explanation in the page would help the user to understand that.

    It assumes you can use a mouse, but it isn't a requirement since you can <code>Tab</code> to each image and press <code>Enter</code>.

    Also, my main motivation was to break the convention of thumbnail galleries, and to simplify viewing every image without the need to click them or go to another page.

  • Assuming people read texts above thumbnail galleries explaining their functionality is like assuming that users have 2mb DSL connections to see your site exclusively (instead of downloading stuff). It just does not happen 🙂

    As you have seen in the screenshot you did not simplyfy my viewing experience at all. Sometimes conventions are there because they proved to be working.

    A workaround would be to make the images clickable, and offer a checkbox to turn on the mouseover.

  • Robert Nyman says:

    Chris,

    Well, call me naive, but I thought it would happen. 🙂

    And as for the screenshot, it's a web browser with many extra toolbars, an image in the top line hovered and the page scrolled down a bit.

    Given, with a certain height of the web browser window it works fine. To me, it was worth the risk with advantages I think the user got.

    But it's all in the eye of the beholder, I guess… 🙂

  • Given, with a certain height of the web browser window it works fine. To me, it was worth the risk with advantages I think the user got.

    The user being you in this case. It is the same problem with multi level dropdown navigations. You don't know the space you have to play with on the visitors' viewports, and when you only do mouseover (without any delayed hiding)it can be really frustrating for the visitor to try to scroll to see the whole picture and hiding it by that.

    This is where flash is cool, as you could shrink the image to fit the size and other shenanigans like that.

  • Robert Nyman says:

    The user being you in this case.

    Yes, and all the visitors to the web site that I've gotten feedback from that have appreciated a different approach. 🙂

    But of course it's always a discussion with the viewport and what risks you're willing to take.

    There will always be a minimum size for a web site to be optimally experienced.

  • Alessandro Fulciniti says:

    Hi Robert, I agree that “interface developing consists of three layers” but a point is that Javascript, in a more general view, it’s not only about behaviour. You’ll find some reflections, toghether with my tiny point of view in my article Javascript: what’s next?”.

  • Robert, you're going to love my gallery 🙂

  • Robert Nyman says:

    Faruk,

    I'm sure it will be.

    I really hope it will have some lovely scripts then? 🙂

  • Sacha says:

    Hi Robert

    Your article is truly inspiring – I immediately sat down to add some JavaScript to my web site. But not some kind of useless stuff that no-one needs, but a quite sophisticated form checker. It’s not finished yet as I haven’t coded JS for years, but I’m glad I startet. It’s very interesting (especially the DOM, and as long as users without JavaScript don’t have any disadvantages, I don’t have to feel bad.

  • Robert Nyman says:

    Alessandro,

    I've read your article now, and I wouldn't call your point of view tiny! 🙂

    But in general, you are absolutely right. My purpose with this post is to pique the curiosity about JavaScript and to get those who do't use it today to start playing around with it.

    Me having built a kind of Web OS based on JavaScript some years ago, I then did definitely more than event handling.

    With this post, however, what I was looking for was a reasonable introductory level to reach as many as possible. I think to present all the possibilites available with JavaScript at this initial state would be a bit overwhelming for some.

    But for those of you interested in delving deeper into JavaScript right away, I recommend you taking a look at Alessandro's article.

  • Nicholas says:

    Nice write up. The JavaScript misconceptions haunt me to this day. I couldn't hammer home enough to people that JavaScript should be used to enhance the user interface rather than define it. But alas, drag and drop is soooooooooo cool! 😉

  • Robert Nyman says:

    Sacha,

    That's great to hear! 😀

    My original intention with this post was to get people to realize all the ways they can accomplish enchancements with JavaScript.

    Nicholas,

    Welcome here!

    Enhancement is the keyword. And yes, drag 'n' drop rocks! 🙂

    Good luck with the sales of your book!

  • Bryce Fields says:

    Has there been a "You were the chosen one!" joke yet?

    I think you omitted what I consider to be the biggest myth of all concerning JavaScript, and that is that 10-15% of users disable it. Has anyone ever tried to disable JS in IE? Do you expect the AVERAGE user to be able to do that, let alone 10-15% of them???

    It has long been my personal belief that JavaScript "metrics" have been thrown off by bot traffic and poor user agent detection. But it's just a theory. I've no hard numbers to back it up.

  • Robert Nyman says:

    Bryce,

    Thanks for your comment.
    No, no such joke yet… 🙂

    Disabling script in IE is definitely not an easy task, so you might be on to something. Naturally, it’s very hard to back this up with facts, everyone has their own way of gathering statistics.

    I don’t know if this is the best example, but TheCounter’s JavaScript statistics for May 2005 show a pretty different figure.

  • […] Ein Lob auf Javascript und warum es so verteufelt wird.Ich habe immer noch meine großen Abers bei Javascript. Vielleicht weil ich kaum gute Scriptler kenne und ich eigentlich meist damit kämpfe und auch weil Entscheider über die großen Budgets manchmal echte Krüppel-PCs haben und Javascript dann doch nicht funktioniert. Was da gesprochen wird aber klingt vernünftig und bemerkenswert. […]

  • […] Partly inspired by Robert Nymanâ??s recent post about JavaScript […]

Leave a Reply to Robert Nyman Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.