Read Also: How to use Round, Random, Min, and Max in JavaSript
You can use a javascript: URL anywhere you’d use a regular URL: on the “href” attribute of <a> tag, on the action attribute of a <form>, on the click event of a button, on the method like window.open(), etc.
Table of Contents
The syntax for writing JavaScript function
Following is the syntax for writing JavaScript function within href attribute of <a> tag.
<a href="javascript:myfunction();">JavaScript Link</a>
Similarly, the following is the syntax for writing JavaScript function within the action attribute of a <form> tag.
<form action="myfunction();" onsubmit="return validate(this);" method="post"> .......</form>
Examples
Here is an example, where you will get a new date using javascript function as a hyperlink.
<a href="javascript:new Date().toLocaleTimeString();"> What time is it?</a>
Read Also: How to Write JavaScript Function as URL in Hyperlink?
While using such functions on a hyperlink, some browsers like Firefox and IE execute the code in the URL. Then use the returned string as the content of a new document to display. Just as when following a link to an http: URL, the browser erases the current document and displays the new one. The value returned by the code above does not contain any HTML tags. Other browsers like chrome and safari do not allow URLs like the one above to overwrite the containing document, they just ignore the return value of the code. But they support the JavaScript code to display the returned content on the alert box as below.
<a href="javascript:alert(new Date().toLocaleTimeString());"> check the document without writing the docment</a>
In the above cases, the javascript: URL serves the same purpose as an on-click event handler. The link above would be better expressed as an on-click handler on a <button> element. The <a> element generally reserved for hyperlinks that load new documents. If you want to open a new document using a javascript: URL which does not overwrite the document, you can use the void operator with a window.open method is given below.
<a href="javascript:void window.open('https://siteforinfotech.com/p/javascript-programming-tutorials.html');">Open link on new window</a>
If you want to open a new document using a javascript: URL which overwrites the current document, you can use location.replace method as given below.
<a href="javascript:location.replace('https://siteforinfotech.com/p/javascript-programming-tutorials.html');">Open window using location.replace</a>
Like HTML event handler attributes, JavaScript URLs are a holdover from the early days of the web and generally avoided in modern HTML. JavaScript: URLs are very useful if you need to test a small snippet of JavaScript code. You can type a javascript: URL directly into the location bar of your browser. And another most powerful use of Javascript: URLs is in browser bookmarks.
Read More: How to Create JavaScript Bookmarklet?