JavaScript turns every web page into a collection of objects that you can modify and interact with. JavaScript turns everything that the visitor does into events that you can modify and intercept.
Go to http://www.hoboes.com/NetLife/Web_Scripting/Web_Scripting_Resources/ to download the resource zip archive and uncompress it. Open the file “1941.html” in your favorite text editor. There are several links on that page; some of the links are local (they go to hoboes.com) and some of them are not local (they go to Wikipedia and Amazon). We’re going to make the non-local ones open in a new window (or tab, depending on the visitor’s preferences).
Look in the HTML’s “head” area for a comment that says “put your scripts.js here”. Underneath that line, add this:
<script type="text/javascript" src="scripts.js"></script>
This line tells the browser to look for some scripts in the file “scripts.js”. We’re going to put our JavaScript code there. The syntax for the <script> tag is very similar to the syntax for the <img> tag.
The <script> tag can go anywhere in your document, but you’ll usually put it in the <head> area when you’re using it to include a file containing JavaScript. We’ll use it for other purposes later in this tutorial.
- Block all links
- Our first version will do nothing—literally. It will block all links on this page. Put this into your scripts.js file:
- Block external links
- 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.
- What element are we clicking on?
- If you haven’t already, try clicking on a part of the page that isn’t a link. The URL will be “undefined”. That’s because most elements don’t have an href attribute. They don’t have a URL. But they can still be clicked on. So what element actually gets the click? Let’s find out.
- Find the A tag
- Most elements are contained within other elements. What actually gets the click? The bottom-most element. That’s important, because sometimes the <a> tag is not the bottom-most element. Try clicking on the two images to the right and left of the headline at the top of the page. The alert box will say that the URL for IMG is undefined, but those images are linked. The problem is that it’s the <img> tag that is getting the click—the…
- Only manage valid links
- Notice one thing this function doesn’t do that it used to do: it no longer tells us that the URL for P is undefined. It doesn’t alert us on any click that doesn’t somehow bubble up to an <a> tag. We haven’t added any code to stop alerting us, so what happened? If you haven’t already noticed it in your error console, you should be seeing an error that “link has no properties” or “null value” when you try to click on a part of the page that…
- Block external links
- 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”.
- Pop external links
- Finally, we’re going to make this do what we planned to do all along: external links go into a new window (or tab), local links stay in the current window. We’re already set: we have the function doing something special if the link is an external link.
- Dangerous links
- Be careful how you use this knowledge. Designers love restricting their visitors, constraining their ability to leave the site and go somewhere else, restricting their ability to navigate except in predesigned paths. For the most part, you don’t need to open new windows for your visitors, because they can do that themselves if they want it.
- Highlight the relevant link
- One final step before we leave link-munging behind. While popping up the alert box, it would be nice to highlight the link they just clicked on. JavaScript has full access to the styles of HTML elements. We can set the background color of the link tag to, for example, bright red.
