JavaScript for Non-Programmers
May 13, 2002
|
It's possible to use JavaScript in your Web pages without spending
months at night-school learning how the language works. Some
scripts are plug and play - drop them in the right place on your
HTML page and they'll work straight away. Others need only a small
amount of customisation to meet your needs. Here we take a look
at JavaScript from a non-programmers point of view.
|
There are usually two elements to a JavaScript program. One is
the main code snippet, which is usually placed in the <head>
section above the <body> in your HTML file. The other
element is the trigger that executes the main code. The trigger
is placed somewhere within your regular HTML. The
"proper" name for triggering is function-calling or
function-linking.
Here's an example. It's the JavaScript code for a rollover, an
image that changes when the mouse rolls over it, taken from
javascript.internet.com
The main code snippet is:
<SCRIPT language="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source! http://javascript.internet.com -->
<!-- Begin
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
// End -->
</SCRIPT>
And here's the code that triggers it:
<A HREF="the_page_you_want_to_move_to.html"
onmouseover="movepic('button','pic-on.gif')"
onmouseout="movepic('button','pic-off.gif')">
<IMG NAME="button" SRC="pic-off.gif"></A>
We'll come back to this example later. For now, it's included
simply to show what the two elements look like. We'll also look
at code for opening a new window, and consider the many
alternative methods of triggering that.
Simple Examples
Programmers don't want regular mortals to find JavaScript too
easy, so naturally there are a couple of exceptions to the
two-element rule. But happily the exceptions are even simpler.
Some JavaScript programs can be slotted directly into your HTML
code as a single item, rather than two items.
We'll look at a couple of these simple scripts right now. The
first is code that breaks any frame your page somehow finishes
up inside, and this is usually inserted near the top of the HTML
page. The second example is
"Page last updated on (date)" code, and this is usually
inserted near the end of an HTML page.
By the way, if any JavaScript experts or even wannabe experts are
still reading this, please leave now. You will be starved of
mumbo-jumbo. We're not even going to mention objects and operators
and properties and all that other nonsense that puts people off
using JavaScript. Go away!
Frame-Breaker
Here's the code for JavaScript that breaks an HTML page out of
any frame that contains it. This is used by sites that find
themselves captured as unwilling framed content within a
competitor's site, or for pages within an intranet where the
framing has got out of hand and it's essential to break out of
it to get some sanity:
<Script Language="JavaScript">
<!--
if (window != top) top.location.href = location.href;
-->
</Script>
All it does is check that the current page is the
"top" page, and changes its status so it becomes so if
it isn't already. And here's how the code fits in context near
the top of a real HTML page, just after the <body> section
begins, and just before the beginning of a 100% width positioning
table, the kind of all-encompassing table that's typically found
at the beginning of a Web page:
</head>
<body bgcolor="#FFFFFF"
leftmargin="0"
topmargin="0"
background="images/bckgrnd.jpg">
<Script Language="JavaScript">
<!--
if (window != top) top.location.href = location.href;
-->
</Script>
<table width="100%" border="0" cellspacing="0" cellpadding="3">
This script does not need to be triggered or otherwise activated
in any way. It will execute automatically when the page is loaded
in a regular browser.
Notice that the script begins and ends with comment tags,
<!-- at the start and //--> at the end. This makes it
invisible in browsers that are so old they don't even know what
JavaScript is.
Also you'll see at the beginning the expression
<Script Language="JavaScript">, this tells the
browser what kind of script it's about to encounter, and there's
a </Script> tag at the end to show the script has finished.
You may also see
<Script Language="JavaScript 1.2">. This tells
the browser it's about to encounter a slightly more advanced
version of JavaScript. Most current browsers are comfortable with
JavaScript 1.2, but a few older browsers can't understand it.
JavaScript for Non-Programmers
Date Last Modified
|
