Intercepting Clicks: Block external links

  1. Block all links
  2. Intercepting Clicks
  3. What element are we clicking on?

Blocking all links isn’t particularly useful. Eventually we don’t want to block any links, we want the browser to treat some links differently.

Replace the manageLinks function with:

function manageLinks(event) {

var link = event.target;

var url = link.href;

window.alert("The url is " + url);

return false;

}

Save scripts.js and reload the web page, and now when you click on a link an alert box will pop up telling you what the URL of that link is.

Block external links: Properties

In JavaScript, objects have properties. The “event” that the browser sends the manageLinks function has a property called “target”. That target is the HTML element that the visitor clicked on. HTML elements are themselves objects with properties, and the <a> tag has the property “href” that corresponds to the “href” attribute in the HTML.

To get at the properties of an object, use a period and then the property name after the object’s name. The target of the event object is event.target; the href of the link object is link.href.

Block external links: Variables

In scripting languages we often use variables to store data for later use. Here, we’re using the variable “link” to store the HTML element that the visitor clicked on, and we’re using the variable “url” to store the URL that that HTML element has in its href attribute. Later in the script, we use the “url” variable as an alert message.

When you create a variable inside of a function, you’ll want to put the keyword “var” in front of that line. If you don’t do that, the variable becomes “global” and is accessible in any other function, as well as throughout your web page. That might sound useful—and occasionally it is—but it also makes it very easy to confound two supposedly different variables that happen to have the same name. Keep your variables safe by using the “var” statement to create them.

Variables in JavaScript are case sensitive. URL and url are different variables. It’s generally a good idea to avoid confusing variable names (such as having both the variables URL and url in the same script). You should name your variables in a way that reminds you of what the variable contains. Often, your variable names will contain more than one word. You can use capital letters or underscores to mark the beginning of each new word. For example, manageLinks might instead have been named manage_links.

Block external links: Methods

Objects in JavaScript also contain methods. Methods do something. The window, for example, has a method called “alert” that displays a message. Methods are functions that are attached to an object. Just like functions, some of them accept parameters. The window.alert method accepts a string of text, which it displays in the browser. You will find window.alert extremely useful when testing your scripts.

Block external links: Strings

There are different types of variables in JavaScript. One common type is the string. A string is just a collection—a string—of text. In the latest version of our script, the text “The url is ” is a string; we can tell that it’s a string because it is between quotes. The variable “url” is also a string.

We can combine strings (“concatenate” them) using the “+”. Within the window.alert method, we concatenate “The url is ” with the url variable.

  1. Block all links
  2. Intercepting Clicks
  3. What element are we clicking on?