SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How NOT to use JavaScript

    For people first starting out in JavaScript, you tend to look here and there and everywhere for new and inspiring ideas. Sometimes you even look up to the big sites. "Wow, apple.com, cnn.com, google.com" you state with glee. Maybe you even look at their sites to see how they code it. Well, recently browsing the web, I found that might not be such a good idea. Let's take a look at what multi-million dollar companies get from their websites:

    Macy's.com

    I have a credit card setup with them. Generally I use it to get gifts for my folks at my old place. With credit cards comes bills. So I go to their site to pay my bill. Gracefully I enter their url into the address bar, and am happily presented with a blank page! Wait wha...? So I take a look at the source... ENTIRELY JAVASCRIPT. What went wrong?

    Error: ScriptEngineMajorVersion is not defined
    Source File: http://www.macys.com/index.ognc
    Line: 22
    An undefined variable.. how sweet! Of course this totally throws firefox off the rest of the way. But even more interesting:

    Warning: Non-standard document.all property was used. Use W3C standard document.getElementById() instead.
    Source File: http://www.macys.com/index.ognc
    Line: 12
    This made me cry. Not using getElementById(). Ok, how many books DON'T tell you how to use this? I mean, I try hard to find any code that uses document.all, unless it's used in conjunction to check for certain browser features. Then I looked at the general code:

    Code:
          self.location.replace("http://www1.macys.com/index.ognc?bhcp=1");
        else self.location.replace("http://www1.macys.com/index.ognc?"+rs+"&bhqs=1");
      }
      else self.location.replace("http://www1.macys.com/index.ognc?"+rs+"&bhqs=1");
    Wow, javascript for re-location, how sweet! BRRT Wrong! Don't do this folks, use a server side language. In fact, if you're doing it by browser, you can easily find PHP or other classes that will detect the user agent and redirect accordingly. Ironicly enough I was able to get on my business by DISABLING javascript. That gave me a good laugh..

    Southern California Edison

    Ahh, the great SCE! Providing a good portion of Southern California with power. That said, you can imagine they've got big pockets to hire only the best in webdevelopers! So I go to pay a bill here, get to the bill payment section, fill out the stuff and finally press the "Submit Payment" button. I wait a bit and nothing? So I click again.. and nothing.. no response or "Loading" or anything. So feeling the general irony of the situation I check my javascript console:

    Error: click1 is not defined
    Source File: https://www.sce.com/CFI/opp/OPPayReview.asp
    Line: 24
    Wee, they used javascript to actually submit the form. Turn javascript off? Nope! It's a link button with javascript as the onclick event! This is a bad idea folks. You can make an HTML form with 2 submit buttons (there's even an <input type="image"/>!) and check on your server side logic which was clicked.

    Google

    No show stoppers here as far as navigation, but...

    Error: hp.isHomePage is not a function
    Source File: http://www.google.com/
    Line: 20
    Sweet! Undefined functions. Javascript console is your friend folks. Use it, train it, love it. This is something that can be caught with the most basic of QA tests. (Oh btw, google uses non valid html too)

    CNN

    Hey, looks like CNN's jumping on the AJAX bandwagon... or not:

    Error: uncaught exception: Permission denied to call method XMLHttpRequest.open
    When you're as big as CNN, hiring someone that does a bit of research on AJAX before going off and implementing it like that sounds reasonable doesn't it? (Oh, and CNN uses tables for their layout, making it extremely slow to render).

    So remember folks, before you take scripting advice from a major site, check your javascript console.

  2. #2
    SitePoint Zealot
    Join Date
    Nov 2005
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Although I use 100% valid xhtml (strict) and CSS for my sites I totally agree with Google to use invalid html with font tags. I think it's important for Google to use these old technologies so the site looks the same in every browser. I believe there is are good reasons why Google does this.

    Regarding the javascript in the above examples I just don't get it. Is getElementById() somewhat a new function?

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2006
    Location
    Manchester; UK
    Posts
    158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have to agree some sites that are big seem to rush when it comes to basic principals like coding their own site well or using correct Javascript and PHP when needed.

  4. #4
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by hannson
    Although I use 100% valid xhtml (strict) and CSS for my sites I totally agree with Google to use invalid html with font tags. I think it's important for Google to use these old technologies so the site looks the same in every browser. I believe there is are good reasons why Google does this.
    This seems somewhat odd.. (I've never really heard that argument before, and I'd like to get other opinions on it ).

    Regarding the javascript in the above examples I just don't get it. Is getElementById() somewhat a new function?
    getElementById() is a standard javascript function, in fact it's part of the DOM standard. That said, using document.all when getElementById does a fine job as it is seems rather silly.

  5. #5
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Document.all is still use to support IE 4 and, yes, there are still IE 4 users out there. Win 3 can't use anything newer and Win 95 boxes with limited resources often can't support anything with a bigger footprint.

    While it is not unreasonable to want to support older systems, it does raise security issues to have interactions with systems that can be so easily compromised.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by hannson
    Is getElementById() somewhat a new function?
    getElementById is part of DOM1 and the latest and final Document Object Model stabdard is DOM3. All version 5 browsers support getElementById so you only need to use document.all and document.layers to support the version 4 browsers that only understand those. Of the two document.layers is probably more important because there is still about 0.03% of people using Netscape 4 while the number of people using IE4 is less than 1/10 as many. There are so many other things that wont work properly on such antiquated browsers than not supporting document.all and document.layers wont make a noticable difference for those people though because most people only code pages to support the last three or four browser versions at most and even supporting the last four means not having to worry about version 5 browsers any more except for IE5 and 5.5.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall
    . . .not having to worry about version 5 browsers any more except for IE5 and 5.5.
    But what about my Lynx?

    It should be noted that a sizable portion of the NS 4 users are probably employing older, hand-held devices. Those devices often don't support JavaScript, anyway, and introduce other complications, like screen resolution.
    Last edited by JVLB; Jul 9, 2006 at 10:22.

  8. #8
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If some ancient browser that doesn't support getElementById then you probably can't do anything useful anyway. Just let it degrade gracefully for these browser that no one uses anymore.
    Simon Pieters

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,869
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by JVLB
    But what about my Lynx?

    It should be noted that a sizable portion of the NS 4 users are probably employing older, hand-held devices. Those devices often don't support JavaScript, anyway, and introduce other complications, like screen resolution.
    These are good examples of why the Javascript should only be enhancing the functionality of the web page rather than the web page needing Javascript to run. Without Javascript enabled no document.getElementById, document.all, document.layer or any other code will run anyway.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    My bank's netbanking system is programmed in Javascript, with a bit of ActiveX on top. There is no HTML at all - everything is generated, even static contents. Guess how much that slows it down!
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  11. #11
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ActiveX? Ewww....

    I'd throw in the towel at that point and just do the entire thing in flash at that point

  12. #12
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Behold, they also use nested frames - generated in Javascript! My guess is that they want to make sure that no disabled users can use the site, by any means possible (check out the source on this entry page: <https://netbank.danskebank.dk/html/index.html?site=DBNB> - need I say that you can only use IE, unless you get some special hardware).
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  13. #13
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your maceys example is why in every javascript I write, I usually include a getObject function, which checks document.getElementByID, document.all, document.layers and even document.layers.testP.layers...
    (in that order, blessed be short circuit evaluation)... if you are GOING to start manipulating objects directly, for pete's sake test for ALL possible ways of getting an object, AND have a fallback plan for if they all fail. The biggest problem with most javascripts I see isn't just a lack of cross-browser testing or compatability, but TOTAL lack of any effort towards error handling.

    the self.location.replace is comedy gold - if for no other reason than it appears the javascript is calling some form of Server side script (hidden by the enigmatic ognc extension)

    Javascript for form submission has it's place, overriding for previews and/or but you should ALWAYS have a submit that is 'natural' if for no other reason than what you encountered - something goes wrong, the whole page is broken.

    The google example is surprising, as I've never seen it throw a javascript error - but then I don't use firefox as my primary browser because, well, apart from the reasons I posted in another thread, it's Javascript implementation leaves a LOT to be desired.

    One thing they've done in opera, is that they don't have a 'Javascript Console', they have a 'error console' - which shows you not only Javascript errors, but also CSS ones. This gets rather scary in terms of the sheer volume of errors thrown by various sites... A lot of them (like the ones thrown by THIS website) are just CSS 2 that's not adopted by the mainstream browsers yet (the overflow-x and overflow-y properties for example)... but a lot of it is the simple fact that for all the talk of standards and validation, the majority of websites do not validate, and do not look to validate any time soon - these sites run just fine as is, and getting any large entity to change everything because some 'comittee' (W3C) says so is... unlikely at best, naive at worst.

    Google, E-Bay, Yahoo, Amazon, IMDB - these are the 'powerhouses' of the web, yet none of them validate. Even relative newcomers like myspace and facebook don't validate... Hell, the only two 'major' sites I can think of that do validate are Wikipedia and Slashdot - in other words geek havens.

    Seriously, if those sites don't validate even CLOSE to correct (with stupid errors like not closing tags and such), you expect them to get their javascript correct? Please....

    Then there's AJAX... it's a cute idea and I could see some uses, but building a commercial website around it? I think not.

    All the examples present are cases of 'more complicated than needed' on the essential parts of the site. If it's something important that will cause the whole page not to function right if the javascript drops - you shouldn't be using javascript in the first place.

  14. #14
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by C. Ankerstjerne
    My guess is that they want to make sure that no disabled users can use the site, by any means possible.
    Welcome to the world of business, where if you expect them to bend over backwards to support 0.0001% of the population, you need to lose the rose colored glasses.

    It's about churning out something the majority of people can access as quickly and cheaply as possible... The question going through their minds isn't "Why is 82% of the world still using IE?" but "What the hell is wrong with the other 18% of people? Bah, it's 18%, screw it, we don't need them."

    I'm actually AMAZED as many business websites work in non-standard browsers as they do - in my mind this is more a testament to the alternative browser makers programming skills than it has anything to do with web standards or the site coders.

  15. #15
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    If only it was because it was more effective this way, I could accept it - but if the product is inferior to that of the competitor, then I fail to see the point.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  16. #16
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    18% is significant number. What business can afford to turn away one in five customers?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •