JavaScript:
JavaScript is a programming language that allows you to put interactive things in your webpages. It can do lots of things, some of which are built-in, others you have to write yourself and then use. Like we did with CSS (Cascading Style Sheets), we're going to put our homemade Javascript functions in a separate file, called "scripts.js", and then in all of our actual webpages, we'll include a line of code somewhere between the <head> tags that tells our pages to go look for JavaScript code in that file:
<script language="JavaScript" type="text/javascript" src="scripts.js"></script>
The code in JavaScript is a little more complex that what we've seen so far, but if you break it down, it starts to make more sense. Example number 1, above, uses a function that I wrote, called "popUp". Here's what the code looks like:
function popUp(pagename) {
eval("page = window.open(pagename,mylittlewindow, 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=300,height=200');");
}
We'll go through it line by line:
function popUp(pagename) {
This starts the function definition. We're saying "here begins a new function, named 'popUp', and this function takes an argument that I am calling 'pagename', which will be whatever I give to it whenever I call (use) it." Not all functions take an argument; in those cases, you still have to put the parentheses, but you leave them empty.
eval("page = window.open(pagename,mylittlewindow,
Now we're inside the function and we're doing stuff. We're evaluating (doing) a statement that says "open a window and fill it with the contents of 'pagename', name it 'mylittlewindow'.
The rest of this is just some specifications for the window itself -- where it should be, how big it should be, whether or not it should have scrollbars, etc. The core functionality of this function is handled by the "window.open" part, which is built into JavaScript; all that our homemade function really does is dress it up and make it more flexible.
Now, to actually use this function, first make a normal webpage to be displayed in the popup window; in the example above, it's "littlepage.html", which is just a normal webpage (although it has a built-in JavaScript call whose purpose should be fairly obvious):
<html>
<head>
<title>hi!</title>
</head>
<body>
<p>hi!
<p><a href="javascript:close()">close me</a>
</body>
</html>
Then, in another page, where you want to make the clickable link that pops up the window, put
Click <a href="#" onclick="popUp('littlepage.html')">here</a> to show the popup!
In this function call, we're telling the function that it should use "littlepage.html" wherever "pagename" occurs in the function definition. (The link doesn't take you anywhere in this page, which is why it links to just "#". That's what you should use for "nowhere links" like this.)
The hardest thing about JavaScript, I think, is keeping all the punctuation straight. Look how many apostrophe's, double-quotes, parentheses, and semicolons there are to keep track of. Use the editor's syntax highlighting feature to help you keep them straight.
Take a look at the “alertme” function:
function alertme() {
alert('Thanks for pushing my button!');
}
And its use within a webpage:
<p><li>Click <a href="#" onclick="alertme()">here</a> to pop up an alert box.
Think about how you would modify that function to make it more flexible. In other words, how would you write the function definition to take any line of text and display it? How would you then call the new function from your webpage?
This is sort of silly -- “alertme” doesn’t do anything but use a built-in function, so it wasn’t necessary for me to write my own function around it. I could’ve just called “alert” directly from my webpage. How do you know which functions are built-in? I searched with Google for "JavaScript built in functions."
Here’s a more complex pair of functions:
function delay(gap) { /* gap is in millisecs */
var then,now;
then=new Date().getTime();
now=then;
while((now - then) < gap) {
now=new Date().getTime();
}
}
function annoyme() {
alert('Once upon a time, in a galaxy far far away...');
alert('Somebody wrote a story...');
alert('And to read the story...');
alert('You had to keep clicking in these alert boxes...');
alert('And it actually became rather annoying after awhile...');
alert('And so it stopped.');
delay(1000);
alert('Or did it?');
}
And the web page code:
<p><li>Click <a href="#" onclick="annoyme()">here</a> to read a story.
This does something interesting; the main “annoyme” function itself uses another function, called “delay”. It’s complex, but you can probably get the idea if you look at it for awhile. Note that I had to define the “delay” function BEFORE “annoyme” in order for “annoyme” to be able to use it; JavaScript code is parsed in order from top to bottom. One last thing -- image “rollovers” or “mouseovers”:
<a href="#" onmouseover="document.img1.src='pie.jpg';" onmouseout="document.img1.src='cheese.jpg';">
<img name="img1" src="cheese.jpg" border="0"></a>