JavaScript with HREF : Using JavaScript inside the A Link Tag

javascript href

HTML is the standard language used to write web pages. It uses a group of tags placed in a certain format to create a web page. Your web browser can interpret these tags to display the web page to you. HTML, however, has several limitations. It cannot, for example, be used to make interactive web pages and it cannot be used to store data. A modern day web page (and, by extension, a website) is created by using several different languages, like XML, HTML, CSS and JavaScript. JavaScript is the language that adds interactivity to your web page. JavaScript lets your web page communicate with the server, retrieve information from it and then alter your webpage without the need to refresh it. When you are notified that you have received a new message up in the status bar, this functionality has been achieved with the help of JavaScript. To learn more about how JavaScript works with your web pages, take this course.

To build a good website, you should be familiar with the basics of HTML, JavaScript and CSS. Learning these languages isn’t that hard because of the sheer number of learning tools the Internet gives you access to. We have written several tutorials on the basics of these languages in the past. You can refer to any of them if you’re interested in learning how to build a website. We’ve also put together the ultimate website development course that teaches you how to build a solid, interactive website.

In this tutorial, we’re going to take a look at the HTML link tag and how you can call a JavaScript function inside it. Though this is a beginner tutorial, you’ll still need to be familiar with the basics of both HTML and JavaScript to understand it. If you’re new to JavaScript programming, you may want to take this JavaScript beginners course before we start off.

The A Link Tag in HTML

The A tag in HTML is used to create hyperlinks on a webpage. Clicking on this link tag will take you to another page elsewhere on the website or to another website on the Internet. The A link tag has several optional attributes like “accesskey”, which links a shortcut key on your keyboard to the link tag, or “type”, which specifies the MIME type of the link target. While you’ll rarely use these optional attributes, you will be using the ‘href” attribute of the link tag. The “href” attribute defines the target of the link -the address of the page you’re linking to.

Let’s write a simple “a” tag so you’ll see how it works:

<!DOCTYPE html>

<html>

<body>

<a href="http://www.google.com">Open a Search Engine!</a>

</body>

</html>

Here, you can see that the “href” attribute has been specified as http://www.google.com. It will create a blue, underlined hyperlink to the Google search engine. Once you click on the link, it will become red, which shows its active status. An already-visited link is shown in purple.

Instead of using just plain text as the medium for the hyperlink, you can use an image as well. For example, if you had an image called “image1” on your webpage, it could act like a hyperlink:

<!DOCTYPE html>

<html>

<body>

<a href="www.google.com><img src="image1.jpg" border="1"></a>

</body>

</html>

To learn more about HTML tags and how HTML programs work you can sign up for a Udemy.com course.

Using JavaScript inside the A Link Tag

The “href” attribute is a critical part of the A link tag. It can be even more useful if it’s used with JavaScript. You can call a JavaScript function from within the A tag by defining it in the “href” attribute. If you had a JavaScript function called “openwindow”, it could be called like this:

<A HREF="javascript:openwindow()">Open a New Window</A>

The browser will then search for a function called “openwindow ()” to execute within your program. What we’re doing is replicating the functionality of a normal button with the help of a hyperlink. The function to be executed will have to be written at the head of your program. You can do many things with it, that’s why. For example, you can get a new window to open when you click on a hyperlink within your webpage. Let’s write the code for that:

<head> 
 <SCRIPT language="JavaScript"> 
 <!--hide 
 function openwindow() 
 { 
 window.open('xyz.htm','jav','width=400,height=300,resizable=yes'); 
 } 
 //--> 
 </SCRIPT>

Once you’re written the code in the head section, create a hyperlink where you want it to appear on your webpage:

<a href="javascript:openwindow()">Open a New Window</a>

Now, when you click on the “Open a New Window” hyperlink, a new window will pop open in your browser. This window will have the dimensions 400 and 300 and it will be resizable. You will need to specify the web address of the window you’re trying to open, of course. In our example, we used the window “xyz.htm”.

You can also use an image with the href attribute. For example, if a user clicks on a small icon of an image, you can get a new window to pop open with the full-size version of that image. You can use the following code to get a new window to pop up if a user clicks on an image on your webpage:

<a href="javascript:openwindow()" ><img src="image1.jpg" border="1"></a>

If you have the full size version of an image on your webserver, you could get it to load in the new window.

You could also define a simple JavaScript function that displays the URL of the current webpage:

<!DOCTYPE html>

<html>

<body>

<p>Use the Hyperlink to display the Hyperlink of Current Page.</p>

<a href="javascript:myFunction()">Display URL</a>

<p id="example"></p>

<script>

function myFunction() {

document.getElementById("example").innerHTML = location.href;

}

</script>

</body>

</html>

This is a working program that uses the “location” attribute to retrieve and display the URL of the current open webpage.

You can practically link any kind of JavaScript function to your hyperlink. Some JavaScript functions will, of course, will be more useful than others. To learn other useful JavaScript functions, you can sign up for our advanced course.