How Much Javascript Is Too Much?

[surefire]

At the risk of ruffling feathers, I'd like to open up the topic by stating that it's perfectly natural to want to pack our webpages with cool gadgets and gizmos.

 

But as webdesigners progress, they start to realize that loading a page full of javascript (or other code) has disadvantages:

• Not everyone can enjoy your javascript
  
• It can slow down your site, depending on the amount you use
  
• Some javascript snippets will turn away visitors
  
• As a general rule, search engines 'like' text links better than image rollovers
  

On the other hand, there are some things that javascript just seems born to do:

• Validating form input from users
  
• Easy navigation with drop down menus
  
• Popups used for useful communication... not advertisements
  

So is it possible to limit the use of javascript and still get a beautiful looking page?

 

Yes.

 

One solution for replacing rollovers is to use CSS. The advantage is that you can often get the same effect put use a text link in place of an image. The downside is that CSS standards are not uniform across all browsers and so rollovers are much easier.

 

Although form validation is often more user friendly with javascript, it can be accomplished with PHP too.

 

Here are some other 'rules of thumb' that most webdesigners agree with:

• Popups turn away visitors... it's overused
  
• If search engine placement is top priority, consider text links instead of rollovers, or create alternate pages without js
  
• Limit your use of flashing, moving, distracting javascripts on your page
  
• Try to avoid js that affects the function of your visitor's browser
  
• Understand that not all of your visitors have javascript operating on their system (but most do)
  
• Put your javascript in separate js files and link to them in your webpages
  

Personally, I try to use javascript only if there's no other way... not because javascript is bad... far from it.

 

The sites that I have built are revenue generators so my aim is to use every advantage possible for a better search engine ranking.

 

And if I can accomplish a task with CSS or PHP, I'll opt for that approach.

 

But I use javascript and will continue to do so. It's extremely handy.

 

Just make sure you aren't making your visitors wait while your neat code loads up.

 

The lists and advice I've provided are far from complete, so please add your own recommendations or feel free to disagree with my posts.

[rayners]

On the other hand, there are some things that javascript just seems born to do:

• Validating form input from users
  

Although form validation is often more user friendly with javascript, it can be accomplished with PHP too.

Just to mention something from a security standpoint, one thing to keep in mind with regards to using Javascript for input validation: Don't Assume It Worked! Input validation within the script itself is much more practical and secure. Give me five minutes and I can write a Perl script to send whatever input I want to the script, completely bypassing whatever Javascript is there.

 

Probably around 9 out of 10 web application vulnerabilities are from input validation errors (i.e. the input isn't validated correcty, if at all).

[surefire]

one thing to keep in mind with regards to using Javascript for input validation: Don't Assume It Worked! Input validation within the script itself is much more practical and secure.

 

I totally agree. As someone who uses database driven code to create and post content, I use at least two layers of server side code to protect the security of the site and the database... on top of any javascript validation.

 

One thing I like about form validation using js on the front end... is that the client doesnt' have to click the 'back' button to refill a form that didn't meet specifications.

 

I can think of ways to create the same or similar effect with server side scripting... but I guess that pop up alert box appeals to me.

 

Your comments on security are absolutely correct. Whenever you ask for user input... especially with text boxes in forms, you are really asking for trouble if you don't use good security checks.