When Do I Need to Specify the JavaScript Protocol

When do I need to specify the JavaScript protocol?

The javascript: pseudo-protocol on event handlers will be only ignored, you don't need it, the JavaScript engine will interpret javascript: as a Label Statement.

A label simply provides an identifier to a statement, and lets you refer to it elsewhere in your program.

IMHO, this pseudo-protocol is only useful for bookmarklets...

What does the JavaScript pseudo protocol actually do?

The JavaScript: TYPE/LABEL/PREFIX (could not find the actual name for it) in the event handler serves one purpose only:

In Internet Explorer (which supported VBScript as a browser language),

IFF the FIRST script on the page is NOT JavaScript, inline JavaScript on the rest of the page had to have javascript: prefixing it.

It is not to be confused with the javascript: protocol in the href (which, by the way, also should be avoided). href="javascript:..." is only ever needed in old netscapes in the AREA tag. When you see the href="javascript:void(0)" someone needs to use onclick="....; return false" instead, unless they put it there to alert the user that the link is a javascript driven one. It will fail if JS is turned off.

Even better is to remove inline event handlers and use addEventListener - delegate when more than one element that needs the same eventListener.

I looked for the official documentation from msdn, but here are discussions to back me up:

Calling VBScript from Javascript

Internet Explorer defaults to the language of the first script element
it parses. So if the first script element is javascript, you shouldn't
need to specify "javascript:" in your event handler.

https://www.webdeveloper.com/forum/archive/index.php/t-135462.html _{(link not working anymore)}

You have to tell IE you are using VBS AND JScript, otherwise the
assumption is all functions are VBS in this instance. Either add a
(empty?) JavaScript script element [at the top of your page] or use the jscript: protocol on the
onchange.
onchange="jscript:location.hash=this[this.selectedIndex].value;"

Example

<html>
<head>
<script language="VBScript">
' some vbscript here forces the default language
' of the page to be VBScript and not jScript/JavaScript
</script>
</head>
<body onload="javascript:alert('I am inline in an event handler - boo me')">
.
.
  <a href="..." onclick="javascript:alert('and so am I'); return false">Click</a>
.
  <a href="javascript:alert('The javascript: PROTOCOL is NOT the same')">Click</a>

</body>
</html>

Do you ever need to specify 'javascript:' in an onclick?

Some of the responses here claim that the "javascript:" prefix is a "leftover from the old days", implying that it's intentionally, specially handled by the browsers for backwards compatibility. Is there solid evidence that this is the case (has anyone checked source code)?

<span onclick="javascript:alert(42)">Test</span>

To me, this just reads as:

javascript:
    alert(42);

Meaning, that "javascript:" is just a label and has no effect. This works, too:

<span onclick="foobar:alert(42)">Test</span>

Update:

I did a little experiment and it turns out that, yes, "javascript:" is handled specially by IE, but definitely not so by Firefox, Safari, Opera or Chrome:

<span onclick="javascript:while (true) { alert('once'); break javascript; }">Test</span>

On non-IE, this will just alert "once", once and then break out of the loop. On IE, I get a "Label not found" error. The following works fine in all browsers:

<span onclick="foo:while (true) { alert('once'); break foo; }">Test</span>

Update 2:

I just realized the link http://crisp.tweakblogs.net/blog/the-useless-javascript-pseudo-protocol.html in one of the answers above pretty much talks about the same thing.

Why is it bad practice to use links with the javascript: protocol?

The execution context is different, to see this, try these links instead:

<a href="javascript:alert(this.tagName)">Press me!</a> <!-- result: undefined -->
<a href="#" onclick="alert(this.tagName)">Press me!</a> <!-- result: A -->

javascript: is executed in the global context, not as a method of the element, which is usually want you want. In most cases you're doing something with or in relation to the element you acted on, better to execute it in that context.

Also, it's just much cleaner, though I wouldn't use in-line script at all. Check out any framework for handling these things in a much cleaner way. Example in jQuery:

$('a').click(function() { alert(this.tagName); });

When were javascript: URLs (pseudo-protocol) introduced into the HTML standard?

It looks like Ian Hickson added the "Javascript Protocol" section to the spec (basically just to indicate an intent to define it) on Thu, 25 Jan 2007 20:12:17 +0000

(Earlier versions do mention "javascript: URIs", but mostly in comments, questions, and things to be done.)

The commit of Thu Mar 1 22:41:49 2007 +0000 ("behold: the javascript: URI") is the first to provide detailed semantics, although it relies on an external "JSURI" reference.

The commit of Fri Nov 15 15:56:16 2013 +0000 ("Move javascript: processing entirely into HTML") is the first that doesn't need the "JSURI" reference.

should I add javascript: in front of html tag function?

A better solution would be to avoid explicit use of JavaScript in your markup altogether and to use something like jQuery to extract it all to a separate file; you can then do something like this:

$(function()
{
    // This will be run when the document is loaded.
    alert('foo');

    $('#some-link').click(function()
    {
        // This will be run when the element with id `some-link` is clicked.
        alert('bar');
    });
});

Best way to use javascript in anchor tag

DISCLAIMER: Inline JavaScript is, generally speaking, a bad idea, and 99% of the time you're much better off separating concerns, and using a library, such as jQuery, or whatever similar toolset that your framework of choice recommends.

Nonetheless, to answer your question, if you must use inline JavaScript, I recommend that you omit the "JavaScript:" keyword. It specifies a "pseudo-protocol," and is not necessary for modern browsers to interpret the code. It is a relic from the last decade, and there is a bug with some versions of IE:

"There is one (somewhat obscure) bug with the javascript protocol - in
Internet Explorer*, it will think you are leaving the page when you
click the link. If you are using window.onbeforeunload, then your
navigate-away message will appear at this time. For this reason alone,
we've stopped using the javascript protocol completely so we don't
have this bug show up because we forgot to check for it when we add a
navigate-away message to some page."

When do I need to specify the JavaScript protocol?

https://bytes.com/topic/javascript/answers/504856-javascript-pseudo-protocol-event-handlers

When Do I Need to Specify the JavaScript Protocol