5

Disclaimer: I came to Programmers.SE to ask this question because I understand this is the place to ask this type of question, and not necessarily stackoverflow. If I am wrong, please close the question and direct me to a place where I may be able to discuss it.

I have noticed that people have been saying (in the year 2014) that we aren't supposed to use JavaScript in the href attribute of an HTML anchor tag. So then this function call:

<a id="expand-rail" href="javascript:callMyFunc()">Expand</a>

is discouraged, and over this it is preferred instead to attach an event handler to the onclick event of this anchor tag.

Why?

I'll take that this style of JavaScript function calls is very '90's, but what specific style guideline discusses this and weighs the pros and cons of doing it this was and recommends against it? I mean, there must be a pros and cons list, because I can think of some pros, like quick access to a function for a small HTML file, or easy readability on a small project. Yes, you have the cons, like not separating the view from the controller. I want to know who said this, why it is "generally understood", and where I can verify that.

Take something like this:

<span>
    Please <a id="page-reload" href="javascript:window.location.reload()">click here</a> to refresh
</span>

It is abundantly obvious what I am trying to do. Is it really necessary to separate the logic from the view in this case? If you agree with me that we can let this one slide, then where do we draw the line?

  • The opinion is to separate layout structure from functionality. The same goes for inline css, you should separate layout structure from layout styling. – The Muffin Man Nov 24 '14 at 20:37
  • You should cite some sources to validate the premise of your post. Otherwise you're into blog rant territory. – GrandmasterB Nov 24 '14 at 21:45
  • @GrandmasterB, I would not take into account any source that recommends one thing over another without showing a brief pros/cons comparison of the alternatives (but that's me). I think that the OP might have been told so by people he works with, or supervise him in any way (and thus can hardly be quoted like a persistent written resource). It might be that non of them gave reasonable explanations, he seeks answers here, which is not necessarily ranting, or a bad thing in general. – Ivaylo Slavov Nov 25 '14 at 7:34
8

It revolves around the principle of Unobtrusive JavaScript. The modern approach dictates that there should be a separation of functionality from presentation.

I hate to cite Wikipedia, but give Wikipedia's article on Unobtrusive JavaScript a read.

On a personal note there are three things about Unobtrusive JavaScript I quite like:

  1. Separation of concerns – My JavaScript is completely separate from my HTML code. It's in separate files and it encourages me to write clean JavaScript code. With inline tags I tend to dump piles of garbage into script tags. Here I'm writing very tight, modular, reusable, and maintainable JavaScript.

  2. Graceful degradation – When you use inline JavaScript like that, you're assuming that the client has JavaScript enabled. What happens if the client doesn't have JavaScript enabled? Does your site fail entirely? If you write unobtrusive JavaScript you're typically building a functional site with HTML then enhancing the experience with JavaScript. Without JavaScript your site's user experience is degraded, but still functional.

  3. Ask instead of assume – This ties in to what I was talking about with point number two. What you're encouraged to do is build a core experience using HTML + CSS then enhance it with JavaScript. In many of my sites (I'm a .NET MVC developer) I use jQuery UI to load partial pages for input forms. With unobtrusive JavaScript my site works perfectly with full page loads, and then is enhanced with AJAX requests that allow me to create modal dialogs. In my server code I actually dictate whether to return a View() (full layout) or PartialView() (plain HTML) based on whether or not the request is an AJAX request.

Let's look at your first example. Based on context I can assume that you have a section of your page that is hidden, and the link calls a function to expand that section of the page. You could be achieving that in one of two ways. You could be hiding the section with the content and then displaying it when the link is clicked (toggling CSS) or you could be making a call to the server to load the data and display it on the page (AJAX request). In its current form the content that the methods call displays is now inaccessible to your client. You could refactor your page to display all content on the page at load time if JavaScript is unavailable and then hide it when the DOM is ready, or you could have the link direct to a full page with the content then change that behaviour to an AJAX request.

  • Then I have a question about my code in the example. I have an anchor tag that when clicked is essentially supposed to take me somewhere. Normally, the HREF is a URL so when the link is clicked, the page follows that link. In the example, all I want is a page refresh, but I can't just link to "localpage", or to "#" because I want the page to refresh, so I use a URL-style HREF where it causes the navigation to act. Are you saying this is still bad, based on the principle of Unobtrusive JavaScript, because at the least, the page may have JavaScript disabled? (Even though it behaves like a link) – Michael Plautz Nov 24 '14 at 21:15
  • 3
    Also, it's not bad to cite Wikipedia. We are way passed the days 10 years ago where you could write whatever you want on there. It is so peer reviewed now. Find me a source of information that is more detailed and complete than Wikipedia (free or not). – Michael Plautz Nov 24 '14 at 21:16
  • @MichaelPlautz Wouldn't <a href="">click here</a> accomplish the same thing? Do you want to reload from the server or just refresh? – ravibhagw Nov 24 '14 at 21:27
  • As you bring that up, I see what you are talking about. If I wanted to reload from the server, I might have more involved JavaScript, which definitely belongs separate from the HTML. But in this case, I see what you mean, since HTML has this capability already built into it (to refresh via anchor tag). Per my question, where do you draw the line?, it is clear that all JavaScript belongs separate from your page content/layout (HTML), which belongs separate from your stylings (CSS). – Michael Plautz Nov 24 '14 at 21:37
  • 1
    I use Noscript for all of my personal browsing because of privacy concerns and I believe quite many more paranoid people such as myself do. – Jacob Bryan Nov 25 '14 at 18:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.