Grinds my gears; Inline JavaScript
You know what really grinds my gears?
JavaScript embedded inside HTML; Why do we even need this functionality anymore? Are there any good arguments in its favour? Besides laziness.
Using event handlers in an external file (or even in a script block) allows you to keep your code and HTML separate and clean! This is really useful and makes for maintainable, easier to read and easier to document code. It also improves re-usability as its easier to move around and just re-map the event handlers without hunting through HTML to find them.
Event handlers are more powerful. Managing multiple handlers and re-using handlers on different elements and/or different events is far easier than doing the same in HTML. Particularly if you use something like jQuery and selectors.
…and that people is what grinds my gears!
Yeah, ok so for some simple examples and demo’s it is easier to add in-line code. It makes sense, so its just one file (ie. Google maps api code examples have css and js inline). However, with any serious website it doesn’t really make sense.
October 12th, 2008 at 3:17 pm
Actually sometime inline js is needed, for example when I need to generate some dynamic js using php. Of course I can put it in a js.php file, but then I’ll have to include the php config files again. So for me the best way to save loading time and bandwidth is putting the generated js inside HTML.
October 12th, 2008 at 3:41 pm
Thanks for the comment Gary.
Writing JavaScript with PHP sounds like its generally a very bad idea. I can’t think of a use case where you would want to do this or even need to do this. Can you elaborate further?
October 12th, 2008 at 4:34 pm
Gary is right. You can generate dynamic JS to answer queries. JSON is generally much faster to parse than XML. Packaging it in a separate file just adds overhead.
October 12th, 2008 at 4:54 pm
I still disagree. You can get JSON to the client side by doing a HTTPRequest or you could do it with a script tag including a file that outputs JSON.
The overhead is very minimal and unless your getting hundreds-of-thousands of hits a day clean and clear structure beats the minimal overhead anyday. I would like to see numbers or stats of this ‘overhead’ actually making an impact.
October 12th, 2008 at 5:33 pm
I don’t recall the PHP side of things, but on the Java side, without other mechanisms in place, I’ll often call an initialization function to pass in message resource or server-side-oriented values to proper externalized JavaScript, rather than put all the JS in the JSP page or running javaScript through the JSP processor. It’s just a cheap way of getting JSP tags evaluated into JS.
I don’t necessarily like it, but it’s often the easiest, quickest, and maintainable solution.
October 13th, 2008 at 5:42 am
especially with jQuery and its bind, you should have to rarely add inline javascript
if i do need output from PHP, i can do it in different ways, example
output a variable into the rel attribute, and use jQuerys .attr(’rel’) to access it
just an example, but theres generally a work around. be creative!
October 13th, 2008 at 2:24 pm
I rarely find a need to generate JS dynamically. Instead, what I usually do is include my JS file normally and dynamically create a JS object with the properties that are specific to that page.
For example, I would include in my JS file:
function alertPageType() {
alert(thisPage.pageType);
}
and in my dynamic file (any lang you want ) I would include
var thisPage = {
pageType: “some text”,
title: “some text again”
}
This helps us keep our code clean