ElectricType:Authoring : Main

How to Steal JavaScript

Page 3 — Functions (and Their Arguments)

Remember this part of the code from the example on the previous page?
function setBackgroundColor(color1, color2, color3, color4) { theColors = new Array(color1, color2, color3, color4); var whichColor = Math.round(Math.random()*1000) % 4; document.bgColor = theColors[whichColor];}
This is called a function, which is basically a set of related commands grouped together so they can all be executed at once. It's easy to spot a function because it (surprise!) always begins with the word function and is followed by the name of the function (in this case "setBackgroundColor"). The parentheses after the name contain the function's arguments. The body of the function is enclosed in braces ({ }).
Arguments, Variables, and Type
Sometimes a function needs to be told what to do. In the setBackgroundColor() example, you need to tell the function which colors to use. You do this by specifying arguments to the function within the parentheses, like so: <code>setBackgroundColor('red','green','blue','black');</code> (In this example, there are four arguments: red, green, blue, and black.)
Another way to separate specific information (such as the colors to be used) from the main function is to use variables or arrays.For example, we could have written our example using variables, like this:
var color1 = '#FF0000';var color2 = 'red';var color3 = 'green';var color4 = 'blue';function setBackgroundColor() { theColors = new Array(color1, color2, color3, color4); var whichColor = Math.round(Math.random()*1000) % 4; document.bgColor = theColors[whichColor];}
Variables are just a way to store information. The statement var color1 = '#FF0000'; says that the variable color1 should be set to '#FF0000'. And an array is just a list of variables:
theColors = new Array('#FF0000','red','green','blue');function setBackgroundColor() { var whichColor = Math.round(Math.random()*1000) % 4; document.bgColor = theColors[whichColor];}
The reason you need to know all this is that you may have to modify the values of variables and arrays to make someone else's script work for you. For example, if that person has a variable set to her site's domain (var siteRoot = 'http://www.aleeanne.org.uk/';), you would need to change that to your own domain to make the script work on your site.
The last thing you need to know about variables is type, which refers to the several different types of information that can be stored in a variable: strings, numbers, and objects. You don't need to delve too deeply into these different types, but you should know how to recognize them. Let's take a quick look at each of them.
Basically, strings are text, such as, "I am stealing JavaScript" or "Nadav is not a giant ant." Numbers are, well, numbers: 2 or 3,123. Strings are always written inside quotation marks, numbers are not. For example, 2 is a number but '2' is a string (similarly 2+2 is the number 4 while '2' + '2' is the string '22').
If you're really sharp you may have noticed that I sometimes use double quotes (") and sometimes use single quotes ('). JavaScript doesn't care which you use as long as you don't nest one kind within the same kind:
<body onload="alert("this is bad")"><body onload="alert('this is good')">
(If you can't tell the difference, look really closely at the quotation marks.)
The third type of variable, an object, is a bit more complex. Since you'll rarely need to modify them, we'll keep this section brief. Objects refer to parts of the page: The document is an object, each image is an object, a text field in an HTML form is an object. If you see something that looks like a string (such as a word in a function's list of arguments) but you notice it isn't enclosed in quotation marks, it's probably an object:
<body onload="alert(document.URL)">
The most likely reason you'll be dealing with objects is if the script you're stealing refers to objects on the page by name. Let's take a look at a little example. Type something into this text box and then submit the form:

Here's what the code that generated this form looks like:

<form name="myForm" onSubmit="alert('You entered: '
+ document.myForm.myTextField.value); return false;"><input type="text" name="myTextField"><input type="submit" name="Submit" value="Submit">
</form>
One of the most common problems you'll run into when you try to use someone else's code is that the script is expecting objects (such as form fields) to be named a certain way. To make the script work you either need to modify the script to match your own object names or name your objects to match the script.
One last thing is pretty important: Variables are objects too. For example, you could set a variable to store an object such as the page's URL:
var myLocation = document.URL;
Whew! I bet all that's a bit more technical than you thought we'd be getting. If it seems like a lot to digest, that's OK — just as long as you understand that if you need to change the information in someone else's script you also need to keep the variable types the same (if that person used a string you'll want to use a string too).
Calling Functions
How do you use functions, anyway? Well, there are two main ways to invoke (or call) a function. The most straightforward is to put the name of the function in between <script> tags like any other JavaScript command. For example:

<script></script>
Note how the arguments (the four colors) are specified inside the parentheses.
The second way functions get called is a bit more interesting. It's called event handlers, which requires a bit more explaining.
next page»

Dynamic HTML