Stealing

JavaScript Tutorial 3
Borrowing JavaScripts

Now, let's have some fun. Did you know that you really don't need to know anything about JavaScript to use some on your page? You can easily "borrow" scripts from other people that already know what they are doing.

So, here's the situation. You're out surfing the web, and you come across someone's page that does something cool with JavaScript. You think to yourself, "dude..., I would like that on my web page." You're sure you can replicate the HTML stuff that the script is working with (because you have completed the UserActive HTML Course), but you don't know anything yet about programming JavaScript.

No Problem. To borrow scripts from other web pages, you only need to know about four (4) things.

Number 1: - The Script Itself

You need to know where to get the meat of the script. JavaScripts are always located within script tags and script comment tags. Often the scripts are located in the head section of the HT ML document, but they can really be just about anywhere in the document source.

For instance a common script might look like this:

<script language=javascript>
<!--
function scrollit(seed)
{

var m1 = "First Section Of Your Message . . .";

var m2 = " . . . Second Section Of Your Message. . .";

var m3 = " . . . Third Section Of Your Message d . . .";

var m4 = " . . . Last Section Of Your Message . . .";

var msg=m1+m2+m3+m4;

MORE STUFF could go here.........
}
//-->
</script>

The Script tags are in red above. The script comment tags are in blue above.

The stuff between the tags composes the script itself. It can be located just about anywhere in the HTML source, but it is most commonly found in the head (between the <HEAD> and </HEAD> tags>. We'll talk more about what all of this stuff does later, but for now, just realize that this whole thing composes the script itself. This stuff would all need to be copied into your web page. It would be best if you place it in the same section of your page that you found it in the other page (i.e. i f it was in the head of the page you are borrowing from, put it in the head of your page.

Click here

to see a page with some JavaScript. View the source and see if you can locate the script. If you can (and you can) copy it and come back and paste i t into your document.

Number 2: - The Event

Second, you need to find the thing in the document that causes the script to run. This component is called an event handler. You'll learn a lot about these in Tutorial 4. Really, yo u don't need to know anything about events to borrow them.

Events are located within some tag - usually in body, input, or href tags - and specify when and why the browser should execute a series of commands. Since you haven't learned about all of the events yet, you need to find these c components another way. Here's a pretty reliable way to locate the right event handler. I first look for the function (you'll learn bout these later) that contains the script.

See the part that says function scrollit(seed)? It looks like this:

var m1 = "First Section Of Your Message . . .";

var m2 = " . . . Second Section Of Your Message. . .";

var m3 = " . . . Third Section Of Your Message d . . .";

var m4 = " . . . Last Section Of Your Message . . .";

var msg=m1+m2+m3+m4;

MORE STUFF.........
}
//-->
</script>

Do you see the red words that say scrollit(seed). This is the function name. How do I know this? Because it follows the word function.

Anyhow, once you find the function name up in the script itself, go to the body of the page you are borrowing from and look inside the tags - usually body, input, or href tags - for something that looks like "onSomeEvent=functionName(xxxx)". I n the case of the script that we are borrowing right now, the event is located in the body tag. It looks like this:

<body bgcolor=ffffff onLoad=scrollit(100)>

All event handlers begin with "on"

Click here to see that JavaScript page. View the source and see if you can locate the event that starts the script. If you can (and you can) copy it and come back and paste it into your document in the same place that you found it.

Number 3: - The Related Objects

The script that we are currently borrowing scrolls a message across that status bar at the bottom of the browser window. In the case of the script that we are working with right now, no objects need to be created for the script to run. But, let's suppose that instead of scrolling words across the status bar, the words were being scrolled across a wide text box (which can be done).

Click here to see what I mean.

In this case, the HTML in your page would have to provide a text box for the text to be scrolled in. You must reproduce the object that is used in the original page exactly in your HTML, including the name, size, or other attributes of the particular obj ect. So, if the original page uses a text box defined as follows:
<form name="announce"><input type="text" name="display" size=55></form> .

Failure to reproduce this in your source exactly could cause the script to run incorrectly or not at all.

Go try to reproduce this last example in your document. Be sure to reproduce ALL necessary components.

Number 4: - Copyright Infringement

So, all this time you thought you could just go out and take advantage of those fools that learned how to program JavaScript by borrowing their scripts and using them yourself.

WRONG!!

You should never just take a script without asking. True, no one will probably ever know, and even if they did, they probably wouldn't say anything. But, it is always a good idea - not to mention polite - to ask permission to use a script from the script owner.

Often, information regarding allowable usage, persons to contact in order to request permission, or other copyright-type information is included in the script itself (often in the head) and is commented out.

There, I've relieved my conscience, and won't feel like I didn't warn you if you decide to pirate someone's script.

Customizing the Script

You've learned about all of the things you need to borrow a script "as-is" from someone else's web site. But, you may be wondering, "This script I borrowed is great, but it has a really bad joke on it. How do I cus tomize it?"

Customizing is pretty simple. You know that message that you don't want? More than likely it is just typed into the JavaScript code. Look through the script itself until you find the text that you want to change (in the example script in your CodeRunner, we made it real easy to find the scrolling text value) and replace it with whatever you want to use as your scrolling message. Cool huh?

Save your work.

See you at the Next learning lab...