Ifs and whiles will constitute the bulk of your more complex functions. The purpose for which manageLinks has been building to is to treat external links different from local links. You might guess from that, that we’re going to use an “if” to do something like “if the link is external, do this, otherwise, do that”.
If you guessed that, you’re right. Let’s continue to build this script slowly. We know how to block links, and we know how to let them work normally, so let’s block external links and allow local links to work normally.
The first thing we need to decide is, what is an external link? When you’re programming, you need to know the precise conditions that you want to act on. What are the conditions that make a link external?
In this example, we’ll decide that “external” links are links that don’t go to www.hoboes.com. Any URL that doesn’t begin with http://www.hoboes.com/ is an external link.
Replace manageLinks with this:
function manageLinks(event) {
var link = event.target;
//go up the family tree until we find the A tag
while (link && link.tagName != 'A') {
link = link.parentNode;
}
if (link) {
var url = link.href;
var linkIsExternal = url.indexOf('http://www.hoboes.com/') != 0;
if (linkIsExternal) {
return false;
}
}
return true;
}
If all goes well, you should now be able to follow any link that leads to the www.hoboes.com web site, but be blocked from following links that don’t go to www.hoboes.com.
String methods
Strings in JavaScript are objects just like HTML elements are. They have methods and at least one property (length). One of the methods that strings have is indexOf. The indexOf method accepts as its parameter a string of text. It returns the location of that string of text in itself. If the string of text doesn’t appear anywhere, indexOf returns a negative one.
Test this using your browser. In your browser’s URL bar, type:
javascript:window.alert("hello world".indexOf("world"))
The alert box should say “6”, because “world” starts at location 6 in “hello world”. Now, type:
javascript:window.alert("hello world".indexOf("ll"))
It will come back with “2”, because “ll” starts at location 2 in “hello world”.
Notice that “w” and “l” are the seventh and third characters respectively in the text “hello world”. JavaScript, like many programming languages, starts counting at zero rather than one. This is a useful feature in other situations but it can be a bit confusing when working with string indexes.
javascript:window.alert("hello world".indexOf("hello"))
Comes back with “0”. When a string begins with the string sent as a parameter to indexOf, we’ll get back a zero. So if a URL begins with “http://www.hoboes.com/” url.indexOf('http://www.hoboes.com/') will be zero. Otherwise, it will either be -1 or (unlikely) something greater than 0.
Conditionals in the wild
Conditionals can be used outside of while loops and if statements. Variables can contain true or false just like they can contain objects and strings. A conditional produces true or false no matter where it is at. This means that “url.indexOf('http://www.hoboes.com/') != 0” (read as “url.indexOf('http://www.hoboes.com/') is not equal to 0”) is either false (if the URL begins with http://www.hoboes.com/) or true (if it doesn’t).
This makes the variable linkIsExternal either true or false.
And this makes the if statement return false if the link is external (linkIsExternal is true).
We already know that if the function returns false, it blocks the visitor from following the link.
If there is no link, or if linkIsExternal is false, the if doesn’t do anything, and the script continues on until it reaches “return true”.
Related Pages
