Our first version will do nothing—literally. It will block all links on this page. Put this into your scripts.js file:
function manageLinks(event) {
return false;
}
document.onclick=manageLinks;
Save scripts.js into the same folder as 1941.html. Reload 1941.html in your browser. Try clicking on some of the links: none of them should work.
If the links do work, you’re going to need to track down the error. In Firefox or in Safari, you have an error console that will display any errors in your page, as well as the line those errors occurred on. If you’re not already using one of those browsers, you’ll need to download the latest version and use it for testing your scripts.
Block all links: Functions
What do these four lines do? The first three lines create a “function”. A function is a collection of scripting lines that you can call by name elsewhere in your script file and anywhere on your web page. We’ll be creating a lot of functions over the course of this tutorial. This function has the name “manageLinks”. The lines of a function are contained between the opening curly bracket and the closing curly bracket.
Functions often accept “parameters” or “arguments”. The manageLinks function accepts one parameter, which it names “event”.
Functions often return data to whoever called the function. The manageLinks function always returns “false”. That’s its only purpose for the moment: it is its only line. All JavaScript lines that do something, such as the “return” line, end in a semicolon.
Objects and events
The final line overrides an event. The “onclick” event happens every time someone clicks something anywhere on the web page. The web page itself is an object. In JavaScript the web page is the “document”. We’re telling the document—the web page—that every time the visitor creates an “onclick” event (by clicking something) to call our manageLinks function.
So, what happens when the visitor clicks on a link on the web page? The link itself is an object, usually an HTMLAnchorElement (we’ll deal with that sort of thing later). Whatever object they clicked on generates an event, in this case an onclick, and starts bubbling that event up through the document. If the link is contained in a paragraph element, the onclick bubbles up through the paragraph. If the paragraph is contained in a body element, the onclick bubbles up through the body, and so on, until it hits the topmost parent of all of the elements in the web page, the document.
Once the onclick event hits the document, we’ve told document that all onclicks need to call manageLinks.
The manageLinks function always returns false. That tells the document not to do anything else. If we returned nothing, or if we returned true, the document would know to continue doing what it otherwise would have done. You can try that now. Change the ‘false’ to ‘true’, reload the web page, and try clicking some links. Now they’ll work.
Related Pages
